/* =============================================================================
   blichfeldt.no — shared stylesheet

   Implements the design handoff (Brandbook/design_handoff_blichfeldt_site).
   Tokens, type scale and spacing are taken from that document and are final;
   don't "improve" them without a new handoff.

   Two rules from the handoff that are easy to break by accident:
   1. There is exactly ONE accent (#FF6A18). Never introduce a second.
   2. Border radius is 0 everywhere. No shadows, no gradients except the two
      photo scrims defined below.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ---
   Self-hosted rather than pulled from Google. Three reasons: it keeps
   visitor IP addresses away from Google (the site asks consent before it
   loads a tracking pixel, so quietly leaking IPs to a third party for fonts
   would undercut that), it avoids widening the CSP to fonts.googleapis.com
   and fonts.gstatic.com, and it removes a third-party round trip from the
   critical path. Both families are SIL Open Font License.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------- tokens --- */

:root {
  --ground: #000000;
  --panel: #0A0908;
  --ink: #E8E4DC;
  --ink-75: rgba(232, 228, 220, 0.75);
  --ink-70: rgba(232, 228, 220, 0.7);
  --ink-60: rgba(232, 228, 220, 0.6);
  --ink-55: rgba(232, 228, 220, 0.55);
  --ink-50: rgba(232, 228, 220, 0.5);
  --ink-45: rgba(232, 228, 220, 0.45);
  --ink-40: rgba(232, 228, 220, 0.4);
  --hairline: rgba(232, 228, 220, 0.12);
  --border: rgba(232, 228, 220, 0.16);
  --border-card: rgba(232, 228, 220, 0.14);
  --accent: #FF6A18;
  --accent-ink: #0A0908;

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 48px;
  --label-col: 200px;
  --label-gap: 64px;
  --nav-h: 66px;
  --max: 1440px;
}

