/* Tiana Day — portfolio styles. Tokens mirror the Portfolio UI Kit in Figma. */
:root{
  --ink:#0B0D12; --ink-band:#151820; --ink-raised:#151922;
  --text:#0B0D12; --text-2:#4B5260; --text-strong:#374151;
  --text-inv:#FFFFFF; --text-inv-2:#C3C8D4; --text-inv-3:#9AA3B8; --text-inv-accent:#9DB5FF;
  --accent:#1F4FE0; --action:#3E3FDD; --action-hover:#3233B8; --violet:#6D28D9; --cyan:#22D3EE;
  --bg:#FFFFFF; --bg-subtle:#F5F6F8; --bg-tint:#F8FAFF; --bg-accent:#EAF0FF; --bg-media:#EEF2F8;
  --border:#E5E7EB; --border-accent:#DCE3EE; --border-inv:rgba(255,255,255,.08);
  --grad:linear-gradient(90deg,#1F4FE0 25%,#6D28D9 100%);
  --shadow-card:0 8px 20px rgba(15,23,51,.12); --shadow-raised:0 18px 40px rgba(10,18,51,.18); --shadow-img:0 8px 24px rgba(15,23,51,.10); --shadow-shot:0 8px 36px rgba(15,23,51,.12); --shadow-hero:0 8px 40px rgba(15,23,51,.12); --shadow-doc:0 4px 40px rgba(15,23,51,.10);
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:16px; --r-2xl:20px; --r-3xl:24px;
  --page:1312px; --gutter:64px; --header-h:86px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (max-width:1024px){:root{--gutter:32px;--header-h:72px}}
@media (max-width:640px){:root{--gutter:20px;--header-h:60px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--bg);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
[tabindex="-1"]:focus{outline:none}
html,body{overflow-x:clip}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-md);text-decoration:none;font-weight:600}
.skip-link:focus{top:12px}
.container{width:100%;max-width:calc(var(--page) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Header (sticky) ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)}
.site-header .container{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo img{height:43px;width:auto}
@media (max-width:640px){.logo img{height:35px}}
.nav ul{display:flex;gap:8px;list-style:none;padding:0;margin:0}
.nav a{display:block;text-decoration:none;font-size:15px;padding:8px 12px;border-radius:var(--r-md);color:var(--text);transition:background .15s}
.nav a:hover{background:var(--bg-subtle)}
.nav a[aria-current="page"]{background:var(--bg-accent);color:var(--accent);font-weight:600}
@media (max-width:640px){.nav ul{gap:2px}.nav a{font-size:14px;padding:7px 8px}}
@media (max-width:360px){.nav a{font-size:13px;padding:6px 6px}}

/* ---------- Type ---------- */
.display-xl{font-weight:500;font-size:clamp(40px,6.2vw,76px);line-height:1.15;letter-spacing:-.04em}
.display-l{font-weight:500;font-size:clamp(36px,5vw,62px);line-height:1.1;letter-spacing:-.04em}
.h2{font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.2;letter-spacing:-.02em}
.h3{font-weight:500;font-size:clamp(22px,2.4vw,28px);line-height:1.15;letter-spacing:-.015em}
.h4{font-weight:500;font-size:20px;line-height:1.3}
.h4-tight{font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.tagline{font-weight:500;font-size:clamp(18px,2vw,24px);letter-spacing:-.01em;color:#16101C}
.lead{font-size:clamp(18px,1.8vw,22px);line-height:1.4;color:var(--text-strong)}
.article{font-size:16px;line-height:1.7;color:var(--text-2)}
.article strong{color:var(--text);font-weight:600}
.eyebrow{font-size:14px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;color:var(--accent)}
.caption{font-size:12px;font-weight:400;text-transform:uppercase;color:var(--text-2)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--text-2)}

/* ---------- Buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--r-lg);font:500 16px/1 var(--font);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}
.btn-primary{background:var(--action);color:#fff}
.btn-primary:hover{background:var(--action-hover);box-shadow:var(--shadow-card)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--bg-subtle)}
.btn .icon{font-size:15px}
@media (max-width:480px){.btn-row .btn{flex:1 1 100%;justify-content:center}}

/* ---------- Hero ---------- */
.hero{position:relative;overflow-x:clip;padding:clamp(56px,9vw,96px) 0 72px}
.hero .stack{display:flex;flex-direction:column;gap:28px;position:relative;z-index:1}
.home-hero{padding:clamp(56px,9vw,104px) 0 clamp(72px,12vw,175px)}
.home-hero .stack{gap:36px;max-width:1200px;margin:0 auto}
.home-hero .btn-row{margin-top:4px}
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.blob-blue{background:rgba(31,79,224,.22)} .blob-violet{background:rgba(109,40,217,.22)} .blob-cyan{background:rgba(34,211,238,.22)}

/* ---------- Homepage case studies (Ink band) ---------- */
.work-band{position:relative;background:var(--ink);color:var(--text-inv);padding:clamp(64px,8vw,96px) 0;overflow:hidden}
.work-band::before{content:"";position:absolute;inset:0;background:url("prism.svg") center top/cover no-repeat;pointer-events:none}
.work-band .container{position:relative}
.work-band h2{color:#fff;margin-bottom:28px;font-weight:400;font-size:clamp(28px,3vw,36px);letter-spacing:-.03em}
.cards{display:flex;flex-direction:column;gap:32px}
.case-card{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:40px;align-items:center;padding:36px 24px;border-radius:var(--r-2xl);background:var(--ink-raised);border:1px solid var(--border-inv);text-decoration:none;color:inherit;position:relative}
.case-card .well{background:var(--bg-accent);border-radius:18px;padding:22px}
.case-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.case-card{transform-origin:center;backface-visibility:hidden}
.case-card:hover,.case-card.is-hover,.case-card:focus-visible{transform:scale(1.035);box-shadow:0 0 64px 6px rgba(255,255,255,.13),inset 0 0 32px rgba(255,255,255,.045),0 24px 56px rgba(0,0,0,.45);z-index:2}
@media (prefers-reduced-motion:reduce){.case-card:hover,.case-card.is-hover,.case-card:focus-visible{transform:none}}
.case-card:focus-visible{outline:3px solid var(--text-inv-accent);outline-offset:3px}
.case-card .shot{background:#fff;border-radius:var(--r-lg);padding:8px;box-shadow:var(--shadow-img)}
.case-card .shot img{border-radius:4px;width:100%;aspect-ratio:460/260;object-fit:cover}
.case-card .shot img.fit-contain{object-fit:contain}
.case-card .content{display:flex;flex-direction:column;gap:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chip{background:var(--bg-accent);color:var(--accent);border-radius:var(--r-sm);padding:6px 10px;font-size:14px;letter-spacing:.02em}
.chip b{font-weight:700}
.case-card h3{font-weight:500;font-size:clamp(22px,2.3vw,28px);line-height:1.1;letter-spacing:-.015em;color:#fff}
.case-card .sub{font-size:18px;line-height:1.25;letter-spacing:-.015em;color:var(--text-inv-2)}
.case-card .meta{font-size:14px;text-transform:uppercase;color:var(--text-inv-3)}
@media (max-width:900px){.case-card{grid-template-columns:1fr;gap:24px;padding:20px}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:72px 0 36px}
@media (max-width:640px){.site-footer{padding-top:48px}}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.contact{display:flex;align-items:center;gap:12px}
.contact .li{display:inline-flex;color:#0A66C2}
.contact .li svg{width:28px;height:28px}
.contact .email{font-size:15px;text-decoration:underline;text-underline-offset:4px}
.foot-nav{display:flex;gap:6px;list-style:none;padding:0;color:var(--text-2)}
.foot-nav a{text-decoration:none;font-size:15px;padding:4px 6px}
.foot-nav a:hover{color:var(--accent)}
.foot-nav li+li::before{content:"·";margin-right:6px}

/* ---------- Case study ---------- */
.cs-header{padding:clamp(40px,6vw,64px) 0 clamp(28px,3.4vw,48px)}
.cs-header .stack{display:flex;flex-direction:column;gap:20px}
.cs-header .lead{color:var(--text-2)}
.results{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:40px;padding:0;list-style:none}
.tile{flex:1 1 380px;max-width:427px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:8px}
.tile .value{font-weight:500;font-size:clamp(26px,2.6vw,30px);letter-spacing:-.03em;color:var(--accent);line-height:1.25}
.tile .label{color:var(--text-2);line-height:1.5;font-size:15px}
.cs-hero{background:var(--bg-tint);border:1px solid var(--border-accent);border-radius:var(--r-3xl);padding:clamp(16px,4vw,48px) clamp(16px,7vw,96px);margin-bottom:clamp(40px,6vw,80px)}
.cs-hero img{margin:0 auto;border-radius:12px;box-shadow:var(--shadow-hero)}
.cs-concept-sets .cs-hero img,.cs-hco-table-redesign .cs-hero img{width:100%;max-width:840px;box-shadow:0 -6px 71px rgba(15,23,51,.15)}
.cs-hco-table-redesign .cs-hero img{box-shadow:0 -6px 71px rgba(15,23,51,.18)}
.cs-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:68px;padding-bottom:96px;align-items:start}
.toc{position:sticky;top:calc(var(--header-h) + 32px);min-width:0}
.toc ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;padding:8px 10px;border-radius:var(--r-md);text-decoration:none;font-size:14px;color:var(--text)}
.toc a:hover{background:var(--bg-subtle)}
.toc a.active{background:var(--bg-accent);color:var(--accent);font-weight:500}
.toc a{line-height:1.45}
@media (max-width:1024px){
  .cs-body{grid-template-columns:minmax(0,1fr);gap:32px}
  .toc{top:var(--header-h);z-index:40;margin:0 calc(var(--gutter)*-1);padding:10px var(--gutter);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
  .toc ol{flex-direction:row;overflow-x:auto;max-width:100%;scrollbar-width:none;gap:6px}
  .toc ol::-webkit-scrollbar{display:none}
  .toc a{white-space:nowrap;border:1px solid var(--border);padding:7px 12px}
  .toc a.active{border-color:transparent}
}
.cs-content{display:flex;flex-direction:column;gap:clamp(56px,7vw,72px);min-width:0}
.cs-section{display:flex;flex-direction:column;gap:20px}
.cs-hco-table-redesign .cs-section,.cs-design-leadership .cs-section{gap:24px}
#overview{gap:0}
#iteration > .side{margin-top:40px}
.cs-hco-table-redesign #iteration > .side{margin-top:36px}
@media (max-width:860px){#iteration > .side,.cs-hco-table-redesign #iteration > .side{margin-top:24px}}
.cs-concept-sets #problem figure.shot-fig{padding:clamp(16px,3vw,30px) clamp(16px,2vw,20px)}
.cs-concept-sets #problem figure img{width:100%;max-width:706px}
.cs-section > header{display:flex;flex-direction:column;gap:8px}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
#overview.simple .card-grid{gap:0 16px}
#overview.simple .info.boxed{padding-top:10px}
.cs-hco-table-redesign .meta-col .info{padding-right:20px}
.info h3{font-weight:500;font-size:20px;line-height:1.3}
.info p,.info li{color:var(--text-2);line-height:1.4}
.info.boxed{padding:24px 24px 24px 0;display:flex;flex-direction:column;gap:10px}
.meta-col{display:flex;flex-direction:column;gap:20px}
.meta-col .info{padding:16px 0;display:flex;flex-direction:column;gap:4px}
.info .bullets{gap:0}
@media (max-width:700px){.card-grid{grid-template-columns:1fr}.meta-col{gap:0}.info.boxed{padding:16px 0}}
figure.shot-fig{background:var(--bg-tint);border:1px solid var(--border-accent);border-radius:var(--r-2xl);padding:clamp(16px,3vw,36px) clamp(16px,3.4vw,48px)}
figure.shot-fig img{margin:0 auto;box-shadow:var(--shadow-shot)}
.side figure.shot-fig{padding:clamp(16px,3vw,40px)}
figure.shot-fig.flat img{box-shadow:none}
.cs-hero img.cutout,figure.shot-fig img.cutout{box-shadow:none;border-radius:0;filter:drop-shadow(0 8px 20px rgba(15,23,51,.12))}
#tradeoffs figure.shot-fig{padding:clamp(16px,3vw,40px)}
.zoomable{cursor:zoom-in;padding:0;border:0;background:none;display:block;width:100%}
.zoomable img{transition:transform .2s}
.zoomable:hover img{transform:scale(1.01)}
.num-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:0}
.num-list li{display:flex;gap:14px;align-items:flex-start;padding:4px 0;line-height:1.5;font-size:15px}
#tradeoffs .num-list{gap:10px}
#tradeoffs .num-list li{padding:0;gap:10px}
.num{flex:none;font-size:12px;color:var(--accent);border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;line-height:1.3;background:#fff}
.bullets{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.quote{background:var(--ink);color:#fff;border-radius:var(--r-2xl);padding:32px 36px;display:flex;flex-direction:column;gap:14px}
.quote p{font-weight:500;font-size:clamp(18px,1.9vw,21px);line-height:1.45}
.quote cite{font-style:normal;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-inv-2)}
.quote.questions p{font-size:clamp(17px,1.7vw,19px)}
.side{display:grid;grid-template-columns:minmax(0,437px) minmax(0,1fr);gap:48px;align-items:start}
.side.wide{grid-template-columns:minmax(0,1fr) minmax(0,422px)}
.side .text{display:flex;flex-direction:column;gap:12px}
@media (max-width:860px){.side{grid-template-columns:1fr;gap:20px}}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.twocol > div{border:1px solid var(--border);border-radius:var(--r-xl);padding:24px;display:flex;flex-direction:column;gap:12px}
.twocol .bullets{gap:12px;color:var(--text-2);line-height:1.5;font-size:15px}
@media (max-width:700px){.twocol{grid-template-columns:1fr}}

/* ---------- Lightbox ---------- */
dialog.lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
dialog.lightbox::backdrop{background:rgba(11,13,18,.86)}
dialog.lightbox img{max-width:96vw;max-height:88vh;width:auto;height:auto;border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow-raised)}
dialog.lightbox .close{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:22px;cursor:pointer;box-shadow:var(--shadow-card)}
dialog.lightbox figcaption{color:#fff;font-size:14px;text-align:center;margin-top:12px;max-width:80ch;margin-inline:auto}

/* ---------- Password gate ---------- */
.gate{min-height:calc(100vh - var(--header-h) - 200px);display:grid;place-items:center;padding:64px 0}
.gate-card{width:min(100%,460px);border:1px solid var(--border);border-radius:var(--r-2xl);padding:36px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:16px;background:#fff}
.gate-card label{font-weight:500}
.gate-card input{font:16px var(--font);padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-lg);width:100%}
.gate-card input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(31,79,224,.15)}
.gate-error{color:#B42318;font-size:14px;min-height:1.2em}

/* ---------- About ---------- */
.about-hero{padding:clamp(48px,6vw,76px) 0 72px}
.about-hero .container{display:grid;grid-template-columns:minmax(0,812px) 420px;justify-content:space-between;gap:80px;align-items:center;min-height:520px}
.photo-frame{justify-self:start;border-radius:var(--r-2xl);overflow:hidden;border:2px solid #fff;box-shadow:var(--shadow-raised);width:248px}
@media (max-width:860px){.about-hero .container{grid-template-columns:1fr;gap:40px;min-height:0}.photo-frame{justify-self:start;width:200px}}
.prose-sections{display:flex;flex-direction:column;gap:48px;padding-bottom:96px;position:relative}
.prose-sections section{display:flex;flex-direction:column;gap:20px}
.prose-sections .copy{display:flex;flex-direction:column;gap:30px}
.prose-sections p{font-size:18px;line-height:1.7;letter-spacing:-.015em;color:var(--text-strong)}

/* ---------- Process ---------- */
.process-hero .stack{max-width:none}
.process-hero,.resume-hero{overflow:hidden}
.resume-hero .btn-row{margin-top:8px}
.pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;border-top:4px solid var(--ink);padding-top:32px;margin-top:8px;list-style:none;padding-left:0}
.pipeline .idx{font-size:12px;color:var(--accent)}
@media (max-width:860px){.pipeline{grid-template-columns:repeat(2,1fr);row-gap:20px}}
.phases{display:flex;flex-direction:column;gap:16px;padding:72px 0}
.phase{display:grid;grid-template-columns:minmax(0,1fr) 460px;border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden}
.phase .main{padding:32px 36px;display:flex;flex-direction:column;gap:14px}
.phase .main p,.phase .main li{font-size:17px;line-height:1.7;color:var(--text-2)}
.phase .aside{background:var(--bg-subtle);padding:32px;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.phase{grid-template-columns:1fr}.phase .main{padding:24px}.phase .aside{padding:24px}}
.badges{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.badge{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 10px;font-size:13px}
.tools{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-2xl);padding:32px 36px;display:flex;flex-direction:column;gap:16px;margin-bottom:96px}

/* ---------- Resume ---------- */
.resume-doc{background:#fff;padding:clamp(32px,6vw,72px) 0}
.resume-doc figure{max-width:876px;margin:0 auto;background:#fff;box-shadow:var(--shadow-doc)}
.resume-text{max-width:876px;margin:24px auto 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 24px}
.resume-text summary{cursor:pointer;font-weight:600}
.resume-text h3{margin:20px 0 6px;font-size:18px}
.resume-text p,.resume-text li{color:var(--text-strong);line-height:1.55}
.resume-text ul{padding-left:1.2em;display:flex;flex-direction:column;gap:4px}

.notfound{padding:120px 0;display:flex;flex-direction:column;gap:20px}