/* Hallmark · v2.0.0 · redesign: full · custom: editorial ledger · type: Newsreader + Hanken Grotesk · signature: the slogan set large over a three-figure Amazon ledger */
/* critique: the old page said everything at once; this one says one thing per screen and moves the record to /work, /prototypes and /cv */

@font-face{font-family:"Newsreader";src:url(/assets/fonts/nr.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/nri.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(/assets/fonts/hg.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* metric-matched fallbacks, measured with fontTools against Liberation/Times/Arial widths */
@font-face{font-family:"Newsreader Fallback";src:local("Georgia"),local("Times New Roman"),local("Liberation Serif"),local("Times");size-adjust:101.2%;ascent-override:72.6%;descent-override:26.2%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:101.3%;ascent-override:98.7%;descent-override:29.9%;line-gap-override:0%}

:root{
  --font-display:"Newsreader","Newsreader Fallback",ui-serif,Georgia,serif;
  --font-body:"Hanken Grotesk","Hanken Fallback",ui-sans-serif,system-ui,sans-serif;
  --bg:#F6F3EC; --surface:#EFEAE0; --ink:#141B2B; --text:#2A3142; --muted:#525B6C; --line:#D9D2C4; --accent:#8A5A16; --accent-ink:#F6F3EC; --focus:#8A5A16; --shadow:rgba(20,27,43,.16);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --maxw:1120px; --measure:62ch; --ease:cubic-bezier(.2,.7,.2,1);
  --fs-body:18px; --fs-small:16px; --fs-lede:20px; --fs-h1:clamp(40px,5.6vw,76px); --fs-h2:clamp(28px,3vw,36px); --fs-h3:clamp(22px,2.2vw,26px); --fs-fig:clamp(44px,4.4vw,56px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1421; --surface:#151D2D; --ink:#ECE6D8; --text:#D3D0C6; --muted:#A3ACBB; --line:#2A3446; --accent:#E2B464; --accent-ink:#0E1421; --focus:#E2B464; --shadow:rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1421; --surface:#151D2D; --ink:#ECE6D8; --text:#D3D0C6; --muted:#A3ACBB; --line:#2A3446; --accent:#E2B464; --accent-ink:#0E1421; --focus:#E2B464; --shadow:rgba(0,0,0,.5); color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;margin:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--s8)}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.55;font-synthesis:none;font-kerning:normal;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 var(--s4)}
p,li{text-wrap:pretty}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s8)}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--line);transition:color .15s var(--ease),text-decoration-color .15s var(--ease)}
a:hover{color:var(--accent);text-decoration-color:currentColor}
a:active{opacity:.7}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:2px}
::selection{background:var(--accent);color:var(--accent-ink)}

.skip{position:absolute;left:var(--s4);top:-100px;z-index:100;background:var(--ink);color:var(--bg);padding:var(--s3) var(--s4);font-weight:600;text-decoration:none}
.skip:focus{top:var(--s4)}
.skip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* masthead */
.mast{border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-top:var(--s6);padding-bottom:var(--s6)}
.wordmark{font-family:var(--font-display);font-size:22px;font-weight:600;text-decoration:none;color:var(--ink);white-space:nowrap}
.mast nav{display:flex;align-items:center;gap:var(--s6)}
.mast ul{display:flex;gap:var(--s6);list-style:none;margin:0;padding:0;font-size:var(--fs-small)}
.mast ul a{text-decoration:none;color:var(--muted);padding:var(--s2) 0;white-space:nowrap}
.mast ul a:hover{color:var(--accent)}
.mast ul a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}
.theme{appearance:none;background:none;border:1px solid var(--line);color:var(--muted);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;padding:0;transition:color .15s var(--ease),border-color .15s var(--ease)}
.theme:hover{color:var(--accent);border-color:var(--accent)}
.theme:active{transform:scale(.94)}
.theme svg{width:18px;height:18px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}}

h1,h2,h3{font-family:var(--font-display);color:var(--ink);font-weight:500;text-wrap:balance;overflow-wrap:break-word;min-width:0;margin:0;font-optical-sizing:auto}
h2{font-size:var(--fs-h2);line-height:1.15}
h3{font-size:var(--fs-h3);line-height:1.2}
strong,b{font-weight:600;color:var(--ink)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s12);padding:var(--s16) 0 var(--s12);align-items:end}
.role{font-size:var(--fs-lede);line-height:1.4;color:var(--ink);margin:0 0 var(--s6);max-width:36ch}
.role span{display:block;color:var(--muted)}
.hero h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.015em}
.hero .sub{font-size:var(--fs-lede);max-width:34ch;margin:var(--s6) 0}
.hero picture img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15)}
.actions{display:flex;gap:var(--s4) var(--s6);flex-wrap:wrap;align-items:center}
.btn{display:inline-block;padding:var(--s3) var(--s6);background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;white-space:nowrap;border:1px solid var(--accent);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.btn:hover{color:var(--accent-ink);opacity:.9}
.btn:active{transform:translateY(1px);opacity:.8}
.link{padding:var(--s3) 0;font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--accent)}

