/* ============================================================
   ForgeLine Supplements - showcase demo
   Hand-drawn "engineer's conceptual sketch" aesthetic.
   Warm paper, ink linework, one burnt-orange accent.
   All card/button borders are rough SVG paths generated by
   sketch.js - no CSS borders anywhere on sketched elements.
   ============================================================ */

:root{
  --paper: hsl(40 30% 97%);
  --paper-deep: hsl(40 26% 92%);
  --ink: hsl(0 0% 10%);
  --ink-60: hsl(0 0% 10% / .64);
  --ink-35: hsl(0 0% 10% / .35);
  --accent: hsl(20 85% 45%);
  --accent-wash: hsl(20 85% 45% / .12);
  --display: "Caveat", cursive;
  --hand: "Architects Daughter", cursive;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --nav-h: 66px;
  --wrap: 1160px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background: hsl(20 85% 45% / .25); }
:focus-visible{ outline: 2px dashed var(--accent); outline-offset: 3px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:12px; top:-48px; z-index:200;
  background:var(--ink); color:var(--paper); padding:8px 14px;
  font:600 14px var(--sans); transition: top .2s;
}
.skip-link:focus{ top:12px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.hand{ font-family:var(--hand); }
.display{ font-family:var(--display); }
.accent{ color:var(--accent); }

/* letterized headline characters (per-letter hand-set rotation) */
.word{ display:inline-block; white-space:nowrap; }
.ltr{ display:inline-block; will-change:transform; }

/* ------------------------------------------------------------
   Sketch overlays (SVGs injected by sketch.js)
   ------------------------------------------------------------ */
[data-sketch]{ position:relative; }
[data-sketch] > .sk{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
/* lift content above the injected sketch svg; :where() keeps specificity
   at zero so children that position themselves (tape, coffee ring...) win */
:where([data-sketch] > .sk ~ *){ position:relative; z-index:1; }

/* scribble hachure fills (hover state on buttons) */
.sk .sk-fill{ opacity:0; }
.btn--primary .sk .sk-fill{ opacity:.28; }
.btn:hover .sk .sk-fill,
.btn:focus-visible .sk .sk-fill{ opacity:.55; }
.btn--ghost:hover .sk .sk-fill,
.btn--ghost:focus-visible .sk .sk-fill{ opacity:.4; }

/* scribbled-oval hover state on nav links */
.nav-link .sk .sk-oval{ opacity:0; }
.nav-link:hover .sk .sk-oval,
.nav-link:focus-visible .sk .sk-oval{ opacity:1; }

/* ------------------------------------------------------------
   Motion. Every draw-on/reveal effect lives inside this media
   query, so prefers-reduced-motion gets a fully static page.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  html.js .reveal.in-view{ opacity:1; transform:none; }

  /* draw-on strokes: paths carry pathLength="1" */
  html.js svg path.draw{ stroke-dasharray:1; stroke-dashoffset:1; transition: stroke-dashoffset .55s ease .3s; }
  html.js .in-view path.draw{ stroke-dashoffset:0; }

  html.js .nav-link .sk .sk-oval{ stroke-dasharray:1; stroke-dashoffset:1; }
  html.js .nav-link:hover .sk .sk-oval,
  html.js .nav-link:focus-visible .sk .sk-oval{ stroke-dashoffset:0; transition: stroke-dashoffset .3s ease; }

  html.js .circled .sk .sk-oval{ stroke-dasharray:1; stroke-dashoffset:1; transition: stroke-dashoffset .6s ease .35s; }
  html.js .in-view .circled .sk .sk-oval{ stroke-dashoffset:0; }

  .btn{ transition: transform .18s ease; }
  .btn:hover{ transform: rotate(-.5deg) scale(1.015); }
  .sk .sk-fill{ transition: opacity .22s ease; }
  .nav-link .sk .sk-oval{ transition: opacity .1s ease; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-block; padding:13px 26px;
  font:700 15px/1.2 var(--sans); letter-spacing:.01em;
  color:var(--ink); white-space:nowrap;
}
.btn--primary{ font-size:16px; padding:15px 30px; }
.btn--nav{ padding:9px 20px; font-size:14px; }
.btn--ghost{ padding:10px 18px; font-size:13.5px; }
.btn--ghost.added{ color:var(--accent); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font:600 15.5px var(--sans); color:var(--ink);
}
.link-arrow svg{ width:34px; height:20px; }
.link-arrow:hover{ color:var(--accent); }
.link-arrow:hover svg path{ stroke:var(--accent); }

/* ------------------------------------------------------------
   Navbar
   ------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--paper);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:0 28px;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.nav-rule{ position:absolute; left:0; right:0; bottom:-3px; height:6px; color:var(--ink); }
.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__logo svg{ width:44px; height:36px; color:var(--ink); }
.logo-type{ font:700 30px/1 var(--display); letter-spacing:.01em; transform:rotate(-1.2deg); }
.nav__links{ display:flex; align-items:center; gap:6px; }
.nav-link{
  padding:7px 13px; font:500 15px var(--sans); color:var(--ink);
}
.nav__right{ display:flex; align-items:center; gap:14px; }
.nav__burger{ display:none; padding:8px; }
.nav__burger svg{ width:26px; height:22px; color:var(--ink); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero{ position:relative; }
.hero__grid{
  max-width:var(--wrap); margin-inline:auto; padding:34px 28px 48px;
  min-height: calc(100vh - var(--nav-h));
  display:grid; grid-template-columns: 1.05fr .95fr;
  align-items:center; gap:36px;
}
.eyebrow{
  font:700 12px var(--sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-60); margin-bottom:14px;
}
.hero h1{
  font:700 clamp(2.9rem, 4.8vw, 4.6rem)/1.06 var(--display);
  letter-spacing:.005em; margin-bottom:18px;
}
.circled{ display:inline-block; padding:0 .12em; }
.hero__sub{
  font-size:1.16rem; color:var(--ink-60); max-width:44ch; margin-bottom:30px;
}
.hero__ctas{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.hero__note{
  margin-top:34px; display:flex; align-items:center; gap:10px;
  font:400 15px var(--hand); color:var(--ink-60); transform:rotate(-1deg);
}
.hero__note svg{ width:40px; height:26px; flex:none; }
.hero__art-wrap{ position:relative; }
.hero-art{ width:100%; max-width:530px; margin-inline:auto; height:auto; color:var(--ink); }

/* ------------------------------------------------------------
   Shared section chrome
   ------------------------------------------------------------ */
.section{ padding:84px 0; }
.section-head{ margin-bottom:44px; }
.section-head h2{
  font:700 clamp(2.4rem, 4.2vw, 3.4rem)/1.04 var(--display);
  margin:4px 0 6px;
}
.head-rule{ height:12px; width:200px; color:var(--ink); margin-top:2px; }
.section-head .lede{ color:var(--ink-60); max-width:54ch; margin-top:10px; }

/* ------------------------------------------------------------
   Product lineup
   ------------------------------------------------------------ */
.lineup-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px;
  position:relative;
}
.card{
  padding:26px 24px 24px; color:var(--ink);
  display:flex; flex-direction:column; gap:6px;
}
.card__art{ margin:-4px auto 10px; width:100%; max-width:236px; color:var(--ink); }
.card h3{ font:700 32px/1.05 var(--display); }
.card__fn{ font-size:14.5px; color:var(--ink-60); margin-bottom:14px; min-height:3.2em; }
.card__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; }
.price{ font:700 21px var(--sans); }
.fav-note{
  position:absolute; top:-56px; left:calc(33.33% + 30px); z-index:2;
  display:flex; align-items:flex-start; gap:4px;
  transform:rotate(-5deg); color:var(--accent); pointer-events:none;
}
.fav-note span{ font:700 24px/1 var(--display); letter-spacing:.02em; white-space:nowrap; }
.fav-note svg{ width:58px; height:52px; margin-top:10px; }

