/* Heliodon - architecture studio theme
   Idea: scrolling through a page is one day. The sun rides an arc in the header, the paper warms from dawn to dusk,
   and window shadows slide over the big photos like light moving through a room.
   All colours and fonts are tokens in :root (change them there). */

/* ---------- TOKENS ---------- */
:root {
  /* paper through the day: the page background blends dawn -> noon -> late as you scroll (main.js) */
  --dawn: #f4f2ee;
  --noon: #efebe4;
  --late: #e7e1d6;
  --paper: var(--dawn);
  --sheet: #faf9f6;          /* project sheets, menu */
  --ink: #22262a;            /* text */
  --soft: #686c70;           /* quiet text */
  --line: rgba(34, 38, 42, .16);
  --sun: #f0b429;            /* the only accent: sun gold (shapes and fills, never body text on paper) */
  --on-sun: #22262a;         /* text on the accent */
  --night: #22262a;          /* anthracite: the day section, dusk call to action, footer */
  --night-ink: #eeece6;
  --shadow: 34, 38, 42;      /* colour of window shadows on photos (r, g, b) */

  --f-head: 'Familjen Grotesk', system-ui, sans-serif;
  --f-text: 'Familjen Grotesk', system-ui, sans-serif;
  --f-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --head-weight: 400;
  --head-track: -.035em;     /* only for text before the even spacing runs (main.js) */

  --wrap: min(1440px, 100% - 2 * var(--gut));
  --gut: clamp(16px, 4vw, 56px);
  --header: 72px;
  --strip: 60px;             /* height of a project sheet's title strip */
  --radius: 2px;
  --ease: cubic-bezier(.22, .7, .12, 1);
}
/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol { margin: 0; }
ol { padding: 0; list-style: none; }
::selection { background: var(--sun); color: var(--on-sun); }
.wrap { width: var(--wrap); margin-inline: auto; }
.head { font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); line-height: 1.04; }
.mono, .label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.label { color: var(--soft); display: flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); }
.lead { font-size: clamp(17px, 1.4vw, 20px); max-width: 34ch; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* links and buttons: a small sun that rises to fill the button */
.link { display: inline-flex; gap: 10px; align-items: center; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: border-color .4s; }
.link::after { content: "\2192"; transition: transform .5s var(--ease); }
.link:hover { border-color: var(--ink); }
.link:hover::after { transform: translateX(4px); }
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 26px 16px 20px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  font-weight: 500; font-size: 15px; text-decoration: none;
}
.btn-sun { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); flex: none; transition: transform .8s var(--ease); z-index: -1; }
.btn:hover .btn-sun { transform: scale(40); }
.btn-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { color: var(--on-sun); }
.btn-light { background: var(--night-ink); color: var(--night); }
.btn-light:hover { color: var(--on-sun); }

