/** Shopify CDN: Minification failed

Line 1034:0 Unexpected "}"
Line 1131:0 Expected "}" to go with "{"

**/
/* ==========================================================================
   PAWTAGONIST — storefront
   Design language after Riccardo "Breccia" Cambò:
     · the subject is the hero at headline scale
     · specification is demoted to tiny letterspaced caps and superscripts
     · warm archival paper, soft colour fields, engraved tonal watermark
     · enormous negative space, one gesture per screen
   ========================================================================== */

/* Subset to the glyphs this site actually uses: 1.2 MB of variable font -> 157 KB. */
@font-face {
  font-family: 'Fraunces';
  src: url('//pawtagonist.com/cdn/shop/t/2/assets/Fraunces.woff2?v=90575261512319803431791023936') format('woff2'),
       url('//pawtagonist.com/cdn/shop/t/2/assets/Fraunces-sub.ttf?v=149977756473512664141791023935') format('truetype');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('//pawtagonist.com/cdn/shop/t/2/assets/Inter.woff2?v=47691356357529871591791023938') format('woff2'),
       url('//pawtagonist.com/cdn/shop/t/2/assets/Inter-sub.ttf?v=124981429316342082481791023937') format('truetype');
  font-weight: 100 900; font-display: swap;
}

:root {
  /* paper */
  --paper:    #F2EBDD;
  --paper-2:  #E9E0CE;
  --paper-3:  #FBF7EF;

  /* ink */
  --ink:      #1A1A16;
  --ink-2:    #55523F;
  --ink-3:    #8A8570;

  /* colour field — soft warm gradient, licence-card technique */
  --field-a:  #F6DDB9;
  --field-b:  #E8A87C;
  --field-c:  #F7EAD6;

  /* accents */
  --apricot:  #C4966A;
  --terra:    #C4552F;
  --green:    #1B3D2B;
  --sage:     #7C8A6B;

  --rule:     rgba(26, 26, 22, .16);
  --rule-2:   rgba(26, 26, 22, .30);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1280px;

  --ease: cubic-bezier(.2, .7, .25, 1);
}
/* ── CAPSULE COLOUR FIELDS ───────────────────────────────────────────────
   Each character capsule re-tints the page gradient to that animal's own
   main colour, sampled from the canonical artwork. The mark itself is
   neutral ink, so it reads against every capsule without changing.
   Add a block per character; set data-capsule on <html>.              */
[data-capsule="golden"] {
  --field-a: #F7E3C0;   /* light gold wash */
  --field-b: #E4B46C;   /* the fur itself  */
  --field-c: #FBF3E4;   /* chest cream     */
  --capsule: #E4B46C;
}
[data-capsule="golden"] .plate img { mix-blend-mode: multiply; }


* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* --------------------------------------------------------------------------
   TYPE
   Display: Fraunces with the wonk + soft axes dialled in for character.
   -------------------------------------------------------------------------- */
.display, h1, h2, h3, h4 {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 24, 'WONK' 1, 'opsz' 100, 'wght' 600;
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 6.6vw, 6rem); }
h2 { font-size: clamp(2.1rem, 5vw, 4.1rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.85rem); font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 60, 'wght' 600; }
h4 { font-size: 1.05rem; font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40, 'wght' 600; }

.display-i {
  font-style: italic;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144, 'wght' 500;
}

p { margin: 0; }

/* The micro-label: his signature demotion of specification to near-invisible type */
.micro {
  font-family: var(--sans);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-3);
}
.micro strong { color: var(--ink); font-weight: 600; }
.micro sup { font-size: .72em; letter-spacing: .06em; vertical-align: super; }

.lede {
  font-size: clamp(.98rem, 1.25vw, 1.1rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 58ch;
}

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
/* env() safe-area values are 0 on devices without cutouts, so this is a
   no-op there and only widens the gutter on a notched phone. */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: max(28px, env(safe-area-inset-left)) max(28px, env(safe-area-inset-right)); }
.wrap-tight { max-width: 900px; }
.section { padding: clamp(64px, 9vw, 132px) 0; }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(34px, 5vw, 62px); }
.section-head.center { align-items: center; text-align: center; }
.section-head.center .lede { text-align: center; }

/* numbered section index — 01 / 02 / 03 */
/* The row may wrap as a whole; each label may not. Without nowrap a narrow
   viewport broke the labels themselves mid-string - "CHARACTER No." above
   "01", "GOLDEN" above "RETRIEVER" - which reads as a mistake rather than a
   responsive layout. */
