/* MEI portfolio: public site styles.
   Visual direction: design/style-spec.md — minimal, editorial, warm.
   Flat solid colors only (no gradients anywhere), no outlined cards or bordered containers,
   hierarchy carried by typography and whitespace, UI elements float on the page instead of
   sitting in boxes. Only the look lives here; the structural mechanics (grids, density, split,
   carousel, code gutters) are the framework's and must not change behavior. */

:root{
  /* Primary: light pink, the page. Secondary: light chocolate brown, the type.
     Third: a muted sage that sits naturally between pink and brown, used sparingly. */
  --bg:#FAEAE7;
  --bg-soft:#F4DFDA;        /* one step deeper, for flat bands: never a border, never a shadow */
  --surface:#F3DED9;        /* flat inset fill: inline code, table heads, empty thumbs, tracks */
  --ink:#3E2A22;            /* dark chocolate: headings and strong type */
  --brown:#8A5A44;          /* light chocolate brown: the secondary voice */
  --body:#6A4C40;
  --muted:#7A5E55;
  --hair:rgba(62,42,34,.14);/* the only line in the system, used sparingly and never as a frame */
  --accent:#5A6A50;         /* muted sage, the third color: subtle marks and links */
  --accent-soft:#DFE5D6;
  --disp:'Fraunces','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;
  --sans:'Inter','Zen Kaku Gothic New','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  --mono:'JetBrains Mono','Hiragino Sans','Yu Gothic',ui-monospace,monospace;
  --pad:clamp(20px,6vw,96px);
  --measure:74ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;
  line-height:1.8;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------------------------------------------------------- shared parts */

.eyebrow{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
/* An OP viewing a hidden section: a dashed underline, the same marker as the navigation. Only a line, no word */
.eyebrow--hid{width:fit-content;border-bottom:1px dashed currentColor;padding-bottom:3px}

/* Buttons are type, not boxes: a word with a rule under it. The only filled one is --solid,
   kept for the single primary action on a page, never as a frame around navigation. */
.btn{display:inline-flex;align-items:center;gap:10px;padding:6px 0;background:none;border:0;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink);
  white-space:nowrap;cursor:pointer;box-shadow:inset 0 -1px 0 0 var(--hair);
  transition:box-shadow .18s ease,color .18s ease,background .18s ease}
.btn:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}
.btn--solid{padding:12px 26px;background:var(--ink);color:var(--bg);border-radius:2px;box-shadow:none}
.btn--solid:hover{background:var(--brown);color:var(--bg);box-shadow:none}
.btn--accent{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}
.btn--accent:hover{color:var(--ink);box-shadow:inset 0 -1px 0 0 var(--ink)}
.btn--ghost{color:var(--body)}
.btn--block{display:flex;width:100%}
.btn--grow{flex:1 1 auto}

/* Tags are plain small type separated by space, not pills in outlines */
.tags{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.tag{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tag--index{color:var(--accent);font-weight:700}
.chip{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:.18em}
.chip--accent{color:var(--accent)}
.chip--sub{color:var(--muted);font-weight:500}

/* Images sit flat on the page: no frame, no radius, no shadow. The work is the visual. */
.thumb{position:relative;overflow:hidden;background:var(--surface)}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:opacity .22s ease,transform .3s ease}
.thumb--empty::after{content:"";position:absolute;inset:0;background:var(--surface)}

/* ------------------------------------------------------------- top bar
   Floating: no band, no border, no shadow. The page colour runs straight through it. */

.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:34px var(--pad) 26px;background:var(--bg)}
.brand{display:flex;align-items:baseline;gap:12px}
.brand__chip{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--accent)}
.brand__name{font-family:var(--disp);font-weight:600;font-size:21px;letter-spacing:.01em}
.nav{display:flex;gap:30px;align-items:baseline;margin-right:auto;padding-left:14px}
.nav__item{font-size:14px;font-weight:500;color:var(--body);padding-bottom:3px;
  box-shadow:inset 0 -1px 0 0 transparent;transition:color .18s ease,box-shadow .18s ease}
.nav__item:hover{color:var(--ink);box-shadow:inset 0 -1px 0 0 var(--hair)}
.nav__item.is-active{color:var(--ink);font-weight:600;box-shadow:inset 0 -1px 0 0 var(--ink)}
/* A hidden section only appears in a signed-in OP's navigation; a marker sets it apart */
.nav__item--hid{border-bottom:1px dashed currentColor}
.topbar__right{display:flex;align-items:baseline;gap:20px}
.langswitch{font-size:12px;color:var(--muted);display:flex;gap:7px}
.langswitch a{transition:color .18s ease}
.langswitch a:hover{color:var(--ink)}
.langswitch a.is-active{color:var(--ink);font-weight:600}
.langswitch__sep{opacity:.45}

/* ------------------------------------------------------------- home
   Deliberately sparse: identity, one line of introduction, the two destinations,
   and a short featured selection. Everything else lives on About and Works. */