/* ---------- HEADER: logo, the sky with the sun, the clock, menu ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--header);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding-inline: var(--gut);
  transition: background .5s, box-shadow .5s;
}
.header.is-solid { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: var(--head-weight); font-size: 24px; letter-spacing: var(--head-track); text-decoration: none; }
.logo-sun { width: 14px; height: 14px; border-radius: 50%; background: var(--sun); }
.sky { position: relative; flex: 1; height: 40px; align-self: center; cursor: pointer; touch-action: none; user-select: none; }
.sky::before { content: ""; position: absolute; inset: -12px 0; }   /* a taller hit area than the thin arc */
.sky-sun { transition: box-shadow .3s; }
.sky:hover .sky-sun { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sun) 24%, transparent); }
.sky.is-dragging, .sky.is-dragging * { cursor: grabbing; }
.sky.is-dragging .sky-sun { box-shadow: 0 0 0 12px color-mix(in srgb, var(--sun) 30%, transparent); }
.sky-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky-arc path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.sky-sun { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 18%, transparent); will-change: transform; }
.clock { min-width: 5ch; text-align: right; color: var(--soft); }
.menu-btn { display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 10px 0; color: inherit; font: 500 15px var(--f-text); cursor: pointer; }
.menu-lines { position: relative; width: 22px; height: 8px; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.menu-lines::before { top: 0; }
.menu-lines::after { bottom: 0; }
.menu-open .menu-lines::before { transform: translateY(3.25px) rotate(45deg); }
.menu-open .menu-lines::after { transform: translateY(-3.25px) rotate(-45deg); }
/* the hero photo sits under the header: light text there until the page scrolls */
:is(.home, :has(.p-hero)) .header:not(.is-solid):not(.on-light) { color: #fff; }
:is(.home, :has(.p-hero)) .header:not(.is-solid):not(.on-light) .sky-arc path { stroke: rgba(255, 255, 255, .45); }
:is(.home, :has(.p-hero)) .header:not(.is-solid):not(.on-light) .clock { color: rgba(255, 255, 255, .8); }

/* menu: a paper blind that comes down */
.menu { position: fixed; inset: 0; z-index: 39; background: var(--sheet); padding: calc(var(--header) + 4vh) var(--gut) 40px; overflow: auto; }
.menu[hidden] { display: none; }
.menu-inner { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; min-height: 100%; }
.menu nav { display: grid; }
.menu nav a { display: flex; align-items: baseline; gap: 18px; padding: .12em 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: clamp(38px, 6.4vw, 88px); line-height: 1.12; transition: padding .6s var(--ease), color .4s; }
.menu nav a .mono { color: var(--soft); }
.menu nav a:hover { padding-left: 18px; }
/* the page you are on: lit by the sun (gold with a soft glow) */
.menu nav a[aria-current] { color: var(--sun); text-shadow: 0 0 .35em color-mix(in srgb, var(--sun) 55%, transparent), 0 0 1.2em color-mix(in srgb, var(--sun) 30%, transparent); }
.menu nav a[aria-current] .mono { color: var(--sun); }
.menu-side { display: grid; gap: 24px; font-size: 15px; }
.menu-side .label { margin-bottom: 6px; }
/* opening: the blind comes down, each item rises out of its own line; closing: items sink, the blind goes back up */
.menu nav a { overflow: clip; overflow-clip-margin: .1em; }
.menu .mi { display: flex; align-items: baseline; gap: 18px; }
.motion .menu.is-in { animation: blind .9s var(--ease) both; }
.motion .menu.is-out { animation: blind-up .8s var(--ease) .25s both; }
.motion .menu.is-in .mi { animation: rise-in 1.1s var(--ease) both; animation-delay: calc(.25s + var(--n) * .06s); }
.motion .menu.is-out .mi { animation: sink .45s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc((5 - var(--n)) * .03s); }
.motion .menu.is-in .menu-side { animation: rise .9s var(--ease) .5s both; }
.motion .menu.is-out .menu-side { animation: sink .45s cubic-bezier(.5, 0, .75, 0) both; }
@keyframes blind { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes blind-up { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes rise-in { from { transform: translateY(115%); } }
@keyframes sink { to { transform: translateY(115%); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.menu-open { overflow: hidden; }

/* ---------- INTRO: the sun rises over a horizon line (first page of a visit only) ---------- */
.intro { display: none; }
.dawn.motion .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 60; background: var(--dawn);
  animation: lift 1.1s var(--ease) 2.5s both;
}
.intro-sky { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -120px 0 0 -60px; overflow: hidden; }
.intro-sun { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; background: var(--sun); animation: sunrise 1.6s var(--ease) .5s both; }
.intro-horizon { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transform: scaleX(0); animation: horizon 1s var(--ease) both; }
.intro-name { position: absolute; top: calc(50% + 28px); font-family: var(--f-head); font-weight: var(--head-weight); font-size: clamp(30px, 4vw, 48px); letter-spacing: var(--head-track); animation: rise 1s var(--ease) 1.4s both; }
@keyframes horizon { to { transform: scaleX(1); } }
@keyframes sunrise { from { transform: translateY(100%); } to { transform: translateY(18%); } }
@keyframes lift { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- SUNLIT PHOTOS: a window shadow drifts over the photo (main.js sets --p, 0..1 while it crosses the screen) ---------- */
.sunlit { position: relative; overflow: hidden; background: var(--late); --p: .5; }
.sunlit img { width: 100%; height: 100%; object-fit: cover; }
.gobo {
  position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: multiply;
  /* a window: two mullions, one transom, soft edges like real sun shadow */
  background:
    linear-gradient(90deg, transparent 0 31%, rgba(var(--shadow), .55) 31% 34.5%, transparent 34.5% 64%, rgba(var(--shadow), .55) 64% 67.5%, transparent 67.5%),
    linear-gradient(0deg, transparent 0 46%, rgba(var(--shadow), .5) 46% 49.5%, transparent 49.5%),
    linear-gradient(90deg, rgba(var(--shadow), .42) 0 8%, transparent 14% 86%, rgba(var(--shadow), .42) 92%);
  filter: blur(14px);
  opacity: .55;
  transform: translateX(calc((var(--p) - .5) * 46%)) skewX(calc(-28deg + var(--p) * 56deg)) rotate(calc(-6deg + var(--p) * 12deg));
  will-change: transform;
}
/* warm afternoon glow on top (soft light), stronger later in the photo's pass */
.sunlit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(calc(110deg + var(--p) * 60deg), rgba(255, 196, 120, calc(.1 + var(--p) * .3)), transparent 60%);
}
/* photos develop like eyes adjusting to bright sun */
.motion .sunlit img { filter: brightness(1.5) contrast(.7) saturate(.5); transform: scale(1.04); transition: filter 1.8s var(--ease), transform 2.2s var(--ease); }
.motion .sunlit.is-in img { filter: none; transform: none; }

/* ---------- REVEALS ---------- */
/* headings: every word rises out of an invisible line under it, one after another (main.js wraps words in .wd > .wi) */
.motion .sweep:not([data-text]) { visibility: hidden; }   /* until main.js has spaced the letters */
.motion .sweep .wm { clip-path: inset(-.4em -.3em -.2em -.3em); }
.motion .sweep .wi { display: inline-block; transform: translateY(150%); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--w) * .07s); }
.motion .sweep.is-in .wi { transform: none; }
.motion .hero .sweep .wi { transition-delay: calc(var(--enter, .15s) + var(--w) * .08s); }
/* the ball that replaces the full stop (data-ball): drops in after the last word and bounces twice */
.ball { display: inline-block; border-radius: 50%; background: var(--sun); vertical-align: baseline; }
.motion .sweep .ball { opacity: 0; }
.motion .sweep.is-in .ball { animation: bounce 1.3s both; animation-delay: calc(var(--w) * .07s + .9s); }
.motion .hero .sweep.is-in .ball { animation-delay: calc(var(--enter, .15s) + var(--w) * .08s + 1s); }
@keyframes bounce {
  0% { opacity: 0; transform: translateY(-3.2em); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  6% { opacity: 1; }
  38% { transform: translateY(0) scale(1.18, .8); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  58% { transform: translateY(-.8em) scale(.95, 1.05); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  74% { transform: translateY(0) scale(1.1, .9); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  86% { transform: translateY(-.22em); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { opacity: 1; transform: none; }
}
.motion [data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.motion [data-rise].is-in { opacity: 1; transform: none; }
.motion .hero [data-rise] { transition-delay: calc(var(--enter, .15s) + .55s); }
.motion .hero .label[data-rise] { transition-delay: var(--enter, .15s); }
.motion .hero .hero-foot [data-rise] { transition-delay: calc(var(--enter, .15s) + .75s); }
.motion .hero .hero-foot .btn[data-rise] { transition-delay: calc(var(--enter, .15s) + .9s); }

/* header items come down one by one, the sky arc draws from left to right */
.motion .header > * { animation: drop 1.1s var(--ease) both; animation-delay: var(--enter, .15s); }
.motion .header > .sky { animation-name: draw; animation-duration: 1.8s; animation-delay: calc(var(--enter, .15s) + .15s); }
.motion .header > .clock { animation-delay: calc(var(--enter, .15s) + .35s); }
.motion .header > .menu-btn { animation-delay: calc(var(--enter, .15s) + .45s); }
@keyframes drop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes draw { from { clip-path: inset(-24px 100% -24px -24px); } to { clip-path: inset(-24px -24px -24px -24px); } }

/* a small sun follows the pointer, lazily, with a camera lens flare toward the middle of the screen (main.js adds it,
   mouse only). The flare is added light (screen): strong over photos and the dark sections, faint on paper. */
.cursor-sun { position: fixed; left: 0; top: 0; z-index: 81; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--sun); pointer-events: none; opacity: 0; transition: opacity .5s; will-change: transform; }
.flare { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .6s; --far: .5; }
.cursor-sun.is-on, .flare.is-on { opacity: 1; }
.flare > span { position: absolute; left: 0; top: 0; will-change: transform; }
.flare-core { width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; filter: blur(6px);
  background: radial-gradient(circle, rgba(255, 250, 230, .8) 0 2%, rgba(255, 220, 150, .42) 8%, rgba(240, 180, 41, .16) 26%, rgba(240, 180, 41, .05) 45%, transparent 66%); }
.flare-rays { width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; opacity: .3; filter: blur(2.5px);
  background: repeating-conic-gradient(rgba(255, 236, 190, .55) 0 .6deg, transparent .6deg 9deg, rgba(255, 236, 190, .3) 9deg 9.4deg, transparent 9.4deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .35) 22%, transparent 58%); mask: radial-gradient(circle, #000 4%, rgba(0, 0, 0, .35) 22%, transparent 58%); }
.flare-streak { width: 640px; height: 6px; margin: -3px 0 0 -320px; border-radius: 50%; opacity: .35;
  background: radial-gradient(closest-side, rgba(255, 236, 200, .9), rgba(255, 200, 120, .25) 45%, transparent); filter: blur(4px); }
.ghost { translate: -50% -50%; opacity: var(--far); }
.ghost-disc { border-radius: 50%; background: radial-gradient(circle, rgba(var(--t), .22) 0 55%, rgba(var(--t), .34) 64%, transparent 76%); filter: blur(4px); }
.ghost-hex { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: radial-gradient(circle, rgba(var(--t), .16), rgba(var(--t), .3) 70%); filter: blur(5px); }
.ghost-ring { border-radius: 50%; filter: blur(5px); background: radial-gradient(circle, transparent 52%, rgba(120, 170, 255, .16) 62%, rgba(var(--t), .3) 70%, rgba(255, 110, 120, .16) 78%, transparent 88%); }

/* ---------- HOME HERO ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; color: #fff; }
.hero-photo { position: absolute; inset: 0; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 14, 8, .38), transparent 26%, transparent 46%, rgba(20, 14, 8, .62)); }
.hero-photo figcaption { position: absolute; right: var(--gut); top: calc(var(--header) + 14px); z-index: 2; color: rgba(255, 255, 255, .8); }
.hero-text { position: relative; z-index: 2; padding: calc(var(--header) + 40px) 0 clamp(32px, 6vh, 64px); }
.hero-text .label { color: rgba(255, 255, 255, .8); margin-bottom: 18px; }
.hero-title { font-size: clamp(50px, 10vw, 184px); line-height: .8; max-width: 12ch; }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-top: clamp(24px, 4vh, 44px); }
.hero .btn { background: #fff; color: var(--ink); }
.hero .btn:hover, .btn:hover { color: var(--on-sun); }

/* ---------- STUDIO INTRO ---------- */
.intro-sec { padding: clamp(96px, 16vh, 200px) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 6vw; }
.intro-sec .label { grid-column: 1 / -1; }
.intro-title { font-size: clamp(34px, 4.4vw, 70px); }
.intro-body { display: grid; gap: 28px; align-content: end; justify-items: start; max-width: 46ch; font-size: 18px; }

/* ---------- PLAN CHEST: sheets come up from the bottom, the ones underneath leave their title strip at the top ---------- */
.chest { padding-bottom: clamp(80px, 12vh, 140px); }
.chest-head { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: end; margin-bottom: 48px; }
.chest-head .label { grid-column: 1 / -1; }
.chest-head h2 { font-size: clamp(34px, 4.4vw, 70px); }
.sheets { width: var(--wrap); margin: 0 auto; }
.sheet {
  --top: calc(var(--header) + (var(--i) - 1) * var(--strip));
  position: sticky; top: var(--top);
  height: calc(100svh - var(--top) - 16px); min-height: 420px;
  display: grid; grid-template-rows: var(--strip) 1fr;
  background: var(--sheet); border-top: 1px solid var(--ink);
  box-shadow: 0 -18px 40px -24px rgba(var(--shadow), .35);
  margin-bottom: 18vh;
}
.sheet:last-child { margin-bottom: 0; }
.sheet-strip { display: grid; grid-template-columns: 70px 1fr auto auto 30px; gap: 24px; align-items: center; padding: 0 20px; text-decoration: none; transition: background .4s; }
.sheet-strip:hover { background: color-mix(in srgb, var(--sun) 9%, transparent); }
.sheet-name { font-family: var(--f-head); font-weight: var(--head-weight); letter-spacing: var(--head-track); font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; }
.sheet-meta { color: var(--soft); }
.sheet-arrow { justify-self: end; transition: transform .5s var(--ease); }
.sheet-strip:hover .sheet-arrow { transform: translateX(5px); }
.sheet-body { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; padding: 0 20px 20px; min-height: 0; }
.sheet-photo { height: 100%; min-height: 0; }
.sheet-info { display: grid; align-content: space-between; gap: 24px; padding: 8px 8px 4px; min-height: 0; }
.sheet-summary { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; }
.titleblock { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.titleblock div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.titleblock div:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--line); }
.titleblock div:nth-child(even) { padding-left: 12px; }
.titleblock dt { color: var(--soft); font-size: 11px; }
.titleblock dd { text-transform: none; letter-spacing: 0; font-family: var(--f-text); font-size: 15px; margin-top: 2px; }
.sheet-info .btn { justify-self: start; }

/* ---------- THE DAY: the sun crosses an arc over the five phases ---------- */
.day { position: relative; height: 420vh; background: var(--night); color: var(--night-ink); }
.day-stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--header) + 24px) 0 clamp(32px, 6vh, 64px); overflow: hidden; }
.day-head { display: grid; gap: 16px; }
.day-head h2 { font-size: clamp(34px, 4.4vw, 70px); }
.day .label { color: inherit; opacity: .75; }
.day-sky { position: relative; width: var(--wrap); margin: 2vh auto 0; min-height: 0; }
.day-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.day-arc path { fill: none; stroke: currentColor; stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
.day-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .5; }
.day-sun { position: absolute; left: 0; top: 0; width: clamp(30px, 3.2vw, 48px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); transform: translate(-50%, -50%); box-shadow: 0 0 70px 10px color-mix(in srgb, var(--sun) 40%, transparent); will-change: left, top; }
.day-point { position: absolute; transform: translate(-50%, -4.5px);   /* the dot sits on the arc, the words hang under the sun */
  display: grid; justify-items: center; gap: 2px; font-family: var(--f-head); font-weight: var(--head-weight); font-size: clamp(18px, 1.7vw, 26px); white-space: nowrap; transition: opacity .5s; opacity: .45; }
.day-point::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; background: var(--night); margin-bottom: clamp(22px, 2.4vw, 32px); }
.day-point .mono { font-size: 11px; opacity: .8; }
.day-point.is-on { opacity: 1; }
.day-texts { display: grid; margin-top: 3vh; min-height: 9.5em; }
.day-text { grid-area: 1 / 1; display: grid; grid-template-columns: 160px minmax(0, 340px) minmax(0, 520px); gap: 12px 32px; align-items: baseline; opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .8s var(--ease); }
.day-text.is-on { opacity: 1; transform: none; }
.day-text h3 { font-size: clamp(30px, 3.2vw, 50px); }
.day-text p:last-child { font-size: 17px; max-width: 46ch; }

/* ---------- NUMBERS ---------- */
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); padding: clamp(80px, 12vh, 140px) 0; }
.number { padding: 0 24px 0 0; border-left: 1px solid var(--line); padding-left: 20px; }
.number-value { font-size: clamp(56px, 7vw, 120px); line-height: 1; margin-bottom: 14px; }
.number .mono { color: var(--soft); }

/* ---------- PEOPLE ---------- */
.people { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6vw; align-items: center; padding-bottom: clamp(80px, 12vh, 160px); }
.people-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.person:nth-child(2) { margin-top: 18%; }
.person { background: none; }
.person img { aspect-ratio: 4 / 5; }
.person .gobo { inset: -30% -30% calc(-30% + 54px); }
.person figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; font-weight: 500; }
.person figcaption .mono { color: var(--soft); font-weight: 400; }
.people-text { display: grid; gap: 28px; justify-items: start; }
.people-quote { font-size: clamp(28px, 3.1vw, 50px); line-height: 1.12; }

/* ---------- JOURNAL ---------- */
.notes { padding-bottom: clamp(96px, 14vh, 180px); }
.notes-head { display: grid; grid-template-columns: 1fr auto; gap: 16px 32px; align-items: end; margin-bottom: 40px; }
.notes-head .label { grid-column: 1 / -1; }
.notes-head h2 { font-size: clamp(34px, 4.4vw, 70px); }
.notes-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.note { display: grid; gap: 12px; text-decoration: none; }
.note figure img { aspect-ratio: 3 / 2; }
.note .note-meta { display: flex; justify-content: space-between; color: var(--soft); margin-top: 6px; }
.note h3 { font-size: clamp(24px, 2.2vw, 34px); transition: color .4s; }
.note:hover h3 { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.note p:last-child { color: var(--soft); max-width: 48ch; }

/* ---------- DUSK (call to action) + FOOTER = evening ---------- */
.dusk { background: linear-gradient(180deg, transparent, var(--night) 70%); color: var(--night-ink); padding: clamp(120px, 20vh, 240px) 0 clamp(80px, 12vh, 140px); }
.dusk .label { color: color-mix(in srgb, var(--night-ink) 75%, transparent); }
.dusk-title { font-size: clamp(42px, 6.6vw, 112px); max-width: 15ch; margin: 22px 0 40px; }
.footer { background: var(--night); color: var(--night-ink); padding: 40px 0 28px; font-size: 15px; }
.footer .label { color: color-mix(in srgb, var(--night-ink) 60%, transparent); margin-bottom: 10px; }
.footer-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { color: var(--sun); }
.footer-mark { display: flex; align-items: center; gap: .18em; font-size: clamp(64px, 15vw, 260px); line-height: 1; padding: 40px 0 24px; }
.footer-sun { width: .32em; height: .32em; border-radius: 50%; background: var(--sun); flex: none; transform: translateY(.18em); }
.footer-small { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: color-mix(in srgb, var(--night-ink) 60%, transparent); }

/* ---------- INNER PAGES: page head ---------- */
.page-head { padding: calc(var(--header) + clamp(56px, 12vh, 140px)) 0 clamp(48px, 8vh, 96px); display: grid; gap: 24px; justify-items: start; }
.page-title { font-size: clamp(44px, 7vw, 124px); line-height: .9; max-width: 14ch; }
.page-head .lead { max-width: 46ch; }
.wide-photo { aspect-ratio: 16 / 7; margin-bottom: clamp(80px, 12vh, 140px); }

/* ---------- PROJECTS: filter + grid (rows fill left to right) ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: inherit; font: inherit; cursor: pointer; transition: border-color .4s, background .4s; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .4s, box-shadow .4s; }
.chip:hover { border-color: var(--ink); }
.chip.is-on, .chip:has(input:checked) { border-color: var(--ink); background: var(--sheet); }
.chip.is-on::before, .chip:has(input:checked)::before { background: var(--sun); box-shadow: 0 0 10px color-mix(in srgb, var(--sun) 70%, transparent); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--sun); outline-offset: 3px; }
.works { padding-bottom: clamp(80px, 12vh, 160px); }
.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
.work { display: grid; gap: 10px; text-decoration: none; }
.work[hidden] { display: none; }
.work figure img { aspect-ratio: 4 / 3; }
.work-meta { display: flex; gap: 18px; color: var(--soft); margin-top: 6px; }
.work-meta span:first-child { color: var(--ink); }
.work-name { font-family: var(--f-head); font-weight: var(--head-weight); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: var(--head-track); }
.work-place { color: var(--soft); }
.work:hover .work-name { text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* ---------- PROJECT, layout A "the sheet": full photo, title block, text, gallery ---------- */
.p-hero { position: relative; min-height: 92svh; display: grid; align-items: end; color: #fff; }
.p-hero-photo { position: absolute; inset: 0; }
.p-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20, 14, 8, .36), transparent 28%, transparent 50%, rgba(20, 14, 8, .6)); }
.p-hero-text { position: relative; z-index: 2; padding: 0 0 clamp(32px, 6vh, 64px); }
.p-hero-text .label { color: rgba(255, 255, 255, .8); margin-bottom: 18px; }
.p-title { font-size: clamp(46px, 8vw, 150px); line-height: .88; max-width: 13ch; }
.p-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 6vw; padding: clamp(72px, 12vh, 140px) 0; align-items: start; }
.p-block { position: sticky; top: calc(var(--header) + 24px); }
.p-story { display: grid; gap: 22px; max-width: 60ch; font-size: 18px; }
.p-lead { font-size: clamp(22px, 2vw, 30px); line-height: 1.35; }
.p-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: clamp(80px, 12vh, 140px); }
.p-gallery figure img { aspect-ratio: 4 / 3; }
.p-gallery figure:first-child { grid-column: 1 / -1; }
.p-gallery figure:first-child img { aspect-ratio: 16 / 8; }
.p-next { background: var(--night); color: var(--night-ink); }
.p-next-link { display: grid; gap: 14px; padding: clamp(72px, 12vh, 140px) 0; text-decoration: none; }
.p-next .label { color: color-mix(in srgb, var(--night-ink) 70%, transparent); }
.p-next-name { font-size: clamp(40px, 7vw, 120px); line-height: .92; transition: color .5s; }
.p-next-link:hover .p-next-name { color: var(--sun); text-shadow: 0 0 .4em color-mix(in srgb, var(--sun) 35%, transparent); }

