/* Reign Wala, The Everywhere Bag: homepage.
   Mobile first. Base styles are the 390px layout; 560 / 760 / 900 / 1200 / 1440 / 1800 add.
   One warm-white ground from the first photograph to the last. The only saturated colour is leather.
   What moves: the opening settles in; below it, things arrive once as they come into view (headings rise,
   photographs develop, a section's hairline draws, the two display lines rise word by word: css/motion.css);
   a bag lifts under the hand. Nothing replays and nothing is tied to the scroll position. */

:root {
  --page: #f7f5f1;
  --paper: #fffefb;
  /* (9 Nov, the refinement pass) one warm family: the navy is gone. The ink is a warm near-black drawn from the dark
     red, so words, rules and the dark surfaces read as one colour family rather than three darks side by side. */
  --ink: #261417;
  --ink-rgb: 38, 20, 23;
  --soft: #5c4a4c;
  --quiet: #7b6869;
  --plum: var(--oxblood);
  --sand: #d3b59c;
  --gold: #c2a063;
  --line: rgba(var(--ink-rgb), 0.14);
  --line-soft: rgba(var(--ink-rgb), 0.08);
  --line-strong: rgba(var(--ink-rgb), 0.38);
  --max: 1180px;
  --pad: 20px;
  --mast: 62px;
  --tick: 30px;
  /* colour: the ink (--ink) is the text. The dark red (--oxblood) is the one accent: the wordmark, every button, the
     announcement bar, the What's a wala band and the footer. The caramel (--caramel) is used sparingly: the Notes &
     Quotes band on the homepage, and one closing band on the other pages. The peach
     (--peach) is for small words on the dark red. To change any of them, change it here, once. --navy is only an old
     name for the ink. */
  --navy: var(--ink);
  --oxblood: #38010d;
  --oxblood-hover: #4a0614;
  --caramel: #e3d1be;
  --peach: #ffdeb2;
  --label-dark: #ffdeb2;
  --on-dark: #f7f5f1;
  --on-dark-soft: rgba(247, 245, 241, 0.72);
  --line-dark: rgba(247, 245, 241, 0.16);
  /* type: one scale, kept small and even (9 Nov): 11 label / 13 small / 15 body / 17 lead / 19 subhead, then names and
     headings. Section headings are about 35px on a laptop, What's a wala 32px, page titles 56px. */
  --t-label: 11px; --t-small: 13px; --t-body: 15px; --t-lead: 17px; --t-h3: 19px;
  --t-input: 16px;                              /* form fields never go under 16px, or phones zoom in */
  --t-name: clamp(21px, 1.6vw, 23px);          /* a bag's name on its card */
  --t-h2: clamp(27px, 7.2vw, 31px);
  --t-h2-s: clamp(26px, 2.3vw, 33px);           /* a heading set in a narrow rail or beside other words */
  --t-say: clamp(23px, 6.2vw, 26px);            /* the large statement: What's a wala */
  --t-sub: clamp(20px, 1.65vw, 24px);            /* a serif line that introduces a section, the footer sign-off */
  --t-lede: clamp(17px, 1.45vw, 21px);           /* the serif line under a page title */
  --t-title: clamp(38px, 3.9vw, 56px);          /* a page's title */
  --t-title-s: clamp(34px, 9vw, 40px);        /* a bag's title, the 404 line */
  --t-mail: clamp(26px, 3.2vw, 46px);
  /* space: --gap between sections, --gap-in between sections of one chapter, --band-pad inside a colour band */
  --gap: clamp(88px, 22vw, 112px);
  --gap-in: clamp(64px, 8vw, 120px);
  --band-pad: clamp(88px, 10vw, 152px);
  --serif: Gambetta, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: Switzer, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-leave: cubic-bezier(0.4, 0, 1, 1);
  --ease-pen: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 560px) { :root { --pad: clamp(24px, 4vw, 48px); } }
@media (min-width: 760px) { :root { --t-h2: clamp(28px, 2.45vw, 36px); --t-say: clamp(26px, 2.2vw, 32px); --t-title-s: clamp(36px, 3.6vw, 52px); --gap: clamp(112px, 11.5vw, 176px); } }
@media (min-width: 900px) { :root { --mast: 72px; } }
@media (min-width: 1440px) { :root { --max: 1280px; } }
@media (min-width: 1800px) { :root { --max: 1360px; } }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mast) + 24px); }
body { background: var(--page); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
body.is-locked { overflow: hidden; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
figure { margin: 0; }
[hidden] { display: none !important; }
::selection { background: #ffdeb2; color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--oxblood); color: var(--page); padding: 10px 16px; font-size: var(--t-small); transition: top 200ms; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ type */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.016em; }
p, figcaption, dd, blockquote { text-wrap: balance; }
.label { font-family: var(--sans); font-size: var(--t-label); line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--quiet); font-weight: 500; }
.link { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; padding-bottom: 4px; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 100% 1px no-repeat; transition: background-size 420ms var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link { position: relative; }
.link::after { content: ""; position: absolute; inset: -12px -10px -10px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-top: var(--gap); }

/* --------------------------------------------------------------- buttons */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 16px; height: 50px; padding: 0 26px; background: var(--oxblood); color: var(--page); font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; white-space: nowrap; transition: background-color 360ms var(--ease), color 320ms var(--ease), transform 140ms; }
/* (9 Nov) a button answers the hand with a soft warm light that sits under the pointer and follows it across the
   button (js/motion.js sets --mx and --my); the words stay still. The light is blended into the dark red (soft light),
   so the red stays red and only warms and deepens where the light falls, like light on leather, never a pale haze.
   Without a mouse it simply deepens a shade. */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 196, 150, 0.85), rgba(255, 170, 130, 0.35) 45%, transparent 75%);
  transition: opacity 420ms var(--ease); }