.idx { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.idx-n {
  font-family: var(--sans); font-size: .625rem; font-weight: 600;
  letter-spacing: .18em; color: var(--ink-3); white-space: nowrap;
}
.idx-line { width: 54px; height: 1px; background: var(--rule-2); }
@media (max-width: 660px) {
  /* reclaim the width so "CHARACTER No. 01 --- GOLDEN RETRIEVER" still fits
     on one line on a phone */
  .idx { gap: 10px; }
  .idx-line { width: 30px; }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 16px 32px;
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: 2px;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn-terra { background: var(--terra); color: var(--paper-3); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.btn-terra:hover { background: var(--ink); transform: translateY(-2px); }
}

.btn-ink { background: var(--ink); color: var(--paper); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.btn-ink:hover { background: var(--terra); transform: translateY(-2px); }
}

.btn-line { border: 1px solid var(--rule-2); color: var(--ink); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.btn-line:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
}

.btn-block { width: 100%; }
/* .section-head is a column flex container, so a button child stretches to the
   full content width and the 404's call to action became a 1200px bar. Buttons
   size to their own label. */
.section-head > .btn { align-self: flex-start; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* text link with a rule that draws on hover */
.tlink {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--rule-2);
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.tlink:hover { border-color: var(--ink); gap: .9rem; }
}


/* --------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */
.notice {
  background: var(--ink); color: var(--paper);
  padding: 11px 28px; text-align: center;
}
.notice span {
  font-size: .625rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
}
.notice b { color: var(--field-a); font-weight: 600; }

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.masthead-in { display: flex; align-items: center; gap: 30px; height: 82px; }
.nav, .masthead-actions { display: flex; align-items: center; }
.brand { margin-right: auto; display: flex; align-items: center; gap: 14px; }
.brand img { height: 40px; width: auto; display: block; }
.brand .micro {
  display: none;
  padding-left: 14px;
  border-left: 1px solid var(--rule-2);
  line-height: 1;
  white-space: nowrap;
}

.nav { display: flex; gap: 34px; }
.nav a {
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2); position: relative; padding: 4px 0; line-height: 1;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--terra);
  /* Was transition: width .34s, which relayouts the row on every frame. The
     rule is the same width the whole time and only its scale changes, so
     scaleX is the honest description and it stays on the GPU. */
  transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.nav a:hover { color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.nav a:hover::after { transform: scaleX(1); }
}


.masthead-actions { display: flex; align-items: center; gap: 6px; }
.ibtn {
  width: 46px; height: 46px; display: grid; place-items: center; position: relative;
  transition: background .25s var(--ease);
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.ibtn:hover { background: var(--paper-2); }
}

.ibtn svg { width: 19px; height: 19px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn.is-added { background: var(--green); color: var(--paper); }
.btn.is-added::after { content: ' ✓'; }
.count.is-bump { animation: countBump .3s var(--ease); }
@keyframes countBump {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.38); }
  100% { transform: scale(1); }
}
.count {
  position: absolute; top: 6px; right: 5px; min-width: 17px; height: 17px;
  background: var(--terra); color: var(--paper-3);
  font-size: .58rem; font-weight: 600; letter-spacing: 0;
  display: grid; place-items: center; padding: 0 4px; border-radius: 20px;
}
.menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   HERO — full-bleed warm field, watermark subject, headline at scale
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 6%, var(--field-b) 0%, transparent 58%),
    radial-gradient(110% 80% at 14% 96%, var(--field-a) 0%, transparent 62%),
    linear-gradient(168deg, var(--field-c) 0%, var(--paper) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(48px, 6vw, 92px) clamp(56px, 7vw, 104px);
  display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.hero h1 { max-width: 12ch; }
.hero h1 .em { font-style: italic; font-variation-settings: 'SOFT' 46, 'WONK' 1, 'opsz' 144, 'wght' 500; }
.hero-foot { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; }

/* the watermark figure — sits behind the subject column like an engraved plate */
.hero-figure { position: relative; }
.hero-plate {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  background: linear-gradient(158deg, var(--field-a), var(--field-b) 62%, var(--field-c));
  aspect-ratio: 5 / 4;
  box-shadow: 0 30px 70px -30px rgba(26,26,22,.45), 0 4px 14px -6px rgba(26,26,22,.2);
}
.hero-plate img { width: 100%; height: 100%; object-fit: cover; }
.hero-plate-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(26,26,22,.62), transparent);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.hero-plate-cap .micro { color: rgba(242,235,221,.86); }
.hero-plate-cap .micro strong { color: #fff; }

/* the tonal watermark, floating behind the copy */
.hero-wm {
  position: absolute; z-index: 1; pointer-events: none;
  width: clamp(380px, 52vw, 880px);
  left: -10%; bottom: -22%;
  opacity: .62; mix-blend-mode: multiply;
  transform: rotate(-2deg);
}

/* --------------------------------------------------------------------------
   SPECIMEN STRIP — the demoted specification row
   -------------------------------------------------------------------------- */
.specimen {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}
.specimen-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}
.spec {
  padding: 26px 24px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 7px;
}
.spec:last-child { border-right: 0; }
.spec p { font-size: .82rem; color: var(--ink-2); line-height: 1.45; }

