@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 enlarge"; 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__meta { margin:0 0 .45rem; color:#7c5b42; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.piece-view__detail { margin:0; color:#4e5c58; font-size:.96rem; }
.piece-view__price { margin:.75rem 0 0; color:var(--deep); font:700 1.18rem/1.2 var(--serif); }
.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; }

/* Whakapapa story index: these cards sit on a cream page, not a dark panel.
   Keep one high-contrast treatment at every width; only the column count changes. */
.story-index-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.15rem;
  margin-top:2.25rem;
}
.story-index-section .piece-link {
  min-height:18rem;
  display:flex;
  flex-direction:column;
  margin:0;
  padding:clamp(1.45rem,2.5vw,2rem);
  color:var(--deep);
  background:#fff;
  border:1px solid rgba(23,53,47,.18);
  border-top:4px solid var(--tam-red-deep);
  border-radius:.35rem;
  box-shadow:0 14px 34px rgba(13,41,37,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.story-index-section .piece-link:hover,
.story-index-section .piece-link:focus-visible {
  color:var(--deep);
  background:#fff;
  border-color:rgba(23,53,47,.32);
  border-top-color:var(--tam-red-deep);
  box-shadow:0 18px 42px rgba(13,41,37,.14);
  transform:translateY(-2px);
}
.story-index-section .piece-link__label {
  color:#8f2f26;
  font-size:.72rem;
  line-height:1.55;
}
.story-index-section .piece-link__title {
  color:var(--deep);
  font-size:clamp(1.75rem,2.5vw,2.2rem);
}
.story-index-section .piece-link__note {
  color:#344b46;
  font-size:1rem;
  line-height:1.65;
}
.story-index-section .piece-link__go {
  align-self:flex-start;
  margin-top:auto;
  padding-top:1.15rem;
  color:var(--deep);
}
.story-index-section .awaiting {
  max-width:none;
  margin-top:2.4rem;
  padding:clamp(1.5rem,3vw,2.1rem);
  color:#fff;
  background:var(--deep);
  border:0;
  border-left:5px solid var(--tam-red-light);
  border-radius:.3rem;
  box-shadow:0 14px 34px rgba(13,41,37,.12);
}
.story-index-section .awaiting__label {
  color:#f2d59c;
}
.story-index-section .awaiting p:last-child {
  max-width:58rem;
  color:rgba(255,255,255,.92);
  font-size:1rem;
  line-height:1.65;
}
@media (max-width:760px) {
  .story-index-grid { grid-template-columns:1fr; gap:1rem; margin-top:1.7rem; }
  .story-index-section .piece-link { min-height:0; padding:1.35rem 1.25rem 1.45rem; }
  .story-index-section .piece-link__title { font-size:1.8rem; }
  .story-index-section .piece-link__note { font-size:1rem; line-height:1.62; }
  .story-index-section .awaiting { margin-top:1.7rem; }
}

/* ===========================================================================
   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;
}

/* Mandi P Designs maker page. 5 Sep 2026. Uses Amanda's own photograph and
   keeps the established Sheltered Water hero treatment. */
.inner-hero--mandi {
  background:
    linear-gradient(90deg, rgba(6,34,35,.96) 0%, rgba(6,34,35,.78) 36%, rgba(6,34,35,.28) 70%, rgba(6,34,35,.08) 100%),
    url("images/mandi-p-designs/botanical-green-gold-white.jpg") 68% 43% / cover !important;
}
@media (max-width:900px) {
  .inner-hero--mandi {
    background:
      linear-gradient(180deg, rgba(6,34,35,.18) 0%, rgba(6,34,35,.68) 56%, rgba(6,34,35,.96) 100%),
      url("images/mandi-p-designs/botanical-green-gold-white.jpg") 50% 40% / cover !important;
  }
}

/* Tia's memory bears maker page. 26 Sep 2026. Uses her three memory bears in
   front of the toy box and keeps the established Sheltered Water hero treatment. */
.inner-hero--tia {
  background:
    linear-gradient(90deg, rgba(6,34,35,.96) 0%, rgba(6,34,35,.78) 36%, rgba(6,34,35,.28) 70%, rgba(6,34,35,.08) 100%),
    url("images/tia/three-memory-bears-toy-box.jpg") 60% 38% / cover !important;
}
@media (max-width:900px) {
  .inner-hero--tia {
    background:
      linear-gradient(180deg, rgba(6,34,35,.18) 0%, rgba(6,34,35,.68) 56%, rgba(6,34,35,.96) 100%),
      url("images/tia/three-memory-bears-toy-box.jpg") 50% 40% / 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; }
}

/* ===========================================================================
   SHELTERED WATER EDITORIAL REFRAME. 5 Sep 2026.

   Warm white is now the quiet gallery frame. Cream is retained only inside
   small tactile details. The desktop navigation is one floating green-black
   rail, and the Whakapapa index is built from the family's real photographs
   and source material instead of repeated white cards.
   =========================================================================== */
:root {
  --canvas:#fffefa;
  --paper:#ffffff;
  --cream:#f4efe6;
  --nav-ink:#061b19;
  --accent:#f2685a;
}

body { background:var(--canvas); }
.section--paper { background:#fff; }

@media (min-width:1281px) {
  .site-header .nav-links,
  .site-header--solid .nav-links {
    gap:.12rem;
    padding:.38rem;
    background:rgba(4,23,21,.94);
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
    box-shadow:0 12px 30px rgba(2,16,15,.32), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .has-overlay-header .site-header .nav-links a,
  .site-header .nav-links a,
  .site-header--solid .nav-links a {
    min-height:42px;
    padding:.58rem .78rem;
    color:rgba(255,255,255,.92) !important;
    background:transparent !important;
    border:0 !important;
    text-shadow:none !important;
    text-decoration:none !important;
  }
  .has-overlay-header .site-header .nav-links a:hover,
  .site-header .nav-links a:hover,
  .site-header--solid .nav-links a:hover {
    color:#fff !important;
    background:rgba(255,255,255,.1) !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"],
  .site-header--solid .nav-links a.active,
  .site-header--solid .nav-links a[aria-current="page"] {
    color:var(--nav-ink) !important;
    background:var(--accent) !important;
    text-decoration:none !important;
  }
}

@media (max-width:1280px) {
  /* A filtered header becomes the containing block for its fixed menu.
     Keep the phone panel fixed to the viewport, including after scrolling. */
  .site-header,
  .has-overlay-header .site-header,
  .site-header--solid {
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:background .28s ease, border-color .28s ease;
  }
  .site-header .nav-links,
  .site-header--solid .nav-links {
    position:fixed;
    inset:var(--nav-panel-top,122px) 0 0;
    display:none;
    grid-template-columns:minmax(0,1fr);
    justify-content:stretch;
    align-content:start;
    gap:.25rem;
    padding:1.1rem 1.5rem 2rem;
    overflow-y:auto;
    background:rgba(4,23,21,.985);
    border:0;
    border-top:1px solid rgba(255,255,255,.15);
    border-radius:0;
    box-shadow:0 28px 60px rgba(2,16,15,.38);
  }
  .menu-open .site-header .nav-links { display:grid; }
  .has-overlay-header .site-header .nav-links a,
  .site-header .nav-links a,
  .site-header--solid .nav-links a {
    min-height:54px;
    justify-content:flex-start;
    padding:.7rem 1rem;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    border-radius:.25rem;
    text-shadow:none !important;
    text-decoration:none !important;
    font-size:1rem;
  }
  .has-overlay-header .site-header .nav-links a:hover,
  .site-header .nav-links a:hover,
  .site-header--solid .nav-links a:hover { background:rgba(255,255,255,.1) !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"],
  .site-header--solid .nav-links a.active,
  .site-header--solid .nav-links a[aria-current="page"] {
    color:var(--nav-ink) !important;
    background:var(--accent) !important;
    text-decoration:none !important;
  }
}

.story-index-section { background:#fff; }
/* Long source URLs remain readable without widening phone story pages. */
.story-copy { overflow-wrap:anywhere; }
.story-index-grid {
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(.75rem,1.5vw,1.15rem);
  margin-top:2.5rem;
}
.story-index-section .story-tile {
  min-height:31rem;
  grid-column:span 4;
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  isolation:isolate;
  margin:0;
  padding:0;
  overflow:hidden;
  color:#fff;
  background:var(--deep);
  border:0;
  border-radius:.2rem;
  box-shadow:none;
  text-decoration:none;
  transform:none;
}
.story-index-section .story-tile--feature { min-height:38rem; grid-column:span 7; }
.story-index-section .story-tile--tall { min-height:38rem; grid-column:span 5; }
.story-index-section .story-tile--wide { min-height:33rem; grid-column:span 6; }
.story-tile__image,
.story-tile__shade { position:absolute; inset:0; width:100%; height:100%; }
.story-tile__image {
  z-index:-2;
  object-fit:cover;
  filter:saturate(.84) contrast(1.03);
  transition:transform .55s cubic-bezier(.2,.65,.25,1), filter .3s ease;
}
.story-tile__shade {
  z-index:-1;
  background:linear-gradient(180deg,rgba(4,22,20,.12) 0%,rgba(4,22,20,.45) 32%,rgba(4,22,20,.82) 58%,rgba(4,22,20,.98) 100%);
}
.story-tile__content {
  width:100%;
  display:block;
  padding:clamp(1.25rem,2.4vw,2rem);
}
.story-index-section .story-tile .piece-link__label {
  max-width:48rem;
  color:#ffb09d;
  font-size:.69rem;
  line-height:1.5;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.story-index-section .story-tile .piece-link__title {
  max-width:18ch;
  margin:.6rem 0 .55rem;
  color:#fff;
  font-size:clamp(1.95rem,3.25vw,3.35rem);
  line-height:1.02;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.story-index-section .story-tile .piece-link__note {
  max-width:42rem;
  color:rgba(255,255,255,.9);
  font-size:.96rem;
  line-height:1.55;
  text-shadow:0 1px 12px rgba(0,0,0,.58);
}
.story-index-section .story-tile .piece-link__go {
  margin-top:1rem;
  padding:.18rem 0;
  color:#fff;
  border-bottom:1px solid var(--accent);
}
.story-index-section .story-tile:hover,
.story-index-section .story-tile:focus-visible {
  color:#fff;
  background:var(--deep);
  border:0;
  box-shadow:none;
  transform:none;
}
.story-index-section .story-tile:hover .story-tile__image,
.story-index-section .story-tile:focus-visible .story-tile__image {
  filter:saturate(1) contrast(1.06);
  transform:scale(1.035);
}
.story-index-section .story-tile:focus-visible { outline:4px solid var(--accent); outline-offset:4px; }
.story-index-section .awaiting {
  margin-top:clamp(2rem,4vw,3.25rem);
  border-radius:.15rem;
  box-shadow:none;
}

@media (max-width:1020px) {
  .story-index-section .story-tile,
  .story-index-section .story-tile--feature,
  .story-index-section .story-tile--tall,
  .story-index-section .story-tile--wide { min-height:34rem; grid-column:span 6; }
}
@media (max-width:700px) {
  .story-index-grid { grid-template-columns:1fr; gap:.85rem; margin-top:1.75rem; }
  .story-index-section .story-tile,
  .story-index-section .story-tile--feature,
  .story-index-section .story-tile--tall,
  .story-index-section .story-tile--wide { min-height:34rem; grid-column:auto; }
  .story-tile__content { padding:1.3rem 1.2rem 1.45rem; }
  .story-index-section .story-tile .piece-link__title { font-size:clamp(2rem,10vw,2.75rem); }
  .story-index-section .story-tile .piece-link__note { font-size:.95rem; line-height:1.55; }
}

/* --------------------------------------------------------------------------
   HOME HERO BUTTONS — two weights kept, voice calmed.
   Anthony, 8 Sep 2026: he likes that the two hero buttons are DIFFERENT — one
   leads, one is the quiet option — so the hierarchy stays. What goes is the
   tiny uppercase wide-letterspaced treatment, which is the same shouty styling
   he called AI slop in the nav. So: "See the pieces" becomes a rounded floating
   pill matching the new nav language, bigger and sentence case. "Read her story"
   stays a quiet underlined link, just bigger and easier to hit.
   -------------------------------------------------------------------------- */
body.btn-editorial .home-hero .hero-actions { align-items:center; gap:1.6rem; }

/* the one that leads */
body.btn-editorial .home-hero .hero-actions .button--light {
  min-height:56px !important;
  padding:1rem 2.2rem !important;
  background:transparent !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.85) !important;
  border-radius:999px !important;
  font-size:.98rem !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  text-decoration:none !important;
  transition:.18s ease;
}
body.btn-editorial .home-hero .hero-actions .button--light:hover {
  background:#fff !important; color:var(--deep) !important;
  border-color:#fff !important; transform:translateY(-2px);
}

/* the quiet one */
body.btn-editorial .home-hero .hero-actions .button--ghost-light {
  min-height:44px !important;
  padding:.5rem .2rem !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:rgba(255,255,255,.95) !important;
  font-size:.96rem !important;
  font-weight:650 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  text-decoration:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:.45rem !important;
  text-decoration-color:rgba(255,255,255,.5) !important;
  transform:none !important;
}
body.btn-editorial .home-hero .hero-actions .button--ghost-light:hover {
  color:#fff !important; text-decoration-color:#fff !important; transform:none !important;
}

@media (max-width:720px) {
  body.btn-editorial .home-hero .hero-actions {
    flex-direction:column; align-items:flex-start; gap:1.1rem;
  }
  body.btn-editorial .home-hero .hero-actions .button--light {
    min-height:52px !important; padding:.9rem 1.9rem !important; font-size:.94rem !important;
  }
  body.btn-editorial .home-hero .hero-actions .button--ghost-light { font-size:.94rem !important; }
}

/* --------------------------------------------------------------------------
   TOP NAV — back to floating transparent buttons. Bigger, and calmer.
   Anthony, 8 Sep 2026: Home / Shop / Makers / Writing / Whakapapa / Our Story /
   Contact "look like AI slop". They had been overridden six times over and the
   last winner stripped them to bare 0.68rem UPPERCASE text at 0.15em spacing,
   with border:0 and border-radius:0 !important — no button left at all.
   This is the final word: transparent pill, soft visible edge, sentence case,
   readable size. Placed last so it beats every earlier layer.
   -------------------------------------------------------------------------- */
.site-header .nav-links { gap:.3rem; }

.site-header .nav-links a {
  min-height:42px !important;
  padding:.5rem .85rem !important;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.42) !important;
  border-radius:999px !important;
  font-size:.79rem !important;
  font-weight:650 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  text-decoration:none !important;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}

/* over the photo hero */
.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,.5) !important;
}
.has-overlay-header .site-header .nav-links a:hover,
.site-header .nav-links a:hover {
  color:var(--deep) !important;
  background:#fff !important;
  border-color:#fff !important;
  text-shadow:none !important;
  text-decoration:none !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;
  border-color:#f2d59c !important;
  background:rgba(255,255,255,.14) !important;
  text-decoration:none !important;
}

/* on the solid cream header */
.site-header--solid .nav-links a {
  color:var(--deep) !important;
  border-color:rgba(23,53,47,.3) !important;
  text-shadow:none !important;
}
.site-header--solid .nav-links a:hover {
  color:#fff !important; background:var(--deep) !important; border-color:var(--deep) !important;
}
.site-header--solid .nav-links a.active,
.site-header--solid .nav-links a[aria-current="page"] {
  color:var(--deep) !important;
  border-color:var(--deep) !important;
  background:rgba(23,53,47,.07) !important;
  text-decoration:none !important;
}

/* the Facebook pill keeps its own colour, just matches the new shape */
.site-header .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; border-radius:999px !important;
}

/* narrower desktop: shrink the padding before the labels wrap */
@media (max-width:1240px) {
  .site-header .nav-links { gap:.22rem; }
  .site-header .nav-links a { padding:.45rem .7rem !important; font-size:.74rem !important; }
}
@media (max-width:1040px) {
  .site-header .nav-links a { padding:.4rem .58rem !important; font-size:.7rem !important; }
}

/* the mobile panel is a stacked list, not a button row — leave it readable */
@media (max-width:900px) {
  .site-header .nav-links a {
    min-height:52px !important; padding:.7rem 1.1rem !important;
    font-size:1rem !important; letter-spacing:.01em !important;
    border-radius:999px !important;
  }
}

/* FINAL: kill the dark container pill behind the nav, and force the per-button
   border on with explicit longhands so no earlier `border:0 !important` wins. */
.site-header .site-nav .nav-links {
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.site-header .site-nav .nav-links a {
  border-width:1px !important;
  border-style:solid !important;
  border-color:rgba(255,255,255,.45) !important;
  border-radius:999px !important;
  background-color:transparent !important;
}
.site-header--solid .site-nav .nav-links a {
  border-color:rgba(23,53,47,.32) !important;
}
.site-header .site-nav .nav-links a:hover {
  background-color:#fff !important; border-color:#fff !important;
}
.site-header--solid .site-nav .nav-links a:hover {
  background-color:var(--deep) !important; border-color:var(--deep) !important;
}
.site-header .site-nav .nav-links a.active,
.site-header .site-nav .nav-links a[aria-current="page"] {
  border-color:#f2d59c !important; background-color:rgba(255,255,255,.16) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS, SITE WIDE — calmed. Anthony, 8 Sep 2026: "buttons that look like
   shit", "not cartoony", wants it "professional, clear, sharp and precise".
   The earlier editorial block made every button a tiny 0.72rem UPPERCASE label
   at 0.2em letter-spacing in a 2px-radius box. That is the same shouty styling
   he called AI slop in the nav. Same language as the nav pills now: rounded,
   sentence case, readable, transparent with a real edge. Placed last.
   The home hero keeps its own two-weight treatment above.
   -------------------------------------------------------------------------- */
.button {
  min-height:50px;
  padding:.78rem 1.7rem;
  border-radius:999px;
  border-width:1px;
  font-size:.92rem;
  font-weight:650;
  letter-spacing:.01em;
  text-transform:none;
  text-decoration:none;
}
.button:hover { transform:translateY(-1px); }

/* on cream / white */
.button--primary { color:#fff; background:var(--deep); border-color:var(--deep); }
.button--primary:hover { color:#fff; background:var(--teal); border-color:var(--teal); }

/* on dark grounds */
.section--dark .button--light,
.inner-hero .button--light {
  color:#fff; background:transparent; border-color:rgba(255,255,255,.6);
}
.section--dark .button--light:hover,
.inner-hero .button--light:hover {
  color:var(--deep); background:#fff; border-color:#fff;
}

/* the shop's collection jump links speak the same language */
.collection-nav a {
  min-height:42px; padding:.5rem 1.05rem; border-radius:999px;
  font-size:.78rem; font-weight:650; letter-spacing:.01em; text-transform:none;
}

/* --- writing.html is now one continuous dark run: give it quiet dividers --- */
.writing-intro { padding-block:clamp(2.6rem,5vw,4rem); }
.writing-intro + .section--dark,
.writing-anthony + .section--dark,
.writing-close { border-top:1px solid rgba(255,255,255,.14); }
.writing-close .section-heading h2 { color:#fff; }
.writing-close .section-heading p { color:rgba(255,255,255,.82); }
.section-heading--light h2 { color:#fff; }
.section-heading--light p { color:rgba(255,255,255,.82); }

/* --------------------------------------------------------------------------
   HERO PHOTOS — every hero must be a different picture. Anthony, 8 Sep 2026.
   The homepage was showing the same Picton-from-the-hill view twice: once at
   the top and again under "Sheltered water." Fixed by a swap, not a new photo:
     home 2nd hero  <- marlborough-hero.jpg  (the quiet bay, bush to the
                       waterline, still water holding the hills upside down —
                       which is what that section's own words describe)
     contact hero   <- whaleboats-lookout-tory-channel.jpg (was marlborough-hero)
   Nothing now repeats and no two heroes look alike.
   -------------------------------------------------------------------------- */
.bleed--sounds {
  background-image:url("images/marlborough-hero.jpg") !important;
  background-position:center 58% !important;
  background-size:cover !important;
}
.inner-hero--contact {
  background:linear-gradient(90deg,rgba(6,34,35,.94),rgba(6,34,35,.48)),
             url("images/family/whaleboats-lookout-tory-channel.jpg") center 40%/cover !important;
}

/* --------------------------------------------------------------------------
   BUTTONS — SQUARED. Anthony, 8 Sep 2026, on verified research across 6 lanes.
   What the research found:
     Artisan/maker brands: 13 of 15 use 0px. Not one uses a pill for a primary.
     Museums/heritage: 8 of 10 square. Te Papa, Auckland Museum, British Museum,
       MoMA, National Library NZ, Tate all 0px.
     NZ / Maori-led: 11 of 13 at 0-5px, nine of them exactly 0px.
     Design systems split (GOV.UK 0, IBM 0, Atlassian 6, Polaris 8, Material pill)
       with no authority claiming one is better.
   AND THE KEY FINDING: what read as "AI slop" was never the square. It was the
   letter-spacing. Editorial sites measure 0.000-0.025em; this site was at 0.2em,
   eight times the highest of them. So: square the corners, KEEP the calm type.
   2px, not 0px - a hairline softening that still reads as square, matching the
   Ngai Tahu 3px / Nga-ti Whatua 4px end of the NZ band.
   This block is last and overrides the pill rules above.
   -------------------------------------------------------------------------- */

/* every button on the site */
.button,
.section--dark .button--light,
.inner-hero .button--light,
.button--primary,
.button--light,
.button--ghost-light {
  border-radius:2px !important;
}

/* the top nav */
.site-header .nav-links a,
.site-header .site-nav .nav-links a {
  border-radius:2px !important;
}
.site-header .nav-links .facebook-link,
.site-header .site-nav .nav-links .facebook-link {
  border-radius:2px !important;
}

/* the home hero pair keeps its two weights, just squared */
body.btn-editorial .home-hero .hero-actions .button--light {
  border-radius:2px !important;
}
body.btn-editorial .home-hero .hero-actions .button--ghost-light {
  border-radius:0 !important;   /* it is an underlined link, not a box */
}

/* the shop's collection jump links */
.collection-nav a { border-radius:2px !important; }

/* --------------------------------------------------------------------------
   "Read her story" hover — brighten, do not grow a box. Anthony asked whether
   the quiet button should gain a square on hover to match the primary. No:
   hover does not exist on a phone, and most of Karen's visitors are on phones,
   so a state only a mouse can reach is a state most people never see. It would
   also collapse the two-weight hierarchy he chose, and adding chrome on hover
   risks the text nudging. So the underline goes faint -> solid and the text
   brightens. Nothing moves.
   -------------------------------------------------------------------------- */
body.btn-editorial .home-hero .hero-actions .button--ghost-light {
  text-decoration-color:rgba(255,255,255,.45) !important;
  transition:color .16s ease, text-decoration-color .16s ease !important;
}
body.btn-editorial .home-hero .hero-actions .button--ghost-light:hover,
body.btn-editorial .home-hero .hero-actions .button--ghost-light:focus-visible {
  color:#fff !important;
  text-decoration-color:#fff !important;
  text-decoration-thickness:1.5px !important;
  background:transparent !important;
  border:0 !important;
  transform:none !important;
}

/* --------------------------------------------------------------------------
   BUTTON REFINEMENTS — from the 13-agent measured survey, 8 Sep 2026.
   It re-measured ten live sites in real Chrome and confirmed 2px is right:
   the V&A ships border-radius:2px 38 times; the Rijksmuseum arrived at 2px
   independently. 2px is the category default, not a compromise.
   It also CORRECTED my earlier claim that 0.2em tracking was the problem.
   Margaret Howell runs 14px at 0.200em across 67 elements; Labour and Wait
   runs 0.724rem at 0.280em. The real line is: text INSIDE a bordered box
   measures 0.000-0.072em everywhere, while BARE labels run 0.06-0.28em.
   Nobody puts eyebrow tracking inside a box. That was the fault, not the
   tracking on its own. The site eyebrows are fine and are left alone.
   Three changes it asked for:
     1. nav was 12.64px - below every site measured. Up to 0.85rem.
     2. nav shrank to 0.7rem at 1040px - below all of them. Floor at 0.8rem,
        take the space out of padding instead.
     3. hero primary border 2px -> 1px on cream; keep 2px over the photo,
        where it earns the contrast. Nine of ten sites use 1px.
   -------------------------------------------------------------------------- */
.site-header .nav-links a,
.site-header .site-nav .nav-links a { font-size:.85rem !important; }

@media (max-width:1240px) {
  .site-header .nav-links { gap:.2rem; }
  .site-header .nav-links a,
  .site-header .site-nav .nav-links a {
    font-size:.82rem !important; padding:.45rem .62rem !important;
  }
}
@media (max-width:1040px) {
  .site-header .nav-links { gap:.15rem; }
  .site-header .nav-links a,
  .site-header .site-nav .nav-links a {
    font-size:.8rem !important; padding:.4rem .5rem !important;
  }
}
@media (max-width:900px) {
  .site-header .nav-links a,
  .site-header .site-nav .nav-links a { font-size:1rem !important; padding:.7rem 1.1rem !important; }
}

/* hairline on cream, keep the heavier edge over photography */
.section--paper .button, .section .button, .section--dark .button--light { border-width:1px !important; }
body.btn-editorial .home-hero .hero-actions .button--light { border-width:2px !important; }
.inner-hero .button--light { border-width:2px !important; }

/* --------------------------------------------------------------------------
   CONTACT — the three makers on the top line, the two brothers together below.
   Anthony, 8 Sep 2026. Five cards in an auto-fit grid were wrapping unevenly,
   which split him and Steve apart. Fixed to an explicit 3-up so the row breaks
   land where they should: Karen / Honey / Amanda, then Anthony / Steven.
   -------------------------------------------------------------------------- */
@media (min-width:900px) {
  .reach__grid { grid-template-columns:repeat(3,1fr) !important; }
  /* the two brothers sit on the second row, centred under the three makers */
  .reach__grid > .person:nth-child(4) { grid-column:1 / span 1; }
  .reach__grid > .person:nth-child(5) { grid-column:2 / span 1; }
}
@media (min-width:600px) and (max-width:899px) {
  .reach__grid { grid-template-columns:repeat(2,1fr) !important; }
}

/* --------------------------------------------------------------------------
   MOBILE MENU — solid buttons. Anthony, 8 Sep 2026: when the menu drops down
   on a phone the links were transparent outlines on cream, which is hard to
   see and does not read as tappable. On the phone panel they become solid deep
   teal with white type, full width, well spaced. Desktop is untouched — up
   there they stay the transparent squares over the photograph.
   -------------------------------------------------------------------------- */
@media (max-width:900px) {
  .site-header .nav-links,
  .menu-open .nav-links {
    gap:.6rem !important;
    padding:1.4rem 1.4rem 2.4rem !important;
  }

  .site-header .nav-links a,
  .site-header .site-nav .nav-links a,
  .has-overlay-header .site-header .nav-links a,
  .site-header--solid .nav-links a {
    display:flex !important;
    width:100% !important;
    min-height:56px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:.9rem 1.2rem !important;
    background:var(--deep) !important;
    color:#fff !important;
    border:1px solid var(--deep) !important;
    border-radius:2px !important;
    font-size:1.05rem !important;
    font-weight:650 !important;
    letter-spacing:.01em !important;
    text-transform:none !important;
    text-decoration:none !important;
    text-shadow:none !important;
    box-shadow:0 1px 2px rgba(6,34,35,.12) !important;
  }

  /* the page you are on, so you know where you are */
  .site-header .nav-links a.active,
  .site-header .nav-links a[aria-current="page"],
  .has-overlay-header .site-header .nav-links a.active,
  .has-overlay-header .site-header .nav-links a[aria-current="page"],
  .site-header--solid .nav-links a.active,
  .site-header--solid .nav-links a[aria-current="page"] {
    background:#fff !important;
    color:var(--deep) !important;
    border-color:var(--deep) !important;
    text-decoration:none !important;
  }

  .site-header .nav-links a:active { opacity:.85 !important; }

  /* Facebook keeps its own colour so it is obviously the outside link */
  .site-header .nav-links .facebook-link,
  .has-overlay-header .site-header .nav-links .facebook-link,
  .site-header--solid .nav-links .facebook-link {
    background:#315f91 !important; border-color:#315f91 !important;
    color:#fff !important; margin-top:.4rem !important;
  }
}

/* FIX: the mobile menu panel must be opaque. With solid buttons and a
   transparent panel the hero text showed through the gaps between them, which
   is exactly the confusion Anthony reported. Solid ground, full height. */
@media (max-width:900px) {
  .site-header .nav-links,
  .menu-open .nav-links,
  .has-overlay-header .site-header .nav-links,
  .site-header--solid .nav-links {
    background:var(--cream) !important;
    background-color:#f8f1e6 !important;
    backdrop-filter:none !important;
    overflow-y:auto !important;
    z-index:60 !important;
  }
  /* gaps between the buttons now sit on cream, not on the photograph */
  .site-header .nav-links { align-content:start !important; }
}

/* --------------------------------------------------------------------------
   HOMEPAGE — carry the crochet texture down. Anthony, 8 Sep 2026.
   The stitch photo already sits behind section 2 ("Cardigans, blankets...").
   He wants it to keep going behind the cardigans grid, then again behind
   "One of a kind, made to order" after the sounds hero, instead of flat cream.
   And the little wave-rule squiggle dividers are gone (removed in the HTML).
   Same cream veil as bleed--stitch so the text and the entry-card photos
   still read cleanly over it. It reads as one continuous cloth down the page,
   interrupted only by the sounds hero.
   -------------------------------------------------------------------------- */
.section--crochet {
  position:relative;
  background-image:linear-gradient(rgba(250,247,242,.86),rgba(250,247,242,.72)),
                   url("images/bleed/stitch.jpg");
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
/* the cardigans block flows straight out of section 2 with no seam */
.bleed--stitch + .section--crochet-top { margin-top:0; }
.section--crochet-top { padding-top:clamp(2.5rem,6vw,5rem); }

@media (max-width:820px) {
  /* fixed attachment is janky on phones; pin it instead */
  .section--crochet { background-attachment:scroll; }
}

/* --------------------------------------------------------------------------
   HOMEPAGE — make the "Cardigans, blankets, beanies, booties" writing section
   SLIDE too. Anthony, 8 Sep 2026: he likes the crochet sliding effect (text
   moving over a held cloth) and wants it to start right after the hero, so the
   first written section slides instead of scrolling. bleed--stitch was
   scrolling; now it holds like the crochet, and its veil is matched to the
   crochet veil so section 2 and section 3 read as ONE continuous held cloth
   the words slide over. Mobile stays pinned (fixed-attachment is janky there).
   -------------------------------------------------------------------------- */
.bleed--stitch {
  background-attachment:fixed !important;
}
.bleed--stitch::before {
  background:linear-gradient(rgba(250,247,242,.86),rgba(250,247,242,.72)) !important;
}
@media (max-width:820px) {
  .bleed--stitch { background-attachment:scroll !important; }
}

/* --------------------------------------------------------------------------
   SHOP PAGE — carry the same held-crochet slide down the whole page.
   Anthony, 8 Sep 2026: no flat cream "cartoony" sections. The intro, every
   product collection, and the closing note all get the crochet cloth the
   content slides over, matching the homepage. Product cards stay opaque cream
   tiles, so the crochet shows in the gutters between them. Same cream veil so
   text and card photos read cleanly. The dark shelf ("A quiet shelf beside the
   knitting") stays dark. Mobile pins the background so it does not judder.
   -------------------------------------------------------------------------- */
body.shop-textured .section--paper,
body.shop-textured .section.collection,
body.shop-textured main > .section:not(.section--dark):not(.inner-hero) {
  position:relative;
  background-image:linear-gradient(rgba(250,247,242,.87),rgba(250,247,242,.73)),
                   url("images/bleed/stitch.jpg") !important;
  background-size:cover !important;
  background-position:center !important;
  background-attachment:fixed !important;
}
/* the intro flows straight out of the hero, no seam */
body.shop-textured .inner-hero--shop + .section--paper { margin-top:0; }

@media (max-width:820px) {
  body.shop-textured .section--paper,
  body.shop-textured .section.collection,
  body.shop-textured main > .section:not(.section--dark):not(.inner-hero) {
    background-attachment:scroll !important;
  }
}

/* --------------------------------------------------------------------------
   MAKERS + OUR STORY — the whare house watermark behind the words, same as
   the individual story pages (house fixed, Karen's band down the side, the
   writing slides over it). Anthony, 8 Sep 2026.
   Both pages keep their top hero photo. Below it, the cream content sections
   are made transparent so the fixed house shows through the cream body.
   MAKERS keeps the crochet cloth behind "Karen." (bleed--stitch2, untouched).
   OUR STORY uses a brush-stroke / sumi-e version of the house.
   Dark sections stay dark.
   -------------------------------------------------------------------------- */

/* let the fixed watermark show through the cream sections on these two pages */
body.page-makers-whare main > .section:not(.section--dark):not(.bleed),
body.page-story-whare  main > .section:not(.section--dark):not(.bleed) {
  background:transparent !important;
}
/* the info-cards and story cards keep a soft cream tile so their text stays crisp */
body.page-makers-whare .info-card,
body.page-story-whare .info-card {
  background:rgba(255,253,248,.82) !important;
}

/* OUR STORY: swap the clean house for the brush-inked one */
body.whare-brush .whare-mark::after {
  background-image:url("images/mark/whare-tapa-wha-brush.svg") !important;
  opacity:.09 !important;   /* the brush edges read a touch lighter, lift it slightly */
}

/* --------------------------------------------------------------------------
   MOBILE crochet — one continuous cloth down the whole page. Anthony, 8 Sep:
   on desktop the crochet is held and the text slides over it, but phones
   (iOS Safari especially) will not hold a fixed background, so each section
   was painting its own zoomed crop and it barely registered. Fix: put ONE
   crochet image behind the entire page and make the textured sections
   transparent, so scrolling reveals one unbroken knit — the same bit of
   cloth all the way down. Heroes and the dark shelf keep their own grounds.
   -------------------------------------------------------------------------- */
@media (max-width:820px) {
  /* HOMEPAGE */
  body[data-page="home"] {
    background:
      linear-gradient(rgba(248,241,230,.78),rgba(248,241,230,.78)),
      url("images/bleed/stitch.jpg") !important;
    background-repeat:no-repeat, repeat-y !important;
    background-size:auto, 100% auto !important;
    background-position:center, top center !important;
    background-attachment:scroll !important;
  }
  body[data-page="home"] .bleed--stitch,
  body[data-page="home"] .bleed--stitch::before,
  body[data-page="home"] .section--crochet {
    background:transparent !important;
  }

  /* SHOP */
  body.shop-textured {
    background:
      linear-gradient(rgba(248,241,230,.80),rgba(248,241,230,.80)),
      url("images/bleed/stitch.jpg") !important;
    background-repeat:no-repeat, repeat-y !important;
    background-size:auto, 100% auto !important;
    background-position:center, top center !important;
    background-attachment:scroll !important;
  }
  body.shop-textured .section--paper,
  body.shop-textured .section.collection,
  body.shop-textured main > .section:not(.section--dark):not(.inner-hero) {
    background:transparent !important;
  }
}

/* MAKERS: drop the crochet behind "Karen." so it too slides over the house
   watermark. Anthony, 8 Sep: straight off the hero onto Karen over the whare,
   continuous all the way down — no crochet break. Only the makers page. */
body.page-makers-whare .bleed--stitch2,
body.page-makers-whare .bleed--stitch2::before {
  background:transparent !important;
  background-image:none !important;
}

/* MAKERS: the maker panels (Honey, Anthony, Steven, Amanda/Mandi P Designs)
   go dark green so they stand out over the cream watermark background, instead
   of cream-on-cream. Anthony, 8 Sep. Karen's founding card is already dark.
   Light type inside, warm accent for the role/meta labels, light buttons. */
body.page-makers-whare .maker-card:not(.maker-card--founding) {
  background:var(--deep) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:rgba(255,255,255,.85) !important;
  box-shadow:0 10px 30px rgba(6,34,35,.22) !important;
}
body.page-makers-whare .maker-card:not(.maker-card--founding) h2,
body.page-makers-whare .maker-card:not(.maker-card--founding) h3,
body.page-makers-whare .maker-card:not(.maker-card--founding) p,
body.page-makers-whare .maker-card:not(.maker-card--founding) .maker-card__also {
  color:#fff !important;
}
body.page-makers-whare .maker-card:not(.maker-card--founding) p {
  color:rgba(255,255,255,.85) !important;
}
body.page-makers-whare .maker-card:not(.maker-card--founding) .maker-card__role,
body.page-makers-whare .maker-card:not(.maker-card--founding) .maker-card__meta {
  color:#f2d59c !important;
}
body.page-makers-whare .maker-card:not(.maker-card--founding) .button {
  color:#fff !important; background:transparent !important;
  border-color:rgba(255,255,255,.6) !important;
}
body.page-makers-whare .maker-card:not(.maker-card--founding) .button:hover {
  color:var(--deep) !important; background:#fff !important; border-color:#fff !important;
}

/* SHOP: product panels go dark green so they stand out over the crochet
   background instead of cream-on-cream. Anthony, 8 Sep. The photo stays; the
   body below it becomes deep green with light type. Matches the maker panels. */
body.shop-textured .piece {
  background:var(--deep) !important;
  border-color:rgba(255,255,255,.16) !important;
}
body.shop-textured .piece__body { color:rgba(255,255,255,.86) !important; }
body.shop-textured .piece__body h3 { color:#fff !important; }
body.shop-textured .piece__detail { color:rgba(255,255,255,.82) !important; }
body.shop-textured .piece__tech,
body.shop-textured .piece__worn-flag { color:#f2d59c !important; }
body.shop-textured .piece__size { color:#8fd0cf !important; }
body.shop-textured .piece__meta { color:rgba(255,255,255,.65) !important; }
body.shop-textured .piece__price {
  color:#fff !important; border-top-color:rgba(255,255,255,.18) !important;
}
body.shop-textured .piece__price-note { color:rgba(255,255,255,.62) !important; }
body.shop-textured .piece:hover { box-shadow:0 14px 34px rgba(6,34,35,.3) !important; }

/* --------------------------------------------------------------------------
   BRAND UP 10%, SITE-WIDE. Anthony, 8 Sep 2026.
   The emblem, "Sheltered Water", "Te Ahuru Mowai", the taniko band down the
   side and the nav buttons all move together by the same 10%, so nothing
   outgrows anything else. The header block grows with them, otherwise the
   wordmark crowds the nav. Appended last, so this wins over the earlier steps.
   Mobile keeps its own smaller clamp minimums — the vw middle value does the
   scaling there, so phones grow proportionally without wrapping.
   -------------------------------------------------------------------------- */
.wordmark__main { font-size:clamp(3.15rem,8vw,5.85rem) !important; }
.wordmark__sub  { font-size:clamp(1.15rem,3vw,1.76rem) !important; }
.home-hero .eyebrow, .inner-hero .eyebrow { font-size:clamp(1.15rem,3vw,1.76rem) !important; }

/* header grows to hold it */
.site-nav { min-height:clamp(147px,16.5vw,211px) !important; }
@media (max-width:720px) { .site-nav { min-height:clamp(114px,26.4vw,156px) !important; } }

/* nav buttons up the same 10% */
.nav-links a { font-size:.90rem !important; padding:.5rem .68rem !important; }
@media (max-width:900px) { .nav-links a { font-size:.66rem !important; padding:.55rem .66rem !important; } }

/* the taniko band down the side, 64px -> 70px */

/* --------------------------------------------------------------------------
   BRAND AT 15% TOTAL, DRIVEN FROM THE VARIABLES. Anthony, 8 Sep 2026.
   Correcting my own 10% pass: I had set the band to a flat 70px and the mark
   to a literal size, which bypassed --mark-w / --band-w. Those two variables
   also feed the formula that centres the taniko band under the three waves,
   so hard-coding the sizes left the band off-centre and, on wide screens,
   NARROWER than before (70px flat against a clamp that reached 96px).
   Fixed at the source: both variables move up 15% together, so the band
   re-centres itself under the emblem automatically and stays responsive.
   -------------------------------------------------------------------------- */
:root {
  --mark-w: clamp(4.5rem,12vw,7.15rem) !important;   /* three waves, +15% */
  --band-w: clamp(71px,7.4vw,110px)   !important;    /* taniko band, +15%, still responsive */
}
.wordmark__main { font-size:clamp(3.3rem,8.4vw,6.1rem) !important; }
.wordmark__sub  { font-size:clamp(1.2rem,3.1vw,1.84rem) !important; }
.home-hero .eyebrow, .inner-hero .eyebrow { font-size:clamp(1.2rem,3.1vw,1.84rem) !important; }
.site-nav { min-height:clamp(154px,17.3vw,221px) !important; }
@media (max-width:720px) { .site-nav { min-height:clamp(120px,27.6vw,163px) !important; } }
.nav-links a { font-size:.94rem !important; padding:.52rem .71rem !important; }
@media (max-width:900px) { .nav-links a { font-size:.69rem !important; padding:.56rem .68rem !important; } }

/* --------------------------------------------------------------------------
   TANIKO BAND BACK ON THE WHAKAPAPA STORIES PAGE. Anthony, 8 Sep 2026.
   The band was deliberately switched off on shop, makers, stories, writing and
   books — "never over Karen's own work, and never over the photograph of
   Anthony and Steve." Anthony has now asked for the whakapapa page, and only
   that page, to carry it again. Shop, makers, writing and books stay off, so
   the original reason still holds everywhere it was meant to.
   Later in the file, so this re-enable beats the earlier display:none.
   -------------------------------------------------------------------------- */
body.band-b .inner-hero--stories::before { display:block !important; }

/* --------------------------------------------------------------------------
   THE TANIKO HAIRLINE AT EVERY MAJOR SEAM ON THE HOMEPAGE. Anthony, 8 Sep 2026.
   The colour band already ran across the foot of the top hero. He wants the
   same band marking the other big joins: where the Sounds hero starts and
   where it ends, and at the head of the dark "Written down" section at the
   bottom. Same artwork, same height, same opacity as the hero band, so it
   reads as one repeated device rather than four different rules.
   Homepage only — other pages keep the single hero band.
   -------------------------------------------------------------------------- */
body[data-page="home"] .section--crochet-top,
body[data-page="home"] .section--crochet,
body[data-page="home"] .section--dark,
body[data-page="home"] .bleed--sounds { position:relative; }

body[data-page="home"] .section--crochet-top::after,   /* top edge of the Sounds hero */
body[data-page="home"] .bleed--sounds::after,          /* foot of the Sounds hero    */
body[data-page="home"] .section--dark::before {        /* head of "Written down"     */
  content:""; position:absolute; left:0; right:0; height:15px; z-index:3;
  background-image:url("images/pattern/karen-band-colour.png");
  background-repeat:repeat-x; background-size:auto 100%; opacity:.92;
  pointer-events:none;
}
body[data-page="home"] .section--crochet-top::after { bottom:0; }
body[data-page="home"] .bleed--sounds::after        { bottom:0; }
body[data-page="home"] .section--dark::before       { top:0; }

@media (max-width:720px) {
  body[data-page="home"] .section--crochet-top::after,
  body[data-page="home"] .bleed--sounds::after,
  body[data-page="home"] .section--dark::before { height:11px; }
}

/* --------------------------------------------------------------------------
   LIVE BREAK FIX — nav ran off-screen and Contact was unreachable.
   Anthony, 9 Sep 2026. Caused by my own brand increase earlier today.
   At 1366px (the most common laptop width in the world) the wordmark grew to
   97.6px and 737px wide, so the seven nav links overflowed by 98px. The last
   link, Contact, sat at x=1464 on a 1366 viewport, and body{overflow-x:hidden}
   meant nobody could scroll to reach it — the link was simply gone. Same at
   1440px, overflowing by 61px.
   The nav only collapsed to a hamburger at max-width:1280px, so every width
   from 1281px to about 1500px was broken.
   Fix keeps Anthony's larger brand — which he asked for twice — and instead
   hands those widths the hamburger, exactly mirroring the existing 1280 block.
   -------------------------------------------------------------------------- */
@media (max-width:1500px) {
  .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 !important;
  }
  .nav-links .facebook-link { justify-content:center; margin:1rem 0 0; border:0; }
  /* the fixed panel needs the header un-filtered, same as the 1280 block */
  .site-header, .has-overlay-header .site-header, .site-header--solid {
    backdrop-filter:none !important;
  }
}

/* 26 Sep 2026 (TUITUI bigger maker text) — Anthony: make the descriptive writing on the makers' selling pages bigger
   and easier to read; headings unchanged. Scope: the shop and the maker pages (data-page="shop" / "makers") only. */
:is([data-page="shop"],[data-page="makers"]) .piece__detail { font-size:1.15rem; line-height:1.6; }
:is([data-page="shop"],[data-page="makers"]) .piece__size { font-size:1.05rem; }
:is([data-page="shop"],[data-page="makers"]) .piece__meta { font-size:1.05rem; line-height:1.55; }
:is([data-page="shop"],[data-page="makers"]) .piece__price { font-size:1.15rem; }
:is([data-page="shop"],[data-page="makers"]) .piece__tech { font-size:.88rem; }
:is([data-page="shop"],[data-page="makers"]) .piece__worn-flag { font-size:.84rem; }
:is([data-page="shop"],[data-page="makers"]) .collection__head p:not(.eyebrow) { font-size:1.2rem; line-height:1.65; }
:is([data-page="shop"],[data-page="makers"]) .made-to-order__steps p { font-size:1.12rem; }
:is([data-page="shop"],[data-page="makers"]) .info-card p { font-size:1.1rem; }

/* 26 Sep 2026 (TUITUI sitewide readable text) — Anthony: "through the whole website… everything could be bigger";
   the big headings stay as they are. Body writing ~18–21px, descriptions ~17–18px, small labels and captions 13px+. */
/* long reading text */
main p { font-size:1.125rem; }
.story-copy p:not(.story-end):not(.reo) { font-size:clamp(1.2rem, 1.1rem + .5vw, 1.32rem); }
.tl__body p, .tl-closing p { font-size:1.15rem; }
.story-body p { font-size:1.2rem; }
.story-body p:first-child { font-size:1.32rem; }
.section-heading > p:not(.eyebrow), .collection__head p:not(.eyebrow) { font-size:1.2rem; line-height:1.65; }
.info-card p, .provenance p, .bleed__inner p:not(.eyebrow), .book-strip__copy p:not(.eyebrow), .entry-card__content p:not(.entry-card__label), .reach__intro p:not(.eyebrow), .maker-card p:not(.maker-card__role):not(.maker-card__meta), .split__copy p:not(.eyebrow):not(.lead) { font-size:1.125rem; }
.thread-statement .thread-statement__turn { font-size:1.18rem !important; }
/* descriptions and notes */
.piece-link__note, .story-index-section .story-tile .piece-link__note { font-size:1.1rem; }
.story-foot p { font-size:1.05rem; }
.story-note p, p.story-note, .worn-band__note, .timeline-note { font-size:1rem; }
.person__line, .book-card__blurb { font-size:1.08rem; }
.reo-en { font-size:1.1rem; }
.hero-status { font-size:.95rem; }
/* small labels, captions and buttons */
.tl-fig figcaption, .plate__cap, .tl-quote cite, .story-byline__meta { font-size:.95rem; }
.piece-link__label { font-size:.82rem; letter-spacing:.12em; }
.piece-link__go { font-size:.86rem; }
.eyebrow { font-size:.84rem; }
.story-index-section .story-tile .piece-link__label { font-size:.82rem; letter-spacing:.12em; }
.entry-card__label, .book-card__status { font-size:.84rem; }
.maker-social a { font-size:.95rem; }
.maker-card__role, .person__role { font-size:.84rem; }
.maker-card__meta { font-size:.95rem; }
.btn-reach { font-size:.88rem; }
.collection-nav a { font-size:.95rem; }
.button { font-size:1rem; }
.book-card__actions .button { font-size:.9rem; }
@media (max-width:760px) { .tl__year { font-size:.92rem; } }
/* footer and top bar */
.site-footer li a { font-size:1.05rem; }
.site-footer h2 { font-size:.86rem; }
.site-footer__bottom { font-size:.95rem; }
.preview-bar { font-size:.92rem; }

/* Six-book shelf, preview 2026-10-03. Whole covers, not the three-cover fan. */
.book-strip__covers--six {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: end;
}
.book-strip__covers--six img {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  width: 100%;
  max-height: none;
  height: auto;
  transform: none;
  object-fit: contain;
  aspect-ratio: auto;
  border-radius: .35rem;
  box-shadow: 0 16px 32px rgba(4,20,18,.35);
}
.book-strip__elsewhere { margin: 1rem 0 0; }
.book-strip__elsewhere a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.books-grid .book-card__image img { object-fit: contain; aspect-ratio: auto; }
@media (max-width: 980px) {
  .book-strip__covers--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .book-strip__covers--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}