/* ---------- PROJECT, layout B "daylight diary": the text stays, the hours of the day pass by ---------- */
.p-head .p-block { position: static; width: min(100%, 720px); margin-top: 12px; }
.p-head .p-title { color: var(--ink); }
.diary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 6vw; padding-bottom: clamp(80px, 12vh, 140px); align-items: start; }
.diary-text { position: sticky; top: calc(var(--header) + 32px); display: grid; gap: 20px; max-width: 46ch; }
.diary-hours { display: grid; gap: clamp(64px, 12vh, 140px); }
.hour { display: grid; grid-template-columns: auto 1fr; gap: 16px 28px; align-items: baseline; }
.hour figure { grid-column: 1 / -1; }
.hour figure img { aspect-ratio: 4 / 3; }
.hour-time { display: flex; align-items: center; gap: 14px; font-size: clamp(34px, 3.6vw, 58px); line-height: 1; }
.hour-sun { width: .36em; height: .36em; border-radius: 50%; background: var(--sun); box-shadow: 0 0 .5em color-mix(in srgb, var(--sun) 60%, transparent); }
.hour-note { color: var(--soft); max-width: 40ch; }

/* ---------- STUDIO ---------- */
.rules, .founders, .awards, .phases { padding-bottom: clamp(80px, 12vh, 160px); }
.rules > .head, .founders > .head, .awards > .head, .phases > .head { font-size: clamp(34px, 4.4vw, 70px); margin: 16px 0 48px; }
.rules-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.rules-list li { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ink); }
.rules-list h3 { font-size: clamp(24px, 2.2vw, 34px); }
.rules-list p { color: var(--soft); }
.founders-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 6vw; }
.founder { display: grid; gap: 10px; align-content: start; }
.founder:nth-child(2) { margin-top: 14vh; }
.founder figure img { aspect-ratio: 4 / 5; }
.founder-name { font-family: var(--f-head); font-weight: 500; font-size: 24px; margin-top: 12px; }
.founder-role { color: var(--soft); }
.founder p:last-child { max-width: 44ch; }
.awards-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.awards-list li { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: clamp(18px, 1.6vw, 24px); align-items: baseline; }
.awards-list .mono:last-child { color: var(--soft); }

