/* =========================================================
   Sieb's Workshop LLC — Design System  (v2 — "Workshop Blueprint")
   ---------------------------------------------------------
   Re-skin to match the brand's IG voice: bold condensed display,
   birch + kraft + near-black palette, technical / blueprint motifs.
   Class NAMES are unchanged from v1 so the skin cascades across
   every existing page without rewriting markup.

   Type:   Anton (display)  ·  IBM Plex Mono (labels/specs)  ·  Inter (body)
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  /* Brand palette — near-black ink, birch plywood, kraft tan, warm paper */
  --sw-ink:           #15120d;  /* warm near-black (headlines, bars)        */
  --sw-ink-soft:      #211c15;
  --sw-charcoal:      #2c2620;
  --sw-walnut:        #3a322a;  /* body text on light                       */
  --sw-bark:          #5a4d3e;  /* muted label text                         */
  --sw-tan:           #c9a36e;  /* kraft tan — primary accent               */
  --sw-tan-light:     #e7d9be;  /* birch plywood face                       */
  --sw-cream:         #f7f1e6;  /* warm paper background                    */
  --sw-cream-soft:    #fbf7ef;
  --sw-paper:         #ffffff;
  --sw-brass:         #c9a36e;  /* alias → kraft (compat)                   */
  --sw-brass-bright:  #e0b878;
  --sw-line:          rgba(21, 18, 13, 0.16);  /* hairline on light         */
  --sw-line-soft:     rgba(21, 18, 13, 0.08);
  --sw-line-dark:     rgba(231, 217, 190, 0.22); /* hairline on dark        */
  --sw-success:       #4f7d4f;
  --sw-danger:        #a64e3c;
  --sw-warning:       #b5852b;

  /* Typography */
  --sw-font-display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --sw-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sw-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sw-font-serif:   var(--sw-font-display); /* compat alias for stray refs */

  /* Type scale */
  --sw-h1: clamp(2.8rem, 7vw + 0.4rem, 6rem);
  --sw-h2: clamp(2rem, 4vw + 0.5rem, 3.6rem);
  --sw-h3: clamp(1.25rem, 1.3vw + 0.8rem, 1.7rem);
  --sw-h4: clamp(1.05rem, 0.7vw + 0.7rem, 1.3rem);
  --sw-lead: clamp(1.05rem, 0.4vw + 0.85rem, 1.2rem);
  --sw-base: 1rem;
  --sw-small: 0.875rem;
  --sw-tiny: 0.75rem;

  /* Layout — crisp corners (blueprint), minimal rounding */
  --sw-radius-sm: 2px;
  --sw-radius:    3px;
  --sw-radius-lg: 4px;
  --sw-radius-xl: 6px;

  /* Shadows — flatter; structure comes from hairlines, not blur */
  --sw-shadow-xs: 0 1px 2px rgba(21, 18, 13, 0.05);
  --sw-shadow-sm: 0 2px 6px rgba(21, 18, 13, 0.07);
  --sw-shadow-md: 0 10px 26px rgba(21, 18, 13, 0.10);
  --sw-shadow-lg: 0 26px 60px rgba(21, 18, 13, 0.16);
  --sw-shadow-brass: 0 6px 18px rgba(201, 163, 110, 0.30);

  --sw-container: 1280px;
  --sw-container-wide: 1480px;
  --sw-gap: clamp(1rem, 2vw, 1.75rem);

  /* Motion */
  --sw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sw-fast: 160ms;
  --sw-base-dur: 280ms;
  --sw-slow: 540ms;

  /* Z-index scale — the overlay is a dim/blur BACKDROP, so it must sit BELOW the
     panel it backs (drawer/menu), above the page. Panel > overlay, always. */
  --sw-z-base: 1;
  --sw-z-sticky: 50;
  --sw-z-overlay: 80;
  --sw-z-drawer: 90;
  --sw-z-modal: 100;
  --sw-z-toast: 120;
}