/* ledger */
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin:0;padding:0;list-style:none}
.ledger li{padding:var(--s8) var(--s6) var(--s8) 0}
.ledger li+li{padding-left:var(--s6);border-left:1px solid var(--line)}
.fig{display:block;font-family:var(--font-display);font-size:var(--fs-fig);line-height:1;color:var(--ink);font-variant-numeric:lining-nums;font-weight:500}
.ledger .caption{margin:var(--s3) 0 var(--s2);font-size:var(--fs-small);color:var(--muted);max-width:32ch}
.ledger a{font-size:15px}
.ledger-note{font-size:15px;color:var(--muted);margin:var(--s3) 0 0}

section{padding:var(--s16) 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.two{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s12)}
.two > div > p, .prose p, .lede{max-width:var(--measure)}
.lede{font-size:var(--fs-lede)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small)}

/* lists */
.plain{list-style:none;margin:0;padding:0}
.rows li{padding:var(--s4) 0;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows h3{font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;margin:0 0 var(--s1)}
.rows p{margin:0;color:var(--text)}
.steps{counter-reset:step}
.steps li{display:grid;grid-template-columns:var(--s8) minmax(0,1fr);gap:var(--s3);padding:var(--s3) 0}
.steps li::before{counter-increment:step;content:counter(step);font-family:var(--font-display);font-size:22px;color:var(--accent);line-height:1.2}
.steps h3{font-family:var(--font-body);font-size:var(--fs-body);font-weight:600}
.steps p{margin:0}
.guard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s8);margin-top:var(--s12);padding-top:var(--s6);border-top:2px solid var(--ink)}
.guard h3{font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;margin-bottom:var(--s2)}
.guard p{margin:0;font-size:var(--fs-small)}

/* prototypes */
.protos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12)}
.protos article{border-top:2px solid var(--ink);padding-top:var(--s6)}
.protos h3{margin-bottom:var(--s3)}
.protos .ctx{font-size:15px;color:var(--muted);margin-bottom:var(--s2)}
.tags{font-size:15px;color:var(--muted);margin:var(--s4) 0}
.colophon{margin-top:var(--s12);max-width:var(--measure)}

/* results */
.result{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--s12);padding:var(--s12) 0;border-top:1px solid var(--line);scroll-margin-top:var(--s8)}
.result:target{background:var(--surface);box-shadow:-16px 0 0 var(--surface),16px 0 0 var(--surface)}
.result .where{font-size:15px;color:var(--muted);margin-top:var(--s2)}
.result h3{margin-bottom:var(--s3)}
.result p{max-width:var(--measure)}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s12)}
.quotes figure{margin:0;border-top:2px solid var(--ink);padding-top:var(--s6)}
.quotes blockquote{margin:0 0 var(--s4);font-family:var(--font-display);font-size:22px;line-height:1.4;color:var(--ink)}
.quotes figcaption{font-size:15px;color:var(--muted)}
.quotes figcaption span{display:block}

/* cv */
.tl > li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--s12);padding:var(--s8) 0;border-top:1px solid var(--line)}
.tl .when{font-size:15px;color:var(--muted);margin-top:var(--s2)}
.tl h3{margin-bottom:var(--s2)}
.tl .org{color:var(--ink);margin:0}
.tl .meta{font-size:var(--fs-small);color:var(--muted);margin:var(--s1) 0 var(--s3)}
.tl ul{margin:0;padding-left:1.1em}
.tl ul li{margin-bottom:var(--s2);max-width:var(--measure)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s12)}
.facts h3{font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;margin-bottom:var(--s2)}
.facts p,.facts ul{font-size:var(--fs-small);margin:0}
.facts ul{padding-left:1.1em}
.facts li{margin-bottom:var(--s1)}

/* page heads + prose */
.page-head{padding:var(--s16) 0 var(--s8);border-bottom:0}
.page-head h1{font-size:clamp(40px,5vw,56px);line-height:1.08;max-width:22ch}
.page-head p{max-width:var(--measure);font-size:var(--fs-lede);margin-top:var(--s4)}
.byline{font-size:var(--fs-small);color:var(--muted)}
.prose{max-width:var(--measure)}
.prose h2{margin:var(--s12) 0 var(--s4)}
.prose ul{padding-left:1.1em}
.prose li{margin-bottom:var(--s2)}
.prose .pull{font-family:var(--font-display);font-size:28px;line-height:1.3;color:var(--ink);border-left:2px solid var(--accent);padding-left:var(--s6);margin:var(--s8) 0}
.prose .note{font-size:var(--fs-small);color:var(--muted);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s12)}
.entry{padding:var(--s8) 0;border-top:1px solid var(--line)}
.entry h2{font-size:var(--fs-h3)}
.entry h2 a{text-decoration:none}

