/* =====================================================================
   Anna Guerrini — Portfolio
   Shared stylesheet. Built from the design tokens in CLAUDE.md and the
   look/feel finalised in reference/prototype_v5.html.
   Direction: cozy minimal editorial. Warm terracotta, serif with
   character, hairline rules, generous whitespace, hand-drawn doodles.
   ===================================================================== */

:root{
  /* color */
  --clay:        #924936;   /* primary — sampled from Anna's photo background */
  --clay-soft:   #a86048;
  --espresso:    #2b1a12;   /* text / dark surfaces */
  --bone:        #f7f0e6;   /* page background */
  --linen:       #efe4d4;   /* alt surface */
  --ochre:       #c98f3d;   /* accent — doodles, numerals, highlights */
  --ink-on-clay: #f6ebdd;   /* text on clay/espresso */
  --rule:        #d9c8b2;   /* hairline borders */
  --paper:       #fffdf9;   /* cards, inputs */
  --muted:       #7c6149;   /* secondary text/labels — bumped from brand #8a6f57
                               to clear WCAG AA on --bone for small text */
  --text-body:   #4c3a2c;   /* long-form body text */
  --text-soft:   #5c4636;   /* softer body text */

  /* type */
  --serif: "Fraunces", serif;             /* display: 300–600 + italics, opsz on */
  --sans:  "Instrument Sans", sans-serif; /* body / UI */
  --hand:  "Caveat", cursive;             /* doodle annotations ONLY */

  /* shape */
  --radius-card: 16px;
  --radius-pill: 999px;

  /* layout */
  --max: 1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bone);color:var(--espresso);overflow-x:hidden;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}

/* ---------- ACCESSIBILITY ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--clay);color:var(--ink-on-clay);
  font-family:var(--sans);font-size:14px;padding:12px 18px;border-radius:0 0 12px 0;text-decoration:none}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- HEADER + TAB BAR ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in srgb,var(--bone) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;gap:16px}
.logo{font-family:var(--serif);font-weight:500;font-style:italic;font-size:19px;color:var(--espresso);text-decoration:none;white-space:nowrap}
.tabs{display:flex;background:var(--linen);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:4px;gap:2px}
.tab{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--espresso);padding:8px 18px;border-radius:var(--radius-pill);transition:color .25s,background .3s;text-decoration:none;font-family:var(--sans);display:inline-block}
.tab:hover{color:var(--clay)}
.tab[aria-current="page"]{background:var(--clay);color:var(--ink-on-clay)}
.tab[aria-current="page"]:hover{color:var(--ink-on-clay)}

/* main page-load motion */
main{animation:pageIn .5s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- HOME: HERO ---------- */
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:130px 5vw 80px 6vw}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-bottom:26px;display:flex;align-items:center;gap:14px;opacity:0;animation:rise .8s .15s forwards}
.kicker::before{content:"";width:34px;height:1px;background:var(--clay)}
h1{font-family:var(--serif);font-weight:340;font-size:clamp(38px,4.8vw,68px);line-height:1.08;letter-spacing:-.015em;opacity:0;animation:rise .8s .3s forwards;max-width:15ch}
h1 em{font-style:italic;font-weight:420;color:var(--clay);position:relative;white-space:nowrap}
h1 em .underline{position:absolute;left:2%;bottom:-.12em;width:96%;height:.18em}
.hero-links{margin-top:44px;display:flex;align-items:center;gap:32px;flex-wrap:wrap;opacity:0;animation:rise .8s .5s forwards}
.btn{font-family:var(--serif);font-size:17px;font-weight:500;color:var(--ink-on-clay);background:var(--clay);text-decoration:none;padding:15px 32px;border-radius:var(--radius-pill);transition:background .25s,transform .25s;border:none;cursor:pointer;display:inline-block}
.btn:hover{background:var(--espresso);transform:translateY(-2px)}
.textlink{font-size:14px;letter-spacing:.06em;color:var(--espresso);text-decoration:none;border:none;border-bottom:1px solid var(--rule);padding:0 0 3px;transition:border-bottom-color .25s;cursor:pointer;background:none;font-family:var(--sans);display:inline-block}
.textlink:hover{border-bottom-color:var(--clay)}
.margin-note{margin-top:52px;font-family:var(--hand);font-size:clamp(17px,1.6vw,20px);color:var(--clay-soft);transform:rotate(-2deg);opacity:0;animation:rise 1s .9s forwards;display:inline-flex;align-items:flex-start;gap:6px}
.margin-note svg{width:clamp(30px,3vw,44px);height:auto;flex-shrink:0;margin-top:6px}
.hero-right{background:var(--clay);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:420px}
.hero-art{width:min(78%,460px);height:auto}
.hero-art .d1{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2s .6s ease forwards}
.hero-art .d2{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.4s 1.8s ease forwards}
.hero-art .d3{stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1s 2.6s ease forwards}
.hero-art .pop{opacity:0;animation:fadeIn .5s 3s forwards}
.hero-art .float{animation:floaty 5s ease-in-out infinite}
.hero-right .caption{position:absolute;bottom:24px;right:24px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(246,235,221,.6);writing-mode:vertical-rl}

