/* ============================================================
   Jangaard Export AS
   Warm off-white base · elegant high-contrast
   serif · generous whitespace · ONE dark contrast section ·
   amber (logo) as an extremely sparse accent.
   ============================================================ */

/* Self-hosted fonts (latin subset, variable). Served locally + preloaded in
   each page head, so they are ready before first paint and never swap in
   afterwards — this is what removes the little sideways/vertical "jerk" that a
   late-arriving web font (FOUT) used to cause on navigation. */
@font-face { font-family: "Cormorant"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/cormorant.woff2) format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../fonts/cormorant-italic.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fonts/inter.woff2) format("woff2"); }

:root {
  /* --- warm light base --- */
  --bg:      #f3f0ea;   /* warm off-white (page) */
  --bg-2:    #ece8df;   /* alt light surface */
  --card:    #ffffff;   /* white cards */

  /* --- ink (warm near-black charcoal, Jangaard-warm not navy) --- */
  --ink:     #15130F;   /* headlines / primary */
  --ink-2:   #35312A;   /* strong body */
  --ink-soft:#6A6459;   /* body / muted */
  --ink-faint:#989286;  /* metadata / eyebrows */

  /* --- dark contrast section --- */
  --char-900: #1B1916;
  --char-850: #232019;   /* Jangaard signature */
  --paper:   #f3f0ea;    /* text on dark */
  --paper-soft:#C6C1B5;

  /* --- lines --- */
  --line:      rgba(30, 28, 24, 0.14);
  --line-soft: rgba(30, 28, 24, 0.08);
  --line-dk:   rgba(243, 240, 234, 0.14);

  /* --- accent: amber (logo) — sparse only ---
     On dark the logo's own gold is kept. On the light field we use a burnt
     rust instead of the bright gold: it is the same hue family, but quieter and
     legible against the stone, which is how a tailoring house uses its colour. */
  --amber:      #FCB714;   /* on dark — logo-true */
  --amber-link: #A4611A;   /* burnt rust, for links on light */

  --font-serif: "Cormorant", Georgia, "Times New Roman", serif;
  --font-body:  "Inter", system-ui, sans-serif;

  --header-h: 92px;
  --wrap: 1240px;
  --wrap-narrow: 940px;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pan:  cubic-bezier(0.76, 0, 0.24, 1);  /* ease-in-out: accelerate + brake */
}

*, *::before, *::after { box-sizing: border-box; }

/* ---- cross-document view transition ----
   Every page opts in (shared stylesheet), so navigating between pages is a
   controlled cross-fade of snapshots instead of a hard document swap. This
   masks whatever the browser does on load (the "pinch"). The header keeps its
   own name so it stays put and doesn't get dragged into the fade. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* Always reserve the scrollbar gutter so page width stays constant between a
   long page (with scrollbar) and a short one (without) — otherwise the centred
   header jerks sideways on navigation. overflow-y:scroll is the fallback. */
/* `scrollbar-gutter: stable` (ALONE) reserves the vertical scrollbar's space on
   the root permanently, so content width never changes when the scrollbar
   appears as a freshly-loaded page grows tall — that width change was the little
   "pinch" (kniper) of the page + centred header on every navigation. NOT paired
   with overflow-x:hidden this time (that made body a nested scroll container and
   caused its own pinch). Smooth scrolling is handled in JS for in-page anchors. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-y: scroll; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 3rem, var(--wrap-narrow)); margin-inline: auto; }

/* serif display */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.005em;
}

/* eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

/* read-more link (amber, sparse) */
.rmore {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-link);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.25s var(--ease-soft);
}
.rmore:hover { gap: 0.85rem; }

/* ================= header ================= */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 60;
  display: flex; align-items: center;
  transition: background 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), height 0.4s var(--ease-soft);
}
.site-header.is-solid {
  background: rgba(243, 240, 234, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-soft);
  height: 74px;
}
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.header__nav { display: flex; gap: 2rem; }
.header__nav a { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); transition: color 0.2s; }
.header__nav a:hover { color: var(--amber-link); }
.brand { justify-self: center; display: flex; align-items: center; }
.brand img { height: 46px; transition: height 0.4s var(--ease-soft); }
.site-header.is-solid .brand img { height: 38px; }
.header__right { justify-self: end; display: flex; align-items: center; gap: 1.6rem; }
.header__right a { font-size: 0.82rem; font-weight: 500; color: var(--ink-2); transition: color 0.2s; }
.header__right .email { color: var(--amber-link); }
.header__right a:hover { color: var(--ink); }
.header__right .email:hover { color: var(--amber-link); opacity: 0.75; }

