/* ==========================================================================
   Nest Coffee — brand tokens + base styles
   Single source of truth for colour, type, spacing, radius, shadow, motion.
   Extracted from the Nest Coffee design system. Change a value here and it
   changes everywhere on the site.
   ========================================================================== */

/* ---------- Webfonts ----------
   Arkhip = display / logotype. Avenir Next = body.
   Only Regular weights were supplied; bold text uses synthetic bold. */
@font-face{
  font-family:"Arkhip";
  src:url("/assets/fonts/Arkhip.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Avenir Next";
  src:url("/assets/fonts/AvenirNextRegular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* ---- Brand red (Pantone 186 C) ---- */
  --red-50:#fdeceb;  --red-100:#f9cfcd; --red-200:#f0a5a2; --red-300:#e26c68;
  --red-400:#d43a35; --red-500:#c00303; --red-600:#a30202; --red-700:#800202; --red-800:#560101;
  /* Sampled from the logo artwork — deeper than the #c00303 spec. Artwork match only. */
  --red-logo:#aa1f25;

  /* ---- Espresso ink ---- */
  --ink-900:#17110e; --ink-800:#241b16; --ink-700:#3a2c24; --ink-600:#5b4a3f; --ink-500:#7d6a5d;

  /* ---- Warm neutrals / paper ---- */
  --sand-50:#fdfbf7; --sand-100:#f8f3ea; --sand-200:#efe6d7; --sand-300:#e2d5c1;
  --sand-400:#cbb9a1; --sand-500:#a8937a;

  /* ---- Semantics ---- */
  --green-600:#2f6b4f; --green-100:#dfeee6;
  --amber-600:#b0741a; --amber-100:#f8ecd6;
  --blue-600:#2c5b7a;  --blue-100:#dce9f1;

  /* ---- Surfaces ---- */
  --surface-page:var(--sand-100);
  --surface-card:#ffffff;
  --surface-raised:var(--sand-50);
  --surface-sunken:var(--sand-200);
  --surface-inverse:var(--ink-900);
  --surface-brand:var(--red-500);
  --surface-brand-soft:var(--red-50);

  /* ---- Text ---- */
  --text-body:var(--ink-800);
  --text-heading:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-subtle:var(--sand-400);
  --text-brand:var(--red-500);
  --text-on-brand:#ffffff;
  --text-on-inverse:var(--sand-100);
  --text-link:var(--red-500);
  --text-link-hover:var(--red-700);

  /* ---- Lines ---- */
  --border-hairline:var(--sand-200);
  --border-default:var(--sand-300);
  --border-strong:var(--ink-700);
  --border-brand:var(--red-500);
  --focus-ring:color-mix(in srgb,var(--red-500) 45%,transparent);

  /* ---- Status ---- */
  --status-success:var(--green-600); --status-success-bg:var(--green-100);
  --status-warning:var(--amber-600); --status-warning-bg:var(--amber-100);
  --status-info:var(--blue-600);     --status-info-bg:var(--blue-100);
  --status-danger:var(--red-500);    --status-danger-bg:var(--red-50);

  /* ---- Type ---- */
  --font-display:"Arkhip","Arial Narrow",system-ui,sans-serif;
  --font-body:"Avenir Next","Nunito Sans",-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  --text-display-1:64px; --text-display-2:48px;
  --text-h1:36px; --text-h2:28px; --text-h3:22px; --text-h4:18px;
  --text-body-lg:18px; --text-body:16px; --text-body-sm:14px;
  --text-label:13px; --text-caption:12px; --text-micro:11px;

  --leading-tight:1.06; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-display:-0.01em; --tracking-normal:0; --tracking-wide:0.06em; --tracking-caps:0.14em;
  --weight-regular:400; --weight-bold:700;

  /* ---- Space ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:64px; --space-20:80px; --space-24:96px;
  --gutter-page:24px; --gutter-page-lg:48px; --max-content:1200px; --max-prose:640px;

  /* ---- Radius ---- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px;
  --radius-xl:28px; --radius-pill:999px;
  --radius-card:var(--radius-lg); --radius-control:var(--radius-pill); --radius-field:var(--radius-sm);
  --border-width:1px; --border-width-thick:2px;

  /* ---- Shadow ---- */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(23,17,14,.06);
  --shadow-sm:0 1px 3px rgba(23,17,14,.08),0 1px 1px rgba(23,17,14,.04);
  --shadow-md:0 6px 16px -6px rgba(23,17,14,.14),0 2px 4px rgba(23,17,14,.05);
  --shadow-lg:0 18px 40px -12px rgba(23,17,14,.20),0 4px 10px rgba(23,17,14,.06);
  --shadow-brand:0 10px 24px -10px rgba(192,3,3,.45);
  --shadow-inset-line:inset 0 -1px 0 var(--border-hairline);
  --scrim-modal:rgba(23,17,14,.55);

  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms; --dur-page:420ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}

.wrap{max-width:var(--max-content);margin:0 auto;padding-inline:var(--gutter-page)}
@media (min-width:900px){ .wrap{padding-inline:var(--gutter-page-lg)} }

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--surface-card);color:var(--text-heading);
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0}

