/* ===================================================================
   sicc arrt / design tokens
   LOCKED 2026-09-08. Do not change without a decision.
   Decided in siccarrt-type-lab.html and siccarrt-serif-lab.html.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,400&display=swap');

:root{

  /* ---------- colour ---------- */
  --paper:#FAF9F6;   /* Bone. page background */
  --panel:#EFECE4;   /* recessed blocks: fit detail, cart upsell */
  --ink:#0D0D0D;     /* ALL content text. there is no secondary grey */
  --muted:#B4B0A6;   /* ONLY things you cannot have. see rule below */
  --rule:#E0DDD4;    /* hairlines and inactive borders */
  --plate:#0D0D0D;   /* black field behind artwork */
  --ok:#2F5D3A;      /* free shipping met. the only other colour on the site */

  /* ---------- type ---------- */
  --sans:'Public Sans',system-ui,sans-serif;      /* the store operating */
  --serif:'Source Serif 4',Georgia,serif;         /* D. Halloway narrating */

  --s-xs:12px;       /* catalogue numbers */
  --s-sm:13.5px;     /* cart line detail, signature */
  --s-md:14.5px;     /* all body-small: specs, meta, fit copy, totals */
  --s-base:17px;     /* base */
  --s-narr:19px;     /* Halloway */

  --smallw:500;      /* body-small is Medium, not Regular */
  --serifw:400;      /* Halloway is Regular. never 500 in long form */

  --lh-body:1.5;
  --lh-narr:1.62;
  --measure:60ch;    /* max line length for Halloway */
}

/* ===================================================================
   TWO RULES THAT FALL OUT OF THESE TOKENS

   1. GREY MEANS UNAVAILABLE, NOT UNIMPORTANT.
      Every piece of content is --ink. --muted is reserved exclusively
      for things the customer cannot have: a size not made in that
      blank, a fit blocked by the chosen size, a format that does not
      exist yet. Never use --muted to de-emphasise live content.
      Hierarchy comes from size and weight only.

   2. SERIF IS MODE, NOT VOICE.
      --serif is Halloway narrating: long form, attributed, an
      observation. Product descriptions, collection intros, about,
      blog body.
      --sans is the store operating, even when written in his register.
      Buttons, sizes, shipping status, totals, errors.
      Example: "The threshold has been met. No further action is
      required of you." is his voice but it is a status message, so it
      is sans. If serif appears on every page it stops meaning anything.
   =================================================================== */