/* mobile-only inline doodle, hidden on desktop */
.hero-doodle-inline{display:none}

/* ---------- HOME: FEATURED ---------- */
.featured{max-width:var(--max);margin:0 auto;padding:90px 6vw 30px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:10px}
.feat-card{border:1px solid var(--rule);border-radius:var(--radius-card);overflow:hidden;background:var(--paper);text-decoration:none;color:var(--espresso);display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(43,26,18,.13)}
.feat-visual{background:var(--linen);overflow:hidden}
.feat-visual img,.feat-visual svg{display:block;width:100%;height:auto}
.feat-body{padding:22px 24px 26px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:14px}
.feat-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,26px)}
.feat-body .fmeta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.feat-body .arrow{font-family:var(--serif);font-size:22px;color:var(--rule);transition:color .25s,transform .3s}
.feat-card:hover .arrow{color:var(--clay);transform:translateX(5px)}

/* ---------- HOME: PHILOSOPHY ---------- */
.philo{max-width:var(--max);margin:0 auto;padding:70px 6vw 100px}
.philo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:44px}
.philo-item{border-top:1px solid var(--rule);padding-top:26px}
.philo-item .pnum{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ochre)}
.philo-item h3{font-family:var(--serif);font-weight:420;font-size:clamp(21px,2vw,26px);margin:12px 0 14px}
.philo-item p{font-size:15px;line-height:1.75;color:var(--text-soft)}

/* ---------- MARQUEE STRIP ---------- */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;padding:14px 0}
.strip-track{display:flex;gap:56px;width:max-content;animation:scroll 38s linear infinite;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);align-items:center}
.strip-track i{font-style:normal;color:var(--clay);font-size:9px}
.strip:hover .strip-track{animation-play-state:paused}

/* ---------- QUOTE BAND ---------- */
.quote{background:var(--linen);border-top:1px solid var(--rule);padding:100px 6vw;text-align:center}
.quote p{font-family:var(--serif);font-weight:340;font-size:clamp(22px,2.8vw,34px);line-height:1.45;max-width:32ch;margin:0 auto}
.quote em{font-style:italic;color:var(--clay)}
.quote .sig{font-family:var(--hand);font-size:22px;color:var(--clay-soft);margin-top:26px;display:inline-block;transform:rotate(-2deg)}

