/* ============================================================
   Rubio's Fabrication v2: ranch gate at last light
   Tokens kept from v1 (torch orange on forge black). Type is
   Ultra, the fat Clarendon Mario's own signs are cut in, and
   Archivo, with its width axis doing the condensed labels.
   ============================================================ */
@font-face {
  font-family: "Ultra";
  src: url("../fonts/ultra-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations"), url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root {
  --sc-canvas: #14100E;
  --sc-surface: #201A16;
  --sc-ink: #F2EAE0;
  --sc-ink-soft: #B0A49C;
  --sc-accent: #F07422;
  --sc-accent-ink: #1A0E05;
  --sc-font-display: "Ultra", "Rockwell Extra Bold", "Clarendon", Georgia, serif;
  --sc-font-text: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 18 30% 3%;
  --sc-r-sm: 2px; --sc-r-md: 3px; --sc-r-lg: 4px;

  --accent-hi: #FF8A3D;
  --steel: #594C46;
  --night: #0E0B0A;
  --label: 600 0.78rem/1.3 var(--sc-font-text);
  --bar-h: 64px;
}

html { color-scheme: dark; scroll-padding-top: calc(var(--bar-h) + 12px); }
body { font-size: 17px; line-height: 1.62; letter-spacing: 0; }
@media (min-width: 1000px) { body { font-size: 18px; } }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 12px 18px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------- type */
.display {
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
.display--hero { font-size: clamp(2.1rem, 0.9rem + 2.9vw, 3.7rem); line-height: 1.04; }
.display--lg   { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.1rem); }
.display--md   { font-size: clamp(1.8rem, 1.25rem + 1.9vw, 3rem); }
.display--sm   { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.1; }

/* the label face: Archivo pulled condensed, set like a stamped tag */
.tag, .obj__no, .obj__meta, legend, .field label, .glance dt, .slip__spec dt,
.finish__name, .cut__status, .plain__h, .foot__h, .bar__list a, .btn {
  font-stretch: 78%;
}
.tag {
  margin: 0;
  font: var(--label); font-stretch: 78%;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.tag__no { color: var(--sc-accent); margin-right: 0.6em; font-variant-numeric: tabular-nums; }

a { color: inherit; }
.link {
  color: var(--sc-ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.28em;
  transition: color 160ms var(--sc-ease-out);
}
.link:hover { color: var(--accent-hi); }

/* ---------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  font-family: var(--sc-font-text); font-weight: 750; font-size: 0.95rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  color: var(--sc-accent-ink); background: var(--sc-accent);
  border: 0; border-radius: var(--sc-r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 214, 170, 0.45), 0 2px 4px hsl(var(--sc-shadow-color) / 0.4), 0 10px 22px -10px hsl(var(--sc-shadow-color) / 0.7);
  cursor: pointer;
  transition: background-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: var(--accent-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn--bar { min-height: 42px; padding: 0 16px; font-size: 0.85rem; }

/* ---------------------------------------------------- the bar: an index that jumps */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: center; gap: var(--sc-5);
  padding: 0 var(--sc-gutter);
  background: linear-gradient(to bottom, rgba(14, 11, 10, 0.72), rgba(14, 11, 10, 0));
  transition: background-color 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-solid { background: rgba(18, 14, 12, 0.94); box-shadow: 0 1px 0 rgba(242, 234, 224, 0.08); }
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.bar__brand img { width: 34px; height: 34px; }
.bar__brand span { font-family: var(--sc-font-display); font-size: 1.05rem; letter-spacing: 0; }
.bar__list { display: flex; gap: var(--sc-1); margin: 0; padding: 0; list-style: none; }
.bar__list a {
  display: block; padding: 10px 12px;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; color: var(--sc-ink);
  transition: color 150ms var(--sc-ease-out);
}
.bar__list a:hover { color: var(--accent-hi); }
.bar__list a[aria-current="page"] { color: var(--sc-accent); }
.bar__toggle { display: none; }
@media (max-width: 1020px) {
  .bar__brand span { display: none; }
  .bar__toggle {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px;
    background: transparent; color: var(--sc-ink);
    border: 1px solid rgba(242, 234, 224, 0.3); border-radius: var(--sc-r-sm);
    font-weight: 650; font-stretch: 78%; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer;
  }
  .bar__index { position: relative; }
  .bar__list {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 220px; flex-direction: column; padding: 8px;
    background: #1b1512; border: 1px solid rgba(242, 234, 224, 0.12);
    box-shadow: var(--sc-e3);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), visibility 0s linear 160ms;
  }
  .bar__index.is-open .bar__list { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .bar__list a { padding: 12px 12px; }
}
@media (max-width: 420px) {
  .bar { gap: var(--sc-3); }
  .btn--bar { padding: 0 12px; letter-spacing: 0.05em; }
}

/* ---------------------------------------------------- No. 01: the hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; }
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene > * { position: absolute; pointer-events: none; }
.hero__sky {
  inset: 0;
  background:
    radial-gradient(ellipse 34% 40% at 70% 62%, rgba(255, 186, 112, 0.78), rgba(240, 116, 34, 0) 72%),
    radial-gradient(ellipse 80% 46% at 66% 66%, rgba(240, 116, 34, 0.42), rgba(240, 116, 34, 0) 70%),
    linear-gradient(to bottom, #120d0b 0%, #1b120f 18%, #35190f 38%, #6d2d13 54%, #b5521c 64%, #e47a35 70%);
}
.hero__sun {
  left: 70%; top: 63%; width: 15vmin; height: 15vmin; margin: -7.5vmin 0 0 -7.5vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe2b8 0%, #ffbf7a 38%, rgba(255, 150, 70, 0.9) 58%, rgba(240, 116, 34, 0) 72%);
  will-change: transform, opacity;
}
.hero__plane { left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; will-change: transform; }
.hero__ridge { height: 104%; bottom: -2%; }
.hero__subject {
  left: 55%; bottom: -1%; width: min(31vw, 600px);
  display: flex; flex-direction: column; align-items: center;
  will-change: transform;
}
.hero__sign { width: 100%; height: auto; max-width: none; position: relative; z-index: 2; }
.hero__plank {
  width: 107%; height: auto; max-width: none; margin-top: -0.5%;
  filter: brightness(0.32) saturate(0.8) contrast(1.1);
  position: relative; z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}
.hero__post { width: 20%; height: 27vh; max-width: none; margin-top: -1px; position: relative; z-index: 1; }
.hero__motes { inset: 0; width: 100%; height: 100%; }
.hero__near { height: 100%; }
.hero__night { inset: 0; background: var(--night); opacity: 0; will-change: opacity; }
.hero__floor { left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(to bottom, rgba(20, 16, 14, 0), var(--sc-canvas) 92%); }

.hero__label {
  position: relative; z-index: 5;
  max-width: min(60rem, 60vw);
  padding: calc(var(--bar-h) + clamp(28px, 12vh, 150px)) var(--sc-gutter) 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-4);
}
.hero__label h1 { margin-top: var(--sc-1); }
.hero__facts { margin: 0 0 var(--sc-2); max-width: 30rem; color: #e6d9cb; font-size: 1.06rem; }

@media (max-width: 860px) {
  .hero__label { padding-top: calc(var(--bar-h) + 22px); gap: var(--sc-3); }
  .display--hero { font-size: clamp(2.1rem, 1.3rem + 4.4vw, 3rem); }
  .hero__facts { font-size: 1rem; }
  .hero__label { max-width: none; }
  .hero__subject { left: 50%; bottom: -1%; width: min(70vw, 400px); margin-left: calc(min(70vw, 400px) / -2); }
  .hero__post { height: 22vh; }
  .hero__ridge, .hero__mid { object-position: 70% 100%; }
  .hero__sun { left: 50%; top: 66%; width: 24vmin; height: 24vmin; margin: -12vmin 0 0 -12vmin; }
  .hero__sky {
    background:
      radial-gradient(ellipse 70% 30% at 50% 64%, rgba(255, 186, 112, 0.8), rgba(240, 116, 34, 0) 72%),
      linear-gradient(to bottom, #120d0b 0%, #1d1310 34%, #3a1b10 52%, #7a3315 64%, #c25a1f 72%, #e8803a 77%);
  }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__subject { width: min(56vw, 320px); margin-left: calc(min(56vw, 320px) / -2); }
}

/* ---------------------------------------------------- the collection rail */
.collection { background: var(--sc-canvas); }
.collection__stage { display: flex; align-items: flex-start; }
.rail {
  gap: clamp(28px, 3.4vw, 56px);
  padding: calc(var(--bar-h) + clamp(16px, 4vh, 44px)) var(--sc-gutter) 0;
  align-items: flex-start;
}
.rail > * { flex: none; }
.rail__lead { width: clamp(17rem, 26vw, 24rem); align-self: flex-start; padding-top: 12vh; display: flex; flex-direction: column; gap: var(--sc-4); }
.rail__lead p { margin: 0; color: var(--sc-ink-soft); max-width: 22rem; }
.rail__end {
  width: clamp(17rem, 24vw, 22rem); align-self: flex-start; padding-top: 18vh;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-4);
  padding-right: var(--sc-gutter);
}
.rail__end p { margin: 0; color: var(--sc-ink-soft); }
.rail__end .display { color: var(--sc-ink); }
.obj { margin: 0; width: min(29vw, calc(66svh * 0.75)); }
.obj__frame {
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--sc-r-sm);
  background: var(--sc-surface);
  box-shadow: var(--sc-e2);
}
.obj__frame img { width: 100%; height: 100%; object-fit: cover; }
.obj figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding-top: 14px; }
.obj__no { grid-row: 1 / span 2; font: var(--label); font-stretch: 78%; letter-spacing: 0.08em; color: var(--sc-accent); padding-top: 4px; font-variant-numeric: tabular-nums; }
.obj__name { font-weight: 650; font-size: 1.04rem; line-height: 1.3; }
.obj__meta { font: var(--label); font-stretch: 78%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (prefers-reduced-motion: no-preference) {
  .rail > :not(:first-child) {
    --i: 0;
    opacity: clamp(0.55, calc((var(--sc-p, 0) * 9 - var(--i) + 1.6) * 1), 1);
    transform: translateY(calc(clamp(0, (var(--i) - var(--sc-p, 0) * 9 - 0.6), 1) * 26px));
    transition: opacity 120ms linear;
  }
}
@media (max-width: 860px) {
  .collection__stage { align-items: center; }
  .rail { padding-top: calc(var(--bar-h) / 2); }
  .rail__lead, .rail__end { width: min(78vw, 22rem); align-self: center; padding-top: 0; }
  .obj { width: min(78vw, calc(60svh * 0.75)); }
}

/* ---------------------------------------------------- finishes */
.finish { background: var(--sc-canvas); }
.finish__stage {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center; gap: clamp(24px, 5vw, 80px);
  padding: calc(var(--bar-h) + 12px) var(--sc-gutter) 24px;
  background: radial-gradient(ellipse 50% 60% at 30% 52%, rgba(240, 116, 34, 0.16), rgba(240, 116, 34, 0) 70%), var(--sc-canvas);
}
.finish__plate { position: relative; width: 100%; max-width: 680px; aspect-ratio: 712 / 680; justify-self: center; }
.finish__plate > * { position: absolute; inset: 0; }
.finish__layer { width: 100%; height: 100%; display: block; }
.finish__copy { display: flex; flex-direction: column; gap: var(--sc-6); }
.finish__notes { display: grid; }
.finish__note { grid-area: 1 / 1; max-width: 24rem; }
.finish__note p { margin: 0; color: var(--sc-ink-soft); }
.finish__note .finish__name {
  font-family: var(--sc-font-display); font-stretch: normal;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1;
  color: var(--sc-accent); margin-bottom: var(--sc-2);
}
@media (max-width: 860px) {
  .finish__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 18px; }
  .finish__plate { max-width: min(88vw, 52svh); }
  .finish__copy { gap: var(--sc-4); }
}
@media (prefers-reduced-motion: reduce) {
  .finish__plate { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 900px; }
  .finish__plate > * { position: static; }
  .finish__layer { height: auto; aspect-ratio: 712 / 680; }
  .finish__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .finish__note { grid-area: auto; opacity: 1 !important; }
  .finish__stage { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- ordering, plainly */
.plain { padding-block: clamp(4rem, 8vw, 8rem) clamp(3.5rem, 7vw, 7rem); background: var(--sc-canvas); }
.plain__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); }
.plain__facts > * + * { margin-top: var(--sc-6); }
.glance { margin: 0; border-top: 1px solid rgba(242, 234, 224, 0.14); }
.glance > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(242, 234, 224, 0.14); }
.glance dt { font: var(--label); font-stretch: 78%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 4px; }
.glance dd { margin: 0; font-weight: 600; }
.plain__h { margin: var(--sc-7) 0 0; font-size: 0.86rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.plain__h + .steps { margin-top: var(--sc-4); }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 8px 0 8px 2.4rem; color: var(--sc-ink-soft); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 6px; font-family: var(--sc-font-display); color: var(--sc-accent); font-size: 1.15rem; line-height: 1.4; }
.steps strong { color: var(--sc-ink); font-weight: 650; }
.plain__faq > h2 { margin-bottom: var(--sc-5); }
.qa { padding: 18px 0; border-top: 1px solid rgba(242, 234, 224, 0.14); }
.qa h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 650; line-height: 1.35; }
.qa p { margin: 0; color: var(--sc-ink-soft); max-width: 62ch; }
@media (max-width: 860px) {
  .plain__grid { grid-template-columns: 1fr; }
  .glance > div { grid-template-columns: 6.5rem 1fr; }
}