.hero{padding:clamp(60px,13vh,132px) var(--pad) clamp(56px,10vh,104px);max-width:1500px}
.hero__left{display:flex;flex-direction:column;gap:26px}
.hero__name{font-family:var(--disp);font-weight:600;font-size:clamp(58px,11vw,148px);
  line-height:.92;letter-spacing:-.02em}
.hero__tagline{font-family:var(--disp);font-weight:400;font-size:clamp(21px,2.6vw,32px);
  line-height:1.45;letter-spacing:-.005em;color:var(--brown);max-width:26ch}
.hero__intro{max-width:58ch;font-size:16px;line-height:1.95;color:var(--body)}
.hero__role{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* The two destinations. Big type on the page, no box, a rule that grows on hover. */
.dests{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,80px);padding:0 var(--pad) clamp(60px,10vh,100px)}
.dest{display:flex;flex-direction:column;gap:8px;padding-bottom:12px;
  box-shadow:inset 0 -1px 0 0 var(--hair);transition:box-shadow .2s ease,color .2s ease}
.dest:hover{box-shadow:inset 0 -2px 0 0 var(--ink)}
.dest__label{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4.6vw,58px);
  line-height:1.05;letter-spacing:-.015em}
.dest__note{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dest:hover .dest__note{color:var(--accent)}
/* OP only: a section only they can see keeps the dashed marker, never a word */
.dest--hid .dest__label{border-bottom:1px dashed var(--muted)}

/* Featured selection on the home page: a short list, not the whole portfolio */
.featured{padding:0 var(--pad) clamp(70px,12vh,120px)}
.featured__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-bottom:30px}
.featured__title{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.01em}
.featured__more{font-size:13px;font-weight:500;color:var(--body);padding-bottom:3px;
  box-shadow:inset 0 -1px 0 0 var(--hair);transition:color .18s ease,box-shadow .18s ease}
.featured__more:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}

/* The flagship: image and words side by side, both sitting flat on the page */
.flagship{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,68px);
  align-items:center;padding:0 var(--pad) clamp(60px,10vh,110px);background:var(--bg)}
.flagship__text{display:flex;flex-direction:column;gap:18px}
.flagship__label{margin-bottom:-4px}
.flagship__title{font-family:var(--disp);font-weight:600;font-size:clamp(32px,4.6vw,62px);
  line-height:1.06;letter-spacing:-.02em}
.flagship__sub{font-size:16px;color:var(--brown);line-height:1.6}
.flagship__desc{max-width:52ch;font-size:15px;line-height:1.95;color:var(--body)}
.flagship__media .thumb{aspect-ratio:4/3;background:var(--surface)}
.flagship__media .thumb img{transition:transform .4s ease}
.flagship:hover .flagship__media .thumb img{transform:scale(1.02)}
.flagship .btn{align-self:flex-start;margin-top:6px}

/* A band groups one section's works. It is a heading and a grid, never a panel. */
.band{padding:0 var(--pad) clamp(56px,9vh,96px)}
.band__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:28px}
.band__head h2{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em}
.band__meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.band__more{font-size:13px;font-weight:500;color:var(--body);padding-bottom:3px;
  box-shadow:inset 0 -1px 0 0 var(--hair);transition:color .18s ease,box-shadow .18s ease}
.band__more:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}
/* A hidden section's band is only ever on an OP's page: a dashed underline on the heading, no word */
.band--hid .band__head h2{border-bottom:1px dashed var(--muted);padding-bottom:4px}

/* ------------------------------------------------------------- about page
   Editorial: a measure of text organised by type and space, with no cards or outlined sections. */

.about{padding:clamp(48px,9vh,104px) var(--pad) clamp(72px,12vh,124px);max-width:1180px}
.about__head{display:flex;flex-direction:column;gap:20px;padding-bottom:clamp(38px,6vh,64px)}
.about__title{font-family:var(--disp);font-weight:600;font-size:clamp(44px,7.5vw,104px);
  line-height:.98;letter-spacing:-.02em}
.about__lead{font-family:var(--disp);font-weight:400;font-size:clamp(20px,2.4vw,30px);
  line-height:1.5;color:var(--brown);max-width:28ch}
.about__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);
  gap:clamp(34px,6vw,84px);align-items:start}
.about__main{display:flex;flex-direction:column;gap:clamp(38px,6vh,64px);min-width:0}
.about__bio{font-size:16.5px;line-height:2.05;color:var(--body);max-width:var(--measure)}
.about__bio p+p{margin-top:1.15em}
.about__aside{display:flex;flex-direction:column;gap:38px;padding-top:6px}
.about__block{display:flex;flex-direction:column;gap:14px}
.about__label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.about__now{font-size:14.5px;line-height:1.9;color:var(--body)}
.about__mail{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.1vw,25px);
  letter-spacing:-.01em;line-height:1.35;word-break:break-word;padding-bottom:4px;
  box-shadow:inset 0 -1px 0 0 var(--hair);transition:color .18s ease,box-shadow .18s ease}
