/* =============================================================================
   Kamiel van Roey — site.css (shared foundation)
   Tokens, fonts, type, grid, chrome (header / thumb bar / footer), hero,
   figure display classes (spec 7.2), cabinet, stitch, slip, stamp, red circles,
   sheet base, toast, review panel, about + 404 views, motion, print base.
   Module styles live in home.css, archive.css, entry.css, viewer.css, now.css.
   ========================================================================== */

/* 1. Fonts ------------------------------------------------------------------ */

@font-face{font-family:"Archivo";src:url(../fonts/archivo-var-latin.woff2) format("woff2");
  font-weight:400 800;font-stretch:62% 100%;font-style:normal;font-display:swap;
  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:"Archivo";src:url(../fonts/archivo-arrows.woff2) format("woff2");
  font-weight:400 800;font-stretch:62% 100%;font-style:normal;font-display:swap;
  unicode-range:U+2190,U+2192;}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-italic-latin.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  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:"Archivo Fallback";src:local("Arial"),local("ArialMT");
  ascent-override:87.8%;descent-override:21%;line-gap-override:0%;size-adjust:100%;}
@font-face{font-family:"EB Garamond Fallback";src:local("Georgia Italic"),local("Georgia-Italic"),local("Georgia");
  font-style:italic;size-adjust:80%;}
/* the condensed display face falls back to a bold sans scaled to its width, so titles keep their line count */
@font-face{font-family:"Archivo Display Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arial"),local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");size-adjust:72%}

/* 2. Tokens ----------------------------------------------------------------- */

/* --m holds env() (notch-safe gutters): registered as a length so scripts read it back in px */
@property --m{syntax:"<length>";inherits:true;initial-value:16px}

:root{
  --paper:#F7F5EF; --ink:#121110; --muted:#5F5D58; --dim:#85847F; --hairline:#D6D4CE;
  --slot:#EFEDE6; --cabinet:#ECE9E1; --mark:#C0271B; --night:#0E0D0C; --on-night:#ECEAE3; --on-night-muted:#A9A7A1;
  --stitch:color-mix(in srgb, var(--ink) 45%, transparent);
  --grain:url(../img/ui/grain.png);
  --veil:rgb(18 17 16 / .32);

  --m:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --g:16px; --cols:12; --header:48px; --bar:56px;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:96px; --s8:160px;
  --row-gap:clamp(48px, 9vh, 160px);
  --cap-h:32px;            /* height of a frame-code / caption line under an image */
  --tap:32px;              /* minimum height of chips and inline controls (44px on touch) */
  --safe-b:env(safe-area-inset-bottom, 0px);
  --bar-h:0px;             /* height the thumb bar occupies (set below when it shows) */

  --sans:"Archivo","Archivo Fallback",Arial,"Helvetica Neue",sans-serif;
  --serif:"EB Garamond","EB Garamond Fallback",Georgia,serif;
  --display:"Archivo","Archivo Display Fallback",Arial,sans-serif;
  --fs-11:11px; --fs-13:13.5px; --fs-15:15px; --fs-20:20px;

  --motion:1;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-reveal:cubic-bezier(.65,.05,.35,1);
  --ease-morph:cubic-bezier(.2,.8,.2,1);
  --ease-reflow:cubic-bezier(.3,.7,0,1);
  --t-fast:calc(150ms * var(--motion));

  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){ :root{
  --paper:#12110F; --ink:#ECEAE3; --muted:#9C9A94; --dim:#75736E; --hairline:#2C2A27;
  --slot:#1B1A18; --cabinet:#1E1C1A; --mark:#EA5246;   /* 4.80:1 on --slot */
  --grain:none; --veil:rgb(0 0 0 / .55);
}}
@media (min-width:768px){ :root{ --m:max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) } }
@media (min-width:1024px){ :root{ --m:max(40px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); --cols:24 } }
@media (min-width:1600px){ :root{ --m:max(64px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) } }
@media (pointer:coarse){ :root{ --tap:44px } }
/* the thumb bar: narrow and tall screens only (landscape phones and iPad landscape keep the inline header nav) */
@media (max-width:1023px) and (min-height:501px){ :root{ --bar-h:calc(var(--bar) + var(--safe-b)) } }
@media (prefers-reduced-motion: reduce){ :root{ --motion:0 } }
html[data-motion="off"]{ --motion:0 }

