:root{
  --paper:#f4f3ef;--oat:#ebe6db;--ink:#1a1712;--mist:#c9c1b2;
  --muted:color-mix(in srgb,var(--ink) 68%,var(--paper));
  --edge:32px;--hd:64px;--line-x:50%;--in:20px;--nin:40px;
  --dsz:clamp(40px,5vw,72px);
  --f-d:"Newsreader",Georgia,"Times New Roman",serif;
  --f-b:"Onest",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:400 18px/1.65 var(--f-b);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body[data-lock="true"]{overflow:hidden}
img{display:block;width:100%;height:auto;-webkit-user-drag:none}
figure,blockquote,h1,h2,h3,p{margin:0;font-weight:400}
a{color:inherit;text-decoration:none;transition:opacity .2s}
a:hover{opacity:.5}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;border-radius:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
/* The display face is attached to the headings themselves, not only to a .d
   class an author has to remember: any page of the family that writes a hero
   headline, a room heading, a fact, a card title or a statement gets Newsreader
   at the same weight, tracking and leading as every sibling page. */
.d,
.page-hero h1,.article-head .copy h1,
.room-copy h2,.facts h2,.post-copy h2,
.statement p,.end-link a.d,.contact-aside .email,
.faq dt,.words blockquote p{font-family:var(--f-d);font-weight:300;letter-spacing:-.015em;line-height:1.02}
.sm{font:500 11px/1.35 var(--f-b);letter-spacing:.2em;text-transform:uppercase}
.muted{color:var(--muted)}
.hd{position:relative;height:var(--hd);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--edge)}
.hd::before{content:"";position:absolute;left:calc(50% - 1px);top:16px;bottom:0;width:1px;background:var(--mist)}
.hd::after{content:"";position:absolute;left:calc(50% - 4px);bottom:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink);z-index:2}
.logo{grid-column:1;font:300 20px/1 var(--f-d);letter-spacing:-.01em;white-space:nowrap;width:fit-content}
.nav{grid-column:3;justify-self:end;display:flex;gap:26px;white-space:nowrap;font:italic 300 17px/1 var(--f-d);letter-spacing:0;text-transform:none}
.nav a{position:relative;padding:8px 0}
.nav a::before{content:"";position:absolute;left:-11px;top:calc(50% - 2px);width:5px;height:5px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform 260ms var(--ease)}
.nav a:hover{opacity:1}
.nav a:hover::before,.nav [aria-current="page"]::before{transform:scale(1)}
.nav [aria-current="page"]{font-style:normal}
.line-page{position:relative}
.line-page::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:calc(var(--line-x) - 1px);width:1px;background:var(--mist)}
.line-page>*,.line-room>*{position:relative;z-index:1}
.page-hero{min-height:calc(86vh - var(--hd));display:grid;grid-template-columns:1fr 1fr;align-items:center}
.page-hero .visual{align-self:stretch;min-height:520px}
.page-hero .visual img{height:100%;object-fit:cover}
.page-hero .copy{padding:9vh max(var(--edge),5vw)}
.page-hero h1{font-size:clamp(48px,6.6vw,96px);max-width:10ch;text-wrap:balance}
.page-hero .intro{max-width:40ch;margin-top:28px;text-wrap:pretty}
.page-hero .back{display:inline-block;margin-bottom:36px}
.arrow{display:inline-block;margin-top:24px}
.arrow::after{content:" →"}
.line-room{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:14vh 0}
.line-room::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--line-x) - 1px);width:1px;background:var(--mist)}
.room-copy{padding:0 max(var(--edge),5vw);max-width:680px}
.room-copy.right{grid-column:2}
.room-copy p+p{margin-top:16px}
.room-copy h2{font-size:clamp(38px,4.8vw,68px);max-width:12ch;text-wrap:balance}
.room-copy h2+p{margin-top:28px}
.room-media{padding:0 var(--edge)}
.room-media.left{grid-column:1;grid-row:1}
.room-media.right{grid-column:2;grid-row:1}
.room-media img{max-height:78vh;object-fit:contain}
.oat{background:var(--oat)}
.ink{background:var(--ink);color:var(--paper)}
.ink .muted{color:var(--mist)}
.statement{min-height:68vh;padding:14vh var(--edge);display:grid;place-content:center;text-align:center}
.statement p{font-size:clamp(36px,4.8vw,68px);max-width:22ch;margin:auto;text-wrap:balance}
.statement .sm{display:block;margin-top:26px}
.end-link{position:relative;padding:15vh max(var(--edge),5vw);margin-left:50%}
.end-link::before{content:"";position:absolute;left:-1px;top:0;width:1px;height:50%;background:var(--mist)}
.end-link::after{content:"";position:absolute;left:-4px;top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--ink)}
.end-link a.d{display:block;font-size:clamp(42px,5vw,72px);width:fit-content}
.ft{margin:0 var(--edge);border-top:1px solid var(--mist);padding:24px 0 32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:28px;white-space:nowrap}
.ft-nav{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center}
.ft .r{text-align:right}
.reveal{opacity:0;transform:translateY(16px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.reveal.on{opacity:1;transform:none}

/* Portfolio: one mixed gallery, composed around the family line. */
.gallery{padding:6vh var(--edge) 14vh;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:9vh 18px;align-items:start}
.gallery figure{margin:0}
.gallery button{display:block;width:100%;padding:0;background:none;cursor:zoom-in;text-align:left;transition:opacity .2s}
.gallery button:hover{opacity:.82}
.gallery .g1{grid-column:1/7}.gallery .g2{grid-column:8/13;margin-top:18vh}
.gallery .g3{grid-column:2/5}.gallery .g4{grid-column:6/13;margin-top:12vh}
.gallery .g5{grid-column:1/8}.gallery .g6{grid-column:9/13;margin-top:20vh}
.gallery .g7{grid-column:3/7}.gallery .g8{grid-column:7/13;margin-top:8vh}
.gallery .g9{grid-column:1/6}.gallery .g10{grid-column:7/12;margin-top:18vh}
.gallery-count{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;line-height:1.4}
.viewer{position:fixed;z-index:100;inset:0;background:var(--ink);color:var(--paper);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 0s linear 300ms}
.viewer[data-open="true"]{opacity:1;visibility:visible;transition:opacity 300ms ease,visibility 0s}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;padding:20px var(--edge)}
.viewer-close,.viewer-nav{background:none;color:inherit;padding:4px;cursor:pointer}
.viewer-stage{min-height:0;display:flex;align-items:center;justify-content:center;padding:0 var(--edge)}
.viewer-stage img{width:auto;max-width:100%;height:auto;max-height:calc(100vh - 150px);object-fit:contain}
.viewer-foot{display:flex;justify-content:center;gap:40px;padding:18px var(--edge) 22px}

/* Blog index and focused posts. */
.posts{padding:4vh 0 14vh}
.post-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:78vh}
.post-card:nth-child(even) .post-image{grid-column:2}.post-card:nth-child(even) .post-copy{grid-column:1;grid-row:1}
.post-image{align-self:stretch}
.post-image a{display:block;height:100%;transition:none}
.post-image a:hover{opacity:1}
.post-image img{height:100%;min-height:560px;object-fit:cover;transition:opacity .2s}
.post-image a:hover img{opacity:.82}
.post-copy{padding:10vh max(var(--edge),6vw)}
.post-copy h2{font-size:clamp(38px,4.5vw,66px);max-width:12ch;text-wrap:balance}
.post-copy .date{display:block;margin-bottom:24px;font-size:13px}
.post-copy p{max-width:40ch;margin-top:22px}
.article-head{min-height:calc(100vh - var(--hd))}
.article-head .copy h1{max-width:12ch;font-size:clamp(44px,5.8vw,84px)}
.article{padding:12vh 0}
.article-copy{max-width:46ch;margin-left:calc(50% + max(var(--edge),5vw));margin-right:var(--edge)}
.article-copy .lead{font:300 clamp(28px,3vw,42px)/1.25 var(--f-d);letter-spacing:-.01em}
.article-copy p+p{margin-top:22px}
.story-wide{position:relative;height:68vh;margin:12vh var(--edge);overflow:hidden;background:var(--ink)}
.story-wide.break-low{height:62vh}
.story-wide.break-high{height:74vh}
.story-wide img{position:absolute;left:0;top:-6%;width:100%;height:112%;object-fit:cover;will-change:transform}
.story-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:12vh var(--edge);align-items:start}
.story-pair figure:nth-child(2){margin-top:14vh}
.story-single{width:min(46vw,680px);margin:12vh auto}
.article-nav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--mist);margin:12vh var(--edge) 0;padding-top:24px;gap:28px}
.article-nav a:last-child{text-align:right}

