/* Anindita Shrivastava — architecture portfolio
   Layout: quiet pages with wide margins, small type and a few hairlines,
   the way the printed portfolio is set. Light by default; dark only when
   the visitor switches it on. */

/* Fonts are served from this site (same files Google Fonts serves, latin and
   latin-ext only). The "Fallback" faces are local system fonts scaled to the
   same width and line metrics as the real fonts, so text does not jump when
   the real font arrives. Weight ranges are what the variable files contain. */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin-ext.v20.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jost-latin.v20.woff2) format('woff2');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:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin-ext.v15.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-serif-4-latin.v15.woff2) format('woff2');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:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin-ext.v4.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/instrument-sans-latin.v4.woff2) format('woff2');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:'Instrument Sans Fallback';src:local('Arial');size-adjust:102.74%;ascent-override:94.42%;descent-override:24.33%;line-gap-override:0%}
@font-face{font-family:'Instrument Sans Fallback Android';src:local('Roboto');size-adjust:102.96%;ascent-override:94.21%;descent-override:24.28%;line-gap-override:0%}
@font-face{font-family:'Jost Fallback';src:local('Arial');size-adjust:96.01%;ascent-override:111.45%;descent-override:39.06%;line-gap-override:0%}
@font-face{font-family:'Jost Fallback Android';src:local('Roboto');size-adjust:96.22%;ascent-override:111.21%;descent-override:38.97%;line-gap-override:0%}
@font-face{font-family:'Source Serif 4 Fallback';src:local('Georgia');size-adjust:107.45%;ascent-override:96.42%;descent-override:31.18%;line-gap-override:0%}
@font-face{font-family:'Source Serif 4 Fallback Android';src:local('Noto Serif'),local('NotoSerif');size-adjust:99.58%;ascent-override:104.03%;descent-override:33.64%;line-gap-override:0%}

/* Light by default. Dark is a deep nude-earth ground taken from the timber,
   brick and sun tones in the drawings, so the pale drawings sit on it like
   mounted prints. Every text colour reads at 4.5:1 or better in both. */
:root{
  --paper:#F7F7F4;      /* page ground */
  --concrete:#ECEDE9;   /* plates behind drawings */
  --concrete-2:#E1E2DD;
  --ink:#232628;
  --ink-2:#5B615E;
  --ink-3:#6D736F;      /* lightest grey that still reads at 4.5:1 on paper */
  --rule:#D6D8D2;
  --accent:#8A5D5B;     /* mauve brick, from the cover lettering */
  --sun:#CDB0AC;        /* the cover sun */
  --glow:#E9B25F;       /* string lights */
  --glow-blend:multiply;
  --select-bg:#F1CF8E;  /* text selection: string-light amber */
  --select-fg:#232628;
  --gut:clamp(20px,5vw,72px);
  --max:1320px;
  --head:76px;
  --serif:'Source Serif 4','Source Serif 4 Fallback','Source Serif 4 Fallback Android','Source Serif Pro',Georgia,'Times New Roman',serif;
  --display:'Instrument Sans','Instrument Sans Fallback','Instrument Sans Fallback Android',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Jost','Jost Fallback','Jost Fallback Android','Century Gothic','Futura',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-mode="dark"]{
  --paper:#2D2420;      /* dark cocoa clay */
  --concrete:#382E29;
  --concrete-2:#463A34;
  --ink:#F1E5DA;        /* warm nude text */
  --ink-2:#D1C3B7;
  --ink-3:#AF9E92;
  --rule:#574A42;
  --accent:#DDA592;     /* nude terracotta, the cover sun brightened for a dark ground */
  --sun:#D1AFA9;
  --glow-blend:screen;
  --select-bg:#DDA592;
  --select-fg:#2D2420;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--select-bg);color:var(--select-fg)}
img::selection{background:transparent}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;margin:0;line-height:1.1;text-wrap:balance}
p{margin:0 0 1em}
[id]{scroll-margin-top:80px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:100}
.skip:focus{left:12px}