/* ---------- GENERIC SECTIONS ---------- */
.section{max-width:var(--max);margin:0 auto;padding:110px 6vw 90px}
.section--first{padding-top:150px}
.sec-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.sec-label h1,.sec-label h2{font-family:var(--serif);font-weight:360;font-size:clamp(30px,3.4vw,44px)}
.sec-label span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- WORK ---------- */
.project{border-top:1px solid var(--rule);padding:44px 0;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.project:last-of-type{border-bottom:1px solid var(--rule)}
.proj-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.project h2,.project h3{font-family:var(--serif);font-weight:380;font-size:clamp(26px,3vw,40px);letter-spacing:-.01em;line-height:1.1}
.proj-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ptag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:5px 13px;background:var(--paper)}
.metrics{display:flex;gap:44px;margin-top:30px;flex-wrap:wrap}
.metric .num{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.2vw,44px);color:var(--clay);line-height:1}
.metric .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.proj-cta{margin-top:28px;display:inline-block}
.proj-visual{border-radius:var(--radius-card);overflow:hidden;background:var(--linen);border:1px solid var(--rule);transition:transform .35s ease,box-shadow .35s ease}
.project:hover .proj-visual{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 22px 48px rgba(43,26,18,.14)}
.proj-visual img,.proj-visual svg,.proj-visual .ph{display:block;width:100%;height:auto}
.proj-visual a{display:block}
.ph{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-family:var(--hand);font-size:20px;color:var(--clay-soft)}
/* breathing room for wide/short chart visuals (e.g. Sentiment Monitor) */
.proj-visual.pad,.cs-visual .frame.pad{padding:6%}

/* ---------- CASE STUDY ---------- */
.cs-hero{max-width:var(--max);margin:0 auto;padding:150px 6vw 40px}
.cs-hero .proj-kicker{margin-bottom:16px}
.cs-hero h1{font-family:var(--serif);font-weight:360;font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.015em;max-width:20ch;opacity:1;animation:none}
.cs-hero .lede{font-size:clamp(17px,1.7vw,20px);line-height:1.65;color:var(--text-soft);max-width:52ch;margin-top:22px}
.cs-hero .metrics{margin-top:36px}
.cs-visual{max-width:var(--max);margin:20px auto 0;padding:0 6vw}
.cs-visual .frame{border-radius:var(--radius-card);overflow:hidden;background:var(--linen);border:1px solid var(--rule)}
.cs-visual .frame img,.cs-visual .frame svg,.cs-visual .frame .ph{display:block;width:100%;height:auto}
.cs-body{max-width:var(--max);margin:0 auto;padding:70px 6vw 40px}
.cs-block{border-top:1px solid var(--rule);padding:44px 0;display:grid;grid-template-columns:.32fr .68fr;gap:40px}
.cs-block:last-of-type{border-bottom:1px solid var(--rule)}
.cs-block .cs-eyebrow{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ochre)}
.cs-block h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.4vw,30px);margin-top:8px}
.cs-block .cs-copy p{font-size:16px;line-height:1.8;color:var(--text-body);margin-bottom:16px}
.cs-block .cs-copy p:last-child{margin-bottom:0}
.placeholder{border:1px dashed var(--clay-soft);border-radius:12px;background:color-mix(in srgb,var(--linen) 60%,transparent);
  padding:20px 22px;font-size:15px;line-height:1.7;color:var(--text-soft)}
.placeholder .tag{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay);background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:4px 12px;margin-bottom:10px}
.cs-next{max-width:var(--max);margin:0 auto;padding:20px 6vw 60px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--rule)}
.cs-next a{font-size:14px;letter-spacing:.04em;color:var(--espresso);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;transition:border-color .25s,color .25s}
.cs-next a:hover{color:var(--clay);border-color:var(--clay)}
.cs-next .next{color:var(--clay);font-family:var(--serif);font-style:italic}

