/* Ayana: catalogue artwork defines the sage palette. Editorial, minimal,
   design variance 5 / motion 2 / density 3. Layers: navigation 1, dialog top layer. */
:root { color-scheme: light; --paper:#f5f5f0; --ink:#354a40; --muted:#626b62; --line:#d3d8ce; --surface:#e8ebe3; --color-base-100:var(--paper); --color-base-200:var(--surface); --color-base-content:var(--ink); --radius-field:0; --size-field:.3rem; --border:1px; --depth:0; --noise:0; }
* { box-sizing:border-box; }
html { scroll-padding-top:88px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Helvetica Neue',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
figure,p,h1,h2,h3,dl,dd { margin:0; }
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--ink); outline-offset:5px; }
button,select { font:inherit; }
button,a { touch-action:manipulation; }
.wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:10px; padding:14px; background:var(--paper); transform:translateY(-160%); z-index:2; }
.skip-link:focus { transform:none; }
.site-header { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.studio-brand img { width:108px; height:auto; }
.back-link { display:inline-flex; min-height:44px; align-items:center; gap:12px; font-size:12px; }
.case-intro { padding-block:42px 32px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; }
.eyebrow { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; line-height:1.5; }
h1 { margin-top:14px; font-size:clamp(56px,6.8vw,96px); font-weight:500; line-height:1; letter-spacing:-.06em; }
.intro-summary { margin-top:18px; font-size:clamp(19px,2vw,26px); line-height:1.35; letter-spacing:-.025em; }
.text-link { display:inline-flex; align-items:center; gap:26px; min-height:44px; border-bottom:1px solid currentColor; font-size:12px; justify-self:start; }
.cover { grid-column:1/-1; width:100%; }
.cover img { width:100%; }
.chapter-bar { position:sticky; top:0; z-index:1; border-block:1px solid var(--line); background:var(--paper); }
.chapter-nav { display:flex; gap:38px; }
.chapter-nav a { position:relative; min-height:60px; display:flex; align-items:center; font-size:12px; white-space:nowrap; color:var(--muted); }
.chapter-nav a::after { content:''; position:absolute; bottom:-1px; inset-inline:0; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 160ms ease; }
.chapter-nav a[aria-current],.chapter-nav a:hover { color:var(--ink); }
.chapter-nav a[aria-current]::after,.chapter-nav a:hover::after { transform:scaleX(1); }
.chapter { padding-top:88px; }
h2 { max-width:840px; font-size:clamp(34px,4.1vw,58px); font-weight:500; line-height:1.1; letter-spacing:-.045em; text-wrap:balance; }
h3 { font-size:clamp(24px,2.5vw,34px); font-weight:500; line-height:1.2; letter-spacing:-.03em; }
.section-copy { max-width:670px; margin-top:24px; font-size:16px; line-height:1.7; color:var(--muted); }
.section-heading { margin-bottom:40px; }
.overview { display:grid; grid-template-columns:1.35fr .65fr; gap:100px; margin-bottom:44px; }
.project-facts { display:grid; grid-template-columns:1fr 1fr; gap:28px 20px; align-content:center; }
.project-facts dt { color:var(--muted); font-size:11px; margin-bottom:8px; }
.project-facts dd { font-size:13px; line-height:1.5; }
.spread-link { display:block; cursor:zoom-in; background:var(--surface); }
.spread img { width:100%; }
.spread figcaption { display:flex; justify-content:space-between; gap:20px; padding-top:13px; font-size:12px; line-height:1.5; color:var(--muted); }
.spread figcaption span:last-child { white-space:nowrap; font-size:10px; }
.design-note { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-block:48px 32px; }
.design-note p,.plan-feature p { color:var(--muted); font-size:15px; line-height:1.7; max-width:550px; }
.spread-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; }
.plan-feature { display:grid; grid-template-columns:.65fr 1.35fr; gap:48px; align-items:center; margin-top:56px; }
.plan-feature p { margin-top:20px; }
.plan-feature .text-link { margin-top:20px; }
.reader { border:1px solid var(--line); }
.reader-toolbar { display:flex; align-items:center; gap:16px; padding:18px 20px; }
.reader-toolbar label { font-size:12px; white-space:nowrap; }
.reader-toolbar select { background:var(--paper); border:1px solid var(--line); color:var(--ink); padding:12px; min-height:48px; min-width:0; width:270px; font-size:13px; border-radius:0; }
.reader-toolbar .btn { margin-left:auto; }
.btn { font-family:inherit; font-size:12px; font-weight:500; min-height:44px; gap:12px; white-space:nowrap; }
.btn:disabled { color:var(--muted); opacity:.55; }
.reader-stage { position:relative; background:var(--surface); }
.reader-stage img { width:100%; }
.reader-stage[aria-busy="true"] img { opacity:.55; }
#reader-error { padding:24px; font-size:14px; background:var(--paper); }
#reader-error a { text-decoration:underline; }
.reader-pagination { display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; padding:18px 20px; }
.reader-pagination .btn:first-child { justify-self:start; }
.reader-pagination .btn:last-child { justify-self:end; }
#page-status { font-size:12px; text-align:center; }
.page-text { border-top:1px solid var(--line); padding:0 20px; }
summary { cursor:pointer; font-size:13px; min-height:52px; padding-block:18px; }
#page-transcript { max-width:850px; padding-bottom:24px; }
#page-transcript p { font-size:15px; line-height:1.75; white-space:pre-line; overflow-wrap:anywhere; }
.page-index { margin-top:24px; border-block:1px solid var(--line); }
.page-index summary { font-size:14px; padding-block:22px; }
.page-index summary > span { float:right; color:var(--muted); font-size:11px; }
.thumbnail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 20px; padding-bottom:32px; }
.thumbnail-grid a { display:block; padding:4px; border:2px solid transparent; }
.thumbnail-grid a:hover,.thumbnail-grid a[aria-current="page"] { border-color:var(--ink); }
.thumbnail-grid img { width:100%; }
.thumbnail-grid a > span { display:flex; gap:10px; padding-top:10px; color:var(--muted); font-size:11px; line-height:1.5; }
.thumbnail-grid b { color:var(--ink); font-weight:400; }
.next-project { margin-top:88px; border-top:1px solid var(--line); }
.next-project .previous-case { display:flex; gap:12px; align-items:center; width:max-content; min-height:44px; margin-top:22px; font-size:12px; }
.next-project > a:last-child { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px 30px; padding-block:24px 42px; }
.next-project span { color:var(--muted); font-size:11px; }
.next-project strong { grid-column:1; font-size:clamp(23px,3.3vw,46px); font-weight:500; letter-spacing:-.04em; }
.next-project b { grid-column:2; grid-row:1/3; font-size:36px; font-weight:400; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:90px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); }
.site-footer a { display:inline-flex; align-items:center; min-height:44px; gap:20px; color:var(--ink); }
.modal { padding:20px; }
.modal::backdrop { background:rgb(18 30 23 / .82); }
.modal-box { width:min(1600px,100%); max-width:none; max-height:calc(100dvh - 40px); padding:0; border-radius:0; background:var(--paper); color:var(--ink); box-shadow:none; display:flex; flex-direction:column; overflow:hidden; }
.viewer-toolbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.viewer-toolbar h2 { margin-right:auto; font-size:17px; line-height:1.3; letter-spacing:-.02em; }
.viewer-toolbar form { margin:0; }
.viewer-canvas { overflow:auto; overscroll-behavior:contain; min-height:0; background:var(--surface); }
.viewer-canvas img { width:100%; height:auto; max-height:calc(100dvh - 230px); object-fit:contain; }
.viewer-canvas.is-zoomed img { width:2400px; max-width:none; max-height:none; }
.viewer-pagination { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; }
#viewer-status { font-size:12px; text-align:center; }
#viewer-error { padding:20px; }
body:has(dialog[open]) { overflow:hidden; }
[hidden] { display:none !important; }
@media (max-width:1024px) { .wrap { width:calc(100% - 64px); } .overview { gap:44px; } .plan-feature { grid-template-columns:1fr; gap:24px; } }
@media (max-width:767px) {
 .wrap { width:calc(100% - 40px); }
 .site-header { min-height:72px; }
 .studio-brand img { width:95px; }
 .back-link { font-size:11px; gap:8px; }
 .case-intro { grid-template-columns:1fr; padding-top:32px; gap:22px; }
 h1 { font-size:64px; }
 .eyebrow { font-size:10px; }
 .intro-summary { margin-top:16px; font-size:21px; }
 .chapter-nav { gap:14px; justify-content:space-between; }
 .chapter-nav a { min-height:56px; font-size:10px; }
 .chapter { padding-top:60px; }
 .overview,.design-note,.spread-pair { grid-template-columns:1fr; }
 .overview { gap:30px; margin-bottom:30px; }
 .section-copy { font-size:15px; margin-top:20px; }
 .section-heading { margin-bottom:28px; }
 .design-note { gap:18px; padding-block:36px 24px; }
 .spread-pair { gap:26px; margin-top:26px; }
 .plan-feature { margin-top:40px; }
 .spread figcaption { font-size:11px; gap:12px; }
 .reader-toolbar { display:grid; grid-template-columns:auto 1fr; padding:14px; gap:12px; }
 .reader-toolbar select { width:100%; font-size:12px; }
 .reader-toolbar .btn { grid-column:1/-1; justify-self:end; }
 .reader-pagination { grid-template-columns:1fr 1fr; padding:14px; gap:14px; }
 #page-status { grid-column:1/-1; grid-row:1; font-size:11px; }
 .reader-pagination .btn { font-size:11px; }
 .page-text { padding-inline:14px; }
 .thumbnail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
 .next-project { margin-top:60px; }
 .modal { padding:10px; }
 .modal-box { max-height:calc(100dvh - 20px); }
 .viewer-toolbar { padding:12px; display:grid; grid-template-columns:1fr auto; gap:12px; }
 .viewer-toolbar h2 { grid-column:1/-1; font-size:15px; }
 .viewer-toolbar #zoom-page { justify-self:start; }
 .viewer-toolbar form { justify-self:end; }
 .viewer-pagination { flex-wrap:wrap; padding:12px; }
 #viewer-status { order:-1; width:100%; }
}
@media (prefers-color-scheme:dark) { :root { color-scheme:dark; --paper:#1d2a23; --ink:#eff2e9; --muted:#b6c1b5; --line:#46544a; --surface:#2a392f; } .studio-brand img { filter:brightness(0) invert(1); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }