/* ============================================================
   ThinkAthena — "The Open Workshop" web identity
   Per ThinkAthena-OpenWorkshop-Spec.md (Richa, 2026-07-09).
   Warm oatmeal canvas, paper cards, terracotta + sage,
   soft charcoal ink. Tactile, rounded, marker-annotated.
   ============================================================ */
:root{
  /* MASTER FONT SWITCH — flip to var(--font-recoleta) once licensed */
  --font-display: var(--font-fraunces);
  --font-fraunces:'Fraunces',Georgia,serif;   /* loaded w/ SOFT=100 axis: rounded, warm */
  --font-recoleta:'Recoleta',Georgia,serif;    /* commercial — license + self-host to use */
  --font-cooper:'Cooper Light',Georgia,serif;  /* commercial — license + self-host to use */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --canvas:#EDE2C2; --canvas-deep:#E5D8B2; --paper:#FFFDF8;
  --terracotta:#C85A48; --terracotta-deep:#B24C3B; --terracotta-tint:#F6E3DF;
  --sage:#7A8B76; --sage-deep:#64735F; --sage-tint:#E9EDE7;
  --ink:#2D2B2A; --muted:#6B6661;
  --line:rgba(45,43,42,.13);
  --radius:22px; --radius-lg:28px;
  --shadow:0 2px 5px rgba(45,43,42,.05),0 16px 40px rgba(45,43,42,.08);
  --link:var(--terracotta-deep); --strong:var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:var(--font-sans);background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.055'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") repeat;color:var(--muted);line-height:1.7;-webkit-font-smoothing:antialiased;font-size:16.5px;border-top:6px solid var(--terracotta)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--ink);text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--terracotta)}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--sage-deep)}

/* marker-swipe highlight — an acrylic swipe of sage */
.hl{position:relative;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M2 13 Q30 2 62 5 Q94 8 118 4 L117 23 Q88 28 56 26 Q26 24 3 27 Z' fill='%237A8B76' fill-opacity='.3'/%3E%3C/svg%3E") no-repeat center bottom 6%/100% 62%;
  padding:0 .18em}
.hl.terra{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 28' preserveAspectRatio='none'%3E%3Cpath d='M2 13 Q30 2 62 5 Q94 8 118 4 L117 23 Q88 28 56 26 Q26 24 3 27 Z' fill='%23C85A48' fill-opacity='.26'/%3E%3C/svg%3E")}

/* hand-drawn divider */
.hand-rule{height:14px;border:0;margin:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q50 4 100 7 T200 6 T300 9 T398 6' fill='none' stroke='%232D2B2A' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--canvas) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-size:19.5px;color:var(--ink)}
.brand svg{width:32px;height:32px;flex:none}
.brand .ai{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:.06em;margin-left:2px}
.nav-links{margin-left:auto;display:flex;gap:24px;font-size:14.5px;color:var(--muted);align-items:center}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:600;border-bottom:2.5px solid var(--terracotta);padding-bottom:2px}
.nav-links .cta{font-weight:600;font-size:14px;color:#FFF6F1;background:var(--terracotta);padding:11px 20px;border-radius:999px;
  box-shadow:0 3px 0 var(--terracotta-deep)}
.nav-links .cta:hover{background:var(--terracotta-deep);box-shadow:0 2px 0 var(--terracotta-deep);transform:translateY(1px)}
@media(max-width:760px){.nav-links{gap:14px;font-size:13px}.nav-links .cta{padding:8px 14px}}
@media(max-width:560px){.nav-links a:not(.cta):not(.active){display:none}}

/* ---------- hero: the open desk ---------- */
.hero{padding:92px 0 84px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;right:-180px;top:-200px;width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(122,139,118,.13),transparent 72%)}
.hero .wrap{position:relative;z-index:1}
.hero .eyebrow{color:var(--terracotta)}
.hero.sub{padding:66px 0 58px}
.hero h1{font-size:clamp(37px,5.6vw,64px);margin:20px 0 22px;max-width:18ch;color:var(--terracotta)}
.hero h1 em{color:var(--ink)}
.hero.sub h1{font-size:clamp(29px,4.4vw,46px)}
.hero p.lede{font-size:19px;color:var(--muted);max-width:57ch;margin-bottom:34px}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{font-family:var(--font-sans);font-weight:600;font-size:15.5px;padding:14px 28px;border-radius:999px;border:1.5px solid transparent;display:inline-block}
.btn.primary{background:var(--terracotta);color:#FFF6F1;box-shadow:0 3px 0 var(--terracotta-deep)}
.btn.primary:hover{background:var(--terracotta-deep);box-shadow:0 2px 0 var(--terracotta-deep);transform:translateY(1px)}
.btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn.ghost:hover{border-color:var(--muted)}
.meta{margin-top:38px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.meta b{color:var(--terracotta);font-weight:500}

/* ---------- sections: one continuous canvas, spaced generously ---------- */
section{padding:72px 0}
section h2{font-size:clamp(26px,3.6vw,40px);margin:16px 0 12px;max-width:26ch}
.dek{color:var(--muted);font-size:17px;max-width:64ch;margin-bottom:36px}
.dek b{color:var(--strong);font-weight:600}
.dek a,.arrow{color:var(--link);text-decoration:underline;text-decoration-color:rgba(200,90,72,.45);text-decoration-thickness:2px;text-underline-offset:3px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- floating paper cards ---------- */
.card{background:var(--paper);border:1px solid rgba(45,43,42,.06);border-radius:5px;padding:26px 24px;position:relative;
  box-shadow:0 1px 3px rgba(45,43,42,.09),0 10px 22px rgba(45,43,42,.09);
  background-image:linear-gradient(180deg,rgba(45,43,42,.05),rgba(45,43,42,0) 30px)}
.grid .card:nth-child(odd){transform:rotate(-.7deg)}
.grid .card:nth-child(even){transform:rotate(.55deg)}
.grid .card:nth-child(3n){transform:rotate(-.25deg)}
.card::before,.card::after{content:"";position:absolute;bottom:8px;width:42%;height:14px;z-index:-1;
  box-shadow:0 12px 10px rgba(45,43,42,.24)}
.card::before{left:10px;transform:skewY(-2.6deg) rotate(-2.4deg)}
.card::after{right:10px;transform:skewY(2.6deg) rotate(2.4deg)}
a.card{transition:transform .16s ease,box-shadow .16s ease;display:block}
a.card:hover{transform:translateY(-4px) rotate(0deg)!important;box-shadow:0 3px 8px rgba(45,43,42,.1),0 22px 40px rgba(45,43,42,.13)}
.card h3{font-size:21px;margin:12px 0 8px}
.card p{color:var(--muted);font-size:15px}
.card .read{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;color:var(--terracotta)}
.tag{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:5px 13px;background:var(--canvas);color:var(--muted);border:1px solid var(--line)}
.tag.ship{color:var(--terracotta-deep);background:var(--terracotta-tint);border-color:rgba(200,90,72,.25)}
.tag.build{color:var(--sage-deep);background:var(--sage-tint);border-color:rgba(122,139,118,.3)}
.tag.soon{color:var(--muted)}

/* featured (Bol) — the workbench card */
.featured{background:var(--paper);border:1px solid rgba(45,43,42,.07);border-radius:var(--radius-lg);
  padding:36px 34px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center;margin-bottom:18px;box-shadow:var(--shadow)}
@media(max-width:760px){.featured{grid-template-columns:1fr}}
.featured h3{font-size:clamp(24px,3vw,32px);margin:14px 0 10px}
.featured p{color:var(--muted);font-size:16px}
.featured .deva{background:var(--sage-tint);border-radius:var(--radius);padding:40px 20px 32px;
  font-family:var(--font-display);font-size:clamp(48px,7vw,80px);color:var(--ink);text-align:center;line-height:1.12;transform:rotate(.6deg)}
.featured .deva small{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;color:var(--sage-deep);margin-top:10px}

/* essay rows (research page) — paper sheets with hand-drawn separations */
.essay{background:var(--paper);border:1px solid rgba(45,43,42,.07);border-radius:var(--radius);padding:28px 28px 30px;box-shadow:var(--shadow);margin-bottom:26px}
.essay .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep)}
.essay h3{font-size:clamp(22px,2.8vw,30px);margin:12px 0 10px;max-width:32ch}
.essay p{color:var(--muted);font-size:16px;max-width:68ch}
.essay .read{margin-top:16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;color:var(--terracotta)}

/* principles — the syllabus ledger */
.principles{list-style:none;margin-top:30px;background:var(--paper);border:1px solid rgba(45,43,42,.07);border-radius:var(--radius-lg);
  padding:10px 30px;box-shadow:var(--shadow)}
.principles li{padding:22px 0;display:grid;grid-template-columns:250px 1fr;gap:18px}
.principles li + li{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3 Q60 1 120 3 T240 3 T398 3' fill='none' stroke='%232D2B2A' stroke-opacity='.18' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top center/100% 4px}
.principles b{font-family:var(--font-display);font-weight:500;font-size:19px;color:var(--ink)}
.principles b::before{content:"✓";display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:13px;color:var(--sage-deep);
  background:var(--sage-tint);width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;margin-right:12px;vertical-align:2px}
.principles span{color:var(--muted);font-size:15.5px}
@media(max-width:640px){.principles li{grid-template-columns:1fr;gap:6px}}

/* pillar strip — index cards on the desk */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media(max-width:860px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--paper);border:1px solid rgba(45,43,42,.06);border-radius:5px;padding:28px 20px 22px;box-shadow:0 1px 3px rgba(45,43,42,.09),0 10px 22px rgba(45,43,42,.09);position:relative}
.pillar:nth-child(odd){transform:rotate(-.6deg)}
.pillar:nth-child(even){transform:rotate(.5deg)}
.pillar::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2.5deg);
  width:76px;height:24px;background:rgba(226,220,205,.82);border-left:1px dashed rgba(45,43,42,.12);border-right:1px dashed rgba(45,43,42,.12);
  box-shadow:0 2px 4px rgba(45,43,42,.08)}