.lbl{font:500 .68rem/1.5 var(--sans);letter-spacing:.17em;text-transform:uppercase;color:var(--ink-2);margin:0}
.lbl.g,.lbl.a{color:var(--accent)}
.runhead{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--rule);margin-bottom:clamp(22px,3.5vw,40px)}
.runhead .lbl:first-child{color:var(--ink);font-weight:600}

/* links that act as calls to action: plain text with a rule, no pills */
.btn,.more{display:inline-flex;align-items:center;gap:.55em;padding:0 0 4px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--ink);text-decoration:none;font:500 .74rem/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;cursor:pointer}
.btn:hover,.more:hover{color:var(--accent)}
.btn.solid{color:var(--ink)}
.acts{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px}
.arrow{display:inline-block;transition:transform .3s ease}
a:hover .arrow{transform:translateX(4px)}

/* ---------- site head ---------- */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--paper)}
.head .in{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{margin-right:auto;text-decoration:none;color:var(--ink);font:600 1.1rem/1.2 var(--display);letter-spacing:-.012em;padding:10px 0}
.brand b{font-weight:600}
.brand span{display:none}
.nav{display:flex;gap:clamp(18px,2.4vw,36px)}
.nav a{font:400 .9rem/1 var(--sans);letter-spacing:.02em;color:var(--ink-2);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.nav a i{display:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.tbtn{font:400 .8rem/1 var(--sans);letter-spacing:.04em;background:none;border:0;color:var(--ink-3);cursor:pointer;padding:8px 0}
.tbtn:hover{color:var(--ink)}
.menu{display:none;font:400 .9rem/1 var(--sans);background:none;border:0;color:var(--ink);padding:8px 0;cursor:pointer}
/* small phones: name, Menu and the mode switch stay on one line */
@media (max-width:400px){.head .in{gap:18px}.brand{white-space:nowrap}}
@media (max-width:860px){
  .js .menu{display:inline-flex}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);padding:4px max(var(--gut),env(safe-area-inset-right,0px)) 20px max(var(--gut),env(safe-area-inset-left,0px));border-bottom:1px solid var(--rule)}
  .js .head.open .nav{display:flex}
  .js .nav a{padding:16px 0;border-bottom:1px solid var(--rule);font-size:1.05rem}
}


/* ---------- inner page heading ---------- */
.sheet{padding-block:clamp(40px,7vw,96px) clamp(28px,4vw,56px)}
.sheet h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.022em;margin:.3em 0 .35em;max-width:14em}
.sheet .sub{font:300 clamp(1.1rem,1.8vw,1.4rem)/1.45 var(--serif);color:var(--ink-2);max-width:34em;margin:0}
.sec{padding-block:clamp(56px,8vw,112px)}
.sec.tight{padding-top:0}
.sec.band{background:var(--concrete)}
.sec-t{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,4vw,64px);align-items:end;margin-bottom:clamp(28px,4.5vw,52px)}
.sec-t h2{font-size:clamp(2rem,4.2vw,3.2rem)}
.sec-t p{color:var(--ink-2);max-width:40em;margin:0}
@media (max-width:860px){.sec-t{grid-template-columns:1fr;align-items:start}}