/* ==========================================================================
   Buttons — mirrors the design-system Button component
   ========================================================================== */
.btn{
  font-family:var(--font-body);
  font-size:15px; letter-spacing:.01em; line-height:1;
  padding:11px 22px; min-height:44px; gap:8px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:var(--radius-pill);
  background:var(--red-500); color:var(--text-on-brand);
  cursor:pointer; text-align:center;
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover{background:var(--red-600);color:var(--text-on-brand);transform:translateY(-1px);box-shadow:var(--shadow-brand)}
.btn:active{background:var(--red-700);transform:scale(.98);box-shadow:none}

.btn--sm{font-size:13px;padding:7px 14px;min-height:32px;gap:6px}
.btn--lg{font-size:17px;padding:15px 30px;min-height:54px;gap:10px}
.btn--block{width:100%}

.btn--secondary{background:var(--surface-card);color:var(--text-heading);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--sand-200);color:var(--text-heading);box-shadow:var(--shadow-md)}
.btn--secondary:active{background:var(--sand-300)}

.btn--ghost{background:transparent;color:var(--text-heading);border-color:transparent}
.btn--ghost:hover{background:var(--sand-100);color:var(--text-heading);box-shadow:none}
.btn--ghost:active{background:var(--sand-200)}

.btn--inverse{background:var(--ink-900);color:var(--text-on-inverse)}
.btn--inverse:hover{background:var(--ink-800);color:var(--text-on-inverse);box-shadow:none}
.btn--inverse:active{background:var(--ink-700)}

.btn .icon{flex:none}
.btn--lg .icon{width:18px;height:18px}
.btn--sm .icon{width:14px;height:14px}

.icon{width:16px;height:16px;flex:none;display:block;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   Site chrome — header + footer, shared by every page
   ========================================================================== */
.site-header{
  background:var(--surface-card);
  border-bottom:1px solid var(--border-hairline);
  position:sticky; top:0; z-index:20;
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-8); padding-block:14px;
}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text-heading)}
.brand:hover{color:var(--text-heading)}
.brand img{width:38px;height:38px;object-fit:contain}
.brand span{font-family:var(--font-display);font-size:20px;letter-spacing:.04em}

.site-nav{display:flex;gap:26px;align-items:center}
.site-nav a{
  font-size:13px;letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--text-body);opacity:.72;
  transition:opacity var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{opacity:1;color:var(--text-brand)}

.nav-toggle{
  display:none;background:none;border:0;padding:8px;margin:-8px;
  color:var(--text-heading);cursor:pointer;
}
.nav-toggle .icon{width:24px;height:24px}

@media (max-width:760px){
  .nav-toggle{display:block}
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface-card);
    border-bottom:1px solid var(--border-hairline);
    box-shadow:var(--shadow-md);
  }
  .site-nav[hidden]{display:none}
  .site-nav a{padding:16px var(--gutter-page);border-top:1px solid var(--border-hairline);opacity:1}
}

.site-footer{border-top:1px solid var(--border-hairline);padding-block:var(--space-10) var(--space-16);margin-top:var(--space-12)}
.site-footer__inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-5);font-size:var(--text-body-sm);color:var(--text-muted);
}
.site-footer .brand img{width:36px;height:36px}
.site-footer .brand span{font-size:18px}
.site-footer__meta{display:flex;gap:26px;flex-wrap:wrap}
.site-footer__legal{width:100%;font-size:var(--text-caption);color:var(--text-subtle);padding-top:var(--space-4)}

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