/* =========================================================================
   page.css — the shared subpage template.

   The homepage is the performance. These five pages are utility with ONE
   strong typographic move, which is the whole reason they read as calm
   next to it: no hero photograph, no arcs, no marquees, no scrolling text.
   A plain cream field, one enormous title, a narrow intro column, and the
   right half of the screen deliberately left empty.

   Each page gets exactly one signature motion of its own. Anything more and
   six pages of effects becomes exhausting rather than impressive.
   ========================================================================= */

.page .nav { position: fixed; }

/* No band (404, and any page built without one): the nav is solid from the
   first pixel and the content has to clear it. Pages WITH a band override
   this to 0, because the band runs underneath the transparent nav. */
.page-body { padding-top: var(--nav-h-solid); }
.page--band .page-body { padding-top: 0; }

/* =========================================================================
   TITLE BAND
   ~42vh, not a full viewport: this is a page heading, not a hero.

   The band now carries a photograph. That is a change of kind, not of
   degree, and it moves two things:

   1. The title is cream on a dark scrim rather than teal/cocoa on cream.
      Keeping --page-accent over a photograph would have put teal-deep on a
      scrimmed mint flat-lay, which is roughly 1.6:1. The accent survives as
      the eyebrow and section-heading colour on the cream body below.

   2. The nav is transparent over the band and solidifies past it. Before
      this, subpage nav links were cream-on-cream — the actual bug being
      fixed here, and the reason the nav links are measured per page rather
      than assumed to inherit the homepage's result.
   ========================================================================= */
.page-head {
  min-height: 42vh;
  display: grid;
  align-content: center;
  padding-block: clamp(var(--s-12), 7vw, var(--s-24)) clamp(var(--s-8), 4vw, var(--s-16));
  background: var(--cream);
}

.page-head--photo {
  position: relative;
  /* Own stacking context: the media sits at z-index 1 and the fixed nav at
     --z-nav, and without this the band's children would be free to compare
     themselves against the nav rather than against each other. */
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(300px, 42vh, 440px);
  /* Clears the transparent nav, which is --nav-h tall and overlaps the band.
     The extra half is so the title never crowds the links. */
  padding-top: calc(var(--nav-h) + clamp(var(--s-6), 3vw, var(--s-12)));
  background: var(--teal-deep);   /* what shows for the instant before decode */
}

.page-head__media {
  position: absolute;
  z-index: 1;
  /* Taller than the band so the parallax shift can never expose an edge.
     40px of travel against a 320px band needs ~13%; 16% is the margin. */
  inset: -8% 0;
  will-change: transform;
}
.page-head__media picture { display: block; width: 100%; height: 100%; }
.page-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject in both frames sits centre-low; the top of the frame is
     mostly ground, which is what we want under the nav. */
  object-position: center 45%;
}

/* If the photograph 404s the band must stay DARK, not fall back to cream —
   the title and nav links are cream by then, and a cream fallback would
   hide both. A teal gradient rather than flat teal so it still reads as a
   band with depth rather than a broken image slot. */
.page-head--photo.is-photoless .page-head__media { display: none; }
.page-head--photo.is-photoless {
  background:
    radial-gradient(120% 90% at 18% 30%, rgba(var(--cream-rgb), .12) 0%, transparent 60%),
    linear-gradient(160deg, #14524A 0%, var(--teal-deep) 58%, #0A2E29 100%);
}

/* ---- Scrim --------------------------------------------------------------
   Three layers, and each one exists for a measured reason.

   The homepage hero is a full viewport, so its bottom gradient has 45% of
   the screen to fade across. This band is ~40vh, and BOTH things that need
   cover are inside it: the nav across the top, the title across the middle
   left. There is no room for a soft fade, so the layers are stacked and
   tuned against the rendered pixels rather than scaled down from the hero.

   Left-weighted because the titles are left-aligned. The right of the frame
   stays legible photograph, which is the entire point of putting one here.
   ------------------------------------------------------------------------ */
.page-head__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* 1 — nav band. Reaches its floor by 40% so it never darkens the title
           row a second time. */
    linear-gradient(to bottom,
      rgba(var(--ink-rgb), .82) 0%,
      rgba(var(--ink-rgb), .66) 14%,
      rgba(var(--ink-rgb), .38) 28%,
      rgba(var(--ink-rgb), .20) 44%,
      rgba(var(--ink-rgb), .14) 100%),
    /* 2 — title band, left-weighted, full height.

       HELD FLAT TO 72%, not faded from 40%. The first version started
       falling away at 40% and was gone by 84%, which was tuned against
       "MENI". The longest title on the site is "MOJ NALOG", which at 187px
       reaches x=1062 of 1440 — 74% — so its last three letters sat on bare
       photograph. Measured 2.05:1 on nalog and 2.38:1 on kontakt while meni
       passed at 5+, which is the signature of a scrim tuned to one title
       length rather than to the longest.

       The plateau ends where the widest title does, and the right quarter
       stays clear photograph. */
    linear-gradient(to right,
      rgba(var(--ink-rgb), var(--band-scrim)) 0%,
      rgba(var(--ink-rgb), var(--band-scrim)) 72%,
      rgba(var(--ink-rgb), calc(var(--band-scrim) * .62)) 84%,
      rgba(var(--ink-rgb), .10) 94%,
      rgba(var(--ink-rgb), .05) 100%),
    /* 3 — floor, so the band does not hard-cut into the cream body. */
    linear-gradient(to top,
      rgba(var(--ink-rgb), .30) 0%,
      rgba(var(--ink-rgb), 0) 26%);
}