/* --- long-form narrative case study --- */
.cs-narrative{max-width:900px;margin:0 auto;padding:20px 6vw 10px}
.cs-sec{margin-top:76px}
.cs-sec:first-child{margin-top:20px}
.cs-sec > .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.cs-sec > .eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.cs-sec h2{font-family:var(--serif);font-weight:380;font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.01em;margin-bottom:20px}
.cs-sec h3{font-family:var(--serif);font-weight:440;font-size:clamp(19px,2vw,23px);margin:30px 0 8px}
.cs-sec p{font-size:17px;line-height:1.8;color:var(--text-body);margin-bottom:18px}
.cs-sec p:last-child{margin-bottom:0}
.cs-sec p strong{color:var(--espresso);font-weight:500}
.cs-sec code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--linen);border:1px solid var(--rule);border-radius:6px;padding:1px 7px;color:var(--clay)}
.cs-goals{list-style:none;counter-reset:g;margin-top:10px}
.cs-goals li{counter-increment:g;position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--rule);font-size:16px;line-height:1.6;color:var(--text-body)}
.cs-goals li:last-child{border-bottom:1px solid var(--rule)}
.cs-goals li::before{content:"0" counter(g);position:absolute;left:0;top:16px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ochre)}
.cs-list{list-style:none;margin-top:14px}
.cs-list li{position:relative;padding:16px 0 16px 26px;border-top:1px solid var(--rule);font-size:16px;line-height:1.7;color:var(--text-body)}
.cs-list li:last-child{border-bottom:1px solid var(--rule)}
.cs-list li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:2px;background:var(--clay)}
.cs-list li strong{color:var(--espresso);font-weight:500}
.cs-pull{font-family:var(--serif);font-style:italic;font-weight:340;font-size:clamp(21px,2.4vw,28px);line-height:1.4;color:var(--espresso);border-left:2px solid var(--clay);padding-left:24px;margin:30px 0}
/* handwritten, hand-circled pull quote (doodle moment) */
.hand-pull{position:relative;font-family:var(--hand);font-size:clamp(24px,3.2vw,38px);line-height:1.3;color:var(--clay);text-align:center;max-width:16ch;margin:44px auto;padding:20px 14px}
.hand-pull svg{position:absolute;inset:-8px -6px;width:calc(100% + 12px);height:calc(100% + 16px);overflow:visible;pointer-events:none}
.hand-pull svg path{stroke:var(--ochre);stroke-width:2.5;fill:none;stroke-linecap:round}
/* problem → decision → outcome */
.pdo{border-top:1px solid var(--rule);padding:34px 0}
.pdo:last-of-type{border-bottom:1px solid var(--rule)}
.pdo .pnum{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ochre)}
.pdo h3{font-family:var(--serif);font-weight:440;font-size:clamp(20px,2.2vw,25px);margin:8px 0 4px}
.pdo p{font-size:16px;line-height:1.75;color:var(--text-body);margin:0}
.pdo .row{margin-top:16px}
.pdo .row .k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:5px}
/* media placeholders (Anna supplies real media) */
.media-ph{border:1px dashed var(--clay-soft);border-radius:var(--radius-card);background:color-mix(in srgb,var(--linen) 55%,transparent);
  padding:26px 24px;color:var(--text-soft);margin:26px 0;text-align:center}