.about__mail:hover{color:var(--accent);box-shadow:inset 0 -1px 0 0 var(--accent)}
.about__links{display:flex;flex-wrap:wrap;gap:10px 22px}

/* The timeline. Hooks keep their markup (date / title / note) and become rows of type. */
.hooks{display:flex;flex-direction:column;gap:0}
.hook{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:15px 0;
  box-shadow:inset 0 -1px 0 0 var(--hair);font-size:15px;transition:color .18s ease}
.hook:first-child{box-shadow:inset 0 -1px 0 0 var(--hair),inset 0 1px 0 0 var(--hair)}
.hook__date{font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;min-width:8.5em}
.hook__text{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.005em;color:var(--ink)}
.hook__note{font-size:13.5px;color:var(--body);margin-left:auto;text-align:right}
.hook--lead .hook__text{color:var(--brown)}
/* Inline marks in hook text: **bold** *italic* __underline__ ~~strike~~ */
.hook strong{font-weight:700}
.hook em em,.hook__text em,.hook__note em{font-style:italic}
.hook__date em{font-style:normal}
.hook u{text-decoration:underline;text-underline-offset:2px}
.hook s{text-decoration:line-through}
/* OP view: a hook under a hidden section keeps the dashed marker */
.hook--hid .hook__text{border-bottom:1px dashed var(--muted)}

/* ------------------------------------------------------------ works page */

.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding:clamp(44px,8vh,96px) var(--pad) clamp(34px,5vh,56px)}
.sechead__row{display:flex;align-items:baseline;gap:20px;margin-top:16px;flex-wrap:wrap}
.sechead h1{font-family:var(--disp);font-weight:600;font-size:clamp(44px,7.5vw,104px);
  line-height:.98;letter-spacing:-.02em}
.sechead__count{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.grid-wrap{padding:0 var(--pad)}
.grid-wrap--band{padding:0}
.page-section main>.grid-wrap:last-child{padding-bottom:clamp(70px,12vh,120px)}

/* The grids keep their structure; only the cells changed from boxes to bare images with a caption */
.basegrid{display:grid;gap:clamp(30px,4vw,60px) clamp(26px,3vw,44px)}
.basegrid--feature{grid-template-columns:repeat(3,minmax(0,1fr))}
.basegrid--feature>.card:first-child{grid-row:span 2}
.basegrid--flat{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.extragrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3vw,44px)}

