/* ============================================================
   Plain view (?view=plain) — the calm, light, still home page.
   Every rule is scoped to html.plain, so the Interactive page never sees it.
   The standard it is built to: docs/design/plain-craft.md
   main.js removes the film, the thread, Pixel, the lily and the carousel controls,
   and skips the rail, carousel and cursor scripts, so this file only lays out what stays.
   ============================================================ */

/* ---- tokens: warm paper, ink text, the accent deepened so it holds on white ---- */
html.plain{
  --bg:#FAF8F4;--bg-2:#F3F0EA;--surf:#FFFFFF;--surf-2:#F6F3EE;--line:rgba(24,20,30,.10);--line-2:rgba(24,20,30,.18);
  --fg:#17141C;--fg-2:#4F4A58;--fg-3:#77727F;
  --acc:#7A35E8;--acc-2:#6A2FD0;--acc-glow:rgba(122,53,232,.22);--ok:#17855a;--warn:#c93a3a;
  /* the one shadow, and its hover state */
  --p-sh:0 0 0 1px rgba(24,20,30,.08),0 12px 32px -20px rgba(40,24,80,.25);
  --p-sh-hover:0 0 0 1px rgba(122,53,232,.32),0 18px 40px -20px rgba(40,24,80,.32);
  --sh-1:var(--p-sh);--sh-2:var(--p-sh);--sh-3:var(--p-sh);
  /* layout: content 1120px, 64px sides (20px on phones) */
  --wrap:1248px;--pad:64px;
  /* rhythm: section padding, heading → content */
  --p-sec:128px;--p-head:48px;
  /* type */
  --p-hero:clamp(44px,6.4vw,72px);--p-h2:clamp(32px,4.2vw,44px);--p-title:22px;--p-body:17px;--p-small:13px;
  color-scheme:light}
@media(max-width:820px){html.plain{--pad:20px;--p-sec:80px;--p-head:32px;--p-title:20px;--p-body:16px}}

