/* ============================================================
   FELT — feltliketime.au
   Editorial publication that happens to sell shirts.
   ============================================================ */
@import url('colors_and_type.css');

/* Slightly looser values overriding the kit defaults — the site needs
   air. Generous outer margins on desktop, room for the page to breathe. */
:root {
  --page-gutter: clamp(20px, 5vw, 96px);
  --page-max:   1480px;
  --rule:       color-mix(in srgb, var(--felt-elpaso) 18%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--felt-milk);
  color: var(--felt-elpaso);
  font-family: var(--font-sans);
  font-size: 15px;
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ============================================================
   MASTHEAD — like a newspaper. Three columns of metadata, the
   wordmark in the center, set quietly. No fixed/sticky behaviour.
   ============================================================ */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 32px;
  padding: 28px 0 18px;
  border-bottom: 1px solid var(--felt-elpaso);
}
.masthead .left,
.masthead .right {
  display: grid;
  grid-template-columns: auto auto;
  gap: 4px 24px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--felt-camo);
  align-self: end;
  align-content: end;
}
.masthead .left dt,
.masthead .right dt {
  color: var(--felt-sage);
  font-weight: 400;
}
.masthead .left dd,
.masthead .right dd {
  margin: 0;
  color: var(--felt-elpaso);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.masthead .right { justify-content: end; text-align: right; }
.masthead .right dl,
.masthead .left dl { display: contents; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  color: var(--felt-elpaso);
}
.wordmark .word-img {
  height: clamp(26px, 3.2vw, 48px);
  width: auto;
  display: block;
  color: var(--felt-elpaso);
}
.wordmark .mark {
  width: clamp(28px, 2.8vw, 42px);
  height: auto;
  align-self: center;
  color: var(--felt-camo);
  display: block;
  margin-top: -2px;
}

/* Sub-bar under masthead: tiny inline nav and account/cart strip */
.subbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt-camo);
}
.subbar nav, .subbar .right-nav {
  display: flex;
  gap: 22px;
}
.subbar a {
  text-decoration: none;
  color: var(--felt-camo);
  cursor: pointer;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.subbar a:hover,
.subbar a.active { color: var(--felt-elpaso); border-bottom-color: var(--felt-elpaso); }
.subbar .cart-btn {
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt-camo);
  cursor: pointer;
}
.subbar .cart-btn:hover { color: var(--felt-elpaso); }

/* ============================================================
   HOMEPAGE — editorial issue.
   The first screen is the shirt copy at full editorial scale.
   No image. The shirt is the punchline.
   ============================================================ */

/* Issue dateline directly under sub-bar */
.dateline {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  padding: 28px 0 18px;
}
.dateline .lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--felt-elpaso);
  max-width: 42ch;
  margin: 0;
  letter-spacing: -0.005em;
}
.dateline .stamp {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--felt-camo);
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}
.dateline .stamp .head {
  display: block;
  color: var(--felt-elpaso);
  font-family: var(--font-sans);
  font-weight: 500;
  margin-bottom: 4px;
}

/* The opening — shirt copy as full-page type */
.opening {
  border-top: 1px solid var(--felt-elpaso);
  border-bottom: 1px solid var(--felt-elpaso);
  padding: clamp(64px, 9vw, 140px) 0 clamp(48px, 7vw, 96px);
}
.opening .stencil {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 168px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--felt-elpaso);
  margin: 0;
  text-wrap: balance;
}
.opening .stencil em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.opening .footnote {
  margin-top: clamp(40px, 6vw, 88px);
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt-camo);
}
.opening .footnote .label {
  font-family: var(--font-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--felt-sage);
}
.opening .footnote .read-on {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.opening .footnote .read-on:hover { color: var(--felt-elpaso); }
.opening .footnote .read-on .arrow {
  display: inline-block;
  transform: translateY(1px);
  transition: transform var(--dur-base) var(--ease-standard);
}
.opening .footnote .read-on:hover .arrow { transform: translate(2px, 1px); }

/* The reveal — shirt itself, after the copy. Paired column with caption. */
.reveal {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 96px);
  padding: clamp(48px, 7vw, 112px) 0 clamp(64px, 9vw, 128px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}
.reveal .meta {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}
.reveal .meta .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-sage);
}
.reveal .meta h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.reveal .meta .caption {
  max-width: 36ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--felt-elpaso);
  margin: 0;
}
.reveal .meta .meta-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--felt-camo);
}
.reveal .meta .meta-row dt { color: var(--felt-sage); font-weight: 400; }
.reveal .meta .meta-row dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; color: var(--felt-elpaso); }
.reveal .meta .read { margin-top: 4px; }
.reveal .photo {
  background: var(--felt-bone);
  aspect-ratio: 4/5;
  overflow: hidden;
  cursor: pointer;
}
.reveal .photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.04);
  transition: filter 700ms var(--ease-standard);
}
.reveal .photo:hover img { filter: saturate(1) contrast(1); }

