/* =================================================================
   PILGUD — shared styles for sub-pages (/tood, case studies, legal…).
   The homepage keeps its own self-contained <style>; this is the base
   for every other page so the design stays consistent without a build.
   ================================================================= */

:root{
  --ink:#0e0e12; --cream:#f2ede3;
  --cream-2:rgba(242,237,227,.74); --cream-3:rgba(242,237,227,.52); --cream-4:rgba(242,237,227,.34);
  --line:rgba(242,237,227,.13); --line-2:rgba(242,237,227,.22);
  --ember:#f2623a; --ember-soft:#ff8a5c; --ember-deep:#b8431f; --ember-glow:rgba(242,98,58,.55);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans); font-optical-sizing:auto;
  font-size:clamp(1rem,.96rem + .3vw,1.1rem); line-height:1.6;
  color:var(--cream); background-color:var(--ink);
  background-image:radial-gradient(125% 80% at 50% -12%, #181320 0%, rgba(24,19,32,0) 52%);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.vignette{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 58% at 50% 0%, rgba(242,98,58,.06), rgba(242,98,58,0) 55%),
             radial-gradient(125% 125% at 50% 42%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%); }
.grain{ position:fixed; inset:-60%; z-index:9990; pointer-events:none; width:220%; height:220%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; mix-blend-mode:overlay; animation:grain 7s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,2%)} 100%{transform:translate(0,0)} }

::selection{ background:var(--ember); color:#1a0d07; }
:focus-visible{ outline:2px solid var(--ember); outline-offset:4px; border-radius:3px; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
.skip{ position:absolute; left:14px; top:-64px; z-index:10000; background:var(--cream); color:#111;
  padding:.6rem 1rem; border-radius:8px; font-weight:600; transition:top .2s var(--ease); }
.skip:focus{ top:14px; }

/* ---------- layout ---------- */
.wrap{ width:min(90%, var(--wrap)); margin-inline:auto; position:relative; z-index:1; }
main{ position:relative; z-index:1; }
.section{ position:relative; padding-block:clamp(3rem,7vw,5rem); }
.accent{ color:var(--ember); }

/* ---------- header (solid from the start — sub-pages have no hero) ---------- */
.site{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(1rem,2.5vw,1.4rem) clamp(1.1rem,5vw,2.4rem);
  background:rgba(14,14,18,.72); backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%); border-bottom:1px solid var(--line); }
.wordmark{ font-family:var(--display); font-weight:600; font-variation-settings:'SOFT' 40;
  font-size:1.42rem; letter-spacing:-.01em; color:var(--cream); display:inline-flex; align-items:baseline; gap:.16em; }
.wordmark .dot{ width:.32em; height:.32em; border-radius:50%; background:var(--ember); display:inline-block;
  box-shadow:0 0 14px var(--ember-glow); transform:translateY(-.02em); }
.cta-mini{ font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--cream);
  border:1px solid var(--line-2); padding:.62rem 1.05rem; border-radius:100px; min-height:44px;
  display:inline-flex; align-items:center; transition:border-color .3s var(--ease), color .3s var(--ease); }
.cta-mini:hover{ border-color:var(--ember); color:var(--ember); }

/* primary nav — inline links with an ember underline; hidden on small screens */
.nav{ display:none; gap:clamp(1.4rem,2.6vw,2.4rem); align-items:center; }
.nav__link{ font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  color:var(--cream-2); position:relative; padding:.4rem 0; transition:color .3s var(--ease); }
.nav__link::after{ content:""; position:absolute; left:0; right:100%; bottom:.02rem; height:1px; background:var(--ember); transition:right .35s var(--ease); }
.nav__link:hover, .nav__link:focus-visible, .nav__link.is-active, .nav__link[aria-current]{ color:var(--cream); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after, .nav__link[aria-current]::after{ right:0; }
@media (min-width:760px){ .nav{ display:flex; } }

/* ---------- buttons ---------- */
.btn{ font-family:var(--sans); font-weight:700; font-size:1.02rem; display:inline-flex; align-items:center; gap:.7em;
  padding:1.05rem 1.7rem; min-height:56px; background:var(--ember); color:#1a0d07; border-radius:100px; border:0;
  letter-spacing:.005em; cursor:pointer; box-shadow:0 16px 44px -14px var(--ember-glow), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .35s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease); }
.btn:hover{ transform:translateY(-2px); background:var(--ember-soft);
  box-shadow:0 22px 56px -12px var(--ember-glow), inset 0 0 0 1px rgba(255,255,255,.2); }
.btn:active{ transform:translateY(0); }
.btn .arr{ width:18px; height:18px; transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translate(3px,-3px); }

/* ---------- breadcrumbs ---------- */
.crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-size:.82rem; letter-spacing:.04em; color:var(--cream-3); padding-block:clamp(1.5rem,4vw,2.4rem) 0; }
.crumbs a:hover{ color:var(--ember); }
.crumbs .sep{ color:var(--cream-4); }
.crumbs [aria-current]{ color:var(--cream-2); }

/* ---------- shared type ---------- */
.eyebrow{ font-family:var(--sans); font-size:.78rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; color:var(--cream-3); display:inline-flex; align-items:center; gap:.85em; }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--ember); flex:none; }

