/* La Causerie — the phone book's own furniture, laid over Ivory Season and the white-label overlay.
   Ivory always, cream never white, serif for every voice, Manrope only for furniture, gold a mark never a fill,
   radius zero, hairline rules, one curve, three durations. No dark mode. */
:root{--lead:rgba(92,112,101,.45)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.label{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.66rem;color:var(--text-muted)}
.bare{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--ink);background:transparent;border:0;border-radius:0;padding:0 2px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;text-decoration:none;transition:color var(--dur-fast) var(--ease)}
.bare:hover{color:var(--gold-d)}
button.button{font-family:var(--font-sans);font-weight:500;text-transform:uppercase;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
html.js .nojs{display:none}

/* the cover of the directory */
.masthead{grid-template-columns:1fr !important}
.masthead .mark{width:clamp(88px,16cqi,136px);height:auto}
.what{max-width:var(--measure-air);margin:var(--space-md) 0 0}
.count{margin-top:var(--space-lg)}
.home-actions{align-items:center;gap:var(--space-md);margin:var(--space-md) 0 var(--space-xl)}

/* search */
.find{max-width:44rem;padding:var(--space-md) 0}
.find-row{margin-top:var(--space-sm)}
.find input{width:100%;-webkit-appearance:none;appearance:none}
.results{list-style:none;margin:var(--space-sm) 0 0;padding:0;border-top:1px solid var(--rule);max-height:60vh;overflow:auto}
.results li{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--rule);border-left:1px solid transparent;cursor:pointer}
.results li[aria-selected=true]{background:var(--paper-2);border-left-color:var(--gold)}
.hint{font-size:1rem;color:var(--text-muted);margin:var(--space-sm) 0 0}
.find-none{margin:var(--space-sm) 0 0}

/* the badge: one word in a hairline, never a fill */
.badge{display:inline-block;font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.26em;font-size:10px;color:var(--gold-d);border:1px solid var(--gold);padding:6px 10px 5px;margin:0 0 var(--space-md)}
.badge-long{font-size:1.6rem;font-weight:300;color:var(--ink);margin:0 0 var(--space-xs)}