/* ============================================================
   THE RANGE — asymmetric editorial grid. Eight slots, varied widths.
   Price lives inline beside the title — never under a card.
   ============================================================ */
.range {
  padding: clamp(64px, 8vw, 128px) 0 clamp(80px, 10vw, 160px);
}
.range-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--felt-elpaso);
  margin-bottom: clamp(40px, 5vw, 80px);
}
.range-head .h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: 0.01em;
  line-height: 0.86;
  text-transform: uppercase;
  margin: 0;
}
.range-head .lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.5;
  color: var(--felt-camo);
  max-width: 40ch;
  margin: 0 auto 4px 0;
}
.range-head .count {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--felt-camo);
  font-variant-numeric: tabular-nums;
  text-align: right;
  align-self: end;
}

/* Twelve-column grid, used asymmetrically. */
.range-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: clamp(48px, 6vw, 112px);
}

/* Editorial entries — different sizes and offsets break alignment on purpose.
   Each entry reads as a numbered print plate: a plate header with the number
   set in display type and a hairline rule, then the photograph, then the
   title/price line. Photos sit slightly desaturated and resolve to full
   colour on hover. */
.entry { display: flex; flex-direction: column; gap: 14px; cursor: pointer; }
.entry .plate-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--felt-elpaso);
}
.entry .plate-head .num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 32px);
  letter-spacing: 0.02em;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--felt-elpaso);
  font-variant-numeric: tabular-nums;
}
.entry .plate-head .kind {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--felt-sage);
  align-self: end;
}
.entry .photo {
  background: var(--felt-bone);
  overflow: hidden;
  position: relative;
}
.entry .photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.78) contrast(1.04);
  transition: transform 800ms var(--ease-standard),
              filter 700ms var(--ease-standard);
}
.entry:hover .photo img {
  transform: scale(1.015);
  filter: saturate(1) contrast(1);
}
.entry .line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding-top: 4px;
  border-top: 1px solid var(--felt-elpaso);
}
.entry .title-block {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.entry .title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.18;
  text-wrap: balance;
}
.entry .sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: var(--felt-sage);
  letter-spacing: 0;
}
.entry .price {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--felt-elpaso);
  white-space: nowrap;
}
.entry .price.soldout {
  color: var(--felt-sage);
  text-decoration: line-through;
}

/* Slot variants — placement on the 12-col grid */
.slot-wide       { grid-column: 1 / span 12; }
.slot-fullbleed  { grid-column: 1 / span 12; }
.slot-half-l     { grid-column: 1 / span 6; }
.slot-half-r     { grid-column: 7 / span 6; }
.slot-narrow-l   { grid-column: 1 / span 4; }
.slot-narrow-c   { grid-column: 5 / span 4; }
.slot-narrow-r   { grid-column: 9 / span 4; }
.slot-tall-l     { grid-column: 1 / span 5; }
.slot-tall-r     { grid-column: 8 / span 5; }
.slot-mid        { grid-column: 4 / span 6; }
.slot-pull-r     { grid-column: 6 / span 7; }
.slot-pull-l     { grid-column: 1 / span 7; }
.slot-third-r    { grid-column: 9 / span 4; align-self: end; }
.slot-third-c    { grid-column: 5 / span 4; align-self: end; }

/* Aspect ratio modifiers */
.ar-tall  { aspect-ratio: 4/5; }
.ar-portrait { aspect-ratio: 3/4; }
.ar-square { aspect-ratio: 1/1; }
.ar-landscape { aspect-ratio: 5/4; }
.ar-wide { aspect-ratio: 8/5; }