/* About and contact. */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:12vh var(--edge)}
.facts article{border-top:1px solid var(--mist);padding-top:20px}
.facts h2{font-size:clamp(26px,2.5vw,38px);margin-bottom:14px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;padding:12vh 0}
.contact-aside{padding:0 max(var(--edge),5vw)}
.contact-aside .email{display:block;font:300 clamp(28px,3vw,44px)/1.1 var(--f-d);margin-top:24px;overflow-wrap:anywhere}
.form{padding:0 max(var(--edge),5vw)}
.field{display:grid;gap:8px;margin-bottom:28px}
.field label{font:500 11px/1.35 var(--f-b);letter-spacing:.2em;text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid var(--mist);border-radius:0;background:transparent;padding:12px 0;outline:none}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.submit{background:var(--ink);color:var(--paper);padding:15px 22px;cursor:pointer;transition:opacity .2s}
.submit:hover{opacity:.72}
.form-status{min-height:1.5em;margin-top:18px}

@media(max-width:1023px){
  :root{--edge:20px;--line-x:20px}
  .hd{height:auto;min-height:104px;grid-template-columns:21px 1fr;padding:18px var(--edge) 16px 20px;gap:12px 0}
  .hd::before{left:20px;top:0}
  .hd::after{left:17px}
  .logo,.nav{grid-column:2;justify-self:start;margin-left:20px}
  .nav{gap:18px;flex-wrap:wrap;font-size:16px}
  .line-page::before,.line-room::before{left:20px}
  .page-hero{grid-template-columns:21px 1fr;min-height:0;padding:36px 0 72px}
  .page-hero .visual{grid-column:2;height:44vh;min-height:0;max-height:420px;padding-right:var(--edge);overflow:hidden}
  .page-hero .copy{grid-column:2;padding:36px var(--edge) 0 20px}
  .page-hero .visual+.copy{grid-row:2}
  .page-hero h1{font-size:clamp(46px,13vw,72px)}
  .line-room{grid-template-columns:21px 1fr;padding:72px 0}
  .room-copy,.room-copy.right,.room-media.left,.room-media.right{grid-column:2;grid-row:auto;padding:0 var(--edge) 0 20px}
  .room-media+.room-copy,.room-copy+.room-media{margin-top:40px}
  .end-link{margin-left:20px;padding:96px 20px}
  .ft{display:flex;flex-direction:column;white-space:normal;gap:14px}
  .ft-nav{justify-content:flex-start}
  .ft .r{text-align:left}
  .gallery{grid-template-columns:21px 1fr;gap:56px 0;padding:32px var(--edge) 80px 0}
  .gallery .g1,.gallery .g2,.gallery .g3,.gallery .g4,.gallery .g5,.gallery .g6,.gallery .g7,.gallery .g8,.gallery .g9,.gallery .g10{grid-column:2;margin:0;padding-left:20px}
  .post-card,.post-card:nth-child(even){grid-template-columns:21px 1fr;min-height:0;padding:56px 0}
  .post-card .post-image,.post-card:nth-child(even) .post-image{grid-column:2;grid-row:1;padding-right:var(--edge)}
  .post-card .post-copy,.post-card:nth-child(even) .post-copy{grid-column:2;grid-row:2;padding:36px var(--edge) 0 20px}
  .post-image img{min-height:0;height:auto}
  .article-head .visual{grid-row:2;margin-top:48px}
  .article-head .copy{grid-row:1;padding-top:0}
  .article-copy{margin:0 var(--edge) 0 41px}
  .story-wide,.story-wide.break-low,.story-wide.break-high{height:56vh;min-height:360px;max-height:560px;margin:72px var(--edge) 72px 41px}
  .story-wide img{top:0;height:100%;transform:none!important;will-change:auto}
  .story-pair{grid-template-columns:1fr;gap:20px;margin:72px var(--edge) 72px 41px}
  .story-pair figure:nth-child(2){margin-top:0}
  .story-single{width:auto;margin:72px var(--edge) 72px 41px}
  .article-nav{grid-template-columns:1fr;margin-top:72px}
  .article-nav a:last-child{text-align:left}
  .facts{grid-template-columns:1fr;padding:72px var(--edge) 72px 41px}
  .contact-grid{grid-template-columns:21px 1fr;padding:72px 0}
  .contact-aside,.form{grid-column:2;padding:0 var(--edge) 0 20px}
  .form{margin-top:64px}
  .viewer-bar{padding:18px var(--edge)}
  .viewer-stage{padding:0 var(--edge)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.story-wide img{top:0;height:100%;transform:none!important;will-change:auto}.viewer{transition:none}a,.nav a::before{transition:none}}


/* ── Investment ─────────────────────────────────────────────────────────────
   Collection prices, the numbered steps, the questions and the kind words.
   The display face comes from the shared heading rule above, so nothing here
   restates a family. */
.facts .price{margin:10px 0 14px}
.steps p{margin-top:18px}
.steps .sm{display:block;margin-bottom:6px}
.faq{padding:12vh 0 4vh}
.faq .faq-copy{max-width:46ch;margin-left:calc(50% + max(var(--edge),5vw));margin-right:var(--edge)}
.faq dt{font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin-top:36px}
.faq dt:first-of-type{margin-top:28px}
.faq dd{margin:12px 0 0}
.words{padding:14vh var(--edge);display:grid;gap:44px;place-content:center;text-align:center}
.words blockquote p{font-size:clamp(24px,2.5vw,36px);line-height:1.25;max-width:28ch;margin:auto;text-wrap:pretty}

/* ── Home · the plumb line ──────────────────────────────────────────────────
   The home page hangs its prints on one line down the middle of the page. It
   is the only page of the family with this layout, but it takes its tokens,
   its type, its header and its footer from the rules above like every other
   page — there is no second definition of the chrome anywhere in the family. */
/* Plumb Line · Odile Arbour · Font Pairing 07 (Newsreader 300 + Onest) on Color
   Palette 04 (pearl #f4f3ef ground, oat #ebe6db for a tinted section, stone
   #c9c1b2 for the line and the hairlines, black #1a1712 ink).
   The home is one plumb line down the middle of the page, and the prints are
   hung on it: every frame touches the line with one edge, and every word sits
   across the line from the picture it belongs to. There are no sections and
   no headings. The marks on the line are the captions (first names, place)
   on the far side of the line, at the top edge of a frame, or at its bottom
   edge when the frame laps the one before it; for the three blog hangs the
   mark is the post title. Frames hang in runs of two and three on one side,
   and twice a frame straddles the line at 72vw with the line passing behind
   it. Where the side changes, the next frame laps the last one, entering
   before it has ended, so both halves of the page are hung and the second
   print is already on the first screen. Verticals hang at 84vh or 70vh,
   landscapes at 46vw, never wider than 46vw, whole at their native ratio.
   Three weddings take turns along the line. The page reads as sections
   (portfolio, about, blog, contact), each announced by a small label on the
   line, and five times the line is cut by something that is nothing like it:
   after the portfolio, one still, full bleed, one viewport tall, moving at a
   tenth of the scroll, with a line of Odile's in pearl on it; then a text
   section on the oat tint, how a day goes, in three numbered paragraphs across
   the width; after About, a band of ink with the kind words in pearl across
   it; then two stills edge to edge with no gap, a diptych; and before the end
   a statement in the display face, centred, on its own. The line stops at the
   top edge of each and starts again under it. Notes (About, See the portfolio)
   sit right of the line at 40ch across from a left-hung frame. The line ends
   in a 7px ink dot beside Write to Odile; below it the footer hairline and
   one row. Newsreader is the h1, the line on the still, the kind words and
   Write to Odile; the marks, the notes and the labels are Onest. The header
   and the footer are the family's, not the home's: the brand and the nav are
   the same Newsreader as on every other page (LAY-14).
   Normal scrolling; nothing pinned, snapped or hijacked; the header scrolls
   away and the nav returns in the footer. Each frame opens once, forward
   only, with a wipe from the line outward (600ms, expo-out), its mark and
   note fading in 200ms after; scrolling back never replays. Hover is opacity
   only, on links. Under 1024px the line moves to x=20 and every frame hangs
   to its right at full width (capped at 78vh tall), its mark above it and
   its note under it. */
/* the rail: one 1px line from under the header to the dot; the hangs are grid rows across it.
   --mt is the gap under the last hang; --lap is how far this hang reaches up into the last
   one (opposite sides only, so nothing is ever covered). Every lap is min(vh, vw): frames are
   capped at 46vw, so on a portrait screen a landscape print is only about 23vh tall and a lap
   in vh alone would carry a bottom-edge mark up behind the print it laps */
.rail{position:relative;padding-top:40px}
.rail::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:1px;background:var(--mist);z-index:0}
.hang{--mt:8vh;--lap:0px;position:relative;display:grid;grid-template-columns:calc(50% - 1px) 1px 1fr;align-items:start;margin-top:calc(var(--mt) - var(--lap));scroll-margin-top:40px}
.fr{position:relative;z-index:1;grid-row:1;width:min(calc(var(--fh) * var(--w) / var(--h)),46vw);aspect-ratio:var(--w) / var(--h)}
.fr img{width:100%;height:100%}
.fr a{display:block;transition:none}
.fr a:hover{opacity:1}
/* left-hung: the right edge on the line, the mark and any note in the right column */
.hang.L .fr{grid-column:1;justify-self:end}
.hang.L .mk,.hang.L .nt,.hang.L .h1blk{grid-column:3;grid-row:1}
/* right-hung: the left edge on the line, the mark in the left column, right-aligned against the line */
.hang.R .fr{grid-column:3;justify-self:start}
.hang.R .mk{grid-column:1;grid-row:1;justify-self:end;align-items:flex-end;text-align:right;padding-right:var(--in)}
/* straddling: 72vw centred on the line, the line behind it; the mark under the bottom edge, right of the line */
.hang.S .fr{grid-column:1 / -1;grid-row:1;justify-self:center;width:min(72vw,calc(84vh * var(--w) / var(--h)))}
.hang.S .mk{grid-column:3;grid-row:2;margin-top:14px}
/* the mark: first names over the place, at the frame's top edge; at the bottom edge when the hang laps the last one */
.mk{display:flex;flex-direction:column;align-items:flex-start;padding-left:var(--in);white-space:nowrap}
.mk .who{color:var(--ink)}
.mk .plc{color:var(--muted)}
.hang.lp .mk{align-self:end}
/* a note: 40ch, across the line from its picture, a little way down the frame and clear of any frame lapping in above it */
.nt{padding-left:var(--nin);padding-right:var(--edge);margin-top:max(calc(var(--fh) * .28 + 40px),calc(var(--lap) + 100px));text-wrap:pretty}
.nt > *{max-width:40ch}
.nt p + p{margin-top:12px}
.nt .by{display:block;margin-top:14px}
.nt .go{display:inline-block;margin-top:18px}
/* the opener: the h1 right of the line 40px under the header, the first frame beside it to 40px above the fold, its mark under the intro */
.h1blk{padding-left:var(--nin);padding-right:var(--edge)}
.h1blk h1{font-size:clamp(32px,3.4vw,52px);line-height:1.05;text-wrap:balance}
.h1blk p{margin-top:24px;max-width:40ch;text-wrap:pretty}
.hang.op{grid-template-rows:auto 1fr}
.hang.op .fr{grid-row:1 / span 2}
.hang.op .mk{grid-column:3;grid-row:2;align-self:start;margin-top:32px;padding-left:var(--nin)}
/* a blog hang: the title is the mark, then the month and Read; the picture opens the post too */
.hang.bl .mk{white-space:normal;padding-right:var(--edge)}
.hang.bl .ttl{font:400 18px/1.4 var(--f-b);letter-spacing:0;text-transform:none;max-width:40ch}
.hang.bl .when{margin-top:8px}
.hang.bl .read{margin-top:14px}
/* a CTA row on its own: right of the line, at the note inset */
.hang.cta .go{grid-column:3;grid-row:1;padding-left:var(--nin)}
/* a section label: small caps right of the line, 14vh under the last hang, the line running through */
.hang.sec{margin-top:14vh;scroll-margin-top:24px}
.hang.sec .lab{grid-column:3;grid-row:1;padding-left:var(--in);white-space:nowrap}
/* a note that starts level with the frame's top */
.nt.nt-top{margin-top:0}
/* the first break: one still, full bleed, one viewport tall, cutting the line; the picture is taller
   than its box and moves a tenth of the scroll; Odile's line on it, in paper, bottom left */