.divider{display:flex;align-items:baseline;gap:18px;margin:clamp(44px,7vh,76px) var(--pad) 34px}
.divider__label{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.divider__rule{flex:1;height:1px;background:var(--hair)}
.divider__meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* A work is an image with words under it. No container, no border, no shadow, no fill. */
.card{display:flex;flex-direction:column;min-height:0;background:none;transition:color .2s ease}
.card__thumb{aspect-ratio:4/3;margin-bottom:16px}
.card__thumb img{transition:transform .45s ease,opacity .2s ease}
.card:hover .card__thumb img{transform:scale(1.025)}
.card__body{display:flex;flex-direction:column;gap:7px}
.card__title{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.25;letter-spacing:-.01em;
  transition:color .18s ease}
.card:hover .card__title{color:var(--brown)}
.card--lg .card__title{font-size:clamp(26px,2.8vw,36px);line-height:1.15}
.card--lg .card__thumb{aspect-ratio:3/2}
.card--xs .card__title{font-size:17px}
.card--xs .card__sub{display:none}
.card__sub{font-size:13.5px;line-height:1.7;color:var(--body)}
.card--lg .card__sub{font-size:15px}
.card__flag{font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.card .tags{order:-1;margin-bottom:2px}

/* ------------------------------------------------------------ project page */

.crumb{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px var(--pad) 0;font-size:12.5px;color:var(--muted)}
.crumb strong{color:var(--body);font-weight:500}
.crumb a{transition:color .18s ease}
.crumb a:hover{color:var(--accent)}
.crumb__nav{display:flex;gap:24px}

.work{max-width:1000px;margin:0 auto;padding:clamp(40px,7vh,80px) var(--pad) 24px}
.work__head{display:flex;flex-direction:column;gap:20px;padding-bottom:clamp(30px,5vh,52px)}
.work__title{font-family:var(--disp);font-weight:600;--ts0:clamp(38px,6.4vw,80px);
  font-size:var(--ts,calc(var(--ts0)*var(--tsk,1)));line-height:1.02;letter-spacing:-.022em}
/* Page title size switches: {48} / {120%} / {xs}..{2xl} (titleSize in markdown.js) */
.ts--xs{--tsk:.55}
.ts--sm{--tsk:.7}
.ts--md{--tsk:.85}
.ts--lg{--tsk:1.2}
.ts--xl{--tsk:1.4}
.ts--2xl{--tsk:1.6}
.work__sub{font-size:18px;line-height:1.7;color:var(--brown);max-width:48ch}
.work__date{font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.notice{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 0;margin-bottom:30px;background:none;
  box-shadow:inset 0 -1px 0 0 var(--hair),inset 0 1px 0 0 var(--hair);
  font-size:13px;color:var(--body)}
.notice a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------ prose */

/* Density levels (density in index.yml, 1..5, see DENSITIES in server/lib/content.js).
   Only vertical white space shrinks: line height, gaps between blocks, above and below headings,
   between list items, gallery and column gutters; font sizes and colors never move.
   Density I is the original set, so pages without data-dn do not move a pixel. */
.prose{--dn-k:1;--dn-K:1}
.prose[data-dn="2"]{--dn-k:.85;--dn-K:.82}
.prose[data-dn="3"]{--dn-k:.7225;--dn-K:.6724}
.prose[data-dn="4"]{--dn-k:.6141;--dn-K:.5514}
.prose[data-dn="5"]{--dn-k:.522;--dn-K:.4521}

.prose{font-size:16px;line-height:calc(1 + 1.05 * var(--dn-k));color:var(--body);max-width:var(--measure)}
.prose>*+*{margin-top:calc(1.15em * var(--dn-k))}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
  font-family:var(--disp);font-weight:600;color:var(--ink);letter-spacing:-.012em;line-height:1.28;
  margin-top:calc(2.1em * var(--dn-K));margin-bottom:calc(.65em * var(--dn-k))}
.prose h1{font-size:36px}
.prose h2{font-size:29px}
.prose h3{font-size:23px}
.prose h4{font-size:20px}
.prose h5{font-size:18px}
.prose h6{font-size:16.5px;font-family:var(--sans);font-weight:700;letter-spacing:.01em}
.prose .h--xs{font-size:14px}
.prose .h--sm{font-size:16px}
.prose .h--md{font-size:19px}
.prose .h--lg{font-size:26px}
.prose .h--xl{font-size:34px}
.prose .h--2xl{font-size:clamp(38px,5vw,54px);letter-spacing:-.02em;line-height:1.12}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--accent);transition:color .18s ease}
.prose a:hover{color:var(--accent)}
.prose ul,.prose ol{padding-left:1.35em;list-style:revert}
.prose li+li{margin-top:calc(.42em * var(--dn-k))}
.prose code{background:var(--surface);padding:2px 6px;border-radius:2px;font-family:var(--mono);font-size:.9em}
.prose blockquote{padding-left:22px;box-shadow:inset 2px 0 0 0 var(--accent);color:var(--brown);font-style:italic}
/* Media may run wider than the reading measure */
.prose>.gallery,.prose>.carousel,.prose>.embed,.prose>figure{max-width:none}

/* Code blocks (codeHtml in server/lib/markdown.js). The window keeps its shape: it is content,
   not a UI box, and the line-number gutter depends on it. Flat fills, no border. */
