/* THRĒ — group website, pre-launch edition
   Built on the THRĒ brand system, edition one 2026.
   Six colours, two faces, radius 0, slow crossfades only. */

:root {
  --lontar:     #F2EDE4;
  --deep-night: #14181B;
  --andesite:   #6A6A63;
  --ironwood:   #4A3F35;
  --mist:       #C7CBC6;
  --ember:      #A24E33;

  --thre-serif: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --thre-sans:  'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  --gutter: 64px;
  --measure: 34em;
  --display-size: clamp(26px, 2.7vw, 44px);   /* one size for every story line and page title */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--lontar);
  color: var(--deep-night);
  font-family: var(--thre-serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color 400ms ease; }
a:hover, a:focus-visible { color: var(--ember); }
:focus-visible { outline: 1px solid var(--ember); outline-offset: 4px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 10; background: var(--lontar); padding: 8px 12px; font-family: var(--thre-sans); font-size: 12px; }

/* ---- grounds -------------------------------------------------------- */
.dark  { background: var(--deep-night); color: var(--lontar); }
.light { background: var(--lontar); color: var(--deep-night); }
.dark .body, .dark .lead, .dark p { color: var(--mist); }
.dark .kicker, .dark .label, .dark .caption { color: var(--andesite); }

/* fields within a page, never a page ground */
.field-ironwood { background: var(--ironwood); color: var(--lontar); }
.field-ironwood p { color: var(--mist); }

/* ---- the wordmark (Study C) ---------------------------------------- */
.wordmark {
  display: inline-flex; align-items: flex-end;
  font-family: var(--thre-serif); font-weight: 500;
  line-height: 1; white-space: nowrap;
}
.wordmark > span { margin-right: 0.32em; }
.wordmark > .e { position: relative; display: inline-block; margin-right: 0; }
.wordmark .macron {
  position: absolute; left: 50%; top: 0.05em;
  transform: translateX(-50%);
  width: 0.35em; height: 0.06em; background: currentColor;
}
.wordmark.display .macron { height: 0.05em; }

/* ---- the logo (trademark-filed drawing, thicker version, with TM) ---
   One SVG used as a mask, so it takes the colour of the text around it. Height sets the size. */
.logo {
  display: inline-block; vertical-align: bottom;
  height: var(--logo-h, 24px); aspect-ratio: 827 / 184;
  background: currentColor;
  -webkit-mask: url("logo/thre-logo-tm.svg") no-repeat center / contain;
  mask: url("logo/thre-logo-tm.svg") no-repeat center / contain;
}
@media (forced-colors: active) { .logo { background: CanvasText; } }

/* ---- header --------------------------------------------------------- */
.site-header {
  background: var(--deep-night); color: var(--lontar);
  padding: 32px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.site-header .wordmark { font-size: 22px; }
.site-header .logo { --logo-h: 24px; display: block; }
.site-nav { display: flex; gap: 28px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a {
  font-family: var(--thre-sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist);
}
.site-nav a[aria-current="page"] { color: var(--lontar); }
.site-nav a:hover { color: var(--ember); }

/* ---- type ----------------------------------------------------------- */
.kicker {
  font-family: var(--thre-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--andesite);
  margin: 0;
}
.label {
  font-family: var(--thre-sans); font-weight: 500; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--andesite);
}
.num {
  font-family: var(--thre-sans); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ember); flex-shrink: 0; width: 72px;
}
.caption { font-family: var(--thre-sans); font-size: 12px; line-height: 1.6; color: var(--andesite); }

h1, .h1 {
  font-family: var(--thre-serif); font-weight: 500; font-size: var(--display-size);
  line-height: 1.2; margin: 0; max-width: 18em;
}
h2, .h2 {
  font-family: var(--thre-serif); font-weight: 500; font-size: 28px;
  line-height: 1.3; margin: 0; max-width: 24em;
}
h3, .h3 {
  font-family: var(--thre-serif); font-weight: 500; font-size: 21px;
  line-height: 1.35; margin: 0;
}
.lead { font-size: 21px; line-height: 1.6; max-width: 32em; margin: 0; }
.body { font-size: 17px; line-height: 1.65; max-width: var(--measure); margin: 0; }
.body + .body, .lead + .body { margin-top: 20px; }
.quiet { color: var(--andesite); }
.dark .quiet { color: var(--mist); }