/* --------------------------------------------------------------------------
   EDITION PICKER — numbered index with pagination dots
   -------------------------------------------------------------------------- */
.editions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }

.ed {
  position: relative; text-align: left;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
  transition: transform .42s var(--ease), box-shadow .42s var(--ease), border-color .42s var(--ease);
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.ed:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(26,26,22,.4); }
}

.ed.is-on { border-color: var(--ink); }
.ed-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-2); }
.ed-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.ed:hover .ed-media img { transform: scale(1.045); }
}

.ed-n {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: .58rem; font-weight: 600; letter-spacing: .16em;
  background: var(--paper-3); color: var(--ink);
  padding: 5px 9px; border-radius: 20px;
}
.ed-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 5px; }
.ed-body strong {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 22, 'WONK' 0, 'opsz' 40, 'wght' 600;
  font-size: 1.08rem; line-height: 1.2;
}
.ed.on-air { background: var(--paper-2); }
.ed-index {
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: linear-gradient(155deg, var(--field-a), var(--field-b) 70%, var(--field-c));
}
.ed-index .big {
  font-family: var(--serif); font-style: italic;
  font-variation-settings: 'SOFT' 46, 'WONK' 1, 'opsz' 144, 'wght' 500;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem); line-height: 1.05; color: var(--ink);
}
.ed-index .mark { width: 60px; opacity: 1; }

/* dots — lifted from his collective's site */
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  background: var(--rule-2); cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
  /* keep a comfortable tap target without changing the visual size */
  box-shadow: 0 0 0 8px transparent;
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.dot:hover { background: var(--ink-3); }
}

.dot:focus-visible { outline: 2px solid var(--terra); outline-offset: 6px; }
.dot.is-on { background: var(--terra); transform: scale(1.35); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.dot.is-on:hover { background: var(--terra); }
}


/* Filter status — sits with the grid it controls, not floating between sections */
.filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.filter-label {
  font-family: var(--serif); font-style: italic;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60, 'wght' 500;
  font-size: 1.05rem; color: var(--ink);
}
.filter-reset {
  color: var(--terra); cursor: pointer; padding: 0;
  border-bottom: 1px solid currentColor; line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.filter-reset:hover { color: var(--ink); border-color: var(--ink); }
}

.filter-reset[hidden] { display: none; }

/* --------------------------------------------------------------------------
   COLLECTION — collage of plates on paper
   -------------------------------------------------------------------------- */
.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 44px); }

.plate {
  position: relative; display: block;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  padding: 14px 14px 0;
  cursor: pointer; color: inherit;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plate:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
.plate:nth-child(odd) { transform: rotate(-.5deg); }
.plate:nth-child(even) { transform: rotate(.55deg); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.plate:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 34px 60px -30px rgba(26,26,22,.42); z-index: 2; }
}

.plate-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-3); }
/* white product-shot backgrounds blend into the paper instead of sitting on top of it */
.plate-media img, .ed-media img, .hero-plate img, .pdp-main img, .pdp-thumb img, .line img {
  mix-blend-mode: multiply;
}
.plate-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.plate:hover .plate-media img { transform: scale(1.04); }
}

.next-media {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 26px;
  background: linear-gradient(155deg, var(--field-c), var(--field-a) 55%, var(--field-b));
}
.next-big {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 34, 'WONK' 1, 'opsz' 100, 'wght' 500;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; color: var(--ink);
}
.next-big em { font-style: italic; color: var(--terra); }
.plate-next .plate-body { justify-content: center; }
/* the teaser isn't a product: no lift, no pointer, so it never looks tappable */
.plate-next { cursor: default; }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.plate-next:hover { transform: none; box-shadow: none; }
}