.media-ph .tag{display:inline-block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:4px 12px;margin-bottom:12px}
.media-ph .desc{font-size:14px;line-height:1.65;max-width:48ch;margin:0 auto}
.media-ph.video{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center}
.media-ph .play{width:64px;height:64px;margin-bottom:16px}
.cs-wide{max-width:var(--max);margin:0 auto;padding:20px 6vw}
/* inline doodles */
.doodle-note{font-family:var(--hand);font-size:clamp(17px,1.7vw,21px);color:var(--clay-soft);display:inline-flex;align-items:center;gap:8px;transform:rotate(-2deg)}
.doodle-note svg{width:clamp(30px,3vw,42px);height:auto;flex-shrink:0}
.doodle-flow{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:6px 0 4px;font-family:var(--hand);font-size:clamp(19px,2vw,24px);color:var(--clay)}
.doodle-flow svg{width:clamp(60px,8vw,110px);height:auto}
.doodle-flow .gap{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cs-fig{margin:28px 0}
.figcap{display:block;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.cs-doodle-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin:36px 0 6px}
.cs-doodle-wrap svg{width:min(240px,72%);height:auto}
.cs-doodle-note{font-family:var(--hand);font-size:clamp(17px,1.8vw,21px);color:var(--clay-soft);transform:rotate(-2deg)}
.cs-close{font-family:var(--serif);font-style:italic;font-weight:340;font-size:clamp(20px,2.4vw,28px);line-height:1.4;color:var(--clay);text-align:center;max-width:26ch;margin:20px auto 6px}
.cs-sign{font-family:var(--hand);font-size:24px;color:var(--clay-soft);display:block;text-align:center;transform:rotate(-2deg);margin-bottom:20px}
.tradeoff-scale{display:block;width:clamp(70px,9vw,120px);height:auto;margin:6px auto 0;color:var(--ochre)}

@media (max-width:900px){
  .cs-hero{padding-top:140px}
  .cs-block{grid-template-columns:1fr;gap:16px}
  .cs-sec{margin-top:60px}
}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.about-sticky{position:sticky;top:110px}
.about-photo{background:var(--clay);border-radius:var(--radius-card);overflow:hidden;position:relative}
.about-photo img{display:block;width:100%;height:auto}
.about-photo .photo-note{position:absolute;top:5%;right:6%;font-family:var(--hand);font-size:clamp(16px,1.8vw,20px);color:var(--ink-on-clay);transform:rotate(3deg)}
.about-body h1,.about-body h2{font-family:var(--serif);font-weight:360;font-size:clamp(30px,3.2vw,42px);margin-bottom:24px}
.about-body p{font-size:16px;line-height:1.8;color:var(--text-body);margin-bottom:18px}
.about-body p strong{color:var(--espresso);font-weight:500}
.sub-label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin:52px 0 20px;display:flex;align-items:center;gap:14px}
.sub-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.philosophy{font-family:var(--serif);font-style:italic;font-weight:340;font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--espresso);border-left:2px solid var(--clay);padding-left:24px}
.philosophy .who{display:block;font-family:var(--sans);font-style:normal;font-size:13px;color:var(--muted);margin-top:12px;letter-spacing:.06em}
.xp{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.xp:last-of-type{border-bottom:none}
.xp .role{font-family:var(--serif);font-weight:420;font-size:18px}
.xp .co{font-size:14px;color:var(--text-soft);margin-top:3px}
.xp .when{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);align-self:center;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:13px;color:var(--espresso);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:7px 16px;background:var(--paper);transition:border-color .25s,transform .2s}
.chip:hover{border-color:var(--clay);transform:translateY(-2px)}
.cert{display:grid;grid-template-columns:1fr auto;gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15px}
.cert:last-of-type{border-bottom:none}
.cert .cname{font-weight:500}
.cert .cissuer{color:var(--muted);font-size:13px;margin-top:2px}
.cert .cyear{font-size:12px;letter-spacing:.1em;color:var(--muted);align-self:center}
.cert .ongoing{color:var(--clay);font-weight:500}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.contact-left h1,.contact-left h2{font-family:var(--serif);font-weight:340;font-size:clamp(36px,4.4vw,60px);line-height:1.1}
.contact-left h1 em,.contact-left h2 em{font-style:italic;color:var(--clay)}
.contact-left p{margin-top:24px;font-size:16px;line-height:1.75;color:var(--text-soft);max-width:38ch}
.socials{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.socials a{font-size:14px;letter-spacing:.06em;color:var(--espresso);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;width:fit-content;transition:border-color .25s,color .25s}
.socials a:hover{color:var(--clay);border-color:var(--clay)}
form{display:flex;flex-direction:column;gap:16px}
.field label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;font-family:var(--sans);font-size:15px;color:var(--espresso);outline:none;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus{border-color:var(--clay);box-shadow:0 0 0 3px rgba(146,73,54,.12)}
/* honeypot — hidden from humans, catches bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .btn{width:fit-content;margin-top:6px}
.form-success{background:var(--linen);border:1px solid var(--rule);border-radius:var(--radius-card);padding:28px 30px;font-size:16px;line-height:1.7;color:var(--text-body)}
.form-success strong{font-family:var(--serif);font-weight:420;color:var(--clay)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--rule);padding:34px 6vw;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:var(--max);margin:0 auto}
footer span{font-size:13px;color:var(--muted)}
footer .hand{font-family:var(--hand);font-size:18px;color:var(--clay-soft)}

/* ---------- KEYFRAMES ---------- */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.draw{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.1s 1s ease forwards}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  main{opacity:1;transform:none}
  .kicker,h1,.hero-links,.margin-note{opacity:1}
  .hero-art .d1,.hero-art .d2,.hero-art .d3,.draw{stroke-dashoffset:0}
  .hero-art .pop{opacity:1}
}