/* Marginalia — a small editorial note pulled into the gutter */
.marginalia {
  grid-column: 1 / span 4;
  align-self: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  color: var(--felt-elpaso);
  text-wrap: balance;
  letter-spacing: -0.005em;
  max-width: 36ch;
}
.marginalia .small {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-sage);
}

/* ============================================================
   COLOPHON FOOTER — reads like a publication's masthead. Not a sitemap.
   ============================================================ */
.colophon {
  margin-top: clamp(64px, 8vw, 128px);
  border-top: 1px solid var(--felt-elpaso);
  padding: clamp(48px, 6vw, 96px) 0 32px;
}
.colophon .grid {
  display: grid;
  grid-template-columns: 5fr 3fr 3fr 3fr;
  gap: clamp(24px, 4vw, 64px);
}
.colophon h5 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--felt-sage);
  font-weight: 500;
}
.colophon p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--felt-elpaso);
  max-width: 32ch;
  margin: 0;
}
.colophon .lines {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.6; color: var(--felt-elpaso);
}
.colophon a { color: inherit; text-decoration: none; cursor: pointer; }
.colophon a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.colophon .signoff {
  margin-top: clamp(48px, 6vw, 96px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt-camo);
}
.colophon .signoff .lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--felt-elpaso);
}
.colophon .signoff .lockup .word-img { height: 18px; width: auto; display: block; color: var(--felt-elpaso); }
.colophon .signoff .lockup .mark { width: 22px; height: auto; color: var(--felt-camo); display: block; }

/* ============================================================
   PRODUCT PAGE — flat-lay led, plain-text everything.
   ============================================================ */
.product {
  padding: clamp(40px, 5vw, 88px) 0 clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.product .gallery {
  display: grid;
  gap: 12px;
}
.product .gallery .main {
  background: var(--felt-bone);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.product .gallery .main img { width: 100%; height: 100%; object-fit: cover; }
.product .gallery .strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
.product .gallery .strip .thumb {
  aspect-ratio: 1/1;
  background: var(--felt-bone);
  cursor: pointer;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.product .gallery .strip .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product .gallery .strip .thumb.active { border-color: var(--felt-elpaso); }

.product .info {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
}
.product .info .index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-camo);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.product .info .index .right { text-align: right; }
.product .info h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 28px 0 8px;
  text-wrap: balance;
}
.product .info h1 em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}
.product .info .price-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 16px;
  color: var(--felt-elpaso);
  font-variant-numeric: tabular-nums;
  margin-bottom: 32px;
}
.product .info .price-line .currency {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-sage);
}
.product .info .copy {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--felt-elpaso);
  max-width: 32ch;
  margin: 0 0 36px;
  letter-spacing: -0.01em;
}
.product .info .desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--felt-elpaso);
  max-width: 38ch;
  margin: 0 0 36px;
}

/* Plain-text size selector — "S M L XL" in a row, active size in bold + underline.
   No pills, no chunky chips. */
.size-row-text {
  display: flex;
  gap: 28px;
  align-items: baseline;
  padding: 14px 0 18px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.size-row-text .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-sage);
  margin-right: 8px;
}
.size-row-text .sizes {
  display: flex;
  gap: 22px;
  flex: 1;
}
.size-row-text .sizes button {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  color: var(--felt-elpaso);
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0 0 2px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.size-row-text .sizes button:hover { color: var(--felt-elpaso); border-bottom-color: var(--rule); }
.size-row-text .sizes button.active {
  font-weight: 700;
  border-bottom-color: var(--felt-elpaso);
}
.size-row-text .sizes button.soldout {
  color: var(--felt-sage);
  text-decoration: line-through;
  cursor: not-allowed;
}
.size-row-text .guide {
  font-size: 12px;
  color: var(--felt-camo);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  cursor: pointer;
}
.size-row-text .guide:hover { text-decoration-color: var(--felt-elpaso); }

/* "Add to cart" is a text link — not a button. */
.cart-link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--felt-elpaso);
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--felt-elpaso);
  transition: text-decoration-color var(--dur-fast) var(--ease-standard),
              opacity var(--dur-base) var(--ease-standard);
}
.cart-link:hover { text-decoration-color: var(--felt-camo); }
.cart-link[aria-disabled="true"] {
  color: var(--felt-sage);
  text-decoration-color: var(--felt-sage);
  cursor: default;
  pointer-events: none;
}
.cart-link .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-standard);
}
.cart-link:hover .arrow { transform: translateX(4px); }
.cart-link.added { color: var(--felt-camo); text-decoration-color: var(--felt-camo); }