.plate-next:nth-child(odd), .plate-next:nth-child(even) { transform: rotate(.55deg); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.plate-next:hover { transform: rotate(.55deg); }
}


.plate-tag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  font-size: .56rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  padding: 7px 11px;
}
.plate-tag.alt { background: var(--terra); }
.plate-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 6px 22px; }
.plate-title { display: flex; align-items: baseline; gap: 10px; }
.plate-title h3 { font-size: 1.3rem; }
.plate-price {
  margin-left: auto; font-family: var(--serif);
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40, 'wght' 600;
  font-size: 1.15rem; color: var(--ink);
}
.plate-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.plate-sws { display: flex; gap: 5px; align-items: center; }
.sw { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--rule-2); }

/* --------------------------------------------------------------------------
   PROCESS — dark plate, three numbered steps
   -------------------------------------------------------------------------- */
.process { background: var(--green); color: var(--paper); }
.process .micro { color: rgba(242,235,221,.6); }
.process .lede { color: rgba(242,235,221,.78); }
.process h2, .process h3 { color: var(--paper); }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(28px, 4vw, 60px); }
.step { display: flex; flex-direction: column; gap: 16px; }
.step-n {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144, 'wght' 400;
  font-size: 3.4rem; line-height: 1; color: var(--field-a); opacity: .9;
}
.step p { font-size: .92rem; color: rgba(242,235,221,.78); line-height: 1.6; }

/* --------------------------------------------------------------------------
   STORY — split, watermark behind
   -------------------------------------------------------------------------- */
.story { position: relative; overflow: hidden; }
.story-in { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 6vw, 90px); align-items: center; position: relative; z-index: 2; }
.story-plate {
  border-radius: 2px; overflow: hidden;
  background: linear-gradient(150deg, var(--field-a), var(--field-b));
  box-shadow: 0 30px 64px -32px rgba(26,26,22,.5);
  aspect-ratio: 4 / 5;
}
.story-plate img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.story-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.story-copy .pull {
  font-family: var(--serif); font-style: italic;
  font-variation-settings: 'SOFT' 44, 'WONK' 1, 'opsz' 100, 'wght' 500;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.3; color: var(--ink);
  border-left: 2px solid var(--terra); padding-left: 22px;
}

/* --------------------------------------------------------------------------
   PLEDGE
   -------------------------------------------------------------------------- */
.pledge {
  background:
    radial-gradient(100% 120% at 82% 12%, var(--field-a) 0%, transparent 60%),
    linear-gradient(160deg, var(--field-c), var(--paper-2));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.pledge-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 76px); align-items: center; }
.pledge-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; gap: 10px; }
.field input {
  flex: 1; padding: 16px 18px; background: var(--paper-3);
  border: 1px solid var(--rule-2); border-radius: 2px;
  font: inherit; font-size: .88rem; color: var(--ink); outline: none;
  transition: border-color .3s var(--ease);
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { border-color: var(--ink); }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 96px) 0 32px; }
.footer .micro { color: rgba(242,235,221,.5); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(26px, 4vw, 60px); }
.footer-brand img { height: 38px; margin-bottom: 20px; filter: brightness(0) saturate(100%) invert(94%) sepia(8%) saturate(400%) hue-rotate(340deg); }
.footer p { font-size: .86rem; color: rgba(242,235,221,.72); max-width: 36ch; line-height: 1.6; }
.footer h3 { color: var(--paper); margin-bottom: 16px; font-size: .95rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: .84rem; color: rgba(242,235,221,.72); transition: color .25s var(--ease); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.footer ul a:hover { color: var(--field-a); }
}

.footer-base {
  margin-top: clamp(40px, 5vw, 70px); padding-top: 26px;
  border-top: 1px solid rgba(242,235,221,.16);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
}
.disclosure {
  margin-top: 20px; font-size: .68rem; line-height: 1.7; max-width: 74ch;
  color: rgba(242,235,221,.38);
}