/* ---------- /tood hub ---------- */
.hub__head{ max-width:46ch; }
.hub__h{ font-family:var(--display); font-weight:470; font-variation-settings:'SOFT' 38;
  font-size:clamp(2.4rem,1.6rem + 4vw,4.6rem); line-height:1; letter-spacing:-.025em; margin:clamp(1rem,2vw,1.4rem) 0 0; }
.hub__lede{ margin-top:clamp(1.2rem,3vw,1.8rem); color:var(--cream-2); max-width:48ch;
  font-family:var(--display); font-weight:380; font-variation-settings:'SOFT' 40;
  font-size:clamp(1.2rem,1rem + 1vw,1.6rem); line-height:1.3; }
.cases2{ margin-top:clamp(2.6rem,6vw,4rem); display:grid; gap:clamp(1.4rem,3vw,2rem); }
@media (min-width:760px){ .cases2{ grid-template-columns:repeat(2,1fr); } }
.case2{ appearance:none; cursor:pointer; color:inherit; font:inherit;
  background:rgba(242,237,227,.03); border:1px solid var(--line); border-radius:18px;
  padding:clamp(1.7rem,3.6vw,2.5rem); display:flex; flex-direction:column; gap:.55rem;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.case2:hover{ border-color:var(--ember); background:rgba(242,98,58,.05); transform:translateY(-3px); }
.case2__name{ font-family:var(--sans); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.2em; color:var(--cream-3); }
.case2__num{ font-family:var(--display); font-weight:560; font-variation-settings:'SOFT' 30;
  font-size:clamp(2.6rem,1.6rem+5vw,4.4rem); line-height:.95; color:var(--ember); letter-spacing:-.03em; }
.case2__sub{ font-family:var(--sans); color:var(--cream-2); font-size:1rem; }
.case2__open{ margin-top:.5rem; font-family:var(--sans); font-weight:600; font-size:.92rem; color:var(--cream); transition:color .3s var(--ease); }
.case2:hover .case2__open{ color:var(--ember); }

/* ---------- case study article ---------- */
.case{ max-width:760px; }
.case__kicker{ margin-bottom:1rem; }
.case__title{ font-family:var(--display); font-weight:470; font-variation-settings:'SOFT' 38;
  font-size:clamp(2.6rem,1.8rem + 4vw,5rem); line-height:1.02; letter-spacing:-.025em; }
.case__num{ font-family:var(--display); font-weight:560; font-variation-settings:'SOFT' 30;
  font-size:clamp(3rem,2rem + 5vw,6rem); color:var(--ember); line-height:1; letter-spacing:-.03em; margin:.6rem 0 .2rem; }
.case__meta{ color:var(--cream-3); font-size:.95rem; letter-spacing:.02em; }
.case__body{ margin-top:clamp(2.4rem,5vw,3.4rem); display:grid; gap:clamp(1.8rem,4vw,2.6rem); }
.case__block .lbl{ display:block; font-family:var(--sans); font-size:.74rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--cream-3); margin-bottom:.5rem; }
.case__block p{ color:var(--cream-2); line-height:1.7; font-size:1.1rem; max-width:64ch; }
.case__block.is-result{ border-left:2px solid var(--ember); padding-left:clamp(1rem,2.5vw,1.6rem); }
.case__note{ color:var(--cream-3); font-style:italic; }
.case__cta{ margin-top:clamp(2.6rem,6vw,4rem); padding-top:clamp(2.2rem,5vw,3rem); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 1.6rem; }
.case__cta p{ font-family:var(--display); font-weight:460; font-variation-settings:'SOFT' 38;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem); line-height:1.1; letter-spacing:-.02em; max-width:18ch; }

/* ---------- legal / prose ---------- */
.legal{ max-width:680px; }
.legal h1{ font-family:var(--display); font-weight:470; font-variation-settings:'SOFT' 38;
  font-size:clamp(2.2rem,1.6rem + 3vw,3.6rem); line-height:1.04; letter-spacing:-.02em; margin-bottom:.4rem; }
.legal .updated{ color:var(--cream-3); font-size:.9rem; margin-bottom:clamp(1.8rem,4vw,2.6rem); }
.legal h2{ font-family:var(--display); font-weight:460; font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);
  line-height:1.1; letter-spacing:-.015em; margin:clamp(1.8rem,4vw,2.4rem) 0 .7rem; }
.legal p{ color:var(--cream-2); line-height:1.7; margin-bottom:1rem; max-width:64ch; }
.legal ul{ color:var(--cream-2); line-height:1.7; margin:0 0 1rem 1.2rem; max-width:64ch; }
.legal li{ margin-bottom:.4rem; }
.legal a{ color:var(--ember); text-decoration:underline; }

/* ---------- footer ---------- */
.foot{ margin-top:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--line); padding:2rem 0 clamp(2.5rem,5vw,3.5rem);
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:center; align-items:center;
  font-size:.92rem; color:var(--cream-3); letter-spacing:.01em; }
.foot .sep{ color:var(--cream-4); }
.foot a:hover{ color:var(--ember); }

@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } *,*::before,*::after{ transition-duration:.001ms !important; } }