.menu-btn { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.menu-btn span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ================= mobile overlay ================= */
.menu { position: fixed; inset: 0; background: var(--bg); z-index: 70; opacity: 0; visibility: hidden; transition: opacity 0.35s; display: flex; flex-direction: column; padding: 2rem; }
.menu.is-open { opacity: 1; visibility: visible; }
.menu__close { align-self: flex-end; background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); }
.menu__links { margin: auto 0; display: flex; flex-direction: column; gap: 1.2rem; }
.menu__links a { font-family: var(--font-serif); font-size: 2.4rem; color: var(--ink); }
.menu__links a:hover { color: var(--amber-link); }

/* ================= hero ================= */
.hero { padding: calc(var(--header-h) + 7rem) 0 0; text-align: center; }
.hero__eyebrow { color: var(--ink-faint); }
.hero h1 {
  font-size: clamp(3rem, 8.5vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  /* one line + air around it; extra vertical margin keeps the light field's
     height now that the heading is a single line instead of two */
  margin: 1.6rem auto 4rem;
  max-width: none;
  white-space: nowrap;
}
.hero h1 em { font-style: italic; }
.hero__figure { margin-top: clamp(2.5rem, 6vw, 5rem); position: relative; }
/* discreet "Seafood from Norway" watermark, lower-right of the hero photo.
   Selector is specific enough to beat the `.hero__figure img` cover rule. */
.hero__figure img.hero__seal { position: absolute; right: clamp(1rem, 3vw, 2.6rem); bottom: clamp(1rem, 3vw, 2.6rem); width: clamp(80px, 9vw, 124px); height: auto; object-fit: contain; opacity: 0.6; pointer-events: none; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5)); }
.hero__figure img { width: 100%; height: clamp(340px, 52vw, 620px); object-fit: cover; }

/* wide image band for subpages (e.g. Heritage) */
.page-figure-sec { padding: clamp(1rem, 3vw, 2.5rem) 0 0; }
.page-figure { margin: 0; }
.page-figure img { width: 100%; height: clamp(280px, 42vw, 480px); object-fit: cover; border-radius: 4px; display: block; }

/* ================= intro statement ================= */
.intro { padding: clamp(5rem, 10vw, 9rem) 0; }
.intro__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.intro__lead { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.18; color: var(--ink); letter-spacing: -0.01em; }
.intro__aside { padding-top: clamp(1.8rem, 3.6vw, 3.05rem); }
.intro__aside p { margin: 0 0 1.2rem; }
.intro__aside p:last-child { margin: 0; }

/* ================= feature columns ================= */
.features { padding: 0 0 clamp(4.5rem, 9vw, 8rem); }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.feature { padding: 2.2rem 2rem 2.2rem 0; border-top: 1px solid var(--line); position: relative; }
.feature + .feature { padding-left: 2.2rem; border-left: 1px solid var(--line); }
.feature h3 { font-size: 1.7rem; margin: 0 0 0.9rem; line-height: 1.12; }
.feature p { font-size: 0.96rem; margin: 0 0 1.4rem; }

/* ================= section head ================= */
.section { padding: clamp(5rem, 10vw, 9rem) 0; }
.section--alt { background: var(--bg-2); }
.section__head { max-width: 640px; margin: 0 0 3.4rem; }
.section__head .eyebrow { margin-bottom: 1.1rem; }
.section__head h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 500; }
.section__head p { font-size: 1.05rem; margin: 1.2rem 0 0; }

/* ================= dark product section (tight, general) ================= */
.fish { background: var(--char-900); color: var(--paper-soft); padding: clamp(3.5rem, 7vw, 6rem) 0; }

.range { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.range__text .eyebrow { color: var(--paper-soft); opacity: 0.7; }
.range__text h2 { color: var(--paper); font-size: clamp(2.2rem, 4.6vw, 3.2rem); font-weight: 500; margin: 0 0 1.1rem; }
.range__text p { color: var(--paper-soft); font-size: 1.05rem; max-width: 46ch; margin: 0 0 2rem; }
.btn-range {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
  border: 1.5px solid var(--line-dk); border-radius: 2px; padding: 0.9rem 1.6rem;
  transition: border-color 0.25s, background 0.25s, color 0.25s, gap 0.25s var(--ease-soft);
}
.btn-range:hover { border-color: var(--amber); color: var(--amber); gap: 0.95rem; }
.range__media { position: relative; aspect-ratio: 5 / 4; background: var(--char-850); border: 1px solid var(--line-dk); border-radius: 3px; overflow: hidden; }
.range__media a { display: block; height: 100%; }
.range__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-soft); }
.range__media:hover img { transform: scale(1.04); }

