/* Section 03 — FJORE / dark proof chapter: real fjore.pl captures inside a browser frame */

body {
  --tt-paper: var(--color-bg);
  --tt-ink: var(--color-surface);
}

.theme-on-dark {
  --color-bg: var(--tt-ink);
  --color-surface: var(--tt-ink);
  --color-text: var(--tt-paper);
  --color-text-muted: color-mix(in srgb, var(--tt-paper) 58%, transparent);
  --color-line: color-mix(in srgb, var(--tt-paper) 12%, transparent);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.theme-on-light {
  --color-bg: var(--tt-paper);
  --color-surface: var(--tt-paper);
  --color-text: var(--tt-ink);
  --color-text-muted: color-mix(in srgb, var(--tt-ink) 52%, transparent);
  --color-line: color-mix(in srgb, var(--tt-ink) 12%, transparent);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.theme-on-color {
  --color-bg: var(--tt-ink);
  --color-surface: var(--tt-ink);
  --color-text: var(--color-accent);
  --color-text-muted: color-mix(in srgb, var(--color-accent) 60%, transparent);
  --color-line: color-mix(in srgb, var(--color-accent) 20%, transparent);
  background-color: var(--color-bg);
  color: var(--color-text);
}

::selection {
  background: var(--color-text);
  color: var(--color-bg);
}

[data-theme-flip],
[data-theme-flip] * {
  transition:
    color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

#site-header[data-theme-flip] {
  background-color: transparent;
  color: var(--color-text);
}

html.is-menu-active #site-header[data-theme-flip] {
  --color-bg: var(--tt-paper);
  --color-text: var(--tt-ink);
  color: var(--tt-ink);
}

.section-03-fjore {
  --fjore-split: 41%;
  --fjore-panel-x: clamp(var(--space-md), calc(58 * var(--fluid)), var(--space-xl));
  --fjore-panel-top: clamp(6.5rem, calc(112 * var(--fluid)), 8rem);
  --fjore-panel-bottom: clamp(var(--space-md), calc(48 * var(--fluid)), var(--space-lg));
  /* Width of the framed 16:9 capture when the viewport height, not the stage width, is the constraint. */
  --fjore-frame-max: calc((var(--app-vh, 1vh) * 100 - 15rem) * 16 / 9);
  position: relative;
  min-height: calc(var(--app-vh, 1vh) * 100);
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
}

.fjore-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.fjore-live {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Browser frame — shared vessel for the real fjore.pl captures.
 * ------------------------------------------------------------------------ */

.fjore-browser {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--tt-paper) 15%, transparent);
  background: #111110;
  box-shadow: 0 28px 90px rgb(0 0 0 / 55%);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

a.fjore-browser:hover,
a.fjore-browser:focus-visible {
  border-color: color-mix(in srgb, var(--tt-paper) 32%, transparent);
  box-shadow: 0 38px 110px rgb(0 0 0 / 65%);
  transform: translateY(-0.25rem);
}

a.fjore-browser:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.fjore-browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tt-paper) 9%, transparent);
  background: #191917;
}

.fjore-browser__dots {
  display: inline-flex;
  gap: 0.4rem;
  flex: 1 0 0;
}

.fjore-browser__dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tt-paper) 16%, transparent);
}

.fjore-browser__url {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.28rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--tt-paper) 13%, transparent);
  color: color-mix(in srgb, var(--tt-paper) 66%, transparent);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}

.fjore-browser__dot {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--color-accent);
  animation: fjore-live-dot 2.4s var(--ease-in-out) infinite;
}

.fjore-browser__hint {
  flex: 1 0 0;
  color: color-mix(in srgb, var(--tt-paper) 40%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-align: right;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

a.fjore-browser:hover .fjore-browser__hint,
a.fjore-browser:focus-visible .fjore-browser__hint {
  color: var(--color-accent);
  transform: translate(0.1em, -0.1em);
}

@keyframes fjore-live-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.fjore-browser__body {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #131312;
}

.fjore-browser__body > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tall captures in the static fallback show their top slice, like a freshly loaded page. */
.fjore-browser__body--strip > img {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
}

.fjore-browser__track {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  will-change: transform;
}

.fjore-browser__track img {
  display: block;
  width: 100%;
  height: auto;
}

.fjore-browser__scrollbar {
  position: absolute;
  inset: 4px 4px 4px auto;
  width: 3px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tt-paper) 9%, transparent);
}

