/* ============================================================
   WESTONCOOKE — Brand System stylesheet
   Display: Archivo (Expanded Black) — web substitute for Bernoru
   Body:    Open Sauce Sans
   Mono:    IBM Plex Mono (labels / specimen captions)
   ============================================================ */

/* ---- Open Sauce Sans (body) — official repo via jsDelivr GitHub mirror ---- */
@font-face{font-family:'Open Sauce Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/marcologous/Open-Sauce-Fonts/fonts/ttf/OpenSauceSans-Regular.ttf') format('truetype');}
@font-face{font-family:'Open Sauce Sans';font-style:italic;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/marcologous/Open-Sauce-Fonts/fonts/ttf/OpenSauceSans-Italic.ttf') format('truetype');}
@font-face{font-family:'Open Sauce Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/marcologous/Open-Sauce-Fonts/fonts/ttf/OpenSauceSans-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Open Sauce Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/marcologous/Open-Sauce-Fonts/fonts/ttf/OpenSauceSans-Bold.ttf') format('truetype');}

:root{
  /* ---- Core palette (exact brand hexes) ---- */
  --mahogany-900:#2E0F11;   /* Rich Mahogany — darkest */
  --mahogany-800:#3D1416;   /* Rich Mahogany */
  --coffee:#302821;         /* Dark Coffee */
  --beige:#A49E8D;          /* Khaki Beige */
  --petal:#E1B7C4;          /* Pastel Petal — signature accent */
  --blue:#A9CCE3;           /* Soft Blue */
  --blue-grey:#B1C3CB;      /* Soft Blue-grey */

  /* ---- Derived warm neutrals ---- */
  --paper:#F4EFE8;          /* warm cream — primary light bg */
  --paper-2:#EBE4D8;        /* deeper sand panel */
  --paper-3:#E2DACB;        /* sand edge / hairline */
  --petal-soft:#F0DCE2;     /* tint of petal for fills */
  --ink:#2E0F11;            /* body ink on light */
  --ink-soft:rgba(46,15,17,.66);
  --cream-soft:rgba(244,239,232,.66);

  --maxw:1180px;
  --gut:clamp(22px,5vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:'Open Sauce Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---- Type primitives ---- */
.display{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-stretch:125%;
  line-height:.92;
  letter-spacing:-.005em;
  text-transform:uppercase;
}
.mono{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  text-transform:uppercase;
  letter-spacing:.18em;
}

/* kicker label */
.kick{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--beige);display:inline-flex;align-items:center;gap:.7em;
}
.kick::before{content:"";width:9px;height:9px;background:var(--petal);display:inline-block}
.kick.on-dark{color:var(--beige)}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative;z-index:2}
.band{padding-block:clamp(64px,9vw,128px)}
.band--paper{background:var(--paper)}
.band--sand{background:var(--paper-2)}
.band--mahogany{background:var(--mahogany-900);color:var(--paper)}
.band--coffee{background:var(--coffee);color:var(--paper)}

.sec-head{display:flex;align-items:baseline;gap:24px;margin-bottom:clamp(36px,5vw,64px);flex-wrap:wrap}
.sec-num{font-family:'Archivo';font-weight:900;font-stretch:125%;font-size:clamp(34px,5vw,58px);
  color:transparent;-webkit-text-stroke:1.5px var(--beige);line-height:1}
.sec-title{font-size:clamp(13px,1.4vw,15px);letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;font-family:'IBM Plex Mono',monospace}
.band--mahogany .sec-num,.band--coffee .sec-num{-webkit-text-stroke-color:rgba(228,209,213,.5)}

h2.big{font-size:clamp(30px,5vw,56px)}
h3{font-size:clamp(20px,2.4vw,26px);line-height:1.15}
.lead{font-size:clamp(18px,1.5vw,21px);max-width:60ch;color:var(--ink-soft)}
.band--mahogany .lead,.band--coffee .lead{color:var(--cream-soft)}
p{max-width:62ch}

/* ---- Logo / wordmark ---- */
.wordmark{
  font-family:'Archivo',sans-serif;font-weight:900;font-stretch:118%;
  text-transform:uppercase;letter-spacing:.16em;line-height:1;white-space:nowrap;
}
.lockup{display:inline-flex;flex-direction:column;gap:.55em}
.lockup .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.lockup .tag{font-family:'IBM Plex Mono',monospace;font-size:.5em;letter-spacing:.3em;
  text-transform:uppercase;font-weight:500}
.sq{display:inline-block;aspect-ratio:1;background:var(--petal)}

/* swatch */
.swatch{border-radius:3px;overflow:hidden;border:1px solid var(--paper-3);background:#fff}
.swatch .chip{height:120px}
.swatch .meta{padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.swatch .name{font-weight:700;font-size:15px}
.swatch .hex{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
.swatch .role{font-size:12px;color:var(--ink-soft)}

/* generic card */
.card{background:var(--paper);border:1px solid var(--paper-3);border-radius:4px;padding:clamp(20px,2.4vw,30px)}
.band--sand .card{background:#fff}

/* image placeholder */
.ph{position:relative;background:
   repeating-linear-gradient(45deg,var(--paper-2) 0 10px,var(--paper-3) 10px 20px);
   border:1px solid var(--paper-3);border-radius:4px;overflow:hidden;display:flex;
   align-items:flex-end;min-height:200px}
.ph span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
   background:var(--mahogany-900);color:var(--petal);padding:6px 10px;margin:12px}
.ph.dark{background:
   repeating-linear-gradient(45deg,#3a2a2c 0 10px,#321f21 10px 20px)}

a{color:inherit}
.divider{height:1px;background:var(--paper-3);border:0}
.band--mahogany .divider,.band--coffee .divider{background:rgba(228,209,213,.18)}