/* 3. Base ------------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;
  scroll-padding-top:calc(var(--header) + var(--s3));scroll-padding-bottom:var(--bar-h)}
html:has(dialog[open]){overflow:hidden;scrollbar-gutter:stable}
/* the reserved gutter shows the canvas: give it the colour of the surface next to it */
html:has(#sheet[open]){background:var(--paper) var(--grain) repeat;background-size:96px 96px}
html:has(#viewer[open]){background-color:var(--night)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;overflow-x:clip;
  padding-top:var(--header);
  background:var(--paper) var(--grain) repeat;background-size:96px 96px;
  color:var(--ink);font-family:var(--sans);font-size:var(--fs-13);line-height:1.35;font-weight:400;
  font-kerning:normal;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
main{flex:1 0 auto;display:block}
/* a shared deep link: the head script sets data-route before first paint; the rule lets go once the view mounts */
html:not([data-route="home"]) #view:empty{min-height:100svh}
/* a shared frame link: the page under the viewer waits, so the frame loads first (main.js sets data-deep) */
html[data-deep] #view{content-visibility:hidden}
/* boot failure: shown only when the head script caught a module or data error (main.js never booted) */
.boot-fail{display:none;padding:var(--s5) var(--m)}
html[data-boot-fail] .boot-fail{display:block}
html[data-review][data-boot-fail]::after{content:"Review — " attr(data-boot-fail);position:fixed;inset:auto 0 0 0;z-index:99;
  padding:12px var(--m);background:var(--mark);color:#fff;font:13px/1.3 monospace}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
img{height:auto;border:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;text-align:inherit;text-transform:inherit}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
[hidden]{display:none !important}
::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
[tabindex="-1"]:focus{outline:none}
#viewer :focus-visible{outline-color:var(--on-night)}

.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:fixed;z-index:60;left:var(--m);top:8px;padding:10px 12px;background:var(--ink);color:var(--paper);
  font-size:var(--fs-11);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;translate:0 -200%}
.skip:focus{translate:0 0}

/* 4. Type ------------------------------------------------------------------- */

/* 11px labels, nav, credits, meta, frame codes, counters */
.t-11{font-family:var(--sans);font-size:var(--fs-11);line-height:1.35;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;font-variant-numeric:tabular-nums lining-nums}
.lh-1{line-height:1}
/* body */
.t-13{font-family:var(--sans);font-size:var(--fs-13);line-height:1.35;letter-spacing:0;max-width:30rem}
/* voice */
.v-15{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-15);line-height:1.4;letter-spacing:0;text-transform:none}
.v-20{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-20);line-height:1.3;letter-spacing:0;text-transform:none}
/* runway house names */
.h-20{font-family:var(--display);font-stretch:62%;font-weight:700;font-size:var(--fs-20);line-height:1;letter-spacing:.035em;text-transform:uppercase}
/* display: one per view */
.d-name,.d-row,.d-entry{font-family:var(--display);font-stretch:62%;font-weight:760;text-transform:uppercase;letter-spacing:.02em;
  font-variant-numeric:tabular-nums lining-nums}
.d-name{font-size:clamp(64px, calc(11vw + 40px), 196px);line-height:.82}
.d-row{font-size:clamp(34px, 8vw, 132px);line-height:.88;overflow-wrap:anywhere}
.d-entry{font-size:clamp(44px, 9vw, 168px);line-height:.86;overflow-wrap:anywhere}

.tnum{font-variant-numeric:tabular-nums lining-nums}
.ink{color:var(--ink)} .muted{color:var(--muted)} .dim{color:var(--dim)} .mark{color:var(--mark)}
.measure{max-width:30rem}
.nowrap{white-space:nowrap}
.arw{font-family:var(--sans);font-style:normal;font-weight:400;text-decoration:none}
/* ↗ is not in Archivo: drawn to match its arrow weight */
.arw--ne{display:inline-block;width:.7em;height:.7em;vertical-align:-.02em;overflow:visible}

/* 5. Layout ----------------------------------------------------------------- */

.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);padding-inline:var(--m)}
.wrap{padding-inline:var(--m)}
.full{grid-column:1/-1}
.col-head,.col-main{grid-column:1/-1}
@media (min-width:1024px){
  .col-head{grid-column:2/15}          /* entry / about / 404 header: columns 2–14 */
  .col-main{grid-column:3/23}          /* plates, cabinets, pages: columns 3–22 */
}