/* --------------------------------------------------------------------------
   PRODUCT PAGE
   -------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 78px); align-items: start; }
.pdp > * { min-width: 0; }
.pdp-gallery { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 106px; min-width: 0; }
.pdp-main {
  border-radius: 2px; overflow: hidden; background: var(--paper-2);
  aspect-ratio: 1/1; box-shadow: 0 30px 64px -34px rgba(26,26,22,.5);
}
.pdp-main img {
  width: 100%; height: 100%; object-fit: cover;
  /* cross-fade on swap: an abrupt src repaint reads as a glitch and flashes
     the empty panel while the new image decodes */
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.pdp-main img.is-swapping { opacity: 0; transform: scale(.985); }
.pdp-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; min-width: 0; -webkit-overflow-scrolling: touch; }
.pdp-thumb {
  width: 76px; height: 76px; flex: none; overflow: hidden;
  border: 1px solid var(--rule); background: var(--paper-2);
  transition: border-color .3s var(--ease);
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumb.is-on { border-color: var(--ink); }
.pdp-thumb[hidden] { display: none !important; }
/* the strip reflows when the colour filter narrows it, so soften the change */
.pdp-thumb { transition: border-color .3s var(--ease), opacity .3s var(--ease); }

/* The global `h1 { clamp(2.7rem, 6.6vw, 6rem) }` rule sizes the HOMEPAGE hero.
   Leaked onto the product page it rendered the title at 84px over five lines,
   which pushed the price and the Add-to-bag button below the fold - the buy
   button sat 170px past a 900px viewport. Scope it: the PDP title is a product
   name, not a headline, and the buy button must be reachable without scrolling. */
.pdp-head h1 {
  font-size: clamp(1.65rem, 2.6vw, 2.45rem);
  line-height: 1.07;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.pdp-info { display: flex; flex-direction: column; gap: 26px; }
.pdp-head { display: flex; flex-direction: column; gap: 14px; }
.pdp-price {
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 100, 'wght' 600;
  font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1;
}
.pdp-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pdp-features li {
  position: relative; padding-left: 22px; font-size: .88rem; color: var(--ink-2); line-height: 1.5;
}
.pdp-features li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--terra);
}

.opt-group { display: flex; flex-direction: column; gap: 12px; }
.opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.opt-head span { font-size: .8rem; color: var(--ink-2); }
/* Size / colour chips.
   They were 2px-radius rectangles on an 8px gap - visually cramped and, as the
   client put it, boxy. Now: a pill silhouette, real breathing room, and a
   pressable height. Still letterspaced caps so it reads editorial rather than
   generic-app. */
.opt-row { display: flex; flex-wrap: wrap; gap: 10px 10px; }
.opt {
  /* The eight sizes wrapped 7 + 1, leaving "5XL" orphaned on its own row,
     which reads as a mistake rather than a choice. Tightening the pill by
     4px a side and the gap by 2px brings the full set onto one line at the
     desktop column width without shrinking the touch target (min-height
     still governs it). */
  padding: 12px 16px; border: 1px solid var(--rule-2); border-radius: 999px;
  font-size: .74rem; font-weight: 500; letter-spacing: .07em;
  line-height: 1; min-height: 42px; display: inline-flex; align-items: center;
  background: transparent;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .12s var(--ease);
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.opt:hover { border-color: var(--ink); background: var(--paper-2); }
}

.opt:active { transform: scale(.97); }
.opt.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  box-shadow: 0 2px 10px -4px rgba(26,26,22,.45);
}
.opt-color { gap: 10px; padding: 8px 18px 8px 10px; }
/* The swatch has to stay legible on BOTH chip states. A dark swatch (Black,
   Navy) on a light chip needs an edge, and on the selected chip - which is a
   solid ink fill - it needs a LIGHT edge, or a black dot on a black pill is
   effectively invisible. A light inset ring plus a state-dependent border
   handles both. */