/* Reset / base ----------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--sw-font-sans);
  font-size: var(--sw-base);
  line-height: 1.6;
  color: var(--sw-walnut);
  background: var(--sw-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: var(--sw-bark);
  text-decoration: none;
  transition: color var(--sw-fast) var(--sw-ease);
}

a:hover {
  color: var(--sw-ink);
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Typography ------------------------------------------- */
/* Display + H2 — Anton, heavy condensed, uppercase poster energy */
.sw-display {
  font-family: var(--sw-font-display);
  font-weight: 400;            /* Anton ships a single heavy weight */
  font-size: var(--sw-h1);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--sw-ink);
  margin: 0;
}

.sw-h2 {
  font-family: var(--sw-font-display);
  font-weight: 400;
  font-size: var(--sw-h2);
  line-height: 0.98;
  letter-spacing: 0.006em;
  text-transform: uppercase;
  color: var(--sw-ink);
  margin: 0;
}

/* H3/H4 — Inter heavy, for readable sub-heads */
.sw-h3 {
  font-family: var(--sw-font-sans);
  font-weight: 800;
  font-size: var(--sw-h3);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--sw-ink);
  margin: 0;
}

.sw-h4 {
  font-family: var(--sw-font-sans);
  font-weight: 700;
  font-size: var(--sw-h4);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--sw-ink);
  margin: 0;
}

/* Eyebrow / spec label — mono, technical, with a dimension tick */
.sw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--sw-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--sw-bark);
  margin: 0;
}

.sw-eyebrow::before {
  content: "";
  width: 1.6em;
  height: 1px;
  background: var(--sw-tan);
  flex: none;
}

.sw-lead {
  font-size: var(--sw-lead);
  line-height: 1.65;
  color: var(--sw-walnut);
  max-width: 62ch;
}

.sw-small {
  font-size: var(--sw-small);
}

.sw-tiny {
  font-size: var(--sw-tiny);
  letter-spacing: 0.02em;
}

/* Mono measurement / spec text (dimension callouts) */
.sw-measure {
  font-family: var(--sw-font-mono);
  font-size: var(--sw-tiny);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sw-bark);
}

/* Layout primitives ------------------------------------ */
.sw-container {
  width: 100%;
  max-width: var(--sw-container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.sw-container-wide {
  width: 100%;
  max-width: var(--sw-container-wide);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.sw-section {
  padding: clamp(2.5rem, 4.5vw, 4.25rem) 0;
  position: relative;
}

.sw-section--tight {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.sw-grid {
  display: grid;
  gap: var(--sw-gap);
}

.sw-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.sw-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.sw-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.sw-stack > * + * {
  margin-top: var(--sw-gap);
}

.sw-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll lock when modal/drawer open */
body.sw-no-scroll {
  overflow: hidden;
}

/* Blueprint motifs ------------------------------------- */
/* Dimension-line divider: a hairline with end ticks + optional label.
   Usage: <div class="sw-rule" data-label="01 / SHOP"></div>            */
.sw-rule {
  position: relative;
  height: 1px;
  background: var(--sw-line);
  margin: clamp(2rem, 4vw, 3.5rem) 0;
}

.sw-rule::before,
.sw-rule::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--sw-line);
}

.sw-rule::before { left: 0; }
.sw-rule::after  { right: 0; }

.sw-rule[data-label]::after {
  /* when labelled, the right tick is replaced by the label block */
  content: attr(data-label);
  top: 50%;
  right: 0;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  padding-left: 0.9em;
  background: var(--sw-cream);
  font-family: var(--sw-font-mono);
  font-size: var(--sw-tiny);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sw-bark);
}

/* Section index numeral (01, 02…) — oversized mono ghost */
.sw-index {
  font-family: var(--sw-font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--sw-tan);
}

/* Background textures (reused across pages) ------------ */
/* Warm paper grain — subtle, kept light for the "clean/refreshing" feel */
.sw-paper-tex {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.6), transparent 62%),
    var(--sw-cream-soft);
  position: relative;
}

.sw-paper-tex::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.58  0 0 0 0 0.46  0 0 0 0 0.32  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* Faint blueprint grid — opt-in on dark sections.
   Usage: add class "sw-blueprint-grid" to a dark-background block.        */
.sw-blueprint-grid {
  position: relative;
}

.sw-blueprint-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--sw-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--sw-line-dark) 1px, transparent 1px);
  background-size: 38px 38px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}

/* Focus ring (accessible) ------------------------------ */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--sw-tan);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}