.rule{border:0;border-top:1px solid var(--hairline);margin:0}

/* 6. Controls --------------------------------------------------------------- */

/* UI caps links and buttons: no underline at rest, underline on hover, solid when current/pressed */
.ui{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;
  text-underline-offset:4px;transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.ui[aria-current],.ui[aria-pressed="true"]{text-decoration-color:currentColor}
@media (hover:hover){ .ui:hover{text-decoration-color:currentColor} }
.ui:active{opacity:.6}

/* links inside running text */
.link{color:inherit;text-decoration:underline;text-decoration-color:var(--hairline);text-decoration-thickness:1px;
  text-underline-offset:.2em;transition:text-decoration-color var(--t-fast) var(--ease)}
@media (hover:hover){ .link:hover{text-decoration-color:currentColor} }

/* expands the hit area of a small control to 44px without changing its look */
.hit{position:relative}
.hit::after{content:"";position:absolute;left:50%;top:50%;width:max(100%, 44px);height:max(100%, 44px);translate:-50% -50%}

/* chips: facets, tags, toggles */
.chip{display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:6px;
  font-size:var(--fs-11);line-height:1;letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums lining-nums;
  color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;
  white-space:nowrap;transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
.chip[aria-pressed="true"],.chip[aria-current]{color:var(--ink);text-decoration-color:currentColor}
@media (hover:hover){ .chip:hover{color:var(--ink)} }
.chip:active{opacity:.6}

/* separators between inline items */
.sep{color:var(--muted);padding-inline:.45em;speak:never}

/* archive slip: inline box, 1px mark border */
.slip{display:inline-block;border:1px solid var(--mark);padding:6px 10px;
  font-size:var(--fs-11);line-height:1.35;letter-spacing:.1em;text-transform:uppercase;font-variant-numeric:tabular-nums lining-nums;
  color:var(--ink);text-decoration:none;text-align:left;
  transition:background-color var(--t-fast) var(--ease)}
.slip .arw{transition:translate var(--t-fast) var(--ease)}
@media (hover:hover){ .slip:hover{background:color-mix(in srgb, var(--mark) 7%, transparent)} }
.slip:active{opacity:.7}
.slip .sep{padding:0;color:inherit}
/* <p class="slip-box"><button class="slip"><span>Archive …</span><span class="sep"> · </span><span>Current look …</span>:
   in a narrow column the slip stacks into two clean lines and its box hugs them, never a ragged wrap */
.slip-box{container-type:inline-size}
@container (max-width:420px){
  .slip > span{display:block}
  .slip > .sep{display:none}
}

/* red stamp */
.stamp{display:inline-block;padding:4px 6px 3px;border:1px solid var(--mark);color:var(--mark);
  font-size:var(--fs-11);line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}

/* 7. Header ----------------------------------------------------------------- */

.top-sentinel{position:absolute;top:8px;left:0;width:1px;height:1px;pointer-events:none}
.site-header{position:fixed;z-index:20;inset:0 0 auto;height:var(--header);display:flex;align-items:center;
  padding-inline:var(--m);background:var(--paper) var(--grain) repeat;background-size:96px 96px;
  border-bottom:1px solid transparent;transition:border-color var(--t-fast) var(--ease)}
.site-header.is-scrolled{border-bottom-color:var(--hairline)}
.lockup{display:inline-flex;align-items:baseline;gap:.42em;text-decoration:none;color:var(--ink);white-space:nowrap;
  min-height:44px;align-content:center;padding-block:14px}
.lockup-first{font-size:var(--fs-11);line-height:1;letter-spacing:.1em;text-transform:uppercase}
/* the wordmark (img/ui/logo-kamiel.png, 5.09:1) as a mask, so it takes the ink colour in both themes */
.logo{display:inline-block;aspect-ratio:1863/366;background:currentColor;
  -webkit-mask:url(../img/ui/logo-kamiel.png) 0 0/100% 100% no-repeat;mask:url(../img/ui/logo-kamiel.png) 0 0/100% 100% no-repeat}
.lockup-first.logo{height:11px;letter-spacing:0}
.hero-name .d-name.logo{width:2.72em;margin-left:0;line-height:1;margin-bottom:.06em}
@media (forced-colors:active){ .logo{background:CanvasText} }
.lockup-last{font-family:var(--serif);font-style:italic;font-size:var(--fs-15);line-height:1}
.header-meta{position:absolute;left:50%;translate:-50% 0;display:none;color:var(--muted);white-space:nowrap;line-height:1;
  transition:opacity var(--t-fast) var(--ease)}
/* on the home hero the hero alone says MODEL — BELGIUM: the meta fades in once the page scrolls, and steps out at once */
[data-route="home"] .site-header:not(.is-scrolled) .header-meta{opacity:0;visibility:hidden;transition:none}
@media (min-width:1200px){ .header-meta{display:block} }
.header-nav{margin-left:auto;margin-right:-10px;display:flex;align-items:center}
.nav-item{display:inline-flex;align-items:center;height:var(--header);padding-inline:10px;white-space:nowrap;
  font-size:var(--fs-11);line-height:1;letter-spacing:.1em;text-transform:uppercase}
.header-nav .sep{padding-inline:0}
.nav-mobile{display:none}
@media (max-width:1023px) and (min-height:501px){
  .nav-desk{display:none}
  .nav-mobile{display:inline-flex}
}

/* 8. Thumb bar -------------------------------------------------------------- */

.thumb-bar{display:none}
@media (max-width:1023px) and (min-height:501px){
  .thumb-bar{display:grid;grid-template-columns:1fr auto 1fr;position:fixed;z-index:20;inset:auto 0 0;
    height:calc(var(--bar) + var(--safe-b));padding-bottom:var(--safe-b);padding-inline:calc(var(--m) - 8px);
    background:var(--paper) var(--grain) repeat;background-size:96px 96px;border-top:1px solid var(--hairline)}
  .thumb-bar > *{display:flex;align-items:center;justify-content:center;min-height:44px;height:100%;padding-inline:8px;text-align:center;
    font-size:var(--fs-11);line-height:1;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
  .thumb-bar > :first-child{justify-content:flex-start}
  .thumb-bar > :last-child{justify-content:flex-end}
  /* no contact yet: BOOKING is hidden and the bar keeps two ends */
  .thumb-bar:has(> [data-sheet="book"][hidden]){grid-template-columns:1fr 1fr}
  .thumb-bar:has(> [data-sheet="book"][hidden]) > [data-sheet="now"]{justify-content:flex-end}
}

/* 9. Footer ----------------------------------------------------------------- */

.site-footer{margin-top:var(--s8);padding:var(--s5) var(--m) calc(var(--s5) + var(--bar-h));
  border-top:1px solid var(--hairline);display:grid;gap:var(--s3)}
.footer-line{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s4);row-gap:var(--s2);max-width:none}
.footer-id{color:var(--ink);margin-right:auto}
.footer-line .ui{text-decoration-color:var(--hairline)}
@media (hover:hover){ .footer-line .ui:hover{text-decoration-color:currentColor} }
.footer-note{color:var(--muted)}
@media (max-width:1023px) and (min-height:501px){
  .site-footer{padding-bottom:calc(var(--bar) + var(--safe-b) + 24px)}
  .footer-line{column-gap:var(--s4);row-gap:0}
  .footer-id{flex-basis:100%;padding-bottom:var(--s2)}
  .footer-line > .ui{display:inline-flex;align-items:center;min-height:44px}
}

/* 10. Hero ------------------------------------------------------------------ */

.hero{display:none}
[data-route="home"] .hero{display:grid}
.hero{grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);row-gap:var(--s3);
  padding:12px var(--m) 0}
.hero-plate{grid-column:1/-1;margin:0;justify-self:start;
  width:min(100%, calc(72svh * var(--ar)), calc(var(--nw) * 1px))}
.hero-link{display:block;color:inherit;text-decoration:none}
.hero-plate img{width:100%;height:auto}
.hero-cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-top:12px;color:var(--muted)}
.hero-cap .count{flex:none}
.hero-id{grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start;container-type:inline-size}
.hero-name{display:flex;flex-direction:column;align-items:flex-start;color:var(--ink)}
/* the name never runs into the plate: capped by the width of its own columns */
.hero-name .d-name{display:block;margin-left:-.035em;font-size:min(clamp(64px, calc(11vw + 40px), 196px), calc(100cqi / 2.9))}
.hero-name .v-20{display:block;margin-top:.5em}
.hero-base{margin-top:var(--s3);color:var(--ink)}
.hero-stats{margin-top:6px;color:var(--ink)}
.hero-slip{margin-top:var(--s3);align-self:stretch}
.hero-back{margin-top:var(--s3);color:var(--ink);max-width:24em}
.hero-hall{margin-top:var(--s4);color:var(--muted)}
.hero-hall a,.ag{color:var(--ink)}
.hall-ag{display:block;margin-top:var(--s2)}
.hero-hall .link,.about-list .link{text-decoration-color:color-mix(in srgb, currentColor 50%, transparent)}
@media (hover:hover){ .hero-hall .link:hover,.about-list .link:hover{text-decoration-color:currentColor} }
/* phones: the face at about half the screen, the credits above the slip, all clear of the thumb bar */
@media (max-width:599px){
  /* half the screen; on short phones (360×740) a little less, so the credits clear the bar (never under 44svh) */
  .hero-plate{width:min(100%, calc(clamp(44svh, 100svh - var(--header) - var(--bar-h) - 300px, 50svh) * var(--ar)), calc(var(--nw) * 1px))}
  .hero-hall{order:1;margin-top:var(--s3)}
  .hero-slip{order:2}
}
@media (min-width:768px){
  .hero{row-gap:var(--s4);padding-top:var(--s3)}
  .hero-base,.hero-slip{margin-top:var(--s4)}
  .hero-stats{margin-top:var(--s2)}
}
/* tablets and narrow windows: the desktop composition on 12 columns, identity left, plate right */
@media (min-width:600px) and (max-width:1023px){
  .hero{align-items:end;row-gap:0;padding-bottom:var(--s4)}
  .hero-id{grid-column:1/6;grid-row:1;align-self:end;padding-bottom:var(--cap-h)}
  .hero-plate{grid-column:6/-1;grid-row:1;align-self:end;justify-self:end;
    width:min(100%, calc((100svh - var(--header) - var(--bar-h) - var(--cap-h) - 48px) * var(--ar)), calc(var(--nw) * 1px))}
  /* one line where the plate allows it; a narrow plate (600px, landscape phones) wraps it rather than overflow */
  .hero-cap{min-height:var(--cap-h)}
  .cap-medium{display:none}
}
@media (min-width:1024px){
  .hero{min-height:calc(100svh - var(--header));align-items:end;row-gap:0;padding-top:var(--s5);padding-bottom:var(--s4)}
  .hero-id{grid-column:2/12;grid-row:1;align-self:end;padding-bottom:var(--cap-h)}
  .hero-id > :not(.hero-name){max-width:min(30rem, 90cqi)}
  .hero-plate{grid-column:12/-1;grid-row:1;align-self:end;
    width:min(100%, calc(min(82svh, 840px, 100svh - var(--header) - var(--bar-h) - var(--cap-h) - 64px) * var(--ar)), calc(var(--nw) * 1px))}
  .hero-cap{height:var(--cap-h)}
  .hero-base{margin-top:var(--s5)}
}