.fjore-browser__scrollbar i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18%;
  background: color-mix(in srgb, var(--tt-paper) 34%, transparent);
  will-change: transform;
}

/* ---------------------------------------------------------------------------
 * No-JS and reduced-motion fallback: three complete, readable acts.
 * ------------------------------------------------------------------------ */

.fjore-fallback__act {
  display: grid;
  min-height: calc(var(--app-vh, 1vh) * 100);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hero-grid-gap);
  border-bottom: 1px solid var(--color-line);
}

.fjore-fallback__content {
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr auto;
  padding: var(--fjore-panel-top) var(--fjore-panel-x) var(--fjore-panel-bottom);
}

.fjore-fallback__media {
  display: grid;
  min-width: 0;
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: var(--fjore-panel-top) clamp(var(--space-md), calc(44 * var(--fluid)), var(--space-lg)) var(--fjore-panel-bottom);
}

.fjore-fallback__media .fjore-browser {
  max-width: min(46rem, var(--fjore-frame-max));
}

.fjore-fallback__act--odd .fjore-fallback__content { grid-column: 1 / 6; }
.fjore-fallback__act--odd .fjore-fallback__media { grid-column: 6 / 13; }

.fjore-fallback__act--even .fjore-fallback__content {
  grid-column: 8 / 13;
  grid-row: 1;
}

.fjore-fallback__act--even .fjore-fallback__media {
  grid-column: 1 / 8;
  grid-row: 1;
}

/* ---------------------------------------------------------------------------
 * Case-study panel typography.
 * ------------------------------------------------------------------------ */

.fjore-panel__index {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: max(0.6875rem, calc(11 * var(--fluid)));
  font-weight: 520;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.fjore-panel__body {
  width: min(100%, 35rem);
  align-self: center;
}

.fjore-panel__meta {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  margin-bottom: clamp(var(--space-md), calc(32 * var(--fluid)), var(--space-lg));
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fjore-panel__meta span:first-child {
  color: var(--color-accent);
  font-size: var(--font-size-h3);
  font-weight: 430;
  letter-spacing: -0.05em;
  line-height: 1;
}

.fjore-panel__meta span:last-child {
  color: var(--color-text-muted);
  font-size: max(0.6875rem, calc(11 * var(--fluid)));
  font-weight: 580;
}

.fjore-panel h3,
.fjore-fallback__content h3 {
  max-width: 16ch;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.95rem, calc(42 * var(--fluid)), 3.05rem);
  font-variation-settings: "wght" 430;
  font-weight: 430;
  letter-spacing: -0.052em;
  line-height: 1.02;
  text-wrap: balance;
}

.fjore-panel__foot {
  display: grid;
  gap: clamp(var(--space-sm), calc(24 * var(--fluid)), var(--space-md));
  align-self: end;
}

.fjore-panel__foot > p {
  max-width: 46ch;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-text);
  font-size: var(--font-size-body);
  font-weight: 430;
  letter-spacing: -0.012em;
  line-height: 1.5;
}

.fjore-panel__specs {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-top: clamp(0.8rem, calc(16 * var(--fluid)), 1.1rem);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-mono);
  font-size: max(0.625rem, calc(10 * var(--fluid)));
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.fjore-panel__specs > div {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
}

.fjore-panel__specs dt {
  flex: 0 0 5.5rem;
  color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}

.fjore-panel__specs dd {
  margin: 0;
  color: var(--color-text-muted);
}

.fjore-panel__count {
  display: grid;
  width: min(100%, 11rem);
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: max(0.6875rem, calc(11 * var(--fluid)));
  letter-spacing: 0.08em;
}

.fjore-panel__count span:first-child { color: var(--color-accent); }

.fjore-panel__count i {
  height: 1px;
  background: var(--color-line);
}

.fjore-panel__actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.fjore-panel__cta {
  position: relative;
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-text);
  border-radius: 0;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: max(0.6875rem, calc(11 * var(--fluid)));
  font-weight: 620;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.fjore-panel__cta:hover,