/* ---------- SCROLL-REVEAL (progressive enhancement) ---------- */
/* Hidden state applies only when JS is active (.js on <html>); no-JS shows everything. */
/* Uses the standalone `translate` property (not `transform`) so elements with
   their own transform — the breakout trio, tilted doodles — keep it. */
.js .reveal{opacity:0;translate:0 20px;transition:opacity .7s ease,translate .75s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;translate:none}
.js .reveal[data-delay="1"]{transition-delay:.08s}
.js .reveal[data-delay="2"]{transition-delay:.16s}
.js .reveal[data-delay="3"]{transition-delay:.24s}
/* line-art doodles draw themselves when revealed */
.js .reveal-draw path,.js .reveal-draw line,.js .reveal-draw circle{transition:stroke-dashoffset 1.15s ease}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;translate:none;transition:none}
  .js .reveal-draw path,.js .reveal-draw line,.js .reveal-draw circle{stroke-dashoffset:0!important;transition:none}
}

/* ---------- CASE-STUDY VIDEO ---------- */
.cs-video{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--rule);background:#0f0d1a;aspect-ratio:16/9}
.cs-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#0f0d1a}
.cs-video__play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  cursor:pointer;border:none;color:var(--ink-on-clay);font-family:var(--hand);font-size:clamp(18px,2vw,22px);
  background:radial-gradient(circle at 50% 42%,rgba(41,26,18,.12),rgba(15,13,26,.5));transition:opacity .3s}
.cs-video__play:hover{opacity:.88}
.cs-video__play svg{width:clamp(58px,7vw,82px);height:auto}
.cs-video.playing .cs-video__play{opacity:0;pointer-events:none}

/* ---------- iPHONE FRAME + BEFORE/AFTER ---------- */
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:28px 0 6px;align-items:start}
.cs-duo .cap{display:block;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.iphone{position:relative;display:block;width:min(340px,94%);margin:0 auto;background:var(--espresso);border-radius:42px;padding:12px;
  box-shadow:0 24px 54px rgba(43,26,18,.2);border:1px solid rgba(43,26,18,.35);transition:transform .3s ease,box-shadow .3s ease}
a.iphone:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(43,26,18,.26)}
.iphone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:36%;height:20px;background:var(--espresso);border-radius:0 0 14px 14px;z-index:2}
.iphone__screen{position:relative;border-radius:30px;overflow:hidden;background:var(--linen);aspect-ratio:9/19.5}
.iphone__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* placeholder shown behind the image — visible only until Anna supplies the frame */
.iphone__screen .drop,.frame-ph .drop{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--hand);font-size:16px;color:var(--clay-soft);padding:0 20px;text-align:center;line-height:1.5}
.frame-ph{position:relative;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--rule);background:var(--linen);aspect-ratio:4/3}
.frame-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* AFTER frames break out of the reading column so the screens stay legible */
.cs-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:34px 0 6px;align-items:start;
  position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