.product .info .specs {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 32px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--felt-elpaso);
}
.product .info .specs dt {
  color: var(--felt-sage);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: start;
  padding-top: 2px;
}
.product .info .specs dd { margin: 0; max-width: 36ch; }

/* Back link */
.back-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-camo);
  cursor: pointer;
  text-decoration: none;
  padding: 24px 0 0;
}
.back-link:hover { color: var(--felt-elpaso); }

/* ============================================================
   ABOUT / CONTACT — editorial body pages
   ============================================================ */
.editorial {
  padding: clamp(48px, 7vw, 112px) 0 clamp(64px, 8vw, 128px);
}
.editorial .header {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--felt-elpaso);
  margin-bottom: clamp(32px, 4vw, 56px);
  align-items: end;
}
.editorial .body {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
}
.editorial .kicker {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--felt-sage);
  margin: 0 0 12px;
}
.editorial h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
.editorial h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.editorial .body .side {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-camo);
  display: flex; flex-direction: column; gap: 18px;
}
.editorial .body .side dl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; }
.editorial .body .side dt { color: var(--felt-sage); font-weight: 400; }
.editorial .body .side dd { margin: 0; color: var(--felt-elpaso); }
.editorial .body .prose {
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--felt-elpaso);
}
.editorial .body .prose p { margin: 0 0 1.2em; max-width: none; }
.editorial .body .prose p:first-of-type::first-line { font-weight: 600; }
.editorial .body .prose .pullquote {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--felt-elpaso);
  margin: 36px 0;
  padding: 0;
  border: 0;
  text-wrap: balance;
}

/* Contact form — minimal, editorial */
.contact-form {
  display: flex; flex-direction: column;
  gap: 18px;
  max-width: 50ch;
  margin-top: 24px;
}
.contact-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-sage);
}
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--felt-elpaso);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--felt-elpaso);
  padding: 8px 0;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
}
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--felt-elpaso); background: rgba(0,0,0,0.02); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button {
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--felt-elpaso);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.contact-form button:hover { text-decoration-color: var(--felt-camo); }

/* ============================================================
   CART DRAWER — sober, single column
   ============================================================ */
.scrim {
  position: fixed; inset: 0;
  background: rgba(52,52,40,0.32);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
  z-index: 50;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--felt-milk);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-standard);
  z-index: 51;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--felt-elpaso);
}
.drawer.open { transform: translateX(0); }
.drawer .head {
  padding: 28px 32px 18px;
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--felt-elpaso);
}
.drawer .head .title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--felt-elpaso);
}
.drawer .head .count {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--felt-camo);
  font-variant-numeric: tabular-nums;
}
.drawer .close {
  position: absolute;
  top: 30px; right: 32px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--felt-camo);
  cursor: pointer;
}
.drawer .close:hover { color: var(--felt-elpaso); }
.drawer .items {
  flex: 1; overflow: auto;
  padding: 0 32px;
}
.drawer .item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.drawer .item img { width: 72px; height: 90px; object-fit: cover; background: var(--felt-bone); }
.drawer .item .name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.drawer .item .opts { margin-top: 6px; font-size: 12px; color: var(--felt-camo); letter-spacing: 0.04em; }
.drawer .item .row {
  margin-top: 14px;
  display: flex; gap: 18px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--felt-camo);
}
.drawer .item .row a {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.drawer .item .row a:hover { text-decoration-color: var(--felt-elpaso); color: var(--felt-elpaso); }
.drawer .item .price {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--felt-elpaso);
}
.drawer .empty {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: 48px 32px;
  gap: 14px;
}
.drawer .empty p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--felt-elpaso);
  margin: 0;
  max-width: 22ch;
  letter-spacing: -0.01em;
}
.drawer .empty small {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--felt-sage);
}
.drawer .foot {
  padding: 22px 32px 28px;
  border-top: 1px solid var(--felt-elpaso);
  display: flex; flex-direction: column; gap: 10px;
}
.drawer .foot .row {
  display: flex; justify-content: space-between;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--felt-elpaso);
}
.drawer .foot .row.total {
  font-size: 16px;
  font-weight: 700;
}
.drawer .foot small {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--felt-sage);
}
.drawer .foot .checkout {
  margin-top: 14px;
  align-self: flex-start;
  font-size: 18px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.drawer .foot .checkout:hover { text-decoration-color: var(--felt-camo); }
.drawer .foot .checkout .arrow { display: inline-block; margin-left: 8px; transition: transform var(--dur-base) var(--ease-standard); }
.drawer .foot .checkout:hover .arrow { transform: translateX(4px); }

/* ============================================================
   CHECKOUT / CART PAGE — single column form, plain
   ============================================================ */
.checkout {
  padding: clamp(40px, 5vw, 88px) 0 clamp(64px, 8vw, 112px);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(48px, 6vw, 112px);
  align-items: start;
}
.checkout .form {
  display: flex; flex-direction: column;
  gap: 36px;
  max-width: 56ch;
}
.checkout h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
}
.checkout h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--felt-elpaso);
  display: flex; justify-content: space-between; align-items: baseline;
}
.checkout h2 small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--felt-sage);
}
.checkout .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
}
.checkout .field { display: flex; flex-direction: column; gap: 4px; }
.checkout .field.full { grid-column: 1 / -1; }
.checkout .field label {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--felt-sage);
}
.checkout .field input,
.checkout .field select {
  font: inherit;
  font-family: var(--font-sans);
  font-size: 16px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--felt-elpaso);
  padding: 8px 0;
  outline: none;
  color: var(--felt-elpaso);
}
.checkout .field input:focus,
.checkout .field select:focus { background: rgba(0,0,0,0.02); }