.page-head__content { position: relative; z-index: 3; }

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 13vw, 200px);
  line-height: .86;
  letter-spacing: var(--track-hero);
  font-variation-settings: var(--wonk-hero);
  text-transform: uppercase;
  color: var(--page-accent, var(--teal-deep));
  text-wrap: balance;
  margin: 0;
}
.page-head--photo .page-title { color: var(--cream); }

/* Hot pink at display size measures 2.87:1 on cream — acceptable for a
   large GRAPHICAL element, but it was never allowed to be the only way a
   page is identified, so it carried an ink outline.

   On the photographic band the arithmetic inverts: the pink now sits on a
   dark scrim, where it is a fill on dark rather than text on light, and the
   ink stroke is invisible against ink. The stroke turns cream, which both
   measures and does the job the ink stroke was doing on cream — separating
   the letterforms from what is behind them. */
.page-title--outlined {
  -webkit-text-stroke: clamp(1.5px, .18vw, 3px) var(--ink);
  paint-order: stroke fill;
}
.page-head--photo .page-title--outlined {
  color: var(--page-accent, var(--hot-pink));
  -webkit-text-stroke-color: var(--cream);
}

.page-intro {
  /* Narrow, left. The right half stays empty on purpose — that emptiness
     IS the layout, and filling it is the one change that would make these
     pages look like every other template. */
  max-width: min(45%, 46ch);
  margin-top: clamp(var(--s-5), 2vw, var(--s-8));
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--cocoa);
}
/* The lead sits on cream BELOW the band now — see build-pages.js. Narrow,
   left, right half empty, exactly as the subpage template had it. */
.page-lead {
  padding-block: clamp(var(--s-8), 4vw, var(--s-16)) 0;
}
.page-lead .page-intro { margin-top: 0; }

@media (max-width: 900px) {
  .page-intro { max-width: none; }
  .page-head { min-height: 0; }
  /* The left-weighted gradient is meaningless once the text spans the full
     width — at this size the whole band has to carry it. */
  .page-head--photo .page-intro { max-width: 40ch; }
  .page-head__scrim {
    background:
      linear-gradient(to bottom,
        rgba(var(--ink-rgb), .82) 0%,
        rgba(var(--ink-rgb), .68) 16%,
        rgba(var(--ink-rgb), .58) 34%,
        rgba(var(--ink-rgb), .58) 100%),
      linear-gradient(to top,
        rgba(var(--ink-rgb), .30) 0%,
        rgba(var(--ink-rgb), 0) 26%);
  }
}

.page-eyebrow {
  color: var(--teal-deep);
  margin-bottom: var(--s-4);
}
.page-head--photo .page-eyebrow { color: var(--bubblegum); }

@media (prefers-reduced-motion: reduce) {
  .page-head__media { transform: none !important; }
}

/* =========================================================================
   PAGE TRANSITION
   A short cream wipe reusing the preloader's exit language, NOT the whole
   preloader animation — nobody wants the loading sequence five more times.
   Hidden by default and gated on html.js, so without JavaScript this is
   never painted and links navigate normally.
   ========================================================================= */
.page-wipe { display: none; }
html.js .page-wipe {
  display: block;
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--cream);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}
/* Covering: slides up from the bottom as the outgoing page leaves. */
html.js .page-wipe.is-covering {
  transform: translateY(0);
  transition: transform .35s var(--ease-in-out);
  pointer-events: all;
}
/* Uncovering: continues in the SAME direction rather than reversing, so the
   two halves read as one movement across the navigation instead of a
   curtain that opens where it closed. */
html.js .page-wipe.is-uncovering {
  transform: translateY(-100%);
  transition: transform .35s var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  html.js .page-wipe { display: none !important; }
}

/* =========================================================================
   SHARED CONTENT BLOCKS
   ========================================================================= */

/* A marked, styled block where real content is still missing. It must never
   be mistaken for finished copy, so it is visibly provisional: dashed rule,
   a label, and sized for the copy that will replace it. */
.placeholder-block {
  border: 2px dashed rgba(var(--cocoa-rgb), .32);
  border-radius: var(--r-md);
  padding: clamp(var(--s-6), 3vw, var(--s-10));
  background: rgba(var(--sand-rgb, 244, 227, 206), .28);
}
.placeholder-block__label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cocoa);
  background: var(--bubblegum);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  margin-bottom: var(--s-4);
}
.placeholder-block p { color: var(--cocoa); opacity: .85; }

/* Section heading used across the subpages. */
.page-section { padding-block: var(--pad-section); }
.page-section__head { margin-bottom: clamp(var(--s-6), 3vw, var(--s-10)); }
.page-section__title { color: var(--teal-deep); }