/* ---------- PROCESS ---------- */
.page-head + .day { margin-top: 0; }
.phases { padding-top: clamp(80px, 12vh, 140px); }
.phase-list { display: grid; border-top: 1px solid var(--line); }
.phase { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 32px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.phase h3 { font-size: clamp(26px, 2.6vw, 40px); }
.phase-time { display: flex; align-items: center; gap: 10px; color: var(--soft); }
.phase-sun { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }
.phase-facts { display: grid; gap: 10px; }
.phase-facts dt { color: var(--soft); font-size: 11px; }
.phase-facts dd { margin: 2px 0 0; text-transform: none; letter-spacing: 0; font-family: var(--f-text); font-size: 15px; }
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 6vw; padding-bottom: clamp(80px, 12vh, 160px); }
.faq-head { display: grid; gap: 16px; align-content: start; }
.faq-head .head { font-size: clamp(34px, 4.4vw, 70px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-size: clamp(19px, 1.6vw, 24px); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-sign { position: relative; flex: none; width: 14px; height: 14px; margin-top: .4em; }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), background .4s; }
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0); }
.faq-item[open] .faq-sign::before, .faq-item[open] .faq-sign::after { background: var(--sun); }
.faq-item p { padding: 0 0 24px; color: var(--soft); max-width: 60ch; }