html.plain body{background:var(--bg);font-size:var(--p-body)}
html.plain ::selection{background:#E4D6FB;color:var(--fg)}
html.plain .prog{box-shadow:none;height:2px}

/* ---- nav: white glass, same width as the content ---- */
/* the logo sits on the content's left edge: the bar is the content width plus its own 12px inset */
html.plain .nav,html.plain .scrolled .nav{width:min(calc(100% - var(--pad) * 2 + 24px),1144px);top:14px;height:56px;
  background:rgba(255,255,255,.8);box-shadow:0 0 0 1px rgba(24,20,30,.08),0 12px 32px -20px rgba(40,24,80,.25)}
html.plain .nav::before,html.plain .nav .pill-btn.primary::before{display:none}
html.plain .mark{filter:invert(1)}
html.plain .logo:hover,html.plain .links a:hover{background:rgba(24,20,30,.06)}
html.plain .nav .pill-btn.primary{color:#fff;background:var(--fg);box-shadow:none}
html.plain .nav .pill-btn.primary:hover{background:#2c2636}
html.plain .vt{background:rgba(24,20,30,.05);box-shadow:inset 0 0 0 1px rgba(24,20,30,.08)}
html.plain .vt a.on{background:#fff;box-shadow:0 1px 3px rgba(24,20,30,.15)}
@media(max-width:820px){html.plain .nav,html.plain .scrolled .nav{top:10px;height:52px}}

/* ---- section heads: one left edge, a real step between heading and body ---- */
html.plain .sec{padding:var(--p-sec) 0}
html.plain .sec::before{display:none}
html.plain .sec-h{margin-bottom:var(--p-head)}
html.plain .sec-n{font-size:12px;color:var(--acc-2);margin-right:10px}
html.plain .tag{font-size:var(--p-small);color:var(--fg-3)}
html.plain h2{font-size:var(--p-h2);line-height:1.08;letter-spacing:-.02em;max-width:none;text-wrap:balance}   /* one line on desktop; balanced when a phone wraps it */
html.plain .sec-h h2,html.plain .about h2{margin-top:16px}
html.plain .sec-sub{margin-top:16px;max-width:64ch;font-size:var(--p-body);line-height:1.6;color:var(--fg-2)}
html.plain #work .sec-h .sec-n,html.plain #work .sec-h .tag,html.plain #work .sec-h h2{text-shadow:none}

/* ---- hero: left-aligned, headline → subtext → two buttons ---- */
html.plain .hero{height:auto;isolation:isolate}
/* texture: a faint dot grid on the paper — the halftone of the Interactive hands, without the image.
   It runs a little past the hero and fades out, so there is no edge where the hero ends. */
html.plain .hero::before{content:"";position:absolute;inset:0 0 -120px;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(24,20,30,.17) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0,#000 50%,transparent 100%)}
/* colour: a soft violet → peach glow pooled behind the headline, the accent's warm end on the right */
html.plain .hero::after{content:"";position:absolute;inset:0 0 -120px;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 46% at 18% 40%,rgba(154,98,245,.30),transparent 70%),
    radial-gradient(32% 40% at 46% 52%,rgba(255,176,138,.30),transparent 70%),
    radial-gradient(30% 36% at 86% 22%,rgba(198,147,249,.20),transparent 70%)}
html.plain .hero-stage{z-index:1}
html.plain .hero-stage{position:relative;display:block;height:auto;min-height:0;overflow:visible;
  padding:clamp(136px,15vw,184px) 0 0}
/* justify-items:start — current Chrome honours the base file's justify-items:center even in block layout */
html.plain .hv-copy{display:block;justify-items:start;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);text-align:left;opacity:1;transform:none}
html.plain .hv-sub{justify-items:start}
html.plain .hv-cue{display:none}
html.plain .hv-eyebrow{margin:0 0 24px;font-size:15px;opacity:1;transform:none}
html.plain .hero .h1{margin:0;max-width:15ch;font-size:var(--p-hero);line-height:1.02;letter-spacing:-.025em}
html.plain .hero .h1 .line span{background:none;color:var(--fg);-webkit-text-fill-color:currentColor}
html.plain .hero .h1 em{color:var(--acc)}
html.plain .hero .hv-sub{display:block;margin-top:32px;opacity:1;transform:none;pointer-events:auto}
html.plain .hero-sub{max-width:60ch;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--fg-2);text-shadow:none}
html.plain .h-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
html.plain .h-cta{display:inline-flex;padding:13px 22px;border:0;font-size:15px;color:var(--fg);
  background:#fff;box-shadow:var(--p-sh);-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:box-shadow .15s ease-out,background-color .15s ease-out}
html.plain .h-cta:first-child{background:var(--fg);color:#fff;box-shadow:none}
html.plain .h-cta:first-child .arw{color:#D9C4FB;animation:none}
html.plain .h-cta:hover{box-shadow:var(--p-sh-hover)}
html.plain .h-cta:first-child:hover{background:#2c2636;box-shadow:none}

/* ---- cards (work + lab): white, one shadow, the image inset with its own radius ---- */
html.plain .card{top:0;border-radius:20px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:var(--p-sh);transition:box-shadow .15s ease-out}
html.plain .card::before,html.plain .card::after{display:none}
html.plain .card:hover,html.plain .card:focus-visible,html.plain .lab-proj:focus-within{top:0;box-shadow:var(--p-sh-hover)}
html.plain .cover{margin:8px 8px 0;border-radius:12px;
  background:radial-gradient(62% 46% at 50% 104%,rgba(122,53,232,.26),rgba(122,53,232,.06) 55%,transparent 80%),#F1EAFB}
html.plain .cover img{filter:drop-shadow(0 18px 20px rgba(40,24,80,.22))}
html.plain .card:hover .cover img{transform:none}
/* three sizes per card: 13 · 16 · 22 */
html.plain .card-b{padding:24px 28px 24px;gap:12px}
html.plain .card-b .eyebrow{font-size:var(--p-small)}
html.plain .card h3{font-size:var(--p-title);line-height:1.25;max-width:28ch}
html.plain .card p{font-size:16px;line-height:1.6;max-width:56ch}
html.plain .outc{gap:8px;margin:4px 0}
html.plain .outc li,html.plain .proof li{background:var(--bg-2);box-shadow:none;border-radius:12px}
html.plain .outc b{font-size:22px}
html.plain .outc span,html.plain .outc-src,html.plain .meta span,html.plain .meta a.lab-link,html.plain .proof li{font-size:var(--p-small)}
html.plain .meta{padding-top:16px}

/* work: a 2 × 2 grid, nothing cut off, no sideways scroll */
/* one gap between the hero's buttons and the first section, not hero padding + section padding */
html.plain #work{margin-top:0;background:none;padding-top:clamp(72px,8vw,112px)}
html.plain #work::before{display:none}
html.plain .rail-head{display:block;margin-bottom:var(--p-head)}
html.plain .rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;overflow:visible;
  margin:0;padding:0;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none}
html.plain .rail > .card{flex:none}
/* lab: the same grid */
html.plain .lab{gap:24px}
@media(max-width:820px){html.plain .rail,html.plain .lab{grid-template-columns:1fr;gap:20px}}

/* ---- skills: a 2-column list with hairlines, not tiles ---- */
html.plain .skills{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;border-bottom:1px solid var(--line)}
html.plain .sk{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:24px;min-height:0;
  padding:22px 0;border-radius:0;border-top:1px solid var(--line);background:none;box-shadow:none}
html.plain .sk::before,html.plain .sk::after{display:none}
html.plain .sk:hover{box-shadow:none}
html.plain .sk-n,html.plain .sk:nth-child(7) .sk-n{font-size:12px;color:var(--fg-3);flex:none;width:24px}
html.plain .sk h3{font-family:var(--sans);font-size:var(--p-title);font-weight:500;letter-spacing:-.015em;line-height:1.3}
@media(max-width:820px){html.plain .skills{grid-template-columns:1fr}html.plain .sk{padding:18px 0}}

/* ---- about: photo 5/12, words 7/12, top-aligned ---- */
html.plain .about{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
html.plain .pcard{max-width:none;justify-self:stretch}
html.plain .pcard-in{border-radius:20px;box-shadow:var(--p-sh)}
html.plain .pcard-rim,html.plain .pcard-in::before,html.plain .pcard-in::after{display:none}
html.plain .pcard:hover .pcard-img{transform:none}
html.plain .pcard:hover .pcard-in{box-shadow:var(--p-sh)}
html.plain .about-t{gap:32px}
html.plain .about-c p{font-size:var(--p-body);line-height:1.65;max-width:60ch;margin-bottom:20px}
html.plain .about-q{margin:32px 0 8px;font-size:24px;border-left-color:var(--acc)}
html.plain .about-cv{margin-top:24px}
html.plain .btn{background:#fff;box-shadow:var(--p-sh);transition:box-shadow .15s ease-out}
html.plain .btn:hover{background:#fff;transform:none;box-shadow:var(--p-sh-hover)}
@media(max-width:820px){html.plain .about{grid-template-columns:1fr;gap:40px}html.plain .pcard{max-width:420px}}

/* ---- praise: every quote at once, 3 across ---- */
html.plain .pr{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);overflow:visible}
html.plain .pr-stage{max-width:none;padding:0}
html.plain .pr-slides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;overflow:visible;padding:0;scroll-snap-type:none}
html.plain .pr-card{flex:none;padding:32px;border-radius:20px;background:#fff;box-shadow:var(--p-sh)}
html.plain .pr-card::before{display:none}
html.plain .pr-mark{font-size:48px;height:22px;color:var(--acc)}
html.plain .pr-card blockquote{margin-top:16px;font-size:16px;line-height:1.6;color:var(--fg)}
html.plain .pr-who{padding-top:24px}
html.plain .pr-who b{font-size:15px}
html.plain .pr-who > span > span{font-size:var(--p-small)}
html.plain .pr-av{width:40px;height:40px;box-shadow:none}
@media(max-width:1000px){html.plain .pr-slides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){html.plain .pr-slides{grid-template-columns:1fr;gap:16px}html.plain .pr-card{padding:24px}}

/* ---- footer: contact line + email, three link columns, a bottom bar ---- */
html.plain .footer{padding:var(--p-sec) 0 32px;background:var(--bg-2);border-top:1px solid var(--line);overflow:visible}
html.plain .f-cta{grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;padding-bottom:64px}
html.plain .f-cta h2{font-size:clamp(36px,5vw,56px);max-width:none;margin-top:16px}
html.plain .f-cta > div:first-child > p{font-size:var(--p-body);max-width:48ch;margin-top:20px}
html.plain .f-avail{margin-top:20px!important;font-size:14px}
html.plain .f-act{align-items:flex-end}
html.plain .f-mail{padding:16px 24px;background:var(--fg);box-shadow:none;transition:background-color .15s ease-out}
html.plain .f-mail::before{display:none}
html.plain .f-mail .v{color:#fff;font-size:16px}
html.plain .f-mail svg{color:#D9C4FB}
html.plain .f-mail:hover{background:#2c2636;transform:none}
html.plain .f-time{font-size:12px}
html.plain .f-cols{gap:32px;padding:40px 0 48px;border-top:1px solid var(--line)}
html.plain .f-col{gap:12px}
html.plain .f-h{font-size:12px;font-family:var(--mono);letter-spacing:.04em;color:var(--fg-3);margin-bottom:4px}
html.plain .f-col a{font-size:15px;color:var(--fg-2)}
html.plain .f-col a:hover{color:var(--acc-2)}
html.plain .f-b{padding-top:24px;font-size:var(--p-small)}
@media(max-width:860px){html.plain .f-cta{grid-template-columns:1fr;align-items:start;padding-bottom:48px}html.plain .f-act{align-items:flex-start}}
@media(max-width:560px){html.plain .f-cols{grid-template-columns:1fr 1fr}}