/* ---------------------------------------------------- No. 36: yours */
.yours { padding-block: clamp(4rem, 9vw, 9rem) clamp(2.5rem, 4vw, 4rem); background: var(--sc-canvas); }
.yours__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.yours__intro { display: flex; flex-direction: column; gap: var(--sc-4); }
.yours__lede { margin: 0; color: var(--sc-ink-soft); max-width: 26rem; font-size: 1.08rem; }
.maker { display: flex; flex-direction: column; gap: var(--sc-5); }
@media (max-width: 860px) { .yours__grid { grid-template-columns: 1fr; } }

/* fields and chips, shared by the builder and the order slip */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, legend { font-size: 0.82rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink-soft); }
.opt { text-transform: none; letter-spacing: 0; font-weight: 450; font-stretch: 100%; color: #8f837b; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font-size: 1rem; color: var(--sc-ink);
  background: #1a1411; border: 1px solid #4a3d36; border-radius: var(--sc-r-sm);
  transition: border-color 150ms var(--sc-ease-out), background-color 150ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: #6b5a50; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: var(--sc-accent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #ff8f6b; }
#m-words { font-family: var(--sc-font-display); font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; padding: 10px 14px; }
.field__help { margin: 0; font-size: 0.88rem; color: #9d9189; }
.field__err { margin: 0; min-height: 0; font-size: 0.9rem; color: #ffa48a; font-weight: 600; }
.field__err:empty { display: none; }
.chips { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { width: 100%; padding: 0; margin-bottom: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-weight: 600; font-size: 0.95rem;
  border: 1px solid #4a3d36; border-radius: var(--sc-r-sm); background: #1a1411;
  transition: border-color 150ms var(--sc-ease-out), background-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.chips label:hover span { border-color: #7a6658; }
.chips input:checked + span { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.chips input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.chips--small span { min-height: 42px; font-size: 0.9rem; }

/* ---------------------------------------------------- the cut */
.cut { background: var(--sc-canvas); }
.cut__stage { background: radial-gradient(ellipse 70% 60% at 50% 48%, #221a16 0%, var(--sc-canvas) 70%); }
.cut__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cut__status {
  position: absolute; left: 50%; bottom: clamp(18px, 5vh, 48px); transform: translateX(-50%);
  margin: 0; display: flex; gap: 14px; align-items: baseline;
  font-size: 0.82rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.cut__pct { color: var(--sc-accent); font-variant-numeric: tabular-nums; min-width: 4ch; }

/* ---------------------------------------------------- the order slip */
.slip { padding-block: clamp(3.5rem, 7vw, 7rem) clamp(4rem, 8vw, 8rem); background: var(--sc-canvas); }
.slip__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.slip__label {
  display: flex; flex-direction: column; gap: var(--sc-4);
  padding: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(#211a16, #1a1411);
  border: 1px solid rgba(242, 234, 224, 0.1);
  box-shadow: var(--sc-e2), inset 0 1px 0 rgba(242, 234, 224, 0.07);
  border-radius: var(--sc-r-md);
}
.slip__preview { width: 100%; height: auto; aspect-ratio: 5 / 3; display: block; }
.slip__spec { margin: 0; }
.slip__spec > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(242, 234, 224, 0.1); }
.slip__spec dt { font: var(--label); font-stretch: 78%; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 3px; }
.slip__spec dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.slip__spec dd[data-spec="words"] { font-family: var(--sc-font-display); font-weight: 400; letter-spacing: 0.02em; }
.slip__note { margin: 0; color: var(--sc-ink-soft); font-size: 0.95rem; }
.order { display: flex; flex-direction: column; gap: var(--sc-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--sc-accent); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.order__notice { margin: 0; font-size: 0.9rem; color: #a3968d; }
.order__notice a { text-underline-offset: 0.2em; }
.order__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.order__foot p { margin: 0; color: var(--sc-ink-soft); }
.order__msg { margin: 0; padding: 12px 14px; border: 1px solid #a3482a; background: #2a130b; color: #ffc2ad; border-radius: var(--sc-r-sm); }
.sent { padding: 28px; border: 1px solid rgba(240, 116, 34, 0.5); background: #1d1511; border-radius: var(--sc-r-md); }
.sent > * + * { margin-top: var(--sc-3); }
.sent p { margin-bottom: 0; color: var(--sc-ink-soft); }
.sent:focus { outline: none; }
@media (max-width: 860px) {
  .slip__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- footer: the maker's plate */
.foot { background: #0f0c0a; border-top: 1px solid rgba(242, 234, 224, 0.08); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.foot__plate {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; max-width: 420px;
  background: #111;
  border: 1px solid rgba(242, 234, 224, 0.1);
  box-shadow: inset 0 1px 0 rgba(242, 234, 224, 0.08), var(--sc-e2);
}
.foot__mark { width: 76px; height: 76px; -webkit-mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); mask-image: radial-gradient(closest-side, #000 82%, transparent 100%); }
.foot__word { width: min(260px, 60%); height: auto; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.foot__h { margin: 0 0 10px; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: inline-block; padding: 6px 0; text-decoration-color: rgba(242, 234, 224, 0.3); text-underline-offset: 0.25em; }
.foot li a:hover { color: var(--accent-hi); }
.foot__links { padding-top: 26px; }
.foot__legal { margin-top: 36px; font-size: 0.86rem; color: #8f837b; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr; } .foot__links { padding-top: 0; } }

/* ---------------------------------------------------- inner pages */
.page { padding-top: calc(var(--bar-h) + clamp(28px, 6vw, 72px)); }
.page__head { display: flex; flex-direction: column; gap: var(--sc-4); max-width: 46rem; }
.page__head p { margin: 0; color: var(--sc-ink-soft); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sc-7) 0 var(--sc-6); }
.filter {
  min-height: 44px; padding: 0 16px; cursor: pointer;
  font-weight: 650; font-stretch: 78%; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink); background: #1a1411; border: 1px solid #4a3d36; border-radius: var(--sc-r-sm);
  transition: background-color 150ms var(--sc-ease-out), border-color 150ms var(--sc-ease-out), color 150ms var(--sc-ease-out);
}
.filter:hover { border-color: #7a6658; }
.filter[aria-pressed="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(28px, 3vw, 44px) clamp(18px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none; }
.catalog .obj { width: auto; }
.catalog .obj__ask { grid-column: 2; margin-top: 6px; font-size: 0.92rem; }
.legal { max-width: 46rem; }
.legal h2 { margin: var(--sc-7) 0 var(--sc-3); font-family: var(--sc-font-text); font-size: 1.25rem; font-weight: 700; letter-spacing: 0; }
.legal h3 { margin: var(--sc-5) 0 var(--sc-2); font-size: 1.05rem; font-weight: 650; }
.legal p, .legal li { color: #d8ccc0; }
.legal ul { padding-left: 1.2rem; }
.legal li + li { margin-top: 6px; }
.updated { color: var(--sc-ink-soft); }
.gpc { padding: 14px 16px; border: 1px solid rgba(240, 116, 34, 0.5); background: #1d1511; border-radius: var(--sc-r-sm); }
.request { margin-top: var(--sc-5); padding: clamp(18px, 2.4vw, 28px); background: #1a1411; border: 1px solid rgba(242, 234, 224, 0.1); border-radius: var(--sc-r-md); }
.request select {
  width: 100%; min-height: 48px; padding: 0 12px; font-size: 1rem; color: var(--sc-ink);
  background: #14100e; border: 1px solid #4a3d36; border-radius: var(--sc-r-sm);
}
.request select:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.lost { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: var(--sc-5); align-items: flex-start; }