/* ---------- JOURNAL ---------- */
.notes-all { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notes-all .note h2 { font-size: clamp(24px, 2.2vw, 34px); }
.post-body { display: grid; gap: 24px; max-width: 64ch; padding-bottom: clamp(80px, 12vh, 140px); font-size: 19px; }
.post-body p:first-child { font-size: clamp(22px, 2vw, 30px); line-height: 1.35; }

/* ---------- CONTACT ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 6vw; padding-bottom: clamp(80px, 12vh, 140px); align-items: start; }
.form { display: grid; gap: 32px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: grid; gap: 12px; }
.field legend { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.field input:not([type="radio"]), .field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: inherit; font: inherit; font-size: 19px; padding: 8px 0 12px; border-radius: 0; resize: vertical; transition: border-color .4s, box-shadow .4s; }
.field input:not([type="radio"]):focus, .field textarea:focus { outline: none; border-color: var(--sun); box-shadow: 0 1px 0 var(--sun); }
.field.is-bad input, .field.is-bad textarea { border-color: #b4472e; }
.form-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-note { color: var(--soft); }
.contact-side { position: sticky; top: calc(var(--header) + 32px); display: grid; gap: 32px; }
.contact-big { font-size: clamp(20px, 1.8vw, 28px); }
.contact-big a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-big a:hover { border-color: var(--sun); }
.offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-bottom: clamp(80px, 12vh, 160px); }
.office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.office figure img { aspect-ratio: 3 / 4; }
.office-text { display: grid; gap: 8px; }
.office-text .head { font-size: clamp(30px, 3vw, 48px); }
.office-text .mono { color: var(--soft); }
.office-map { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; border: 0; filter: grayscale(1) contrast(.9); mix-blend-mode: multiply; }

/* ---------- 404: the sun has set below the horizon ---------- */
.lost { min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 24px; padding: calc(var(--header) + 40px) 0 80px; position: relative; }
.lost-sky { position: relative; width: 120px; height: 60px; overflow: hidden; }
.lost-sun { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 60px color-mix(in srgb, var(--sun) 50%, transparent); transform: translateY(70%); }
.motion .lost-sun { animation: sunset 2.6s var(--ease) .3s both; }
@keyframes sunset { from { transform: translateY(-10%); } }
.lost-horizon { width: 100%; height: 1px; background: var(--ink); margin-top: -24px; }

/* evened headings (main.js): screen readers get the plain text, words never break inside */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wd { display: inline-block; white-space: nowrap; letter-spacing: 0; }   /* the spacing comes from main.js, not from tracking */

/* mail links copy the address (main.js) */
a[href^="mailto:"] { position: relative; }
.copied-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; padding: 4px 10px; border-radius: var(--radius); background: var(--sun); color: var(--on-sun); font-size: 11px; white-space: nowrap; pointer-events: none; animation: rise .4s var(--ease) both; }