.pillar:nth-child(even)::before{transform:translateX(-50%) rotate(2deg);background:rgba(233,237,231,.85)}
.pillar .n{font-family:var(--font-mono);font-size:10.5px;color:var(--terracotta);letter-spacing:.14em}
.pillar h3{font-size:17.5px;margin:10px 0 8px}
.pillar p{font-size:13.5px;color:var(--muted)}

/* ---------- newsletter: the charcoal chalkboard ---------- */
.newsletter{background:#2C3A33;color:#C2CCC2}
.newsletter .inner{padding:68px 0}
.newsletter .eyebrow{color:#A8B5A4}
.newsletter h2{font-size:clamp(24px,3.2vw,36px);color:#F2EFE4}
.newsletter .dek{color:#C2CCC2}
.nl-form{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;max-width:540px}
.nl-form input[type=email]{flex:1;min-width:240px;background:#3A4A41;border:1px solid #4E5F55;border-radius:999px;
  color:#F7F5F0;font-family:var(--font-sans);font-size:15px;padding:14px 22px}
.nl-form input[type=email]::placeholder{color:#8F8A84}
.nl-form button{font-family:var(--font-sans);font-weight:600;font-size:15.5px;padding:14px 30px;border-radius:999px;border:0;cursor:pointer;
  background:var(--terracotta);color:#FFF6F1;box-shadow:0 3px 0 rgba(0,0,0,.3)}
.nl-form button:hover{background:#D4664F}
.nl-note{margin-top:14px;font-size:12.5px;color:#8F8A84}
.nl-note a{color:#A8B5A4}

/* ---------- footer ---------- */
footer{background:#2C3A33;border-top:1px solid #3E4E45;padding:26px 0 46px;font-size:13.5px;color:#8F8A84}
footer .row{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
footer a:hover{color:#F7F5F0}
footer .dot{color:#4C4946}


/* ---------- color-block variants (per Open Workshop mockup) ---------- */
.card.sage,.essay.sage{background:var(--sage);border-color:transparent}
.card.terra,.essay.terra{background:var(--terracotta);border-color:transparent}
.card.sage h3,.essay.sage h3,.card.terra h3,.essay.terra h3{color:#F7F5F0}
.card.sage p,.essay.sage p{color:rgba(247,245,240,.88)}
.card.terra p,.essay.terra p{color:rgba(255,246,241,.9)}
.card.sage .read,.essay.sage .read,.essay.sage .kicker{color:#EDE3C8}
.card.terra .read,.essay.terra .read,.essay.terra .kicker{color:#F8DCC9}
.card.sage .tag,.card.terra .tag{background:rgba(247,245,240,.14);color:#F7F5F0;border-color:rgba(247,245,240,.3)}
a.card.sage:hover,a.card.terra:hover{transform:translateY(-3px) rotate(-.3deg)}

/* Bol devanagari panel — terracotta block */
.featured .deva{background:var(--terracotta);color:#F7F5F0}
.featured .deva small{color:#F8DCC9}

/* ---------- hand-drawn annotation arrows ---------- */
.doodle{position:absolute;pointer-events:none;color:var(--ink);opacity:.55}
.doodle svg{width:100%;height:auto;display:block}
.doodle .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--muted);display:block;transform:rotate(-4deg);margin-bottom:4px}
@media(max-width:900px){.doodle{display:none}}


/* ---------- multicolor sticky-note pack (Post-it collection) ---------- */
.grid .card:not(.sage):not(.terra):nth-child(6n+1){background-color:#F6E27F} /* canary */
.grid .card:not(.sage):not(.terra):nth-child(6n+2){background-color:#F4CFC0} /* blush */
.grid .card:not(.sage):not(.terra):nth-child(6n+3){background-color:#D8E4C2} /* mint */
.grid .card:not(.sage):not(.terra):nth-child(6n+4){background-color:#C9DDE8} /* sky */
.grid .card:not(.sage):not(.terra):nth-child(6n+5){background-color:#F6D9AE} /* peach */
.grid .card:not(.sage):not(.terra):nth-child(6n+6){background-color:#C4E0D8} /* aqua */
.grid .card:not(.sage):not(.terra) .tag{background:rgba(255,253,248,.55);border-color:rgba(45,43,42,.14)}
.grid .card:not(.sage):not(.terra) p{color:#5B554E}
.grid .card:not(.sage):not(.terra) .read{color:var(--terracotta-deep)}


/* pillars join the Post-it pack (tape stays) */
.pillars .pillar:nth-child(6n+1){background-color:#F6E27F}
.pillars .pillar:nth-child(6n+2){background-color:#F4CFC0}
.pillars .pillar:nth-child(6n+3){background-color:#D8E4C2}
.pillars .pillar:nth-child(6n+4){background-color:#C9DDE8}
.pillars .pillar:nth-child(6n+5){background-color:#F6D9AE}
.pillars .pillar:nth-child(6n+6){background-color:#C4E0D8}
.pillars .pillar p{color:#5B554E}
.pillars .pillar .n{color:var(--terracotta-deep)}


/* ---------- ink draws itself (one-time, then rests) ---------- */
@media (prefers-reduced-motion: no-preference){
  .hl{background-position:left bottom 6%;background-size:0% 62%;animation:hl-sweep .7s ease-out .45s forwards}
  @keyframes hl-sweep{to{background-size:100% 62%}}
  .doodle svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease .15s}
  .doodle svg path + path{transition-duration:.35s;transition-delay:1s}
  .doodle .lbl{opacity:0;transition:opacity .5s ease 1.25s}
  .doodle.drawn svg path{stroke-dashoffset:0}
  .doodle.drawn .lbl{opacity:1}
}