/* Dutertismo Co. — storefront
   Palette from the macaw board: navy/teal water, sand/cream paper, the red sun.
   Type: Fraunces (sturdy display — never a thin serif), Figtree 18px body,
   JetBrains Mono only for small labels and data. */

:root {
  --paper: color-mix(in srgb, var(--cream) 45%, #fff);   /* her cream, thinned to paper */
  --line: rgba(0, 18, 25, .14);
  --shadow: 0 1px 2px rgba(0,18,25,.06), 0 12px 32px -12px rgba(0,18,25,.22);
  --radius: 14px;
  --display: 'Fraunces', Georgia, serif;
  --body: 'Figtree', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --head-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 18px/1.6 var(--body); color: var(--navy); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { max-width: 100%; display: block; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 99; border-radius: 8px; }
.skip:focus { left: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { width: min(1280px, 100% - 32px); margin-inline: auto; }
.wrap.narrow { width: min(860px, 100% - 32px); }
.center { text-align: center; }
.muted { color: color-mix(in srgb, currentColor 62%, transparent); }
.small { font-size: 14px; }
.eyebrow { font: 600 12px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 18px; }
.display { font: 700 clamp(34px, 5vw, 64px)/1.02 var(--display); font-variation-settings: 'opsz' 96; letter-spacing: -.02em; margin: 0 0 20px; text-wrap: balance; }
.sub { font-size: 20px; max-width: 60ch; margin: 0 auto 28px; }
.ph { background: linear-gradient(135deg, var(--sand), var(--mint)); aspect-ratio: 4/5; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ---------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 2px solid transparent;
  font: 700 15px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-solid { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--red) 70%, transparent); }
.btn-solid:hover { background: var(--wine); }
.btn-line { border-color: currentColor; background: transparent; }
.btn-line:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn-light { background: var(--cream); color: var(--navy); }
.btn-ghost-light { border-color: color-mix(in srgb, var(--cream) 70%, transparent); color: var(--cream); backdrop-filter: blur(6px); background: rgba(0,18,25,.18); }
.btn-ghost-light:hover { background: var(--cream); color: var(--navy); }
.btn-block { width: 100%; }
.btn-lg { min-height: 60px; font-size: 16px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; position: relative; text-decoration: none; }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { background: rgba(234,226,183,.12); }

/* ---------------------------------------------------------- header */
.announce { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 9px 16px; font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.announce a { text-decoration: none; border-bottom: 1px solid currentColor; }
/* the two sides carry the same weight, so the wordmark sits on the middle of
   the screen rather than just somewhere between them (her word, 21 Sep 2026) */
.site-head { position: sticky; top: 0; z-index: 40; height: var(--head-h); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 clamp(12px, 3vw, 40px);
  background: var(--nav-bg); color: var(--nav-ink); transition: box-shadow .3s; }
.site-head.scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.nav-left { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 18px); padding-right: 18px; min-width: 0; }
/* Her word, 10 Oct 2026: the bar at the top is 12px — on every screen, not a
   number that shrinks to 10 on a narrow one. The footer's SHOP, HELP and
   CONTACT stay at the 10px she set there. */
.nav-left a { text-decoration: none; font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; opacity: .86; padding: 8px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-left a:hover { opacity: 1; border-color: var(--nav-accent); }
/* About is a word in the bar that opens the sub-navigation (6 Oct 2026) */
.nav-word { background: none; border: 0; padding: 8px 0; color: inherit; cursor: pointer;
  font: 600 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase;
  opacity: .86; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-word:hover, .nav-word.on { opacity: 1; border-color: var(--nav-accent); }
/* About names the row under it; it does not open or close anything any more */
.nav-word-still { cursor: default; opacity: 1; border-color: var(--nav-accent); }
/* The navigation's second row (her word, 10 Oct 2026). It sticks directly
   under the bar above it, so however far the page is scrolled it is still
   there — it is part of the navigation, not something that comes out and goes
   away again. */
.subnav { position: sticky; top: var(--head-h); z-index: 39;
  background: var(--nav-bg); color: var(--nav-ink); border-top: 1px solid color-mix(in srgb, var(--nav-ink) 14%, transparent); }
.subnav[hidden] { display: none; }
/* Her word, 10 Oct 2026: the row under About reads down the middle. */
.subnav-in { width: min(1280px, 100% - 32px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: clamp(14px, 2vw, 30px); padding: 14px 0 16px; }
/* 12px, the same as the row above it — it is one navigation now (10 Oct 2026) */
.subnav-in a { text-decoration: none; font: 600 12px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.subnav-in a:hover { opacity: 1; color: var(--nav-accent); }
.subnav-in a.sub-child { font-size: 12px; text-transform: none; letter-spacing: .02em; opacity: .62; }
.subnav-in a.sub-child::before { content: '↳'; margin-right: 6px; opacity: .7; }
.menu-btn { display: none; }
.wordmark { text-decoration: none; display: grid; justify-items: center; line-height: 1; }
.wordmark h1 { margin: 0; font: inherit; display: grid; justify-items: center; }
.wm-top { font: 800 26px/1 var(--display); letter-spacing: .16em; font-variation-settings: 'opsz' 144; }
.wm-co { font: 600 var(--tiny)/1 var(--mono); letter-spacing: .5em; margin-top: 6px; color: var(--nav-accent); padding-left: .5em; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.search { display: flex; align-items: center; background: color-mix(in srgb, var(--nav-ink) 12%, transparent); border-radius: 999px; padding-left: 14px; margin-right: 6px; }
.search input { background: none; border: 0; outline: 0; width: 150px; color: var(--nav-ink); font-size: 14px; }
.search input::placeholder { color: color-mix(in srgb, var(--nav-ink) 60%, transparent); }
.search .icon-btn { width: 38px; height: 38px; }
.cart-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--nav-accent); color: var(--nav-bg); font: 700 var(--tiny)/18px var(--body); text-align: center; padding: 0 5px; }
.cart-count:empty { display: none; }
.cart-count.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.45); } }
.mobile-menu { position: fixed; inset: 0; z-index: 60; background: var(--nav-bg); color: var(--nav-ink); display: flex; flex-direction: column; gap: 6px; padding: 80px 28px; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { font: 700 34px/1.3 var(--display); text-decoration: none; }
.mobile-menu .icon-btn { position: absolute; top: 16px; right: 16px; font-size: 22px; }
/* About gathers Manifesto, Community and Journal under it (6 Oct 2026) */
.menu-group { display: flex; flex-direction: column; gap: 2px; }
.menu-sub { display: flex; flex-direction: column; gap: 2px; padding-left: 22px; border-left: 2px solid currentColor; margin: 4px 0 10px; opacity: .78; }
.menu-sub a { font: 600 22px/1.45 var(--display); }
.menu-sub .menu-sub { margin: 2px 0 6px; opacity: .9; }
.menu-sub .menu-sub a { font-size: 18px; }

/* ---------------------------------------------------------- manifesto */
.manifesto { position: relative; padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; }
.manifesto .lede { font: 600 clamp(26px, 3.2vw, 40px)/1.25 var(--display); letter-spacing: -.01em; margin: 0 0 28px; text-wrap: pretty; }
.manifesto .lede-2 { font-size: 21px; max-width: 58ch; margin: 0 0 36px; }
.pull { margin: 0; padding: 4px 0 4px 24px; border-left: 4px solid; font: 600 italic 22px/1.45 var(--display); max-width: 48ch; }
.brush { position: absolute; right: -8vw; top: 12%; width: 34vw; aspect-ratio: 1; border-radius: 50%; opacity: .12; filter: blur(2px); }

/* ---------------------------------------------------------- product grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-bottom: 44px; }
.grid[hidden] { display: none; }
.card { min-width: 0; }
.card-img { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.card-img picture, .card-img .ph { position: absolute; inset: 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .5s var(--ease);  object-position: 50% 0%;   /* never crop a head off */ }
.card-img .img-b { opacity: 0; }
.card:hover .img-b { opacity: 1; }
.card:hover .img-a img { transform: scale(1.04); }
.badge { position: absolute; left: 12px; top: 12px; background: var(--red); color: #fff; font: 700 var(--tiny)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.badge.inline { position: static; display: inline-block; vertical-align: middle; font-size: var(--tiny); }
.card-meta { padding: 14px 4px 0; }
.card-meta h3 { font: 600 17px/1.3 var(--body); margin: 0 0 4px; }
.card-meta h3 a { text-decoration: none; }
.price { font: 600 15px/1 var(--mono); }
.price .from { font: 500 12px var(--body); opacity: .7; text-transform: uppercase; letter-spacing: .08em; }
.compare { font: 400 13px var(--mono); opacity: .5; }

/* ---------------------------------------------------------- film */
.film { padding: clamp(72px, 10vw, 130px) 0; }
.film-frame { position: relative; border-radius: 18px; overflow: hidden; margin: 12px auto 36px; box-shadow: 0 30px 60px -30px rgba(0,18,25,.55); aspect-ratio: 16/9; background: var(--navy); }
.film-frame video, .film-frame iframe, .film-frame picture, .film-frame img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.film-frame .yt, .film-frame .video-empty { all: unset; display: block; position: absolute; inset: 0; cursor: pointer; }
.play { position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: var(--rust); color: #fff; box-shadow: 0 0 0 14px rgba(255,255,255,.18); transition: transform .3s var(--ease); }
.play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.yt:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.fine { font-size: 14px; margin-top: 16px; opacity: .8; }

/* ---------------------------------------------------------- faq */
.faq { padding: clamp(72px, 10vw, 130px) 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font: 600 20px/1.35 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-style: normal; font-size: 20px; transition: transform .3s var(--ease); }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details p { margin: 0 0 26px; max-width: 64ch; }

/* ---------------------------------------------------------- final */
.final { position: relative; padding: clamp(90px, 13vw, 170px) 0; overflow: hidden; }
.final .display { font-size: clamp(40px, 6.4vw, 88px); }
.final-img { position: absolute; inset: 0; opacity: .25; }
.final-img img, .final-img picture { width: 100%; height: 100%; object-fit: cover;  object-position: 50% 0%;   /* never crop a head off */ }
.final-sun { position: absolute; width: 70vmin; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
.final .wrap { position: relative; }

/* ---------------------------------------------------------- footer */
.site-foot { background: var(--nav-bg); color: var(--nav-ink); padding: 72px 0 28px; }   /* the bar and the footer are one colour */
.foot-grid { width: min(1280px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 36px; }
.foot-grid h3 { font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--nav-accent); margin: 6px 0 18px; }
.foot-grid a { display: block; text-decoration: none; opacity: .82; padding: 4px 0; font-size: 12px; }   /* 12px, her pick 9 Oct 2026 — more links under Help */
.foot-grid a:hover { opacity: 1; }
.foot-mark { display: grid; justify-items: start; margin-bottom: 16px; }
.foot-mark .wm-co { padding-left: 0; }
/* The line under the mark carries the brand, so it is given its size and
   its full strength instead of sitting at body size (her word, 6 Oct 2026). */
.foot-line { font: 600 clamp(16px, 2.3vw, 32px)/1.2 var(--display); letter-spacing: -.015em;
  opacity: 1; margin: 0 0 22px; white-space: nowrap; }
.socials a { display: inline-block; margin-right: 16px; }
.pay-note { font-size: 12px; opacity: .8; }   /* 12px like the footer links (her word, 9 Oct 2026) */
.foot-base { width: min(1280px, 100% - 32px); margin: 56px auto 0; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--nav-ink) 16%, transparent); display: flex; justify-content: center; text-align: center; gap: 16px; flex-wrap: wrap; font: 500 13px var(--mono); opacity: .6; }   /* the copyright alone, centered (her word, 9 Oct 2026) */
/* Her credit, in her wording (23 Sep 2026). The base line is mono and tight;
   a whole sentence reads better at its own size, so it sits on its own row. */
.foot-credit { width: min(1280px, 100% - 32px); margin: 14px auto 0; padding-bottom: 8px; font: 400 13px/1.7 var(--body, inherit); opacity: .55; }

/* ---------------------------------------------------------- drawer */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,18,25,.5); animation: fade .3s; }
.drawer-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); display: flex; flex-direction: column; animation: slide .4s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font: 700 24px var(--display); margin: 0; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 20px; }
.drawer-foot { padding: 18px 20px 24px; border-top: 1px solid var(--line); }
.drawer-foot .row { display: flex; justify-content: space-between; font-size: 20px; margin-bottom: 6px; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.line img { width: 72px; height: 88px; object-fit: cover; border-radius: 10px; background: #fff;  object-position: 50% 0%; }
.line h4 { margin: 0 0 2px; font: 600 15px/1.3 var(--body); }
.line small { display: block; opacity: .65; font-size: 13px; }
.line .qty { margin-top: 8px; }
.line .rm { background: none; border: 0; font-size: 13px; text-decoration: underline; opacity: .6; padding: 4px 0; }
.line .lp { font: 600 14px var(--mono); }

/* ---------------------------------------------------------- listing */
.listing { padding: 48px 0 100px; }
.listing-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 36px; }
.listing-head .display { margin: 0; }
.listing-head p { flex-basis: 100%; margin: 0; order: 3; }
.sort { display: flex; gap: 16px; align-items: center; font-size: 15px; }
.sort select { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; }
.empty { padding: 60px 0; font-size: 20px; text-align: center; opacity: .7; }
.coll-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.coll { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4/5; text-decoration: none; }
.coll picture, .coll img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease);  object-position: 50% 0%;   /* never crop a head off */ }
.coll:hover img { transform: scale(1.05); }
.coll span { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; color: #fff; font: 700 28px var(--display); background: linear-gradient(transparent, rgba(0,18,25,.8)); }
.coll small { font: 600 13px var(--mono); opacity: .8; }

/* ---------------------------------------------------------- product page */
/* The trail sits under the wordmark, centred, in the same small letterspaced
   type as a section's eyebrow, and with no band of its own — it carries the
   colour of whatever is below it so the two read as one field (her word,
   21 Sep 2026). --crumb-bg and --crumb-ink are handed to it by the page. */
.crumbs { position: relative; display: flex; justify-content: center; gap: 10px;
  font: 600 var(--tiny) var(--mono); letter-spacing: 3px; text-transform: uppercase;
  padding: 18px 0; opacity: .75; color: var(--crumb-ink, inherit); }
.crumbs::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%); background: var(--crumb-bg, transparent); }
.crumbs a { text-decoration: none; color: inherit; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 72px); padding-bottom: 90px; align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--head-h) + 16px); display: grid; grid-template-columns: 76px 1fr; gap: 14px; }
.pdp-main { position: relative; grid-column: 2; grid-row: 1; border-radius: 18px; overflow: hidden; background: #fff; aspect-ratio: 4/5; box-shadow: var(--shadow); }
.pdp-main figure { margin: 0; height: 100%; }
.pdp-main figure[hidden] { display: none; }
.pdp-main img, .pdp-main picture { width: 100%; height: 100%; object-fit: cover;  object-position: 50% 0%; }
/* The other photos: small circles along the lower edge of the picture itself,
   centred (her word, 21 Sep 2026). They are small, so the crop is pulled to the
   face and the chest — that is where the person and the print both are, and a
   circle that shows neither is no use to anybody. */
.pdp-thumbs { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: row; gap: 9px; max-height: none; overflow: visible;
  padding: 7px 10px; border-radius: 999px;
  /* her Ink Navy, solid (21 Sep 2026) — the same shade as the bar and the
     footer. No blur: there is nothing to see through any more. */
  background: var(--nav-bg);
  box-shadow: 0 6px 20px -8px rgba(0,18,25,.45); }
.pdp-thumbs button { position: relative; padding: 0; border: 2px solid transparent; border-radius: 50%; overflow: hidden; background: #fff;
  flex: none; width: 46px; height: 46px; opacity: .78; transition: opacity .2s, border-color .2s, transform .2s; cursor: pointer; }
.pdp-thumbs button:hover { opacity: 1; transform: translateY(-2px); }
/* the one being looked at is ringed in the Add to cart red */
.pdp-thumbs button[aria-current="true"] { border-color: var(--red); opacity: 1; }
.pdp-thumbs img, .pdp-thumbs picture { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.pdp-title { font: 700 clamp(32px, 3.6vw, 50px)/1.05 var(--display); margin: 0 0 14px; letter-spacing: -.02em; }
.pdp-price { font: 600 24px var(--mono); margin: 0 0 28px; }
.pdp-price s { font-size: 17px; opacity: .5; margin-left: 8px; }
.opt { border: 0; padding: 0; margin: 0 0 22px; }
.opt legend { font-size: 15px; margin-bottom: 10px; padding: 0; }
.opt-values { display: flex; flex-wrap: wrap; gap: 8px; }
/* The chosen colour is ringed, and the ring stands 5px clear of the circle —
   so the circles need room for it or the ring lands on its neighbour (her
   word, 21 Sep 2026). Only the colour row is widened; the size and cut pills
   keep their own spacing. */
.opt-values.swatches { gap: 20px; }
.pill input, .sw input { position: absolute; opacity: 0; pointer-events: none; }
.pill span { display: inline-grid; place-items: center; min-width: 54px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 15px; transition: all .2s; cursor: pointer; }
.pill input:checked + span { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.pill input[data-na="true"] + span { opacity: .45; border-style: dashed; }
.sw input[data-na="true"] + span { opacity: .35; }
.pill input:focus-visible + span, .sw input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.sw { position: relative; cursor: pointer; }
.sw span { display: block; width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
.sw input:checked + span { outline-color: var(--navy); }
.sw em { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--navy); color: var(--cream); font: 600 12px var(--body); font-style: normal; padding: 5px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sw:hover em { opacity: 1; }
.qty-row { display: flex; gap: 12px; margin: 26px 0 12px; }
.grow { flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; height: 52px; }
.qty button { width: 42px; height: 100%; border: 0; background: none; font-size: 20px; }
.qty input { width: 40px; border: 0; text-align: center; background: none; -moz-appearance: textfield; font-weight: 600; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.line .qty { height: 36px; }
.line .qty button { width: 32px; font-size: 16px; }
.line .qty input { width: 30px; font-size: 14px; }
.pdp-desc { margin: 32px 0 20px; font-size: 17px; }
.pdp-more { border-top: 1px solid var(--line); padding: 16px 0; }
.pdp-more summary { font-weight: 700; cursor: pointer; }
.pdp-more p { margin: 10px 0 0; font-size: 16px; }
.chart-dlg { border: 0; border-radius: 16px; padding: 12px; max-width: min(900px, 94vw); max-height: 90vh; }
.chart-dlg::backdrop { background: rgba(0,18,25,.6); }
.chart-dlg .icon-btn { position: sticky; top: 0; float: right; background: #fff; }
.related { padding: 0 0 100px; }

/* ---------------------------------------------------------- checkout */
.checkout-page .announce { display: none; }
.checkout { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 5vw, 64px); padding: 40px 0 100px; align-items: start; }
.co-form fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.co-form legend { font: 700 22px var(--display); margin-bottom: 14px; }
.co-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.co-form input:not([type=radio]):not([type=checkbox]):not([type=file]), .co-form select, .co-form textarea, .code input, .card-box input {
  display: block; width: 100%; margin-top: 6px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; font-weight: 400; }
.co-form input:focus, .co-form select:focus, .code input:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 18%, transparent); }
.co-form .invalid { border-color: var(--red) !important; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 12px; }
.check { display: flex !important; gap: 10px; align-items: center; font-weight: 500 !important; }
.radio-card { display: flex !important; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; margin-bottom: 10px !important; cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.radio-card span { flex: 1; }
.radio-card b { display: block; font-size: 16px; }
.radio-card small { display: block; font-weight: 400; opacity: .7; }
.radio-card em { font: 600 15px var(--mono); font-style: normal; }
.pm { display: grid; place-items: center; min-width: 44px; height: 30px; border-radius: 6px; color: #fff; font: 800 13px var(--body) !important; padding: 0 8px; }
.pm.gcash { background: #0a64f0; }
.pm.bdo { background: #0033a0; }
.paybox { background: color-mix(in srgb, var(--sand) 45%, #fff); border-radius: 14px; padding: 18px; margin: 0 0 18px; font-size: 15px; }
.paybox p { margin: 0 0 12px; }
.paybox dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.paybox dt { opacity: .7; }
.paybox dd { margin: 0; font: 600 15px var(--mono); display: flex; gap: 10px; align-items: center; }
.copy { border: 1px solid var(--line); background: #fff; border-radius: 999px; font: 600 var(--tiny) var(--body); padding: 4px 10px; letter-spacing: .06em; text-transform: uppercase; }
.qr { margin-top: 14px; border-radius: 10px; background: #fff; padding: 8px; }
.upload { position: relative; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload span { display: block; margin-top: 6px; padding: 18px; border: 1.5px dashed var(--line); border-radius: 12px; text-align: center; font-weight: 500; background: #fff; }
.upload.has span { border-color: var(--teal); color: var(--deepTeal); }
.co-error { background: color-mix(in srgb, var(--red) 10%, #fff); color: var(--red); border-radius: 12px; padding: 12px 16px; font-weight: 600; }
.co-summary { position: sticky; top: calc(var(--head-h) + 16px); background: #fff; border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.co-summary h2 { font: 700 24px var(--display); margin: 0 0 8px; }
.sum-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; }
.sum-line img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--paper);  object-position: 50% 0%; }
.sum-line b { display: block; font-size: 15px; font-weight: 600; }
.sum-line small { opacity: .65; font-size: 13px; }
.sum-line > span { font: 600 14px var(--mono); }
.code { display: flex; gap: 8px; margin: 16px 0 6px; }
.code input { margin: 0 !important; }
.code .btn { min-height: 48px; padding: 0 18px; }
.co-code-msg { min-height: 1em; margin: 0; }
.co-code-msg.err { color: var(--red); }
.co-code-msg.ok { color: var(--deepTeal); }
.totals { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 16px 0 0; font-size: 16px; }
.totals dd { margin: 0; font: 600 15px var(--mono); text-align: right; }
.totals .grand { font: 700 22px var(--display); border-top: 1px solid var(--line); padding-top: 12px; }
.totals dd.grand { font: 700 22px var(--mono); }

/* ---------------------------------------------------------- order status */
.status { padding: 56px 0 100px; }
.steps { list-style: none; padding: 0; margin: 28px 0 36px; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: s; }
.steps li { position: relative; padding-top: 36px; font-size: 14px; font-weight: 600; opacity: .45; }
.steps li span { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; background: var(--paper); z-index: 1; }
.steps li::before { content: ''; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: currentColor; opacity: .3; }
.steps li.done { opacity: 1; }
.steps li.done span { background: var(--teal); border-color: var(--teal); }
.steps li.now span { box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 25%, transparent); }
.card-box { background: #fff; border-radius: 18px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 20px; }
.card-box h2 { font: 700 22px var(--display); margin: 0 0 14px; }
.card-box label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.ok { color: var(--deepTeal); font-weight: 600; }
.track-form .btn { margin-top: 8px; }

/* ---------------------------------------------------------- journal */
.journal { padding: 48px 0 100px; }
.j-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.j-card { text-decoration: none; }
.j-card picture, .j-card .ph { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.j-card img { width: 100%; height: 100%; object-fit: cover;  object-position: 50% 0%;   /* never crop a head off */ }
.j-card time, .post time { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.j-card h2 { font: 700 26px/1.15 var(--display); margin: 6px 0 8px; }
.post header { padding: 64px 0 36px; text-align: center; }
.post-cover { margin: 0 0 48px; max-height: 80vh; overflow: hidden; }
.post-cover img { width: 100%; object-fit: cover;  object-position: 50% 0%; }
.post-body { font-size: 19px; line-height: 1.75; padding-bottom: 100px; }
.post-body h2 { font: 700 34px/1.15 var(--display); margin: 48px 0 16px; }
.post-body blockquote { margin: 36px 0; padding-left: 24px; border-left: 4px solid var(--red); font: 600 italic 26px/1.4 var(--display); }
.post-body blockquote cite { display: block; font: 500 15px var(--body); margin-top: 8px; font-style: normal; opacity: .7; }
.j-img { margin: 36px 0; }
.j-img.wide { margin-inline: calc(50% - min(50vw, 640px)); }
.j-img img, .j-img video { border-radius: 14px; width: 100%; }
.j-img figcaption { font-size: 14px; opacity: .7; margin-top: 10px; text-align: center; }
.yt-embed { aspect-ratio: 16/9; }
.yt-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; }
.j-product { max-width: 300px; margin: 36px auto; }
.page { padding: 56px 0 100px; }
/* The privacy policy, set like a typed document, justified down both edges
   (her word, 6 Oct 2026). */
/* The Privacy Policy keeps its 6 Oct sizes and navy boxes, in the Terms of Service's fonts
   (her word, 14 Oct 2026: the font changes, the sizes stay). The words inside the navy boxes —
   the title and the numbered headings — keep the original typewriter font. */
.typewriter { font-family: var(--body); font-size: 15px; line-height: 2.05;
  text-align: justify; hyphens: auto; }
/* The numbered headings, and the title, sit in a box of the ink itself with
   white lettering (her word, 6 Oct 2026). */
.typewriter h2 { font: 700 7.5pt/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em;
  text-transform: uppercase; margin: 46px 0 18px; padding: 12px 18px; border: 0;
  background: var(--navy, #002438); color: #fff; text-align: left; hyphens: none; }
.typewriter h3 { font: 700 15px/1.5 var(--display); letter-spacing: .04em; margin: 26px 0 10px;
  text-align: left; hyphens: none; }
.typewriter p { margin: 0 0 14px; max-width: none; }
/* every line of the content at the page's own size — the house rule for paragraphs and list
   lines (15px) was winning over it, so the words showed at 15 while 7.5 was set (14 Oct 2026) */
.typewriter :is(p, li, ul, ol, blockquote, dd, dt) { font-size: inherit; }
.typewriter ul { margin: 0 0 16px; padding-left: 0; list-style: none; max-width: none; }
.typewriter li { position: relative; padding-left: 22px; margin: 0 0 6px; }
.typewriter li::before { content: '—'; position: absolute; left: 0; opacity: .55; }
.typewriter a { color: inherit; text-underline-offset: 3px; }
/* The writing sits five tabs in from each side, so it never runs flush with
   the heading boxes (her word, 6 Oct 2026). */
.typewriter > :not(h2) { margin-left: 20ch; margin-right: 20ch; }
.typewriter > ul { padding-left: 0; }
@media (max-width: 700px) { .typewriter > :not(h2) { margin-left: 4ch; margin-right: 4ch; } }
.pp-updated { font-size: 7.5px; text-transform: uppercase; opacity: .7; letter-spacing: .04em; text-align: left; }
.pp-contact { margin: 0 0 18px; padding-left: 16px; border-left: 2px solid currentColor; max-width: none;
  text-align: left; hyphens: none; }
/* 100px of air above the page and the same below it (her word, 6 Oct 2026) */
.page:has(.typewriter) { padding-top: 100px; padding-bottom: 100px; }
.page:has(.typewriter) .post-body { padding-bottom: 0; }
.typewriter > :last-child { margin-bottom: 0; }
/* the title: in capitals, in a navy box like the headings, in the Terms of Service title font
   (her word, 14 Oct 2026) */
.page:has(.typewriter) h1.display { font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px); letter-spacing: -.01em; text-transform: uppercase; line-height: 1.25;
  text-align: center; background: var(--navy, #002438); color: #fff; padding: 16px 20px; margin-bottom: 56px; }

/* ---------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search input { width: 100px; }
}
/* the search box gives up its space before the words do */
@media (max-width: 1400px) { .search { display: none; } }
/* eight words need more room than four: the burger takes over sooner */
@media (max-width: 1180px) {
  .nav-left a, .nav-word { display: inline-block; }
}
@media (max-width: 860px) {
  :root { --head-h: 64px; }
  .nav-left a, .nav-word { display: inline-block; }
  .search { display: none; }
  .wm-top { font-size: 20px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp, .checkout { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; grid-template-columns: 1fr; }
  .pdp-main { grid-column: 1; }
  .pdp-thumbs { bottom: 10px; gap: 7px; padding: 6px 8px; }
  .pdp-thumbs button { width: 40px; height: 40px; }
  .co-summary { position: static; order: -1; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .coll-grid, .j-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .three, .two { grid-template-columns: 1fr; }
  .coll-grid, .j-grid { grid-template-columns: 1fr; }
  /* The footer on a phone (her word, 10 Oct 2026): Shop and Help stand side by
     side, both centred, and Contact sits across the middle under them. The
     wordmark above them is centred too, so the whole foot reads down the middle
     instead of one block being left and the rest centred. */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; text-align: center; }
  .foot-grid > :first-child, .foot-grid > :last-child { grid-column: 1 / -1; }
  .foot-mark { justify-items: center; }
  .socials a { margin: 0 8px; }
  .foot-line { font-size: 28px; white-space: normal; }
  .steps li { font-size: 12px; }
  .btn { padding: 0 22px; }
}

/* Section numbers (owner only) */
.sec-num-wrap { position: relative; }
.sec-num { position: absolute; z-index: 30; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px; pointer-events: none;
  background: #AE2012; color: #fff; border-radius: 999px; padding: 4px 14px 4px 4px; box-shadow: 0 6px 20px rgba(0,0,0,.35); font: 600 13px/1 var(--body); }
.sec-num b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #AE2012; font: 800 17px var(--mono); }
.announce + .site-head ~ main .sec-num-wrap:first-child .sec-num { top: 14px; }
.ann-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #AE2012; color: #fff; font: 800 12px var(--mono); margin-right: 10px; letter-spacing: 0; }
.wm-logo { display: block; width: auto; max-width: 260px; object-fit: contain; }
.foot-mark .wm-logo { filter: none; }

/* ---------------------------------------------------------- her writing */
.w { padding: clamp(60px, 9vw, 120px) 0; }
.w-inner { width: min(760px, 100% - 40px); margin-inline: auto; }
.w--wide .w-inner { width: min(1100px, 100% - 40px); }
.w-where { font: 600 var(--tiny)/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; }
.w-title { font: 700 clamp(30px, 4vw, 54px)/1.08 var(--display); margin: 0 0 24px; letter-spacing: -.01em; text-wrap: balance; }
.w-lede { font: 500 clamp(21px, 2.4vw, 30px)/1.4 var(--body); margin: 0 0 22px; }
.w p { font-size: 18px; line-height: 1.75; margin: 0 0 18px; }
.w-quote { margin: 30px 0; padding-left: 24px; border-left: 4px solid var(--red); font: 600 clamp(19px, 2vw, 25px)/1.45 var(--body); }
.w-list { margin: 0 0 20px; padding-left: 20px; }
.w-list li { font-size: 18px; line-height: 1.8; }
.w-small { font-size: 14px; opacity: .65; }
.writeups .w-top { padding: 60px 0 30px; width: min(1100px, 100% - 40px); margin-inline: auto; }
.w-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.w-jump a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; text-decoration: none; font: 600 13px var(--body); }
.w-jump a:hover { background: var(--navy); color: var(--cream); }
.w-set { border-top: 3px solid var(--navy); margin-top: 50px; }
.w-head { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; background: var(--navy); color: var(--cream); padding: 26px var(--edge); }
.w-head b { font: 700 14px var(--mono); letter-spacing: .2em; color: var(--amber); }
.w-head h2 { font: 700 clamp(26px, 3vw, 40px) var(--display); margin: 6px 0 4px; }
.w-head p { margin: 0; opacity: .8; font-size: 15px; }
.w-apply { background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: 14px 26px; font: 700 14px var(--body); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.w-apply:hover { background: var(--wine); }
.w-hero { background: var(--ink); color: var(--cream); padding: clamp(30px, 5vw, 60px) var(--edge); }
.w-hero h3 { font: 700 clamp(32px, 5vw, 64px)/1 var(--display); margin: 0 0 14px; }
.w-hero p { margin: 0; font-size: 18px; opacity: .9; }
.w--band { padding: 46px 0; border-top: 4px solid var(--amber); }
.w--band .w-title { font-size: clamp(26px, 3.4vw, 44px); margin-bottom: 10px; }
.w--band .w-small { opacity: .8; font-size: 15px; margin-bottom: 6px; }

/* the bar for comparing whole home pages, one per write-up */
.vbar { position: sticky; top: var(--head-h); z-index: 45; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #AE2012; color: #fff; padding: 10px clamp(12px, 3vw, 28px); font: 600 13px var(--body); }
.vbar b { font: 800 15px var(--mono); }
.vbar nav { display: flex; gap: 4px; }
.vbar nav a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; text-decoration: none; font: 700 12px var(--mono); border: 1px solid rgba(255,255,255,.5); }
.vbar nav a.on, .vbar nav a:hover { background: #fff; color: #AE2012; }
.vbar-note { opacity: .85; font-weight: 500; flex: 1; min-width: 200px; }
.vbar button { background: #fff; color: #AE2012; border: 0; border-radius: 999px; padding: 8px 18px; font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.vbar-x { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------- photo check */
.pc-sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; font: 600 14px var(--body); }
.pc-sum span { border-radius: 999px; padding: 8px 16px; }
.pc-good, .pc-sum .pc-good { background: var(--mint); color: var(--deepTeal); }
.pc-ok, .pc-sum .pc-ok { background: var(--sand); color: var(--burnt); }
.pc-small, .pc-sum .pc-small { background: color-mix(in srgb, var(--red) 18%, #fff); color: var(--wine); }
table.pc { width: 100%; border-collapse: collapse; font-size: 15px; }
table.pc th { text-align: left; background: var(--navy); color: var(--cream); padding: 10px 12px; font: 600 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
table.pc td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.pc img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px;  object-position: 50% 0%; }
table.pc .pc-num { text-align: right; font: 600 14px var(--mono); white-space: nowrap; }
table.pc tr.pc-small td { background: color-mix(in srgb, var(--red) 7%, #fff); }
table.pc tr.pc-ok td { background: color-mix(in srgb, var(--sand) 30%, #fff); }
table.pc .pc-verdict { font-weight: 700; white-space: nowrap; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.pc-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px;  object-position: 50% 0%; }
.pc-grid figcaption { font: 500 var(--tiny) var(--mono); margin-top: 6px; word-break: break-all; }

/* ---- Colour combinations chooser (/colours) ---- */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin: 28px 0 60px; }
.cs-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: grid; align-content: start; }
.cs-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font: 700 15px var(--body); }
.cs-dot { width: 18px; height: 18px; border-radius: 50%; }
.cs-note { margin: 14px 18px 0; font-size: 14px; line-height: 1.55; opacity: .85; }
.cs-swatches { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 16px 18px 4px; font: 600 var(--tiny) var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.cs-swatches span { display: flex; align-items: center; gap: 6px; opacity: .9; }
.cs-swatches i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,18,25,.18); }
.cs-demo { display: flex; align-items: center; gap: 8px; padding: 14px 18px; }
.cs-btn { border-radius: 999px; padding: 9px 18px; font: 700 12px var(--body); }
.cs-tile { width: 34px; height: 34px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,18,25,.18); }
.cs-actions { display: flex; gap: 8px; padding: 6px 18px 18px; flex-wrap: wrap; }
.pal-card.on { outline: 3px solid var(--amber); outline-offset: 2px; }
.pal-now { font: 700 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.pal-strip { display: flex; height: 54px; margin: 14px 18px 0; border-radius: 10px; overflow: hidden; }
.pal-strip i { flex: 1; }
.pal-warn { font-style: italic; opacity: .8; }

/* the section tag on a preview: number, name, and one press to take these colours */
.sec-num { pointer-events: none; }
.sec-num-use { pointer-events: auto; cursor: pointer; margin-left: 8px; border: 0; border-radius: 999px; padding: 7px 14px;
  background: #fff; color: var(--navy); font: 700 var(--tiny) var(--body); letter-spacing: .04em; box-shadow: 0 6px 18px rgba(0,18,25,.28); }
.sec-num-use:hover { background: var(--amber); }
.sec-num-use.on { background: var(--teal); color: #fff; }
.sec-num-use[disabled] { opacity: .7; cursor: default; }

/* locks: the pieces she has decided on keep their colours while she browses */
.sec-num.locked { background: var(--deepTeal); }
.sec-num-btns { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; pointer-events: auto; }
.sec-num-un { cursor: pointer; border: 0; background: rgba(255,255,255,.18); color: #fff; border-radius: 999px; padding: 6px 12px; font: 600 var(--tiny) var(--body); }
.sec-num-un:hover { background: rgba(255,255,255,.32); }
.vbar-nav { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--body); }
.vbar-nav button { cursor: pointer; border: 0; border-radius: 999px; padding: 6px 12px; background: #fff; color: var(--navy); font: 700 var(--tiny) var(--body); }
.vbar .vbar-plain { background: rgba(255,255,255,.18); color: #fff; }

/* the shade picker for the bar and the footer */
.sh-card { overflow: hidden; }
.sh-demo { border-radius: 10px 10px 0 0; padding: 0; display: grid; }
.sh-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: 600 var(--tiny) var(--mono); letter-spacing: .18em; }
.sh-bar i { flex: 1; text-align: center; font-style: normal; font: 700 15px var(--display); letter-spacing: .02em; }
.sh-foot { padding: 22px 16px; font: 600 var(--tiny) var(--mono); letter-spacing: .24em; opacity: .75; border-top: 1px solid rgba(255,255,255,.12); }
.sh-card .cs-head { padding: 12px 16px 0; }
.sh-card .mono { font: 600 var(--tiny) var(--mono); opacity: .7; }

/* the typeface chooser */
.tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; margin: 26px 0 60px; }
.tf-card { background: #fff; border-radius: var(--radius); padding: 20px 22px 18px; box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.tf-card.on { outline: 3px solid var(--amber); outline-offset: 2px; }
.tf-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 700 15px var(--body); }
.tf-now { font: 700 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.tf-mood { margin: 0; font-size: 13px; opacity: .72; }
.tf-demo { border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 10px; }
.tf-demo small { font-size: var(--tiny); letter-spacing: .24em; opacity: .7; }
.tf-demo h3 { margin: 0; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.02; }
.tf-demo p { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85; }
.tf-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tf-price { font-weight: 700; font-size: 16px; }
.tf-btn { background: var(--red); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 700; }
.tf-tag { font-size: var(--tiny); letter-spacing: .16em; opacity: .7; }
.tf-names { margin: 0; font: 600 var(--tiny) var(--mono); letter-spacing: .06em; opacity: .75; }

/* the font bank */
.fb-preview { position: sticky; top: calc(var(--head-h) + 8px); z-index: 20; background: #fff; border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); display: grid; gap: 12px; margin: 18px 0 22px; }
.fb-roles { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-role { display: grid; gap: 2px; text-align: left; background: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 12px; cursor: pointer; min-width: 140px; }
.fb-role.on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.fb-role small { font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.fb-role b { font-size: 13px; }
.fb-demo { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; }
.fb-demo small { font-size: var(--tiny); letter-spacing: .22em; opacity: .7; }
.fb-demo h2 { margin: 0; font-size: clamp(26px, 3vw, 46px); line-height: 1.03; }
.fb-demo p { margin: 0; font-size: 15px; line-height: 1.6; opacity: .85; max-width: 62ch; }
.fb-tag { font-size: var(--tiny); letter-spacing: .14em; opacity: .75; }
.fb-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fb-tab { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font: 600 12px var(--body); display: inline-flex; align-items: center; gap: 8px; }
.fb-tab i { font-style: normal; font: 600 var(--tiny) var(--mono); opacity: .6; }
.fb-tab.on { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.fb-div { display: none; } .fb-div.on { display: block; }
.fb-note { margin: 0 0 12px; font-size: 13px; opacity: .7; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; margin-bottom: 50px; }
.fb-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; display: grid; gap: 6px; transition: border-color .2s, transform .2s; }
.fb-card:hover { transform: translateY(-2px); border-color: var(--navy); }
.fb-card.on { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.fb-name { font: 600 var(--tiny) var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.fb-sample { font-size: 23px; line-height: 1.12; }
.fb-sample.small { font-size: 12px; opacity: .75; }
.fb-demo h3 { margin: 0; font-size: 19px; }
.fb-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-price { font-weight: 700; font-size: 17px; }
.fb-btn { background: var(--red); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 700; }
.fb-line { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; border-radius: 8px; padding: 6px 8px; }
.fb-line.lit { background: color-mix(in srgb, var(--amber) 16%, transparent); }
.fb-line > i { flex: none; width: 104px; font: 600 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .55; font-style: normal; }
.fb-line > :not(i) { flex: 1 1 auto; }
.fb-btn.ghost { background: none; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.fb-was { text-decoration: line-through; opacity: .5; font-size: 14px; flex: none !important; }
.fb-line .fb-btn { flex: none !important; }

/* The ink row: one design, printed in more than one ink. Each one is its own
   product, so these are links, drawn to match the size and cut pills. */
.opt-ink .opt-values { display: flex; flex-wrap: wrap; gap: 5px; }
.pill-link { text-decoration: none; color: inherit; }
.pill-link span { display: inline-grid; place-items: center; min-width: 54px; height: 44px; padding: 0 14px;
  border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 600; font-size: 15px; transition: all .2s; }
.pill-link.on span { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.buybox .pill-link span { background: color-mix(in srgb, #fff 8%, transparent); color: var(--cream);
  border-color: color-mix(in srgb, var(--cream) 34%, transparent); padding: 5px 9px; font-size: var(--tiny); border-radius: 7px; height: auto; min-width: 0; }
.buybox .pill-link.on span { background: var(--nav-ink); color: var(--nav-bg); border-color: var(--nav-ink); }

/* ---- the colour behind a design's page: the chooser's little preview ---- */
.bg-demo { display: grid; gap: 7px; align-content: start; padding: 14px; border-radius: 10px; min-height: 168px; }
.bg-eyebrow { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.bg-shot { display: block; height: 78px; border-radius: 6px;
  background: linear-gradient(160deg, rgba(128,128,128,.55), rgba(128,128,128,.25)); }
.bg-name { font: 700 15px var(--body); text-transform: lowercase; line-height: 1; }
.bg-box { justify-self: start; font: 600 var(--tiny) var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); }


/* "All designs" is the header turned inside out (her word, 21 Sep 2026): the
   bar's words become its field and the bar's field becomes its words. */
.listing > .wrap > .listing-head { position: relative; color: var(--nav-bg); padding: clamp(22px, 4vw, 44px) 0; }
.listing > .wrap > .listing-head::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%); background: var(--nav-ink); }
.listing > .wrap > .listing-head .muted, .listing > .wrap > .listing-head select { color: var(--nav-bg); }
.listing > .wrap > .listing-head select { background: transparent; border-color: color-mix(in srgb, var(--nav-bg) 35%, transparent); }

/* The Shop runs bar → band → collage → footer with nothing between them: the
   page's own cream was showing above and below the band and under the last
   block, which read as three stray off-white stripes (her word, 21 Sep 2026). */
.listing-full { padding: 0; }
.listing-full > .wrap > .listing-head { margin-bottom: 0; }
.listing-full .dv:last-of-type { padding-bottom: clamp(50px, 8vh, 110px); }

/* the cuts line under the Shop's intro */
.listing-copy { display: grid; gap: 10px; max-width: 760px; }
.listing-copy p { margin: 0; }
.shop-cuts { font-size: 16px; line-height: 1.6; }
.shop-cuts b { font-weight: 700; }

/* The Bestseller tag (22 Sep 2026): the three best-selling designs carry a
   small red tag on the top-right corner of their picture, clear of the face,
   in her flag red with white letters. On a design's own page it sits by the
   name instead. */
.best-tag { position: absolute; top: 10px; right: 10px; z-index: 5; pointer-events: none;
  /* the same red as "confirmed by hand" and the band at the foot of the home
     page, and cream lettering rather than white (her word, 11 Oct 2026) */
  background: #AE2012; color: #EAE2B7; font: 700 var(--tiny)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 3px; box-shadow: 0 4px 12px -4px rgba(0,0,0,.45); }
.hb-shot, .card-img { position: relative; }
:not(a) > .best-tag { position: static; display: inline-block; align-self: flex-start; margin: 0 0 8px; box-shadow: none; }
@media (max-width: 700px) { .best-tag { top: 6px; right: 6px; font-size: var(--tiny); letter-spacing: .12em; padding: 4px 6px; } }

/* ---- the three collection pages (her word, 6 Oct 2026) -------------------
   The Fashop opening carries the collection: its categories sit under the
   name, and the sort and the count sit with them instead of floating above
   the grid. */
.fa-coll .fa-menu a.on { color: var(--flag, #D62828); border-bottom: 2px solid currentColor; }
.fa-coll .fa-sort { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; flex-wrap: wrap;
  font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.fa-coll .fa-sort select { font: 600 var(--tiny) var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 30px 9px 14px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; cursor: pointer; }
.fa-coll .fa-sort .muted { opacity: .62; }
.fa-coll .fa-empty { align-self: center; justify-self: center; opacity: .6; }
.fa-coll + .listing { padding-top: clamp(40px, 6vw, 80px); }

/* the line under Reference number while the receipt is being read (6 Oct 2026) */
.ref-read { margin: -6px 0 10px; min-height: 1em; }
.ref-read[data-kind="ok"] { color: #1B7F4B; }
.ref-read[data-kind="warn"] { color: #AE2012; }

/* a receipt that has not been chosen yet, when they try to place the order */
.upload.invalid { border-color: var(--flag, #D62828); }

/* the words that follow the arrow over a shirt (her word, 7 Oct 2026) */
/* amber on navy text, so it reads over her cream pages and over the navy bands
   alike — a navy pill vanished into the money band (7 Oct 2026) */
.shirt-tip { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  padding: 7px 12px; border-radius: 999px; background: #FCBF49; color: #001E2D;
  font: 600 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(0,18,28,.7);
  opacity: 0; transform: translate3d(-100px, -100px, 0); transition: opacity .18s ease; }
.shirt-tip.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .shirt-tip { transition: none; } }

/* Where is this going? — the question that decides who prints the shirt and
   what it costs (her word, 7 Oct 2026) */
.dest { border: 0; padding: 0; background: transparent; max-width: min(560px, 92vw); }
.dest::backdrop { background: rgba(0,18,28,.62); backdrop-filter: blur(3px); }
.dest-in { background: var(--paper, #F7F3E8); color: var(--ink, #003049); border-radius: 18px; padding: clamp(26px, 4vw, 40px);
  box-shadow: 0 50px 90px -40px rgba(0,25,40,.8); text-align: center; }
.dest-in small { display: block; font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--flag, #D62828); }
.dest-in h2 { margin: 12px 0 10px; font: 400 clamp(26px, 3.4vw, 40px)/1.05 'Anton', var(--display); text-transform: uppercase; }
.dest-in > p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; opacity: .8; }
.dest-doors { display: grid; gap: 12px; }
@media (min-width: 620px) { .dest-doors { grid-template-columns: 1fr 1fr; } }
.dest-door { display: grid; gap: 6px; padding: 18px 16px; border-radius: 14px; cursor: pointer; text-align: center;
  border: 1px solid color-mix(in srgb, var(--ink, #003049) 18%, transparent); background: #fff;
  transition: border-color .2s, transform .2s, box-shadow .2s; }
.dest-door:hover { border-color: var(--flag, #D62828); transform: translateY(-2px); box-shadow: 0 18px 30px -22px rgba(0,25,40,.7); }
.dest-door b { font: 400 clamp(18px, 2vw, 22px)/1.1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.dest-door small { font: 600 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; color: inherit; }
.dest-note { margin: 18px 0 0; font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
/* and the line in the footer that says what was answered */
.dest-line { margin: 0 0 10px; font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.dest-line b { font-weight: 700; }
.dest-line button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
/* the second face of the question: outside the Philippines is not open yet */
.dest-sorry { text-align: center; }
.dest-sorry h2 { color: var(--flag, #D62828); }
.dest-meanwhile { margin: 14px 0 0; font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.dest-ok { margin: 22px auto 0; display: block; padding: 13px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--nav-bg, #001E2D); color: var(--nav-ink, #FFB627);
  font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.dest-ok:hover { background: var(--flag, #D62828); color: #fff; }

/* Request a design — the invitation under the Japanese-inspired designs, and
   the page it opens (her word, 7 Oct 2026) */
/* red and cream — her word, 11 Oct 2026: the same red as the band at the foot
   of the home page and the "confirmed by hand" box */
.rq-band { background: #AE2012; color: var(--cream, #EAE2B7);
  padding: 100px var(--edge);   /* 100 from the words to either border, 11 Oct 2026 */
  position: relative; overflow: hidden; isolation: isolate; }
/* a hint of cream glowing out of the middle, the way the band at the foot of
   the home page does — drawn the same way, in her cream rather than white
   (her word, 11 Oct 2026) */
.rq-band::before { content: ''; position: absolute; z-index: -1;
  width: 70vmin; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(234, 226, 183, .14), transparent 70%); }
.rq-band-head { display: grid; gap: 10px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.rq-band-head small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--amber, #FCBF49); }   /* same as .tw-head small */
/* the same type as the Yin Yang head, so the two read alike at every width
   (her word, 11 Oct 2026) */
.rq-band-head h2 { margin: 0; font: 400 clamp(34px, 5vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; }
.rq-band-line { margin: 6px 0 4px; font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); letter-spacing: .01em; opacity: .92; }
.rq-steps { list-style: none; display: grid; gap: clamp(20px, 3vw, 44px); margin: clamp(40px, 6vw, 72px) auto 0; padding: 0;
  max-width: 1200px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .rq-steps { grid-template-columns: 1fr; } }
.rq-steps li { border-top: 1px solid color-mix(in srgb, var(--cream, #EAE2B7) 28%, transparent); padding-top: 18px; }
.rq-steps b { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; color: var(--amber, #FCBF49); }
.rq-steps h3 { margin: 10px 0 8px; font: 400 clamp(22px, 2.4vw, 32px)/1 'Anton', var(--display); text-transform: uppercase; }
.rq-steps p { margin: 0; font-size: 15px; line-height: 1.65; opacity: .82; }
.rq-band-go { display: grid; justify-items: center; gap: 12px; margin: clamp(40px, 6vw, 70px) auto 0; }
.rq-band-go small { font: 600 var(--tiny) var(--mono); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
/* the page itself */
.rq { padding: clamp(48px, 7vw, 90px) 0 clamp(60px, 8vw, 110px); }
.rq-kicker { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--flag, #D62828); margin: 0 0 10px; }
.rq-lead { font-size: 17px; line-height: 1.65; max-width: 62ch; opacity: .85; }
.rq-form { display: grid; gap: 26px; margin-top: 34px; }
.rq-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.rq-form legend { font: 600 var(--tiny) var(--mono); letter-spacing: .26em; text-transform: uppercase; opacity: .55; padding: 0 0 10px; }
.rq-who { display: grid; gap: 12px; }
@media (min-width: 620px) { .rq-who { grid-template-columns: 1fr 1fr; } }
.rq-fine { font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .55; line-height: 1.8; }
/* one subject only (her word, 7 Oct 2026) */
.rq-band-only { margin: 14px 0 0; font: 600 var(--tiny) var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--amber, #FCBF49); }
.rq-only { margin: 18px 0 0; padding: 16px 18px; border-left: 3px solid var(--flag, #D62828);
  background: color-mix(in srgb, var(--flag, #D62828) 7%, transparent); font-size: 15px; line-height: 1.6; max-width: 62ch; }
.rq-agree { font: 600 var(--tiny) var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* what a shirt cost on the old shop, beside what it costs now */
.was, .compare { opacity: .5; font-weight: 400; }
.tw-price .was, .dv-price .was { display: inline-block; margin-left: 6px; }

/* The fields GoHighLevel reads: parked off the side rather than hidden, because
   its tracker skips anything hidden (her route, 15 Sep 2026) */
.ghl-away { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The DDS community (her word, 7 Oct 2026) */
.dds { background: var(--bg); color: var(--ink); padding: clamp(60px, 8vw, 110px) var(--edge); }
.dds-in { max-width: 820px; margin: 0 auto; text-align: center; position: relative; }
.dds-in small { font: 600 var(--tiny) var(--mono); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.dds-in h2 { margin: 12px 0 10px; font: 400 clamp(34px, 5.4vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; }
.dds-in > p { margin: 0 auto 30px; font-size: 17px; line-height: 1.6; max-width: 56ch; opacity: .9; }
.dds-form { display: grid; gap: 14px; text-align: left; }
.dds-two { display: grid; gap: 14px; }
@media (min-width: 620px) { .dds-two { grid-template-columns: 1fr 1fr; } }
.dds-form label { display: grid; gap: 6px; font: 600 var(--tiny) var(--mono); letter-spacing: .18em; text-transform: uppercase; }
/* Option E stands on sand, so the boxes are drawn in the words' own colour
   rather than in white, which would vanish (her pick, 9 Oct 2026). */
.dds-form input { padding: 13px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 9%, transparent);
  color: inherit; font: 400 16px var(--body); }
.dds-form input::placeholder { color: inherit; opacity: .45; }
.dds-form input:focus { outline: 2px solid var(--amber, #FCBF49); outline-offset: 1px; }
.dds-form .btn { justify-self: center; margin-top: 8px; }
.dds .btn-solid { background: currentColor; border-color: currentColor; }
.dds .btn-solid, .dds .btn-solid:hover { color: var(--bg); }
.dds-fine { justify-self: center; font: 600 var(--tiny) var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.dds-error { margin: 0; font: 600 var(--tiny) var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #FFD454; }
.dds-done { margin: 0; font: 400 clamp(20px, 2.4vw, 30px) 'Anton', var(--display); text-transform: uppercase; }

/* ---------------------------------------------------- the community door --
   The one public page in front of a private house (8 Oct 2026). It has to do
   two things at once: tell a stranger what this is in five seconds, and make a
   believer want in. So: one line of why, the rooms laid out plainly with what
   each one costs to enter, and the way to be told when the doors open. */
.cmty { padding: clamp(40px, 7vw, 92px) 0 clamp(56px, 9vw, 110px); }
.cmty-kicker { margin: 0 0 10px; font: 600 12px/1 var(--body); letter-spacing: .24em;
  text-transform: uppercase; color: color-mix(in srgb, var(--navy) 55%, transparent); }
.cmty .display { margin-bottom: 18px; }
.cmty-lead { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; max-width: 54ch; margin: 0 0 8px;
  color: color-mix(in srgb, var(--navy) 85%, transparent); }

.cmty-rooms { display: grid; gap: 14px; margin: clamp(32px, 5vw, 56px) 0; }
@media (min-width: 760px) { .cmty-rooms { grid-template-columns: 1fr 1fr; } }
.cmty-room { position: relative; padding: 24px 22px 54px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; }
.cmty-room h2 { margin: 0 0 8px; font: 700 21px/1.2 var(--body); letter-spacing: -.01em; }
.cmty-room p { margin: 0; color: color-mix(in srgb, var(--navy) 70%, transparent); font-size: 16px; }
.cmty-chip { position: absolute; left: 22px; bottom: 20px; font: 600 var(--tiny)/1 var(--body);
  letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: color-mix(in srgb, var(--navy) 60%, transparent); }
.cmty-room.is-open .cmty-chip { border-color: color-mix(in srgb, var(--navy) 30%, transparent); }
.cmty-room.is-members { background: color-mix(in srgb, var(--cream) 40%, #fff); }
.cmty-room.is-earned { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.cmty-room.is-earned p { color: color-mix(in srgb, var(--cream) 75%, transparent); }
.cmty-room.is-earned .cmty-chip { border-color: color-mix(in srgb, var(--cream) 35%, transparent);
  color: color-mix(in srgb, var(--cream) 80%, transparent); }

.cmty-join { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 4vw, 34px);
  background: color-mix(in srgb, var(--cream) 55%, #fff); }
.cmty-join h2 { margin: 0 0 6px; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--display); }
.cmty-join .muted { margin: 0 0 18px; }
.cmty-done { padding: 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--cream) 55%, #fff);
  border: 1px solid var(--line); font-weight: 600; }

/* ---------------------------------------------------------- gift cards (9 Oct 2026) */
.gc-hero { background: radial-gradient(70rem 30rem at 85% -20%, var(--deepTeal), transparent 60%), var(--ink); color: var(--cream); padding: clamp(40px, 7vw, 84px) 0; overflow: hidden; }
.gc-hero-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.gc-hero .eyebrow { color: var(--gold); }
.gc-hero .sub { margin: 0; max-width: 46ch; opacity: .92; }
.gc-card { position: relative; aspect-ratio: 1.586; border-radius: 22px; background: linear-gradient(140deg, var(--navy), #001219 70%); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(234,226,183,.14);
  overflow: hidden; padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; justify-content: flex-end; transform: rotate(-3deg); }
/* the red sun in the corner, and his face faint on the Dutertismo side (her word, 9 Oct 2026) */
.gc-sun { position: absolute; right: -14%; top: -30%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--red); }  /* the corner sun, as first drawn (her word, 9 Oct 2026) */
.gc-wm { position: absolute; left: -14%; top: 50%; transform: translateY(-50%); height: 112%; aspect-ratio: 1;
  /* FINAL (her word, 9 Oct 2026, with her screenshot): just him, the white around him cut away,
     in his own colours — not inverted, not red — at 25%, the edges fading out */
  background: url(/img/elyne-villamor_img_0008_dutertismo-prrd-engraving-cutout.png) center / contain no-repeat;
  opacity: .25;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
.gc-mark { position: absolute; left: clamp(18px, 3vw, 28px); top: clamp(18px, 3vw, 28px); height: clamp(20px, 2.6vw, 30px); width: auto; }
.gc-card .gc-mark, .gc-card b, .gc-card small { z-index: 2; }

.gc-card b { position: relative; font: 700 clamp(30px, 5vw, 54px)/1 var(--mono); color: var(--nav-ink, #FFB627); letter-spacing: -.01em; }  /* the menu's yellow (her word, 9 Oct 2026) */
.gc-card small { position: relative; margin-top: 8px; font: 600 12px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.gc-tabs { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--cream) 60%, #fff); margin-bottom: 16px; }
.gc-tabs button { border: 0; background: none; border-radius: 999px; padding: 9px 20px; font: 700 13px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.gc-tabs button.on { background: var(--navy); color: var(--cream); }
.gc-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.gc-pills[hidden] { display: none; }
.gc-pill { margin: 0 !important; cursor: pointer; }
.gc-pill input { position: absolute; opacity: 0; pointer-events: none; }
.gc-pill > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 10px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: center; transition: border-color .2s, box-shadow .2s, transform .2s; }
.gc-pill b { font: 700 17px var(--mono); }
.gc-pill small { font: 500 12px var(--mono); color: color-mix(in srgb, var(--navy) 60%, transparent); }
.gc-pill:hover > span { transform: translateY(-2px); }
.gc-pill input:checked + span { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.gc-pill input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.gc-check h2 { font: 700 22px var(--display); margin: 0 0 6px; }
.co-paid-by-gift { padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--mint) 40%, #fff); font-weight: 600; margin: 0 0 30px; }
@media (max-width: 860px) { .gc-hero-in { grid-template-columns: 1fr; } .gc-card { max-width: 420px; } }
.co-agree { margin: 0 0 12px; text-align: center; }
.co-agree a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- home: Gift Cards section (9 Oct 2026, "angas") */
.gcs { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); padding: clamp(70px, 9vw, 130px) 0; isolation: isolate; }
.gcs-ghost { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 clamp(180px, 34vw, 520px)/.8 'Anton', sans-serif; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 10%, transparent); white-space: nowrap; pointer-events: none; user-select: none; }
.gcs-in { width: min(1280px, 100% - 32px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
/* the Gift Cards band reads on the Yin Yang scale (her word, 11 Oct 2026) */
.gcs-kicker { display: block; font: 600 var(--tiny)/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--nav-ink, #FFB627); margin-bottom: 18px; }
.gcs h2 { margin: 0 0 18px; font: 400 clamp(34px, 5vw, 72px)/1 'Anton', sans-serif; text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.gcs p { margin: 0 0 26px; max-width: 46ch; font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); letter-spacing: .01em; opacity: .92; }
.gcs-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.gcs-picks a { text-decoration: none; color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 999px; padding: 9px 15px;
  font: 700 14px var(--mono); transition: background .25s, color .25s, border-color .25s, transform .25s; }
.gcs-picks a:hover { background: var(--nav-ink, #FFB627); color: #001E2D; border-color: var(--nav-ink, #FFB627); transform: translateY(-2px); }
.gcs-cta { background: var(--accent); }
.gcs-cta span { transition: transform .25s; } .gcs-cta:hover span { transform: translateX(4px); }

.gcs-stage { position: relative; display: block; aspect-ratio: 1.15; text-decoration: none; }
.gcs-glow { position: absolute; left: 50%; top: 48%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 85%, transparent) 0 46%, color-mix(in srgb, var(--accent) 30%, transparent) 60%, transparent 72%);
  filter: blur(2px); animation: gcs-breathe 6s ease-in-out infinite; }
@keyframes gcs-breathe { 50% { transform: translate(-50%, -50%) scale(1.06); } }
.gcs-card { position: absolute !important; left: 50%; top: 50%; width: 74%; transform-origin: 50% 120%; transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
.gcs-1 { transform: translate(-50%, -50%) rotate(-14deg) translate(-16%, 4%); }
.gcs-2 { transform: translate(-50%, -50%) rotate(-2deg); z-index: 2; }
.gcs-3 { transform: translate(-50%, -50%) rotate(11deg) translate(16%, 8%); z-index: 3; }
.gcs-stage:hover .gcs-1 { transform: translate(-50%, -50%) rotate(-20deg) translate(-26%, 2%); }
.gcs-stage:hover .gcs-2 { transform: translate(-50%, -58%) rotate(-2deg) scale(1.03); }
.gcs-stage:hover .gcs-3 { transform: translate(-50%, -50%) rotate(17deg) translate(26%, 6%); }
.gcs-card { animation: gcs-float 7s ease-in-out infinite; }
.gcs-2 { animation-delay: -2.3s; } .gcs-3 { animation-delay: -4.6s; }
@keyframes gcs-float { 50% { margin-top: -10px; } }
@media (max-width: 900px) {
  .gcs-in { grid-template-columns: 1fr; text-align: center; }
  .gcs p { margin-left: auto; margin-right: auto; } .gcs-picks { justify-content: center; }
  .gcs-stage { max-width: 520px; width: 100%; margin: 10px auto 0; order: -1; }
}
/* On a phone the cards move to the top of the section and the giant GIFT, which
   is pinned to the middle of the section, ends up behind the headline — two
   sets of letters on top of each other (her word, 10 Oct 2026: "pangit na
   nakapatong ang text sa GIFT sa likod. Itaas mo ang GIFT sa mismong cards").

   It is drawn on the cards instead, as their background. Working out where the
   cards are by arithmetic put it 76px low, so it is drawn by the cards
   themselves: the word is read off the stage's own data-ghost, so there is
   still only one place it is written down. */
@media (max-width: 700px) {
  .gcs-ghost { display: none; }
  .gcs-stage::before { content: attr(data-ghost); position: absolute; z-index: 0;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    /* 300px — her number, 10 Oct 2026 */
    font: 400 300px/.8 'Anton', sans-serif; letter-spacing: -.01em;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 14%, transparent);
    white-space: nowrap; pointer-events: none; }
  .gcs-glow, .gcs-card { z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .gcs-glow, .gcs-card { animation: none; } .gcs-card { transition: none; } }
/* the cards in the home section are smaller than the one on /gift-cards: everything on them scales with the card */
.gcs-card { container-type: inline-size; width: 64% !important; padding: 5.5cqw !important; }
.gcs-card .gc-mark { height: 8cqw; left: 6cqw; top: 6cqw; }
.gcs-card b { font-size: 15cqw !important; }
.gcs-card small { font-size: 3cqw !important; margin-top: 2cqw; }
.gcs-1 { transform: translate(-50%, -50%) rotate(-13deg) translate(-12%, 6%); }
.gcs-3 { transform: translate(-50%, -50%) rotate(10deg) translate(12%, 10%); }
.gcs-stage:hover .gcs-1 { transform: translate(-50%, -50%) rotate(-18deg) translate(-20%, 4%); }
.gcs-stage:hover .gcs-3 { transform: translate(-50%, -50%) rotate(15deg) translate(20%, 8%); }
/* a spread, not a stack: each card overlaps only at its edge so every amount shows (9 Oct 2026) */
.gcs-stage { aspect-ratio: 1.6; }
.gcs-card { width: 46% !important; }
.gcs-1 { z-index: 1; transform: translate(-50%, -50%) translateX(-60%) translateY(6%) rotate(-9deg); }
.gcs-2 { z-index: 2; transform: translate(-50%, -50%) translateY(-4%); }
.gcs-3 { z-index: 3; transform: translate(-50%, -50%) translateX(60%) translateY(8%) rotate(9deg); }
.gcs-stage:hover .gcs-1 { transform: translate(-50%, -50%) translateX(-68%) translateY(4%) rotate(-13deg); }
.gcs-stage:hover .gcs-2 { transform: translate(-50%, -50%) translateY(-10%) scale(1.04); }
.gcs-stage:hover .gcs-3 { transform: translate(-50%, -50%) translateX(68%) translateY(6%) rotate(13deg); }
@media (max-width: 900px) { .gcs-stage { aspect-ratio: 1.35; } .gcs-card { width: 52% !important; } }
/* The home cards are the agreed card (/gift-cards), only smaller — the same proportions, measured
   off it: padding 4.84%, logo 5.18% tall at 4.84% in, amount 9.33%, "Gift Card" 2.07% with 1.38%
   above it, all anchored bottom-left (her word, 9 Oct 2026: "make it consistent"). */
.gcs-card { padding: 4.84cqw !important; align-items: stretch; text-align: left; justify-content: flex-end; }
.gcs-card .gc-mark { height: 5.18cqw; left: 4.84cqw; top: 4.84cqw; }
.gcs-card b { font-size: 9.33cqw !important; }
.gcs-card small { font-size: 2.07cqw !important; margin-top: 1.38cqw !important; }
/* measured against the stage, not the card itself (a card can't measure its own padding):
   --k is the card's share of the stage width */
.gcs-stage { container-type: inline-size; --k: .46; }
.gcs-card { container-type: normal; width: calc(var(--k) * 100%) !important; padding: calc(var(--k) * 4.84cqw) !important; }
.gcs-card .gc-mark { height: calc(var(--k) * 5.18cqw); left: calc(var(--k) * 4.84cqw); top: calc(var(--k) * 4.84cqw); }
.gcs-card b { font-size: calc(var(--k) * 9.33cqw) !important; }
.gcs-card small { font-size: calc(var(--k) * 2.07cqw) !important; margin-top: calc(var(--k) * 1.38cqw) !important; }
@media (max-width: 900px) { .gcs-stage { --k: .52; } }
/* section 7 wears the final section's look (her word, 9 Oct 2026): red, a soft white glow in the
   middle, cream words, the cream button */
.dds { position: relative; overflow: hidden; }
.dds-glow { position: absolute; width: 70vmin; aspect-ratio: 1; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); pointer-events: none; }
/* their own amount / number of shirts (9 Oct 2026) */
.gc-own { display: grid; gap: 6px; margin: 14px 0 0 !important; max-width: 340px; }
.gc-own[hidden] { display: none; }
.gc-own-in { display: flex; align-items: center; gap: 8px; font: 700 20px var(--mono); }
.gc-own-in input { flex: 1; min-width: 0; font: 700 20px var(--mono) !important; }
.gc-own small { font-weight: 500; color: color-mix(in srgb, var(--navy) 60%, transparent); }

.gc-pill b { white-space: nowrap; }   /* "10,000 Shirts" on one line */

/* ------------------------------------------------ one margin for the page --
   Her word, 9 Oct 2026: from the header to the footer, the page keeps the same
   distance from the edge of the screen — 35px on a phone, 50px on a pad, 100px
   on a desktop — and that includes the announcement bar, the navigation and
   the footer.

   It is one number, --edge, and every band reads it. The distance sits on the
   bands rather than on a single page container, because a band carries its own
   colour and has to reach the edge of the screen; it is the words inside that
   move in. Boxes that sit *inside* a band — a product's picker, a payment
   card, the cart summary — are left alone: their padding is the inside of a
   card, not the margin of a page. */
:root { --edge: 100px; }

/* ------------------------------------------------- the smallest words ----
   Her word, 9 Oct 2026: the small print is 12px on a desktop, 10px on a pad
   and 7.5px on a phone. It is the whole micro tier — the mono labels, the
   kickers, the batch numbers, the captions, every piece the site used to set
   somewhere between 9 and 11px — so they are one size now instead of fifteen
   slightly different ones. Bigger text is untouched. */
:root { --tiny: 12px; }
@media (max-width: 1024px) { :root { --edge: 50px; --tiny: 10px; } }
@media (max-width: 700px)  { :root { --edge: 35px; --tiny: 7.5px; } }

.announce { padding-left: var(--edge); padding-right: var(--edge); }
.site-head { padding-left: var(--edge); padding-right: var(--edge); }
.wrap { width: min(1280px, 100% - var(--edge) * 2); }
.wrap.narrow { width: min(860px, 100% - var(--edge) * 2); }
.foot-grid, .foot-end { width: min(1280px, 100% - var(--edge) * 2); }

/* the bands of the home page, the shop, the collections and the design pages */
.fnd, .sun-top, .sun-foot, .dds, .st-sticky, .sl, .sl-head,
.cf, .dv-head, .dv, .hb, .rs, .rq-band, .rq-only, .lb, .cmty {
  padding-left: var(--edge); padding-right: var(--edge);
}

/* The announcement's second clause, on its own line on a phone (her word,
   10 Oct 2026). On a pad and a desktop it stays part of the same sentence. */
.ann-tail { display: inline; }
@media (max-width: 700px) { .announce .ann-tail { display: block; } }

/* A break that only a phone takes. On a pad and a desktop the words run on as
   one line; on a phone they break where she put the break, not where the line
   happens to end. (her word, 11 Oct 2026) */
.br-phone { display: none; }
@media (max-width: 700px) { .br-phone { display: inline; } }

/* The three gift cards on a phone (her word, 11 Oct 2026): not level with one
   another — the middle one stands up and the two beside it sit lower, so they
   read as a fan rather than a row. */
@media (max-width: 700px) {
  /* her numbers, 11 Oct 2026: 5 Shirts sits 25px under the middle card and
     ₱1,000 sits 40px under it */
  .gcs-1 { transform: translate(-50%, -50%) translateX(-60%) translateY(46px) rotate(-9deg); }
  .gcs-2 { transform: translate(-50%, -50%) translateY(-12%); }
  .gcs-3 { transform: translate(-50%, -50%) translateX(60%) translateY(46px) rotate(9deg); }
  .gcs-stage:hover .gcs-1 { transform: translate(-50%, -50%) translateX(-68%) translateY(18%) rotate(-13deg); }
  .gcs-stage:hover .gcs-2 { transform: translate(-50%, -50%) translateY(-18%) scale(1.04); }
  .gcs-stage:hover .gcs-3 { transform: translate(-50%, -50%) translateX(68%) translateY(24%) rotate(13deg); }
}