/* back to top */
.to-top { position: fixed; right: var(--gut); bottom: 24px; z-index: 30; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s, transform .5s var(--ease), background .4s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--sun); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .day-text { grid-template-columns: 120px 1fr; }
  .day-text p:last-child { grid-column: 2; }
}
@media (max-width: 900px) {
  :root { --strip: 52px; }
  .intro-sec, .people { grid-template-columns: 1fr; }
  .sheet-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .sheet-info { align-content: start; gap: 16px; padding: 0; }
  .titleblock, .sheet-info .btn { display: none; }
  .sheet-strip { grid-template-columns: 56px 1fr 24px; gap: 14px; }
  .sheet-meta { display: none; }
  .numbers { grid-template-columns: 1fr 1fr; gap: 48px 0; }
  .menu-inner { grid-template-columns: 1fr; align-items: start; }
  .p-sheet, .diary, .faq, .contact { grid-template-columns: 1fr; gap: 40px; }
  .p-block, .diary-text, .contact-side { position: static; }
  .rules-list { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 110px 1fr; }
  .phase > p:not(.phase-time), .phase-facts { grid-column: 2; }
  .notes-all { grid-template-columns: 1fr 1fr; }
  .offices { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  :root { --header: 60px; --strip: 46px; }
  body { font-size: 16px; }
  .clock { display: none; }
  .hero-foot .lead { max-width: none; }
  .chest-head, .notes-head { grid-template-columns: 1fr; }
  .chest-head .link, .notes-head .link { justify-self: start; }
  .sheet { min-height: 360px; }
  .sheet-body { padding: 0 12px 12px; gap: 12px; }
  .sheet-strip { padding: 0 12px; }
  .sheet-summary { font-size: 15px; }
  .notes-list { grid-template-columns: 1fr; gap: 48px; }
  .day-text { grid-template-columns: 1fr; gap: 6px; }
  .day-text p:last-child { grid-column: auto; }
  .day-point { font-size: 15px; }
  .day-point .mono { display: none; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .logo { font-size: 21px; }
  .works-grid, .p-gallery, .founders-list, .notes-all, .field-row { grid-template-columns: 1fr; }
  .p-gallery figure:first-child img { aspect-ratio: 4 / 3; }
  .founder:nth-child(2) { margin-top: 0; }
  .wide-photo { aspect-ratio: 4 / 3; }
  .awards-list li { grid-template-columns: 1fr; gap: 4px; }
  .phase { grid-template-columns: 1fr; }
  .phase > p:not(.phase-time), .phase-facts { grid-column: auto; }
  .office { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gobo { transform: skewX(-12deg); }
}