.contact h2{font-size:clamp(32px,4vw,52px);max-width:22ch;margin-bottom:var(--s4)}
.contact p{max-width:var(--measure)}
.site-foot{border-top:1px solid var(--line);padding:var(--s8) 0;font-size:15px;color:var(--muted)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s8)}
.site-foot ul{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);list-style:none;margin:0;padding:0}
.site-foot p{margin:0}

/* Ask Soham: quiet launcher, logic unchanged */
.chat-launch{position:fixed;right:var(--s6);bottom:var(--s6);z-index:80;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:var(--s2) var(--s4);font:600 15px/1.4 var(--font-body);cursor:pointer;box-shadow:0 6px 20px -10px var(--shadow);transition:border-color .15s var(--ease),color .15s var(--ease),opacity .2s var(--ease)}
.chat-launch:hover{border-color:var(--accent);color:var(--accent)}
.chat-launch:active{transform:translateY(1px)}
.chat-launch.hide,.chat-launch.tuck{opacity:0;pointer-events:none;visibility:hidden}
.chat-panel{position:fixed;right:var(--s6);bottom:var(--s6);z-index:81;width:376px;max-width:calc(100vw - 32px);height:540px;max-height:calc(100vh - 48px);background:var(--bg);color:var(--text);border:1px solid var(--ink);display:none;flex-direction:column}
.chat-panel.open{display:flex}
.chat-head{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line)}
.chat-head .t{flex:1;min-width:0}
.chat-head .t b{font-family:var(--font-display);font-size:20px;font-weight:500;display:block}
.chat-head .t span{font-size:14px;color:var(--muted)}
.chat-head button,.chat-input button{appearance:none;background:none;border:1px solid var(--line);color:var(--ink);font:600 14px/1 var(--font-body);padding:var(--s2) var(--s3);cursor:pointer}
.chat-head button:hover,.chat-input button:hover{border-color:var(--accent);color:var(--accent)}
.chat-body{flex:1 1 auto;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);font-size:15px}
.msg{max-width:88%;padding:var(--s2) var(--s3);line-height:1.5;white-space:pre-line}
.msg.bot{background:var(--surface);color:var(--text);align-self:flex-start}
.msg.user{border:1px solid var(--line);color:var(--ink);align-self:flex-end}
.chat-suggest{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s4) var(--s3)}
.chat-suggest button{font:500 14px/1.3 var(--font-body);color:var(--ink);background:none;border:1px solid var(--line);padding:var(--s1) var(--s3);cursor:pointer}
.chat-suggest button:hover{border-color:var(--accent);color:var(--accent)}
.chat-input{display:flex;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);color:var(--ink);padding:var(--s2) var(--s3);font:16px/1.4 var(--font-body)}
.chat-disclaimer{font-size:13px;color:var(--muted);padding:0 var(--s4) var(--s3)}

/* 404 */
.lost{padding:var(--s24) 0;border-bottom:0}
.lost h1{font-size:clamp(36px,5vw,56px);max-width:18ch;margin-bottom:var(--s4)}

@media (max-width:760px){
  :root{--fs-body:17px;--fs-small:15px;--fs-lede:19px;--fs-h1:clamp(34px,9.6vw,44px)}
  .wrap{padding:0 var(--s6)}
  .hero,.two,.result,.tl > li,.quotes,.facts,.guard{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .hero{padding-top:var(--s8)}
  .hero picture{order:-1;max-width:132px}
  .ledger{grid-template-columns:minmax(0,1fr)}
  .ledger li{padding:var(--s6) 0}
  .ledger li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .protos{grid-template-columns:minmax(0,1fr)}
  .mast .wrap{flex-wrap:wrap;row-gap:var(--s2);padding-top:var(--s4);padding-bottom:var(--s3)}
  .mast nav{gap:var(--s4)}
  .mast ul{gap:var(--s4);font-size:15px}
  section{padding:var(--s12) 0}
  .page-head{padding:var(--s12) 0 var(--s4)}
  .result,.tl > li{gap:var(--s2)}
  .chat-launch{right:var(--s4);bottom:var(--s4)}
  .chat-panel{right:var(--s3);left:var(--s3);bottom:var(--s3);width:auto;max-width:none;height:76vh}
}
@media (max-width:380px){.mast ul{gap:var(--s3)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.mast nav,.chat-launch,.chat-panel,.skip,.theme{display:none!important}body{background:var(--bg);color:var(--ink)}a{text-decoration:none}}
.sr-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
button:disabled,input:disabled{opacity:.5;cursor:not-allowed}