/* light variant of the band (homepage Operations) */
.ops { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.range--light .range__text .eyebrow { color: var(--ink-soft); opacity: 1; }
.range--light .range__text h2 { color: var(--ink); }
.range--light .range__text p { color: var(--ink-soft); }
.range--light .btn-range { color: var(--ink); border-color: var(--line); }
.range--light .btn-range:hover { border-color: var(--amber-link); color: var(--amber-link); }
.range--light .range__media { background: var(--bg-2); border-color: var(--line); }

@media (max-width: 720px) {
  .range { grid-template-columns: 1fr; gap: 2rem; }
  .range__media { aspect-ratio: 16 / 10; }
  .range--light .range__media { order: -1; }
}
.fish__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.fish__intro { position: sticky; top: 120px; }
.fish__intro .eyebrow { color: var(--paper-soft); opacity: 0.7; }
.fish__intro h2 { color: var(--paper); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; margin: 0 0 1.3rem; }
.fish__intro p { color: var(--paper-soft); }
.fish__list { display: flex; flex-direction: column; }
.fitem { display: grid; grid-template-columns: 76px 1fr auto; gap: 1.6rem; align-items: center; padding: 1.7rem 0; border-top: 1px solid var(--line-dk); transition: padding-left 0.3s var(--ease-soft); }
.fitem:hover { padding-left: 0.6rem; }
.fitem__thumb { width: 76px; height: 60px; background: #000; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.fitem__thumb img { max-width: 88%; max-height: 88%; mix-blend-mode: lighten; }
.fitem__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.9rem; color: var(--paper); line-height: 1.1; }
.fitem__name .sci { display: block; font-size: 0.85rem; font-style: italic; color: var(--paper-soft); opacity: 0.7; font-family: var(--font-body); margin-top: 0.15rem; letter-spacing: 0.01em; }
.fitem--feature .fitem__name { font-size: 2.4rem; }
.fitem__tag { align-self: center; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--char-900); background: var(--amber); padding: 0.28rem 0.55rem; border-radius: 2px; }

