/* ============================================================================
   THEME — premium-b · "Premium, material"
   P220 Phase 0 scaffold. Direction: restraint through TEXTURE AND DEPTH —
   paper, subtle grain, fine rules. Warmer than A.

   CONTRACT: see the header of premium-a.css. Enforced by
   scripts/check-theme-contract.mjs. Every rule scoped to
   html[data-theme="premium-b"]; no invented tokens; frozen tokens untouched.

   PHASE 0 STATUS: field/ink/rhythm set. The grain layer, the rule system and
   the section layout variants land in Phase 2.

   NOTE ON THE DARKER FIELD: this theme moves the page tone DOWN, which is the
   one direction that reduces contrast. Every ink tone below was re-derived
   against this field rather than inherited — brand-tokens.css's ratios were
   computed against Linen and do not carry over. The checker re-measures.
   ============================================================================ */

html[data-theme='premium-b'] {
  /* --- Field ---------------------------------------------------------------
     Deeper and warmer than Linen — a laid paper rather than a wall. This is
     the theme where the page has a BODY: the surfaces separate by tone, not
     by border, and the footer descends through three steps of the same hue. */
  --color-bg: #f3ebdd;
  --color-surface: #eee3d1; /* DERIVED bg L-3.5 — panels sit ON the paper */
  --color-surface-deep: #e6d8c1; /* DERIVED bg L-7.5 — footer field */
  --color-surface-deepest: #dccbaf; /* DERIVED bg L-12 — footer base bar */

  /* --- Ink -----------------------------------------------------------------
     Warm near-black, carrying the field's hue rather than fighting it. Muted
     and subtle tones are pulled DOWN from the base values because the field
     is darker: the base --color-text-muted (#62605d) measures 5.80:1 on Linen
     but drops on this paper, and captions are the tier that fails first. */
  --color-text: #241f1a;
  --color-text-muted: #4f4740; /* DERIVED text 76% on bg */
  --color-text-subtle: #5a5147; /* DERIVED text 68% on bg — captions */

  /* Fine rules are a primary device in this direction, so borders are more
     present than anywhere else in the set — visible, not implied. */
  --color-border: #d8cab3;
  --color-border-strong: #c6b498;

  /* --- Accent, RE-DERIVED for this field -----------------------------------
     The base Old Rose tiers were derived against Linen and DO NOT survive a
     darker paper: --color-accent-deep (#9b6163) measures only 4.14:1 on this
     field and 3.08:1 on the footer base bar. Both tiers are walked down the
     same hue until they clear AA with margin on the fields they actually
     paint. Measured with the same WCAG formula brand-tokens.css used (the
     checker self-tests against its recorded ratios):
       --color-accent-deep    #815c5e → 4.88:1 on bg, 4.55:1 on surface
       --color-accent-deepest #6c4d4f → 5.29:1 on surface-deep, 4.67:1 on
                                        surface-deepest
     This is the cost of moving the field down, and it is why a theme is a
     token set rather than a background-color swap. */
  --color-accent-deep: #815c5e;
  --color-accent-deepest: #6c4d4f;

  /* Channel triplets — must track their hex twins. The scrim is warmed to sit
     inside this theme's paper hue rather than reading as a neutral grey film
     over it; texture is the whole argument of this direction, and a cool
     scrim flattens it. */
  --color-bg-rgb: 243 235 221; /* = --color-bg */
  --color-on-image-rgb: 243 235 221;
  --color-text-rgb: 36 31 26; /* = --color-text */
  --color-scrim-rgb: 30 24 18; /* warmer than base (24 20 17) */

  /* --- Type ----------------------------------------------------------------
     Tighter and more traditional than A: this direction gets its premium
     from surface, so the type stays closer to the base and lets the material
     carry the difference. Display sizes move only slightly. */
  --font-size-h1: clamp(2.5rem, 4.4vw, 4rem); /* 40 → 64px */
  --font-size-h2: clamp(1.9375rem, 2.9vw, 2.625rem); /* 31 → 42px */
  --line-height-body: 1.68;
  --tracking-display: 0.02em; /* a touch more than base — letterpress feel */

  /* --- Space ---------------------------------------------------------------
     Moderate. The texture does the work; over-spacing would empty the page of
     exactly the density this direction is arguing for. */
  --section-pad: clamp(3.5rem, 5.6vw, 5.5rem);
  --content-max: 78rem; /* 1248px */

  /* Zero radius: printed matter has cut edges, not rounded ones. */
  --radius: 0px;
  --radius-lg: 0px;
}

/* ===========================================================================
   LAYOUT VARIANT — premium-b · material
   Phase 2. Direction is "restraint through texture and depth". Where A
   subtracts, B keeps the density and changes the SURFACE: the composition is
   flipped, the portrait becomes the dominant object rather than an overlay,
   and a grain layer plus visible rules give the page a physical body.
   =========================================================================== */