.fjore-panel__cta:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--tt-paper);
}

.fjore-panel__cta > span:last-child {
  transition: transform var(--dur-fast) var(--ease-out);
}

.fjore-panel__cta:hover > span:last-child,
.fjore-panel__cta:focus-visible > span:last-child {
  transform: translate(0.12em, -0.12em);
}

/* ---------------------------------------------------------------------------
 * Live stage — pinned section: narrative left, one browser frame right.
 * Inside the frame the real fjore.pl scrolls in sync with the case study.
 * ------------------------------------------------------------------------ */

.section-03-fjore.sc-live {
  width: 100vw;
  height: calc(var(--app-vh, 1vh) * 100);
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* A permanent Onyx fascia keeps Nostero chrome legible above the stage. */
.section-03-fjore.sc-live::before {
  position: absolute;
  z-index: 24;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(4.5rem, 5.6vw, 5.4rem);
  border-bottom: 1px solid color-mix(in srgb, var(--tt-paper) 10%, transparent);
  background: var(--tt-ink);
  content: "";
  pointer-events: none;
}

.section-03-fjore.sc-live .fjore-fallback { display: none; }

.section-03-fjore.sc-live .fjore-live {
  position: absolute;
  inset: 0;
  display: flex;
}

.fjore-live__text {
  position: relative;
  flex: 0 0 var(--fjore-split);
  min-width: 0;
}

.sc-live .fjore-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--fjore-panel-top) var(--fjore-panel-x) var(--fjore-panel-bottom);
}

.sc-live [data-sc-panel="2"],
.sc-live [data-sc-panel="3"] {
  opacity: 0;
}

.sc-live .fjore-panel[inert] {
  pointer-events: none;
}

.fjore-live__stage {
  display: grid;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-items: center;
  padding: calc(clamp(4.5rem, 5.6vw, 5.4rem) + var(--space-md)) clamp(var(--space-md), calc(44 * var(--fluid)), var(--space-lg)) var(--fjore-panel-bottom);
}

.fjore-stage__inner {
  width: min(100%, var(--fjore-frame-max));
}

.fjore-stage__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0.9rem 0.1rem 0;
  color: color-mix(in srgb, var(--tt-paper) 38%, transparent);
  font-family: var(--font-mono);
  font-size: max(0.5625rem, calc(9 * var(--fluid)));
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Measurement hairline: the mechanical hinge between narrative and stage. */
.fjore-live::after {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: var(--fjore-split);
  width: 1px;
  background: var(--color-line);
  content: "";
  pointer-events: none;
}