/* ------------------------------------------------------------
   Why ForgeLine
   ------------------------------------------------------------ */
.why-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:34px 28px; }
.why-item{ text-align:left; }
.why-item svg{ width:74px; height:74px; color:var(--ink); margin-bottom:14px; }
.why-item h3{ font:700 26px/1.1 var(--display); margin-bottom:6px; }
.why-item p{ font-size:14.5px; color:var(--ink-60); }

/* ------------------------------------------------------------
   Ingredients transparency sheet
   ------------------------------------------------------------ */
.ingredients .section-head{ text-align:center; }
.ingredients .head-rule{ margin-inline:auto; }
.ingredients .lede{ margin-inline:auto; }
.sheet{
  position:relative; max-width:980px; margin:56px auto 0;
  padding:44px 48px 52px; color:var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, hsl(0 0% 10% / .045) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, hsl(0 0% 10% / .035) 27px 28px),
    var(--paper);
}
.sheet__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:8px;
}
.sheet__title{ font:400 24px/1.2 var(--hand); letter-spacing:.02em; }
.sheet__meta{ font:400 14px var(--hand); color:var(--ink-60); }
.sheet__sub{ font:400 14.5px var(--hand); color:var(--ink-60); margin-bottom:26px; }
.ing-row{
  display:grid; grid-template-columns:minmax(0,1fr) 54px minmax(0,1.15fr);
  gap:4px 8px; align-items:center; padding:11px 0;
}
.ing-name{ display:flex; align-items:baseline; gap:12px; font:400 18px var(--hand); }
.ing-name b{ font-weight:400; }
.dotline{ flex:1; height:12px; opacity:.35; color:var(--ink); min-width:30px; }
.ing-dose{ font:600 15px var(--sans); white-space:nowrap; }
.ing-bracket{ width:48px; height:44px; color:var(--ink); opacity:.8; justify-self:center; }
.ing-note{ font-size:14.5px; color:var(--ink-60); }
.sheet__foot{
  margin-top:30px; font:400 16px var(--hand);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.sheet__foot .tested{ font-size:13.5px; color:var(--ink-60); }
.sheet__callout{
  position:absolute; top:-58px; right:14px; width:250px;
  transform:rotate(2.5deg); pointer-events:none;
}
.sheet__callout p{ font:600 20px/1.15 var(--display); color:var(--accent); }
.sheet__callout svg{ width:56px; height:46px; margin:2px 0 0 12px; }
.coffee-ring{ position:absolute; bottom:14px; right:22px; width:110px; height:110px; pointer-events:none; }
.sheet__ticks{ position:absolute; left:14px; top:42%; width:20px; height:90px; color:var(--ink); opacity:.4; }

/* ------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------ */
.notes-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px; }
.note{
  position:relative; padding:34px 26px 24px; color:var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, hsl(0 0% 10% / .09) 31px 32px),
    var(--paper);
}
.note:nth-child(1){ transform:rotate(-1.6deg); }
.note:nth-child(2){ transform:rotate(1.1deg); }
.note:nth-child(3){ transform:rotate(-.7deg); }
.note .tape{
  position:absolute; top:-15px; left:50%; width:96px; height:30px;
  transform:translateX(-50%) rotate(-3deg);
}
.note:nth-child(2) .tape{ transform:translateX(-50%) rotate(2.5deg); }
.note blockquote{ font:600 23px/1.28 var(--display); margin-bottom:14px; }
.note figcaption{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.note .who{ font:400 16px var(--hand); }
.note .stat{ font:600 12.5px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-60); }