/* ---- structure ------------------------------------------------------ */
.wrap { padding: 0 var(--gutter); }
.band { padding: 120px var(--gutter); }
.band.tight { padding-top: 72px; padding-bottom: 72px; }

.section { display: flex; gap: 28px; }
.section > .content { flex: 1; min-width: 0; }
.section + .section { margin-top: 96px; }

.rule { height: 1px; border: 0; margin: 0; background: var(--mist); }
.dark .rule { background: var(--ironwood); }

/* cell grids — 1px gaps over a rule ground, no cell borders */
.grid { display: grid; gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.grid > * { background: var(--lontar); padding: 32px; }
.dark .grid { background: var(--ironwood); border-color: var(--ironwood); }
.dark .grid > * { background: var(--deep-night); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-6 { grid-template-columns: repeat(3, 1fr); }

.row {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--mist);
}
.dark .row { border-bottom-color: var(--ironwood); }
.row > :last-child { color: var(--andesite); text-align: right; }
.dark .row > :last-child { color: var(--mist); }

.stat-label { font-family: var(--thre-sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--andesite); }
.stat-value { font-family: var(--thre-serif); font-weight: 500; font-size: 26px; margin-top: 8px; }

.hatch {
  background: repeating-linear-gradient(135deg, #C7CBC6 0, #C7CBC6 1px, #F2EDE4 1px, #F2EDE4 10px);
  display: flex; align-items: flex-end; padding: 20px;
  font-family: var(--thre-sans); font-size: 11px; color: var(--andesite);
}

.mark-rule { width: 36px; height: 1px; background: var(--andesite); }

/* ---- hero ----------------------------------------------------------- */
.hero { padding: 160px var(--gutter) 120px; }
.hero .wordmark { font-size: 120px; }
.lockup-rule { width: 340px; max-width: 70%; height: 1px; background: var(--andesite); margin: 84px 0 16px; }
.lockup-line { font-family: var(--thre-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6; }

/* ---- forms (Inter only) -------------------------------------------- */
form { max-width: 36em; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.field label, fieldset legend {
  font-family: var(--thre-sans); font-weight: 500; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--andesite);
}
input[type=text], input[type=email], select, textarea {
  font-family: var(--thre-sans); font-size: 15px; color: var(--deep-night);
  background: transparent; border: 0; border-bottom: 1px solid var(--andesite);
  border-radius: 0; padding: 10px 0; width: 100%;
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--ember); }
fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.choice { display: flex; align-items: center; gap: 12px; font-family: var(--thre-sans); font-size: 14px; margin-top: 12px; }
.choice input { accent-color: #14181B; width: 14px; height: 14px; margin: 0; }
.consent { font-family: var(--thre-sans); font-size: 12px; line-height: 1.6; color: var(--andesite); max-width: 36em; }
button, .button {
  font-family: var(--thre-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--deep-night); color: var(--lontar);
  border: 0; border-radius: 0; padding: 16px 28px; cursor: pointer;
  transition: background 400ms ease;
  display: inline-block;
}
button:hover, .button:hover { background: var(--ironwood); color: var(--lontar); }
.dark .button { background: var(--lontar); color: var(--deep-night); }
.dark .button:hover { background: var(--mist); color: var(--deep-night); }
.text-link {
  font-family: var(--thre-sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---- footer --------------------------------------------------------- */
.site-footer { background: var(--deep-night); color: var(--mist); padding: 72px var(--gutter) 48px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.site-footer .label { color: var(--andesite); display: block; margin-bottom: 16px; }
.site-footer a, .site-footer p { font-family: var(--thre-sans); font-size: 13px; line-height: 2; color: var(--mist); margin: 0; }
.site-footer a:hover { color: var(--ember); }
.site-footer .base { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--ironwood); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer .base p { font-size: 11px; color: var(--andesite); }

/* ---- the teaser sequence ------------------------------------------- */
.teaser { min-height: 100vh; display: flex; flex-direction: column; }
.frames { position: relative; flex: 1; min-height: 70vh; }
.frame {
  position: absolute; inset: 0; padding: 0 var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transition: opacity 1800ms ease; pointer-events: none;
}
.frame.on { opacity: 1; pointer-events: auto; }
.frame p.line { font-family: var(--thre-serif); font-size: 34px; line-height: 1.35; max-width: 20em; margin: 0; color: var(--lontar); }
.frame p.line + p.line { margin-top: 12px; color: var(--mist); }
.teaser-controls { display: flex; justify-content: space-between; align-items: center; padding: 32px var(--gutter); gap: 24px; }
.teaser-controls button { background: transparent; color: var(--mist); padding: 8px 0; }
.teaser-controls button:hover { color: var(--ember); background: transparent; }
.progress { display: flex; gap: 8px; }
.progress span { width: 24px; height: 1px; background: var(--ironwood); transition: background 1800ms ease; }
.progress span.on { background: var(--mist); }
.no-js .frame { position: static; opacity: 1; padding: 48px var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .site-header { padding: 24px var(--gutter); flex-direction: column; align-items: flex-start; }
  .site-nav { justify-content: flex-start; gap: 18px; }
  .hero { padding: 96px var(--gutter) 72px; }
  .hero .wordmark { font-size: 64px; }
  .lockup-rule { margin-top: 48px; }
  .band { padding: 72px var(--gutter); }
  h1, .h1 { font-size: var(--display-size); }
  h2, .h2 { font-size: 24px; }
  .lead { font-size: 19px; }
  .section { flex-direction: column; gap: 12px; }
  .section + .section { margin-top: 64px; }
  .num { width: auto; }
  .grid-3, .grid-2, .grid-6 { grid-template-columns: 1fr; }
  .grid > * { padding: 24px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 32px; }
  .frame p.line { font-size: 24px; }
  .row { flex-direction: column; gap: 4px; }
  .row > :last-child { text-align: left; }
}

/* ---- photography ---------------------------------------------------
   Landscape and material only. Graded dark and warm for the teaser:
   no saturated skies, no blue-white light. Never place the mark or words on a photo. */
.photo { margin: 0; overflow: hidden; background: var(--deep-night); }
.photo img, .ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.68) contrast(1.02) sepia(0.08) brightness(0.88);
}
.ph { margin: 0; overflow: hidden; background: var(--deep-night); }
.ph img { opacity: 0; transition: opacity 1600ms ease; }
.ph img.loaded, .no-js .ph img { opacity: 1; }

/* scenes: each photograph keeps its own proportions */
.scene.land .ph { width: 100%; height: min(100vh, calc(100vw / var(--r))); }
.scene .words { padding: 120px var(--gutter); }
.scene.port {
  display: grid; grid-template-columns: 1fr minmax(0, calc(92vh * var(--r)));
  align-items: center; gap: 64px; padding-right: var(--gutter); min-height: 100vh;
}
.scene.port .ph { height: 92vh; }
.scene.port .words { padding-right: 0; }
.photo-full { height: 100vh; min-height: 520px; }

/* ---- the teaser page ------------------------------------------------ */
.teaser-site { background: var(--deep-night); color: var(--lontar); }
.teaser-site .site-header { background: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.screen {
  min-height: 100vh; padding: 0 var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.screen.short { min-height: 64vh; }
.display-line {
  font-family: var(--thre-serif); font-weight: 400;
  font-size: var(--display-size); line-height: 1.22;
  max-width: 16em; margin: 0; color: var(--lontar);
}
.display-line.quiet { color: var(--mist); }
.index-line { display: flex; gap: 20px; align-items: baseline; margin-bottom: 36px; }
.index-line .num { width: auto; }

/* the opening: slow crossfade between photographs, words held on black below */
.opening { position: relative; height: 100vh; min-height: 560px; background: var(--deep-night); }
.opening .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 3200ms ease; }
.opening .slide.on { opacity: 1; }
.opening .slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) sepia(0.1) brightness(0.72); }
.opening picture { display: block; width: 100%; height: 100%; }
.opening-mark {
  position: absolute; left: var(--gutter); bottom: 72px; z-index: 2;
}
.opening-mark .field { background: var(--deep-night); padding: 36px 40px; display: inline-block; }
.opening-mark .wordmark { font-size: clamp(56px, 9vw, 132px); color: var(--lontar); }

/* teaser film frames: landscape above the words, portrait beside them */
.frame { justify-content: flex-start; padding: 0; }
.frame.land .frame-photo { height: min(62vh, calc(100vw / 1.6)); min-height: 240px; margin: 0 0 48px; }
.frame.port { flex-direction: row; align-items: center; gap: 64px; padding-right: var(--gutter); }
.frame.port .frame-photo { height: 70vh; aspect-ratio: 0.7; flex-shrink: 0; order: 2; margin: 0; }
.frame .frame-words { padding: 0 var(--gutter); flex: 1; }

@media (max-width: 900px) {
  .scene.port { display: block; padding-right: 0; min-height: 0; }
  .scene.port .ph { height: auto; aspect-ratio: var(--r); max-height: 120vw; }
  .scene.port .words { padding-right: var(--gutter); }
  .scene .words { padding: 64px var(--gutter) 88px; }
  .frame.port { flex-direction: column; align-items: stretch; gap: 0; padding-right: 0; }
  .frame.port .frame-photo { height: 46vh; aspect-ratio: auto; order: 0; margin-bottom: 28px; }
  .photo-full { height: 70vh; min-height: 360px; }
  .opening-mark { bottom: 32px; }
  .opening-mark .field { padding: 24px 24px; }
  .frame.land .frame-photo { height: 40vh; margin-bottom: 28px; }
}

/* forms on the dark ground */
.dark input[type=text], .dark input[type=email], .dark textarea { color: var(--lontar); border-bottom-color: var(--andesite); }
.dark .choice { color: var(--mist); }
.dark .choice input { accent-color: #F2EDE4; }
.dark .consent { color: var(--andesite); }
.dark button[type=submit] { background: var(--lontar); color: var(--deep-night); }
.dark button[type=submit]:hover { background: var(--mist); }

/* chapters */
.chapter { scroll-margin-top: 0; }
.chapter-kicker { display: flex; align-items: baseline; margin-bottom: 36px; }
.screen .chapter-kicker { margin-bottom: 0; }
.scene.port.flip { grid-template-columns: minmax(0, calc(92vh * var(--r))) 1fr; padding-right: 0; padding-left: var(--gutter); }
.scene.port.flip .ph { order: -1; }
.scene.port.flip .words { padding-left: 0; padding-right: var(--gutter); }
@media (max-width: 900px) {
  .scene.port.flip { padding-left: 0; }
  .scene.port.flip .words { padding-left: var(--gutter); }
}

/* the threshold: mark and line on black, no photograph */
.threshold {
  min-height: 100vh; background: var(--deep-night); color: var(--lontar);
  display: flex; align-items: center; padding: 0 var(--gutter);
}
.threshold .wordmark { font-size: clamp(64px, 11vw, 168px); color: var(--lontar); }
.threshold .logo { --logo-h: clamp(52px, 8.4vw, 132px); color: var(--lontar); }
/* the TM widens the box: shift so the word itself, not word + TM, sits on the centre line */
.threshold .logo { transform: translateX(4.5%); }
.threshold-line { margin-top: clamp(48px, 7vw, 96px); font-size: clamp(24px, 2.6vw, 38px); }
.threshold-choice { margin-top: 64px; display: flex; gap: 40px; flex-wrap: wrap; }
.threshold-choice .text-link { color: var(--lontar); }
.threshold-choice .quiet-link { color: var(--andesite); }
.threshold-choice .text-link:hover { color: var(--ember); }
.sound-toggle {
  background: transparent; color: var(--mist); padding: 0; font-size: 10px; letter-spacing: 0.1em;
}
.sound-toggle:hover { background: transparent; color: var(--ember); }
.sound-toggle[aria-pressed="true"] { color: var(--lontar); }

/* the home page shows the mark once, on the threshold */
.teaser-site .site-header > a { visibility: hidden; }

/* the staged threshold: black, then the mark, then the line, then the choice */
.threshold.staged .stage-1, .threshold.staged .stage-2, .threshold.staged .stage-3 { opacity: 0; transition: opacity 3200ms ease; }
.threshold.staged.s1 .stage-1, .threshold.staged.s2 .stage-2, .threshold.staged.s3 .stage-3 { opacity: 1; }
.no-js .threshold.staged .stage-1, .no-js .threshold.staged .stage-2, .no-js .threshold.staged .stage-3 { opacity: 1; }
.teaser-site .site-nav { opacity: 0; transition: opacity 2400ms ease; }
.teaser-site.entered .site-nav, .no-js .teaser-site .site-nav { opacity: 1; }

/* thre-allow: Sebastien's decision (2026-10-02) — the landing threshold is the one
   place the mark is centred. Everywhere else the system stays left-aligned. */
.threshold { justify-content: center; text-align: center; } /* thre-allow: landing exception */
.threshold > div { display: flex; flex-direction: column; align-items: center; }
.threshold-choice { justify-content: center; }

/* until the visitor enters, the page does not move */
html.locked { overflow: hidden; overscroll-behavior: none; }
html.locked .site-nav { pointer-events: none; }
.threshold.staged .threshold-choice { pointer-events: none; }
.threshold.staged.s3 .threshold-choice { pointer-events: auto; }

/* the landing sequence (v3): three questions in and out, then the slogan stays,
   the mark appears above it, then the choice */
.threshold-stack { display: grid; place-items: center; }
.threshold-stack > * { grid-area: 1 / 1; }
.statements { display: grid; place-items: center; }
.statements .st { grid-area: 1 / 1; margin: 0; max-width: 18em; font-size: var(--display-size); }
.final { display: flex; flex-direction: column; align-items: center; }
.final .slogan { margin-top: clamp(40px, 5vw, 72px); }
.threshold.staged .st, .threshold.staged .mark, .threshold.staged .slogan, .threshold.staged .choice { opacity: 0; }
.threshold.staged .st { transition: opacity 1800ms ease; }
.threshold.staged.st1-in .st1, .threshold.staged.st2-in .st2, .threshold.staged.st3-in .st3 { opacity: 1; }
.threshold.staged.st1-out .st1, .threshold.staged.st2-out .st2, .threshold.staged.st3-out .st3 { opacity: 0; transition-duration: 1500ms; }
.threshold.staged .slogan { transition: opacity 2600ms ease; }
.threshold.staged.slogan-in .slogan { opacity: 1; }
.threshold.staged .mark { transition: opacity 3000ms ease; }
.threshold.staged.mark-in .mark { opacity: 1; }
.threshold.staged .choice { transition: opacity 2400ms ease; pointer-events: none; margin-top: 72px; }
.threshold.staged.choice-in .choice { opacity: 1; pointer-events: auto; }

/* the beginning: one quiet choice on black starts the sound, then the sequence plays */
.threshold .begin { position: absolute; left: 0; right: 0; bottom: 16vh; margin: 0; justify-content: center; }
.threshold { position: relative; }
.threshold.staged .begin { opacity: 0; transition: opacity 2000ms ease; pointer-events: none; }
.threshold.staged.begin-in .begin { opacity: 1; pointer-events: auto; }
.threshold.staged.begun .begin { opacity: 0; pointer-events: none; transition-duration: 1600ms; }
.threshold-choice .enter { color: var(--lontar); }

/* the beginning: black, and only the macron, breathing. One touch starts the music and the story. */
.begin-macron {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: transparent; border: 0; padding: 40px 32px; cursor: pointer; z-index: 3;
}
.begin-macron:hover, .begin-macron:focus-visible { background: transparent; }
.begin-macron span { display: block; width: 72px; height: 3px; background: var(--lontar); }
.threshold.staged .begin-macron { opacity: 0; pointer-events: none; transition: opacity 2400ms ease; }
.threshold.staged.macron-in .begin-macron { opacity: 1; pointer-events: auto; }
.threshold.staged.macron-in .begin-macron span { animation: thre-breathe 4800ms ease-in-out 2400ms infinite; }
.threshold.staged.macron-out .begin-macron { opacity: 0; pointer-events: none; transition-duration: 1800ms; }
@keyframes thre-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .begin-macron span { animation: none !important; } }

/* thre-allow: the opening touch (Sebastien, 2026-10-02). The one moment of motion beyond a
   crossfade: the macron widens into a horizon while the music swells, then dissolves. */
.begin-hint {
  position: absolute; left: 0; right: 0; top: calc(50% + 64px); margin: 0; text-align: center; /* thre-allow: landing exception */
  font-family: var(--thre-sans); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--andesite);
  opacity: 0; transition: opacity 2400ms ease; pointer-events: none;
}
.threshold.staged.hint-in .begin-hint { opacity: 1; }
.threshold.staged.opening .begin-hint { opacity: 0; transition-duration: 700ms; }
.begin-macron span { transition: width 2200ms cubic-bezier(.22,.7,.12,1), opacity 1600ms ease; margin: 0 auto; }
.threshold.staged.opening .begin-macron { width: 100vw; padding-left: 0; padding-right: 0; pointer-events: none; }
.threshold.staged.opening .begin-macron span { width: 100vw; animation: none; height: 2px; }
@media (hover: none), (pointer: coarse) { .threshold.staged.macron-in:not(.opening) { cursor: pointer; } }

/* the first words on black: sound on, above the line */
.sound-cue {
  position: absolute; left: 0; right: 0; top: calc(50% - 88px); margin: 0; text-align: center; /* thre-allow: landing exception */
  font-family: var(--thre-sans); font-weight: 500; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--mist);
  opacity: 0; transition: opacity 2400ms ease; pointer-events: none;
}
.threshold.staged.cue-in .sound-cue { opacity: 1; }
.threshold.staged.opening .sound-cue { opacity: 0; transition-duration: 700ms; }

/* phones and tablets: use the visible screen height, so the address bar never pushes the threshold off-centre */
@supports (height: 100svh) {
  .threshold { min-height: 100svh; }
  .scene.land .ph { height: min(100svh, calc(100vw / var(--r))); }
}
@supports (height: 100svh) { @media (min-width: 901px) {
  .scene.port { min-height: 100svh; }
  .scene.port .ph { height: 92svh; }
} }
@media (max-width: 900px) {
  .threshold-choice { flex-direction: column; align-items: center; gap: 22px; }
  .statements .st { max-width: 14em; }
}

/* phones and portrait tablets: always the photograph first, then the words, as in the reels */
@media (max-width: 900px) {
  .scene.port { display: flex; flex-direction: column; }
  .scene.port .ph { order: -1; width: 100%; }
}
/* once the horizon has dissolved, it is gone: nothing lingers on slower devices */
.threshold.staged.macron-out .begin-macron { visibility: hidden; transition: opacity 1800ms ease, visibility 0s linear 1800ms; }
/* chapters set beside a portrait photograph carry longer text: a calmer size on tablets and laptops */
@media (min-width: 901px) {
  .scene.port .display-line { font-size: var(--display-size); }
  .scene.port { grid-template-columns: 1fr minmax(0, calc(84svh * var(--r))); }
  .scene.port .ph { height: 84svh; }
  .scene.port.flip { grid-template-columns: minmax(0, calc(84svh * var(--r))) 1fr; }
}

/* sharing: a quiet line under each chapter */
.share-row { margin-top: 40px; display: flex; gap: 32px; flex-wrap: wrap; }
.share-link {
  background: transparent; border: 0; padding: 0; cursor: pointer; border-radius: 0;
  font-family: var(--thre-sans); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--andesite); transition: color 400ms ease;
}
.share-link:hover, .share-link:focus-visible { background: transparent; color: var(--ember); }

/* the practice page shows the small mark in its header */
.practice-page .site-header > a { visibility: visible; }
.practice-page .site-header { position: static; }

/* THRĒ in running text: the webfont's own Ē places its macron badly, so the name is set
   with the drawn macron, Study C geometry (w 0.35em, h 0.06em, 0.05em from the top), as in the mark. */
.thre-name { white-space: nowrap; }
.thre-e { position: relative; display: inline-block; line-height: 1; }
.thre-macron {
  position: absolute; left: 50%; top: 0.05em; transform: translateX(-50%);
  width: 0.35em; height: 0.06em; min-height: 1px; background: currentColor;
}