/* new this week */
.strip{list-style:none;padding:0;margin:var(--space-md) 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.strip li{background:var(--paper)}
html[data-overlay="white-label"] .sheet a.cell:not(.button){display:flex;flex-direction:column;gap:6px;padding:var(--space-md);height:100%;color:var(--ink-soft);border:0;text-decoration:none;transition:background var(--dur-base) var(--ease)}
.cell:hover{background:var(--paper-2)}
.cell img{width:96px;height:auto;box-shadow:var(--shadow-plate);margin-bottom:var(--space-sm)}
.cell-mark img{width:56px;box-shadow:none}
.ct{font-size:1.3rem;line-height:1.2;color:var(--ink)}
.co{font-style:italic;font-size:1rem;line-height:1.45;color:var(--text-muted)}

/* the two doors */
.doors{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
html[data-overlay="white-label"] .sheet a.door:not(.button){display:flex;flex-direction:column;gap:var(--space-xs);padding:var(--space-lg);background:var(--paper);color:var(--ink-soft);border:0;text-decoration:none;transition:background var(--dur-base) var(--ease)}
html[data-overlay="white-label"] .sheet a.door.yellow:not(.button){background:var(--paper-2)}
.door:hover{background:var(--paper-2) !important}
.dt{font-size:clamp(1.8rem,5cqi,2.6rem);font-weight:300;line-height:1.1;color:var(--ink)}
.dl{font-size:1.1rem}
.ext-note{margin-top:var(--space-lg)}
@container (min-width:760px){.doors{grid-template-columns:1fr 1fr}}

/* the alphabet */
.alpha{display:flex;flex-wrap:wrap;gap:0 var(--space-sm);padding:var(--space-sm) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:var(--space-md) 0 var(--space-xl);font-family:var(--font-sans);font-size:.72rem;letter-spacing:.12em}
html[data-overlay="white-label"] .sheet .alpha a:not(.button){color:var(--ink);border:0;min-width:28px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.alpha span{color:var(--rule);min-width:28px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.alpha.lines a{text-transform:uppercase;padding:0 var(--space-xs)}

/* the white pages: columns, as a directory sets them */
.wp{column-count:1;column-gap:var(--space-xl)}
@container (min-width:760px){.wp{column-count:2;column-rule:1px solid var(--rule)}}
@container (min-width:1040px){.wp{column-count:3}}
.letter{break-inside:avoid-column;margin:0 0 var(--space-lg)}
.letter h2{font-weight:300;font-size:2.4rem;line-height:1;margin:0 0 var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid var(--gold)}
.entries{list-style:none;margin:0;padding:0}
.entry{break-inside:avoid;padding:6px 0 8px;border-bottom:1px solid var(--rule)}
html[data-overlay="white-label"] .sheet a.e:not(.button),a.e{display:flex;align-items:baseline;gap:6px;color:var(--ink);border:0;text-decoration:none;min-height:32px}
a.e .t{font-size:1.2rem;line-height:1.25;flex:0 1 auto}
a.e .dots{flex:1 1 24px;min-width:24px;border-bottom:1px dotted var(--lead);transform:translateY(-5px)}
a.e .x{font-family:var(--font-sans);font-weight:500;font-size:.74rem;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
a.e:hover .t{color:var(--gold-d)}
.sub{display:block;font-size:.95rem;line-height:1.4;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub .h{font-family:var(--font-sans);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.sub .also{font-style:italic}

/* the yellow pages: the same directory on the deeper ivory */
.yp{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.yline{min-width:0;background:var(--paper-2);padding:var(--space-lg) clamp(16px,4cqi,40px)}
.yline h2{font-weight:300;font-size:clamp(2rem,6cqi,3rem);line-height:1.05;margin:var(--space-xs) 0 var(--space-sm)}
.intro{max-width:var(--measure-air);margin:0 0 var(--space-sm)}
.see{margin:0 0 var(--space-md);font-size:1.05rem}
.see .label{margin-right:var(--space-xs)}

/* a book */
.book-head{grid-template-columns:1fr}
@container (min-width:760px){.book-head{grid-template-columns:minmax(200px,300px) 1fr !important;align-items:start !important}}
.cover{max-width:300px}
.cover img{aspect-ratio:auto}
.cover-none{display:flex;align-items:center;justify-content:center;aspect-ratio:5/8;max-width:240px;border:1px solid var(--rule);background:var(--paper-2)}
.cover-none img{width:40%}
.facts{display:grid;gap:var(--space-sm);margin:var(--space-lg) 0 0;padding:var(--space-md) 0 0;border-top:1px solid var(--rule)}
.facts div{display:grid;gap:2px}
.facts dd{margin:0;font-size:1.15rem;color:var(--ink)}
.signal-line{margin-top:var(--space-sm)}
.who-p{font-size:clamp(1.3rem,3cqi,1.55rem);line-height:1.55;color:var(--ink);max-width:var(--measure-air)}
.opener{margin-top:var(--space-lg);font-size:1.35rem;max-width:var(--measure-air)}
.asks{list-style:none;counter-reset:a;padding:0;margin:var(--space-md) 0 0;border-top:1px solid var(--rule);max-width:var(--measure-air)}
.asks li{display:flex;gap:var(--space-md);align-items:baseline;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid var(--rule)}
.asks .q{font-style:italic;font-size:1.2rem;color:var(--ink)}

/* the panel */
.talk{margin:var(--space-xl) 0;padding:var(--space-lg) clamp(16px,4cqi,44px);border:1px solid var(--rule);background:rgba(250,248,243,.86);scroll-margin-top:72px}
.talk-head h2{font-weight:300;font-size:clamp(2rem,6cqi,3rem);line-height:1.05;margin:var(--space-xs) 0}
.talk-line{margin:0 0 var(--space-md);color:var(--text-muted);font-style:italic}
.log{max-height:min(60vh,560px);overflow:auto;border-top:1px solid var(--rule);padding:var(--space-sm) 0}
.m{padding:var(--space-sm) 0;max-width:46rem}
.m.u{margin-left:auto;text-align:right}
.m.u .mt{color:var(--ink-soft);font-style:italic}
.m.b .mt{color:var(--ink);font-size:1.2rem}
.mk{margin-bottom:2px}
.mn{font-size:.95rem;font-style:italic;color:var(--text-muted);margin-top:4px}
.m.sys .mt{font-style:italic;color:var(--text-muted);font-size:1rem}
.talk-form{display:grid;grid-template-columns:1fr auto;gap:var(--space-md);align-items:end;border-top:1px solid var(--rule);padding-top:var(--space-md)}
.talk-form textarea{width:100%;resize:vertical;min-height:3.2em}
.talk-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-sm);margin-top:var(--space-sm)}
.again{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm)}
.dark{font-size:1.25rem;color:var(--ink);max-width:var(--measure-air)}
.care{margin-top:var(--space-md);font-size:1rem}
@media (max-width:520px){.talk-form{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── THE PRODUCT PAGES, 14 Nov 2026 ─────────────────────────────────────────────────────────────────────────────────────────
   His word: "beautiful, visual first, Ivory Season like all of our pages are", and the law of the same day: full of pictures,
   always moving, never mostly text. Plates lead; text rides beside them. Transform and opacity only, the house curve, the three
   durations, no hover lifts, no flashes; reduced motion shows everything at rest. */
.page{display:block}
.page > .sheet{padding-bottom:0}
.product .foot{margin-top:var(--rhythm-half)}

/* the cover: the white label's full plate, the mark and the name on the light top of the frame, the words low and left */
html[data-overlay="white-label"] .wl-cover.cz .scrim{background:linear-gradient(180deg,rgba(var(--wl-veil),.5) 0%,rgba(var(--wl-veil),.14) 30%,rgba(var(--wl-veil),0) 42%,rgba(var(--wl-veil),.34) 60%,rgba(var(--wl-veil),.7) 76%,rgba(var(--wl-veil),.82) 100%)}
.cz .mast .mk{display:block;width:clamp(54px,7cqi,80px);height:auto;margin:0 auto 4px;color:var(--wl-on-photo)}
html[data-overlay="white-label"] .cz .wl-lede{right:clamp(22px,6cqi,90px);max-width:36ch}
.cz .acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-lg);margin-top:var(--space-lg)}
html[data-overlay="white-label"] .button.on-photo{color:var(--wl-on-photo);border-color:rgba(251,248,240,.85)}
html[data-overlay="white-label"] .button.on-photo:hover{border-color:var(--gold)}
.bare.on-photo{color:var(--wl-on-photo)}
.bare.on-photo:hover{color:var(--gold)}

/* what it is: the words, and three covers beside them */
.speaks .badge{margin-top:var(--space-md)}
.machine{font-style:italic;color:var(--ink);max-width:var(--measure-air)}
.fan{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);align-items:end;align-self:center}
.fan li:nth-child(2){margin-bottom:16%}
html[data-overlay="white-label"] .sheet .fan a:not(.button){display:block;border:0}
.fan img{width:100%;box-shadow:var(--shadow-plate)}
@container (min-width:760px){.speaks{grid-template-columns:6fr 5fr !important;align-items:center !important}}

/* a book that is a person */
.ex .plate{max-width:none}
.ex .plate img{aspect-ratio:4 / 5}
html[data-overlay="white-label"] .sheet a.ex-cover:not(.button){float:right;display:block;width:clamp(64px,9cqi,96px);margin:4px 0 var(--space-sm) var(--space-md);border:0}
.ex-cover img{box-shadow:var(--shadow-plate)}
.ex .label{margin:var(--space-sm) 0 2px}
.ex-who{font-size:clamp(1.2rem,2.4cqi,1.4rem);line-height:1.55;color:var(--ink)}
.ex-talk{clear:both;margin:var(--space-lg) 0 0;padding:var(--space-sm) 0 0;border-top:1px solid var(--gold)}
.ex-q p:last-child{font-style:italic;font-size:1.35rem;line-height:1.35;color:var(--ink);margin:2px 0 var(--space-sm)}
.ex-a p:last-child{margin:2px 0 var(--space-sm)}
.ex-talk figcaption{font-size:.95rem;margin-top:var(--space-xs)}

/* the cinema between sections */
html[data-overlay="white-label"] .cine .wl-cap{margin:0}
html[data-overlay="white-label"] .cine .wl-cap blockquote.q{border:0;padding:0;font-weight:300}
html[data-overlay="white-label"] .cine .wl-cap .s{color:var(--wl-on-photo)}

/* where you can meet them: five doors, each a plate */
.ways{list-style:none;margin:var(--space-xl) 0 0;padding:0;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:minmax(0,1fr)}
.ways li{background:var(--paper);display:flex;flex-direction:column;min-width:0}
.ways .plate{box-shadow:none;max-width:none;width:100%}
.ways .plate img{aspect-ratio:1 / 1}
.way-body{display:flex;flex-direction:column;gap:4px;padding:var(--space-md) var(--space-md) var(--space-lg);flex:1}
.way-t{font-weight:300;font-size:1.7rem;line-height:1.12;margin:2px 0 4px}
.way-l{margin:0;font-size:1.08rem;color:var(--ink-soft)}
.way-door{margin:auto 0 0;padding-top:var(--space-sm)}
html[data-overlay="white-label"] .sheet .way-door a:not(.button){display:inline-flex;align-items:center;min-height:44px}
.way-soon{margin:auto 0 0;padding-top:var(--space-sm);color:var(--gold-d);display:flex;align-items:center;gap:8px;min-height:44px}
.way-soon .dot{width:6px;height:6px}
@container (min-width:600px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}.ways li:last-child{grid-column:1 / -1}.ways li:last-child .plate img{aspect-ratio:2 / 1}}
@container (min-width:820px){.ways{grid-template-columns:repeat(6,minmax(0,1fr))}.ways li{grid-column:span 2}.ways li:nth-child(-n+2){grid-column:span 3}.ways li:nth-child(-n+2) .plate img{aspect-ratio:4 / 3}.ways li:last-child{grid-column:span 2}.ways li:last-child .plate img{aspect-ratio:1 / 1}}

/* how a book becomes a person */
.how .plate img,.next .plate img{aspect-ratio:4 / 5}
.how .plate,.next .plate{max-width:none}
html[data-overlay="white-label"] .wl-steps.four{grid-template-columns:minmax(0,1fr)}
@container (min-width:640px){html[data-overlay="white-label"] .wl-steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:820px){html[data-overlay="white-label"] .band.wide .wl-steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
html[data-overlay="white-label"] .band:not(.wide) .wl-steps:not(.four){grid-template-columns:minmax(0,1fr)}
html[data-overlay="white-label"] .wl-steps p{max-width:none}
.first-line{margin-top:var(--space-xl);font-size:1.35rem;line-height:1.45;color:var(--ink);max-width:var(--measure-air)}

/* the library behind it */
.standing .wl-surfaces b{font-size:clamp(28px,4cqi,40px)}

/* the shelf: covers, uncut, each opening its page */
.shelf{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(40%,136px),1fr));gap:var(--space-lg) var(--space-md);align-items:start}
html[data-overlay="white-label"] .sheet a.cv:not(.button){display:flex;flex-direction:column;gap:4px;border:0;color:var(--ink);text-decoration:none}
.cv img{width:100%;height:auto;box-shadow:var(--shadow-plate);margin-bottom:var(--space-xs)}
.cv-t{font-size:1.1rem;line-height:1.25;transition:color var(--dur-base) var(--ease)}
html[data-overlay="white-label"] .sheet a.cv:not(.button):hover .cv-t{color:var(--gold-d)}
.cv-x{font-size:.6rem}

.suite{max-width:var(--measure-air);margin:var(--rhythm-half) 0;font-style:italic;color:var(--ink-soft);font-size:1.2rem}
.person{max-width:var(--measure-air);margin-top:var(--space-md)}

/* meet one now, and the authors' head: the plate beside the title */
.mhead .plate,.ahead .plate{max-width:28rem;width:100%}
.mhead .plate img,.ahead .plate img{aspect-ratio:4 / 5}
@container (min-width:760px){.airy .mhead,.airy .ahead{grid-template-columns:5fr 7fr !important;align-items:end;gap:var(--space-xl)}}
.featured .cover{max-width:260px}
.manner{margin:2px 0 var(--space-sm);font-size:1.2rem;color:var(--ink)}
.featured .label{margin-top:var(--space-sm)}
.door-line{margin-top:var(--space-md)}
html[data-overlay="white-label"] .sheet .door-line a:not(.button){display:inline-flex;align-items:center;min-height:44px}
.meet-more{margin-bottom:var(--space-xl)}

/* for authors: what the author receives, what stays the author's */
.gets,.trio{margin:var(--space-lg) 0 0;display:grid;border-top:1px solid var(--rule)}
.gets div,.trio div{padding:var(--space-sm) 0 var(--space-md);border-bottom:1px solid var(--rule)}
.gets dt,.trio dt{font-size:1.45rem;font-weight:400;line-height:1.2;color:var(--ink)}
.gets dd,.trio dd{margin:4px 0 0;color:var(--ink-soft)}
.receives .plate img{aspect-ratio:4 / 5}
.receives .plate{max-width:none}
@container (min-width:760px){.trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-lg);border-top:0}.trio div{border-top:1px solid var(--gold);border-bottom:0;padding-top:var(--space-md)}}