/* ------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------ */
.final{ text-align:center; padding:96px 0; }
.final .rule{ height:12px; width:min(540px, 76%); margin-inline:auto; color:var(--ink); }
.final h2{
  font:700 clamp(2.6rem, 4.6vw, 3.8rem)/1.05 var(--display);
  margin:44px auto 26px; max-width:16ch;
}
.final .btn--primary{ margin-bottom:20px; }
.final .fine{ font-size:14px; color:var(--ink-60); margin-bottom:44px; }

/* ------------------------------------------------------------
   Footer (the one inverted section)
   ------------------------------------------------------------ */
.footer{ background:var(--ink); color:var(--paper); padding:64px 0 34px; }
.footer a:hover{ color:var(--accent); }
.footer__top{
  display:grid; grid-template-columns: 1.3fr repeat(4, minmax(0,.7fr)); gap:36px 28px;
  margin-bottom:52px;
}
.footer__brand svg{ width:46px; height:38px; color:var(--paper); margin-bottom:10px; }
.footer__brand .logo-type{ font-size:34px; display:inline-block; }
.footer__brand p{ font:400 14.5px var(--hand); color:hsl(40 30% 97% / .6); margin-top:8px; max-width:24ch; }
.footer__col h4{
  font:700 12px var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:hsl(40 30% 97% / .55); margin-bottom:14px;
}
.footer__col ul{ list-style:none; }
.footer__col li{ margin-bottom:9px; font-size:14.5px; }
.footer__news{ max-width:560px; margin-bottom:48px; }
.footer__news h4{ font:700 26px/1.1 var(--display); margin-bottom:4px; }
.footer__news p{ font-size:14px; color:hsl(40 30% 97% / .6); margin-bottom:16px; }
.news-form{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; }
.news-field{ flex:1; min-width:220px; color:var(--paper); padding-bottom:2px; }
.news-field input{
  width:100%; background:transparent; border:0; color:var(--paper);
  font:400 17px var(--hand); padding:6px 2px;
}
.news-field input::placeholder{ color:hsl(40 30% 97% / .45); }
.news-field input:focus{ outline:none; }
.btn--join{ color:var(--paper); padding:11px 26px; }
.news-msg{ font:400 15px var(--hand); color:var(--accent); margin-top:10px; min-height:1.4em; }
.footer__legal{
  display:flex; flex-direction:column; gap:6px;
  font-size:12.5px; color:hsl(40 30% 97% / .5);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1020px){
  .why-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .fav-note{ left:calc(33.33% + 8px); }
  .footer__top{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width: 880px){
  .nav__links{
    display:none; position:absolute; top:calc(100% + 6px); right:16px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); padding:18px 22px; min-width:210px;
    box-shadow: 0 10px 30px hsl(0 0% 10% / .12);
  }
  .nav.open .nav__links{ display:flex; }
  .nav__burger{ display:block; }
  .hero__grid{ grid-template-columns:1fr; min-height:0; padding-bottom:24px; }
  .hero h1{ max-width:none; }
  .hero-art{ max-width:440px; }
  .lineup-grid{ grid-template-columns:1fr; max-width:430px; margin-inline:auto; }
  .fav-note{ display:none; }
  .sheet{ padding:34px 24px 44px; }
  .ing-row{ grid-template-columns:1fr; gap:2px; padding:14px 0; }
  .ing-bracket{ display:none; }
  .sheet__callout{ position:static; width:auto; max-width:340px; margin:0 auto 18px; transform:rotate(-1deg); display:flex; gap:10px; align-items:center; }
  .sheet__callout svg{ margin:0; flex:none; }
  .notes-grid{ grid-template-columns:1fr; max-width:430px; margin-inline:auto; gap:40px; }
}
@media (max-width: 640px){
  .section{ padding:60px 0; }
  .why-grid{ grid-template-columns:1fr; }
  .anno-extra{ display:none; }
  .hero h1{ font-size:clamp(2.7rem, 12vw, 3.4rem); }
  .hero__ctas{ gap:18px; }
  .footer__top{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sheet__ticks{ display:none; }
}