.brk{position:relative;z-index:1;height:100vh;min-height:480px;margin-top:14vh;overflow:hidden;background:var(--ink)}
.brk img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}
.brk .line{position:absolute;left:var(--edge);right:var(--edge);bottom:calc(var(--edge) + 8px);color:var(--paper)}
.brk .line p{font-size:clamp(28px,3vw,44px);line-height:1.15;max-width:24ch;text-wrap:balance}
.brk .line .sm{display:block;margin-top:18px}
/* the second break: a band of ink, the kind words in paper, two across */
.band{position:relative;z-index:1;background:var(--ink);color:var(--paper);margin-top:14vh;padding:14vh var(--edge)}
.band .lab{display:block;margin-bottom:32px;color:var(--mist)}
.band .qs{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;align-items:start}
.band blockquote p{font-size:clamp(24px,2.5vw,36px);line-height:1.25;max-width:28ch;text-wrap:pretty}
.band .by{display:block;margin-top:18px;color:var(--mist)}
/* a text section on the oat tint: how a day goes, three numbered paragraphs across the width */
.txt{position:relative;z-index:1;background:var(--oat);margin-top:14vh;padding:12vh var(--edge)}
.txt .lab{display:block;margin-bottom:36px}
.txt .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px;align-items:start}
.txt .n{display:block;margin-bottom:14px}
.txt h2{font:400 22px/1.35 var(--f-b);letter-spacing:0;margin-bottom:12px}
.txt p{max-width:38ch}
.txt .go{display:inline-block;margin-top:40px}
/* a diptych: two stills edge to edge, no gap, a break with no words at all */
.dip{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;margin-top:14vh;background:var(--ink)}
.dip figure{position:relative;aspect-ratio:1600 / 1066;overflow:hidden}
.dip img{width:100%;height:100%;object-fit:cover}
/* a statement on its own: the display face, centred, before the end of the line */
.say{position:relative;z-index:1;background:var(--paper);margin-top:14vh;padding:6vh var(--edge) 0;text-align:center}
.say p{font-size:clamp(30px,3.6vw,54px);line-height:1.1;letter-spacing:-.01em;max-width:24ch;margin:0 auto;text-wrap:balance}
.say .sm{display:block;margin-top:24px}
/* the line starts again under a break: the first hang after one has no lap to lose */
.brk + .hang.sec,.band + .hang.sec,.txt + .hang.sec,.dip + .hang.sec{margin-top:14vh}
/* the reveal: a wipe from the line outward, the mark and note fading 200ms after; once open it stays open */
.hang .fr{clip-path:inset(0 0 0 100%);transition:clip-path 600ms var(--ease)}
.hang.R .fr{clip-path:inset(0 100% 0 0)}
.hang.S .fr{clip-path:inset(0 50% 0 50%)}
.hang .mk,.hang .nt,.hang .go,.hang .lab{opacity:0;transition:opacity 400ms ease 200ms}
.hang.on .fr{clip-path:inset(0)}
.hang.on .mk,.hang.on .nt,.hang.on .go,.hang.on .lab{opacity:1}
.hang.now .fr,.hang.now .mk,.hang.now .nt,.hang.now .go,.hang.now .lab{transition:none}
/* the end of the line: Write to Odile right of the line, the line stopping in a 7px ink dot at its midline */
.end{--endpad:14vh;position:relative;display:grid;grid-template-columns:calc(50% - 1px) 1px 1fr;align-items:start;padding-top:var(--endpad);scroll-margin-top:40px}
.end::before{content:"";position:absolute;top:0;left:calc(50% - 1px);width:1px;height:calc(var(--endpad) + var(--dsz) * .5);background:var(--mist)}
.end::after{content:"";position:absolute;top:calc(var(--endpad) + var(--dsz) * .5 - 3px);left:calc(50% - 4px);width:7px;height:7px;border-radius:50%;background:var(--ink)}
.wr{grid-column:3;grid-row:1;padding-left:var(--nin)}
.wr .d{font-size:var(--dsz);display:block;width:fit-content}
.wr .em{display:block;width:fit-content;margin-top:20px}
.wr .row{display:flex;gap:28px;margin-top:18px;white-space:nowrap}
main:has(.rail) + .ft{margin-top:14vh}