/* ----------------------------------------------------------------- base --- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky nav. */
  scroll-padding-top: calc(var(--nav-h) + 10px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

/* The handoff draws no focus state but says explicitly not to ship without
   one. Accent outline, offset so it reads against the black ground. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--accent-ink); }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* Arrow glyphs are drawn, not typed. U+2192/U+2197 are outside the Latin
   subsets of both webfonts, so as text they would silently fall back to a
   system font — and U+2197 can pick up emoji presentation on some platforms.
   SVG renders identically everywhere and inherits currentColor. */
.arr {
  width: 0.85em;
  height: 0.85em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  vertical-align: -0.06em;
}

/* --------------------------------------------------------------- shells --- */

.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

/* Section with a fixed label column to its left. Below the tablet break the
   label stacks above the content instead. */
.band {
  padding: 96px var(--gutter) 88px;
  display: flex;
  gap: var(--label-gap);
}
.band--top { border-top: 1px solid var(--hairline); }

.label {
  width: var(--label-col);
  flex: none;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-50);
  margin: 0;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.nav__in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
}
.nav__mark {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 62, 'wght' 900;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav__links {
  display: flex;
  gap: 26px;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.nav__links a[aria-current='page'],
.nav__links .is-accent { color: var(--accent); }

/* ----------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  height: 780px;
  display: flex;
}
.hero__text {
  width: 620px;
  flex: none;
  padding: 96px 0 56px var(--gutter);
  display: flex;
  flex-direction: column;
}
/* The name must never wrap or clip — it broke twice during design for exactly
   this reason, so it is bound to its container rather than set in fixed px.
   Measured with the real Archivo at wdth 88 / wght 900: "BLICHFELDT" runs
   5.764px wide per 1px of font-size, so the handoff's 88px occupies 507px of
   the 572px column and the widest that would still fit is ~99px.
   15.38cqi resolves to exactly 88px at the design column width and scales the
   name down in proportion if that column ever narrows, keeping the same ~11%
   margin at every size. */
.hero__name {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 88, 'wght' 900;
  text-transform: uppercase;
  font-size: min(88px, 15.38cqi);
  line-height: 0.84;
  letter-spacing: -0.04em;
  white-space: nowrap;
  margin: 0;
  font-weight: 900;
}
.hero__text { container-type: inline-size; }

.hero__meta {
  display: flex;
  gap: 20px;
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-70);
}
.hero__facts {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fact { display: flex; flex-direction: column; gap: 8px; }
.fact__k {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-50);
  text-transform: uppercase;
}
.fact__v {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: 22px;
  letter-spacing: -0.015em;
}
.hero__photo { flex: 1; position: relative; overflow: hidden; }
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
/* Dissolves the photo into the left column so there is no visible seam. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0) 34%);
}

/* ------------------------------------------------------------------ bio --- */

.bio__body {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.bio__body p { margin: 0; }

/* -------------------------------------------------------------- gallery --- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap: 4px;
  padding: 0 4px 4px;
}
.gallery > * { overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery__hero { grid-column: span 2; grid-row: span 2; }

/* ---------------------------------------------------------------- press --- */

.press__col { flex: 1; display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.quote { display: flex; flex-direction: column; gap: 16px; max-width: 980px; margin: 0; }
.quote__text {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: 38px;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: pretty;
  margin: 0;
}
.quote__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-60);
  font-style: normal;
}
.quote__pub { color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--panel);
  padding: 24px 22px 26px;
  border: 1px solid var(--border-card);
  transition: border-color 0.12s linear;
}
.card:hover { border-color: var(--accent); color: var(--ink); }
.card__meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-55);
  text-transform: uppercase;
}
.card__title {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
/* margin-top:auto gives every card's CTA a common baseline regardless of
   how many lines the title runs to. */
.card__cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --------------------------------------------------------------- listen --- */

.listen { padding-top: 0; }
.listen__wells { flex: 1; display: flex; gap: 4px; min-width: 0; }
.well {
  flex: 1;
  min-width: 0;
  height: 260px;
  background: var(--panel);
  border: 1px solid var(--border-card);
}
.well iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -------------------------------------------------------------- booking --- */

.booking {
  border-top: 1px solid var(--hairline);
  padding: 76px var(--gutter) 96px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.booking__l { display: flex; flex-direction: column; gap: 18px; }
.booking__cta {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 125, 'wght' 900;
  text-transform: uppercase;
  font-size: 56px;
  line-height: 0.9;
  letter-spacing: -0.035em;
}
.booking__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.legal {
  border-top: 1px solid var(--hairline);
  padding: 22px var(--gutter) 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.legal a { color: var(--ink-40); }
.legal a:hover { color: var(--accent); }
.legal__set { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Links page
   ========================================================================== */

.lp {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.lp__head { position: relative; height: 300px; overflow: hidden; }
.lp__head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}
/* Must resolve to solid black at the bottom edge so the first link group
   sits on true ground rather than on a grey band. */
.lp__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 45%, #000 100%);
}
.lp__id {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Measured: at wdth 78 / wght 900 the name runs 5.16px wide per 1px of
   font-size, so 44px needs 227px and the 440px design gives it 396px. 16cqi
   holds the full 44px down to a ~275px container — narrower than any phone —
   and only then starts scaling, rather than shrinking it on every 390px
   handset the way a tighter cap did. */
.lp__name {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 78, 'wght' 900;
  text-transform: uppercase;
  font-size: min(44px, 16cqi);
  line-height: 0.86;
  letter-spacing: -0.035em;
  white-space: nowrap;
  margin: 0;
  font-weight: 900;
}
.lp__id { container-type: inline-size; }
.lp__meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-75);
}
.lp__body {
  padding: 26px 22px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
}
.group { display: flex; flex-direction: column; gap: 8px; }
.group__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--ink-45);
  padding-bottom: 2px;
  text-transform: uppercase;
  margin: 0;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  transition: border-color 0.12s linear;
}
.row:hover { border-color: var(--accent); color: var(--ink); }
.row__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row__title {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.row__sub { font-size: 11px; color: var(--ink-60); }
.row__g { font-size: 13px; color: var(--ink-50); display: flex; align-items: center; }
/* The one filled element on either page. */
.row--fill {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.row--fill:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.row--fill .row__sub { color: rgba(10, 9, 8, 0.7); }
.row--fill .row__g { color: rgba(10, 9, 8, 0.65); }

.strip { display: flex; gap: 4px; height: 96px; }
.strip > span { flex: 1; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; }

.lp__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  text-transform: uppercase;
}
.lp__foot a { color: var(--ink-40); }
.lp__foot a:hover { color: var(--accent); }

/* ==========================================================================
   Prose pages (privacy, FAQ)
   ========================================================================== */

.prose { max-width: 760px; }
.prose h1 {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 110, 'wght' 900;
  text-transform: uppercase;
  font-size: clamp(38px, 7vw, 56px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.prose__updated {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-50);
  text-transform: uppercase;
  margin: 0 0 48px;
}
.prose h2 {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 44px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.prose h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.prose p, .prose li {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--ink-75);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 22px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.note {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 18px 22px;
  margin: 0 0 16px;
}
.note p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Responsive — rules from the handoff's "Responsive behaviour" section.
   Not drawn in the prototypes; implemented to the written brief.
   ========================================================================== */

/* 1024–1440: fluid gutters, hero column shrinks. The hero name is bound to
   its container with cqi so it follows the column down without clipping. */
@media (max-width: 1440px) {
  :root { --gutter: clamp(24px, 3.4vw, 48px); }
}
@media (max-width: 1200px) {
  :root { --label-col: 150px; --label-gap: 40px; }
  .hero__text { width: clamp(460px, 44vw, 620px); }
  .booking__cta { font-size: clamp(38px, 4.4vw, 56px); }
  .quote__text { font-size: clamp(28px, 3vw, 38px); }
}

/* Tablet: label columns stack above content; hero becomes photo over text. */
@media (max-width: 1024px) {
  .band { flex-direction: column; gap: 24px; padding-top: 72px; padding-bottom: 64px; }
  .label { width: auto; }

  .hero { flex-direction: column; height: auto; }
  .hero__photo { order: -1; width: 100%; height: 420px; flex: none; }
  .hero__photo img { object-position: 50% 20%; }
  /* Scrim rotates so the photo resolves downward into the text block. */
  .hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, #000 100%); }
  .hero__text {
    width: 100%;
    padding: 28px var(--gutter) 56px;
    gap: 0;
  }
  .hero__facts { margin-top: 40px; flex-direction: row; gap: 48px; flex-wrap: wrap; }

  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .listen__wells { flex-direction: column; }
  .well { height: 232px; }
}

/* Phone */
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  .nav__in { padding: 16px var(--gutter); gap: 16px; }
  /* Five items don't need a drawer; the middle three drop and the two that
     matter stay. */
  .nav__links a:not(.is-accent):not(.nav__keep) { display: none; }

  .hero__photo { height: 340px; }
  .hero__name { font-size: min(44px, 13.5cqi); }
  .hero__facts { flex-direction: column; gap: 20px; }
  .bio__body { font-size: 17px; }
  .quote__text { font-size: 24px; line-height: 1.2; }

  .gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  /* The tall cell keeps its prominence as the first frame. */
  .gallery__hero { grid-column: span 1; grid-row: span 1; height: 340px; }

  .booking { padding-top: 56px; padding-bottom: 64px; gap: 32px; }
  .booking__cta { font-size: clamp(32px, 9.5vw, 44px); }
  .prose h2 { font-size: 20px; }
}