@font-face {
  font-family: "EB Garamond";
  src: url("fonts/ebgaramond-var.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2190-2193, U+25CA;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/ebgaramond-italic-var.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2122, U+2190-2193, U+25CA;
}

:root {
  --ink:#17352f; --deep:#0d2925; --teal:#176e72; --cream:#f8f1e6; --paper:#fffdf8;
  --clay:#a95e42; --gold:#c39b58; --line:rgba(23,53,47,.17);
  --shadow:0 24px 70px rgba(13,41,37,.15); --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --shell:1180px;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:var(--cream); font:1rem/1.65 var(--sans); }
body.menu-open { overflow:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; }
button,input,textarea { max-width:100%; font:inherit; }
h1,h2,h3,p,figure { margin-top:0; }
figure { margin-inline:0; }
h1,h2,h3 { color:var(--deep); font-family:var(--serif); font-weight:400; letter-spacing:-.035em; line-height:1.04; }
h1 { font-size:clamp(3.4rem,7.5vw,7.1rem); }
h2 { font-size:clamp(2.35rem,5vw,4.8rem); }
h3 { font-size:clamp(1.35rem,2vw,1.75rem); }
.shell { width:min(calc(100% - 3rem),var(--shell)); margin-inline:auto; }
.skip-link { position:fixed; top:.8rem; left:.8rem; z-index:100; padding:.75rem 1rem; color:#fff; background:var(--deep); border-radius:.4rem; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
:focus-visible { outline:3px solid #f0ba57; outline-offset:4px; }
.preview-bar { position:relative; z-index:50; color:#fff; background:var(--deep); font-size:.82rem; }
.preview-bar__inner { min-height:42px; display:flex; align-items:center; justify-content:center; gap:.8rem; text-align:center; }
.preview-bar p { margin:0; }
.preview-bar__label { flex:0 0 auto; padding:.18rem .48rem; border:1px solid rgba(255,255,255,.5); border-radius:999px; font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.preview-bar a { font-weight:800; text-underline-offset:.2rem; }
.site-header { position:sticky; top:0; z-index:40; color:var(--deep); background:rgba(248,241,230,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.site-nav { min-height:98px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.wordmark { display:inline-flex; flex-direction:column; flex:0 0 auto; text-decoration:none; }
.wordmark__main { font:700 clamp(1.5rem,8.4vw,2.32rem)/1 var(--serif); letter-spacing:-.03em; }
.wordmark__sub { margin-top:.34rem; color:var(--clay); font-size:clamp(.66rem,3vw,.82rem); font-weight:800; letter-spacing:.13em; line-height:1; text-transform:uppercase; }
.nav-toggle { width:48px; height:48px; display:none; align-items:center; justify-content:center; padding:0; color:var(--deep); background:transparent; border:1px solid var(--line); border-radius:50%; cursor:pointer; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after { width:20px; height:2px; display:block; background:currentColor; border-radius:999px; transition:transform .18s ease; }
.nav-toggle span { position:relative; }
.nav-toggle span::before,.nav-toggle span::after { position:absolute; left:0; content:""; }
.nav-toggle span::before { top:-6px; }
.nav-toggle span::after { top:6px; }
.menu-open .nav-toggle span { background:transparent; }
.menu-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.menu-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
.nav-links { display:flex; align-items:center; justify-content:flex-end; gap:clamp(.1rem,1vw,.8rem); }
.nav-links a { min-height:44px; display:inline-flex; align-items:center; padding:.45rem .62rem; border-bottom:2px solid transparent; font-size:.86rem; font-weight:750; text-decoration:none; white-space:nowrap; }
.nav-links a:hover,.nav-links a.active { color:var(--clay); border-bottom-color:currentColor; }
.nav-links .facebook-link { margin-left:.25rem; padding-inline:.85rem; color:#fff; background:#315f91; border:0; border-radius:999px; }
.eyebrow { margin-bottom:.9rem; color:var(--clay); font-size:.74rem; font-weight:850; letter-spacing:.16em; line-height:1.35; text-transform:uppercase; }
.eyebrow--light { color:#e9a179; }
.home-hero .eyebrow,.inner-hero .eyebrow { font-size:clamp(.66rem,3vw,.82rem); letter-spacing:.13em; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:.72rem 1.25rem; border:2px solid var(--deep); border-radius:999px; font-size:.88rem; font-weight:800; text-align:center; text-decoration:none; transition:.16s ease; }
.button:hover { transform:translateY(-2px); }
.button--primary { color:#fff; background:var(--deep); }
.button--primary:hover { background:var(--teal); border-color:var(--teal); }
.button--light { color:var(--deep); background:var(--paper); border-color:var(--paper); }
.button--ghost-light { color:#fff; border-color:rgba(255,255,255,.78); }
.button--disabled { color:#67736f; background:#e8e5de; border-color:#e8e5de; cursor:default; pointer-events:none; }
.home-hero,.inner-hero { min-height:calc(100svh - var(--site-chrome-height,122px)); display:grid; align-items:end; }
.home-hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(90deg,rgba(6,34,35,.88),rgba(6,34,35,.15)),url("images/ferry-hero.jpg") center/cover var(--deep); }
.home-hero__content { position:relative; z-index:1; max-width:760px; padding-block:clamp(3rem,7vh,6rem); }
.home-hero h1 { max-width:12ch; margin-bottom:1.4rem; color:#fff; font-size:clamp(2.9rem,5.9vw,5.6rem); text-wrap:balance; }
.home-hero__intro { max-width:34rem; margin-bottom:2rem; color:rgba(255,255,255,.9); font:clamp(1.25rem,2vw,1.65rem)/1.45 var(--serif); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero-status { max-width:36rem; margin:1.2rem 0 0; color:rgba(255,255,255,.74); font-size:.85rem; }
.inner-hero { overflow:hidden; color:#fff; background-color:var(--deep); }
.inner-hero--shop { background:linear-gradient(90deg,rgba(6,34,35,.95),rgba(6,34,35,.62),rgba(6,34,35,.16)),url("images/crafts/cardigan_teal.jpg") center 58%/cover; }
.inner-hero--makers { background:linear-gradient(90deg,rgba(6,34,35,.95),rgba(6,34,35,.62),rgba(6,34,35,.2)),url("images/crafts/baby_booties_headband.jpg") center 51%/cover; }
.inner-hero--books { background:linear-gradient(90deg,rgba(6,34,35,1) 0%,rgba(6,34,35,.96) 44%,rgba(6,34,35,.5) 78%,rgba(6,34,35,.32)),url("images/books/invisible-code.jpg") calc(100% - 5rem) 50%/auto 84% no-repeat,var(--deep); }
.inner-hero--stories { background:linear-gradient(90deg,rgba(6,34,35,.95),rgba(6,34,35,.66),rgba(6,34,35,.24)),url("images/family/waitohi-wharf-1911.jpg") center 42%/cover; }
.inner-hero--story { background:linear-gradient(90deg,rgba(6,34,35,.94),rgba(6,34,35,.52)),url("images/marlborough-story.jpg") center 52%/cover; }
.inner-hero--contact { background:linear-gradient(90deg,rgba(6,34,35,.94),rgba(6,34,35,.48)),url("images/marlborough-hero.jpg") center 46%/cover; }
.inner-hero__content { max-width:820px; padding-block:clamp(5rem,10vw,8rem); }
.inner-hero h1 { max-width:12ch; margin-bottom:1.25rem; color:#fff; font-size:clamp(3.1rem,6vw,6rem); }
.inner-hero p:last-child { max-width:39rem; color:rgba(255,255,255,.88); font:clamp(1.2rem,2vw,1.55rem)/1.48 var(--serif); }
.section { padding-block:clamp(4.5rem,9vw,8rem); }
.section--paper { background:var(--paper); }
.section--dark { color:rgba(255,255,255,.82); background:var(--deep); }
.section--dark h2,.section--dark h3 { color:#fff; }
.section-heading { max-width:760px; margin-bottom:clamp(2.2rem,5vw,4rem); }
.section-heading h2 { margin-bottom:1rem; }
.section-heading>p:last-child { max-width:40rem; color:#536b65; font-size:1.08rem; }
.entry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.entry-card { min-height:480px; position:relative; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background:var(--deep); border-radius:1.3rem; box-shadow:var(--shadow); text-decoration:none; }
.entry-card>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.entry-card:hover>img { transform:scale(1.035); }
.entry-card::after { position:absolute; inset:0; background:linear-gradient(transparent 30%,rgba(5,30,28,.92)); content:""; }
.entry-card__collage { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:.2rem; }
.entry-card__collage img { width:100%; height:100%; object-fit:cover; }
.entry-card__content { position:relative; z-index:1; padding:1.65rem; }
.entry-card__label { margin-bottom:.5rem; color:#f1d59f; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.entry-card h3 { margin-bottom:.7rem; color:#fff; font-size:2rem; }
.entry-card p:last-child { margin-bottom:0; color:rgba(255,255,255,.82); }
.split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(2.5rem,7vw,7rem); }
.split__image { overflow:hidden; border-radius:1.3rem; box-shadow:var(--shadow); }
.split__image img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.lead { color:var(--deep); font:clamp(1.3rem,2vw,1.75rem)/1.4 var(--serif); }
.split__copy .button { margin-top:1rem; }
.craft-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.15rem; }
.craft-card,.book-card,.maker-card,.info-card { overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:1.1rem; }
.craft-card__image { overflow:hidden; background:#e8dfd0; }
.craft-card__image img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.craft-card__copy { padding:1.15rem; }
.craft-card__copy p,.book-card__status,.maker-card__role { margin-bottom:.45rem; color:var(--clay); font-size:.7rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.craft-card__copy h3 { margin-bottom:0; }
.coming-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; margin-top:2rem; padding:clamp(1.6rem,4vw,2.7rem); background:#e8e3d7; border-radius:1.15rem; }
.coming-panel p { max-width:44rem; margin-bottom:0; }
.book-strip { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); align-items:center; gap:clamp(2rem,6vw,6rem); }
.book-strip__covers { min-height:430px; position:relative; }
.book-strip__covers img { position:absolute; top:50%; width:38%; max-height:390px; object-fit:contain; border-radius:.35rem; box-shadow:0 20px 46px rgba(4,20,18,.35); transform:translateY(-50%); }
.book-strip__covers img:nth-child(1) { left:0; z-index:3; transform:translateY(-50%) rotate(-5deg); }
.book-strip__covers img:nth-child(2) { left:30%; z-index:2; }
.book-strip__covers img:nth-child(3) { right:0; transform:translateY(-50%) rotate(5deg); }
.book-strip__covers--single img:nth-child(1) { left:50%; width:52%; transform:translate(-50%,-50%) rotate(-2deg); }
.books-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; }
.book-card { display:flex; flex-direction:column; }
.book-card__image { min-height:430px; display:grid; place-items:center; padding:1.5rem; background:#e8e3d7; }
.book-card__image img { width:auto; max-width:100%; max-height:390px; border-radius:.28rem; box-shadow:0 18px 42px rgba(13,41,37,.22); }
.book-card__copy { display:flex; flex:1; flex-direction:column; padding:1.3rem; }
.book-card__copy h2 { margin-bottom:.7rem; font-size:1.7rem; }
.book-card__copy>p:not(.book-card__status) { color:#526762; }
.book-card__actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:auto; padding-top:.8rem; }
.book-card__actions .button { min-height:44px; padding:.55rem .9rem; font-size:.78rem; }
.maker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem; }
.maker-card { padding:clamp(1.6rem,4vw,2.6rem); }
.maker-card--founding { color:rgba(255,255,255,.8); background:var(--teal); }
.maker-card--founding h2,.maker-card--founding .maker-card__role { color:#fff; }
.maker-card h2 { margin-bottom:1rem; font-size:clamp(2.1rem,4vw,3.7rem); }
.maker-card__number { display:block; margin-bottom:2.5rem; color:var(--gold); font:3rem/1 var(--serif); }
.chair-figure { max-width:760px; margin:2.2rem auto; }
.chair-figure img { width:100%; height:auto; display:block; border-radius:.5rem; box-shadow:0 18px 44px rgba(9,26,24,.28); }
.chair-figure--portrait { max-width:420px; }
.chair-figure-pair { max-width:1000px; margin:2.2rem auto; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.chair-figure-pair .chair-figure { margin:0; }
@media (max-width:720px) { .chair-figure-pair { grid-template-columns:1fr; gap:1.1rem; } }
.story-note { margin-top:1.6rem; padding:1rem 1.1rem; color:#4c625c; background:#ece5d8; border-left:4px solid var(--gold); }
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; }
.info-card { padding:1.5rem; }
.info-card h2 { margin-bottom:.8rem; font-size:1.8rem; }
.facebook-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2rem; padding:clamp(2rem,5vw,4rem); color:rgba(255,255,255,.8); background:linear-gradient(135deg,#234d78,#173451); border-radius:1.3rem; box-shadow:var(--shadow); }
.facebook-panel h2 { margin-bottom:.8rem; color:#fff; }
.facebook-panel p { max-width:42rem; margin-bottom:0; }
.facebook-panel__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; }
.site-footer { padding-block:3rem; color:rgba(255,255,255,.72); background:#09231f; }
.site-footer__grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem; }
.site-footer__brand { margin-bottom:.45rem; color:#fff; font:700 1.65rem var(--serif); }
.site-footer h2 { margin-bottom:.8rem; color:#fff; font:850 .76rem var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.site-footer ul { margin:0; padding:0; list-style:none; }
.site-footer__bottom { display:flex; justify-content:space-between; gap:1rem; margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); font-size:.8rem; }
.studio { padding-block:4rem 7rem; }
.studio-header { max-width:760px; margin-bottom:2.5rem; }
.studio-header h1 { font-size:clamp(3rem,6vw,5.7rem); }
.studio-notice { padding:1rem 1.1rem; background:#e6e4d8; border-left:4px solid var(--gold); }
.studio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.studio-card { min-width:0; padding:1.5rem; background:var(--paper); border:1px solid var(--line); border-radius:1rem; }
.studio-card h2 { font-size:1.8rem; }
.field { display:grid; gap:.38rem; margin-bottom:1rem; }
.field label,.photo-field p { font-size:.82rem; font-weight:800; }
.field input,.field textarea { width:100%; padding:.78rem .9rem; color:var(--ink); background:#fff; border:1px solid rgba(23,53,47,.3); border-radius:.55rem; }
.field textarea { min-height:110px; resize:vertical; }
.photo-field { padding:.9rem; background:#eee8dc; border-radius:.65rem; }
.photo-field+.photo-field { margin-top:.75rem; }
.studio-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem; }
.studio-status { min-height:1.6rem; margin-top:1rem; color:var(--teal); font-weight:800; }
/* The nav goes to the menu button before it runs out of room. Measured 2 Sep 2026:
   the seven-item row needs about 1258px, so it collapses at 1280. This also fixes a
   pre-existing overflow that the six-item nav had between 980px and about 1140px. */
@media(max-width:1280px) {
  .nav-toggle { display:inline-flex; }
  .nav-links { position:fixed; inset:var(--nav-panel-top,122px) 0 0; display:none; align-content:start; padding:1.2rem 1.5rem 2rem; overflow-y:auto; background:var(--cream); }
  .menu-open .nav-links { display:grid; }
  .nav-links a { min-height:54px; padding-inline:0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav-links .facebook-link { justify-content:center; margin:1rem 0 0; border:0; }
}
@media(max-width:980px) {
  .entry-grid,.books-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .entry-card:last-child { grid-column:1/-1; }
  .craft-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split,.book-strip { grid-template-columns:1fr; }
  .site-footer__grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:720px) {
  .shell { width:min(calc(100% - 2rem),var(--shell)); }
  .preview-bar__inner { min-height:52px; align-items:flex-start; gap:.45rem; padding-block:.55rem; text-align:left; }
  .site-nav { min-height:84px; gap:.75rem; }
  .home-hero { background:linear-gradient(180deg,rgba(6,34,35,.28),rgba(6,34,35,.87) 76%),url("images/ferry-hero.jpg") center/cover; }
  .home-hero__content { padding-block:2.25rem; }
  .home-hero h1 { max-width:14ch; font-size:clamp(2.3rem,11.2vw,3.9rem); }
  .hero-actions .button { width:100%; }
  .entry-grid,.books-grid,.maker-grid,.info-grid,.studio-grid { grid-template-columns:1fr; }
  .entry-card,.entry-card:last-child { min-height:420px; grid-column:auto; }
  .coming-panel,.facebook-panel { grid-template-columns:1fr; }
  .facebook-panel__actions { justify-content:flex-start; }
  .book-strip__covers { min-height:330px; }
  .book-strip__covers img { max-height:300px; }
  .site-footer__grid { grid-template-columns:1fr; }
  .site-footer__bottom { flex-direction:column; }
  .studio-nav { align-items:stretch; flex-direction:column; gap:.75rem; padding-block:.75rem; }
  .studio-nav .button { width:100%; min-height:44px; }
  .studio-grid { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* ---- Shop: collections, pieces, worn views (added 17 Aug 2026) ---- */
.made-to-order { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:clamp(2rem,6vw,5rem); padding-bottom:clamp(2rem,5vw,3.4rem); border-bottom:1px solid var(--line); }
.made-to-order h2 { margin-bottom:0; font-size:clamp(2rem,3.6vw,3.2rem); }
.made-to-order__steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem; }
.made-to-order__steps div { display:flex; flex-direction:column; gap:.7rem; }
.made-to-order__steps span { width:2.4rem; height:2.4rem; display:grid; place-items:center; color:var(--deep); background:var(--cream); border:1px solid var(--line); border-radius:50%; font:1.15rem/1 var(--serif); }
.made-to-order__steps p { margin:0; color:#4b5b57; font-size:.95rem; }

.collection-nav { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:clamp(2rem,5vw,3.2rem); }
.collection-nav a { min-height:42px; display:inline-flex; align-items:center; padding:.45rem 1.05rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; font-size:.84rem; font-weight:750; text-decoration:none; transition:.16s ease; }
.collection-nav a:hover { color:#fff; background:var(--teal); border-color:var(--teal); }

.collection { scroll-margin-top:96px; }
.collection__head { max-width:60ch; margin-bottom:clamp(1.8rem,4vw,2.8rem); }
.collection__head h2 { margin-bottom:.85rem; }
.collection__head p { margin-bottom:0; color:#4b5b57; font-size:1.06rem; }

.worn-band { margin-bottom:clamp(2rem,4vw,3rem); }
.worn-band__pics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,1fr); gap:.85rem; }
.worn-band__pics img { width:100%; height:100%; min-height:0; object-fit:cover; border-radius:1.1rem; }
.worn-band__pics img:first-child { grid-column:1 / span 2; grid-row:1 / span 2; aspect-ratio:auto; }
.worn-band__pics img:not(:first-child) { aspect-ratio:4/3; }
.worn-band__note { margin:.9rem 0 0; color:#6d7a76; font-size:.79rem; line-height:1.5; }

.piece-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.7rem); }
.piece { display:flex; flex-direction:column; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:1.2rem; transition:.22s ease; }
.piece:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.piece__img { overflow:hidden; background:#ece4d6; }
.piece__img img { width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s ease; }
.piece:hover .piece__img img { transform:scale(1.04); }
.piece__body { display:flex; flex:1; flex-direction:column; padding:1.25rem 1.3rem 1.4rem; }
.piece__tech { margin-bottom:.5rem; color:var(--clay); font-size:.68rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.piece__body h3 { margin-bottom:.6rem; font-size:1.3rem; }
.piece__meta { margin-bottom:.9rem; color:#6d7a76; font-size:.86rem; }
.piece__price { margin:auto 0 0; padding-top:.85rem; border-top:1px solid var(--line); color:var(--deep); font-size:.92rem; font-weight:800; }

@media (max-width:960px) {
  .made-to-order { grid-template-columns:1fr; gap:2rem; }
  .piece-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .made-to-order__steps { grid-template-columns:1fr; gap:1.1rem; }
  .made-to-order__steps div { flex-direction:row; align-items:center; gap:1rem; }
  .made-to-order__steps span { flex:0 0 auto; }
  .piece-grid { grid-template-columns:1fr; }
  .worn-band__pics { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .worn-band__pics img:first-child { grid-column:1 / span 2; grid-row:auto; aspect-ratio:16/10; }
}

.piece__img { position:relative; }
.piece__more { position:absolute; right:.6rem; bottom:.6rem; display:flex; gap:.35rem; }
.piece__more img { width:52px; height:52px; object-fit:cover; border:2px solid rgba(255,253,248,.9); border-radius:.5rem; box-shadow:0 6px 18px rgba(13,41,37,.3); }
.provenance { max-width:70ch; margin-top:clamp(1.6rem,3.5vw,2.4rem); padding:clamp(1.2rem,3vw,1.7rem) clamp(1.3rem,3vw,1.9rem); background:var(--paper); border-left:3px solid var(--clay); border-radius:0 .9rem .9rem 0; }
.provenance p { margin:0; color:#41524e; font-size:1rem; line-height:1.7; }

/* ---- Story pages (17 Aug 2026) ---- */
.story-body { max-width:38rem; display:flex; flex-direction:column; gap:1.15rem; }
.story-body p { margin:0; font-size:1.12rem; line-height:1.75; color:#3d4b47; }
.story-body p:first-child { font-size:1.28rem; line-height:1.62; color:var(--deep); }
.story-body strong { color:var(--deep); font-weight:700; }
.story-body em { font-style:italic; }
.story-body--light p { color:rgba(255,255,255,.86); }
.story-body--light p:first-child { color:#fff; }
.section--dark .collection__head h2,
.section--dark .collection__head p { color:#fff; }
.section--dark .collection__head p:not(.eyebrow) { color:rgba(255,255,255,.82); }
@media (max-width:620px) { .story-body p { font-size:1.05rem; } .story-body p:first-child { font-size:1.15rem; } }

/* ---- Home: the thread statement (17 Aug 2026) ---- */
.thread-statement { max-width:44rem; margin-inline:auto; display:flex; flex-direction:column; gap:1.15rem; text-align:center; }
.thread-statement p { margin:0; color:var(--deep); font-family:var(--serif); font-size:clamp(1.55rem,3.2vw,2.5rem); line-height:1.22; letter-spacing:-.02em; text-wrap:balance; }
.thread-statement p + p { margin-top:-.4rem; }
.thread-statement__turn { margin-top:1.4rem !important; color:#46564f !important; font-family:var(--sans) !important; font-size:1.1rem !important; line-height:1.72 !important; letter-spacing:0 !important; }
.thread-statement__turn + .thread-statement__turn { margin-top:0 !important; }
.thread-statement .button { align-self:center; margin-top:1.4rem; }
@media (max-width:620px) { .thread-statement__turn { font-size:1.02rem !important; } }

/* ---- Full bleed photographic sections (17 Aug 2026) ---- */
.bleed { position:relative; isolation:isolate; background-position:center; background-size:cover; background-repeat:no-repeat; }
.bleed::before { position:absolute; inset:0; z-index:-1; content:""; }

.bleed--stitch { background-image:url("images/bleed/stitch.jpg"); background-size:cover; background-position:center; }
.bleed--stitch::before { background:linear-gradient(rgba(250,247,242,.80),rgba(250,247,242,.62)); }

.bleed--sounds { min-height:78svh; display:grid; align-items:end; padding-block:clamp(4rem,10vw,8rem);
  background-image:url("images/bleed/sounds.jpg"); background-position:center 62%; }
.bleed--sounds::before { background:linear-gradient(90deg,rgba(6,32,34,.94),rgba(6,32,34,.72) 46%,rgba(6,32,34,.20)); }
.bleed__inner { max-width:34rem; display:flex; flex-direction:column; gap:1rem; }
.bleed__inner h2 { margin-bottom:.4rem; color:#fff; }
.bleed__inner p { margin:0; color:rgba(255,255,255,.88); font-size:1.05rem; line-height:1.7; }
.bleed__inner strong,.bleed__inner em { color:#fff; }
.bleed__lead { font-size:1.24rem !important; line-height:1.6 !important; color:#fff !important; }
.bleed__inner .button { align-self:flex-start; margin-top:.8rem; }

.thread-statement--onphoto p { color:var(--deep); }
.thread-statement--onphoto .thread-statement__turn { color:#3f4f49 !important; }

/* tighter vertical rhythm, less dead air between slabs */
.section { padding-block:clamp(3rem,6.5vw,5.2rem); }
.section-heading { max-width:46rem; margin-bottom:clamp(1.8rem,3.5vw,2.6rem); }

/* taller, more editorial collection cards */
.entry-card { min-height:min(64svh,560px); }

@media (max-width:900px) {
  .bleed--stitch { background-attachment:scroll; }
  .bleed--sounds { min-height:auto; }
  .bleed--sounds::before { background:linear-gradient(rgba(6,32,34,.55),rgba(6,32,34,.92)); }
  .entry-card { min-height:420px; }
}
.bleed--water { background-image:url("images/bleed/sounds.jpg"); background-position:center 40%; }
.bleed--water::before { background:linear-gradient(rgba(5,26,28,.90),rgba(5,26,28,.94)); }
.bleed--stitch2 { background-image:url("images/bleed/stitch2.jpg"); }
.bleed--stitch2::before { background:linear-gradient(rgba(250,247,242,.86),rgba(250,247,242,.70)); }
.collection__head--light h2 { color:#fff; }
.collection__head--light > p:not(.eyebrow) { color:rgba(255,255,255,.85); }

/* ---- Makers and Writing pages (17 Aug 2026) ---- */
.inner-hero--writing { background:linear-gradient(90deg,rgba(6,34,35,.95),rgba(6,34,35,.62),rgba(6,34,35,.18)),url("images/bleed/stitch.jpg") center/cover; }
.maker-lead { max-width:40rem; display:flex; flex-direction:column; gap:1.1rem; }
.maker-lead h2 { font-size:clamp(2.6rem,6vw,4.6rem); margin-bottom:.3rem; }
.maker-lead .button { align-self:flex-start; margin-top:.6rem; }
.maker-card { display:flex; flex-direction:column; gap:.9rem; }
.maker-card p { margin:0; }
.maker-card__meta { color:var(--clay); font-size:.86rem; font-weight:700; }
.maker-card .button { align-self:flex-start; margin-top:.4rem; }
.books-strip-mini { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem; align-items:end; margin-bottom:2rem; }
.books-strip-mini--single { grid-template-columns:minmax(12rem,18rem); }
.books-strip-mini img { width:100%; border-radius:.25rem; box-shadow:0 16px 38px rgba(13,41,37,.24); }
.split--anthony { align-items:center; gap:clamp(2rem,6vw,5rem); }
.split--anthony .split__words { max-width:38rem; }
.anthony-book { width:min(100%,18rem); margin:0 auto; }
.anthony-book img { width:100%; height:auto; display:block; border-radius:.3rem; box-shadow:0 22px 50px rgba(0,0,0,.45); }
.writing-anthony + .section--dark { border-top:1px solid rgba(255,255,255,.14); }
.awaiting { max-width:36rem; margin-top:2rem; padding:1.3rem 1.5rem; border:1px dashed rgba(255,255,255,.35); border-radius:.8rem; }
.awaiting__label { margin:0 0 .4rem; color:#f2d59c; font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.awaiting p:last-child { margin:0; color:rgba(255,255,255,.8); font-size:.98rem; }
@media (max-width:760px) { .books-strip-mini { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- Book covers: identical size everywhere (17 Aug 2026) ---- */
.book-card__image { min-height:0; padding:1.25rem; }
.book-card__image img { width:100%; max-width:none; max-height:none; aspect-ratio:1000/1600; object-fit:cover; border-radius:.2rem; }
.books-strip-mini img { width:100%; height:auto; aspect-ratio:1000/1600; object-fit:cover; }
/* fanned homepage covers show WHOLE, never cropped */
.book-strip__covers img { aspect-ratio:auto; object-fit:contain; width:34%; max-height:none; height:auto; }
.maker-card__also { color:var(--clay); font-family:var(--sans); font-size:.9rem; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.head-also { color:var(--gold); font-family:var(--sans); font-size:.95rem; font-weight:700; letter-spacing:.04em; }

/* ---- The mark: feather and fan as three waves (17 Aug 2026) ---- */
.mark { width:clamp(2.4rem,12vw,3.25rem); height:clamp(2.4rem,12vw,3.25rem); flex:0 0 auto; color:var(--teal); }
.site-header .mark g { stroke-width:2.9; }
.wordmark { flex-direction:row; align-items:center; gap:clamp(.5rem,1.4vw,.8rem); }
.wordmark__text { display:flex; flex-direction:column; }
.site-footer .mark { width:2.4rem; height:2.4rem; margin-bottom:.65rem; color:var(--gold); display:block; }
.wave-rule { width:100%; height:2.2rem; margin:clamp(2rem,4vw,3rem) 0; color:var(--line);
  background:currentColor; -webkit-mask:url("images/mark/wave-rule.svg") repeat-x center/auto 100%;
  mask:url("images/mark/wave-rule.svg") repeat-x center/auto 100%; opacity:.55; }
.book-card__blurb { color:#5c6a66; font-size:.98rem; line-height:1.6; }
.book-card__blurb[data-needs-copy] { color:#93756a; font-style:italic; }
.books-grid { grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); }
.books-grid--single { max-width:28rem; }

/* ---- Contact page (17 Aug 2026) ---- */
.contact-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,2.5vw,2rem); margin-bottom:clamp(2.2rem,5vw,3.4rem); }
.contact-step { display:flex; gap:1rem; align-items:flex-start; }
.contact-step span { width:2.5rem; height:2.5rem; flex:0 0 auto; display:grid; place-items:center; color:var(--deep); background:var(--paper); border:1px solid var(--line); border-radius:50%; font:1.2rem/1 var(--serif); }
.contact-step h3 { margin-bottom:.35rem; font-size:1.2rem; }
.contact-step p { margin:0; color:#54635f; font-size:.97rem; line-height:1.6; }
.contact-route { max-width:44rem; padding:clamp(1.5rem,3.5vw,2.2rem); background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--clay); border-radius:0 1rem 1rem 0; }
.contact-route__label { margin:0 0 .6rem; color:var(--clay); font-size:.7rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.contact-route h3 { margin-bottom:.7rem; font-size:1.5rem; }
.contact-route p { margin:0 0 .7rem; color:#4b5b57; line-height:1.7; }
.contact-route__note { margin:0 !important; color:#7c8783 !important; font-size:.9rem; }
@media (max-width:820px) { .contact-steps { grid-template-columns:1fr; gap:1.2rem; } }
.piece__price-note { color:#8d9994; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }

/* ================= EDITORIAL PASS, 17 Aug 2026 ================= */

/* --- Typography: a face with character, not the system default --- */
:root {
  --serif: "EB Garamond", "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h1, h2, h3, .thread-statement p, .maker-lead h2 {
  font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
  letter-spacing: -.018em;
}
h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
body { font-feature-settings: "kern" 1; }
.piece__price, table, .contact-step span, .made-to-order__steps span { font-variant-numeric: tabular-nums lining-nums; }
.eyebrow, .piece__tech, .book-card__status, .maker-card__role, .awaiting__label,
.contact-route__label, .preview-bar__label, .wordmark__sub {
  font-feature-settings: "kern" 1; letter-spacing: .17em;
}
.lead, .home-hero__intro, .bleed__lead, .inner-hero__content > p {
  font-family: var(--serif); font-size: clamp(1.18rem, 2.1vw, 1.5rem); line-height: 1.5; letter-spacing: -.008em;
}

/* --- Header: floats over the hero, solidifies on scroll --- */
.has-overlay-header .site-header {
  background: transparent; border-bottom-color: transparent; backdrop-filter: none;
  transition: background .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
.has-overlay-header .site-header .wordmark__main,
.has-overlay-header .site-header .nav-links a { color: #fff; }
.has-overlay-header .site-header .wordmark__sub { color:#e9a179; }
.has-overlay-header .site-header .mark { color: rgba(255,255,255,.9); }
.has-overlay-header .site-header .nav-links a:hover,
.has-overlay-header .site-header .nav-links a.active { color: #f2d59c; }
.has-overlay-header .site-header .nav-toggle { color:#fff; border-color: rgba(255,255,255,.45); }

.site-header--solid {
  background: rgba(248,241,230,.94) !important;
  border-bottom-color: var(--line) !important;
  backdrop-filter: blur(16px) !important;
}
.site-header--solid .wordmark__main { color: var(--deep) !important; }
.site-header--solid .wordmark__sub { color: var(--clay) !important; }
.site-header--solid .mark { color: var(--teal) !important; }
.site-header--solid .nav-links a { color: var(--deep) !important; }
.site-header--solid .nav-toggle { color: var(--deep) !important; border-color: var(--line) !important; }

/* hero now runs to the top of the window behind the header */
.has-overlay-header .home-hero,
.has-overlay-header .inner-hero { margin-top: calc(-1 * var(--header-h, 80px)); padding-top: var(--header-h, 80px); min-height: 100svh; }
.home-hero__content, .inner-hero__content { padding-bottom: clamp(2.5rem, 6vh, 5rem); }

/* --- Restraint --- */
.nav-links a { font-size:.82rem; letter-spacing:.01em; }
.section-heading p, .collection__head p { max-width:52ch; }

/* EB Garamond sets smaller than Hoefler at the same size, compensate */
h1 { font-size: clamp(3.6rem, 8vw, 7.6rem); }
h2 { font-size: clamp(2.5rem, 5.4vw, 5.2rem); }
.thread-statement p { font-size: clamp(1.7rem, 3.5vw, 2.7rem); }
/* te reo and emphasis run in the serif italic, not the UI sans */
.story-body em, .split__copy em, .bleed__inner em, .maker-lead em, p em {
  font-family: var(--serif); font-style: italic; font-size: 1.06em; letter-spacing: 0;
}

/* === 18 Aug: nav as editorial buttons, panel moved under the wordmark === */

/* Top nav: same language as the buttons. Squared, hairline, letterspaced. */
.nav-links { gap:.4rem; }
.nav-links a {
  min-height:38px; padding:.5rem .85rem; border-radius:2px;
  border:1px solid transparent; border-bottom:0;
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.has-overlay-header .site-header .nav-links a { color:#fff; border-color:rgba(255,255,255,.34); background:transparent; }
.has-overlay-header .site-header .nav-links a:hover,
.has-overlay-header .site-header .nav-links a.active,
.has-overlay-header .site-header .nav-links a[aria-current="page"] {
  color:#000 !important; background:#fff; border-color:#fff;
}
.site-header--solid .nav-links a { color:#1a1a1a !important; background:transparent; border-color:rgba(23,53,47,.28); }
.site-header--solid .nav-links a:hover,
.site-header--solid .nav-links a.active,
.site-header--solid .nav-links a[aria-current="page"] {
  color:#fff !important; background:#000; border-color:#000;
}
.nav-links .facebook-link,
.has-overlay-header .site-header .nav-links .facebook-link,
.site-header--solid .nav-links .facebook-link {
  color:#fff !important; background:#315f91 !important; border-color:#315f91 !important;
}

/* Karen's band: starts at the centre of the wave mark, runs right to the end of
   the wordmark, clear of the header at the top, dissolving at the foot. */
body.band-b .home-hero::before, body.band-b .inner-hero::before {
  left:calc(max(1.5rem, (100% - var(--shell)) / 2) + clamp(2.4rem,12vw,3.25rem) / 2);
  width:clamp(170px, 21vw, 285px);
  background-size:100% auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 30%,#000 64%,transparent 94%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 30%,#000 64%,transparent 94%);
}
@media (max-width:900px) { .nav-links a { padding:.5rem .6rem; font-size:.6rem; letter-spacing:.1em; } }

/* --- Te Ahuru Mowai lockup: red, both instances identical, 18 Aug --- */
:root { --tam-red-light:#f2685a; --tam-red-deep:#c1271b; }
.wordmark__sub,
.home-hero .eyebrow, .inner-hero .eyebrow {
  font-size:clamp(.76rem,3.5vw,.95rem);
  letter-spacing:.14em;
}
.wordmark__sub { color:var(--tam-red-deep); }
.eyebrow--light { color:var(--tam-red-light); }
.has-overlay-header .site-header .wordmark__sub { color:var(--tam-red-light); }
.site-header--solid .wordmark__sub { color:var(--tam-red-deep) !important; }

/* --- Editorial buttons, site wide. Squared, hairline, letterspaced. No pills, no fills. --- */
.button {
  padding:1rem 2.1rem; border-width:1px; border-radius:2px;
  font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.button:hover { transform:none; }
/* on light ground */
.button--primary { color:var(--deep); background:transparent; border-color:var(--deep); }
.button--primary:hover { color:#fff; background:var(--deep); border-color:var(--deep); }
/* on dark ground or a photo */
.button--light { color:#fff; background:transparent; border-color:rgba(255,255,255,.8); }
.button--light:hover { color:var(--deep); background:#fff; border-color:#fff; }
.button--disabled { border-color:#d9d4ca; background:transparent; color:#8a938f; }

/* the shop's collection jump links, same language */
.collection-nav { gap:.7rem; }
.collection-nav a {
  min-height:44px; padding:.6rem 1.25rem; background:transparent;
  border:1px solid rgba(23,53,47,.3); border-radius:2px;
  font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
.collection-nav a:hover { color:#fff; background:var(--deep); border-color:var(--deep); }

/* --- Hero actions: one outlined action, one quiet text link. Editorial, not app UI. --- */
body.btn-editorial .hero-actions { align-items:center; gap:1.9rem; }
body.btn-editorial .hero-actions .button--light {
  padding:1rem 2.1rem; border:1px solid rgba(255,255,255,.8); border-radius:2px;
  background:transparent; color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
body.btn-editorial .hero-actions .button--light:hover {
  background:#fff; color:var(--deep); border-color:#fff; transform:none;
}
body.btn-editorial .hero-actions .button--ghost-light {
  padding:.5rem 0; border:0; border-radius:0; background:transparent;
  color:rgba(255,255,255,.94); font-size:.82rem; font-weight:700; letter-spacing:.04em;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.42rem;
  text-decoration-color:rgba(255,255,255,.45);
}
body.btn-editorial .hero-actions .button--ghost-light:hover {
  color:#fff; text-decoration-color:#fff; transform:none;
}
@media (max-width:720px) {
  body.btn-editorial .hero-actions { flex-direction:column; align-items:flex-start; gap:1.35rem; }
  body.btn-editorial .hero-actions .button--light { width:auto; }
  body.btn-editorial .hero-actions .button--ghost-light { width:auto; }
}

/* --- Karen's band: faint watermark down the hero. Two options, A and B. --- */
.home-hero, .inner-hero { position:relative; }
.home-hero::before, .inner-hero::before {
  content:""; position:absolute; top:0; bottom:0; z-index:0; pointer-events:none;
  background-image:url("images/pattern/karen-band-white.png");
  background-repeat:repeat-y; background-position:top center; background-size:100% auto;
  opacity:.085;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 58%,transparent 96%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 58%,transparent 96%);
}
/* A: in the text column, aligned with the hero eyebrow (Anthony's original) */
body.band-a .home-hero::before, body.band-a .inner-hero::before {
  left:max(1.5rem, calc((100% - var(--shell)) / 2)); width:78px;
}
/* B: hard against the outside edge of the screen, nothing crosses it */
body.band-b .home-hero::before, body.band-b .inner-hero::before { left:0; width:64px; }
/* B only: her band at full strength, real colours, one hairline at the hero's foot */
body.band-b .home-hero::after, body.band-b .inner-hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:15px; z-index:2;
  background-image:url("images/pattern/karen-band-colour.png");
  background-repeat:repeat-x; background-size:auto 100%; opacity:.92;
}
.home-hero__content, .inner-hero__content { position:relative; z-index:1; }
@media (max-width:720px) {
  /* no room for a gutter on a phone: band off, colour hairline stays */
  body.band-a .home-hero::before, body.band-a .inner-hero::before,
  body.band-b .home-hero::before, body.band-b .inner-hero::before { display:none; }
  body.band-b .home-hero::after, body.band-b .inner-hero::after { height:11px; }
}

/* --- Nav: black and white only, no gold. Current page goes black. --- */
.nav-links a { border-radius:999px; border-bottom:0; transition:background .16s ease, color .16s ease; }
/* over a photo: links white, current page black on white */
.has-overlay-header .site-header .nav-links a { color:#fff; }
.has-overlay-header .site-header .nav-links a:hover,
.has-overlay-header .site-header .nav-links a.active,
.has-overlay-header .site-header .nav-links a[aria-current="page"] {
  color:#000 !important; background:#fff; border-bottom-color:transparent;
}
/* scrolled, cream header: links black-ink, current page solid black on white */
.site-header--solid .nav-links a { color:#1a1a1a !important; background:transparent; }
.site-header--solid .nav-links a:hover,
.site-header--solid .nav-links a.active,
.site-header--solid .nav-links a[aria-current="page"] {
  color:#fff !important; background:#000;
}
/* the Facebook pill keeps its own colour */
.nav-links .facebook-link,
.has-overlay-header .site-header .nav-links .facebook-link,
.site-header--solid .nav-links .facebook-link { color:#fff !important; background:#315f91 !important; }

/* ==== FINAL BLOCK. Must stay last in this file. 18 Aug ==== */

/* Nav is not buttons. Plain letterspaced text, a fine rule marks where you are. */
.nav-links { gap:.15rem; }
.nav-links a {
  min-height:44px; padding:.5rem .8rem; background:transparent !important;
  border:0 !important; border-radius:0 !important;
  font-size:.68rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none;
}
/* Black nav over photographs. Measured: black beats white on six of the seven
   heroes. The writing hero has dark trees behind the nav, so a soft light halo
   carries the black there without changing the look anywhere else. */
.has-overlay-header .site-header .nav-links a {
  color:#000 !important;
  text-shadow:0 0 6px rgba(255,255,255,.75), 0 1px 2px rgba(255,255,255,.9);
}
.has-overlay-header .site-header .nav-links a:hover { color:#000 !important; }
.has-overlay-header .site-header .nav-links a.active,
.has-overlay-header .site-header .nav-links a[aria-current="page"] {
  color:#000 !important;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.55rem;
  text-decoration-color:#000;
}
.site-header--solid .nav-links a { color:rgba(23,53,47,.72) !important; }
.site-header--solid .nav-links a:hover { color:var(--deep) !important; }
.site-header--solid .nav-links a.active,
.site-header--solid .nav-links a[aria-current="page"] {
  color:var(--deep) !important;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.55rem;
  text-decoration-color:var(--deep);
}
.nav-links .facebook-link,
.has-overlay-header .site-header .nav-links .facebook-link,
.site-header--solid .nav-links .facebook-link {
  margin-left:.5rem; padding-inline:1rem; border-radius:2px !important;
  color:#fff !important; background:#315f91 !important; text-decoration:none !important;
}

/* Karen's band: centre of the wave mark, across to the end of the wordmark,
   clear of the header at the top, dissolving at the foot. */
body.band-b .home-hero::before, body.band-b .inner-hero::before {
  display:block;
  left:calc(max(1.5rem, (100% - var(--shell)) / 2) + clamp(2.4rem,12vw,3.25rem) / 2);
  width:clamp(170px, 21vw, 285px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 30%,#000 64%,transparent 94%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 13%,#000 30%,#000 64%,transparent 94%);
}
/* the quiet text link stays sentence case: that contrast is the whole point */
.hero-actions .button--ghost-light,
body.btn-editorial .hero-actions .button--ghost-light {
  text-transform:none; letter-spacing:.04em; font-size:.82rem;
}

/* Footer links: were 18px tall, too small to hit with a thumb. Now 44px. */
.site-footer li { margin:0; }
.site-footer li a {
  min-height:44px; display:inline-flex; align-items:center;
  padding:.25rem 0; font-size:.9rem; text-decoration:none;
  text-underline-offset:.3rem;
}
.site-footer li a:hover { color:#fff; text-decoration:underline; }
.site-footer__bottom { font-size:.85rem; }
.site-footer__bottom a { min-height:44px; display:inline-flex; align-items:center; }

/* Nothing on this site drops below 12px. Karen's buyers are not twenty. */
.preview-bar__label { font-size:.76rem; }
.eyebrow { font-size:.78rem; }
.entry-card__label { font-size:.76rem; }
.piece__tech { font-size:.76rem; }
.piece__price-note { font-size:.76rem; }
.made-to-order__steps p { font-size:.95rem; }
.worn-band__note, .story-note { font-size:.88rem; }

/* Band: thinner. Mark centre across to the A of Ahuru, and nowhere near the headline. */
body.band-b .home-hero::before, body.band-b .inner-hero::before {
  width:clamp(62px, 6.4vw, 96px);
}

/* The band belongs on the landscape photographs only. Never over Karen's own work,
   and never over the photograph of Anthony and Steve. Home, Our Story, Contact keep it. */
body.band-b .inner-hero--shop::before,
body.band-b .inner-hero--makers::before,
body.band-b .inner-hero--stories::before,
body.band-b .inner-hero--writing::before,
body.band-b .inner-hero--books::before { display:none !important; }

/* Under "their mother traced sixty feet of whakapapa": her actual handwriting,
   faint enough to read as texture rather than as a document. No knitting here. */
.bleed--whakapapa { background-image:url("images/pattern/whakapapa-hand.jpg"); background-size:cover; background-position:center 18%; }
.bleed--whakapapa::before { background:linear-gradient(rgba(250,247,242,.93),rgba(250,247,242,.89)); }
/* Karen's band again, full width, closing the whakapapa panel and separating it
   from The eldest. Same hairline that finishes the hero. */
/* BUG: .story-body strong sets colour to --deep, which is the exact background
   of .section--dark and .bleed--water. Tepane was being painted dark green on
   dark green and reading as a gap. Bold text on any dark ground goes light. */
.story-body--light strong,
.section--dark .story-body strong,
.bleed--water .story-body strong,
.section--dark strong,
.collection__head--light strong { color:#e9a179 !important; }

/* Their Maori names are names, not footnotes. Tepane and Ahuru read properly. */
.head-also, .maker-card__also {
  font-size:clamp(1.05rem,1.6vw,1.35rem); font-weight:800; letter-spacing:.02em;
}
.head-also { color:#e9a179; }
.section--dark .head-also, .collection__head--light .head-also { color:#f2a184; }
.maker-card__also { color:var(--clay); }

.bleed--whakapapa::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:15px; z-index:2;
  background-image:url("images/pattern/karen-band-colour.png");
  background-repeat:repeat-x; background-size:auto 100%; opacity:.92;
}
@media (max-width:720px) {
  .bleed--whakapapa { background-attachment:scroll; background-position:center top; }
  .bleed--whakapapa::after { height:11px; }
}

/* Writing hero: Anthony and Steve on the green bikes, 28 March 2024.
   Both brothers sit centre-left in frame, so the scrim carries the heading
   over the trees at the left and lifts off before it reaches their faces. */
.inner-hero--writing {
  background:
    linear-gradient(90deg, rgba(6,28,30,.94) 0%, rgba(6,28,30,.86) 22%, rgba(6,28,30,.45) 42%, rgba(6,28,30,.12) 62%, rgba(6,28,30,.05) 100%),
    url("images/family/brothers-green-bikes.jpg") 32% center / cover !important;
}
@media (max-width:720px) {
  /* the wide crop loses Steve on a narrow screen, so the phone gets its own
     crop taken tight around the pair of them */
  .inner-hero--writing {
    background:
      linear-gradient(180deg, rgba(6,28,30,.30) 0%, rgba(6,28,30,.34) 38%, rgba(6,28,30,.80) 76%, rgba(6,28,30,.94) 100%),
      url("images/family/brothers-green-bikes--tall.jpg") 62% 32% / cover !important;
  }
}

/* remaining small text */
.collection-nav a { font-size:.76rem; }
.button { font-size:.76rem; }
.preview-bar a { min-height:44px; display:inline-flex; align-items:center; }

@media (max-width:900px) { .nav-links a { padding:.55rem .6rem; font-size:.72rem; letter-spacing:.11em; } }
@media (max-width:720px) {
  body.band-b .home-hero::before, body.band-b .inner-hero::before { display:none; }
  .site-footer li a { min-height:48px; font-size:.95rem; }
  /* the open menu is a full screen panel: give it proper reading size */
  .nav-links a { min-height:52px; font-size:1rem; letter-spacing:.12em; padding:.6rem .2rem; }
}

/* Karen's own sizes and measurements, 19 Aug. The trust layer the shop never had. */
.piece__size {
  margin:.15rem 0 .35rem; color:var(--teal); font-size:.82rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.piece__detail {
  margin:0 0 .55rem; color:#4e5c58; font-size:.92rem; line-height:1.55;
}
.collection-nav a { white-space:nowrap; }
@media (max-width:720px) { .collection-nav a { white-space:normal; } }

/* Karen asked for "SHELTERED WATER" BIGGER, 19 Aug. Her note, her call. */
.wordmark__main { font-size:clamp(1.8rem,8.6vw,2.85rem) !important; }
.wordmark__sub  { font-size:clamp(.8rem,3.9vw,1.06rem) !important; }
/* Anthony asked twice: the te reo must be the SAME size in both places.
   The header sub was raised above and the hero eyebrow was left behind, which broke
   the pairing they originally had. Same clamp on both puts them back. */
.home-hero .eyebrow, .inner-hero .eyebrow { font-size:clamp(.8rem,3.9vw,1.06rem) !important; letter-spacing:.13em; }
.mark { width:clamp(2.6rem,12.4vw,3.7rem) !important; height:clamp(2.6rem,12.4vw,3.7rem) !important; }
.site-nav { min-height:112px; }
@media (max-width:720px) { .site-nav { min-height:94px; } }


/* ---- Piece viewer ---------------------------------------------------------
   Anthony, 19 Aug 2026: baby photograph on the front, tap it, the photograph of
   the actual piece laid out opens behind. */
.piece__img--tappable { cursor:zoom-in; position:relative; }
.piece__img--tappable:focus-visible { outline:2px solid var(--clay); outline-offset:3px; }
.piece__img--tappable::after {
  content:"Tap to see the piece"; position:absolute; left:0; right:0; bottom:0;
  padding:.5rem .7rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:linear-gradient(to top, rgba(11,42,39,.78), rgba(11,42,39,0));
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.piece__img--tappable:hover::after, .piece__img--tappable:focus-visible::after { opacity:1; }
@media (hover:none) { .piece__img--tappable::after { opacity:1; } }

.piece__worn-flag {
  display:inline-block; margin:0 0 .35rem; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:#7c8a86;
}

body.has-piece-view { overflow:hidden; }
.piece-view { position:fixed; inset:0; z-index:120; display:none; }
.piece-view.is-open { display:block; }
.piece-view__backdrop { position:absolute; inset:0; background:rgba(11,42,39,.86); }
.piece-view__panel {
  position:relative; margin:min(6vh,3rem) auto; max-width:min(760px,92vw);
  max-height:88vh; overflow:auto; background:#fbf7ef; border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.piece-view__img { display:block; width:100%; height:auto; }
.piece-view__body { padding:1.1rem 1.3rem 1.4rem; }
.piece-view__body h3 { margin:0 0 .35rem; font-size:1.22rem; }
.piece-view__note { margin:0; color:#4e5c58; font-size:.9rem; }
.piece-view__close {
  position:absolute; top:.4rem; right:.6rem; z-index:2; width:2.1rem; height:2.1rem;
  font-size:1.6rem; line-height:1; color:#0b2a27; background:rgba(251,247,239,.9);
  border:0; border-radius:50%; cursor:pointer;
}
.piece-view__close:focus-visible { outline:2px solid var(--clay); outline-offset:2px; }

/* ===========================================================================
   ANTHONY, 19 Aug 2026 evening. Three things, in his words.

   1. "the corner piece up there to be bigger so that that knows that that's
      the name of our website"  -> the emblem plus SHELTERED WATER plus the te
      reo becomes the biggest thing on the page, still anchored in its corner.
   2. "made once by hand for someone small is smaller ... I don't want it to be
      the heading"  -> the hero line drops below the wordmark in size.
   3. "those buttons up the top ... I want them to be white ... The black
      doesn't show out on some pages."  -> white nav on every page. White on
      the old cream header would have been invisible, so the scrolled header is
      now deep teal. One header, one colour, legible everywhere.
   =========================================================================== */

/* --- 1. the wordmark becomes the masthead --- */
.site-header .mark {
  width:clamp(3.3rem,8.8vw,5.2rem) !important;
  height:clamp(3.3rem,8.8vw,5.2rem) !important;
}
.wordmark__main { font-size:clamp(2.4rem,6.1vw,4.4rem) !important; line-height:.94; }
.wordmark__sub  { font-size:clamp(.94rem,2.35vw,1.42rem) !important; margin-top:.42rem; }
/* the te reo stays the same size in both places, asked for twice */
.home-hero .eyebrow, .inner-hero .eyebrow { font-size:clamp(.94rem,2.35vw,1.42rem) !important; }
.site-nav { min-height:clamp(118px,13vw,168px) !important; }
@media (max-width:720px) { .site-nav { min-height:clamp(96px,22vw,128px) !important; } }

/* --- 2. the hero line is no longer the heading --- */
.home-hero h1 { font-size:clamp(1.75rem,3vw,2.85rem) !important; max-width:18ch; margin-bottom:1.15rem; }
@media (max-width:720px) { .home-hero h1 { font-size:clamp(1.5rem,6.4vw,2.1rem) !important; max-width:20ch; } }

/* --- 3. white nav on every page, so the header goes dark when it solidifies --- */
.site-header--solid {
  background:rgba(11,42,39,.95) !important;
  border-bottom-color:rgba(255,255,255,.16) !important;
}
.site-header--solid .wordmark__main { color:#fff !important; }
.site-header--solid .wordmark__sub  { color:var(--tam-red-light) !important; }
.site-header--solid .mark           { color:rgba(255,255,255,.92) !important; }
.site-header--solid .nav-links a {
  color:#fff !important;
  background:transparent !important;
  border-color:rgba(255,255,255,.34) !important;
}
.site-header--solid .nav-links a:hover,
.site-header--solid .nav-links a.active,
.site-header--solid .nav-links a[aria-current="page"] { color:#f2d59c !important; border-color:#f2d59c !important; }
.site-header--solid .nav-toggle { color:#fff !important; border-color:rgba(255,255,255,.45) !important; }

/* the non-overlay default header, used before any scroll on inner pages */
.site-header { background:rgba(11,42,39,.95); border-bottom-color:rgba(255,255,255,.16); }
.site-header .wordmark__main { color:#fff; }
.site-header .wordmark__sub  { color:var(--tam-red-light); }
.site-header .mark { color:rgba(255,255,255,.92); }
.site-header .nav-links a { color:#fff; border-color:rgba(255,255,255,.34); }
.site-header .nav-links a:hover,
.site-header .nav-links a.active { color:#f2d59c; border-color:#f2d59c; }

/* Karen's band starts BELOW the masthead now that the masthead is bigger.
   Anthony: "it starts down a bit further so it still looks the same fading out
   underneath and fading out at the bottom of the page."
   Tied to the header height the site already measures, so it stays correct if
   the header ever changes size again. */
.home-hero::before, .inner-hero::before {
  top:calc(var(--header-h, 130px) + 1.1rem) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 62%,transparent 97%) !important;
          mask-image:linear-gradient(to bottom,transparent 0,#000 10%,#000 62%,transparent 97%) !important;
}

/* ===========================================================================
   19 Aug 2026, evening, after Anthony looked at it.
   "go another size bigger again just a little bit more"  -> wordmark up again.
   "I want them to be white ... The black doesn't show out on some pages"
   -> this beats the earlier FINAL BLOCK, which forced the nav to #000 with a
   white halo. Same specificity, later in the file, so this one wins.
   The watermark position he approved is untouched.
   =========================================================================== */

/* wordmark up another step */
.site-header .mark {
  width:clamp(3.9rem,10.4vw,6.2rem) !important;
  height:clamp(3.9rem,10.4vw,6.2rem) !important;
}
.wordmark__main { font-size:clamp(2.85rem,7.3vw,5.3rem) !important; }
.wordmark__sub  { font-size:clamp(1.05rem,2.7vw,1.6rem) !important; }
.home-hero .eyebrow, .inner-hero .eyebrow { font-size:clamp(1.05rem,2.7vw,1.6rem) !important; }
.site-nav { min-height:clamp(134px,15vw,192px) !important; }
@media (max-width:720px) { .site-nav { min-height:clamp(104px,24vw,142px) !important; } }

/* WHITE NAV, both header states. A soft dark halo carries white over the
   lighter parts of the hero photographs without looking heavy. */
.has-overlay-header .site-header .nav-links a,
.site-header .nav-links a {
  color:#fff !important;
  text-shadow:0 1px 3px rgba(6,34,35,.55), 0 0 10px rgba(6,34,35,.35) !important;
}
.has-overlay-header .site-header .nav-links a:hover,
.site-header .nav-links a:hover { color:#f2d59c !important; }
.has-overlay-header .site-header .nav-links a.active,
.has-overlay-header .site-header .nav-links a[aria-current="page"],
.site-header .nav-links a.active,
.site-header .nav-links a[aria-current="page"] {
  color:#fff !important;
  text-decoration:underline !important; text-decoration-thickness:1.5px !important;
  text-underline-offset:.55rem !important; text-decoration-color:#fff !important;
}
/* scrolled header is deep teal now, so white sits on it cleanly, no halo needed */
.site-header--solid .nav-links a { color:#fff !important; text-shadow:none !important; }
.site-header--solid .nav-links a:hover { color:#f2d59c !important; }
.site-header--solid .nav-links a.active,
.site-header--solid .nav-links a[aria-current="page"] {
  color:#fff !important; text-decoration-color:#fff !important;
}

/* Anthony, 19 Aug evening: the red te reo line under the masthead should read as
   small type sitting beneath the heading, the same optical size as the letters in
   "Karen knits and crochets every piece herself at home in Robina".
   That body line is 18.9px lowercase. The red line is UPPERCASE with heavy weight
   and wide tracking, so at the same number it reads much larger. Set to about 13px
   so the red capitals match the body letters by eye, not by number.
   NOTE: this deliberately breaks the earlier "te reo matched in both places" rule
   for the HERO only. The masthead te reo is unchanged. This is his later call. */
.home-hero .eyebrow, .inner-hero .eyebrow {
  font-size:clamp(.8rem,1.74vw,.95rem) !important;
  font-weight:800 !important;
  letter-spacing:.15em !important;
}

/* ===========================================================================
   Karen's band, aligned dead centre under the three waves. 19 Aug 2026.

   The old rule placed the band's LEFT EDGE near the emblem's centre, using half
   of clamp(2.4rem,12vw,3.25rem) -- the emblem's size BEFORE it was enlarged this
   evening. The emblem grew, the band did not follow, so it hung off to the right.

   Both now read the same variable, so if the logo is ever resized again the band
   follows it automatically and this cannot drift apart a second time.
   =========================================================================== */
:root {
  --mark-w: clamp(3.9rem,10.4vw,6.2rem);   /* the three waves */
  --band-w: clamp(62px,6.4vw,96px);         /* her taniko band. THIS is the width that was
                                              actually in force before tonight. An earlier,
                                              superseded block said 170-285px and I used that
                                              by mistake, which made it three times too wide. */
}
.site-header .mark { width:var(--mark-w) !important; height:var(--mark-w) !important; }

/* centre line of the band == centre line of the emblem, on every page that has it */
body.band-b .home-hero::before,
body.band-b .inner-hero::before {
  display:block;
  width:var(--band-w) !important;
  left:max(0.5rem, calc(max(1.5rem, (100% - var(--shell)) / 2) + (var(--mark-w) / 2) - (var(--band-w) / 2))) !important;
}
@media (max-width:720px) {
  /* no room for a gutter on a phone: band off, her colour hairline stays */
  body.band-b .home-hero::before, body.band-b .inner-hero::before { display:none !important; }
}

/* the card that points at it from the writing page */
.piece-link {
  display:block; margin:2rem 0 0; padding:1.5rem 1.6rem;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);
  color:inherit; text-decoration:none; transition:background .18s ease, border-color .18s ease;
}
.piece-link:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.42); }
.piece-link__label { display:block; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--tam-red-light); }
.piece-link__title { display:block; margin:.5rem 0 .45rem; font-family:var(--serif); font-size:1.7rem; line-height:1.15; }
.piece-link__note  { display:block; color:rgba(255,255,255,.82); font-size:.95rem; line-height:1.5; }
.piece-link__go    { display:inline-block; margin-top:.9rem; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:.15rem; }

/* ===========================================================================
   TĒPANE'S STORY. Set like a piece of writing, not a document.

   He writes in beats. Whole paragraphs that are four words long, landing one
   after another like footsteps. Standard paragraph spacing pulls those apart
   and kills the rhythm, so short single-line paragraphs are tightened and the
   full ones keep their air. The te reo lines are the spine of the piece and
   get the width of the page to themselves.
   =========================================================================== */

.story-hero h1 { max-width:16ch; line-height:1.02; letter-spacing:-.015em; }
.story-standfirst {
  max-width:34ch; margin-top:1.2rem; color:rgba(255,255,255,.92);
  font-family:var(--serif); font-size:clamp(1.05rem,1.9vw,1.35rem); font-style:italic; line-height:1.5;
}

.story-section { padding-block:clamp(3rem,6vw,5.5rem); }
.story-shell { max-width:41rem; }

.story-byline { margin:0 0 3rem; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.story-byline__name {
  margin:0; font-family:var(--serif); font-size:1.5rem; line-height:1.2; color:var(--deep);
}
.story-byline__name span {
  display:inline-block; margin-left:.55rem; color:var(--tam-red-deep);
  font-family:inherit; font-size:1.06rem; font-style:italic;
}
.story-byline__meta { margin:.5rem 0 0; color:#6b7975; font-size:.84rem; letter-spacing:.02em; }

.story-copy { color:#233029; font-size:1.18rem; line-height:1.82; }
.story-copy p { margin:0 0 1.35rem; text-wrap:pretty; }

/* the beats: short single lines that should read as steps, not paragraphs */
.story-copy p.beat { margin-bottom:.5rem; }
.story-copy p.beat + p:not(.beat) { margin-top:1.35rem; }

/* the opening line, given a drop cap */
.story-copy p.opener { margin-bottom:1.6rem; }
.story-copy p.opener::first-letter {
  float:left; margin:.06em .09em -.02em 0;
  font-family:var(--serif); font-size:4.1em; line-height:.78; font-weight:600;
  color:var(--tam-red-deep);
}

.story-copy em { font-style:italic; }
.story-copy strong { font-weight:650; }
.story-copy .rule { margin:2.6rem auto; width:44%; border:0; border-top:1px solid var(--line); }

/* the te reo, given the page */
.reo-block {
  margin:2.6rem 0; padding:1.5rem 0 1.4rem;
  border-top:1px solid rgba(198,74,55,.28); border-bottom:1px solid rgba(198,74,55,.28);
  text-align:center;
}
.reo-block .reo {
  margin:0; color:var(--tam-red-deep);
  font-family:var(--serif); font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:500;
  line-height:1.35; letter-spacing:.005em;
}
.reo-block .reo-en {
  margin:.55rem 0 0; color:#6b7975;
  font-size:.98rem; font-style:italic; letter-spacing:.01em;
}

.story-end { margin:2.8rem 0 0; color:var(--clay); font-size:.9rem; text-align:center; }

.story-foot { margin-top:3.4rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.story-foot p { margin:0 0 1.1rem; color:#6b7975; font-size:.95rem; font-style:italic; }

@media (max-width:720px) {
  .story-copy { font-size:1.09rem; line-height:1.76; }
  .story-copy p.opener::first-letter { font-size:3.5em; }
  .reo-block { margin:2rem 0; }
}

/* ===========================================================================
   THE SHOP HERO. Anthony, 19 Aug 2026: "find one a beautiful one with a mother
   and child ... dressed in mum's clothes ... creates the essence in the beauty
   of what Mum has created while it is being worn."

   Chosen: a mother and her daughter crouched in a daisy meadow at sunset,
   picking a flower together, both in Karen's matching cream ribbed pompom
   beanies. It is her work being worn, between two generations, which is the
   whole point of the shop.

   The photograph is PORTRAIT, so the framing is deliberate: pushed right so the
   two of them clear the text, and held high enough that both faces and both
   beanies stay in the band. Do not change this to "center" or you lose the faces.
   =========================================================================== */
.inner-hero--shop {
  background:
    linear-gradient(94deg, rgba(6,34,35,.93) 0%, rgba(6,34,35,.72) 34%, rgba(6,34,35,.18) 64%, rgba(6,34,35,.06) 100%),
    url("images/worn/hero-shop-daisy-meadow.jpg") 72% 30% / cover !important;
}
@media (max-width:900px) {
  .inner-hero--shop {
    background:
      linear-gradient(178deg, rgba(6,34,35,.32) 0%, rgba(6,34,35,.78) 58%, rgba(6,34,35,.93) 100%),
      url("images/worn/hero-shop-daisy-meadow.jpg") 62% 22% / cover !important;
  }
}

.section--tight { padding-block:clamp(1.6rem,3vw,2.4rem) 0; }

/* ===========================================================================
   HERO SWAP, 19 Aug 2026. Anthony: "swap the hero page from the Home to our
   story those two hero pages."
   Home now carries the Marlborough photograph. Our Story now carries the ferry.
   Framing set per image, not inherited, because the two crop differently.
   =========================================================================== */
.home-hero {
  background:
    linear-gradient(90deg, rgba(6,34,35,.88), rgba(6,34,35,.15)),
    url("images/marlborough-story.jpg") center 52% / cover var(--deep) !important;
}
@media (max-width:720px) {
  .home-hero {
    background:
      linear-gradient(180deg, rgba(6,34,35,.28), rgba(6,34,35,.87) 76%),
      url("images/marlborough-story.jpg") center 46% / cover !important;
  }
}
.inner-hero--story {
  background:
    linear-gradient(90deg, rgba(6,34,35,.94), rgba(6,34,35,.52)),
    url("images/ferry-hero.jpg") center 46% / cover !important;
}

/* ===========================================================================
   THE MAKERS HERO. 19 Aug 2026.
   The whole whanau at Waikawa marina, Picton, March 2024, at sunset. Three
   generations, real people, in the water the shop is named for. It replaces a
   photograph of booties, which was never going to say "the people behind this".

   Framing: the group sits right of centre in this frame, which is why this
   frame was chosen over the one taken seconds earlier. Held left-of-centre and
   high so faces stay in the band and the heading sits over the deck and the
   water, not over anybody's face. Do not centre it.
   =========================================================================== */
.inner-hero--makers {
  background:
    linear-gradient(92deg, rgba(6,34,35,.94) 0%, rgba(6,34,35,.74) 30%, rgba(6,34,35,.28) 58%, rgba(6,34,35,.10) 100%),
    url("images/family/whanau-waikawa-2024.jpg") 34% 42% / cover !important;
}
@media (max-width:900px) {
  .inner-hero--makers {
    background:
      linear-gradient(180deg, rgba(6,34,35,.30) 0%, rgba(6,34,35,.80) 60%, rgba(6,34,35,.94) 100%),
      url("images/family/whanau-waikawa-2024.jpg") 48% 38% / cover !important;
  }
}

/* ===========================================================================
   CONTACT: the three of them. 19 Aug 2026.
   Karen first and given the visual weight, because she is the maker. Her sons
   sit alongside, not above. Facebook and Instagram are present but honestly
   marked as not live, because a button that reaches nobody is worse than none.
   =========================================================================== */
.reach { margin-top:2.6rem; }
.reach__intro { max-width:52ch; margin-bottom:2.2rem; }
.reach__intro h2 { margin:.35rem 0 .7rem; }

.reach__grid { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }

.person {
  padding:1.6rem 1.5rem 1.5rem; background:#fff;
  border:1px solid var(--line); border-top:3px solid rgba(23,53,47,.22);
}
.person--maker { border-top-color:var(--tam-red-deep); background:rgba(198,74,55,.045); }
.person__role {
  margin:0 0 .5rem; color:var(--tam-red-deep);
  font-size:.66rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
}
.person h3 { margin:0 0 .55rem; font-size:1.55rem; line-height:1.1; }
.person__also {
  display:inline-block; margin-left:.4rem; color:var(--tam-red-deep);
  font-size:1.02rem; font-style:italic; font-weight:400;
}
.person__line { margin:0 0 1.15rem; color:#4e5c58; font-size:.94rem; line-height:1.55; }

.person__actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.btn-reach {
  display:inline-flex; align-items:center; gap:.4rem; min-height:40px;
  padding:.5rem .95rem; font-size:.7rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
}
.btn-reach--mail {
  color:#fff; background:var(--deep); border:1px solid var(--deep);
  transition:background .16s ease;
}
.btn-reach--mail:hover { background:#0b2a27; }
.btn-reach--soon {
  color:#8a9793; background:transparent; border:1px dashed rgba(23,53,47,.3); cursor:default;
}
.btn-reach--soon em {
  font-style:normal; font-size:.62rem; letter-spacing:.1em; opacity:.75;
}
@media (max-width:520px) { .btn-reach { flex:1 1 100%; justify-content:center; } }

/* Their own social links on the makers cards. Only handles verified in the
   Empire records are used. Nothing was guessed. 19 Aug 2026. */
.maker-social { display:flex; flex-wrap:wrap; gap:.55rem; margin:.85rem 0 1.1rem; padding:0; list-style:none; }
.maker-social a {
  display:inline-flex; align-items:center; min-height:36px; padding:.34rem .8rem;
  border:1px solid var(--line); border-radius:2px;
  color:var(--deep); font-size:.72rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; text-decoration:none;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.maker-social a:hover { color:#fff; background:var(--deep); border-color:var(--deep); }

/* Real social links on the contact cards, replacing the "coming" placeholders
   where a verified account exists. Karen has no Instagram on record, so hers
   stays a placeholder rather than pointing somewhere invented. 19 Aug 2026. */
.btn-reach--social { text-decoration:none; }

/* ===========================================================================
   THE LINE, IN ORDER. Joe Timms to Karen. 19 Aug 2026.

   The spine is the point. One vertical rule running the whole way down, in her
   taniko red, because the story the page tells is that a knitted garment is one
   strand from beginning to end and so is a family. The years sit on the spine.
   Photographs are set as archival plates on a cream mount, credited, so a
   hundred year old halftone reads as a document rather than as decoration.
   =========================================================================== */
.timeline-section { padding-block:clamp(3rem,6vw,5.5rem); }
.timeline-heading { max-width:46rem; margin-bottom:clamp(2.4rem,5vw,3.6rem); }
.timeline-heading h2 { margin:.3rem 0 .8rem; }

.timeline { position:relative; margin:0; padding:0 0 0 clamp(3.6rem,8vw,6.5rem); list-style:none; }
.timeline::before {
  content:""; position:absolute; top:.6rem; bottom:2.5rem;
  left:clamp(2.15rem,4.9vw,4rem); width:1px;
  background:linear-gradient(to bottom, transparent, rgba(198,74,55,.42) 6%, rgba(198,74,55,.42) 88%, transparent);
}

.tl { position:relative; padding-bottom:clamp(2.4rem,4.4vw,3.4rem); }
.tl:last-child { padding-bottom:0; }
.tl__year {
  position:absolute; left:calc(-1 * clamp(3.6rem,8vw,6.5rem)); top:.1rem;
  width:clamp(3rem,6.4vw,5.2rem); text-align:right;
  color:var(--tam-red-deep); font-family:var(--serif);
  font-size:clamp(.92rem,1.6vw,1.12rem); font-weight:600; letter-spacing:.01em; line-height:1.3;
}
/* the node on the spine */
.tl::before {
  content:""; position:absolute; top:.52rem;
  left:calc(-1 * clamp(1.45rem,3.1vw,2.5rem));
  width:9px; height:9px; border-radius:50%;
  background:var(--cream,#faf7f2); border:1.5px solid var(--tam-red-deep);
}
.tl--now::before { background:var(--tam-red-deep); }
.tl--quote::before { display:none; }

.tl__body h3 { margin:0 0 .5rem; font-size:clamp(1.2rem,2.1vw,1.5rem); line-height:1.2; }
.tl__body p { margin:0 0 .8rem; color:#3d4a45; font-size:1.02rem; line-height:1.7; max-width:38rem; }
.tl__quiet { color:#6b7975 !important; font-style:italic; }

/* Joe in his own voice */
.tl-quote { margin:.4rem 0 0; padding:0 0 0 1.3rem; border-left:2px solid rgba(198,74,55,.45); max-width:38rem; }
.tl-quote p {
  margin:0 0 .7rem; color:var(--deep) !important;
  font-family:var(--serif); font-size:clamp(1.06rem,1.9vw,1.24rem); font-style:italic; line-height:1.62;
}
.tl-quote cite {
  display:block; color:var(--tam-red-deep); font-size:.72rem; font-style:normal;
  font-weight:800; letter-spacing:.15em; text-transform:uppercase;
}

/* archival plates */
.plate { margin:1.4rem 0 0; padding:.85rem .85rem .1rem; background:#fbf7ef; border:1px solid var(--line); max-width:34rem; }
.plate--wide { max-width:42rem; }
.plate img { display:block; width:100%; height:auto; }
.plate figcaption { padding:.7rem .1rem .8rem; line-height:1.45; }
.plate__cap { color:var(--deep); font-size:.86rem; font-weight:650; }
.plate__cred {
  display:block; margin-top:.2rem; color:var(--tam-red-deep);
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}

.timeline-note {
  max-width:44rem; margin:clamp(2.4rem,5vw,3.4rem) 0 0;
  padding-top:1.3rem; border-top:1px solid var(--line);
  color:#6b7975; font-size:.88rem; line-height:1.6;
}

@media (max-width:640px) {
  .timeline { padding-left:2.9rem; }
  .timeline::before { left:.55rem; }
  .tl__year {
    position:static; width:auto; text-align:left; margin-bottom:.3rem;
    font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  }
  .tl::before { left:-2.35rem; top:.35rem; }
  .plate { padding:.6rem .6rem .1rem; }
}

/* Photograph credits. Naming who took a picture is how the whakapapa works,
   and it is also what separates honouring a family record from helping
   yourself to someone else's work. 19 Aug 2026, Anthony's call. */
.photo-credit {
  margin:.7rem 0 0; color:#7c8a86; font-size:.78rem; line-height:1.5; letter-spacing:.01em;
}
.photo-credit cite { font-style:italic; }

/* ===========================================================================
   ANCHOR LANDING. 20 Aug 2026.
   The header is position:sticky and about 193px tall on desktop. Any in-page
   link (#karen-story and every other one) was scrolling the target underneath
   it, so a tap on "her story" appeared to land on the section above it.
   scroll-padding-top on the root fixes every anchor on every page at once.
   Appended at the end of the file deliberately: the block commented
   "FINAL BLOCK. Must stay last" at line 595 has not been last since 18 Aug.
   =========================================================================== */
html { scroll-padding-top: 210px; }
@media (max-width: 900px) { html { scroll-padding-top: 150px; } }
@media (max-width: 620px) { html { scroll-padding-top: 120px; } }

/* ===========================================================================
   TIMELINE YEARS. 20 Aug 2026, Anthony on screen.
   The year labels were right-aligned to a column that ended 19px PAST the
   spine, so every year sat on top of its own dot and you could not read
   either. Years now get their own column on the far left, and the dot sits
   clear to their right, centred on the spine.
   Three variables so the three pieces can never drift apart again.
   Appended at the end on purpose: it must beat the block at 1216 and the
   block commented "FINAL BLOCK" at 595, which has not been last since 18 Aug.
   =========================================================================== */
.timeline {
  --tl-pad:    clamp(5.5rem, 10vw,  9rem);
  --tl-spine:  clamp(4.2rem, 7.4vw, 6.75rem);
  --tl-year-w: clamp(3.4rem, 5.6vw, 5.25rem);
  padding-left: var(--tl-pad);
}
.timeline::before { left: var(--tl-spine); }
.tl__year {
  left: calc(-1 * var(--tl-pad));
  width: var(--tl-year-w);
  text-align: right;
}
.tl::before { left: calc(var(--tl-spine) - var(--tl-pad) - 4px); }

/* .story-cta holds one or two buttons under a block of copy. 20 Aug 2026. */
.story-cta { display:flex; flex-wrap:wrap; gap:.7rem; margin:2rem 0 0; }

/* ===========================================================================
   THE STORY TIMELINE, WITH ITS PHOTOGRAPHS. 20 Aug 2026.
   Anthony: "so they can look and read and look and read and learn at the same
   time", and "smaller photographs we can tap onto them to see the bigger
   photograph". Photographs sit in their own narrow column beside the passage
   they belong to, and open full size on tap.
   Appended at the end deliberately. See the note on the FINAL BLOCK at 595.
   =========================================================================== */

.tl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: start;
}
.tl__body { grid-column: 1; min-width: 0; }
.tl__figs {
  grid-column: 2;
  display: flex; flex-direction: column; gap: .9rem;
  width: clamp(9rem, 15vw, 13.5rem);
}

.tl-fig { margin: 0; cursor: zoom-in; }
.tl-fig img {
  display: block; width: 100%; height: auto;
  background: #fbf7ef;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(9, 26, 24, .10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tl-fig:hover img, .tl-fig:focus-visible img {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(9, 26, 24, .20);
}
.tl-fig:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.tl-fig figcaption {
  margin-top: .45rem;
  color: #7c8a86; font-size: .7rem; line-height: 1.45; letter-spacing: .01em;
}
/* the affordance: say it is tappable, once, at the top of the column */
.tl__figs::before {
  content: "Tap to enlarge";
  color: var(--tam-red-deep); font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}

/* the milestone entry gets a filled node, already defined, plus a little air */
.tl--now { padding-top: .6rem; }

@media (max-width: 900px) {
  .tl { grid-template-columns: 1fr; }
  .tl__body, .tl__figs { grid-column: 1; }
  .tl__figs {
    width: 100%;
    flex-direction: row; flex-wrap: wrap;
    margin-top: 1.1rem;
  }
  .tl__figs .tl-fig { flex: 1 1 8rem; max-width: 12rem; }
  .tl__figs::before { flex: 1 0 100%; }
}

/* ===========================================================================
   BIRTHS AND DEATHS ON THE LINE. 20 Aug 2026, Anthony's instruction.
   A life event reads differently from an event. The node is filled rather
   than hollow, and the heading is set in the serif italic, so you can run
   your eye down the line and see the people arriving and leaving.
   =========================================================================== */
.tl--life::before { background: var(--tam-red-deep); }
.tl--life .tl__body h3 {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  color: var(--tam-red-deep);
}
.tl--life .tl__year { font-weight: 700; }

/* the closing acknowledgement, everyone not named */
.tl-closing {
  max-width: 44rem; margin: clamp(2.6rem,5vw,4rem) 0 0;
  padding: clamp(1.6rem,3vw,2.4rem) clamp(1.5rem,3vw,2.6rem);
  background: #f3ece0;
  border-left: 3px solid var(--tam-red-deep);
}
.tl-closing h3 {
  margin: 0 0 1rem; font-size: clamp(1.25rem,2.3vw,1.6rem);
  line-height: 1.2; color: var(--deep);
}
.tl-closing p { margin: 0 0 .9rem; color: #3d4a45; font-size: 1.02rem; line-height: 1.75; }
.tl-closing p:last-child { margin-bottom: 0; }
.tl-closing em { font-style: italic; }

/* the line ends pointing forward. 20 Aug 2026. */
.tl--next::before { background: var(--tam-red-deep); box-shadow: 0 0 0 4px rgba(198,74,55,.16); }
.tl--next .tl__year { color: var(--tam-red-deep); font-weight: 800; letter-spacing: .06em; }
.tl--next .tl__body h3 { color: var(--tam-red-deep); }
.tl--next .tl__body p:last-child {
  margin-top: .2rem; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem,2vw,1.3rem); color: var(--deep);
}

/* ===========================================================================
   THE ENLARGED PHOTOGRAPH MUST FIT THE SCREEN. 20 Aug 2026.
   Anthony: "bigger photos that take up the whole page but not bigger than the
   whole page." The overlay panel now never exceeds the viewport, and the image
   inside it scales to whatever room is left after the caption.
   =========================================================================== */
.piece-view__panel {
  max-width: min(94vw, 1100px);
  max-height: 92svh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.piece-view__img {
  flex: 1 1 auto; min-height: 0;
  width: 100%; height: auto;
  max-height: 100%;
  object-fit: contain;
  background: #0b2a27;
}
.piece-view__body { flex: 0 0 auto; }

/* every product card the same height, whatever its text. 20 Aug 2026. */
.piece-grid { grid-auto-rows: 1fr; align-items: stretch; }
.piece-grid > .piece { height: 100%; display: flex; flex-direction: column; }

/* ===========================================================================
   TEPANE'S NAME, BIGGER. 20 Aug 2026, Anthony's instruction.
   "his name needs to be bigger at the start of the actual story... both his
   name and the Maori translation of his name next to it."
   Appended at the end deliberately: the "FINAL BLOCK" comment at line 595 has
   not been last since 18 Aug. Only rules on .story-byline__name are at 998
   and 1001; this overrides both.
   =========================================================================== */
.story-byline__name {
  font-size: clamp(2.1rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.012em;
}
.story-byline__name span {
  margin-left: .7rem;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
@media (max-width: 640px) {
  .story-byline__name span { display: block; margin-left: 0; margin-top: .25rem; }
}

/* ===========================================================================
   TE WHARE TAPA WHA behind Tepane's story. 20 Aug 2026, Anthony's instruction.
   "a watermark behind the writing that stayed behind the writing... the
   watermark stays there and the words scroll over the top of it."
   The house is FIXED to the screen, so the story slides over it.
   Karen's taniko band runs down the side, aligned to the same centre line as
   the emblem, exactly like the hero band.
   Scoped to body.whare, which only Tepane's story page carries.
   LOCKED FAINT 20 Aug 2026. Anthony compared both on screen and chose this one.
   The ?whare=strong switch and its two rules have been removed. The heavier
   version was opacity .17 on the house and .26 on the band if it is ever wanted back.
   Appended at the end. The "FINAL BLOCK" comment at line 595 is not last.
   =========================================================================== */
.whare-mark { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* The house itself, sat in a box that starts BELOW the sticky header, so the
   peak is never cut off by it. 20 Aug 2026: Anthony asked for the whole house
   moved down a touch because the tip went in behind the header.
   The header measured 193px tall at 1280 wide, so the box starts at 14rem.
   background-size:contain means the house can never outgrow its box, at any
   screen size, so the peak and the whenua line always both show. */
.whare-mark::after {
  content:""; position:absolute;
  top:14rem; bottom:3.5rem;
  left:max(6%, calc((100% - 44rem) / 2));
  right:max(6%, calc((100% - 44rem) / 2));
  background-image:url("images/mark/whare-tapa-wha.svg");
  background-repeat:no-repeat; background-position:center center;
  background-size:contain;
  opacity:.075;
}

/* Karen's band down the side. Her PNG is white, so it is inverted to ink for
   the cream page. Same left-offset maths as the hero band at line 959. */
.whare-mark::before {
  content:""; position:absolute; top:0; bottom:0;
  width:var(--band-w);
  left:max(0.5rem, calc(max(1.5rem, (100% - var(--shell)) / 2) + (var(--mark-w) / 2) - (var(--band-w) / 2)));
  background-image:url("images/pattern/karen-band-white.png");
  background-repeat:repeat-y; background-position:top center; background-size:100% auto;
  filter:invert(1); opacity:.14;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 88%,transparent 100%);
}

/* the real page sits above the watermark. Scoped, so no other page moves.
   [data-site-header] is deliberately NOT in this list. Putting z-index:1 on the
   header wrapper made a new stacking context and trapped .site-header's own
   z-index:40 inside it, so main painted straight over the header. Verified by
   render 20 Aug. The header is sticky at z-index 40 already, which beats the
   watermark's 0 on its own. Do not add it back. */
body.whare .preview-bar,
body.whare main,
body.whare [data-site-footer] { position:relative; z-index:1; }

@media (max-width:720px) {
  /* no gutter on a phone: band off, house stays. Smaller header on a phone,
     so the box can start higher and use more of the width. */
  .whare-mark::before { display:none; }
  .whare-mark::after { top:9rem; bottom:2.5rem; left:4%; right:4%; }
}

/* ===========================================================================
   THE WHAKAPAPA PAGE. 20 Aug 2026, Anthony's instruction: "I want this whole
   family tree that we are developing to look like the webpage in the way that
   it sits out in the colours etc. And so on the watermarking etc."
   The hero uses Karen's own handwriting, the same photograph the Our Story
   whakapapa band already uses. band-b is on the body, and this variant is
   deliberately NOT in the display:none list at line 678, so her taniko band
   runs down the side exactly as it does on the home page.
   Appended at the end. The "FINAL BLOCK" comment at line 595 is not last.
   =========================================================================== */
.inner-hero--whakapapa {
  background:
    linear-gradient(90deg, rgba(6,34,35,.97), rgba(6,34,35,.80) 58%, rgba(6,34,35,.66)),
    url("images/pattern/whakapapa-hand.jpg") center 22% / cover;
}

/* ===========================================================================
   TEPANE'S PICTURE BESIDE HIS NAME. Writing page only, 20 Aug 2026.
   Anthony's instruction: "the photo that he's using for his Facebook profile
   ... make it into a picture book size to take up the spot next to where his
   name and the writing about Steve and what he's doing is ... there's an
   empty square there and that's where we want to fill with that picture."
   Measured before building: at 1280px the words stop at 605px inside a
   1180px shell, so the right half of that dark section was genuinely empty.
   .split already exists at line 104 and collapses to one column at 980px,
   so this only overrides the vertical alignment: the picture sits level with
   the top of his name rather than floating in the middle of the text.
   Appended at the end. The "FINAL BLOCK" comment at line 595 is not last.
   =========================================================================== */
.split--tepane { align-items:start; gap:clamp(2rem,5vw,4.5rem); margin-bottom:2.5rem; }
.split--tepane .split__words > :last-child { margin-bottom:0; }
/* Cropped to 689x957, ratio 0.72. Anthony asked for a book cover shape, then
   looked at the true 0.625 book ratio and chose this wider cut, 20 Aug 2026,
   because 0.625 cut the face off the tupuna on the left. This keeps all three
   faces whole and still reads as a cover standing beside his name.
   max-width is 27.5rem, not 24rem, ON PURPOSE: a wider picture needs a wider
   box to finish at the same height as his writing. If the crop ever changes
   again, recalculate it. width = wanted height x (image width / image height).
   Other cuts kept on disk on both machines, swapping is one copy:
     steven-profile--bookcrop.jpg  598x957, the true book ratio
     steven-profile--square.jpg    960x957, the untouched original
     steven-profile--wider.jpg     689x957, what is live now */
.tepane-portrait { margin:0 auto; max-width:27.5rem; }
/* It carries .tl-fig as well, so it uses the timeline photographs' existing
   tap-to-enlarge instead of a second viewer being built. 20 Aug 2026, Anthony:
   "do the tap to open to full-size". data-full points at the UNCROPPED square,
   so the tap shows the whole picture, not a bigger version of the crop.
   .tl-fig img puts a cream border and a pale background behind timeline photos,
   which is right on the paper pages and wrong on this dark one. Both are
   switched off here. Do not delete those two lines thinking they do nothing. */
.tepane-portrait img {
  width:100%; height:auto; display:block;
  border:0; background:none;
  border-radius:.75rem;
  box-shadow:0 22px 50px rgba(0,0,0,.45);
}
.tepane-portrait:hover img, .tepane-portrait:focus-visible img {
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}
@media (max-width:980px) {
  .split--tepane { gap:2rem; }
  .tepane-portrait { max-width:26rem; margin:0 auto; }
}

/* ===========================================================================
   23 Aug 2026 — QA fixes from the frozen-tree desktop/390px pass.
   (1) PHONE HEADER: the masthead block above enlarges .wordmark__main with
       !important, and .wordmark is flex:0 0 auto, so below about 550px the
       lockup plus the 48px menu button no longer fit the header row. Measured
       at 390px: the button was squeezed to 22px and pushed to x 383-405,
       15px past the screen edge, so every page scrolled sideways; on a 320px
       phone the button left the screen entirely. Scale the lockup down on
       small screens, let it shrink, never let the button shrink or hang out.
   (2) TIMELINE YEARS ON PHONES: the variable-width year column block above
       overrides the 640px rule's width:auto, so the one ranged year
       "1911-13" wrapped onto two lines. Restore auto width, left alignment,
       and forbid wraps.
   Append-only per the standing styles.css rule. Both changes live inside
   media queries so desktop rendering is untouched. */
@media (max-width: 560px) {
  .site-nav .nav-toggle { flex-shrink: 0; }
  .site-nav .wordmark { flex: 0 1 auto; min-width: 0; }
  .wordmark svg { width: clamp(40px, 11vw, 52px); height: auto; }
  .wordmark__main { font-size: clamp(1.2rem, 6.4vw, 2.1rem) !important; }
  .wordmark__sub  { font-size: clamp(.62rem, 3.1vw, .92rem) !important; }
}
@media (max-width: 640px) {
  .tl__year { width: auto; text-align: left; white-space: nowrap; }
}

/* 23 Aug, Anthony's instruction for the 1916 whale photographs: Joe's wide
   landscape pictures were unreadable in the skinny side column. This modifier
   sits an entry's figures UNDER its writing, stacked one on top of the other,
   at the width of the text column, still tappable to enlarge. */
.tl__figs--under {
  grid-column: 1;
  width: 100%;
  max-width: 44rem;
  margin-top: 1.1rem;
  flex-direction: column;
}
.tl__figs--under .tl-fig { max-width: none; }
@media (max-width: 900px) {
  .tl__figs--under { flex-direction: column; }
  .tl__figs--under .tl-fig { flex: 1 1 auto; max-width: none; }
}