@media(max-width:1023px){
  :root{--in:20px;--nin:20px}
  .rail{padding-top:36px}
  .rail::before{left:20px}
  .hang,.end{grid-template-columns:20px 1px 1fr;margin-top:56px}
  .hang .fr,.hang.L .fr,.hang.R .fr,.hang.S .fr,.hang.op .fr{grid-column:3;grid-row:2;justify-self:start;width:min(calc(100% - 20px),calc(78vh * var(--w) / var(--h)));clip-path:inset(0 100% 0 0)}
  .hang.on .fr{clip-path:inset(0)}
  .hang .mk,.hang.L .mk,.hang.R .mk,.hang.S .mk,.hang.lp .mk{grid-column:3;grid-row:1;justify-self:start;align-items:flex-start;text-align:left;padding:0 20px 12px var(--in);margin-top:0;white-space:normal;align-self:start}
  .hang .nt,.hang.L .nt{grid-column:3;grid-row:3;margin-top:16px;padding-left:var(--nin);padding-right:20px}
  .nt > *{max-width:60ch}
  .hang.op{grid-template-rows:none}
  .hang.op .h1blk{grid-column:3;grid-row:1;padding-right:20px}
  .hang.op .mk{grid-row:2;margin-top:32px;padding-left:var(--in)}
  .hang.op .fr{grid-row:3}
  .hang.cta .go{padding-left:var(--nin)}
  .hang.sec{margin-top:64px}
  .hang.sec .lab{grid-column:3;padding-left:var(--in)}
  .brk{height:70vh;min-height:400px;margin-top:64px}
  .band{margin-top:64px;padding:64px var(--edge)}
  .band .qs{grid-template-columns:1fr;gap:32px}
  .txt{margin-top:64px;padding:64px var(--edge)}
  .txt .cols{grid-template-columns:1fr;gap:32px}
  .dip{margin-top:64px;grid-template-columns:1fr}
  .say{margin-top:64px;padding-top:0;text-align:left}
  .say p{margin:0}
  .brk + .hang.sec,.band + .hang.sec,.txt + .hang.sec,.dip + .hang.sec{margin-top:64px}
  .hang.cta{margin-top:32px}
  .end{--endpad:64px;margin-top:0}
  .end::before{left:20px}
  .end::after{left:17px}
  .wr{padding-right:20px}
  .wr .row{flex-wrap:wrap;gap:12px 28px;white-space:normal}
  main:has(.rail) + .ft{margin-top:72px}
  .faq{padding:72px 0 24px}
  .faq .faq-copy{margin:0 var(--edge) 0 41px}
}
@media(prefers-reduced-motion:reduce){
  .brk img{top:0;height:100%;transform:none !important}
  .hang .fr,.hang.R .fr,.hang.S .fr{clip-path:inset(0);transition:none}
  .hang .mk,.hang .nt,.hang .go,.hang .lab{opacity:1;transition:none}
}

  /* Mobile review: 44px hit areas (visual size unchanged), small-text floors and 16px form controls. */
  @media (max-width:820px){
    a.logo{position:relative}
    a.logo::after{content:"";position:absolute;inset:-12px 0}
    .nav a::after{content:"";position:absolute;inset:-6px -9px}
    .ft-nav a{position:relative}
    .ft-nav a::after{content:"";position:absolute;inset:-15px -3px}
    a.back{position:relative}
    a.back::after{content:"";position:absolute;inset:-15px 0}
    .article-nav a{position:relative}
    .article-nav a::after{content:"";position:absolute;inset:-15px 0}
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not(#_),select:not(#_),textarea:not(#_){font-size:16px}
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):not(#_),select:not(#_){min-height:44px}
  }