/* system.css: shared tokens and chrome for every page (banner, woven band, sewn label, warp, footer).
   Page CSS lives in css/p-<page>.css and must not redefine these selectors. */
@font-face { font-family: "Cormorant Garamond"; src: url(../assets/fonts/CormorantGaramond-normal-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url(../assets/fonts/CormorantGaramond-italic-500.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../assets/fonts/EBGaramond-normal-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url(../assets/fonts/EBGaramond-italic-400.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(../assets/fonts/HankenGrotesk-normal-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(../assets/fonts/HankenGrotesk-normal-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  /* ground from the photographs: forest dark; paper is an OBJECT, never the page ground */
  --canvas: #121A15; --surface: #1C2620; --surface-2: #24302a;
  --text: #EEE6D6; --soft: #C3BEAC;
  --paper: #EDE4D0; --paper-2: #E2D3B3; --paper-hi: #F6EFE2; --ink: #2B241B; --ink-soft: #574C3D;
  --red: #9C2A31; --red-dk: #87232a;          /* buy label + its stitch only */
  --moss: #4F5B3A; --rust: #8E3F28;           /* warp threads */
  --lamp: #E8B56A;                            /* element words */
  --bar: 60px; --banner: 0px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --gut: 56px;                                /* page side margin */
  --tw: 7px;                                  /* thread width */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-text: "EB Garamond", Georgia, serif;
  --f-chrome: "Hanken Grotesk", system-ui, sans-serif;
  --yarn-moss: repeating-linear-gradient(160deg, #6b7850 0 2px, #4F5B3A 2px 4px, #3a4429 4px 5px, #5d6a45 5px 7px);
  --yarn-rust: repeating-linear-gradient(160deg, #a9583b 0 2px, #8E3F28 2px 4px, #6a2e1c 4px 5px, #9c4a31 5px 7px);
  --yarn-wool: repeating-linear-gradient(160deg, #e6dcc6 0 2px, #cbbd9f 2px 4px, #a8997b 4px 5px, #dccfb4 5px 7px);
  --ease: cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 760px) { :root { --bar: 56px; --gut: 20px; --tw: 5px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; position: relative; color: var(--text); background: var(--canvas); font: 400 19px/30px var(--f-text); overflow-x: clip; }
@media (max-width: 760px) { body { font-size: 17px; line-height: 27px; } }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
blockquote, figure { margin: 0; }
cite, i { font-style: italic; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--paper); color: var(--ink); padding: 15px 14px; font: 500 14px/1 var(--f-chrome); }
.skip:focus { top: 8px; }

/* shared type scale (Elements of Typographic Style steps) */
.t-h1 { font-size: clamp(64px, 8.4vw, 132px); line-height: .94; }
.t-h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; }
.t-quote { font: italic 500 clamp(28px, 3vw, 42px)/1.22 var(--f-display); letter-spacing: 0; }
.t-sub { font: italic 500 clamp(26px, 2.4vw, 36px)/1.15 var(--f-display); }
.t-chrome { font: 500 14px/20px var(--f-chrome); letter-spacing: .02em; }
.t-src { font: 500 13px/19px var(--f-chrome); letter-spacing: .02em; color: var(--soft); }
@media (max-width: 760px) { .t-h1 { font-size: 54px; line-height: .98; } .t-h2 { font-size: 32px; line-height: 1.12; } }

/* banner: first thing, in flow, never sticky ------------------------------------------------ */
.banner { position: relative; z-index: 31; margin: 0; padding: 7px var(--gut); min-height: var(--banner); font: 500 13px/18px var(--f-chrome); letter-spacing: .02em; color: var(--ink-soft); background: var(--paper-hi); text-align: center; }
@media (max-width: 760px) { .banner { font-size: 12px; line-height: 16px; padding: 6px 16px; } }

/* the woven band (sticky, never transformed) ---------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 30; height: var(--bar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); padding: 0 var(--gut);
  color: var(--text);
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(232,181,106,.05) 5px 6px),
    repeating-linear-gradient(45deg, #18221c 0 2px, #1f2a23 2px 4px);
  box-shadow: 0 1px 0 rgba(79,91,58,.7), 0 3px 0 rgba(0,0,0,.25);
}
.mark { justify-self: start; font: italic 500 24px/1 var(--f-display); color: var(--text); text-decoration: none; padding: 10px 0; }
.mark-short { display: none; }
.nav { display: flex; gap: var(--s6); font: 500 14px/1 var(--f-chrome); letter-spacing: .02em; }
.nav a { color: var(--text); text-decoration: none; padding: 14px 3px; margin: 0 -3px; min-width: 44px; text-align: center; border-bottom: 2px solid transparent; }   /* 44 px target; the -3px margin keeps the bar layout */
.nav a:hover { border-bottom-color: rgba(232,181,106,.5); }
.nav a[aria-current="page"] { border-bottom: 2px dashed var(--lamp); }      /* the running stitch */
.nav .nav-kop { display: none; }
.menu-btn { display: none; }

/* the sewn label: the one buy object */
.label {
  position: relative; display: inline-flex; align-items: center; justify-self: end;
  background: var(--red); color: var(--paper-hi); text-decoration: none; border-radius: 2px;
  font: 600 14px/1 var(--f-chrome); letter-spacing: .02em; padding: 0 16px; min-height: 44px;
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.label::before, .label::after { content: ""; position: absolute; top: 6px; bottom: 6px; border-left: 1.5px dashed rgba(246,239,226,.78); }
.label::before { left: 6px; } .label::after { right: 6px; }
.label:hover { background: var(--red-dk); }
.label:active { background: #7a1f26; }
.label:focus-visible { outline-color: var(--paper-hi); }
.lb-buy, .lb-price { padding: 0 10px; }
.lb-price { border-left: 1.5px dashed rgba(246,239,226,.6); }
.lb-short { display: none; }

@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto auto; gap: 10px; padding: 0 10px 0 16px; }
  .mark-long { display: none; } .mark-short { display: inline; }
  .lb-long { display: none; } .lb-short { display: inline; }
  .label { padding: 0 10px; } .lb-buy, .lb-price { padding: 0 7px; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; min-width: 52px; justify-content: center; padding: 0 8px; background: none; border: 0; color: var(--text); font: 500 14px/1 var(--f-chrome); letter-spacing: .02em; cursor: pointer; }
  .menu-btn[aria-expanded="true"] { text-decoration: underline dashed var(--lamp) 2px; text-underline-offset: 6px; }
  .nav { display: none; }
  .nav.is-open {
    display: grid; position: absolute; top: var(--bar); left: 0; right: 0; gap: 0; padding: 8px 0 16px;
    background: var(--paper); color: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
  .nav.is-open a { color: var(--ink); padding: 14px 20px; font-size: 16px; border-bottom: 1px solid rgba(87,76,61,.18); }
  .nav.is-open a[aria-current="page"] { border-bottom: 2px dashed var(--rust); }
  .nav.is-open .nav-kop { display: block; color: var(--red); }
}

/* warp threads: yarn as an element (a page places them where its idea needs) ---------------- */
.yarn { position: absolute; width: var(--tw); border-radius: 3px; background: var(--yarn-moss); box-shadow: 1px 2px 3px rgba(0,0,0,.45); }
.yarn.rust { background: var(--yarn-rust); }
.yarn.wool { background: var(--yarn-wool); }

/* paper objects (sheets, slips) */
.paper { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 14px 30px -12px rgba(0,0,0,.55); }
.paper a { color: var(--ink); }
.stitch-link { color: var(--text); text-decoration: none; font: 500 15px/22px var(--f-chrome); letter-spacing: .02em; border-bottom: 2px dashed var(--lamp); padding: 13px 0 7px; min-height: 44px; display: inline-block; }
.stitch-link:hover { border-bottom-style: solid; }
.paper .stitch-link { color: var(--ink); border-bottom-color: var(--rust); }

/* buy button shapes shared by pages */
.btn-buy { display: inline-flex; align-items: center; min-height: 48px; padding: 0 28px; background: var(--red); color: var(--paper-hi); text-decoration: none; font: 600 15px/1 var(--f-chrome); letter-spacing: .02em; border-radius: 2px; position: relative; }
.btn-buy::before, .btn-buy::after { content: ""; position: absolute; top: 6px; bottom: 6px; border-left: 1.5px dashed rgba(246,239,226,.78); }
.btn-buy::before { left: 6px; } .btn-buy::after { right: 6px; }
.btn-buy:hover { background: var(--red-dk); } .btn-buy:active { background: #7a1f26; }
/* the buy button keeps paper text inside any paper object or page rule (.paper a is 0,1,1) */
body a.btn-buy, body a.btn-buy:hover, body a.btn-buy:visited { color: var(--paper-hi); }

/* footer ---------------------------------------------------------------------------------- */
.foot { position: relative; background: var(--surface); color: var(--text); padding: 64px var(--gut) 48px; display: grid; grid-template-columns: auto 1fr; gap: 16px 48px; align-items: baseline; }
.foot-cloth { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, var(--moss) 0 6px, #B8AA8C 6px 9px, var(--rust) 9px 15px, #cfc3a6 15px 18px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.foot-mark { font: italic 500 26px/1 var(--f-display); }
.foot-line { font: 400 16px/24px var(--f-text); color: var(--soft); }
.foot-nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 28px; font: 500 14px/1 var(--f-chrome); letter-spacing: .02em; }
.foot-nav a { color: var(--text); text-decoration: none; padding: 15px 0; min-width: 44px; text-align: center; display: inline-block; border-bottom: 1.5px dashed rgba(232,181,106,.45); }
.gen-note { grid-column: 1 / -1; font: 400 15px/22px var(--f-text); color: var(--soft); max-width: 70ch; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr; gap: 10px; padding: 36px 20px 28px; } .foot-nav { gap: 0 22px; } }

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