/* Flipped and re-weighted: image dominant, copy the narrower column. Reading
   order in the DOM is unchanged — only the visual order moves — so keyboard
   and screen-reader order still follow the markup. */
html[data-theme='premium-b'] .hero {
  grid-template-columns: 42fr 58fr;
  min-height: clamp(32rem, 40vw, 40rem);
}
html[data-theme='premium-b'] .hero__copy {
  order: 2;
  align-items: center;
  padding: var(--space-4) 0;
}
html[data-theme='premium-b'] .hero__scene {
  order: 1;
}

/* The overlapping portrait becomes a small plate with a real edge — printed
   matter, not a dissolve — and it sits ABOVE the headline in normal flow.

   It was first written as an absolutely-positioned inset at bottom-left of the
   copy column, which is how the base theme places it. That collides here: this
   theme also moves .hero__text to margin-left:0 in the same column, so the
   plate landed directly on top of the headline and the lead, and both became
   unreadable. Absolute positioning inside a column this theme also re-flows is
   a trap — taking it into normal flow makes the collision impossible rather
   than merely tuned away. */
html[data-theme='premium-b'] .hero__copy {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
html[data-theme='premium-b'] .hero__portrait {
  /* relative, NOT static. .ph-photo inside is position:absolute; inset:0, so
     the figure has to remain a containing block. Setting it static handed the
     photo to .hero__copy (the next positioned ancestor) and it filled the whole
     column behind the headline — a worse failure than the one being fixed, and
     invisible if you measure the FIGURE instead of the painted image. */
  position: relative;
  inset: auto;
  width: clamp(7rem, 11vw, 10rem);
  aspect-ratio: 3 / 4;
  margin: 0 0 var(--space-2) var(--gutter);
  border: 1px solid var(--color-border-strong);
  flex: none;
}
html[data-theme='premium-b'] .hero__portrait .ph-photo {
  /* No dissolve in this direction — the mask is the base theme's device. */
  -webkit-mask: none;
  mask: none;
}
html[data-theme='premium-b'] .hero__text {
  margin-left: 0;
  width: min(28rem, 100%);
  padding-inline: var(--gutter);
}

/* GRAIN. The signature of the direction, and the reason it is called material.
   A repeating-gradient weave rather than a noise PNG: it costs no request, it
   scales, and it tints itself from the page ink so it works on any field this
   theme is given. Pointer-events none so it never intercepts a click. */
html[data-theme='premium-b'] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgb(var(--color-text-rgb) / 0.022) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgb(var(--color-text-rgb) / 0.016) 0 1px,
      transparent 1px 4px
    );
}
@media (prefers-reduced-motion: no-preference) {
  /* static — declared here only to document that the grain never animates */
}

/* Fine rules become a present device rather than an implied one. */
html[data-theme='premium-b'] .statband {
  border-block: 1px solid var(--color-border-strong);
}
html[data-theme='premium-b'] .card {
  border: 1px solid var(--color-border);
}


/* === Phase 2b — Dave, 2026-08-22 ==========================================
   "Prémium B should be the same but g05 and g08 switched, and the header in
   green too." Same hero geometry as A; the face swap is done by .ph-pick in
   placeholders.css, so only the header field changes here.
   ========================================================================= */
html[data-theme='premium-b'] .hero {
  grid-template-columns: 52fr 48fr;
  min-height: clamp(32rem, 42vw, 42rem);
}
html[data-theme='premium-b'] .hero__copy { order: 1; align-items: center; }
html[data-theme='premium-b'] .hero__scene { order: 2; }
html[data-theme='premium-b'] .hero__portrait { display: none; }
html[data-theme='premium-b'] .hero__text {
  width: min(34rem, 100%);
  margin-left: clamp(var(--gutter), 6vw, 5rem);
  padding-inline: 0 var(--space-3);
}
html[data-theme='premium-b'] .hero h1 { font-size: clamp(2.75rem, 5.2vw, 4.5rem); }
html[data-theme='premium-b'] .hero__scene .ph-photo { object-position: center 22%; }

/* Green header field. The wash beneath it is a page-field ramp, so it has to
   be suppressed here or it lays cream over the green. Nav ink flips to the
   on-image tone for contrast. */
html[data-theme='premium-b'] .site-header { background: var(--color-primary-deep); }
html[data-theme='premium-b'] .site-header::before { background: none; }
html[data-theme='premium-b'] .site-header .nav a,
html[data-theme='premium-b'] .site-header .logo__word,
html[data-theme='premium-b'] .site-header .lang-switcher a,
html[data-theme='premium-b'] .site-header summary { color: var(--color-on-image); }
html[data-theme='premium-b'] .site-header .logo__mark { background-color: var(--color-on-image); }
html[data-theme='premium-b'] .site-header .burger span { background: var(--color-on-image); }