.cs-trio .cap{display:block;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:14px}
/* natural-ratio content screenshot in a simple framed card (no crop) */
.shot{display:block;border:1px solid var(--rule);border-radius:var(--radius-card);overflow:hidden;background:var(--linen)}
.shot img{display:block;width:100%;height:auto}
.shot--narrow{max-width:480px;margin-inline:auto}
.shot--phone{max-width:360px;margin-inline:auto}
/* Storyteller → product-family branching doodle */
.cs-branch{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:36px 0 8px}
.cs-branch__root{font-family:var(--hand);font-size:clamp(20px,2.2vw,26px);color:var(--clay);border:2px solid var(--ochre);border-radius:var(--radius-pill);padding:10px 22px;white-space:nowrap}
.cs-branch__lines{width:clamp(56px,9vw,110px);height:auto;color:var(--ochre);flex-shrink:0}
.cs-branch__list{list-style:none;display:flex;flex-direction:column;gap:7px}
.cs-branch__list li{font-family:var(--hand);font-size:clamp(17px,1.8vw,21px);color:var(--clay-soft);line-height:1.2}
.cs-branch__list li em{font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:8px;vertical-align:middle}
@media (max-width:560px){.cs-branch{flex-direction:column}.cs-branch__lines{transform:rotate(90deg);width:60px}}

/* work: coming-soon project */
.project--soon{opacity:.85}
.proj-soon{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);border:1px solid var(--clay);border-radius:var(--radius-pill);padding:5px 13px;background:transparent;display:inline-block;margin-bottom:12px}
.proj-visual--soon{position:relative}
.proj-visual--soon::after{content:"Coming soon";position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-on-clay);background:var(--clay);border-radius:var(--radius-pill);padding:6px 14px}
/* wide screenshot breaks out of the reading column */
.shot--wide{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)}
/* editorial spec table */
.cs-table-wrap{overflow-x:auto;margin:26px 0 8px;border-top:1px solid var(--rule)}
.cs-table{width:100%;border-collapse:collapse;font-size:15px;min-width:540px}
.cs-table th,.cs-table td{text-align:left;padding:14px 18px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.cs-table thead th{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);font-weight:500}
.cs-table tbody th{font-family:var(--serif);font-weight:440;color:var(--espresso);white-space:nowrap}
.cs-table td{color:var(--text-body)}
.cs-table tbody tr:last-child th,.cs-table tbody tr:last-child td{border-bottom:none}
.cs-table .em{color:var(--clay);font-weight:500}
@media (max-width:1000px){.cs-trio{grid-template-columns:repeat(2,1fr);width:min(760px,94vw)}}
@media (max-width:640px){
  .cs-duo{grid-template-columns:1fr;gap:36px}
  .cs-trio{grid-template-columns:1fr;gap:36px;left:auto;transform:none;width:auto;max-width:340px;margin-inline:auto}
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .nav{flex-wrap:wrap;justify-content:center;padding:12px 4vw}
  .logo{width:100%;text-align:center;margin-bottom:8px}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-left{padding:170px 7vw 60px;text-align:center;align-items:center}
  .kicker{justify-content:center}
  h1{margin:0 auto}
  .hero-links{justify-content:center}
  .margin-note{margin-top:36px}
  .hero-right{display:none}
  .hero-doodle-inline{display:block;width:min(230px,60%);margin:6px auto 22px;opacity:0;animation:fadeIn 1s .7s forwards}
  .hero-doodle-inline .d1{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2s .8s ease forwards}
  .hero-doodle-inline .pop{opacity:0;animation:fadeIn .5s 2.6s forwards}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .about-sticky{position:static}
  .project{grid-template-columns:1fr;gap:24px}
  .proj-visual{order:-1}
  .metrics{gap:30px}
  .section{padding:80px 7vw 60px}
  .section--first{padding-top:150px}
  .feat-grid{grid-template-columns:1fr}
  .philo-grid{grid-template-columns:1fr;gap:28px}
  .featured{padding:70px 7vw 20px}
  .philo{padding:50px 7vw 80px}
}
@media (max-width:480px){
  .tabs{width:100%;justify-content:space-between}
  .tab{padding:8px 12px;font-size:12px}
  .hero-left{padding-top:185px}
  .margin-note{transform:none}
  .xp,.cert{grid-template-columns:1fr}
  .xp .when,.cert .cyear{text-align:left}
}