.btn--light::before { background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.9), transparent 70%); }
.btn--light::before { mix-blend-mode: normal; }
.cover[data-tone="light"] .btn--light::before { mix-blend-mode: soft-light; background: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 196, 150, 0.85), rgba(255, 170, 130, 0.35) 45%, transparent 75%); }
@media (hover: hover) and (pointer: fine) { .btn:hover::before, .btn:focus-visible::before { opacity: 1; } }
@media (hover: none), (pointer: coarse) { .btn:hover { background: var(--oxblood-hover); } }
.btn:active { transform: translateY(1px); }
.btn .price { letter-spacing: 0.06em; padding-left: 16px; border-left: 1px solid currentColor; line-height: 1.4; font-variant-numeric: tabular-nums; }
.btn--light { background: var(--page); color: var(--ink); }
.btn--light:hover { background: #fff; }

/* ---------------------------------------------------------------- ticker */
.ticker { overflow: hidden; height: var(--tick); display: flex; align-items: center; background: var(--oxblood); color: var(--peach); font-size: var(--t-label); letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; }
/* The announcement bar is the dark red on every page, over every opening. */
.ticker .track { display: flex; width: max-content; animation: ticker 80s linear infinite; }
.ticker:hover .track { animation-play-state: paused; }
.ticker span { display: inline-flex; align-items: center; white-space: nowrap; min-width: 34vw; }
.ticker span::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; margin: 0 56px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* -------------------------------------------------------------- masthead */
/* Sits over the opening photograph in white; turns to paper once the photograph has passed.
   Leaves when the page moves down, returns the moment it moves up. */
.mast { position: sticky; top: 0; z-index: 30; height: var(--mast); margin-bottom: calc(var(--mast) * -1); color: #fff; border-bottom: 1px solid transparent; transition: transform 460ms var(--ease), background-color 320ms, color 320ms, border-color 320ms; }
.mast.is-solid { background: rgba(247, 245, 241, 0.92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: var(--ink); border-bottom-color: var(--line); }
.mast.is-hidden { transform: translateY(-104%); transition: transform 320ms var(--ease-leave), background-color 320ms, color 320ms, border-color 320ms; }
.mast .in { height: 100%; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr max-content 1fr; align-items: center; }
.mast nav, .mast .side { display: flex; align-items: center; gap: 28px; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.mast .side { justify-content: flex-end; }
.mast nav a, .mast nav button, .mast .side a, .mast .side button { min-height: 44px; display: inline-flex; align-items: center; position: relative; white-space: nowrap; letter-spacing: inherit; text-transform: inherit; font-weight: inherit; }
/* (10 Nov) a menu link answers the hand with a glow, not an underline: its words warm to the dark red with a faint
   ember light around them (on the dark red footer, a peach light: see .footer .cols a) */
.mast nav a, .mast .side a, .mast .side button, .mast nav button { transition: color 320ms var(--ease), text-shadow 420ms var(--ease); }
@media (hover: hover) {
  .mast nav a:hover, .mast .side a:hover, .mast .side button:hover, .mast nav button:hover { color: var(--oxblood); text-shadow: 0 0 14px rgba(196, 64, 54, 0.45), 0 0 2px rgba(196, 64, 54, 0.25); }
}
.mast .brand { justify-self: center; display: block; padding: 6px 0; }
.mast .brand img { height: 32px; width: auto; filter: brightness(0) invert(1); transition: filter 320ms; }
.mast.is-solid .brand img { filter: none; }
/* over the light opening the header is ink (.on-light is in the header's own markup in index.html) */
.mast.on-light:not(.is-solid) { color: var(--ink); }
.mast.on-light:not(.is-solid) .brand img { filter: none; }
.mast a.desk { display: none; }
.mast :focus-visible { outline-color: currentColor; }

/* ---------------------------------------------------------------- covers */
/* The photographs that open and close the page. Words are set into the quiet side of each. */
.cover { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #1b2844; height: calc(100vh - var(--tick)); height: calc(100svh - var(--tick)); min-height: 560px; max-height: 1080px; }
.cover-media { position: absolute; inset: 0; z-index: -2; transform-origin: 60% 62%; animation: settle 2400ms var(--ease) both; }
/* The opening image: the ivory bench, one slide. Where its photograph is set smaller than the opening (a phone), the
   slide's ground carries the wall on (--g1 above the photograph's top at --gt, --g2 below its foot at --gb) and the
   photograph's edges inside the opening fade into it (--ft --fr --fb --fl, .is-faded). The script after the opening in
   index.html places the photograph around its bag (--x --y --w --h); without it the photograph simply fills the
   opening. The whole slide drifts with the page on a mouse (js/app.js). */
.cover-slides { position: absolute; inset: 0; will-change: transform; }
/* (C2) beside the words the photograph may stop short of the left edge (behind the words: data-open): there the
   ground is the wall's colour at that edge of the photograph (--gl1/--gl2, top to foot), under the photograph's fade
   (--gxl: the gap) */
.slide { --pos: 50% 50%; position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transform-origin: var(--sx, 66%) var(--sy, 50%);
  background: linear-gradient(180deg, var(--gl1, transparent), var(--gl2, transparent)) 0 0 / calc(var(--gxl, 0px) + var(--fl, 0px)) 100% no-repeat,
    linear-gradient(180deg, var(--gr1, transparent), var(--gr2, transparent)) 100% 0 / calc(var(--gxr, 0px) + var(--fr, 0px)) 100% no-repeat,
    linear-gradient(180deg, var(--g1) var(--gt, 0%), var(--g2) var(--gb, 100%)); }
.slide.is-on { z-index: 2; opacity: 1; visibility: visible; transition: opacity 800ms var(--ease), visibility 0s; }
.slide img { position: absolute; left: var(--x, 0px); top: var(--y, 0px); width: var(--w, 100%); height: var(--h, 100%); max-width: none; object-fit: cover; object-position: var(--pos); }
.slide.is-faded img { -webkit-mask-image: linear-gradient(180deg, transparent var(--fa, 0px), #000 var(--ft), #000 calc(100% - var(--fb)), transparent), linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent var(--fa, 0px), #000 var(--ft), #000 calc(100% - var(--fb)), transparent), linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); mask-composite: intersect; }
/* a soft light veil at the top keeps the ink header clear of the banyan's leaves where they reach the top */
.slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.slide--ivory::after { background: linear-gradient(180deg, rgba(242, 237, 230, 0.78) 0, rgba(242, 237, 230, 0.6) 56px, rgba(242, 237, 230, 0) 150px); }
/* the first frame is drawn as it stands, in the ink tone, with nothing moving into place */
.cover.is-still, .cover.is-still *, .mast.is-still, .mast.is-still * { transition: none !important; }
@media (max-width: 899px) {
  /* (without the script, the photograph fills the opening, its bag near the middle) */
  .slide { --pos: 78% 50%; }
  /* the bag sits between the headline and the button: a wide, short window grows the opening with its width, so
     the bag keeps a fair size (the words and the button take about 410px) */
  .cover[data-cover] { min-height: max(560px, calc(47vw + 410px)); }
}
.cover-copy { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); top: calc(var(--mast) + 26px); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; }
.cover-kicker { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: 1.3; color: rgba(255, 255, 255, 0.9); }
.cover { --h1: clamp(38px, 10.8vw, 50px); }
.cover h1, .cover h2 { color: #fff; font-size: var(--h1); line-height: 1.02; letter-spacing: -0.022em; }
.cover h1 { margin-top: 10px; }
.cover h1 .ln { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.cover h1 .ln > span { display: block; animation: line-up 1100ms var(--ease) both; }
.cover h1 .ln:nth-child(1) > span { animation-delay: 260ms; }
.cover h1 .ln:nth-child(2) > span { animation-delay: 360ms; }
.cover-sub { margin-top: 14px; max-width: 21em; font-size: var(--t-body); line-height: 1.55; color: rgba(255, 255, 255, 0.88); }
[data-cover] .cover-sub { display: none; }
.cover-act { margin-top: auto; display: grid; gap: 18px; }
.cover-act .btn { width: 100%; }
.cover-six { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.86); }
/* under 560 the words beside the dots keep the width "Six leathers" has at rest (a longer leather's name runs on to the right), so naming a leather never moves the dots */
@media (max-width: 559.98px) { .cover-six > span { display: block; width: 7.3em; white-space: nowrap; } }
.dots { display: flex; gap: 2px; }
.dots a { display: grid; place-items: center; width: 24px; height: 44px; }
.dots a::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.62); transition: transform 320ms var(--ease), box-shadow 800ms var(--ease); }
.dots a:hover::before, .dots a:focus-visible::before { transform: scale(1.35); }
.cover :focus-visible { outline-color: #fff; }
.cover-kicker, .cover-sub, .cover-act { animation: rise 900ms var(--ease) both; }
.cover-kicker { animation-delay: 180ms; }
.cover-sub { animation-delay: 520ms; }
.cover-act { animation-delay: 640ms; }

/* the opening is a light wall (the ivory): its words, the dots' rings and the button are ink; the header over the opening is ink with them (.mast.on-light) */
.cover[data-tone="light"] .cover-kicker { color: rgba(var(--ink-rgb), 0.86); }
.cover[data-tone="light"] h1 { color: var(--ink); }
.cover[data-tone="light"] .cover-sub { color: rgba(var(--ink-rgb), 0.8); }
.cover[data-tone="light"] .cover-six { color: rgba(var(--ink-rgb), 0.8); }
.cover[data-tone="light"] .dots a::before { box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.4); }
.cover[data-tone="light"] .btn--light { background: var(--oxblood); color: var(--page); }
.cover[data-tone="light"] .btn--light:hover { background: var(--oxblood); }
.cover[data-tone="light"] :focus-visible { outline-color: var(--ink); }
@keyframes settle { from { transform: scale(1.07); } to { transform: none; } }
@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


/* ------------------------------------------------------------ the pre-order bar */
/* The last words before the footer: a slim band on the page cream, no photograph. Her two sentences, the button, and the
   ship date with clear space beneath it (never less than 72px) before the dark red footer. A phone stacks them. */
.preorder { display: grid; gap: 26px; padding-top: var(--gap-in); padding-bottom: clamp(80px, 9vw, 128px); }
.preorder h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.02em; max-width: 14em; text-wrap: balance; }
.preorder .sub { margin-top: 14px; color: var(--soft); max-width: 27em; }
.preorder .act { display: grid; gap: 16px; }
.preorder .act .btn { width: 100%; }
.preorder .fine { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--soft); text-align: center; }

/* --------------------------------------------------------------- the six */
/* the hairline under the head is its ::after, so it can draw in (data-reveal="draw"); the border keeps its 1px */
.shop-head { position: relative; display: grid; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid transparent; }
.shop-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); }
.shop-head .aside { max-width: 31em; color: var(--ink); }
.shop-head .terms { margin-top: 10px; }
.bags { display: grid; grid-template-columns: 1fr; gap: 52px 28px; margin-top: 36px; }
.bag { position: relative; scroll-margin-top: calc(var(--mast) + 24px); }
.bag .tag { display: block; min-height: 16px; margin-bottom: 4px; font-size: var(--t-label); line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--plum); }
/* the bag first (Allie, 7 Nov), the leather under it: the render sits on its own page-coloured layer so its white
   ground still melts away under the multiply blend; a hover, a tap or keyboard focus fades it out to the swatch.
   (9 Nov) The frame is square, so the leather shows whole, its pull and its zip, as on her shop. */