/* 11. Figures and rows (display classes, spec 7.2) --------------------------- */
/* Every figure carries --nw / --nh (largest file ÷ 1.5, CSS px) and --ar (w/h).
   Widths are computed so the image never upscales and never distorts. */

.fig{margin:0;min-width:0;max-width:calc(var(--nw) * 1px);position:relative}
.fig img{width:100%;height:auto}
.fig-link{display:block;color:inherit;text-decoration:none;cursor:zoom-in}
.fig-link:focus-visible{outline-offset:4px}
.fig-cap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-top:10px;color:var(--muted)}
.fig-code{flex:none}
.fig-label{color:var(--muted)}
.fig-label.ui{text-decoration-color:transparent}
@media (hover:hover){ .fig-label.ui:hover{color:var(--ink);text-decoration-color:currentColor} }

.rows{display:flex;flex-direction:column;gap:var(--row-gap)}
.row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--g);padding-inline:var(--m)}
.row > *{grid-column:1/-1}

/* plate / plate-left / plate-right */
.fig--plate,.fig--plate-left,.fig--plate-right{justify-self:center;width:min(100%, calc(var(--nw) * 1px))}
/* pair: stacked on mobile */
.row--pair{row-gap:var(--s4)}
.fig--pair{justify-self:center;width:min(100%, calc(var(--nw) * 1px))}
/* small alone on paper (Selected) */
.fig--small{justify-self:center;width:min(100%, calc(var(--nw) * 1px), 320px)}
.row--small .fig--small{width:min(100%, calc(var(--nw) * 1px))}
/* printed pages and spreads */
.fig--page{justify-self:center;width:min(100%, calc(var(--nw) * 1px), 960px)}
.fig--page img{outline:1px solid var(--hairline);outline-offset:0}
/* full bleed: no margins, always seen whole between header and thumb bar, never upscaled;
   the caption lines up with the image edge, never inside the page margin */
