/* ============================================================
   DBO digitals — Relaunch design language
   Forked from the Anjuli de Boer system (warm neutral scale,
   square corners, hairline grids, house easing) and given its
   own voice: KingLear architectural display type, a wollweiß
   light base with immersive dark bands, sparing accent.
   ============================================================ */

/* ---- Fonts ------------------------------------------------ */
@font-face { font-family: "KingLear"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/KingLear-Medium.woff2") format("woff2"), url("fonts/KingLear-Medium.ttf") format("truetype"); }

@font-face { font-family: "Raleway"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/Raleway-Light.woff2") format("woff2"), url("fonts/Raleway-Light.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Raleway-Regular.woff2") format("woff2"), url("fonts/Raleway-Regular.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Raleway-Medium.woff2") format("woff2"), url("fonts/Raleway-Medium.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Raleway-SemiBold.woff2") format("woff2"), url("fonts/Raleway-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Raleway-Bold.woff2") format("woff2"), url("fonts/Raleway-Bold.ttf") format("truetype"); }

@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Epilogue-Regular.woff2") format("woff2"), url("fonts/Epilogue-Regular.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Epilogue-Medium.woff2") format("woff2"), url("fonts/Epilogue-Medium.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Epilogue-SemiBold.woff2") format("woff2"), url("fonts/Epilogue-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Epilogue-Bold.woff2") format("woff2"), url("fonts/Epilogue-Bold.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Epilogue-MediumItalic.woff2") format("woff2"), url("fonts/Epilogue-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/Epilogue-SemiBoldItalic.woff2") format("woff2"), url("fonts/Epilogue-SemiBoldItalic.ttf") format("truetype"); }

:root {
  /* Warm neutral scale (anthracite → cream) — never a cold gray */
  --ink-900: oklch(0.165 0.006 70);
  --ink-800: oklch(0.205 0.007 70);
  --ink-700: oklch(0.26 0.008 70);
  --ink-600: oklch(0.36 0.009 70);
  --ink-500: oklch(0.50 0.010 70);
  --ink-400: oklch(0.62 0.010 75);
  --paper-300: oklch(0.86 0.008 85);
  --paper-200: oklch(0.93 0.008 85);
  --paper-100: oklch(0.965 0.008 88);   /* wollweiß — light bg */
  --paper-050: oklch(0.985 0.006 85);

  /* Accent options (resolved per [data-accent] below) */
  --accent-sage-light: oklch(0.52 0.085 152);
  --accent-sage-dark:  oklch(0.76 0.070 150);

  /* Type families */
  --display: "KingLear", Georgia, serif;
  --sans: "Raleway", system-ui, -apple-system, sans-serif;
  --serif: Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid sizes */
  --fs-hero: clamp(2.6rem, 6.4vw, 6.2rem);
  --fs-display-lg: clamp(2rem, 4.4vw, 3.7rem);
  --fs-display-md: clamp(1.45rem, 2.6vw, 2.25rem);
  --fs-lede: clamp(1.1rem, 1.5vw, 1.38rem);
  --fs-body: 17px;
  --fs-small: 0.95rem;
  --fs-eyebrow: 0.72rem;

  /* Rhythm */
  --section-y: clamp(5rem, 10vw, 10rem);
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1340px;
  --measure: 40rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-dur: 0.95s;

  /* LIGHT base (wollweiß) is the default ground */
  --bg: var(--paper-100);
  --fg: var(--ink-900);
  --fg-muted: oklch(0.46 0.012 72);
  --surface: var(--paper-050);
  --hairline: color-mix(in oklab, var(--fg) 14%, transparent);
  --nav-bg: color-mix(in oklab, var(--paper-100) 80%, transparent);
}

/* ---- Accent resolution ----------------------------------- */
html[data-accent="sage"] { --accent: var(--accent-sage-light); --accent-soft: oklch(0.55 0.08 150 / 0.12); }
html[data-accent="sage"] .band--dark { --accent: var(--accent-sage-dark); --accent-soft: oklch(0.76 0.07 150 / 0.16); }
html[data-accent="mono"] { --accent: var(--ink-800); --accent-soft: color-mix(in oklab, var(--ink-900) 7%, transparent); }
html[data-accent="mono"] .band--dark { --accent: var(--paper-300); --accent-soft: color-mix(in oklab, var(--paper-100) 9%, transparent); }
/* fallback if attr unset */
html:not([data-accent]) { --accent: var(--accent-sage-light); --accent-soft: oklch(0.55 0.08 150 / 0.12); }

/* ---- Dark band override ---------------------------------- */
.band--dark {
  --bg: var(--ink-900);
  --fg: oklch(0.955 0.008 85);
  --fg-muted: oklch(0.66 0.012 80);
  --surface: var(--ink-800);
  --hairline: color-mix(in oklab, var(--fg) 15%, transparent);
  background: var(--ink-900);
  color: var(--fg);
}

/* ============================================================ */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: hidden;
}
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- Layout helpers -------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.measure { max-width: var(--measure); }

/* ---- Type primitives ------------------------------------- */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-muted);
  line-height: 1.5;
}
.eyebrow .num { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Editorial display — Playfair (KingLear is reserved for the logo) */
.kdisplay {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.kdisplay em { font-style: italic; color: var(--accent); }
.h-hero { font-size: var(--fs-hero); line-height: 1.02; }
.h-lg { font-size: var(--fs-display-lg); }
.h-md { font-size: var(--fs-display-md); }

.serif-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: color-mix(in oklab, var(--fg) 90%, transparent);
}
.muted { color: var(--fg-muted); }
.accent { color: var(--accent); }
.mono {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---- Buttons / links ------------------------------------- */
.btn {
  --bw: 1px;
  display: inline-flex; align-items: center; gap: 0.8em;
  font-family: var(--sans);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1.05em 1.7em;
  border: var(--bw) solid var(--fg);
  color: var(--fg); background: transparent;
  cursor: pointer; position: relative; overflow: hidden; white-space: nowrap;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn .arrow { transition: transform 0.5s var(--ease); position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }
.btn::after { content:""; position:absolute; inset:0; background: var(--fg); transform: scaleX(0); transform-origin:left; transition: transform 0.5s var(--ease); z-index:0; }
.btn:hover { color: var(--bg); }
.btn:hover::after { transform: scaleX(1); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--accent { border-color: var(--accent); color: var(--accent); }
.btn--accent::after { background: var(--accent); }
.btn--accent:hover { color: var(--bg); }
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid::after { background: var(--accent); }
.btn--solid:hover { color: var(--bg); border-color: var(--accent); }

.link-underline {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em;
  color: var(--fg); position: relative; padding-bottom: 2px;
}
.link-underline::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--accent); transform: scaleX(1); transform-origin:right; transition: transform 0.45s var(--ease); }
.link-underline:hover::after { transform: scaleX(0); transform-origin:left; }
.link-underline .arrow { color: var(--accent); transition: transform 0.45s var(--ease); }
.link-underline:hover .arrow { transform: translateX(5px); }

/* ---- Scroll-to-top --------------------------------------- */
/* Injected by dbo.js on every page. White surface disc so it stays legible
   over both the light editorial sections and the deep-blue dark bands; salmon
   fill on hover (follows the chosen accent). Appears past ~35% scroll depth. */
.totop {
  position: fixed; z-index: 75;
  right: clamp(1.1rem, 3vw, 2.2rem); bottom: clamp(1.1rem, 3vw, 2.2rem);
  width: clamp(46px, 12vw, 52px); height: clamp(46px, 12vw, 52px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FFFFFF; color: #1C244B;
  border: 1px solid color-mix(in oklab, #1C244B 14%, transparent);
  box-shadow: 0 8px 26px rgba(28, 36, 75, 0.18);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.94);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease),
              background-color 0.45s var(--ease), border-color 0.45s var(--ease), color 0.45s var(--ease);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop__i { font-size: 1.2rem; line-height: 1; font-weight: 600; transition: transform 0.45s var(--ease); }
.totop:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.totop:hover .totop__i { transform: translateY(-3px); }
.totop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* hide behind the full-screen mobile nav overlay while it's open */
body:has(.nav.is-open) .totop { opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.94); }
/* reduced motion / motion-off: fade only, no slide/scale */
@media (prefers-reduced-motion: reduce) {
  .totop { transition: opacity 0.25s linear, visibility 0.25s linear, background-color 0.25s linear, color 0.25s linear; transform: none; }
  .totop.is-visible { transform: none; }
  .totop__i { transition: none; }
}
body.no-motion .totop { transition: opacity 0.25s linear, visibility 0.25s linear, background-color 0.25s linear, color 0.25s linear; transform: none; }
body.no-motion .totop.is-visible { transform: none; }

/* ---- Reveals --------------------------------------------- */
/* Keyframe-driven (not transition-driven): a transition between a JS-toggled
   start/end state can deadlock at t=0 in some engines; an animation plays on a
   fixed timeline and always resolves to its end state. */
@keyframes dboReveal { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in { animation: dboReveal var(--reveal-dur) var(--ease) var(--rd, 0s) both; }
.reveal[data-delay="1"]{--rd:.08s;} .reveal[data-delay="2"]{--rd:.16s;} .reveal[data-delay="3"]{--rd:.24s;}
.reveal[data-delay="4"]{--rd:.32s;} .reveal[data-delay="5"]{--rd:.40s;} .reveal[data-delay="6"]{--rd:.48s;}
body.no-motion .reveal { opacity:1 !important; transform:none !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; animation:none;} }
/* Fallback: if the document animation timeline isn't advancing (some embedded /
   non-presented contexts freeze it), show content at rest with no animation so
   nothing ever stays stuck invisible. JS adds this class only when it detects a
   frozen timeline — normal browsers keep the full fade-up + scroll reveals. */
html.reveals-static .reveal { opacity:1 !important; transform:none !important; animation:none !important; }

/* ---- Placeholder frame ----------------------------------- */
.ph {
  position: relative;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--fg) 6%, transparent) 0 10px, transparent 10px 20px);
  border: 1px solid var(--hairline);
  display: grid; place-items: center; overflow: hidden;
}
.ph__label {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); background: var(--bg); padding: 0.5em 0.9em; border: 1px solid var(--hairline);
}
.ph__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; top:0; left:0; right:0; z-index: 80; border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease); }
.nav__inner { max-width: var(--maxw); margin-inline:auto; padding: clamp(1rem,2vw,1.6rem) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap: 2rem; }
.nav.is-scrolled { background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--hairline); }
.nav.is-scrolled .nav__inner { padding-block: clamp(0.7rem,1.3vw,1rem); }