/* ================= production sites ================= */
.sites__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2rem); }
.site { }
.site__img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-2); }
.site__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-soft); }
.site:hover .site__img img { transform: scale(1.04); }
.site__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.55rem; color: var(--ink); margin: 1rem 0 0.15rem; line-height: 1.1; }
.site__place { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber-link); }
.site__addr { font-size: 0.9rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* ================= closing CTA ================= */
.cta { padding: clamp(5rem, 11vw, 10rem) 0; text-align: center; }
.cta h2 { font-size: clamp(2.6rem, 6.5vw, 5rem); font-weight: 500; margin: 0 0 1.6rem; letter-spacing: -0.01em; }
.cta h2 em { font-style: italic; }
/* invisible button: the whole padded block links to the contact page, not just
   the glyphs. Looks exactly like the heading; a subtle hover hints it is clickable. */
.cta__enter { display: block; text-decoration: none; color: inherit; cursor: pointer;
  padding: clamp(0.8rem, 2.5vw, 1.8rem) 1rem; border-radius: 6px; }
.cta__enter h2 { margin: 0; }
.cta__enter h2 em { transition: color 0.45s var(--ease-soft); }
.cta__enter:hover h2 em { color: var(--amber-link); }
.cta__enter:focus-visible { outline: 2px solid var(--amber-link); outline-offset: 4px; }
.cta__meta { display: flex; justify-content: center; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; margin-top: 2.6rem; }
.cta__meta a, .cta__meta span { font-size: 1.02rem; color: var(--ink-2); }
.cta__meta a:hover { color: var(--amber-link); }
.cta__dot { color: var(--line); }

/* ================= footer ================= */
.site-footer { background: var(--char-900); color: var(--paper-soft); padding: 3.6rem 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer__brand img { height: 42px; margin-bottom: 1rem; }
.footer__note { font-size: 0.92rem; max-width: 34ch; opacity: 0.85; }
.footer__col h4 { font-family: var(--font-body); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-soft); opacity: 0.6; margin: 0 0 1rem; font-weight: 600; }
.footer__col a, .footer__col address { display: block; color: var(--paper-soft); font-style: normal; font-size: 0.95rem; margin-bottom: 0.5rem; }
.footer__col a:hover { color: var(--amber); }
.footer__bottom { border-top: 1px solid var(--line-dk); margin-top: 3rem; padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; opacity: 0.7; }

/* ================= reveal (rebuilt from scratch) =================
   Content fades in with a gentle rise (bottom → up). Only `opacity` and
   `transform: translateY` are animated — both are compositor-only, so a reveal
   never forces layout/reflow. Deliberately NO `will-change`: keeping it on
   dozens of nodes left them permanently promoted to their own layers, which
   could shift by a sub-pixel when a new page composited — the little
   navigation "jerk". Layers are now created only for the ~0.8s a transition
   runs, then released. Stagger between columns comes from --reveal-delay. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.35s var(--ease-soft), transform 1.35s var(--ease-soft); transition-delay: calc(var(--reveal-delay, 0s) + 0.03s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- SPA route transitions ----
   Home = vertical default: old fades out (opacity), new fades up (reveal).
   Subpages = horizontal pan: a flex track holds [old | new] side by side and
   is translated so the "camera" slides from one to the next. */
#page { position: relative; transition: opacity 0.18s var(--ease-soft); }
#page.is-leaving { opacity: 0; }
#page.is-anim { overflow-x: clip; }                 /* clip the off-screen slide */
.page-track { display: flex; align-items: flex-start; }
.page-track.is-x { transition: transform 0.62s var(--ease-pan); will-change: transform; }
.page-slide { flex: 0 0 100%; min-width: 0; }
@media (prefers-reduced-motion: reduce) {
  #page { transition: none; }
  .page-track.is-x { transition: none; }
}
/* display serif rises a touch further for a softer, slower entrance */
.hero h1.reveal, .intro__lead.reveal, .cta__enter.reveal, .section__head h2.reveal { transform: translateY(42px); }
.hero h1.reveal.is-in, .intro__lead.reveal.is-in, .cta__enter.reveal.is-in, .section__head h2.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ================= responsive ================= */
@media (max-width: 940px) {
  .header__nav { display: none; }
  .header__right .contact-link,
  .header__right .site-link { display: none; }
  .menu-btn { display: flex; }
  .site-header .wrap { grid-template-columns: 1fr auto 1fr; }
  .intro__grid, .fish__grid, .footer__grid { grid-template-columns: 1fr; }
  .intro__aside { padding-top: 0; }
  .fish__intro { position: static; }
  .features__grid { grid-template-columns: 1fr; }
  .feature + .feature { padding-left: 0; border-left: 0; }
  .sites__grid { grid-template-columns: 1fr 1fr; }
  /* let the hero heading wrap on narrow screens so it never overflows the page */
  .hero h1 { white-space: normal; }
}
@media (max-width: 600px) {
  .sites__grid { grid-template-columns: 1fr; }
  .fitem { grid-template-columns: 56px 1fr; gap: 1rem; }
  .fitem__tag { display: none; }
  .cta__meta { flex-direction: column; gap: 0.6rem; }
  .cta__dot { display: none; }
}


/* ============================================================
   Masthead, mounts and rules
   Purely presentational. Nothing here touches routing, the menu,
   the page-track panning or the reveal timings.

   A masthead in letterspaced small caps, rules that behave like the
   lines of a ledger, photographs mounted like plates rather than bled
   to the edge, square corners throughout, and colour used once, quietly.
   ============================================================ */

/* ---- masthead: small caps, letterspaced, ruled ----
   Every link in the band is one thing. The four on the left used to fade
   to amber on hover while the two on the right darkened instead, which read as
   two different navigations sharing a rail. One rule now covers all of them,
   and amber is left to mean exactly one thing up here: this is the link under
   your cursor, or the page you are on. */
.header__nav { gap: 2.5rem; }
.header__nav a,
.header__right a {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.25s var(--ease-soft);
}
.header__nav a:hover,
.header__right a:hover { color: var(--amber-link); }
.header__right { gap: 1.9rem; }

/* the address is the one item that stays lower case — an email set in capitals
   stops reading as an address — but it behaves like every other link */
.header__right .email {
  color: var(--ink-2);          /* beats the earlier .header__right .email amber */
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  font-weight: 500;
}
.header__right .email:hover { color: var(--amber-link); opacity: 1; }

/* ---- the page you are on ----
   The router already marks it: setActiveNav() puts aria-current="page" on the
   matching link in both the header and the mobile menu. Nothing styled it until
   now, so it was invisible. No JavaScript was touched to add this. */
.header__nav a[aria-current="page"],
.header__right a[aria-current="page"],
.menu__links a[aria-current="page"] { color: var(--amber-link); }

.site-header.is-solid { box-shadow: 0 1px 0 var(--line); }

/* ---- display: lighter and tighter at the large sizes ----
   Cormorant carries more elegance at 400 once the size is generous; 500 stays
   on the smaller headings, where 400 would go thin. */
.hero h1,
.cta h2,
.section__head h2 { font-weight: 400; }
h1, h2 { letter-spacing: -0.018em; }
.hero h1 { letter-spacing: -0.024em; }
.intro__lead { letter-spacing: -0.014em; }

/* ---- eyebrow: a printed label, ruled ---- */
.eyebrow { font-size: 0.63rem; letter-spacing: 0.3em; }
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: currentColor;
  opacity: 0.5;
  vertical-align: middle;
  margin: -0.15em 0.85rem 0 0;
}
/* the two centred labels get the rule on both sides, like an engraved card */
.hero__eyebrow::after,
.cta .eyebrow::after {
  content: "";
  display: inline-block;
  width: 26px; height: 1px;
  background: currentColor;
  opacity: 0.5;
  vertical-align: middle;
  margin: -0.15em 0 0 0.85rem;
}