/* ---------- about: plain facts ---------- */
.about{display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,6vw,96px);align-items:start}
.about > *{min-width:0}
.photo{margin:0}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.photo figcaption{margin-top:10px}
.facts-list{margin:0;border-top:1px solid var(--rule)}
.facts-list > div{display:grid;grid-template-columns:10em 1fr;gap:0 16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.facts-list dt{font:500 .66rem/2.1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.facts-list dd{margin:0;font-size:.98rem;grid-column:2}
.facts-list dd + dd{margin-top:10px}
.facts-list dt{grid-row:1 / span 4}
.facts-list dd small{display:block;color:var(--ink-3);font-size:.84rem}
@media (max-width:860px){.about{grid-template-columns:1fr}.photo{max-width:360px}}
@media (max-width:480px){.facts-list > div{grid-template-columns:1fr;gap:2px}.facts-list dd{grid-column:1}.facts-list dt{grid-row:auto}}
.ptable{width:100%;border-collapse:collapse;font-size:.95rem}
.ptable th{font:500 .64rem/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--ink)}
.ptable td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ptable td:first-child{font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.ptable a{text-decoration:none}
.ptable a:hover{color:var(--accent)}
.tablewrap{overflow-x:auto;margin-top:12px}
.about h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:clamp(40px,5vw,64px) 0 14px}

/* ---------- timeline (education) ---------- */
.tl{display:grid;border-top:1px solid var(--ink)}
.tl-item{display:grid;grid-template-columns:minmax(150px,2fr) 10fr;gap:clamp(16px,4vw,56px);padding-block:clamp(28px,4vw,52px);border-bottom:1px solid var(--rule)}
.tl-when,.tl-body{min-width:0}
.tl-when b{display:block;font:400 1.1rem/1.3 var(--serif);margin-top:4px}
.tl-body h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:.15em}
.tl-body .role{font:300 clamp(1.05rem,1.7vw,1.3rem)/1.4 var(--serif);color:var(--ink-2);margin-bottom:1em}
.tl-body > p{max-width:42em}
@media (max-width:760px){.tl-item{grid-template-columns:1fr;gap:8px}}
.edu-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-top:24px}
.edu-work a{text-decoration:none;color:var(--ink);display:block}
.edu-work .ci{aspect-ratio:4/3;overflow:hidden;background:var(--concrete);line-height:0}
.edu-work img{width:100%;height:100%;object-fit:cover}
.edu-work b{display:block;font:400 1.1rem/1.3 var(--serif);margin-top:10px}
.edu-work span{font-size:.84rem;color:var(--ink-2)}
.edu-work a:hover b{color:var(--accent)}

/* ---------- work index ---------- */
.spread{display:grid;grid-template-columns:7fr 5fr;gap:clamp(22px,5vw,72px);align-items:center;text-decoration:none;color:var(--ink)}
.spread+.spread{margin-top:clamp(40px,6vw,80px)}
.spread.rev{grid-template-columns:5fr 7fr}
.spread.rev .sp-img{order:2}
.spread > *{min-width:0}
.sp-img{overflow:hidden;line-height:0;background:var(--wash,var(--concrete))}
.spread h3{font-size:clamp(1.9rem,3.6vw,3rem);margin:.4em 0 .35em}
.spread .s{font:300 1.15rem/1.45 var(--serif);color:var(--ink-2);margin-bottom:1em}
.spread p{color:var(--ink-2);max-width:32em}
@media (max-width:860px){.spread,.spread.rev{grid-template-columns:1fr}.spread.rev .sp-img{order:0}}
.filters{display:flex;flex-wrap:wrap;gap:6px 24px;margin-bottom:clamp(24px,3vw,36px);align-items:baseline}
.filters button{font:400 .92rem/1.4 var(--sans);padding:0 0 3px;border:0;border-bottom:1px solid transparent;background:none;color:var(--ink-3);cursor:pointer}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.filters .count{margin-left:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,3.4vw,52px) clamp(18px,2.4vw,32px)}
.card{text-decoration:none;color:var(--ink);display:block;min-width:0}
.card .ci{aspect-ratio:4/3;overflow:hidden;background:var(--wash,var(--concrete));line-height:0}
.card .ci img{width:100%;height:100%;object-fit:cover}
.card .row{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.card h3{font-size:1.5rem;margin:.45em 0 .25em}
.card p{font-size:.92rem;color:var(--ink-2);margin:0}
.card:hover h3{color:var(--accent)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .card .ci img,.sp-img img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .card:hover .ci img,.spread:hover .sp-img img{transform:scale(1.03)}
}

/* ---------- drawing ---------- */
/* One structure for every section: a hairline, a small label, then the content,
   all on the page's left edge. Drawings are shown whole at their own proportions
   in justified rows: each item grows by its width-to-height ratio (--r), so every
   drawing in a row has the same height and the row fills the width exactly.
   Edges line up, nothing is cropped, nothing leaves a hole. Phones: one column. */
.dsec{border-top:1px solid var(--rule);padding-top:clamp(18px,2.4vw,26px);margin-top:clamp(56px,7vw,96px)}
.dsec:first-child{margin-top:0}
.dsec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,36px)}
.dsec-h .note{margin:0;font:300 clamp(1.15rem,1.8vw,1.45rem)/1.3 var(--serif);color:var(--ink-2)}
.dtext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,64px)}
.dtext p{margin:0;max-width:38em}
@media (max-width:760px){.dtext{grid-template-columns:1fr}}
.jgal{display:grid;gap:clamp(28px,3.2vw,44px)}
.jrow{display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,22px);list-style:none;margin:0;padding:0}
.jrow > *{flex:var(--r) 1 0;min-width:0;margin:0}
.jrow img{display:block;width:100%;height:auto}
.jrow figcaption{margin-top:10px;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.kinds a{display:block;text-decoration:none;color:var(--ink)}
.kinds h3{font-size:clamp(1.2rem,1.6vw,1.45rem);margin:14px 0 .2em}
.kinds p{margin:0;font-size:.88rem;color:var(--ink-2)}
.kinds a:hover h3{color:var(--accent)}
@media (max-width:700px){.jrow{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,6vw,32px)}}
.palette{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:18px clamp(8px,1.6vw,20px);list-style:none;margin:0;padding:0}
.palette li{text-align:center;font:500 .62rem/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2)}
.palette i{display:block;width:min(100%,80px);aspect-ratio:1;border-radius:50%;margin:0 auto 10px;border:1px solid var(--rule)}
@media (max-width:600px){.palette{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:7fr 4fr;gap:clamp(28px,6vw,96px);align-items:start}
.contact-grid > *{min-width:0}
.mail{display:inline-block;font:300 clamp(1.5rem,3.4vw,2.5rem)/1.2 var(--serif);word-break:break-all;margin:0 0 .6em;color:var(--ink)}
.mailrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.status{min-height:1.5em;font-size:.85rem;color:var(--accent);margin-top:8px}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}.contact-grid .photo{max-width:360px}}