/* ==================================================================
   sicc arrt / layout
   GENERATED by build_site.py. Do not edit. Edit the generator.
   Every var() carries a fallback so a renamed token degrades rather
   than blanking the page.
   ================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper,#FAF9F6);
  color:var(--ink,#0D0D0D);
  font-family:var(--sans,'Public Sans',system-ui,sans-serif);
  font-size:var(--s-base,17px);line-height:var(--lh-body,1.5);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.sa-head{
  display:flex;align-items:center;gap:24px;
  padding:18px 28px;border-bottom:1px solid var(--rule,#E0DDD4);
  position:sticky;top:0;background:var(--paper,#FAF9F6);z-index:40;
}
.sa-mark{font-weight:700;letter-spacing:.02em;text-decoration:none;font-size:20px}
.sa-nav{display:flex;gap:20px;margin-left:auto;font-size:15px}
.sa-nav a{text-decoration:none;opacity:.75}
.sa-nav a:hover{opacity:1}
.sa-bagbtn{
  border:1px solid var(--ink,#0D0D0D);background:none;color:inherit;
  padding:8px 16px;border-radius:999px;font:inherit;font-size:15px;cursor:pointer;
}

.sa-pdp{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:48px;max-width:1240px;margin:0 auto;padding:40px 28px;align-items:start;
}
.sa-plate{background:var(--plate,#0D0D0D);border-radius:4px;overflow:hidden}
.sa-plate img{width:100%}
.sa-thumbs{display:flex;gap:10px;margin-top:10px}
.sa-thumb{
  width:76px;padding:0;border:1px solid var(--rule,#E0DDD4);background:none;
  border-radius:3px;overflow:hidden;cursor:pointer;line-height:0;
}
.sa-thumb[aria-pressed="true"]{border-color:var(--ink,#0D0D0D);
  box-shadow:inset 0 0 0 1px var(--ink,#0D0D0D)}
.sa-thumb img{width:100%}

.sa-eyebrow{margin:0 0 8px;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.6}
.sa-eyebrow a{text-decoration:none}
.sa-buy h1{
  font-family:var(--serif,'Source Serif 4',Georgia,serif);
  font-size:clamp(30px,4vw,44px);line-height:1.1;margin:0 0 10px;font-weight:600;
}
.sa-price{font-size:22px;margin:0 0 26px}
.sa-label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.6;margin:22px 0 8px;display:flex;justify-content:space-between}
.sa-sizelink{font-size:12px;opacity:.8}

.sa-fits{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sa-fit{
  text-align:left;padding:12px 14px;border:1px solid var(--muted,#B4B0A6);
  background:none;font:inherit;cursor:pointer;border-radius:3px;
}
.sa-fit-label{display:block;font-weight:600}
.sa-fit-blank{display:block;font-size:12.5px;opacity:.62;margin-top:3px}
.sa-fit[aria-pressed="true"]{border-color:var(--ink,#0D0D0D);box-shadow:inset 0 0 0 1px var(--ink,#0D0D0D)}
.sa-fit[disabled]{opacity:.35;cursor:not-allowed}
.sa-fitnote{font-size:13.5px;opacity:.7;margin:10px 0 0}

.sa-sizes{display:flex;flex-wrap:wrap;gap:8px}
.sa-size{
  min-width:54px;padding:11px 8px;border:1px solid var(--muted,#B4B0A6);
  background:none;font:inherit;cursor:pointer;border-radius:3px;
}
.sa-size[aria-pressed="true"]{border-color:var(--ink,#0D0D0D);box-shadow:inset 0 0 0 1px var(--ink,#0D0D0D)}
.sa-size[disabled]{opacity:.3;cursor:not-allowed;color:var(--muted,#B4B0A6);
  text-decoration:line-through}

.sa-add,.sa-buy.sa-checkout,a.sa-buy{
  display:block;width:100%;margin-top:24px;padding:16px;
  background:var(--ink,#0D0D0D);color:var(--paper,#FAF9F6);
  border:0;border-radius:3px;font:inherit;font-size:16px;font-weight:600;
  cursor:pointer;text-align:center;text-decoration:none;
}
.sa-add[disabled]{opacity:.4;cursor:not-allowed}
.sa-ship{font-size:13.5px;opacity:.7;margin:12px 0 0;min-height:1.4em}

.sa-copy{max-width:var(--measure,60ch);margin:8px auto 0;padding:0 28px 40px}
.sa-scene{
  font-family:var(--serif,'Source Serif 4',Georgia,serif);
  font-style:italic;font-size:var(--s-narr,19px);
  line-height:var(--lh-narr,1.62);opacity:.85;
  padding-bottom:18px;border-bottom:1px solid var(--rule,#E0DDD4);
}
.sa-copy p{margin:0 0 16px}

.sa-specs{max-width:660px;margin:0 auto;padding:0 28px 56px}
.sa-specs h2,.sa-also h2,.sa-cols h2,.sa-all h2{
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;
  margin:0 0 16px;font-weight:600;
}
.sa-specs dl{margin:0;display:grid;grid-template-columns:120px 1fr;gap:10px 20px}
.sa-specs dt{font-weight:var(--smallw,500);font-size:var(--s-md,14.5px)}
.sa-specs dd{margin:0;font-size:var(--s-md,14.5px);opacity:.85}

.sa-also,.sa-listing,.sa-home{max-width:1240px;margin:0 auto;padding:0 28px 56px}
.sa-grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.sa-card{text-decoration:none;display:block}
.sa-card-plate{
  display:block;background:var(--plate,#0D0D0D);border-radius:3px;
  overflow:hidden;
}
.sa-card-title{display:block;margin-top:10px;font-size:15px;font-weight:600}
.sa-card-price{display:block;font-size:13.5px;opacity:.6}

.sa-hero{padding:56px 0 40px;max-width:760px}
.sa-hero h1{
  font-family:var(--serif,'Source Serif 4',Georgia,serif);
  font-size:clamp(32px,5vw,54px);line-height:1.08;margin:0 0 14px;font-weight:600;
}
.sa-hero p{margin:0;opacity:.75}
.sa-cols{padding-bottom:44px}
.sa-colgrid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.sa-colcard{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:16px 18px;border:1px solid var(--rule,#E0DDD4);border-radius:3px;
  text-decoration:none;
}
.sa-colcard em{font-style:normal;opacity:.5;font-size:14px}
.sa-count{margin:-8px 0 26px;opacity:.6;font-size:14px}
.sa-listing h1{
  font-family:var(--serif,'Source Serif 4',Georgia,serif);
  font-size:clamp(28px,4vw,42px);margin:44px 0 10px;font-weight:600;
}
.sa-thanks p{max-width:600px}

.sa-foot{
  border-top:1px solid var(--rule,#E0DDD4);padding:36px 28px 56px;
  margin-top:40px;font-size:14px;opacity:.75;
}
.sa-foot-mark{font-weight:700;margin-bottom:8px}
.sa-foot nav{margin-top:12px;display:flex;gap:18px}

.sa-drawer{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;
  display:flex;justify-content:flex-end}
.sa-drawer[hidden]{display:none}
.sa-drawer-panel{
  background:var(--paper,#FAF9F6);width:min(420px,100%);height:100%;
  padding:24px;overflow:auto;display:flex;flex-direction:column;
}
.sa-drawer-top{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px}
.sa-drawer-top button{background:none;border:0;font-size:26px;cursor:pointer;
  line-height:1;color:inherit}
.sa-line{display:grid;grid-template-columns:56px 1fr auto;gap:12px;
  align-items:center;padding:12px 0;border-bottom:1px solid var(--rule,#E0DDD4)}
.sa-line img{background:var(--plate,#0D0D0D);border-radius:2px}
.sa-line-t{font-size:14px;font-weight:600}
.sa-line-s{font-size:12.5px;opacity:.6}
.sa-line-r{background:none;border:0;font-size:12px;opacity:.6;cursor:pointer;
  padding:0;text-decoration:underline;color:inherit}
.sa-empty{opacity:.6;padding:20px 0}
.sa-meter{height:4px;background:var(--rule,#E0DDD4);border-radius:2px;
  margin:20px 0 8px;overflow:hidden}
.sa-meter-fill{height:100%;width:0;background:var(--ok,#2F5D3A);
  transition:width .25s ease}
.sa-meter-text{font-size:13px;opacity:.75;margin:0}
.sa-err{color:#9B1B1B;font-size:14px;margin:12px 0 0}
.sa-err[hidden]{display:none}
.sa-drawer .sa-buy{margin-top:auto}

@media (max-width:880px){
  .sa-pdp{grid-template-columns:1fr;gap:28px;padding:24px 20px}
  .sa-head{padding:14px 20px;gap:14px}
  .sa-nav{gap:14px;font-size:14px}
  .sa-copy,.sa-specs,.sa-also,.sa-listing,.sa-home{padding-left:20px;padding-right:20px}
  .sa-specs dl{grid-template-columns:1fr;gap:2px 0}
  .sa-specs dd{margin-bottom:12px}
  .sa-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
}