/* One shared chronology stays physically attached to the hinge through every act. */
.fjore-progress {
  position: absolute;
  z-index: 18;
  top: 50%;
  left: var(--fjore-split);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-xs) 0.4rem;
  border: 1px solid var(--color-line);
  background: var(--tt-ink);
  color: color-mix(in srgb, var(--tt-paper) 42%, transparent);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.fjore-progress span {
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.fjore-progress span.is-active {
  color: var(--color-accent);
  transform: scale(1.18);
}

.fjore-progress i {
  width: 1px;
  height: 1.2rem;
  background: var(--color-line);
}

@media (max-width: 1200px) and (min-width: 768px) {
  .section-03-fjore { --fjore-split: 44%; }
}

@media (max-width: 980px) and (min-width: 768px) {
  .section-03-fjore { --fjore-panel-x: var(--space-lg); }

  .fjore-panel h3,
  .fjore-fallback__content h3 {
    font-size: clamp(1.8rem, 3.9vw, 2.5rem);
  }

  .fjore-panel__foot > p { font-size: 1rem; }
}

@media (max-width: 767.98px) {
  .section-03-fjore {
    --fjore-panel-x: var(--hero-gutter);
    --fjore-panel-top: var(--space-md);
    --fjore-panel-bottom: var(--space-md);
    --fjore-frame-max: calc((var(--app-vh, 1vh) * 45 - 10rem) * 16 / 9);
  }

  .section-03-fjore.sc-live::before {
    height: 4.75rem;
  }

  .fjore-fallback__act {
    display: flex;
    min-height: calc(var(--app-vh, 1vh) * 100);
    flex-direction: column;
  }

  .fjore-fallback__content,
  .fjore-fallback__act--even .fjore-fallback__content {
    display: grid;
    min-height: calc(var(--app-vh, 1vh) * 52);
    order: 2;
    padding: var(--space-md) var(--hero-gutter) var(--space-md);
  }

  .fjore-fallback__media,
  .fjore-fallback__act--even .fjore-fallback__media {
    width: 100%;
    order: 1;
    padding: 5.5rem var(--hero-gutter) var(--space-sm);
  }

  .fjore-fallback__media .fjore-browser { max-width: 100%; }

  .fjore-panel__index { font-size: 0.625rem; }

  .fjore-panel__meta {
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
  }

  .fjore-panel__meta span:first-child {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }

  .fjore-panel__meta span:last-child { font-size: 0.625rem; }

  .fjore-panel h3,
  .fjore-fallback__content h3 {
    max-width: 18ch;
    font-size: clamp(1.55rem, 6.8vw, 2.1rem);
    letter-spacing: -0.048em;
    line-height: 1;
  }

  .fjore-panel__foot { gap: var(--space-sm); }

  .fjore-panel__foot > p {
    max-width: 44ch;
    font-size: clamp(0.8125rem, 3.6vw, 0.9375rem);
    line-height: 1.42;
  }

  .fjore-panel__specs {
    gap: 0.4rem;
    font-size: 0.5625rem;
  }

  .fjore-panel__specs dt { flex-basis: 4.5rem; }

  .fjore-panel__count {
    width: 8rem;
    gap: var(--space-xs);
    font-size: 0.625rem;
  }

  .fjore-panel__cta {
    min-height: 2.75rem;
    padding-inline: var(--space-sm);
    font-size: 0.625rem;
  }

  /* Mobile is a strict 45vh stage / 55vh narrative instrument. */
  .section-03-fjore.sc-live .fjore-live {
    display: grid;
    grid-template-rows: 45% 55%;
    grid-template-columns: minmax(0, 1fr);
  }

  .fjore-live__text {
    flex: none;
    grid-row: 2;
  }

  .fjore-live__stage {
    grid-row: 1;
    padding: 5rem var(--hero-gutter) 0.6rem;
  }

  .fjore-stage__inner { width: min(100%, var(--fjore-frame-max)); }

  .fjore-stage__caption {
    margin-top: 0.55rem;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .fjore-browser__bar { padding: 0.42rem 0.65rem; }

  .fjore-browser__url {
    padding: 0.22rem 0.75rem;
    font-size: 0.5625rem;
  }

  .sc-live .fjore-panel {
    min-width: 0;
    padding: var(--space-md) var(--hero-gutter);
    overflow: hidden;
  }

  .fjore-panel__body { align-self: center; }

  .fjore-live::after {
    top: 45%;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: 1px;
  }

  .fjore-progress {
    top: 45%;
    left: 50%;
    flex-direction: row;
    gap: var(--space-xs);
    padding: 0.4rem var(--space-xs);
  }

  .fjore-progress i {
    width: 1.2rem;
    height: 1px;
  }
}

@media (max-width: 767.98px) and (max-height: 720px) {
  .fjore-panel,
  .fjore-fallback__content,
  .fjore-fallback__act--even .fjore-fallback__content {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }

  .fjore-panel h3,
  .fjore-fallback__content h3 {
    font-size: clamp(1.4rem, 6.4vw, 1.75rem);
  }

  .fjore-panel__foot > p {
    font-size: 0.78125rem;
    line-height: 1.34;
  }

  .fjore-panel__specs { display: none; }

  .fjore-panel__meta { margin-bottom: var(--space-xs); }
  .fjore-panel__foot { gap: var(--space-xs); }
}

html.is-reduced-motion [data-theme-flip],
html.is-reduced-motion [data-theme-flip] * {
  transition: none;
}

html.is-reduced-motion .fjore-browser__dot {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .fjore-panel__cta,
  .fjore-panel__cta > span:last-child,
  .fjore-progress span,
  .fjore-browser,
  .fjore-browser__hint {
    transition: none;
  }

  .fjore-browser__dot { animation: none; }

  a.fjore-browser:hover { transform: none; }
}