/* La estanteria. Ported from the experiment to plain CSS: the Tailwind import it carried supplied a reset and nothing else (no utility class was ever used), so the reset below replaces it and the rest is unchanged. */ @font-face { font-family: "Newsreader Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/estanteria/assets/fonts/newsreader-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/estanteria/assets/fonts/newsreader-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/estanteria/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/estanteria/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Everything below is scoped to .press-experience on purpose. The shelf used to own a page of its own, so its tokens and its reset were global; inside the one-pager that would be a collision, because the landing carries its own --ink, --serif and --accent with different values. Tokens now live on the root node and inherit down, and the reset only reaches inside it. The standalone page keeps its own html/body rule in its . */ .press-experience { --paper: #eee8db; --paper-deep: #e4dccd; --paper-light: #f6f1e7; --ink: #25231f; --ink-soft: rgba(37, 35, 31, 0.62); --hairline: rgba(37, 35, 31, 0.19); --accent: #a74735; --serif: "Newsreader Variable", "Iowan Old Style", Georgia, serif; --sans: "Inter Variable", Inter, Helvetica, Arial, sans-serif; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* The reset the Tailwind import used to provide, kept inside the shelf. The scope sits in :where() so it adds no specificity: these rules must stay exactly as weak as the bare element selectors they replace, or the reset starts outranking the component rules it is supposed to underpin (a plain `.press-experience button` beats `.shelf-arrow` and eats its border). */ :where(.press-experience) *, :where(.press-experience) *::before, :where(.press-experience) *::after { box-sizing: border-box; } :where(.press-experience) :is(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol) { margin: 0; padding: 0; } :where(.press-experience) :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; } :where(.press-experience) :is(ul, ol) { list-style: none; } :where(.press-experience) :is(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; } :where(.press-experience) button { background: none; border: 0; padding: 0; cursor: pointer; } :where(.press-experience) button:disabled { cursor: default; } :where(.press-experience) :is(canvas, img, svg, video) { display: block; } :where(.press-experience) a { color: inherit; font: inherit; text-decoration: none; } :where(.press-experience) blockquote { quotes: none; } :where(.press-experience) :is(button, a, canvas):focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; } :where(.press-experience) ::selection { color: var(--paper-light); background: var(--ink); } .press-experience { position: relative; width: 100%; height: 100dvh; isolation: isolate; /* clip, not hidden: hidden leaves the stage programmatically scrollable, and focus jumps to overlays that wait translated below the fold were scrolling the whole page up. clip cannot scroll. */ overflow: clip; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), transparent 46%), var(--paper); } .press-experience::after { position: absolute; z-index: 14; inset: 0; pointer-events: none; content: ""; opacity: 0.18; mix-blend-mode: multiply; background-image: radial-gradient(circle at 12% 31%, rgba(45, 35, 24, 0.12) 0 0.7px, transparent 0.8px), radial-gradient(circle at 73% 69%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 0.7px); background-size: 7px 9px, 11px 13px; } .shelf-canvas { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; /* pan-y, not none: a vertical swipe has to scroll the page natively while a horizontal drag still browses the shelf. The engine already handles the pointercancel the browser fires when it takes the gesture over. */ touch-action: pan-y; opacity: 0; transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1); } .shelf-canvas.is-dragging { cursor: grabbing !important; } .is-ready .shelf-canvas { opacity: 1; } .site-header { position: absolute; z-index: 20; top: 0; right: 0; left: 0; display: flex; align-items: flex-start; justify-content: space-between; padding: 26px clamp(22px, 3.4vw, 56px); pointer-events: none; } .wordmark { display: flex; gap: 13px; align-items: center; font-size: 10px; font-weight: 650; letter-spacing: 0.185em; line-height: 1; } .wordmark__divider { width: 28px; height: 1px; background: currentColor; opacity: 0.4; } .edition-mark { display: grid; gap: 5px; justify-items: end; color: var(--ink-soft); font-size: 9px; font-weight: 560; letter-spacing: 0.17em; line-height: 1; } .header-actions { display: flex; gap: 24px; align-items: flex-start; pointer-events: auto; } /* The caption: the original block at the left margin, over a soft wash of paper so the type stays readable against the volumes. */ .browse-caption { position: absolute; z-index: 16; bottom: clamp(178px, 23vh, 228px); left: clamp(24px, 5.4vw, 92px); width: min(430px, 36vw); isolation: isolate; pointer-events: none; transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); } .browse-caption::before { position: absolute; z-index: -1; top: -42px; /* A quarter shorter than the block it used to be: the wash still starts and fades exactly as before, it just stops sooner. */ right: calc(25% - 31px); bottom: -38px; left: -92px; content: ""; background: linear-gradient( 90deg, rgba(238, 232, 219, 0.96) 0%, rgba(238, 232, 219, 0.82) 58%, rgba(238, 232, 219, 0) 100% ); pointer-events: none; } .is-focused .browse-caption { opacity: 0; transform: translate3d(-22px, 0, 0); } /* Scoped: the landing owns a .eyebrow of its own, so a bare rule here would leak both ways once the shelf lives inside the one-pager. */ .press-experience .eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 17px; font-size: 9px; font-weight: 620; letter-spacing: 0.19em; line-height: 1; } /* The number leads: bold, and about a third of the title's size. */ .browse-caption .eyebrow { margin: 0 0 6px; font-size: clamp(13px, 1.47vw, 24px); font-weight: 780; letter-spacing: 0.04em; } .browse-caption h1 { max-width: 420px; margin: 0; font-family: var(--serif); font-size: clamp(37px, 4.4vw, 72px); font-weight: 430; letter-spacing: -0.045em; line-height: 0.9; } .inspect-button { display: inline-flex; gap: 21px; align-items: center; margin-top: 26px; padding: 0 0 7px; border-bottom: 1px solid currentColor; background: transparent; cursor: pointer; pointer-events: auto; font-size: 10px; font-weight: 620; letter-spacing: 0.15em; text-transform: uppercase; } .inspect-button span:last-child { font-size: 14px; font-weight: 420; transition: transform 220ms ease; } .inspect-button:hover span:last-child { transform: translate3d(2px, -2px, 0); } /* El marcador: the save that used to sit on every atlas card, here beside the way in, so a volume can be kept without being opened. */ .caption-save { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 26px 0 0 18px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--ink-soft); cursor: pointer; pointer-events: auto; vertical-align: bottom; transition: color 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); } .caption-save svg { width: 15px; height: 15px; } .caption-save:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); } .caption-save.is-saved { color: var(--accent); border-color: var(--accent); } .caption-save[hidden] { display: none; } .shelf-arrow { position: absolute; z-index: 17; top: 49%; display: grid; width: 50px; height: 50px; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(238, 232, 219, 0.68); cursor: pointer; backdrop-filter: blur(10px); transition: opacity 260ms ease, transform 260ms ease, background-color 220ms ease; } .shelf-arrow:hover:not(:disabled) { background: rgba(246, 241, 231, 0.92); transform: scale(1.06); } .shelf-arrow:disabled { cursor: default; opacity: 0.25; } .is-focused .shelf-arrow { opacity: 0; pointer-events: none; } .shelf-arrow--left { left: clamp(15px, 2.7vw, 44px); } .shelf-arrow--right { right: clamp(15px, 2.7vw, 44px); } .arrow-icon { display: block; font-size: 19px; font-weight: 420; line-height: 1; } .shelf-index { position: absolute; z-index: 19; right: 0; bottom: 22px; left: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; transition: opacity 300ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } .shelf-index button { pointer-events: auto; } .is-focused .shelf-index { opacity: 0; transform: translateY(12px); } .is-focused .shelf-index button { pointer-events: none; } /* The accordion of bars: the index breathes around the active volume. */ .shelf-index__bars { display: flex; gap: 9px; align-items: flex-end; height: 34px; } .shelf-index__bars button { display: flex; align-items: flex-end; justify-content: center; width: 13px; height: 100%; padding: 0; background: transparent; cursor: pointer; } .shelf-index__bars button span { display: block; width: 3px; border-radius: 2px; background: var(--ink); opacity: 0.4; transition: height 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease; } .shelf-index__bars button:hover:not(:disabled) span { opacity: 0.8; } .shelf-index__bars button.is-active span { opacity: 1; } .shelf-index__bars button.is-hidden span { opacity: 0.14; } /* The ghost volume's bar: hollow, waiting. */ .shelf-index__bars button.is-ghost span { width: 5px; border: 1px solid currentColor; background: transparent; opacity: 0.55; } .input-hint { position: absolute; right: clamp(24px, 5vw, 82px); bottom: 8px; display: flex; gap: 11px; align-items: center; color: var(--ink-soft); white-space: nowrap; font-size: 8px; font-weight: 600; letter-spacing: 0.14em; } .input-hint i { width: 2px; height: 2px; border-radius: 50%; background: currentColor; } /* The ficha: the tall panel at the right, the book beside it. The paper margin eases in with the panel instead of appearing at once. */ .book-details { position: absolute; z-index: 22; top: 0; right: 0; width: min(620px, 41vw); height: 100%; opacity: 0; pointer-events: none; transform: translateX(44px); transition: opacity 520ms ease 380ms, transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 240ms; } .book-details::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgba(238, 232, 219, 0), rgba(238, 232, 219, 0.82) 10%, var(--paper) 24%), var(--paper); } .is-focused .book-details { opacity: 1; pointer-events: auto; transform: translateX(0); } .book-details__inner { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; padding: 27px clamp(28px, 4vw, 68px) 30px clamp(52px, 6vw, 98px); border-left: 1px solid rgba(37, 35, 31, 0.08); } .back-button { display: inline-flex; gap: 14px; align-items: center; justify-self: start; padding: 0; background: transparent; cursor: pointer; font-size: 10px; font-weight: 650; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; } /* The way back deserves to be seen: a full circle around the arrow. */ .back-button .arrow-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(238, 232, 219, 0.85); font-size: 20px; transition: background-color 220ms ease, transform 220ms ease; } .back-button:hover .arrow-icon { background: var(--paper-light); transform: translateX(-3px); } .book-details__position { display: flex; align-items: center; justify-self: end; margin-top: -9px; color: var(--ink-soft); font-size: 9px; font-weight: 680; letter-spacing: 0.18em; text-transform: uppercase; } .book-details__copy { align-self: center; max-height: 100%; padding: 34px 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; } .book-details__copy .eyebrow { margin-bottom: 20px; color: var(--ink-soft); } .book-details h2 { max-width: 500px; margin: 0; text-wrap: balance; font-family: var(--serif); font-size: clamp(42px, 4.35vw, 70px); font-weight: 440; letter-spacing: -0.055em; line-height: 0.91; } .book-details__author { margin: 18px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 18px; font-style: italic; } .book-details__description { max-width: 520px; margin: 34px 0 0; font-family: var(--serif); font-size: clamp(16px, 1.25vw, 20px); font-weight: 430; line-height: 1.38; } .book-details blockquote { position: relative; max-width: 475px; margin: 33px 0 0; padding: 0 0 0 23px; border-left: 1px solid currentColor; } .book-details blockquote p { margin: 0; font-family: var(--serif); font-size: 17px; font-style: italic; line-height: 1.32; } .book-details blockquote cite { display: block; margin-top: 10px; color: var(--ink-soft); font-size: 8px; font-style: normal; font-weight: 650; letter-spacing: 0.17em; text-transform: uppercase; } .book-details dl { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 20px; max-width: 500px; margin: 34px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hairline); } .book-details dl div { min-width: 0; } .book-details dt { margin-bottom: 5px; color: var(--ink-soft); font-size: 8px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; } .book-details dd { margin: 0; font-family: var(--serif); font-size: 14px; line-height: 1.25; } .focus-controls { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: 8px; font-weight: 590; letter-spacing: 0.11em; text-transform: uppercase; } .focus-controls span + span::before { display: inline-block; width: 3px; height: 3px; margin: 0 14px 2px 0; border-radius: 50%; content: ""; background: currentColor; } .focus-controls button { padding: 8px 12px; border: 1px solid var(--hairline); background: transparent; cursor: pointer; color: var(--ink); font-size: 8px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; } /* The two doors of the ficha: vivir la aventura, abrir el volumen. */ .book-details__ctas { display: grid; max-width: 500px; margin-top: 30px; } .cta-row { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px solid var(--hairline); background: transparent; cursor: pointer; text-align: left; text-decoration: none; } .cta-row:first-child { border-top: 1px solid var(--hairline); } .cta-row__label { display: block; font-size: 10.5px; font-weight: 780; letter-spacing: 0.15em; text-transform: uppercase; } .cta-row__note { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 8px; font-weight: 580; letter-spacing: 0.1em; text-transform: uppercase; } .cta-row__arrow { font-size: 15px; font-weight: 420; transition: transform 220ms ease; } .cta-row:hover .cta-row__arrow { transform: translate3d(2px, -2px, 0); } /* The welcome: what to do, shown until the visitor's first gesture. */ .entry-cta { position: absolute; z-index: 18; top: 72px; left: clamp(24px, 3.4vw, 56px); display: flex; gap: 13px; align-items: center; max-width: 330px; font-size: 11px; font-weight: 680; letter-spacing: 0.15em; line-height: 1.75; text-transform: uppercase; transition: opacity 500ms ease; } .entry-cta__glyph { font-size: 17px; font-weight: 420; animation: cta-sway 1.9s ease-in-out infinite alternate; } @keyframes cta-sway { from { transform: translateX(-3px); } to { transform: translateX(3px); } } .entry-cta.is-done, .is-focused .entry-cta { opacity: 0; pointer-events: none; } /* Until the first gesture nothing is chosen; the caption waits. */ .is-idle .browse-caption { opacity: 0; transform: translate3d(-22px, 0, 0); } .is-idle .inspect-button { pointer-events: none; } .loading-screen { position: absolute; z-index: 40; inset: 0; display: grid; place-content: center; justify-items: center; background: var(--paper); transition: opacity 720ms ease 120ms, visibility 720ms ease 120ms; } .is-ready .loading-screen { visibility: hidden; opacity: 0; } .loading-screen__mark { display: flex; gap: 5px; align-items: flex-end; height: 62px; } .loading-screen__mark span { display: block; width: 13px; background: var(--ink); animation: assemble 1.25s ease-in-out infinite alternate; } .loading-screen__mark span:nth-child(1) { height: 46px; } .loading-screen__mark span:nth-child(2) { height: 59px; animation-delay: -0.42s; } .loading-screen__mark span:nth-child(3) { height: 39px; animation-delay: -0.78s; } .loading-screen p { margin: 19px 0 0; font-size: 9px; font-weight: 620; letter-spacing: 0.17em; text-transform: uppercase; } @keyframes assemble { from { opacity: 0.45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } @media (max-width: 1020px) { .book-details { width: min(570px, 48vw); } .book-details__inner { padding-right: 34px; padding-left: 60px; } .focus-controls span:nth-child(2) { display: none; } } @media (max-width: 760px) { .site-header { padding: 20px 18px; } .wordmark { gap: 9px; font-size: 8px; letter-spacing: 0.15em; } .wordmark__divider { width: 14px; } .edition-mark { display: none; } .header-actions { gap: 0; } .entry-cta { top: 53px; left: 18px; max-width: 72vw; font-size: 10px; } .browse-caption { right: 0; bottom: 106px; left: 0; width: auto; padding: 52px 20px 19px; background: linear-gradient( 180deg, rgba(238, 232, 219, 0), rgba(238, 232, 219, 0.96) 45px, var(--paper) 64px ); } .browse-caption::before { display: none; } .browse-caption h1 { max-width: 78vw; font-size: clamp(39px, 12.5vw, 58px); } .inspect-button { margin-top: 18px; } .shelf-arrow { top: auto; bottom: 60px; width: 42px; height: 42px; } .shelf-arrow--left { left: 18px; } .shelf-arrow--right { right: 18px; } .shelf-index { bottom: 12px; gap: 3px; } .shelf-index__bars { gap: 6px; } .shelf-index__bars button { width: 11px; } .input-hint { display: none; } .book-details { top: auto; bottom: 0; width: 100%; height: min(49dvh, 500px); opacity: 0; transform: translateY(100%); } .book-details::before { top: -55px; background: linear-gradient(180deg, rgba(238, 232, 219, 0), rgba(238, 232, 219, 0.94) 54px, var(--paper) 55px), var(--paper); } .is-focused .book-details { opacity: 1; transform: translateY(0); } .book-details__inner { grid-template-columns: 1fr auto; grid-template-rows: auto minmax(0, 1fr) auto; padding: 9px 20px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(37, 35, 31, 0.08); border-left: 0; } .back-button { grid-column: 1; grid-row: 1; } .book-details__position { grid-column: 2; grid-row: 1; margin: 0; } .book-details__copy { grid-column: 1 / -1; grid-row: 2; align-self: auto; padding: 25px 0 18px; } .book-details__copy .eyebrow { margin-bottom: 11px; } .book-details h2 { max-width: 90%; font-size: clamp(35px, 10vw, 48px); } .book-details__author { margin-top: 10px; font-size: 14px; } .book-details__description { margin-top: 20px; font-size: 16px; } .book-details blockquote { margin-top: 21px; } .book-details dl { margin-top: 23px; } .book-details__ctas { margin-top: 24px; } .focus-controls { grid-column: 1 / -1; grid-row: 3; } .focus-controls span:nth-child(2) { display: none; } .is-focused .site-header { opacity: 0.52; } } @media (max-height: 700px) and (min-width: 761px) { .browse-caption { bottom: 104px; } .book-details__copy { padding-top: 18px; padding-bottom: 18px; } .book-details h2 { font-size: clamp(38px, 4vw, 58px); } .book-details__description { margin-top: 20px; } .book-details blockquote, .book-details dl { margin-top: 20px; } } @media (pointer: coarse) { .shelf-canvas { cursor: default; } .shelf-index__bars button { min-width: 14px; } } /* Reduced motion stops the looping, drifting things, but fades and cross-dissolves stay: cutting them made the page feel broken. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 260ms !important; transition-delay: 0ms !important; } } /* The filter is lettering set into the wood of the shelf itself: bone paint on walnut, bold, no chrome, and one underline that glides to whichever continent is chosen. */ .continent-pills { position: relative; display: flex; gap: 30px; justify-content: center; padding: 10px 0 14px; } .continent-pills button { padding: 3px 2px; background: transparent; color: rgba(238, 232, 219, 0.5); cursor: pointer; font-size: 12.5px; font-weight: 800; letter-spacing: 0.2em; text-shadow: 0 1px 1px rgba(22, 13, 7, 0.45); transition: color 250ms ease; } .continent-pills button:hover:not(:disabled) { color: rgba(238, 232, 219, 0.85); } .continent-pills button.is-active { color: #f3ecdc; } .continent-underline { position: absolute; bottom: 8px; height: 2px; background: #f3ecdc; opacity: 0.9; pointer-events: none; transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1); } /* La vista: the adventure spread, seed of the future relato (DUR-4). */ .vista { position: fixed; z-index: 60; inset: 0; overflow-y: auto; background: var(--paper); animation: vista-in 360ms ease; } @keyframes vista-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .vista__close { position: fixed; z-index: 61; top: 24px; right: 30px; padding: 9px 16px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; cursor: pointer; font-size: 9px; font-weight: 650; letter-spacing: 0.16em; text-transform: uppercase; } .vista__close:hover { background: rgba(37, 35, 31, 0.06); } .vista__inner { max-width: 1040px; margin: 0 auto; padding: clamp(60px, 9vh, 110px) clamp(24px, 5vw, 60px) 90px; } .vista__inner h2 { margin: 14px 0 0; font-family: var(--serif); font-size: clamp(44px, 5.4vw, 84px); font-weight: 440; letter-spacing: -0.05em; line-height: 0.92; } .vista__dates { margin: 14px 0 0; color: var(--ink-soft); font-family: var(--serif); font-size: 17px; font-style: italic; } .vista__frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; } .vista__frame { position: relative; display: grid; place-items: end center; margin: 0; aspect-ratio: 3 / 4; border-radius: 3px; } .vista__frame figcaption { padding: 14px; color: rgba(255, 253, 247, 0.85); font-size: 8.5px; font-weight: 650; letter-spacing: 0.17em; text-transform: uppercase; } /* A real photograph, with its verse under it. The scrim only darkens the bottom, where the words sit, so the picture keeps its own light. */ .vista__frame.is-photo { overflow: hidden; background-size: cover; background-repeat: no-repeat; } .vista__frame.is-photo::before { position: absolute; inset: 0; content: ""; background: linear-gradient(to top, rgba(16, 12, 8, 0.72) 0%, rgba(16, 12, 8, 0.24) 34%, transparent 62%); } .vista__frame .vista__verse { position: relative; padding: 16px 14px; color: rgba(255, 253, 247, 0.94); font-family: var(--serif); font-size: clamp(12px, 0.95vw, 15px); font-weight: 380; letter-spacing: 0; line-height: 1.35; text-transform: none; text-wrap: balance; } @media (max-width: 720px) { .vista__frame .vista__verse { padding: 12px 10px; font-size: 12px; } } .vista__lede { max-width: 640px; margin: 44px 0 0; font-family: var(--serif); font-size: clamp(17px, 1.4vw, 21px); font-weight: 430; line-height: 1.42; } .vista__note { max-width: 640px; margin: 22px 0 0; color: var(--ink-soft); font-size: 12px; letter-spacing: 0.04em; } /* The two doors inside the vista: the sub opens the volume, the fee adapts the adventure to you. */ .vista__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin-top: 36px; } .vista-path { display: block; padding: 18px 20px 16px; border: 1px solid var(--hairline); text-decoration: none; transition: border-color 220ms ease, background-color 220ms ease; } .vista-path:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.5); } .vista-path__label { display: block; font-size: 11px; font-weight: 780; letter-spacing: 0.15em; text-transform: uppercase; } .vista-path__note { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 9px; font-weight: 580; letter-spacing: 0.09em; text-transform: uppercase; } @media (max-width: 720px) { .vista__frames { grid-template-columns: 1fr; } .vista__frame { aspect-ratio: 4 / 3; } .vista__paths { grid-template-columns: 1fr; } } /* On narrow screens the filter row tightens so it clears the arrows. */ @media (max-width: 760px) { .continent-pills { gap: 12px; padding: 8px 0 12px; } .continent-pills button { font-size: 9.5px; letter-spacing: 0.12em; } .continent-underline { bottom: 7px; } } /* --------------------------------------------------------------------- Embedded in the one-pager. The shelf keeps every one of its own rules; these only stop it behaving like a page. It gives up a slice of the viewport so the section head fits above it in one screen, and it stops being the thing that scrolls. --------------------------------------------------------------------- */ .press-experience--embedded { height: min(76dvh, 760px); /* The portada now carries the same paper, so the shelf keeps only its own soft highlight and lets the page supply the ground underneath. */ background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), transparent 46%); } #estanteria { padding-bottom: 56px; } .estanteria-head { padding-top: 96px; } .estanteria-head .sec-head { margin-bottom: 18px; }