.row--bleed{display:block;padding-inline:0;container-type:inline-size}
.fig--bleed{width:min(100%, calc(var(--nw) * 1px), calc((100svh - var(--header) - var(--bar-h)) * var(--ar)));max-width:none;margin-inline:auto}
.fig--bleed .fig-cap{padding-inline:max(0px, calc(var(--m) - (100cqw - 100%) / 2))}

@media (min-width:768px) and (max-width:1023px){
  .row--plate > .fig{grid-column:2/12;width:min(100%, calc(var(--nw) * 1px), calc(min(88svh, 100svh - var(--header) - var(--bar-h) - var(--cap-h) - 24px) * var(--ar)))}
  .row--pair{row-gap:0;align-items:center}
  .row--pair > .fig:nth-child(1){grid-column:1/7;justify-self:end}
  .row--pair > .fig:nth-child(2){grid-column:7/13;justify-self:start}
  .fig--pair{width:min(100%, calc(var(--nw) * 1px), calc(min(88svh, 100svh - var(--header) - var(--bar-h) - var(--cap-h) - 24px) * var(--ar)))}
  .row--page > .fig,.row--cabinet > .cabinet{grid-column:2/12}
}
@media (min-width:1024px){
  .row--plate > .fig{grid-column:3/23;width:min(100%, calc(var(--nw) * 1px), calc(min(88svh, 100svh - var(--header) - var(--bar-h) - var(--cap-h) - 24px) * var(--ar)))}
  .row--plate > .fig--plate-left{justify-self:start}
  .row--plate > .fig--plate-right{justify-self:end}
  .row--pair{row-gap:0;align-items:center}
  .row--pair > .fig:nth-child(1){grid-column:3/12;justify-self:end}
  .row--pair > .fig:nth-child(2){grid-column:14/23;justify-self:start}
  .fig--pair{width:min(100%, calc(var(--nw) * 1px), calc(min(88svh, 100svh - var(--header) - var(--bar-h) - var(--cap-h) - 24px) * var(--ar)))}
  .row--page > .fig,.row--cabinet > .cabinet,.row--small > .fig{grid-column:3/23}
  .row--cabinet > .cabinet{justify-self:start;width:fit-content;max-width:100%}
  .cabinet:has(> .fig:nth-child(4):last-child){display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .cabinet:has(> .fig:nth-child(4):last-child) > .fig{width:100%}
}

/* thumbnails and cells: 480w, 4:5 box, contain on paper */
.fig--thumb{max-width:none;width:100%}
.fig--thumb img{width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}

/* 12. Cabinet, stitch, corners, red circles ---------------------------------- */

.cabinet{background:var(--cabinet);padding:var(--s3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;align-items:end;justify-items:center}
.cabinet > .fig{width:min(100%, calc(var(--nw) * 1px));max-width:none}
.cabinet > .fig:only-child{grid-column:1/-1}
@media (max-width:767px){
  .cabinet > .fig:last-child:nth-child(odd):not(:only-child){grid-column:1/-1;max-width:calc(50% - 6px)}
  .site-footer{margin-top:var(--s6)}
}
@media (min-width:768px){
  .cabinet{padding:var(--s5);display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:var(--s5)}
  .cabinet > .fig{width:min(calc(var(--nw) * 1px), 320px);flex:none}
}

.stitch{background:
  repeating-linear-gradient(90deg,var(--stitch) 0 6px,transparent 6px 11px) top/100% 1px no-repeat,
  repeating-linear-gradient(90deg,var(--stitch) 0 6px,transparent 6px 11px) bottom/100% 1px no-repeat,
  repeating-linear-gradient(0deg,var(--stitch) 0 6px,transparent 6px 11px) left/1px 100% no-repeat,
  repeating-linear-gradient(0deg,var(--stitch) 0 6px,transparent 6px 11px) right/1px 100% no-repeat,
  var(--slot)}
/* a stitched underline only (N°15 row) */
.stitch-line{background:repeating-linear-gradient(90deg,var(--stitch) 0 6px,transparent 6px 11px) bottom/100% 1px no-repeat}

/* four 7px diagonal corner stitches at 8px inset (photo-corner mounts) */
.corners{position:relative}
.corners::before{content:"";position:absolute;inset:0;pointer-events:none;background:currentColor;opacity:.45;
  --c1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 7L7 0' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  --c2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0L7 7' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E");
  -webkit-mask:var(--c1) left 8px top 8px/7px 7px no-repeat,var(--c2) right 8px top 8px/7px 7px no-repeat,
               var(--c2) left 8px bottom 8px/7px 7px no-repeat,var(--c1) right 8px bottom 8px/7px 7px no-repeat;
          mask:var(--c1) left 8px top 8px/7px 7px no-repeat,var(--c2) right 8px top 8px/7px 7px no-repeat,
               var(--c2) left 8px bottom 8px/7px 7px no-repeat,var(--c1) right 8px bottom 8px/7px 7px no-repeat}

/* empty 4:5 polaroid slot: <div class="slot stitch corners"><span class="slot-label t-11">P—01 Front</span></div> */
.slot{position:relative;aspect-ratio:4/5;color:var(--ink)}
.slot-label{position:absolute;left:22px;right:22px;bottom:19px;color:var(--muted)}

/* red grease-pencil circle: <span class="rc rc-0|1|2" aria-hidden="true"></span> inside a positioned box */
.rc{position:absolute;inset:-7% -9%;pointer-events:none;background:var(--mark);
  -webkit-mask:var(--rc) center/100% 100% no-repeat;mask:var(--rc) center/100% 100% no-repeat}
.rc-0{--rc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M9 55C6 30 27 7 52 6C77 5 96 25 94 51C92 77 71 95 47 94C23 93 5 75 8 49C10 33 22 19 38 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.rc-1{--rc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M79 12C95 25 98 50 89 70C79 90 51 97 30 90C10 83 3 58 7 38C12 17 35 4 58 5C71 6 83 12 92 23' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
.rc-2{--rc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M22 86C7 72 3 45 13 26C24 8 51 3 72 9C92 16 99 43 93 64C87 85 62 97 40 95C28 94 17 88 10 78' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}

/* 13. Dialogs: sheet base, viewer base -------------------------------------- */

dialog{padding:0;border:0;margin:0;color:inherit;background:none;max-width:none;max-height:none}

/* --sbw: the page scrollbar's width, measured as a modal opens; its stable gutter stays beside the dialog */
#sheet{position:fixed;inset:0 var(--sbw, 0px) 0 auto;width:min(520px, 100%);height:100dvh;
  background:var(--paper) var(--grain) repeat;background-size:96px 96px;color:var(--ink);
  border-left:1px solid var(--hairline);overflow:auto;overscroll-behavior:contain;
  translate:0 0;transition:translate calc(300ms * var(--motion)) var(--ease-morph)}
@starting-style{ #sheet[open]{translate:100% 0} }
#sheet::backdrop{background:var(--veil, rgb(18 17 16 / .32))}
@media (max-width:767px){
  #sheet{inset:auto var(--sbw, 0px) 0 0;width:auto;height:88svh;border-left:0;border-top:1px solid var(--hairline)}
  @starting-style{ #sheet[open]{translate:0 100%} }
}
.sheet-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:var(--s3);height:var(--header);
  padding-inline:var(--s4) calc(var(--s4) - 12px);background:var(--paper) var(--grain) repeat;background-size:96px 96px;
  border-bottom:1px solid var(--hairline)}
.sheet-title{margin-right:auto;color:var(--muted);line-height:1}
@media (max-width:479px){ .sheet-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .sheet-bar{justify-content:space-between;padding-left:calc(var(--s4) - 10px)} }
.sheet-bar .nav-item{height:44px}
/* the bar sits at the sheet's edge: its focus ring is drawn inside, never clipped */
.sheet-bar :focus-visible{outline-offset:-4px}
.sheet-body{padding:var(--s4) var(--s4) calc(var(--s6) + var(--safe-b))}
#sheet [id]{scroll-margin-top:calc(var(--header) + var(--s3))}
#sheet{scroll-padding-top:calc(var(--header) + var(--s3));scroll-padding-bottom:var(--s4)}
#sheet .sheet-bar{padding-right:max(calc(var(--s4) - 12px), env(safe-area-inset-right, 0px))}
#sheet .sheet-body{padding-right:max(var(--s4), env(safe-area-inset-right, 0px))}

#viewer{position:fixed;inset:0 var(--sbw, 0px) 0 0;width:auto;height:auto;background:var(--night);color:var(--on-night);overflow:hidden}
#viewer::backdrop{background:var(--night)}

/* 14. Toast, live region, review panel -------------------------------------- */

.toast{position:fixed;inset:auto auto calc(var(--s5) + var(--bar-h)) 50%;translate:-50% 0;margin:0;z-index:70;
  width:max-content;max-width:calc(100vw - 2 * var(--m));overflow:visible;
  padding:11px 14px 10px;border:0;background:var(--ink);color:var(--paper);
  font-size:var(--fs-11);line-height:1.35;letter-spacing:.1em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease)}
.toast.is-on{opacity:1;pointer-events:auto}
.toast input{display:block;margin-top:8px;width:min(70vw, 360px);padding:6px 8px;border:1px solid currentColor;background:transparent;
  color:inherit;font-size:16px;letter-spacing:0;text-transform:none}

.review{position:fixed;z-index:40;right:var(--m);bottom:calc(var(--m) + var(--bar-h));width:min(380px, calc(100vw - 2 * var(--m)));
  max-height:min(62vh, 560px);overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.review > summary{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  min-height:44px;padding:0 var(--s3);background:var(--ink);color:var(--paper)}
.review-body{padding:var(--s3);display:grid;gap:var(--s3)}
.review h3{color:var(--muted);margin-bottom:var(--s2)}
.review li{padding-block:6px;border-top:1px solid var(--hairline);font-size:12.5px;line-height:1.4}
.review li.is-missing{padding-left:12px;background:linear-gradient(var(--mark),var(--mark)) 0 .62em/5px 5px no-repeat}
html[data-review] .verify{text-decoration:underline dotted var(--mark);text-decoration-thickness:1px;text-underline-offset:3px}
.add{color:var(--muted)}

/* 15. Views: about, 404 ------------------------------------------------------ */

.page{padding-top:var(--s7)}
.page > *{grid-column:1/-1}
.page-title{color:var(--ink)}
.about{row-gap:var(--s5)}
.about-body{display:grid;gap:var(--s5);max-width:30rem}
.about-bio{color:var(--ink)}
.about-bio + .about-note,.about-bio + .about-bio{margin-top:calc(var(--s3) - var(--s5))}
.about-ag-note{color:var(--muted)}
.about-fact{margin-top:calc(var(--s2) - var(--s5));color:var(--ink)}
.about-block{display:grid;gap:var(--s2)}
.about-block .t-11{color:var(--muted)}
.about-list{display:grid;gap:6px}
.about-meta{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:1px solid var(--hairline)}
.about-meta .t-13{color:var(--muted)}
.about-meta .t-13:first-child{color:var(--ink)}
.about-motion{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration-color:var(--hairline)}
@media (min-width:1024px){
  .about .page-title{grid-column:2/7}
  .about-body{grid-column:8/18}
}

.lost{row-gap:var(--s4);align-content:start}
.lost-no{color:var(--ink);margin-left:-.04em}
.lost-links{display:flex;flex-wrap:wrap;gap:0 var(--s4);margin-top:var(--s2)}
.lost-links > *{display:inline-flex;align-items:center;min-height:44px}
/* on the column-2 line, like entry titles, About and the static 404.html */
@media (min-width:1024px){ .lost > .col-head{grid-column:2/15} }

/* 16. View transitions (names are set by JS just before a transition) -------- */

::view-transition-group(root){animation-duration:calc(200ms * var(--motion))}
::view-transition-group(kvr-frame){animation-duration:calc(450ms * var(--motion));animation-timing-function:var(--ease-morph);overflow:clip}
::view-transition-old(kvr-frame),::view-transition-new(kvr-frame){height:100%;width:auto}

/* 17. Print base (the A5 comp card itself lives in now.css) ------------------ */

@media print{
  :root{--paper:#fff;--ink:#000;--muted:#444;--grain:none}
  body{background:#fff;color:#000;padding-top:0}
  .site-header,.thumb-bar,.site-footer,.review,.skip,.toast,.top-sentinel,dialog,noscript{display:none !important}
  .hero{min-height:0}
  a{text-decoration:none}
}