.bag-shot { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--line-soft); }
.bag-shot .swatch { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1400ms cubic-bezier(0.33, 0, 0.2, 1); }
.bag-view { position: absolute; inset: 0; isolation: isolate; background: var(--page); opacity: 1; transition: opacity 650ms cubic-bezier(0.45, 0, 0.25, 1); }
.bag-view .render { position: absolute; left: 0; top: 50%; width: 100%; height: auto; max-width: none; transform: translateY(-50%); mix-blend-mode: multiply; transition: transform 1000ms cubic-bezier(0.33, 0, 0.2, 1); }
.bag-shot.is-turned .bag-view, .bag:focus-within .bag-view { opacity: 0; }
.bag-shot.is-turned .bag-view .render, .bag:focus-within .bag-view .render { transform: translateY(-50%) scale(0.985); }
.bag-shot.is-turned .swatch { transform: scale(1.04); }
.flip-hint { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 6px 10px; background: rgba(247, 245, 241, 0.92); font-size: var(--t-label); line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink); pointer-events: none; }
.flip-hint .to-bag, .is-turned .flip-hint .to-leather { display: none; }
.is-turned .flip-hint .to-bag { display: inline; }
@media (hover: hover) and (pointer: fine) { .flip-hint { display: none; } }
.bag-meta { position: relative; padding-top: 16px; border-top: 1px solid var(--line); }
/* the thread: a stitch of the leather's own colour, drawn the full width when the bag is under the hand */
.bag-meta::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--c); transform: scaleX(0.085); transform-origin: left; transition: transform 800ms var(--ease); }
.bag:hover .bag-meta::before, .bag:focus-within .bag-meta::before, .bag.is-called .bag-meta::before { transform: scaleX(1); }
.bag-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bag-name { font-size: var(--t-name); line-height: 1.2; letter-spacing: -0.008em; }
.bag-price { font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.bag-fin { margin-top: 3px; }
.bag-line { margin-top: 10px; font-size: var(--t-body); color: var(--soft); max-width: 27em; }
.bag-buy { margin-top: 16px; display: inline-flex; align-items: center; height: 42px; padding: 0 20px; box-shadow: 0 0 0 1px var(--ink) inset; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; transition: background-color 320ms var(--ease), color 320ms var(--ease); }
.bag-buy:hover, .bag-buy.is-added { background: var(--oxblood); color: var(--page); }
/* the picture and the name lead to the bag's own page */
@media (hover: hover) and (pointer: fine) { .bags .bag-shot { cursor: pointer; } }
.shop-note { margin-top: 44px; font-family: var(--serif); font-style: italic; font-size: var(--t-small); line-height: 1.55; color: var(--soft); max-width: 46em; }

/* ---------------------------------------------------------- photographs */
/* every photograph lives in a .ph box of a fixed shape, so a replaced file can never move the layout */
.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
/* [data-ph] photographs develop as they arrive: css/motion.css */
figcaption { font-size: var(--t-small); line-height: 1.5; color: var(--soft); }

/* ---------------------------------------------------------------- makers */
.makers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; grid-template-areas: "head head" "a a" "b c" "body body"; }
.m-head { grid-area: head; margin-bottom: 14px; }
.m-a { grid-area: a; } .m-b { grid-area: b; } .m-c { grid-area: c; }
.m-a .ph { aspect-ratio: 3 / 2; }
.m-b .ph, .m-c .ph { aspect-ratio: 4 / 5; }
.makers figcaption { margin-top: 10px; }
/* a tablet (600 to 899): the three photographs in one row, as on a laptop, about a quarter of the screen tall */
@media (min-width: 600px) and (max-width: 899px) {
  .makers-grid { grid-template-columns: 3fr 2fr 2fr; grid-template-areas: "head head head" "a b c" "body body body"; }
  .m-a .ph, .m-b .ph, .m-c .ph { aspect-ratio: auto; height: clamp(220px, 34vw, 280px); }
}
.m-body { grid-area: body; padding: 18px 0 12px; }
.m-body p { color: var(--soft); max-width: 36em; }
.m-body p:not(.share) + p:not(.share) { margin-top: 14px; }
.m-body .share { margin-top: 20px; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.36; letter-spacing: -0.006em; color: var(--ink); max-width: 21em; text-wrap: balance; }
.m-body .link { display: inline-block; margin-top: 24px; }

/* -------------------------------------------------------------- promises */
.promises { margin-top: var(--gap-in); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.promises li { display: flex; padding: 28px 10px 24px; }
.promises li:nth-child(even) { border-left: 1px solid var(--line-soft); }
.promises li:nth-child(n + 3) { border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------------- the bag */
/* Section 4: words only. From 1200 the heading and her sentence stand on the left, the four pockets and the size line on
   the right; narrower, they stack. (9 Nov polish: each pocket's name has more room and more air before its words, and
   the heading's first line sits level with the first pocket's name.) */
.anatomy .lead { margin-top: 16px; font-family: var(--serif); font-size: var(--t-lead); line-height: 1.5; color: var(--soft); max-width: 25em; }
.pockets { margin-top: 28px; border-top: 1px solid var(--line); }
.pockets > div { display: grid; gap: 4px 36px; padding: 17px 0 18px; border-bottom: 1px solid var(--line); }
.pockets dt { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.3; text-wrap: balance; }
.pockets dd { color: var(--soft); font-size: var(--t-body); line-height: 1.6; max-width: 31em; }
.specs { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.specs dt { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }
.specs dd { margin-top: 3px; font-size: var(--t-body); }

/* Section 7: the open bag, with her line above and its caption below, centred in the column. (9 Nov) The picture is
   shown whole: bag/open-black-room.webp is the top view with clear white room around the bag, its strap, its tassels
   and its shadow, so under the multiply blend the shadow fades out on the cream and nothing meets the frame's edge.
   Never wider than 652px (the bag a little larger than it was), about 475px tall. */
.open { display: grid; gap: 10px; justify-items: center; text-align: center; }
.open .shot { position: relative; width: 100%; max-width: 652px; aspect-ratio: 1222 / 890; }
.open .shot img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.open-line { font-family: var(--serif); font-style: italic; font-size: var(--t-lead); line-height: 1.3; color: var(--soft); }
.open figcaption { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }

/* ------------------------------------------------------------- four ways */
/* Section 5: a slim strip, about a quarter of a laptop screen with Field notes: the four ways in one row (two by two on
   a phone), Field notes under them in one short line. No photograph. The strip is bounded by hairlines. */
.ways { margin-top: var(--gap-in); }
.ways + .promises-wrap .promises { margin-top: clamp(40px, 4.4vw, 64px); }
.inside { padding-top: var(--gap-in); }
.ways-row { border-top: 1px solid var(--line); padding-top: 22px; display: grid; gap: 14px; }
.ways h2 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.006em; }
.ways-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }   /* (the bag pages' "Wear it four ways" uses this too) */
.ways-grid li { padding: 16px 14px 18px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: var(--t-lead); line-height: 1.35; color: var(--ink); text-wrap: balance; }
.ways-grid li:nth-child(even) { padding: 16px 0 18px 14px; border-left: 1px solid var(--line); }
#ways .ways-grid { border-top: 0; }
#ways .ways-grid li { padding: 12px 14px 12px 0; border-bottom: 0; }
#ways .ways-grid li:nth-child(even) { padding: 12px 0 12px 14px; }
.field-notes { margin-top: 16px; border-top: 1px solid var(--line); padding: 16px 0 18px; display: grid; gap: 6px; }
.field-notes h3 { font-size: var(--t-h3); font-style: italic; line-height: 1.3; letter-spacing: -0.006em; }
.field-notes p { color: var(--soft); max-width: 60em; }

/* ----------------------------------------------------------- in the wild */
/* Its own section: one line under the heading, the four customers below, each named by the way she wears it. */
.wild-head { text-align: center; margin-bottom: 36px; }
.wild-head p { margin: 12px auto 0; color: var(--soft); max-width: 30em; }
.wild-head a { color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size 420ms var(--ease); }
.wild-head a:hover { background-size: 0 1px; background-position: 100% 100%; }
/* One row of photos with no captions. Four fill the column; more scroll sideways and snap one photo at a time
   (a fifth sits just off the edge). On a phone about 1.3 photos show, the next one peeking. */
.wear { --g: 14px; --n: 1.3; --k: 1; display: flex; gap: var(--g); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.wear::-webkit-scrollbar { display: none; }
.wear:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.wear figure { flex: 0 0 calc((100% - var(--k) * var(--g)) / var(--n)); scroll-snap-align: start; }
.wear .ph { aspect-ratio: 4 / 5; }
@media (min-width: 600px) { .wear { --n: 2.3; --k: 2; --g: 18px; } }   /* a tablet: two and a bit in view */
.wear-nav { display: none; justify-content: flex-end; gap: 4px; margin-top: 10px; }   /* a phone swipes; the arrows are for larger screens */
.wear-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); transition: opacity 240ms var(--ease); }
.wear-btn .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wear-btn:disabled { opacity: 0.3; cursor: default; }
.wear-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