.brand { display:inline-flex; align-items:baseline; gap:.5rem; }
.brand__name { font-family: var(--display); font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.brand__name .lc { text-transform: none; font-size: 0.92em; }

.nav__links { display:flex; align-items:center; gap: clamp(1rem,1.7vw,2rem); }
.nav__link { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--fg) 70%, transparent); position: relative; padding-block: .3em; transition: color .3s var(--ease); }
.nav__link::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background: var(--accent); transform: scaleX(0); transform-origin:left; transition: transform .35s var(--ease); }
.nav__link:hover { color: var(--fg); } .nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-studio { color: var(--accent); white-space: nowrap; }

.nav__cta { font-size:0.68rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; white-space:nowrap;
  border:1px solid var(--fg); padding:0.7em 1.2em; transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.nav__cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }

.nav__toggle { display:none; }
@media (max-width: 1040px) {
  .nav__links, .nav__cta.is-desk { display:none; }
  .nav__toggle { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:44px; height:44px; padding:0; margin-right:-10px; background:none; border:none; cursor:pointer; }
  .nav__toggle span { width:26px; height:1.5px; background: var(--fg); transition: transform .4s var(--ease), opacity .3s; }
  .nav.is-open .nav__toggle span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
  .nav.is-open .nav__toggle span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
  .nav__mobile { position:fixed; inset:0; z-index:70; background: var(--bg); display:flex; flex-direction:column; justify-content:safe center; gap: clamp(0.7rem,2.4vh,1.3rem); padding: calc(var(--gutter) + 5rem) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch; transform: translateY(-100%); transition: transform .6s var(--ease); }
  .nav.is-open .nav__mobile { transform: translateY(0); }
  .nav__mobile a { font-family: var(--serif); font-size: clamp(1.5rem,6vw,2.3rem); line-height:1.1; letter-spacing:-0.01em; }
  .nav__mobile a.is-studio { color: var(--accent); }
}
@media (min-width: 1041px){ .nav__mobile{ display:none; } }

/* ---- Mobile rhythm tuning --------------------------------- */
/* On phones the full editorial section rhythm (≈160px between
   sections) reads sparse and scroll-heavy. Tighten the vertical
   spacing token + hero clearance on small screens only; desktop
   pacing is unchanged. */
@media (max-width: 640px){
  :root { --section-y: clamp(3.25rem, 11vw, 4.75rem); }
}
@media (max-width: 400px){
  .foot__col a { padding-block: 0.55rem; }
}