.code{margin:0;overflow:hidden;background:var(--ink);color:#F2E4DE;max-width:100%;counter-reset:l;border-radius:2px}
.code__head{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 10px 4px 16px;
  background:var(--surface);color:var(--ink);font-size:10.5px;font-weight:600;letter-spacing:.18em}
.code__label{color:var(--muted)}
.code__lang{display:inline-flex;align-items:center;color:var(--accent);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.code__copy{margin-left:auto;height:24px;padding:0 10px;border:0;border-radius:2px;
  background:transparent;color:var(--muted);font:600 10.5px/1 var(--mono);letter-spacing:.1em;cursor:pointer;
  transition:color .18s ease,background .18s ease}
.code__copy:hover{color:var(--ink);background:var(--bg)}
.code__copy.is-done{color:var(--accent)}
.code pre{margin:0;padding:16px 18px 16px 0;overflow-x:auto;background:none;color:inherit;
  font-family:var(--mono);font-size:13px;line-height:1.8;tab-size:4;
  scrollbar-width:thin;scrollbar-color:#7A5A4C #3E2A22}
.code pre::-webkit-scrollbar{height:9px}
.code pre::-webkit-scrollbar-track{background:#3E2A22}
.code pre::-webkit-scrollbar-thumb{background:#7A5A4C;border:2px solid #3E2A22;border-radius:5px}
.code pre code{display:block;min-width:max-content;background:none;padding:0;color:inherit;font-size:inherit;border-radius:0}
.code__l{display:block;position:relative;padding-left:var(--gut,4.2ch);min-height:1.8em}
.code__l::before{counter-increment:l;content:counter(l);position:sticky;left:0;display:inline-block;
  width:var(--gut,4.2ch);margin-left:calc(-1 * var(--gut,4.2ch));padding-right:1.2ch;text-align:right;
  color:#A98D80;background:var(--ink);-webkit-user-select:none;user-select:none}
.code--wrap pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;overflow-x:hidden}
.code--wrap pre code{min-width:0}
.code pre strong{color:#FFF3EE;font-weight:600}
.code pre em{font-style:italic}
.code pre u{text-decoration:underline;text-underline-offset:3px}
.code pre s{text-decoration:line-through}

/* Tables are content, so they keep hairline rules; nothing here frames a UI element */
.prose table{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.65}
.prose th,.prose td{border-bottom:1px solid var(--hair);padding:10px 14px 10px 0;text-align:left}
.prose th{font-weight:600;color:var(--ink);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.prose img{width:100%;height:auto;border-radius:2px}
.prose hr{border:0;border-top:1px solid var(--hair)}

/* Two columns (layout: split): media left, text right; renderSplit decides. */
.prose--split{max-width:none}
.prose--split>.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(46px * var(--dn-k,1));align-items:start}
.split__col{min-width:0}
.split__col--text{max-width:var(--measure)}
.split__col>*+*{margin-top:calc(1.15em * var(--dn-k,1))}
.split__col>:first-child{margin-top:0}
.split__cap{font-size:12.5px;line-height:1.7;color:var(--muted)}
.split__col>.split__cap{margin-top:calc(.65em * var(--dn-k,1))}
.layout-split .work,.layout-split .breakdown-cta{max-width:1400px}
@media (max-width:900px){ .prose--split>.split{grid-template-columns:1fr;gap:calc(30px * var(--dn-k,1))} }

.gallery{display:grid;gap:calc(16px * var(--dn-k,1));grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery[data-count="1"]{grid-template-columns:1fr}
.gallery__item{margin:0}
.gallery__item[data-lead]{grid-column:1/-1}
.gallery img{width:100%;height:auto;border-radius:2px}
.gallery video{width:100%;display:block;border-radius:2px;background:#000}
.gallery__item a{display:block;overflow:hidden;border-radius:2px;background:none;touch-action:pan-x pan-y;cursor:zoom-in;
  -webkit-user-select:none;user-select:none}
.gallery__item a:hover{background:none}
.gallery__item a.is-zoomed{touch-action:none;cursor:grab}
.gallery__item a.is-drag{cursor:grabbing}
.gallery__item a img{will-change:transform}

.embed{position:relative;width:100%;overflow:hidden;background:var(--ink);border-radius:2px}
.embed--16x9{aspect-ratio:16/9}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}

/* Carousel: the track is scroll-snap and works without JS; buttons, dots, counter and autoplay
   are added by carousel.js (.is-ready once attached). Flat, unframed. */
.carousel{overflow:hidden;background:var(--surface);border-radius:2px}
.carousel__track{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  aspect-ratio:16/9;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.carousel__track::-webkit-scrollbar{display:none}
.carousel:not(.is-ready) .carousel__track{scrollbar-width:thin}
.carousel__slide{position:relative;flex:0 0 100%;min-width:100%;margin:0;overflow:hidden;
  scroll-snap-align:start;scroll-snap-stop:always}
.carousel__slide a{display:block;width:100%;height:100%;touch-action:pan-x pan-y;cursor:zoom-in;
  -webkit-user-select:none;user-select:none}
.carousel__slide a:hover{background:none}
.carousel__slide a.is-zoomed{touch-action:none;cursor:grab}
.carousel__slide a.is-drag{cursor:grabbing}
.carousel__slide img{width:100%;height:100%;object-fit:contain;border:0;border-radius:0;will-change:transform}
.carousel__slide video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.carousel__slide--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.carousel__ui{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg-soft)}
.carousel__btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:28px;
  border:0;border-radius:2px;background:transparent;color:var(--body);
  font:600 14px/1 var(--sans);cursor:pointer;transition:color .18s ease,background .18s ease}
.carousel__btn:hover{color:var(--ink);background:var(--bg)}
.carousel__dots{display:flex;flex-wrap:wrap;gap:8px;flex:1;justify-content:center}
.carousel__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:var(--hair);cursor:pointer;transition:background .18s ease}
.carousel__dot:hover{background:var(--muted)}
.carousel__dot.is-on{background:var(--accent)}
.carousel__count{font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--muted);white-space:nowrap}

/* Countdown bar under the image: the accent part is the time left until the next slide. */
.carousel__prog{height:2px;background:var(--hair)}
.lb__prog{height:2px;background:#5A4036}
.carousel__prog i,.lb__prog i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(1)}
.carousel__prog.is-off,.lb__prog.is-off{display:none}

/* ------------------------------------------------------------ gallery viewer
   A dialog genuinely floats above the page, so it is the one place a shadow is earned. */
.lb{position:fixed;inset:0;width:min(96vw,1680px);height:min(94vh,1200px);max-width:none;max-height:none;margin:auto;
  padding:0;border:0;border-radius:3px;background:var(--ink);color:var(--ink);font-family:var(--sans);
  box-shadow:0 18px 60px rgba(62,42,34,.34);overflow:hidden}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
.lb::backdrop{background:rgba(62,42,34,.62)}
html.has-lb{overflow:hidden}
.lb__head{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 10px 0 20px;background:var(--bg)}
.lb__label{font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--muted);white-space:nowrap;text-transform:uppercase}
.lb__count{font-size:11px;font-weight:500;letter-spacing:.1em;white-space:nowrap;color:var(--body)}
.lb__tools{display:flex;align-items:center;gap:4px;margin-left:auto}
.lb__btn,.lb__x{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:30px;padding:0 9px;
  border:0;border-radius:2px;background:transparent;color:var(--body);
  font:600 14px/1 var(--sans);cursor:pointer;transition:color .18s ease,background .18s ease}
.lb__btn:hover,.lb__x:hover{color:var(--ink);background:var(--bg-soft)}
.lb__btn:focus-visible,.lb__x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb__btn--reset{font-size:10.5px;letter-spacing:.1em;display:none}
.lb.is-zoomed .lb__btn--reset{display:inline-flex}
.lb__zoom{min-width:44px;text-align:center;font-size:11px;font-weight:500;color:var(--muted)}
.lb__x{margin-left:4px;font-size:18px}
.lb__stage{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:16px;touch-action:none;-webkit-user-select:none;user-select:none;cursor:zoom-in}
.lb__stage.is-zoomed{cursor:grab}
.lb__stage.is-drag{cursor:grabbing}
.lb__stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;will-change:transform}
.lb__box{position:relative;width:100%;max-width:calc((100vh - 200px) * 16 / 9);aspect-ratio:16/9;background:#000;cursor:default}
.lb__box video,.lb__box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.lb__ui{border-top:0}
.lb__ui.is-solo{display:none}
@media (max-width:760px){
  .lb{width:100%;height:100%;height:100dvh;border-radius:0;box-shadow:none}
  .lb__head{gap:8px;padding-left:12px}
  .lb__zoom{display:none}
  .lb__stage{padding:8px}
}

/* --------------------------------------------------- breakdown entry list */

.breakdown-cta{max-width:1000px;margin:0 auto clamp(56px,9vh,96px);padding:0 var(--pad)}
.breakdown-cta__head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:0 0 22px;background:none}
.breakdown-cta__title{font-family:var(--disp);font-weight:600;font-size:clamp(24px,2.8vw,32px);letter-spacing:-.015em}
.breakdown-cta__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  background:none;box-shadow:inset 0 1px 0 0 var(--hair)}
.breakdown-cta__list li{display:flex;font-size:13.5px;line-height:1.6;box-shadow:inset 0 -1px 0 0 var(--hair)}
.breakdown-cta__list li span{font-weight:500;color:var(--accent);font-size:11.5px;letter-spacing:.1em}
.breakdown-cta__list li a{display:flex;gap:14px;width:100%;padding:16px 18px 16px 0;transition:color .18s ease}
.breakdown-cta__list li a:hover{color:var(--brown)}

/* --------------------------------------------------- breakdown sub-pages */

.bdhead{max-width:1000px;margin:0 auto;padding:clamp(40px,7vh,80px) var(--pad) 30px;
  display:flex;flex-direction:column;gap:16px}
.bdhead h1{font-family:var(--disp);font-weight:600;font-size:clamp(36px,5.6vw,68px);
  line-height:1.02;letter-spacing:-.022em}

.bdlist{max-width:1000px;margin:0 auto clamp(64px,10vh,110px);padding:0 var(--pad);
  box-shadow:inset 0 1px 0 0 var(--hair)}
.bdrow{display:grid;grid-template-columns:52px minmax(0,1fr) 110px 40px 30px;gap:20px;align-items:baseline;
  padding:22px 0;box-shadow:inset 0 -1px 0 0 var(--hair);transition:color .18s ease}
.bdrow:hover{color:var(--brown)}
.bdrow__n{font-size:11.5px;font-weight:500;letter-spacing:.12em;color:var(--accent)}
.bdrow__body{display:flex;flex-direction:column;gap:7px;min-width:0}
.bdrow__title{font-family:var(--disp);font-weight:600;font-size:21px;line-height:1.3;letter-spacing:-.012em}
.bdrow__sum{font-size:13.5px;line-height:1.7;color:var(--muted)}
.bdrow__date,.bdrow__flag{font-size:11.5px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.bdrow__arrow{text-align:right;color:var(--accent)}

/* sticky table of contents on the left, article on the right */
.railed{display:grid;grid-template-columns:290px minmax(0,1fr)}
.rail{align-self:start;position:sticky;top:24px;display:flex;flex-direction:column;gap:32px;
  padding:clamp(30px,5vh,52px) 34px 48px var(--pad)}
.rail__back{display:flex;flex-direction:column;gap:8px;padding:0 0 16px;background:none;
  box-shadow:inset 0 -1px 0 0 var(--hair);transition:color .18s ease}
.rail__back:hover{color:var(--brown)}
.rail__backlabel{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rail__work{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:-.015em}
.rail__toc{display:flex;flex-direction:column;gap:14px}
.rail__label{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.toc{box-shadow:inset 0 1px 0 0 var(--hair)}
.toc__item{box-shadow:inset 0 -1px 0 0 var(--hair)}
.toc__item a{display:flex;gap:12px;padding:13px 0;font-size:13px;line-height:1.5;color:var(--body);
  transition:color .18s ease}
.toc__item:hover a{color:var(--ink)}
.toc__item.is-on a{color:var(--ink);font-weight:600}
.toc__n{font-weight:500;flex-shrink:0;color:var(--accent);font-size:11px;letter-spacing:.1em}

.railed__main{min-width:0;padding:clamp(36px,6vh,60px) var(--pad) 0 0}
.bdart__head{display:flex;flex-direction:column;gap:18px;padding-bottom:30px;margin-bottom:34px;
  box-shadow:inset 0 -1px 0 0 var(--hair)}
.bdart__head h1{font-family:var(--disp);font-weight:600;--ts0:clamp(30px,4.4vw,52px);
  font-size:var(--ts,calc(var(--ts0)*var(--tsk,1)));line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.bdart__sum{font-size:16px;line-height:1.95;color:var(--body);max-width:74ch}

.bdnav{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:26px;
  margin:clamp(50px,8vh,80px) 0 clamp(64px,10vh,100px);box-shadow:inset 0 1px 0 0 var(--hair)}
.bdnav__side{display:flex;flex-direction:column;gap:9px;padding:0;background:none;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:color .18s ease}
.bdnav__side:hover{color:var(--accent)}
.bdnav__side--next{text-align:right}
.bdnav__t{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--ink);
  line-height:1.3;text-transform:none;letter-spacing:-.015em}

/* The next work: a full-width line of type on a flat band, no gradient */
.nextwork{display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:clamp(40px,6vh,64px) var(--pad);background:var(--bg-soft);color:var(--ink);
  transition:background .2s ease}
.nextwork:hover{background:var(--surface)}
.nextwork__label{display:block;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.nextwork__title{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4.4vw,52px);letter-spacing:-.02em}
.nextwork__arrow{font-family:var(--disp);font-size:36px;color:var(--accent)}

.nf{display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:clamp(90px,18vh,180px) var(--pad);text-align:center}
.nf h1{font-family:var(--disp);font-weight:600;font-size:clamp(76px,13vw,140px);letter-spacing:-.03em;
  line-height:1;color:var(--brown)}
.nf p{color:var(--body)}
.nf__hint{color:var(--muted);font-size:13px}
.nf .btn{margin-top:18px}

/* ------------------------------------------------------------- sign-in
   The only page on the site without an entry. Styled here because it is a 200 for everyone. */

.signin{padding:clamp(48px,8vh,90px) var(--pad) 110px;max-width:720px;margin:0 auto}
.signin__card{background:none;padding:0}
.signin__title{font-family:var(--disp);font-weight:600;font-size:clamp(36px,6vw,64px);
  letter-spacing:-.02em;margin-top:12px;line-height:1.02}
.signin__lead{margin-top:16px;font-size:15px;line-height:1.95;color:var(--body);max-width:56ch}
.signin__err{margin-top:20px;padding:12px 0;box-shadow:inset 0 -1px 0 0 #B5545F,inset 0 1px 0 0 #B5545F;
  color:#8E3A45;font-size:13px;font-weight:500}
.signin__card .btn--block{margin-top:28px;justify-content:center}
.signin__warn{margin-top:28px;padding:20px 0;box-shadow:inset 0 1px 0 0 var(--hair)}
.signin__warn strong{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.signin__warn p{margin-top:8px;font-size:13px;line-height:1.85;color:var(--muted);max-width:60ch}
.signin__label{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.signin__who{margin-top:28px;padding:18px 0;box-shadow:inset 0 1px 0 0 var(--hair),inset 0 -1px 0 0 var(--hair)}
.signin__mail{display:block;margin-top:8px;font-family:var(--disp);font-size:20px;font-weight:600;word-break:break-all}
.signin__acts{display:flex;gap:24px;margin-top:20px}
.signin__out{margin-top:18px}
.signin__link{display:inline-block;margin-top:6px;padding:0;border:0;background:none;
  font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.signin__link:hover{color:var(--ink)}
.signin__link--dim{display:block;margin-top:12px;font-weight:400}
.signin__local{margin-top:34px;padding-top:26px;box-shadow:inset 0 1px 0 0 var(--hair)}
.signin__hint{margin-top:8px;font-size:13px;line-height:1.85;color:var(--muted)}
.signin__row{display:flex;gap:14px;margin-top:16px}
.signin__row input{flex:1 1 auto;min-width:0;padding:10px 0;height:46px;border:0;border-radius:0;
  background:none;box-shadow:inset 0 -1px 0 0 var(--hair);
  font-family:var(--sans);font-size:15px;font-weight:400;color:var(--ink)}
.signin__row input:focus{outline:0;box-shadow:inset 0 -2px 0 0 var(--accent)}
@media (max-width:900px){
  .signin__row{flex-direction:column}
  .signin__acts{flex-direction:column;gap:14px}
}

/* -------------------------------------------------------------- footer */

.foot{display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap;
  padding:clamp(56px,9vh,96px) var(--pad) clamp(48px,7vh,72px);background:var(--bg-soft)}
.foot__left{display:flex;flex-direction:column;gap:14px}
.foot__label{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.foot__mail{font-family:var(--disp);font-weight:600;font-size:clamp(26px,4.4vw,48px);letter-spacing:-.02em;
  line-height:1.15;padding-bottom:5px;box-shadow:inset 0 -1px 0 0 transparent;
  transition:color .18s ease,box-shadow .18s ease}
.foot__mail:hover{color:var(--brown);box-shadow:inset 0 -1px 0 0 var(--brown)}
.foot__right{display:flex;gap:26px;align-items:baseline;font-size:13px;font-weight:500;flex-wrap:wrap}
.foot__right a{transition:color .18s ease}
.foot__right a:hover{color:var(--accent)}
.foot__copy{color:var(--muted);font-size:12px}
.foot__ways{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.foot__qrbtn{font-family:var(--sans)}

/* ------------------------------------------------------ QR code dialog */
.qrdlg{padding:0;border:0;background:transparent;max-width:none;max-height:none;color:var(--ink)}
.qrdlg::backdrop{background:rgba(62,42,34,.58)}
.qrdlg__box{margin:0;width:min(340px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;
  background:var(--bg);border:0;border-radius:3px;box-shadow:0 18px 50px rgba(62,42,34,.32)}
.qrdlg__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;
  box-shadow:inset 0 -1px 0 0 var(--hair)}
.qrdlg__title{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.qrdlg__close{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:0;border-radius:2px;background:transparent;color:var(--body);
  font:600 19px/1 var(--sans);cursor:pointer;transition:color .18s ease,background .18s ease}
.qrdlg__close:hover{color:var(--ink);background:var(--bg-soft)}
.qrdlg__close:focus-visible,.foot__qrbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qrdlg__img{width:100%;background:#fff}

/* ------------------------------------------------------------ responsive */

@media (min-width:1101px){
  .basegrid .card:not(.card--lg) .card__thumb,.extragrid .card__thumb{flex:none;aspect-ratio:4/3}
  .card--lg .card__thumb{aspect-ratio:3/2}
}

@media (max-width:1100px){
  .flagship{grid-template-columns:1fr;gap:30px}
  .about__body{grid-template-columns:1fr;gap:44px}
  .about__aside{flex-direction:row;flex-wrap:wrap;gap:34px 60px}
  .basegrid--feature{grid-template-columns:repeat(2,minmax(0,1fr))}
  .basegrid--feature>.card:first-child{grid-row:auto;grid-column:1/-1}
  .basegrid--flat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .extragrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .breakdown-cta__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .railed{grid-template-columns:1fr}
  .rail{position:static;padding:26px var(--pad) 30px;box-shadow:inset 0 -1px 0 0 var(--hair)}
  .railed__main{padding:34px var(--pad) 0}
}

@media (max-width:760px){
  body{font-size:15px}
  .topbar{gap:14px;padding:20px var(--pad) 16px}
  /* narrow screens: the navigation scrolls sideways instead of wrapping */
  .nav{order:3;width:100%;gap:22px;flex-wrap:nowrap;overflow-x:auto;padding:0 0 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav__item{white-space:nowrap;flex-shrink:0}
  .dests{flex-direction:column;gap:0}
  .dest{padding:20px 0}
  .basegrid--feature,.basegrid--flat,.extragrid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .prose table{display:block;overflow-x:auto;white-space:nowrap}
  .code pre{font-size:12.5px;padding:14px 14px 14px 0}
  .prose h1{font-size:30px}
  .prose h2{font-size:25px}
  .carousel__track{aspect-ratio:4/3}
  .carousel__ui{gap:8px}
  .breakdown-cta__list{grid-template-columns:1fr}
  .bdrow{grid-template-columns:40px minmax(0,1fr) 26px;gap:14px}
  .bdrow>:nth-child(3),.bdrow>:nth-child(4){display:none}
  .bdnav{grid-template-columns:1fr;gap:28px}
  .bdnav__side--next{text-align:left}
  .hook{flex-direction:column;align-items:flex-start;gap:5px}
  .hook__note{margin-left:0;text-align:left}
  .sechead__row{flex-direction:column;align-items:flex-start;gap:10px}
  .crumb{flex-direction:column;align-items:flex-start;gap:10px}
  .crumb__nav{gap:18px;flex-wrap:wrap}
  .nextwork{flex-direction:column;align-items:flex-start;gap:18px}
}

/* Everything animated switches off when the visitor asks for reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover .card__thumb img,.flagship:hover .flagship__media .thumb img{transform:none}
}