.checkout .summary {
  position: sticky;
  top: 24px;
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px 28px;
  background: var(--felt-bone);
}
.checkout .summary h3 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--felt-camo);
  margin: 0 0 6px;
  font-weight: 500;
}
.checkout .summary .lines {
  display: flex; flex-direction: column; gap: 14px;
}
.checkout .summary .line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  font-size: 13px;
  align-items: start;
}
.checkout .summary .line img { width: 56px; height: 70px; object-fit: cover; background: var(--felt-milk); }
.checkout .summary .line .name { font-weight: 700; letter-spacing: -0.01em; }
.checkout .summary .line .opts { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--felt-camo); margin-top: 4px; }
.checkout .summary .line .price { font-variant-numeric: tabular-nums; }
.checkout .summary .totals {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.checkout .summary .totals .row { display: flex; justify-content: space-between; }
.checkout .summary .totals .row.total {
  margin-top: 6px; padding-top: 10px;
  border-top: 1px solid var(--felt-elpaso);
  font-size: 15px;
  font-weight: 700;
}
.checkout .place {
  margin-top: 12px;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.checkout .place:hover { text-decoration-color: var(--felt-camo); }
.checkout .legal {
  font-size: 12px; line-height: 1.6; color: var(--felt-camo);
  max-width: 50ch;
}

/* ============================================================
   CONFIRMATION
   ============================================================ */
.confirmation {
  padding: clamp(80px, 10vw, 160px) 0;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.confirmation .number {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.86;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--felt-elpaso);
  font-variant-numeric: tabular-nums;
}
.confirmation .number small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--felt-sage);
  font-weight: 500;
  margin-bottom: 14px;
}
.confirmation .body p {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--felt-elpaso);
  max-width: 36ch;
  margin: 0 0 24px;
  letter-spacing: -0.005em;
}
.confirmation .body .meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 32px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt-camo);
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.confirmation .body .meta dt { color: var(--felt-sage); }
.confirmation .body .meta dd { margin: 0; color: var(--felt-elpaso); }

/* ============================================================
   COOKIE NOTICE — bare legal minimum, single line
   ============================================================ */
.cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--felt-elpaso);
  color: var(--felt-milk);
  padding: 12px var(--page-gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.cookie.show { transform: translateY(0); }
.cookie p { margin: 0; max-width: 60ch; color: var(--felt-milk); font-family: var(--font-sans); font-size: 12px; line-height: 1.4; }
.cookie .actions { display: flex; gap: 18px; }
.cookie button {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--felt-milk);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ============================================================
   PayID payment block — checkout
   ============================================================ */
.checkout .payid {
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--felt-bone) 60%, transparent);
  padding: 24px 26px 22px;
}
.checkout .payid-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.checkout .payid-head .badge {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--felt-milk);
  background: var(--felt-elpaso);
  padding: 6px 10px 5px;
  line-height: 1;
}
.checkout .payid-head .microcopy {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--felt-elpaso);
  letter-spacing: -0.005em;
}
.checkout .payid-head .why {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  color: var(--felt-camo);
  margin-left: 4px;
}
.checkout .payid-target {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--felt-milk);
  border: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.checkout .payid-target .addr {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 500;
  color: var(--felt-elpaso);
  letter-spacing: -0.005em;
}
.checkout .payid-target .ref {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--felt-camo);
  text-transform: uppercase;
}
.checkout .payid-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--felt-camo);
  letter-spacing: -0.005em;
}
.checkout .payid-note strong {
  color: var(--felt-elpaso);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Responsive — collapse asymmetric grid gracefully
   ============================================================ */
@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr; gap: 16px; padding: 20px 0 14px; }
  .masthead .left, .masthead .right { justify-content: start; text-align: left; }
  .masthead .right { justify-content: start; text-align: left; }
  .subbar { flex-direction: column; gap: 8px; align-items: flex-start; }
  .dateline { grid-template-columns: 1fr; }
  .dateline .stamp { text-align: left; }
  .reveal { grid-template-columns: 1fr; gap: 32px; }
  .reveal .meta { position: static; }
  .range-grid { row-gap: 48px; }
  .range-grid > * { grid-column: 1 / -1 !important; }
  .marginalia { grid-column: 1 / -1; }
  .colophon .grid { grid-template-columns: 1fr 1fr; }
  .product { grid-template-columns: 1fr; gap: 32px; }
  .product .info { position: static; }
  .editorial .header, .editorial .body { grid-template-columns: 1fr; gap: 24px; }
  .checkout { grid-template-columns: 1fr; gap: 32px; }
  .confirmation { grid-template-columns: 1fr; gap: 24px; }
  .opening .stencil { font-size: clamp(40px, 11vw, 80px); }
}

/* ───── Email signup (plain, no popups) ───── */
.signup { margin: 0; }
.signup .signup-line {
  font-size: 15px; line-height: 1.5; color: var(--felt-camo, #555542);
  margin: 0 0 14px; max-width: 42ch;
}
.signup form { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.signup input {
  flex: 1; min-width: 200px; padding: 11px 13px; font-size: 14px;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--felt-elpaso, #343428);
  background: var(--felt-milk, #f6f5f1);
  border: 1px solid var(--rule, #dcdbd2); border-radius: 0;
}
.signup input:focus { outline: none; border-color: var(--felt-camo, #555542); }
.signup button {
  padding: 11px 20px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-sans, system-ui, sans-serif); font-weight: 500;
  background: var(--felt-elpaso, #343428); color: var(--felt-milk, #f6f5f1);
  border: none; cursor: pointer; white-space: nowrap;
}
.signup button:hover { background: var(--felt-drab, #413f32); }
.signup button:disabled { opacity: 0.6; cursor: default; }
.signup .signup-done { font-size: 15px; color: var(--felt-elpaso, #343428); margin: 0; }
.signup .signup-err { font-size: 12px; color: #9b2c2c; align-self: center; width: 100%; }
.signup.on-dark .signup-line { color: var(--felt-bone, #e3e3db); }
.signup.on-dark input { background: transparent; border-color: rgba(255,255,255,0.25); color: var(--felt-milk, #f6f5f1); }
.signup.on-dark button { background: var(--felt-milk, #f6f5f1); color: var(--felt-elpaso, #343428); }

/* Home + page signup framing */
.home-signup { border-top: 1px solid var(--rule, #dcdbd2); margin-top: 64px; padding-top: 40px; }
.home-signup h3, .page-signup h3 {
  font-family: var(--font-display, sans-serif); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 13px; font-weight: 500;
  color: var(--felt-sage, #969677); margin: 0 0 14px;
}
.page-signup { border-top: 1px solid var(--rule, #dcdbd2); margin-top: 56px; padding-top: 36px; max-width: 60ch; }
.footer-signup { border-top: 1px solid var(--rule, #dcdbd2); margin-top: 36px; padding-top: 28px; max-width: 460px; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--rule, #dcdbd2);
}
.footer-legal a {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--felt-camo, #555542); cursor: pointer; text-decoration: none;
}
.footer-legal a:hover { color: var(--felt-elpaso, #343428); text-decoration: underline; text-underline-offset: 3px; }