/* ---------- footer ---------- */
.foot{margin-top:clamp(24px,4vw,48px)}
.foot .in{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;min-height:72px;padding-block:18px}
.foot p{margin:0;font-size:.84rem;color:var(--ink-3)}
.foot a{text-decoration:none}

/* ---------- project pages ---------- */
.plate{background:var(--concrete);border-radius:2px;padding:clamp(20px,4vw,56px)}
.p-cover{padding-top:clamp(18px,3vw,36px)}
.p-cover h1{font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:1;margin-bottom:.25em}
.p-cover .s{font:300 clamp(1.15rem,2vw,1.5rem)/1.35 var(--serif);color:var(--ink-2);max-width:30em;margin:0}
.p-cover .hero{margin:clamp(24px,4vw,44px) 0 0}
.p-cover .hero .zoom{background:var(--wash,var(--concrete-2))}
.p-cover .hero img{width:100%;max-height:86vh;object-fit:contain}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 24px;margin:clamp(24px,4vw,40px) 0 0;border-top:1px solid var(--rule)}
.facts div{padding:12px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:500 .64rem/1.6 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.facts dd{margin:2px 0 0;font-size:.95rem}
.p-intro{display:grid;grid-template-columns:5fr 7fr;gap:clamp(16px,5vw,80px);padding-block:clamp(40px,7vw,96px) clamp(16px,3vw,32px)}
.p-intro .b p:first-child{font:300 clamp(1.3rem,2.2vw,1.75rem)/1.4 var(--serif)}
.p-intro .b p{max-width:36em}
@media (max-width:860px){.p-intro{grid-template-columns:1fr}}
.plates{display:grid;gap:clamp(18px,3vw,36px);padding-bottom:clamp(24px,4vw,48px)}
.pl h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-bottom:.4em}
.pl .lead{font:300 clamp(1.1rem,1.7vw,1.3rem)/1.45 var(--serif);color:var(--ink-2);margin-bottom:1.2em;max-width:40em}
.pl .tx p{max-width:40em}
.pl .split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(18px,4vw,56px);align-items:start}
.pl .split.r{grid-template-columns:7fr 5fr}
.pl .split.r > .tx{order:2}
.pl .split > *{min-width:0}
@media (max-width:860px){.pl .split,.pl .split.r{grid-template-columns:1fr}.pl .split.r > .tx{order:0}}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 28px;margin:24px 0 0;padding:0}
.notes div{border-top:1px solid var(--rule);padding-top:12px}
.notes dt{font:500 .66rem/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.notes dd{margin:0;font-size:.95rem;color:var(--ink-2)}
.steps{list-style:none;counter-reset:s;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 28px}
.steps li{counter-increment:s;border-top:1px solid var(--rule);padding-top:12px;font-size:.95rem;color:var(--ink-2)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:300 1.6rem var(--serif);color:var(--accent)}
.steps b{display:block;font-weight:500;color:var(--ink)}
.figs{display:grid;gap:clamp(14px,2.4vw,28px);margin-top:clamp(20px,3vw,32px)}
.figs.c2{grid-template-columns:repeat(2,1fr)}
.figs.c3{grid-template-columns:repeat(3,1fr)}
.split .figs{margin-top:0}
@media (max-width:860px){.figs.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.figs.c2,.figs.c3{grid-template-columns:1fr}}
.fig{margin:0;min-width:0}
/* drawings side by side in a plate: a justified row. Each grows by its own
   width-to-height ratio (--r), so all share one height, the row fills the
   width exactly and every drawing is shown whole. Phones: one column. */
.figs.jr{display:flex;align-items:flex-start;gap:clamp(14px,2.4vw,28px)}
.figs.jr + .figs.jr{margin-top:clamp(18px,2.6vw,30px)}
.figs.jr > .fig{flex:var(--r) 1 0;min-width:0}
.pl .figs.jr .zoom img{width:100%;height:auto;max-height:none;max-width:100%!important}
@media (max-width:560px){.figs.jr{display:grid;grid-template-columns:minmax(0,1fr)}}
.fig figcaption{display:flex;gap:10px;margin-top:10px;font-size:.84rem;line-height:1.45;color:var(--ink-2)}
.fig figcaption .n{font:500 .66rem/1.9 var(--sans);letter-spacing:.12em;color:var(--accent);flex:none}
.fig figcaption b{font-weight:500;color:var(--ink);display:block}
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0;color:inherit;font:inherit}
.zoom img{width:100%;height:auto}
/* plate drawings: full width so the space is reserved before the image loads,
   capped at 86vh; contain keeps the drawing whole and centred, exactly as before.
   Drawings narrower than the plate carry their own max-width in the page. */