/* ---- square corners throughout ---- */
.page-figure img,
.range__media,
.fitem__thumb,
.btn-range,
.cta__enter { border-radius: 0; }

/* ---- buttons: a ruled rectangle, nothing more ---- */
.btn-range {
  border-width: 1px;
  padding: 1rem 1.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
}
.range--light .btn-range { border-color: rgba(30, 28, 24, 0.26); }

/* ---- read-more links ---- */
.rmore { font-size: 0.68rem; letter-spacing: 0.2em; }

/* ---- photographs mounted as plates ----
   The hero photograph is brought inside the measure and set on a white mount
   with a hairline around it. A bled photograph is a magazine gesture; a mounted
   one is a gallery gesture, and it lets the stone field frame the picture. */
.hero__figure {
  width: min(100% - 3rem, var(--wrap));
  margin-inline: auto;
  background: var(--card);
  padding: clamp(0.9rem, 1.6vw, 1.7rem);
  border: 1px solid var(--line);
}
.hero__figure img { height: clamp(320px, 46vw, 560px); }
.hero__figure img.hero__seal {
  right: clamp(1.6rem, 3.4vw, 3.2rem);
  bottom: clamp(1.6rem, 3.4vw, 3.2rem);
}
.page-figure {
  background: var(--card);
  padding: clamp(0.9rem, 1.6vw, 1.7rem);
  border: 1px solid var(--line);
}
/* the range photograph is mounted the same way — white on the light band,
   the signature charcoal on the dark one, so the mount reads as part of the
   field rather than as a stripe around the picture */
.range__media { padding: clamp(0.7rem, 1.2vw, 1.2rem); background: var(--char-850); }
.range--light .range__media { background: var(--card); border-color: var(--line); }
.site__img { border: 1px solid var(--line); }
/* square corners on the remaining rounded details */
.gcard,
.contact-media,
.pitem__media,
.frow__name .tag,
.fitem__tag,
.btn-download { border-radius: 0; }
.btn-download { border-width: 1px; font-size: 0.68rem; letter-spacing: 0.2em; padding: 1rem 1.9rem; }
.gcard { padding: 2.2rem 2.2rem 1.9rem; }
.contact-media { padding: clamp(0.7rem, 1.2vw, 1.2rem); background: var(--card); }

/* ---- ledger rules ---- */
.cta { border-top: 1px solid var(--line); }
.cta .wrap--narrow { padding-top: clamp(1rem, 3vw, 2.5rem); }
.features__grid { border-bottom: 1px solid var(--line-soft); }

/* ---- the dark band: deeper, and the rules on it finer ---- */
.fish { background: var(--char-900); }
.site-footer { background: var(--char-900); }
.footer__col h4 { letter-spacing: 0.24em; }

/* ---- production-site captions ---- */
.site__place { letter-spacing: 0.2em; font-size: 0.63rem; }
.site__name { margin-top: 1.15rem; }

@media (max-width: 940px) {
  .hero__figure { width: 100%; padding: 0; border: 0; }
}

/* ---- archive photograph on the heritage page ----
   Same plate as the home-page hero: full measure, same height. The print is
   taller than the plate, so it is cut from the top and anchored at the bottom,
   where the people at work are. */
.page-figure--archive img {
  height: clamp(320px, 46vw, 560px);
  object-fit: cover;
  object-position: 50% 100%;
}