/* the enquiry: underline fields, choices as hairline boxes, never a default control */
.enq{display:grid;gap:var(--space-lg);max-width:40rem;margin-top:var(--space-lg)}
.enq .f{display:grid;gap:6px}
.enq input,.enq textarea{width:100%}
.enq textarea{resize:vertical;min-height:6em}
.roles{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-sm);min-width:0}
.roles legend{padding:0;margin:0 0 var(--space-xs)}
.role{position:relative;display:inline-flex}
.role input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.role span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-md);border:1px solid var(--rule);font-size:1.1rem;color:var(--ink-soft);transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.role input:checked + span{border-color:var(--gold);color:var(--ink)}
.role input:focus-visible + span{outline:1px solid var(--ink);outline-offset:3px}
.enq-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-lg)}
.enq-said{margin:0;font-style:italic;color:var(--text-muted);min-height:1.5em}
.enq[aria-busy="true"] button{opacity:.5}

/* the reveal: the overlay's own observer adds .in; nothing is hidden until its script says it will reveal it */
html.hlo-js [data-reveal]{opacity:0;transform:translateY(18px)}
html.hlo-js [data-reveal].in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease) calc(var(--i, 0) * var(--dur-fast) / 2),transform var(--dur-slow) var(--ease) calc(var(--i, 0) * var(--dur-fast) / 2)}
/* a plate out of view rests, so only what a person can see is moving */
.plate img.still,.wl-plate img.still,.wl-cover img.still{animation-play-state:paused !important}
.foot-doors{display:inline-flex;flex-wrap:wrap;gap:0 .4em}
@media (prefers-reduced-motion:reduce){html.hlo-js [data-reveal]{opacity:1;transform:none}}
@media print{html.hlo-js [data-reveal]{opacity:1 !important;transform:none !important}}

/* the introduction to the three examples sits close to the first of them */
.airy .ex-intro{padding-bottom:0}
.airy .ex-intro + .band{border-top:0}
.next .suite{margin:var(--space-lg) 0 0;font-size:1.15rem}