/* --------------------------------------------------------------- process */
/* The five steps, inside the makers' band after the viewer. From 900: one even row of five, all in view and still, the
   photographs about 315px tall (7:10) and the stitched thread beneath them and above their captions, from the first to
   the last, drawn once as the row arrives (css/motion.css). Under 900: one sideways row that swipes, snapping to each
   photograph (the same row as In the Wild's: about 1.3 photographs on a phone, 3.3 on a tablet); the thread is left out. */
.making { margin-top: var(--gap-in); }
.making-head { margin-bottom: clamp(36px, 6vw, 52px); }
.making-head h2 { margin-top: 10px; }
.making-head p:not(.label) { margin-top: 16px; color: var(--soft); max-width: 37em; }
.steps-wrap { position: relative; --sg: clamp(14px, 1.6vw, 24px); --cut: 0 0 100% 0; }
.steps { --g: 14px; --n: 1.3; --k: 1; position: relative; z-index: 1; display: flex; gap: var(--g); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.steps::-webkit-scrollbar { display: none; }
.steps:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.steps li { flex: 0 0 calc((100% - var(--k) * var(--g)) / var(--n)); scroll-snap-align: start; }
.steps .ph { aspect-ratio: 3 / 4; background: var(--caramel); }
.steps figcaption { margin-top: 14px; }
.steps figcaption b { display: block; font-family: var(--serif); font-size: var(--t-lead); line-height: 1.3; font-weight: 400; color: var(--ink); }
@media (min-width: 600px) { .steps { --n: 3.3; --k: 3; --g: 18px; } }
.steps-wrap > .thread { display: none; }

/* ------------------------------------------------------------- manifesto */
/* a dark band: the label in --label-dark, the two sentences cream (the second one softer), the link cream with the stitch */
.manifesto { --band-pad: clamp(80px, 8vw, 116px); text-align: center; }
.manifesto .label { color: var(--label-dark); }
.manifesto .say { margin: 18px auto 0; max-width: 19em; font-family: var(--serif); font-size: var(--t-say); line-height: 1.2; letter-spacing: -0.016em; text-wrap: balance; }
.manifesto .say--soft { margin: 1.1em auto 0; max-width: 26em; font-size: var(--t-sub); line-height: 1.35; color: var(--on-dark-soft); }
.manifesto .link { display: inline-block; margin-top: 34px; color: var(--on-dark); }
.band--dark :focus-visible { outline-color: var(--on-dark); }

/* ---------------------------------------------------- partners & friends */
/* The makers' chapter, on the page cream since 9 Nov (.makers-band; the process follows it in the same band). A portrait viewer: from 900, with
   JavaScript, her words and the twelve names on the left, one large 4:5 portrait on the right, brought forward by a
   name with a slow cross-fade (620ms in, 260ms out; instant under reduced motion). It never changes on its own.
   Under 900, and without JavaScript, the names give way to a strip of the twelve portraits to swipe, each about 78% of
   the screen wide with the next one peeking, name and craft under each. */
.viewer-words p { margin-top: 16px; color: var(--soft); max-width: 34em; }
.roll-call { display: none; }
.viewer-stage { display: flex; gap: 12px; margin: 32px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* about 78% of the screen wide, and never taller than the screen can show with its caption (a phone on its side) */
.frame { flex: 0 0 min(78vw, (100vh - 90px) * 0.8); flex-basis: min(78vw, (100svh - 90px) * 0.8); scroll-snap-align: start; }
.frame .ph { aspect-ratio: 4 / 5; background: var(--line-soft); }
.frame figcaption { margin-top: 12px; }
.frame .nm { display: block; font-family: var(--serif); font-size: var(--t-lead); line-height: 1.25; color: var(--ink); }
.frame .craft { display: block; margin-top: 2px; font-size: var(--t-small); line-height: 1.4; color: var(--soft); }
/* a tablet (600 to 899): smaller portraits, two in view with the third peeking, so the band stays within a screen */
@media (min-width: 600px) { .frame { flex-basis: min(44vw, 340px); } }
/* without JavaScript a wide screen keeps the strip, at a size that suits it */
@media (min-width: 900px) { html:not(.js) .frame { flex-basis: clamp(260px, 27vw, 380px); } }

@media (min-width: 900px) {
  /* the portrait's caption hangs beneath it, outside the grid row: the viewer keeps room for it at its foot, so
     whatever follows in the band (the process) starts below the caption */
  html.js .viewer { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 44svh, 420px); column-gap: clamp(48px, 6.5vw, 112px); padding-bottom: calc(16px + var(--t-h3) * 1.25); }
  html.js .viewer-words { display: flex; flex-direction: column; }
  html.js .viewer-words p { margin-top: 20px; max-width: 32em; }

  /* the roll call: two columns of six, read down; it fills the column to the portrait's bottom edge */
  html.js .roll-call { flex: 1 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); grid-auto-flow: column; column-gap: clamp(24px, 3vw, 44px); margin-top: 32px; }
  /* at 1024 the portrait is shorter than twelve full rows: tighter rows and a shorter lead-in keep the list near its foot */
  @media (max-width: 1199px) { html.js .roll-call { margin-top: 28px; } html.js .roll-call .who { padding: 4px 0; } }
  .roll-call li { display: flex; border-top: 1px solid var(--line); }
  .roll-call li:nth-child(6n) { border-bottom: 1px solid var(--line); }
  .roll-call .who { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: center; column-gap: 16px; width: 100%; padding: 7px 0; text-align: left; }
  .roll-call .who img { grid-row: 1 / 3; grid-column: 1; width: 48px; height: 48px; object-fit: cover; transition: box-shadow 240ms var(--ease); }
  .roll-call .who .nm { grid-row: 1; grid-column: 2; align-self: end; font-family: var(--serif); font-size: var(--t-lead); line-height: 1.2; color: var(--soft); transition: color 240ms var(--ease); }
  .roll-call .who .craft { grid-row: 2; grid-column: 2; align-self: start; margin-top: 4px; font-size: var(--t-label); line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--soft); }
  /* the one on show: its name in full ink, a fine ink ring around its face */
  .roll-call .who[aria-pressed="true"] .nm, .roll-call .who:focus-visible .nm { color: var(--ink); }
  .roll-call .who[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--page), 0 0 0 3px var(--ink); }

  /* the stage: the ten portraits stacked in one cell, one on show; its caption hangs beneath the photograph */
  html.js .viewer-stage { display: grid; align-self: start; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  /* only the one leaving fades (.was-on, set by js/motion.js), under the one coming in; the rest are simply hidden */
  html.js .frame { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; }
  /* a portrait neither on show nor leaving takes no part in the page, so its lazy picture is not fetched: js/motion.js
     loads it when its name is pointed at, focused or pressed, and brings it forward once it is ready */
  html.js .frame:not(.is-on):not(.was-on) { display: none; }
  html.js .frame.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity 620ms var(--ease), visibility 0s; }
  html.js .frame.was-on { transition: opacity 260ms var(--ease-leave) 240ms, visibility 0s linear 500ms; }
  /* coming back from display: none, the one coming in starts from nothing (once the viewer has been used, so the
     first portrait is simply there when the page opens) */
  @starting-style { html.js .viewer.is-live .frame.is-on, html.js .viewer.is-live .frame.is-on figcaption { opacity: 0; } }
  html.js .frame figcaption { position: absolute; top: 100%; left: 0; right: 0; margin-top: 16px; display: flex; align-items: baseline; gap: 14px; }
  /* the captions sit on bare ground, so they never cross: the old name goes at once, the new one follows */
  html.js .frame:not(.is-on) figcaption { opacity: 0; transition: opacity 180ms var(--ease-leave); }
  html.js .frame.is-on figcaption { transition: opacity 520ms var(--ease) 180ms; }
  html.js .frame .nm { font-size: var(--t-h3); }
  html.js .frame .craft { margin: 0; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
}
@media (hover: hover) and (min-width: 900px) { .roll-call .who:hover .nm { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) {
  html.js .frame, html.js .frame figcaption, .roll-call .who .nm, .roll-call .who img { transition: none !important; }
}

/* ---------------------------------------------------------------- quotes */
/* Three notes as Allie received them: a text, an Instagram message, an email. Drawn in the page rather than
   pasted in as pictures, so the words stay real text. Each is a cropped phone screen of one size, with just
   enough of its app to be recognised; no logos, no invented times, usernames or replies. */
.quotes h2 { margin-bottom: 28px; text-align: center; font-size: var(--t-sub); line-height: 1.2; letter-spacing: -0.01em; }
.notes { --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; display: grid; gap: 44px; justify-items: center; }
.notes > li { width: min(100%, 360px); display: flex; }
.note { flex: 1; display: flex; flex-direction: column; }
.screen { flex: 1; display: flex; flex-direction: column; background: #fff; border-radius: 28px; overflow: hidden; font-family: var(--ui); color: #000; letter-spacing: 0; -webkit-font-smoothing: antialiased; box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.07), 0 26px 56px -30px rgba(var(--ink-rgb), 0.38); }
.screen .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.screen p { max-width: none; }
.screen blockquote { margin: 0; }
.screen blockquote p { text-wrap: pretty; }
.screen .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-size: 16px; font-weight: 500; line-height: 1; background: linear-gradient(180deg, #a9aeb8, #868b96); }
.screen .thread { flex: 1; min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.note figcaption { margin-top: 16px; display: flex; justify-content: center; align-items: baseline; gap: 10px; }
.note figcaption b { font-family: var(--serif); font-weight: 400; font-size: var(--t-lead); line-height: 1.3; color: var(--ink); }
.note figcaption span { font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--soft); }

/* a text message */
.sms .bar { position: relative; display: flex; justify-content: center; padding: 12px 14px 9px; background: #f6f6f8; border-bottom: 1px solid #e2e2e7; }
.sms .bar > .i { position: absolute; left: 10px; top: 20px; width: 26px; height: 26px; color: #0a84ff; stroke-width: 2.2; }
.sms .who { display: grid; justify-items: center; gap: 4px; }
.sms .nm { display: inline-flex; align-items: center; font-size: 11.5px; line-height: 1; }
.sms .nm .i { width: 11px; height: 11px; color: #8e8e93; stroke-width: 2.6; }
.sms .thread { padding: 14px 12px 10px; }
.sms .stamp { align-self: center; margin-bottom: 10px; font-size: 11px; line-height: 1.3; color: #8e8e93; }
.sms blockquote { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sms blockquote p { max-width: 84%; padding: 8px 13px; border-radius: 19px; background: #e9e9eb; font-size: 15px; line-height: 1.34; }
.sms blockquote p:last-child { border-bottom-left-radius: 5px; }
.sms .compose { display: flex; align-items: center; gap: 8px; padding: 6px 10px 14px; }
.sms .plus { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e9e9eb; color: #808086; }
.sms .plus .i { width: 18px; height: 18px; stroke-width: 2.2; }
.sms .field { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 8px 0 13px; border: 1px solid #d5d5da; border-radius: 18px; font-size: 15px; color: #b3b3b8; }
.sms .field .i { width: 19px; height: 19px; color: #8e8e93; }

/* an Instagram message */
.dm .bar { display: flex; align-items: center; gap: 16px; padding: 13px 16px; border-bottom: 1px solid #efefef; }
.dm .who { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.dm .av { background: linear-gradient(135deg, #d9c6ee, #f2b6c9 55%, #f8d2a6); }
.dm .bar .av { width: 30px; height: 30px; font-size: 13px; }
.dm .thread { padding: 14px 12px 12px; }
.dm .row { display: flex; align-items: flex-end; gap: 8px; }
.dm .row .av { width: 26px; height: 26px; font-size: 11px; }
.dm blockquote { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.dm blockquote p { max-width: 100%; padding: 10px 14px; border-radius: 22px; background: #efefef; font-size: 15px; line-height: 1.34; }
.dm .compose { display: flex; align-items: center; gap: 12px; height: 46px; margin: 2px 10px 14px; padding: 0 14px 0 6px; border-radius: 23px; background: #efefef; }
.dm .cam { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #3797f0; color: #fff; }
.dm .cam .i { width: 19px; height: 19px; stroke-width: 1.9; }
.dm .field { flex: 1; font-size: 15px; color: #8e8e8e; }
.dm .compose > .i { width: 21px; height: 21px; }

/* an email */
.mail .bar { padding: 13px 12px 6px; color: #0a84ff; }
.mail .back { display: inline-flex; align-items: center; gap: 1px; font-size: 16px; }
.mail .back .i { width: 24px; height: 24px; stroke-width: 2.2; }
.mail .head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 12px; padding: 8px 16px 14px; border-bottom: 1px solid #e5e5ea; }
.mail .sender { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.mail .to { display: block; font-size: 13px; line-height: 1.3; color: #8e8e93; }
.mail .subject { grid-column: 1 / -1; margin-top: 14px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.mail .body { flex: 1; padding: 14px 16px 22px; }
.mail blockquote p { font-size: 15px; line-height: 1.5; }
.mail .tools { display: flex; justify-content: space-between; padding: 12px 24px 16px; border-top: 1px solid #e5e5ea; color: #0a84ff; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--oxblood); color: var(--on-dark); }
.footer :focus-visible { outline-color: var(--on-dark); }
.footer .wrap { padding-top: var(--gap-in); padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer .top { display: grid; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
.footer .signoff { font-family: var(--serif); font-size: var(--t-sub); line-height: 1.3; letter-spacing: -0.01em; max-width: 19em; text-wrap: balance; }
.footer .loves { display: inline-flex; align-items: baseline; gap: 0.32em; white-space: nowrap; font-style: italic; }
.footer .loves .sign { display: inline-block; }
.footer .loves img { height: 1.32em; width: auto; transform: translateY(0.3em); filter: brightness(0) invert(1); opacity: 0.96; }   /* the mark, drawn light on the dark red */
.footer form { position: relative; display: flex; margin-top: 10px; border-bottom: 1px solid color-mix(in srgb, currentColor 38%, transparent); }
.footer input { flex: 1; min-width: 0; height: 48px; padding: 0 2px; border: 0; border-radius: 0; background: none; font: inherit; font-size: var(--t-input); color: var(--on-dark); }
.footer input::placeholder { color: rgba(247, 245, 241, 0.55); }
.footer input:focus-visible { outline: none; }
.footer input { caret-color: var(--on-dark); }
/* Chrome's autofill paints a pale blue ground and its own text colour: keep it dark red and cream, and hold the flash back */
.footer input:-webkit-autofill, .footer input:-webkit-autofill:hover, .footer input:-webkit-autofill:focus { -webkit-text-fill-color: var(--on-dark); caret-color: var(--on-dark); box-shadow: 0 0 0 100px var(--oxblood) inset; transition: background-color 600000s 0s, color 600000s 0s; }
.footer form button { color: var(--on-dark); min-height: 48px; padding: 0 2px 0 14px; font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; }
.footer .label { color: var(--label-dark); }
.footer .fine { margin-top: 12px; font-size: var(--t-small); line-height: 1.55; color: var(--on-dark-soft); max-width: 34em; }
.footer .fine.is-done { color: var(--on-dark); font-family: var(--serif); font-size: var(--t-lead); }
.footer .cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 36px 16px; padding-top: 44px; }
.footer .about { grid-column: 1 / -1; }
.footer .motto { font-family: var(--serif); font-style: italic; font-size: var(--t-h3); line-height: 1.3; }
.footer .place { margin-top: 6px; font-size: var(--t-small); color: var(--on-dark-soft); }
.footer h3 { font-family: var(--sans); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--label-dark); margin-bottom: 12px; }
.footer .cols ul { display: grid; gap: 0; font-size: var(--t-small); margin-top: -6px; }
.footer .cols li { display: flex; }
/* (10 Nov) the footer's links glow under the hand, as the header's do: the words brighten to cream in a soft peach light */
.footer .cols a, .footer .legal a { color: var(--on-dark-soft); padding: 6px 0; transition: color 320ms var(--ease), text-shadow 420ms var(--ease); }
.footer .cols a:hover, .footer .cols a:focus-visible, .footer .legal a:hover, .footer .legal a:focus-visible { color: #fff; text-shadow: 0 0 12px rgba(255, 222, 178, 0.75), 0 0 2px rgba(255, 222, 178, 0.5); }
.footer .legal { margin-top: 48px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; font-size: var(--t-small); color: var(--on-dark-soft); }

/* --------------------------------------------------------------- drawers */
.drawer { position: fixed; inset: 0; z-index: 40; visibility: hidden; transition: visibility 0s 480ms; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(var(--ink-rgb), 0.32); opacity: 0; transition: opacity 240ms var(--ease-leave); }
.drawer .panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; max-height: 90svh; overflow: auto; overscroll-behavior: contain; padding: 18px var(--pad) calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--page); transform: translateY(100%); transition: transform 320ms var(--ease-leave); }
.drawer .panel > * { opacity: 0; transition: opacity 200ms var(--ease-leave); }
.drawer.is-open { visibility: visible; transition-delay: 0s; }
.drawer.is-open .scrim { opacity: 1; transition: opacity 320ms var(--ease); }
.drawer.is-open .panel { transform: none; transition: transform 520ms var(--ease); }
.drawer.is-open .panel > * { opacity: 1; transition: opacity 360ms var(--ease) 160ms; }
.drawer.is-open .panel > :nth-child(2) { transition-delay: 220ms; }
.drawer.is-open .panel > :nth-child(n + 3) { transition-delay: 280ms; }
.drawer .top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.drawer .top h2 { font-size: var(--t-h3); letter-spacing: -0.01em; }
.drawer .top h2:focus-visible { outline: none; }
.drawer .top img { height: 28px; width: auto; }
.drawer .close { font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; min-height: 44px; padding: 0 2px; }
.menu-drawer .items { margin-top: 10px; display: grid; }
.menu-drawer .items a { font-family: var(--serif); font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.menu-drawer .quiet { margin-top: 22px; display: grid; gap: 4px; font-size: var(--t-small); color: var(--soft); }
.menu-drawer .quiet a { min-height: 36px; display: flex; align-items: center; }
.cart-drawer .lines { margin-top: 8px; }
.cart-drawer .line { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.cart-drawer .line .shot { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.cart-drawer .line .shot img { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); mix-blend-mode: multiply; }
.cart-drawer .line .head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-drawer .line .nm { display: block; font-family: var(--serif); font-size: var(--t-lead); line-height: 1.25; }
.cart-drawer .line .fin { font-size: var(--t-small); color: var(--quiet); }
.cart-drawer .qty { display: flex; align-items: center; margin-top: 4px; margin-left: -14px; }
.cart-drawer .qty button { width: 40px; height: 40px; font-size: var(--t-body); }
.cart-drawer .qty span { min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.cart-drawer .qty .remove { width: auto; margin-left: auto; padding: 0 2px; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--quiet); }
.cart-drawer .empty { margin-top: 18px; display: grid; gap: 18px; justify-items: start; color: var(--soft); }
.cart-drawer .sum { margin-top: 20px; display: grid; gap: 8px; }
.cart-drawer .sum .row { display: flex; justify-content: space-between; font-family: var(--serif); font-size: var(--t-h3); }
.cart-drawer .sum .fine { font-size: var(--t-small); line-height: 1.55; color: var(--quiet); }
.cart-drawer .sum .btn { margin-top: 12px; width: 100%; }
.cart-drawer .keep { display: block; text-align: center; font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--soft); min-height: 44px; line-height: 44px; }
.live, .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================== 560 and up */
@media (min-width: 560px) {
  .preorder .act { justify-items: start; }
  .preorder .act .btn { width: auto; }
  .preorder .fine { text-align: left; }
  .cover-act { justify-items: start; }
  .cover-act .btn { width: auto; }
  .cover-six { justify-content: flex-start; }
  .bags { grid-template-columns: repeat(2, 1fr); }
  .pockets > div { grid-template-columns: 12.5em 1fr; align-items: baseline; }
  .footer .cols { grid-template-columns: 2fr 1fr 1fr 1fr; justify-content: normal; column-gap: 32px; }
  .footer .about { grid-column: auto; }
}

/* ============================================================== 760 and up */
@media (min-width: 760px) {
  .promises { grid-template-columns: repeat(4, 1fr); }
  .promises li { padding: 34px 22px 30px; }
  .promises li + li { border-left: 1px solid var(--line-soft); }
  .promises li:nth-child(n + 3) { border-top: 0; }
  .manifesto .say { line-height: 1.16; }
  .footer .top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
}

/* ============================================================== 900 and up */
@media (min-width: 900px) {
  .preorder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
  .preorder .act { gap: 14px; }

  .mast .brand img { height: 38px; }
  .mast a.desk { display: inline-flex; }
  .mast button.phone { display: none; }

  /* (C2, 26 Oct) The words have presence: the headline grows with the window (to 120px), held by its height so a short
     window never crowds (about 86px at 1920x1080, 79px at 1912x880, 65px at 1440x900), and the kicker, the line under
     it, the button and the dots step up with it. The column is as wide as the headline's longer line (7.9em of it,
     "Goes everywhere," being 7.7em), so the photograph can come close; the group stands in the middle of the height
     below the header, level with the bag (the script after the opening sets the bag to meet it). */
  .cover { --h1: clamp(34px, min(4.2vw, 8.4vh), 112px); }
  .cover-copy { left: max(var(--pad), 8.9vw); right: auto; width: calc(var(--h1) * 7.9); top: var(--mast); bottom: calc(var(--h1) * 0.3); display: flex; flex-direction: column; justify-content: center; }
  .cover h1 { margin-top: calc(var(--h1) * 0.16); }
  .cover-sub { margin-top: calc(var(--h1) * 0.3); max-width: 23em; }
  [data-cover] .cover-sub { display: block; }
  .cover-act { margin-top: calc(var(--h1) * 0.52); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }


  .shop-head { grid-template-columns: 1fr minmax(0, 31em); gap: clamp(32px, 5vw, 80px); align-items: end; padding-bottom: 36px; }
  .bags { grid-template-columns: repeat(3, 1fr); gap: 72px clamp(24px, 3.2vw, 44px); margin-top: 44px; }
  .bag-line { min-height: 4.65em; }

  /* the Story, in her order and no bigger than a screen: the heading, one row of three photographs (about a third of a
     laptop screen tall, never over 360px), then her words in two columns under them */
  #makers { padding-top: var(--gap-in); }
  .makers-grid { grid-template-columns: 3fr 2fr 2fr; gap: 0 clamp(14px, 1.7vw, 22px); grid-template-areas: "head head head" "a b c" "body body body"; }
  .m-a .ph, .m-b .ph, .m-c .ph { aspect-ratio: auto; height: clamp(240px, 34svh, 330px); }
  .m-head { margin: 0 0 clamp(20px, 2.4vw, 32px); max-width: none; }
  .m-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(24px, 2.6vw, 36px) 0 0; }
  .m-body p:not(.share) { grid-column: 1; }
  .m-body p:not(.share) + p:not(.share) { margin-top: 0; }
  .m-body p:first-child { grid-row: 1; margin-bottom: 14px; }
  .m-body .share { grid-column: 2; grid-row: 1; margin-top: 0; }
  .m-body .link { grid-column: 2; grid-row: 2; margin-top: 0; justify-self: start; }


  .open-line { font-size: var(--t-h3); }

  /* the strip: its heading on the left, the four ways in one row of four beside it; Field notes under, heading and line.
     (9 Nov polish: every way starts on the same line, each after the same divider; before, every second way sat 12px
     lower.) */
  .ways-row { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 3vw, 48px); align-items: start; padding-top: 22px; }
  #ways .ways-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #ways .ways-grid li, #ways .ways-grid li:nth-child(even) { padding: 0 18px; border-left: 1px solid var(--line); }
  #ways .ways-grid li:first-child { padding-left: 0; border-left: 0; }
  .field-notes { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 3vw, 48px); align-items: baseline; margin-top: 22px; padding: 18px 0 20px; }
  .wild-head { margin-bottom: 48px; }
  .wear-nav:not([hidden]) { display: flex; }
  .wear { --n: 4; --k: 3; --g: clamp(16px, 2vw, 28px); }

  /* the process: the head splits (label and heading left, her paragraph right, in the viewer's columns), then one row of five */
  .making-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 6.5vw, 112px); grid-template-rows: auto 1fr; align-items: start; margin-bottom: clamp(44px, 4.4vw, 64px); }
  .making-head .label { grid-column: 1; grid-row: 1; }
  .making-head h2 { grid-column: 1; grid-row: 2; }
  .making-head p:not(.label) { grid-column: 2; grid-row: 1 / 3; margin-top: 0; max-width: none; }
  .steps-wrap { container-type: inline-size; --cut: 0 100% 0 0; }
  .steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--sg); align-items: start; overflow: visible; scroll-snap-type: none; }
  .steps .ph { aspect-ratio: 7 / 10; }
  .steps figcaption { margin: 34px auto 0; text-align: center; }
  /* the thread: the link stitch (4px on, 3px off) in the ink at 40%, 1.5px fine, beneath the photographs */
  .steps-wrap > .thread { display: block; clip-path: inset(0); position: absolute; z-index: 0; left: 0; right: 0; width: auto; height: 1.5px; top: calc((100cqw - 4 * var(--sg)) * 2 / 7 + 16px); color: color-mix(in srgb, var(--ink) 40%, transparent); background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); pointer-events: none; }

  .drawer .panel { left: auto; top: 0; bottom: 0; width: min(440px, 100%); max-height: none; border-left: 1px solid var(--line); transform: translateX(100%); padding: 22px 32px 28px; }
}


/* ============================================================= 1200 and up */
@media (min-width: 1200px) {
  /* section 4 in two columns: heading and her sentence left, the pockets and the size line right. The heading drops a
     little so its first line sits level with the first pocket's name. */
  .anatomy .words { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr auto; grid-template-areas: "head pockets" "lead pockets" ". specs"; column-gap: clamp(48px, 6vw, 104px); align-items: start; }
  .anatomy h2 { grid-area: head; max-width: 11em; font-size: var(--t-h2-s); padding-top: 12px; }
  .anatomy .lead { grid-area: lead; }
  .anatomy .pockets { grid-area: pockets; margin-top: 0; }
  .anatomy .specs { grid-area: specs; grid-template-columns: repeat(4, auto); justify-content: space-between; margin-top: 26px; }
}

/* (C2) The opening's smaller words, the button and the dots step up with its headline, on the type scale: the kicker
   to the subhead size and the line under it to the lead from 1440, the line to the subhead size, the button's and the
   dots' words to the small size from 1800; the button and the dots grow with them. */
@media (min-width: 1440px) {
  .cover-kicker { font-size: var(--t-h3); }
  .cover-sub { font-size: var(--t-lead); }
  .cover-act { gap: 14px 30px; }
  .cover-act .btn { height: 56px; padding: 0 30px; }
  .cover-six .dots a { width: 27px; }
  .cover-six .dots a::before { width: 13px; height: 13px; }
}
@media (min-width: 1800px) {
  /* a large screen (2560x1440) is filled to the foot, as a smaller one is: the opening is no longer held at 1080 */
  .cover { max-height: 1440px; }
  /* past 21px the kicker is part of the heading: it grows with the headline, as the button does */
  .cover-kicker { font-size: max(var(--t-h3), calc(var(--h1) * 0.25)); }
  .cover-sub { font-size: var(--t-h3); }
  .cover-act .btn { height: clamp(62px, calc(var(--h1) * 0.62), 74px); padding: 0 clamp(34px, calc(var(--h1) * 0.36), 44px); gap: 18px; font-size: var(--t-small); }
  .cover-act .btn .price { padding-left: 18px; }
  .cover-six { font-size: var(--t-small); }
  .cover-six .dots a { width: 30px; }
  .cover-six .dots a::before { width: 14px; height: 14px; }
}

/* (9 Nov) The opening on an upright screen (a phone, an iPad held upright, any window taller than it is wide) shows
   the crop made for it (index.html: the phone crop up to 13:20, the upright iPad crop up to 1:1). It fills the opening,
   and the words stand together on its wall at the top, left, the bag in the clear below them, on the bench. The
   script after the opening keeps the bag below the words; without it the picture is cropped around the bag. */
@media (max-aspect-ratio: 1/1) {
  .cover[data-cover] { min-height: 560px; }
  .slide { --pos: 52% 0%; }
  .cover { --h1: clamp(38px, 10.8vw, 50px); }
  .cover-copy { left: var(--pad); right: var(--pad); width: auto; top: calc(var(--mast) + clamp(22px, 4.2vh, 60px)); bottom: auto; display: block; }
  .cover h1 { margin-top: 10px; }
  [data-cover] .cover-sub { display: none; }
  .cover-act { margin-top: clamp(22px, 3.2vh, 34px); display: grid; justify-items: start; gap: 4px; }
  .cover-act .btn { width: auto; }
  .cover-six { justify-content: flex-start; }
}
/* an upright iPad: the headline larger, the line under it shown, the button and the dots side by side */
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .cover { --h1: clamp(50px, 7.4vw, 80px); }
  .cover-copy { left: max(var(--pad), 6.4vw); right: auto; }
  .cover-kicker { font-size: var(--t-h3); }
  .cover h1 { margin-top: calc(var(--h1) * 0.16); }
  [data-cover] .cover-sub { display: block; margin-top: calc(var(--h1) * 0.3); max-width: 23em; font-size: var(--t-lead); }
  .cover-act { margin-top: calc(var(--h1) * 0.5); display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; }
  .cover-act .btn { height: 56px; padding: 0 30px; }
}
/* (9 Nov) The opening on a screen near 4:3 (an iPad on its side, a squarish window) shows the iPad-on-its-side crop:
   the bag sits low and right of middle, so the words stand at the top left, the headline above the bag, the line
   under it, the button and the dots in the clear to its left. */
@media (min-aspect-ratio: 1001/1000) and (max-aspect-ratio: 3/2), (min-aspect-ratio: 1001/1000) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 17/10) {
  .cover[data-cover] { min-height: 560px; }
  .slide { --pos: 62% 0%; }
  .cover { --h1: clamp(34px, min(4.3vw, 6.9vh), 70px); }
  .cover-copy { left: max(var(--pad), 5.4vw); right: auto; width: auto; top: calc(var(--mast) + clamp(18px, 3.6vh, 48px)); bottom: auto; display: block; }
  .cover h1 { margin-top: calc(var(--h1) * 0.16); }
  [data-cover] .cover-sub { display: block; margin-top: calc(var(--h1) * 0.3); max-width: 19em; }
  .cover-act { margin-top: calc(var(--h1) * 0.5); display: grid; justify-items: start; gap: 4px; }
  .cover-act .btn { width: auto; }
  .cover-six { justify-content: flex-start; }
}
/* a short one (a small window): the line under the headline gives way and the dots stand beside the button, so both
   stay above the bag */
@media (min-aspect-ratio: 1001/1000) and (max-aspect-ratio: 3/2) and (max-height: 640px), (min-aspect-ratio: 1001/1000) and (hover: none) and (pointer: coarse) and (max-aspect-ratio: 17/10) and (max-height: 640px) {
  [data-cover] .cover-sub { display: none; }
  .cover-act { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; }
}

/* the three notes side by side from 760: a compact interlude about half a laptop screen tall (about 450px at 1440x900).
   The screens are cropped phone screens, narrower and shorter; the messages stay 13px or more and the bars shrink with them. */
@media (min-width: 760px) {
  .quotes { --band-pad: clamp(44px, 4.4vw, 64px); }
  .quotes h2 { margin-bottom: clamp(22px, 2.2vw, 32px); }
  .notes { grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 32px); align-items: stretch; }
  .notes > li { width: auto; min-width: 0; }
  .screen { border-radius: 22px; box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.07), 0 18px 36px -24px rgba(var(--ink-rgb), 0.38); }
  .screen .i { width: 17px; height: 17px; }
  .screen .av { width: 28px; height: 28px; font-size: 13px; }
  .screen .thread { min-height: 0; }
  .note figcaption { margin-top: 12px; }
  .note figcaption b { font-size: var(--t-body); }
  .sms .bar { padding: 8px 10px 6px; }
  .sms .bar > .i { left: 7px; top: 12px; width: 20px; height: 20px; }
  .sms .who { gap: 2px; }
  .sms .who .av { width: 24px; height: 24px; font-size: 12px; }
  .sms .nm { font-size: 11px; }
  .sms .nm .i { width: 9px; height: 9px; }
  .sms .thread { padding: 9px 10px 7px; }
  .sms .stamp { margin-bottom: 6px; font-size: 11px; }
  .sms blockquote p { padding: 6px 11px; border-radius: 16px; font-size: 13px; }
  .sms .compose { gap: 6px; padding: 4px 8px 9px; }
  .sms .plus { width: 24px; height: 24px; }
  .sms .plus .i { width: 13px; height: 13px; }
  .sms .field { height: 26px; padding: 0 6px 0 10px; border-radius: 14px; font-size: 13px; }
  .sms .field .i { width: 15px; height: 15px; }
  .dm .bar { gap: 10px; padding: 8px 12px; }
  .dm .who { gap: 8px; font-size: 13px; }
  .dm .bar .av { width: 24px; height: 24px; font-size: 11px; }
  .dm .thread { padding: 9px 10px 8px; }
  .dm .row .av { width: 22px; height: 22px; font-size: 11px; }
  .dm blockquote p { padding: 7px 12px; border-radius: 18px; font-size: 13px; }
  .dm .compose { gap: 8px; height: 34px; margin: 2px 8px 9px; padding: 0 10px 0 4px; border-radius: 17px; }
  .dm .cam { width: 26px; height: 26px; }
  .dm .cam .i { width: 14px; height: 14px; }
  .dm .field { font-size: 13px; }
  .dm .compose > .i { width: 16px; height: 16px; }
  .mail .bar { padding: 8px 8px 3px; }
  .mail .back { font-size: 13px; }
  .mail .back .i { width: 18px; height: 18px; }
  .mail .head { gap: 0 9px; padding: 5px 12px 8px; }
  .mail .sender { font-size: 13px; }
  .mail .to { font-size: 12px; }
  .mail .subject { margin-top: 8px; font-size: 14px; }
  .mail .body { padding: 9px 12px 10px; }
  .mail blockquote p { font-size: 13px; line-height: 1.4; }
  .mail .tools { padding: 7px 18px 9px; }
}

/* a hand on a mouse: the bag lifts a little; if it has a second picture, that takes its place */

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover-media, .cover h1 .ln > span, .cover-kicker, .cover-sub, .cover-act { animation: none; }
  .slide, .slide.is-on, .dots a::before { transition: none !important; }
  .ticker .track { animation: none; width: 100%; justify-content: center; }
  .ticker span + span, .ticker span::after { display: none; }
  .mast, .mast .brand img, .bag-shot .swatch, .bag-view, .bag-view .render, .bag-meta::before, .btn, .link { transition-duration: 0ms !important; }
  .drawer .panel { transform: none; opacity: 0; transition: opacity 200ms; }
  .drawer.is-open .panel { opacity: 1; }
  .drawer.is-open .panel > * { transition-delay: 0ms; }
}


/* Editorial refinement: quieter product gallery and clearer purchasing hierarchy. */
.bag-meta::before { display: none; }
.bag-meta { border-top-color: var(--line); padding-top: 20px; }
.bag-shot { cursor: default; }
.bag-shot .render { transition-duration: 620ms, 900ms; }
.bag-name { font-size: var(--t-name); letter-spacing: -0.025em; }
.bag-price { color: var(--soft); font-size: var(--t-body); }
.bag-fin { margin-top: 8px; }
.bag-line { max-width: 29ch; line-height: 1.55; margin-top: 13px; }
.bag-buy { margin-top: 22px; box-shadow: none; border-bottom: 1px solid currentColor; padding: 0 0 5px; height: auto; min-height: 36px; letter-spacing: 0.12em; }
.bag-buy:hover { background: transparent; color: var(--ink); }
.bag-buy:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  .bag-shot .render, .bag-buy { transition: none !important; }
}

/* ---------------------------------------------------------- colour bands */
/* A band is a full-width ground of its own colour that holds one section or a few. Its inner .wrap keeps the
   column; --band-pad is the space above the first and below the last content. */
.band { position: relative; width: 100%; margin-top: var(--gap); padding-block: var(--band-pad); }
.band + .band { margin-top: 0; }
.band--dark { background: var(--oxblood); color: var(--on-dark); }
.band--light { background: var(--caramel); --quiet: var(--soft); }   /* the quiet grey is too pale on the caramel: small words take the soft grey */
/* (9 Nov) the makers' chapter (Partners & friends and the process) is a plain section on the page cream, no longer a band */

/* ------------------------------------------------------------ interactions */
/* Alive under the hand, never busy (spec section 5). Hovers 200 to 320ms on the arrival ease; a hover transform waits
   for the arrival to be done (.is-done) and touch screens, which have no hover, are left out. */

/* bag cards: the whole card answers. The picture eases in its frame and the arrow steps forward; the name carries no
   underline (Gautam, 26 Oct). */
.bag-buy::after { content: ""; flex: none; width: 15px; height: 9px; margin-left: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h14M10.2 .8 14 4.5l-3.8 3.7' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M0 4.5h14M10.2 .8 14 4.5l-3.8 3.7' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 320ms var(--ease); }
.bag:has(:focus-visible) .bag-buy::after { transform: translateX(3px); }
@media (prefers-reduced-motion: no-preference) {
  .bag-shot .swatch { transition: transform 320ms var(--ease); }
  .bag.is-done:has(:focus-visible) .bag-shot .swatch { transform: scale(1.04); }
  @media (hover: hover) and (pointer: fine) {
    .bag.is-done:hover .bag-shot .swatch { transform: scale(1.04); }
    .bag:hover .bag-buy::after { transform: translateX(3px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .bag-buy::after { transition: none; }
}

/* Notes & Quotes: a screen lifts a little, its shadow deepens */
.screen { transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .note:hover .screen { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.07), 0 34px 60px -28px rgba(var(--ink-rgb), 0.5); }
}

/* In the Wild and the five steps: each photograph eases in its frame (the picture's own develop uses scale, this uses transform) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wear [data-ph].is-done img, .steps [data-ph].is-done img, .follow-grid [data-ph].is-done img { transition: transform 320ms var(--ease); }
  .wear [data-ph].is-done:hover img, .steps [data-ph].is-done:hover img, .follow-grid [data-ph].is-done:hover img { transform: scale(1.03); }
}

/* sign-up: the line under the email field darkens and draws to full width on focus (currentColor, so it follows the ground) */
.footer form::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform 420ms var(--ease); }
.footer form:focus-within::after { transform: scaleX(1); }
@keyframes note-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .footer .fine.is-done { animation: note-in 700ms var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .footer form::after { transition: none; }
}

/* ---------------------------------------------------------------- the shop, live (js/shop.js, js/app.js)
   The sign-up's hidden field (people never see it; anything typed there is a bot) and a leather that has sold out. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bag.is-sold-out .tag, .bag.is-sold-out .bag-buy { color: var(--quiet); }
.bag.is-sold-out .bag-buy { pointer-events: none; }
.buy-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------ follow along */
/* (10 Nov) Her Instagram, its own section between the Story and the pre-order bar. The head is the shop's: the heading
   on the left, the link to her profile on the right, a hairline drawn in under them. Her six latest posts sit beneath in
   one tight row, as a feed does (6px apart, 4:5 like Instagram's own grid): six across from 900, three by two on a
   phone or tablet. They develop as every photograph does and ease under the hand; a reel or a carousel carries
   Instagram's small white sign in its corner. Until the feed is connected only the head shows. */
.follow-head { position: relative; display: grid; gap: 14px; justify-items: start; padding-bottom: 24px; }
.follow-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); }
.follow-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.follow-grid a { position: relative; display: block; }
.follow-grid .ph { display: block; aspect-ratio: 4 / 5; background: var(--line-soft); }
.follow-grid .kind { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); pointer-events: none; }
.follow-grid .kind--video { fill: #fff; stroke: none; }
.follow-grid a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 900px) {
  .follow-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(32px, 5vw, 80px); padding-bottom: 28px; }
  .follow-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 36px; }
}