.pl .zoom img{width:100%;height:auto;max-height:86vh;object-fit:contain;margin-inline:auto}
.fig.circle .zoom{aspect-ratio:1;border-radius:50%;overflow:hidden}
.pl .fig.circle .zoom img,.fig.circle img{width:100%;height:100%;max-height:none;object-fit:cover}
.pager{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:20;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:8px 14px;font:500 .66rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.pager.on{opacity:1;transform:none}
.p-next{margin-top:clamp(24px,4vw,48px);padding-bottom:clamp(40px,7vw,88px)}
.p-next .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.p-next a{text-decoration:none;color:var(--ink);display:block}
.p-next .nx{text-align:right}
.p-next span:not(.lbl){display:block;font:300 clamp(1.6rem,3.6vw,2.8rem)/1.1 var(--serif);margin-top:.4em}
.p-next a:hover span:not(.lbl){color:var(--accent)}
@media (max-width:560px){.p-next .wrap{grid-template-columns:1fr}.p-next .nx{text-align:left}}


/* reveal: content stays visible at rest, motion only adds a lift */
@media (prefers-reduced-motion:no-preference){
  .js .rv{transform:translateY(14px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{transform:none}
}

/* lightbox */
dialog.lb{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:#EEE}
dialog.lb::backdrop{background:rgba(18,20,19,.95)}
.lb-in{height:100%;display:grid;grid-template-rows:1fr auto;place-items:center;padding:56px 64px 18px}
.lb img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;background:#F6F6F3}
.lb p{margin:12px 0 0;font-size:.88rem;max-width:56em;text-align:center;opacity:.85}
.lb button{position:fixed;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.15)}
.lb .x{top:max(12px,env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
.lb .pv{left:max(12px,env(safe-area-inset-left,0px));top:50%;transform:translateY(-50%)}
.lb .nx{right:max(12px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%)}
@media (max-width:560px){.lb-in{padding:56px 10px 76px}.lb .pv,.lb .nx{top:auto;bottom:max(12px,env(safe-area-inset-bottom,0px));transform:none}}
[hidden]{display:none!important}
@media (max-width:480px){.brand span{display:none}}

/* light-bulb cursor: off at rest, warm over links, lit while pressed */
@media (pointer:fine){
  html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Cpath d='M16 2.5a8.5 8.5 0 0 0-5 15.4c1 .8 1.6 1.8 1.6 3V22.5h6.8v-1.6c0-1.2.6-2.2 1.6-3A8.5 8.5 0 0 0 16 2.5z' fill='%23F6F6F3' stroke='%2325282A' stroke-width='1.5'/%3E%3Cpath d='M14 22.5v-4.6l2 1.5 2-1.5v4.6' fill='none' stroke='%238A5D5B' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M12.6 25h6.8M13.4 27.6h5.2' stroke='%2325282A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 8,auto}
  a,button,.zoom,summary,[role="button"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='11' r='12' fill='%23E9B25F' opacity='.18'/%3E%3Cpath d='M16 2.5a8.5 8.5 0 0 0-5 15.4c1 .8 1.6 1.8 1.6 3V22.5h6.8v-1.6c0-1.2.6-2.2 1.6-3A8.5 8.5 0 0 0 16 2.5z' fill='%23F7E6C4' stroke='%2325282A' stroke-width='1.5'/%3E%3Cpath d='M14 22.5v-4.6l2 1.5 2-1.5v4.6' fill='none' stroke='%23C9862E' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M12.6 25h6.8M13.4 27.6h5.2' stroke='%2325282A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 8,pointer}
  html.lit,html.lit *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='11' r='15.5' fill='%23E9B25F' opacity='.22'/%3E%3Ccircle cx='16' cy='11' r='11.5' fill='%23E9B25F' opacity='.35'/%3E%3Cpath d='M16 2.5a8.5 8.5 0 0 0-5 15.4c1 .8 1.6 1.8 1.6 3V22.5h6.8v-1.6c0-1.2.6-2.2 1.6-3A8.5 8.5 0 0 0 16 2.5z' fill='%23F6C25E' stroke='%2325282A' stroke-width='1.5'/%3E%3Cpath d='M14 22.5v-4.6l2 1.5 2-1.5v4.6' fill='none' stroke='%23FFF6DC' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M12.6 25h6.8M13.4 27.6h5.2' stroke='%2325282A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") 12 8,pointer !important}
}
.glow{position:fixed;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;z-index:9999;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 70%,transparent) 0%,color-mix(in srgb,var(--glow) 28%,transparent) 32%,transparent 68%);mix-blend-mode:var(--glow-blend);transform:scale(.25);opacity:1;animation:bulb .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes bulb{to{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.glow{animation:bulbfade .5s ease forwards;transform:scale(.7)}}
@keyframes bulbfade{to{opacity:0}}

/* ---------- quieter page heads ---------- */
.sheet{padding-block:clamp(48px,8vw,112px) clamp(32px,4vw,56px)}
.sheet h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.015em;margin:.5em 0 0}
.sheet .sub{margin-top:.8em}

/* ---------- academic work: one even grid, small captions ---------- */
.works{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(20px,2.6vw,40px)}
.works a{display:block;text-decoration:none;color:var(--ink)}
.works .im{aspect-ratio:4/3;overflow:hidden;background:var(--concrete);line-height:0}
.works .im img{width:100%;height:100%;object-fit:cover;transition:opacity .4s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.works a:hover .im img{opacity:.88}
@media (prefers-reduced-motion:no-preference){.works a:hover .im img{transform:scale(1.02)}}
.works .cap{display:grid;grid-template-columns:2.2em 1fr;gap:0 10px;margin-top:14px;font-size:.88rem;line-height:1.5}
.works .cap .n{font:500 .66rem/2.1 var(--sans);letter-spacing:.12em;color:var(--ink-3)}
.works .cap b{font-weight:400;color:var(--ink)}
.works .cap span:last-child{grid-column:2;color:var(--ink-3)}
.works a:hover .cap b{color:var(--accent)}
@media (max-width:980px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.works{grid-template-columns:1fr}}

/* ---------- about: a short text, set with room around it ---------- */
.bio{display:grid;grid-template-columns:3fr 7fr;gap:clamp(24px,6vw,96px)}
.bio > *{min-width:0}
.bio .txt p{max-width:34em;font-size:1.02rem;color:var(--ink-2)}
.bio .txt p:first-child{font:300 clamp(1.35rem,2.3vw,1.85rem)/1.4 var(--serif);color:var(--ink);max-width:24em;margin-bottom:1.1em}
.bio .acts{margin-top:32px}
@media (max-width:760px){.bio{grid-template-columns:1fr}}
@media (max-width:760px){.bio .photo{max-width:320px}}

/* ---------- home: the cover ---------- */
/* Drawings of one shape (3:2) fill the screen in full colour under one even
   warm-dark tint (no fade, no panel). The type sits at the top, over the sky,
   so the drawing itself stays clear: her name and two short lines on the left,
   the four links in one quiet row on the right, the caption along the foot.
   The cover keeps this dark, drawing-led look in both modes; phones stack the
   text and show the drawing whole beneath it. */
.cover{position:relative;isolation:isolate;display:flex;min-height:100svh;background:#2D2420;color:#F7F0E8;
  --on:#F7F0E8;--on-2:color-mix(in srgb,#F7F0E8 84%,transparent);--on-acc:#EDBBA7;--on-rule:color-mix(in srgb,#F7F0E8 36%,transparent)}
.cover .frame{position:absolute;inset:0;z-index:-1}
.cover .frame::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,#2D2420 52%,transparent)}
:root[data-mode="dark"] .cover .frame::after{background:color-mix(in srgb,#2D2420 60%,transparent)}
.cover .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;opacity:0;transition:opacity 1.8s ease}
.cover .frame img.on{opacity:1}
.cover-in{position:relative;display:flex;flex-direction:column;width:100%;padding-block:clamp(30px,5.5vh,56px) clamp(22px,4vh,36px);text-shadow:0 1px 2px rgba(24,18,15,.3),0 0 20px rgba(24,18,15,.35)}
.cover-top{display:flex;justify-content:space-between;align-items:baseline;gap:24px 48px;flex-wrap:wrap}
.cover-id{min-width:0;max-width:40rem}
.cover .name{font:600 clamp(2.1rem,3.5vw,3.4rem)/1.04 var(--display);letter-spacing:-.022em;margin:0;color:var(--on)}
.cover .role{font:500 clamp(1rem,1.25vw,1.15rem)/1.4 var(--display);color:var(--on-acc);margin:.7em 0 0}
.cover .line{font:400 clamp(1rem,1.25vw,1.15rem)/1.5 var(--display);color:var(--on-2);margin:.15em 0 0;max-width:30em}
.cover-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(18px,2.2vw,32px)}
.cover-nav a,.cover .mode{font:500 1rem/1.2 var(--display);letter-spacing:.005em;text-decoration:none;padding:8px 0;border:0;border-bottom:1px solid transparent;background:none;transition:border-color .2s ease,color .2s ease}
.cover-nav a{color:var(--on)}
.cover-nav a:hover{color:var(--on);border-bottom-color:currentColor}
.cover-links{display:flex;align-items:baseline;flex-wrap:wrap;justify-content:flex-end;gap:6px 0}
.cover .mode{margin-left:clamp(18px,2.2vw,32px);padding-left:clamp(18px,2.2vw,32px);border-left:1px solid var(--on-rule)}
.cover .mode{color:var(--on-2);cursor:pointer}
.cover .mode:hover{color:var(--on);border-bottom-color:currentColor}
.fcap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:auto 0 0;padding-top:clamp(28px,5vh,52px);font:400 .9rem/1.4 var(--display)}
.fcap a{display:flex;gap:2px 12px;flex-wrap:wrap;text-decoration:none;color:var(--on)}
.fcap .ft{font-weight:500}
.fcap .fp{color:var(--on-2)}
.fcap .fc{font:500 .8rem var(--display);letter-spacing:.08em;color:var(--on-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.fcap a:hover .ft{color:var(--on-acc)}
@media (prefers-reduced-motion:no-preference){
  .cover-id > *,.cover-nav{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
  .cover-id > :nth-child(2){animation-delay:.06s}
  .cover-id > :nth-child(3){animation-delay:.12s}
  .cover-nav{animation-delay:.18s}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (max-aspect-ratio:5/4),(max-height:560px){
  .cover{flex-direction:column}
  .cover-in{order:-1;flex:1 0 auto;padding-block:clamp(26px,4vh,40px) 0;text-shadow:none}
  .cover-top{flex:1 0 auto;flex-direction:column;align-items:stretch;gap:clamp(20px,3.5vh,32px)}
  .cover-links{display:block;margin-top:auto}
  .cover .name{font-size:clamp(1.9rem,8.2vw,2.6rem)}
  .cover-nav ul{flex-direction:column;align-items:flex-start;gap:0}
  .cover-nav li{width:100%}
  .cover-nav a{display:block;padding:10px 0;font-size:1.15rem}
  .cover .mode{position:absolute;top:clamp(26px,4vh,40px);right:max(var(--gut),env(safe-area-inset-right,0px));margin:0;padding:8px 0;border-left:0}
  .cover .mode{font-size:.92rem;border-bottom:1px solid transparent}
  .cover-id{padding-right:6.5rem}
  .cover .frame{position:relative;inset:auto;z-index:auto;width:100%;aspect-ratio:3/2}
  .cover .frame::after{display:none}
  .fcap{padding-top:clamp(18px,3vh,28px);margin-bottom:clamp(14px,2.5vh,20px)}
}

/* ---------- contact: the address, and one drawing beside it ---------- */
.contact-grid{align-items:center}
.contact-grid .where{color:var(--ink-2);margin:0}
.contact-grid .mailrow{margin-top:28px}
.contact-fig{margin:0;max-width:440px;justify-self:end;width:100%}
.contact-fig img{width:100%;height:auto}
.contact-fig figcaption{margin-top:10px;font-size:.84rem;color:var(--ink-3)}
@media (max-width:860px){.contact-fig{justify-self:start}}

/* ---------- layout: footer at the foot of short pages, rules on the content edge ---------- */
body{min-height:100svh;display:flex;flex-direction:column}
main{flex:1 0 auto}
.foot .in{position:relative}
.foot .in::before{content:"";position:absolute;top:0;left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));border-top:1px solid var(--rule)}
.p-next .wrap{position:relative;padding-top:clamp(40px,7vw,88px)}
.p-next .wrap::before{content:"";position:absolute;top:0;left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px));border-top:1px solid var(--rule)}
/* the project's own wash behind the cover drawing is replaced by the ground */
:root[data-mode="dark"] .p-cover .hero .zoom{background:transparent}
/* phones: plates run edge to edge so drawings get the full width; text inside
   still lines up with the page margin */
@media (max-width:600px){
  .plate{border-radius:0;margin-left:calc(-1*max(var(--gut),env(safe-area-inset-left,0px)));margin-right:calc(-1*max(var(--gut),env(safe-area-inset-right,0px)));padding:32px max(var(--gut),env(safe-area-inset-right,0px)) 36px max(var(--gut),env(safe-area-inset-left,0px))}
}

/* ---------- moving between pages ---------- */
/* a short cross-fade from one page to the next (Chrome, Edge, Safari 18.2+;
   other browsers simply change page as before) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}