:root { --canvas: #dbccb5; --ink: #33291d; --muted: #635039; --line: rgba(87, 68, 44, .22); --accent: #84461d; /* Carousel geometry. The gap ratio is taken from the reference layout (575 / 492), which keeps a clear margin between the centre arch and its neighbours at every size. --area-h is an upper bound only: the arches size to the stage, so they can never grow into the copy band. */ --area-h: clamp(300px, 92vh, 1000px); --arch-ratio: .66; --gap-ratio: 1.168; --side-scale: .58; /* Page gutters. Generous, like the reference: the arches used to sit 6px off the top edge and 6px off the copy, which read as cramped rather than confident. The stage insets come out of the stage's own height, so the arches lose only a couple of percent to gain real margins. */ --pad-x: clamp(24px, 5.2vw, 88px); --pad-top: clamp(20px, 3.4vh, 40px); --pad-bottom: clamp(28px, 5vh, 52px); --stage-pad-top: clamp(36px, 5vh, 60px); --stage-pad-bottom: clamp(16px, 2.6vh, 32px); /* The right hand column that balances the headline. */ --aside-w: clamp(240px, 25vw, 340px); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* The weave sits on the root element so it covers the whole canvas whatever the content height; on it would stop at the content box. */ html { -webkit-text-size-adjust: 100%; min-height: 100%; background-color: var(--canvas); background-image: url("../assets/linen.png"); background-repeat: repeat; background-position: top left; } body { margin: 0; min-height: 100vh; overflow-x: hidden; background: transparent; color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } /* * A column: the stage takes all remaining height, the copy sits in a band * beneath it. The arches are therefore centred horizontally on the screen and * centred vertically in the space above the text, so the two can never collide * at any width. Sizing the copy against the centre arch alone is not enough, * because the scaled side arches reach much further out than the centre does. */ .page { position: relative; display: flex; flex-direction: column; min-height: 100vh; } /* ── Masthead, top left ───────────────────────────────────────────────── */ .masthead { position: absolute; z-index: 10; top: var(--pad-top); left: var(--pad-x); pointer-events: none; } .wordmark { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .wordmark::after { content: ""; display: block; width: 40px; height: 1px; margin-top: 10px; background: var(--line); } /* ── Copy band ────────────────────────────────────────────────────────── */ /* * Two columns across the full width: the headline sits bottom left and the * description bottom right, which is the reference's split. Stacking all of it * in one narrow left hand column left two thirds of the page empty and gave * the type nothing to sit against. */ .info { position: relative; z-index: 10; flex: none; width: 100%; padding: 0 var(--pad-x) var(--pad-bottom); } /* Every copy block occupies the same grid cell, so the panel is as tall as the longest entry and nothing reflows as the carousel turns. */ .copy { display: grid; } .copy__item { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); align-items: end; column-gap: clamp(28px, 5vw, 80px); opacity: 0; transform: translateY(10px); transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .3, 1); pointer-events: none; } .copy__item.is-active { opacity: 1; transform: none; pointer-events: auto; } .copy__lead { min-width: 0; } /* The arch named in its own language, above the headline. */ .copy__eyebrow { margin: 0 0 clamp(10px, 1.6vh, 18px); font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: -.01em; color: var(--muted); } .copy__eyebrow .term { margin-right: .5em; font-size: 15px; color: var(--ink); } .copy__eyebrow .roman { margin-right: .45em; } /* The page's one loud voice. Everything else is 11 to 13px, so the headline has to carry the whole hierarchy on its own. */ .copy__title { margin: 0 0 10px; font-family: var(--serif); font-size: clamp(30px, 3.1vw, 50px); font-weight: 400; line-height: 1.02; letter-spacing: -.025em; } .copy__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--accent); } .copy__meta span:last-child { color: var(--muted); } .copy__desc { grid-column: 2; align-self: end; margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.62; letter-spacing: -.01em; color: var(--muted); } /* ── Stage ────────────────────────────────────────────────────────────── */ /* Full bleed width, so the centred arch is centred on the screen itself and not in a column beside the text. */ .stage { position: relative; flex: 1 1 auto; min-height: 300px; /* Side arches are meant to bleed past the edge; without this they widen the document and the whole page scrolls sideways on narrow screens. */ overflow: hidden; /* Padding on the stage rather than the viewport: .carousel is the padded content box, so the arches centre inside it and the insets can differ top and bottom without pulling them off centre. */ display: flex; padding: var(--stage-pad-top) 0 var(--stage-pad-bottom); } .carousel { position: relative; flex: 1 1 auto; cursor: grab; touch-action: none; user-select: none; outline: none; } .carousel.is-dragging { cursor: grabbing; } .carousel:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; } /* Height is capped by --area-h but yields to the stage, so a short window shrinks the arches rather than pushing them down over the text. */ .carousel__viewport { position: absolute; left: 50%; top: 50%; width: 100%; height: min(var(--area-h), 100%); transform: translate(-50%, -50%); pointer-events: none; } .carousel__track { position: absolute; left: 50%; top: 0; width: 0; height: 100%; } /* Width follows the height via aspect-ratio; the horizontal -50% that centres each item on the track is folded into the transform JS writes. */ .carousel__item { position: absolute; left: 0; top: 0; height: 100%; width: auto; aspect-ratio: var(--arch-ratio); transform-origin: 50% 100%; will-change: transform, opacity; pointer-events: auto; cursor: grab; transition: opacity .35s ease, filter .45s ease; } /* Off-centre arches recede slightly so the eye lands on the middle one. */ .carousel__item { filter: saturate(.82) contrast(.97); } .carousel__item.is-center { filter: none; } /* Sits under the arch image, so stone occludes any strand that swings wide. */ .chime { position: absolute; pointer-events: none; } .chime__canvas { display: block; width: 100%; height: 100%; } .carousel__arch { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); -webkit-user-drag: none; user-select: none; } /* A soft contact shadow only, just enough to stand the arch on the cloth, with no cast direction that would fight the flat, evenly lit canvas. */ .carousel__ground { position: absolute; left: 50%; bottom: -12px; width: 78%; height: 30px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(74, 56, 36, .3), rgba(74, 56, 36, 0) 72%); pointer-events: none; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { :root { --area-h: clamp(280px, 58vh, 560px); /* Enough headroom that the centre arch, which is nearly full width here, clears the masthead. */ --stage-pad-top: clamp(56px, 9vh, 84px); } /* The stage takes whatever the copy leaves, rather than a fixed 62vh that left a dead band under the text on a tall phone. --area-h still caps how large the arches can get. */ /* One column: the description follows the headline instead of sitting opposite it. */ .copy__item { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } .copy__desc { grid-column: 1; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .copy__item, .carousel__item { transition: none; } }