.opt-dot {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  border: 1px solid rgba(26,26,22,.28);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.opt-color.is-on .opt-dot {
  border-color: rgba(247,244,235,.8);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
/* the quantity stepper matches the chips instead of being a separate grey box */
.stepper {
  border-radius: 999px; min-height: 42px; padding: 0 4px; margin-top: 8px;
  transition: border-color .22s var(--ease);
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.stepper:hover { border-color: var(--ink); }
}

.stepper button { width: 34px; height: 34px; border-radius: 50%; transition: background-color .2s var(--ease); }
.stepper span { min-width: 30px; font-size: .85rem; font-weight: 500; }

.assurances { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; border-top: 1px solid var(--rule); }
.assurances div { display: flex; gap: 12px; font-size: .84rem; color: var(--ink-2); line-height: 1.5; }
.assurances svg { width: 15px; height: 15px; stroke: var(--sage); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; margin-top: 3px; }

/* --------------------------------------------------------------------------
   CART
   -------------------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; background: rgba(26,26,22,.5);
  opacity: 0; pointer-events: none; transition: opacity .38s var(--ease); z-index: 90;
}
.scrim.is-on { opacity: 1; pointer-events: auto; }
.bag {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(408px, 100%);
  background: var(--paper); z-index: 100; display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .44s var(--ease);
  box-shadow: -30px 0 70px -30px rgba(26,26,22,.5);
}
.bag.is-on { transform: translateX(0); }
/* The drawer is the last thing between a shopper and checkout, so the chrome
   is deliberately small and the product is deliberately big. It previously used
   24-26px of padding in head, body AND foot, 78px thumbnails and 20px between
   lines - so the panel felt enormous while showing barely a product and a half.
   The client's words: "my bag is huge and you barely see your products." */
.bag-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--rule); }
.bag-head .micro { font-size: .68rem; }
.bag-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 20px; overscroll-behavior: contain; }
.bag-foot { padding: 16px 20px 18px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 11px; }
.bag-empty { padding: 44px 10px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.bag-empty img { width: 96px; opacity: .5; }
.bag-empty p { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-2); }

.line {
  display: flex; gap: 14px; padding-bottom: 15px; margin-bottom: 15px;
  border-bottom: 1px solid var(--rule);
  /* Adding or removing a line used to swap the whole list, so a removed item
     blinked out of existence. Animate opacity + transform + the box metrics
     so the row fades and collapses, and the ones below slide up into place. */
  /* 240px was a guess that would silently clip a row whose title wrapped to
     three lines, and overflow:hidden makes that permanent rather than
     transient. 340px clears any real row with room to spare. border-color is
     dropped from the transition: it was animating a property nothing changes. */
  max-height: 340px; overflow: hidden;
  transition: opacity .3s var(--ease), transform .34s var(--ease),
              max-height .38s var(--ease), padding-bottom .38s var(--ease),
              margin-bottom .38s var(--ease);
}
.line:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.line--in  { animation: lineIn .44s var(--ease) both; }
.line--out {
  opacity: 0; transform: translateX(14px);
  max-height: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent;
}
@keyframes lineIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.line img { width: 96px; height: 96px; object-fit: cover; background: var(--paper-2); flex: none; }
.line-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.line-info strong { font-family: var(--serif); font-variation-settings: 'SOFT' 22,'WONK' 0,'opsz' 40,'wght' 600; font-size: 1rem; }
.line-price { font-family: var(--serif); font-size: 1rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--rule-2); border-radius: 999px; padding: 0 4px; margin-top: 8px; }
.stepper button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); border-radius: 50%; transition: background-color .2s var(--ease); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.stepper button:hover:not(:disabled) { background: var(--paper-2); }
}

.stepper button:disabled { opacity: .32; cursor: not-allowed; }
.stepper span { min-width: 30px; text-align: center; font-size: .85rem; font-weight: 500; }
.bag-total { display: flex; justify-content: space-between; align-items: baseline; }
.bag-total strong {
  font-family: var(--serif); font-variation-settings: 'SOFT' 30,'WONK' 1,'opsz' 100,'wght' 600;
  font-size: 1.6rem;
}


/* --------------------------------------------------------------------------
   CONTENT PAGES — editorial prose in the same language
   -------------------------------------------------------------------------- */
.prose { max-width: 66ch; display: flex; flex-direction: column; gap: 22px; }
.prose h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-top: 26px;
  font-variation-settings: 'SOFT' 24, 'WONK' 1, 'opsz' 60, 'wght' 600;
}
.prose p { font-size: 1.02rem; line-height: 1.72; color: var(--ink-2); }

/* The story and policy pages open with an authored <p class="lede">. At 1.1rem
   against 1.02rem body it was an 8% step - too small to read as a decision, so
   it just looked like the first paragraph had been set by mistake. A lede
   should be an obvious step, so give it one. Scoped to .rte (the container
   page.content actually renders inside) and .prose, so section intros
   elsewhere keep their current size. */
.rte .lede, .prose .lede { font-size: 1.2rem; line-height: 1.55; }

/* The authored page bodies each carry their own <div class="wrap">, written
   when that content stood alone. Inside the theme they land in an outer .wrap
   that already provides the gutter, so the 28px padding was applied twice and
   pushed every heading and paragraph 28px right of the lede above them - a CMS
   page read with two left margins. Measured on all six content pages: lede at
   108px, everything below it at 136px. Content never owns the page gutter, so
   neutralise a wrap nested in the rendered body. */
.rte .wrap, .rte .wrap-tight { max-width: none; padding-inline: 0; margin-inline: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--rule-2); transition: border-color .3s var(--ease); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.prose a:hover { border-color: var(--terra); }
}


.prose .pull, .pull {
  font-family: var(--serif); font-style: italic;
  font-variation-settings: 'SOFT' 46, 'WONK' 1, 'opsz' 100, 'wght' 500;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.32; color: var(--ink);
  border-left: 2px solid var(--terra); padding-left: 24px; margin: 8px 0 14px;
}

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ticks li { position: relative; padding-left: 24px; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.ticks li::before { content: ''; position: absolute; left: 0; top: .68em; width: 8px; height: 1px; background: var(--terra); }
.ticks strong { color: var(--ink); font-weight: 600; }

/* size table */
.sizes { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sizes caption { text-align: left; padding-bottom: 18px; }
.sizes th, .sizes td { padding: 15px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
.sizes thead th {
  font-family: var(--sans); font-size: .625rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule-2);
}
.sizes tbody th {
  font-family: var(--serif); font-variation-settings: 'SOFT' 20,'WONK' 0,'opsz' 40,'wght' 600;
  font-size: 1.05rem; width: 22%;
}
.sizes tbody td { font-size: .98rem; color: var(--ink-2); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.sizes tbody tr:hover { background: var(--paper-2); }
}


/* contact cards */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.contact-card {
  background: var(--paper-3); border: 1px solid var(--rule); border-radius: 2px;
  padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 12px;
  color: inherit; cursor: pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.contact-card:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.contact-card:hover .tlink { gap: .9rem; border-color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.contact-card:hover { transform: translateY(-5px); box-shadow: 0 26px 50px -28px rgba(26,26,22,.4); }
}

.contact-card h3, .contact-card .card-h { font-size: 1.22rem; }
.contact-card p { font-size: .92rem; line-height: 1.6; color: var(--ink-2); }
.contact-card .tlink { margin-top: auto; align-self: flex-start; }

/* keep-reading row */
.linkrow { display: flex; flex-wrap: wrap; gap: 14px 30px; }

/* --------------------------------------------------------------------------
   TOAST
   -------------------------------------------------------------------------- */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 26px);
  background: var(--ink); color: var(--paper); padding: 15px 28px; border-radius: 2px;
  font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .38s var(--ease), transform .38s var(--ease);
  max-width: min(90vw, 480px); text-align: center;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   REVEAL — content is visible by default; animation is an enhancement only
   -------------------------------------------------------------------------- */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero-inner, .story-in, .pdp, .pledge-in { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .hero-wm { width: 78vw; left: auto; right: -18%; bottom: -6%; opacity: .34; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .menu-toggle { display: grid; }
  .nav {
    position: absolute; top: 82px; left: 0; right: 0; background: var(--paper);
    flex-direction: column; gap: 0; padding: 6px 28px 22px;
    border-bottom: 1px solid var(--rule); box-shadow: 0 20px 40px -24px rgba(26,26,22,.4);
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform .32s var(--ease), opacity .32s var(--ease);
  }
  .nav.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .brand .micro { display: block; }
}
@media (max-width: 660px) {
  .footer-grid { grid-template-columns: 1fr; }
  .field { flex-direction: column; }
  .masthead-in { height: 70px; gap: 12px; }
  .brand img { height: 34px; }
  /* the tagline is white-space:nowrap, so on a phone it cannot wrap and it
     pushed the document 27px wider than the viewport (sideways scrolling) */
  .brand .micro { display: none; }
  .notice span { letter-spacing: .12em; }
  .plate:nth-child(odd), .plate:nth-child(even) { transform: none; }
  .spec { border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   PAWTAGONIST focus ring — one consistent visible outline on keyboard focus
   -------------------------------------------------------------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, .btn:focus-visible, .tlink:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}
.tlink:focus-visible { outline-offset: 6px; }


/* --------------------------------------------------------------------------
   PRINT — people print size guides and order details; make them readable
   -------------------------------------------------------------------------- */

/* ==========================================================================
   TOUCH BEHAVIOUR
   The site was built for a mouse. These are the small things that stop it
   feeling like a desktop page squeezed onto a phone. Every hover rule above
   is already gated behind (hover: hover), so nothing sticks after a tap.
   ========================================================================== */
html { -webkit-tap-highlight-color: transparent; }

/* Kills the ~300ms wait before a tap registers, and the accidental
   pinch/double-tap zoom on controls the visitor is trying to press. */
a, button, input, select, textarea,
.btn, .tlink, .ibtn, .ed, .dot, .plate, .plate-next,
.stepper button, .unit, .opt, .filter-reset, .localize-go {
  touch-action: manipulation;
}

/* Without hover there is no press feedback, so give touch users an active
   state — a tap that does nothing visible reads as a broken tap. */
@media (hover: none) {
  .btn:active { transform: translateY(1px); }
  .ed:active, .plate:active, .plate-next:active { opacity: .92; }
  .tlink:active { color: var(--terra); }
  .ibtn:active { color: var(--terra); }
}

/* The bag is a fixed overlay: keep its checkout button above the home
   indicator on a notched phone. */
.bag-foot { padding-bottom: max(22px, env(safe-area-inset-bottom)); }

}

@media print {
  :root { --paper: #fff; --paper-2: #fff; --paper-3: #fff; --ink: #000; --ink-2: #333; }
  body { background: #fff; color: #000; }
  .notice, .masthead, .bag, .scrim, .toast, .hero-wm, .hero-figure,
  .footer, .linkrow, .idx-line, .dot, .bag-foot { display: none !important; }
  .hero, .pledge, .process { background: none !important; }
  .section, .hero-inner { padding-block: 0 !important; }
  .js .rv { opacity: 1 !important; transform: none !important; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .78em; color: #555; }
  .sizes th, .sizes td { border-bottom: 1px solid #999; }
  h1, h2, h3 { page-break-after: avoid; }
  .size-guide, .sizes { page-break-inside: avoid; }
}


/* --------------------------------------------------------------------------
   SIZE GUIDE UNIT SWITCH
   Sits above the measurements table and flips every cell between the
   manufacturer's inch figures and their exact centimetre equivalent.
   -------------------------------------------------------------------------- */
.unitbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.unit-switch { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 2px; overflow: hidden; }
.unit {
  padding: 9px 18px; font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  background: transparent; transition: background .25s var(--ease), color .25s var(--ease);
}
.unit + .unit { border-left: 1px solid var(--rule-2); }

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.unit:hover { background: var(--paper-2); color: var(--ink); }
}

.unit.is-on { background: var(--ink); color: var(--paper); }
.unit:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.sizes td[data-cm] { font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   LOCALIZATION (country / currency / language)
   Only renders when the shop actually offers a choice.
   -------------------------------------------------------------------------- */
.localize { display: flex; flex-wrap: wrap; gap: 22px 40px; margin: 0 0 26px; }
.localize-form { display: flex; flex-direction: column; gap: 8px; }
.localize-form .micro { color: var(--paper-3); opacity: .7; }
.localize-row { display: flex; align-items: stretch; }
.localize-select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.06); color: var(--paper);
  border: 1px solid rgba(255,255,255,.22); border-right: 0;
  padding: 10px 34px 10px 13px; font-size: .82rem; font-family: var(--sans);
  /* The row is a flex container, so the select was shrinking below the width
     its own text needs - the language picker rendered "English" as "Enter".
     max-content floors it at the width of its widest option. */
  min-width: max-content; flex: 0 1 auto;
  border-radius: 2px 0 0 2px; min-width: 200px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.localize-select option { color: #1A1A16; background: #F2EBDD; }
.localize-select:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.localize-go {
  border-radius: 0 2px 2px 0; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.22); color: var(--paper);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) { /* gated: was sticking on touch */

.localize-go:hover { background: var(--paper); color: var(--ink); }
}

/* iOS Safari zooms the whole page in when it focuses an input smaller than
   16px, and never zooms back out. This is a property of the touch keyboard,
   not of the viewport: an iPad in landscape is 1024px wide and still zooms.
   So the rule keys off touch capability rather than width, and desktop
   (where nothing zooms) keeps its tighter setting. The width query stays as
   a belt-and-braces fallback for anything that reports hover but is touch. */
@media (hover: none), (max-width: 660px) {
  .field input,
  .localize-select,
  select,
  input[type="email"],
  input[type="text"],
  input[type="search"],
  textarea {
    font-size: 16px;
  }