/* Founders Hub, structure and composition. Rewritten 2026-08-20 to implement
   direction D "Plakatas", the artboard Rokas signed off:
   deliverables/web-directions/Plakatas.body.html.

   THIS FILE HOLDS LAYOUT AND NOTHING ELSE. Colours, fonts and sizes come from
   tokens.css and nothing below invents one. That rule is what makes a
   brandbook swap a one file edit, so keep it: if a value here needs a colour
   or a size, it gets a token first.

   The composition in one paragraph. Every section is a stage: a full bleed
   band with overflow hidden, carrying absolutely positioned planes behind a
   normal document flow column. Planes overlap each other and run off the frame
   edges. Type never sits on a texture, only on a solid ground, which is the
   failure mode that killed three of the four round three directions. There are
   exactly two rotations on the page, the SEA plane in the fold and the journey
   line under Kaip patekti, and both degrade to something upright below 900px.

   Square corners everywhere, per the 2026-08-06 decision. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Lets a block-size transition run to the auto keyword, which is what makes
     the disclosure rows animate without any script measuring anything. */
  interpolate-size: allow-keywords;
  /* The header floats over the page, so an anchor has to stop below it. */
  scroll-padding-top: calc(var(--fh-header-h) + var(--fh-header-inset) * 2);
}

body {
  margin: 0;
  background: var(--fh-ink);
  color: var(--fh-white);
  font-family: var(--fh-font-body);
  font-size: var(--fh-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* render.js sets [hidden] to gate sections. Components that declare their own
   display would otherwise beat the attribute and quietly render an empty block,
   so the attribute wins outright. */
[hidden] { display: none !important; }

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
summary { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--fh-blue);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Disclosure motion. Every dropdown on the page is a native <details>, and
   until 2026-08-21 all sixteen of them snapped open in a single frame, which
   is what made them feel cheap. ::details-content is the box the browser
   already wraps everything after the summary in, so animating it needs no
   wrapper element and nothing measured in script.

   Fast on purpose: Rokas asked for smooth but quick, so this runs at
   --fh-motion-fast and not a frame longer.

   A browser without ::details-content keeps the instant open, which is the
   behaviour it has today rather than a broken one. The reduced-motion block
   near the top of this file cancels the whole thing.
------------------------------------------------------------------ */

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size var(--fh-motion-fast) var(--fh-ease),
    content-visibility var(--fh-motion-fast) allow-discrete;
}
details[open]::details-content { block-size: auto; }

/* The body also rises the last few pixels into place, so the text arrives
   with the height instead of being uncovered by it. */
details > :not(summary) {
  transition:
    opacity var(--fh-motion-fast) var(--fh-ease),
    transform var(--fh-motion-fast) var(--fh-ease);
}
details:not([open]) > :not(summary) { opacity: 0; transform: translateY(-6px); }

.fh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--fh-blue);
  color: var(--fh-ink);
  padding: 12px 18px;
  font-weight: 700;
}
.fh-skip:focus { left: 0; }

/* ------------------------------------------------------------------
   Layout primitives
------------------------------------------------------------------ */

.fh-wrap {
  width: 100%;
  max-width: var(--fh-content-max);
  margin-inline: auto;
  padding-inline: var(--fh-gutter);
}

/* A band is a stage. Relative so planes anchor to it, clipped so a plane may
   run off the frame without ever producing a horizontal scrollbar. */
.fh-band {
  position: relative;
  overflow: hidden;
  background: var(--fh-night);
  padding-block: var(--fh-band-pad);
}

/* Every band runs on NIGHT. NIGHT-2 is a plane or a plate, never a ground,
   which is what holds the brandbook 40 percent. */
.fh-band > .fh-wrap > .fh-statement { margin-bottom: var(--fh-space-3); }
.fh-band > .fh-wrap > .fh-intro { margin-bottom: var(--fh-space-8); }

.fh-band > .fh-wrap { position: relative; z-index: 2; }

/* Decoration. Never carries copy, never takes a pointer. */
.fh-plane,
.fh-art {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.fh-art svg { width: 100%; height: 100%; display: block; }

/* The watermark colourways. Two, because artwork on a dark ground and artwork
   on the SKY band cannot be the same colour. */
.fh-art--on-dark  { --fh-icon-base: var(--fh-art-sky); --fh-icon-accent: var(--fh-art-sky-accent); }
.fh-art--on-light { --fh-icon-base: var(--fh-art-ink); --fh-icon-accent: var(--fh-art-ink-accent); }

/* ------------------------------------------------------------------
   Type
------------------------------------------------------------------ */

.fh-mega,
.fh-statement,
.fh-kicker {
  font-family: var(--fh-font-mega);
  font-weight: var(--fh-mega-weight);
  font-variation-settings: 'wdth' 78;
  text-transform: uppercase;
  letter-spacing: var(--fh-mega-track);
  word-spacing: 0.10em;
}

.fh-mega      { font-size: var(--fh-size-mega); line-height: 0.86; }
.fh-statement { font-size: var(--fh-size-statement); line-height: 0.86; }
.fh-kicker    { font-size: var(--fh-size-kicker); line-height: 0.9; color: var(--fh-blue); }

.fh-label {
  font-family: var(--fh-font-display);
  font-size: var(--fh-size-micro);
  letter-spacing: var(--fh-track-display);
  text-transform: uppercase;
  line-height: 1.4;
}

.fh-h2 { font-size: var(--fh-size-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.fh-lead { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.32; letter-spacing: -0.01em; }
.fh-claim { font-size: var(--fh-size-claim); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; max-width: 30ch; }
.fh-intro { font-size: clamp(17px, 1.4vw, 18px); line-height: 1.5; max-width: 46ch; color: var(--fh-grey); }
.fh-body { font-size: var(--fh-size-body); line-height: 1.6; max-width: 56ch; }
.fh-body + .fh-body { margin-top: var(--fh-space-2); }
.fh-small { font-size: var(--fh-size-small); }
.fh-muted { color: var(--fh-grey); }

/* A short SKY rule under a demoted section title. The composition carries the
   hierarchy; this marks where the register changes. */
.fh-rule {
  display: block;
  width: 90px;
  height: 5px;
  background: var(--fh-blue);
  margin-block: var(--fh-space-3) var(--fh-space-5);
}

/* The brand's slashed zero. The webfonts carry no OpenType alternate, so
   render.js wraps every 0 inside .fh-num and the slash is drawn here.

   The slash is measured in em, and the three faces set a zero at three very
   different widths: Archivo at 78% width puts it at 0.51em, DM Sans at 0.68em,
   Audiowide at 1.01em. One fixed width therefore fits exactly one of them and
   overshoots the other two, which is what turned "001" in a display heading
   into a single long strike. So the width travels with the face. */
.fh-num { font-style: normal; }
.fh-z { position: relative; display: inline-block; font-style: normal; }
.fh-z::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fh-slash, 0.74em);
  height: 0.085em;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-24deg);
  transform-origin: center;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Brand texture. One recipe, torn twice with two different seeds so the two
   fields do not read as the same stamp. A dot grid over SEA, broken up by a
   turbulence mask, and always sized and positioned so the field ends mid
   shape instead of fading out.

   Nothing legible is ever placed on it. Plates may overlap it, type may not.
------------------------------------------------------------------ */

.fh-tear {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-color: var(--fh-blue-deep);
  background-image: radial-gradient(var(--fh-night) 42%, transparent 44%);
  background-size: var(--fh-dot) var(--fh-dot);
  -webkit-mask-image: var(--fh-tear-mask);
  mask-image: var(--fh-tear-mask);
  -webkit-mask-size: var(--fh-tear-scale) var(--fh-tear-scale);
  mask-size: var(--fh-tear-scale) var(--fh-tear-scale);
  -webkit-mask-position: var(--fh-tear-pos);
  mask-position: var(--fh-tear-pos);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root {
  --fh-tear-scale: 1000px;
  --fh-tear-pos: -180px -100px;
  --fh-tear-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='2' seed='23'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='10' intercept='-3.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)'/%3E%3C/svg%3E");
  --fh-tear-mask-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='2' seed='41'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='10' intercept='-3.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   Header. A bar that floats over the page instead of being glued to the top
   of the frame, rebuilt 2026-08-21 on Rokas's note that the old one "atrodo
   biski tragiskai". The reference he sent was a rounded pill; the brandbook
   forbids those, so the detachment, the translucency and the movement carry
   over and the shape does not.

   Three states:

     rest      full content width. It already carries its translucent ground,
               because the fold halftone starts at the very top of the page
               and the standing rule on this site is that type never sits on a
               texture.
     stuck     the same slab contracted to hug its own contents, so it reads
               as a compact bar floating over whatever is scrolling under it.
     hidden    travelled up out of the frame because the reader is moving down
               the page. Any upward scroll brings it straight back.

   It stays sticky rather than fixed so it still occupies its place at the top
   of the document and nothing has to be padded out of its way on load.
------------------------------------------------------------------ */

.fh-header {
  position: sticky;
  top: var(--fh-header-inset);
  z-index: 50;
  padding-inline: var(--fh-gutter);
  transition: transform var(--fh-motion-slow) var(--fh-ease);
}

/* Out of the frame, plus its own inset and the hairline, so no edge of it is
   left peeking at the top of the viewport. */
.fh-header.is-hidden {
  transform: translate3d(0, calc(-100% - var(--fh-header-inset) - 4px), 0);
}

.fh-header__bar {
  display: flex;
  align-items: center;
  gap: var(--fh-space-3);
  width: 100%;
  max-width: var(--fh-content-max);
  min-height: var(--fh-header-h);
  margin-inline: auto;
  padding-inline: var(--fh-space-3);
  border: 1px solid var(--fh-line);
  background-color: var(--fh-night-72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  transition: max-width var(--fh-motion-slow) var(--fh-ease);
}

/* fit-content is what contracts the bar around its own contents. It reads as
   an intrinsic keyword, so it only interpolates because interpolate-size is
   set on the root; without it the bar would snap instead of travelling. */
.fh-header.is-stuck .fh-header__bar { max-width: fit-content; }

/* On a phone the bar carries the lockup, the language pair and the button
   with no nav, and the inset plus the bar's own padding cost 80px that the
   old full bleed header did not spend. Both shrink so the button keeps its
   whole label instead of being cut by the frame. */
@media (max-width: 768px) {
  .fh-header { padding-inline: var(--fh-space-2); }
  .fh-header__bar {
    gap: var(--fh-space-2);
    padding-inline: var(--fh-space-2);
    min-height: 56px;
  }
}

.fh-logo { display: flex; align-items: center; gap: 10px; flex: none; }
.fh-logo:hover { text-decoration: none; }
.fh-logo__mark { height: 30px; width: auto; }
.fh-logo__word { height: 24px; width: auto; }

.fh-nav { display: none; margin-left: auto; align-items: center; gap: 4px; }
.fh-nav a {
  padding: 9px 14px;
  font-size: var(--fh-size-small);
  color: var(--fh-grey);
  transition: color 0.2s var(--fh-ease), background 0.2s var(--fh-ease);
}
.fh-nav a:hover { color: var(--fh-white); background: var(--fh-blue-wash); text-decoration: none; }
@media (min-width: 900px) { .fh-nav { display: flex; } }

.fh-lang { display: flex; align-items: center; gap: 2px; margin-left: auto; }
@media (min-width: 900px) { .fh-lang { margin-left: 0; } }
.fh-lang a {
  padding: 6px 8px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  letter-spacing: var(--fh-track-display);
  color: var(--fh-grey);
}
.fh-lang a:hover { color: var(--fh-white); text-decoration: none; }
.fh-lang a.is-current { color: var(--fh-blue); }

/* The header button stays at every width. The page has one job and this is
   the only place the action is reachable without scrolling to the bottom. */
.fh-header .fh-btn--sm { flex: none; }


/* ------------------------------------------------------------------
   Buttons. One primary intent on the page: join. The ghost variant exists
   only for the events toggle, which is a control rather than a call to action.
------------------------------------------------------------------ */

.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--fh-radius-btn);
  font-size: var(--fh-size-small);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--fh-ease), color 0.2s var(--fh-ease),
              border-color 0.2s var(--fh-ease), transform 0.12s var(--fh-ease);
}
.fh-btn:hover { text-decoration: none; }
.fh-btn:active { transform: translateY(1px); }

.fh-btn--primary { background: var(--fh-blue); color: var(--fh-ink); }
.fh-btn--primary:hover { background: var(--fh-white); }

.fh-btn--invert { background: var(--fh-ink); color: var(--fh-white); }
.fh-btn--invert:hover { background: var(--fh-white); color: var(--fh-ink); }

.fh-btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.fh-btn--ghost:hover { background: var(--fh-white); color: var(--fh-ink); border-color: var(--fh-white); }

.fh-btn--sm { padding: 10px 13px; font-size: 11px; }
@media (min-width: 480px) { .fh-btn--sm { padding: 11px 18px; font-size: var(--fh-size-micro); } }
.fh-btn--lg { padding: 18px 32px; font-size: 16px; }

/* ------------------------------------------------------------------
   Fold. The stage: a torn halftone field down the right, one rotated SEA
   plane running off both edges, three photo plates shingled down and to the
   right, and the mega lockup printed across the plane. Every caption sits in
   its own solid bar, never on the hatch.
------------------------------------------------------------------ */

.fh-fold {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px);
}

.fh-fold__tear {
  left: 54%;
  right: -16%;
  top: 0;
  bottom: 0;
  display: none;
}
@media (min-width: 940px) { .fh-fold__tear { display: block; } }

/* The one rotated plane on the page's upper half. SEA, so the white mega type
   crosses it without changing colour. Runs off both edges. */
.fh-fold__plane {
  left: -12%;
  right: -12%;
  top: clamp(112px, 20vw, 290px);
  height: clamp(70px, 11vw, 158px);
  background: var(--fh-blue-deep);
  transform: rotate(-4deg);
  z-index: 1;
}

.fh-fold__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--fh-space-8);
  align-items: center;
}
@media (min-width: 940px) {
  .fh-fold__inner { grid-template-columns: 1.05fr 0.95fr; }
}

/* The mega lockup. Each line is offset differently and the last two cross the
   SEA plane, so the name reads as printed onto it. */
.fh-fold__title {
  display: flex;
  flex-direction: column;
  line-height: 0.84;
  margin-bottom: var(--fh-space-6);
}
.fh-fold__title span { display: block; }
.fh-fold__title span:nth-child(1) { font-size: var(--fh-size-fold-sm); color: var(--fh-blue); padding-left: 0.07em; }
.fh-fold__title span:nth-child(2) { font-size: var(--fh-size-fold-lg); }
.fh-fold__title span:nth-child(3) { font-size: var(--fh-size-fold-lg); padding-left: 0.75em; }

.fh-fold__lead { max-width: 30ch; margin-bottom: var(--fh-space-6); }

.fh-fold__cta { display: flex; align-items: center; gap: var(--fh-space-3); }
.fh-fold__bar { flex: 0 1 96px; height: 5px; background: var(--fh-spark); }

/* max-width so the label can never reach the texture strip, at any width. */
.fh-fold__tag {
  margin-top: var(--fh-space-6);
  max-width: 30ch;
  color: var(--fh-blue);
}

/* Photo plates. Three overlapping flats stepped down and to the right, the
   first and third pushed past the content column so they read as cropped by
   the frame. The shoot after 2026-08-22 replaces the flat, not the position:
   drop an <img> into the figure and the caption bar stays where it is. */
/* The right column of the fold: the photograph, then the three fact plates. */
.fh-fold__right {
  display: grid;
  gap: var(--fh-space-5);
}

.fh-fold__photo {
  margin: 0;
  overflow: hidden;
}
.fh-fold__photo img {
  display: block;
  width: 100%;
  /* height:auto, or the 900 in the height attribute beats the ratio and the
     picture renders at its full pixel height. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Above the two column break the picture runs off the right edge the way the
   plates do, so it reads as cropped by the frame rather than placed in a box. */
@media (min-width: 940px) {
  .fh-fold__photo { margin-right: -8%; }
}

.fh-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 570 / 300;
}

.fh-slide {
  position: absolute;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  transition: transform var(--fh-motion-slow) var(--fh-ease);
}
.fh-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The caption always sits in its own solid bar. Block rather than flex: the
   string carries a .fh-num span mid sentence and a flex container drops the
   whitespace-only text node either side of it. */
.fh-slide__ph {
  position: static;
  display: block;
  padding: 12px var(--fh-space-3);
  background: var(--fh-night);
  color: var(--fh-white);
  font-family: var(--fh-font-display);
  font-size: 10px;
  letter-spacing: var(--fh-track-display);
  text-transform: uppercase;
}
@media (min-width: 480px) { .fh-slide__ph { font-size: var(--fh-size-micro); } }

.fh-slide:nth-child(1) { left: 24.6%; right: 0; top: 0; }
.fh-slide:nth-child(2) { left: 0; width: 63.2%; top: 37.4%; }
.fh-slide:nth-child(2) .fh-slide__ph { background: var(--fh-blue); color: var(--fh-ink); }
.fh-slide:nth-child(3) { left: 21.1%; right: 0; top: 73.5%; }

/* Hover. The plate itself grows, so the photograph gets bigger in the fold
   rather than zooming inside a window that stays the same size. Each plate
   grows AWAY from the edge the frame already crops: the top and bottom plates
   are anchored to their cropped right corner and open into the fold, the
   middle one opens to the right off its own left edge. Nothing new runs off
   the page, and the hovered plate lifts over the other two.

   Pointer devices only. On a phone hover would latch on tap and leave a plate
   stuck at the larger size. */
@media (hover: hover) {
  .fh-slide:hover { transform: scale(1.07); z-index: 3; }
}
.fh-slide:nth-child(1) { transform-origin: 100% 0; }
.fh-slide:nth-child(2) { transform-origin: 0 50%; }
.fh-slide:nth-child(3) { transform-origin: 100% 100%; }

/* Below the two column break the plates carry the fold on their own, so the
   torn field moves behind them rather than behind the copy. */
.fh-slides::before {
  content: '';
  position: absolute;
  inset: -6% 0 -4% -18%;
  z-index: 0;
  background-color: var(--fh-blue-deep);
  background-image: radial-gradient(var(--fh-night) 42%, transparent 44%);
  background-size: var(--fh-dot) var(--fh-dot);
  -webkit-mask-image: var(--fh-tear-mask);
  mask-image: var(--fh-tear-mask);
  -webkit-mask-size: 700px 700px;
  mask-size: 700px 700px;
  -webkit-mask-position: -80px -60px;
  mask-position: -80px -60px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (min-width: 940px) {
  .fh-slides::before { display: none; }
  /* The first and third plate push past the content column so they read as
     cropped by the frame. Only above the break, where there is margin to run
     into: below it the same overhang would be clipped by the fold instead. */
  .fh-slide:nth-child(1) { right: -14%; }
  .fh-slide:nth-child(3) { right: -8%; }
}

/* ------------------------------------------------------------------
   Kas tai. Hierarchy inverted: the opening sentence is the weight of the
   section and the section title demotes to a small SKY line above it. The
   three points are small disclosure rows shingled down the right, so both
   states are visible at once and the detail is one click away rather than a
   wall of muted copy.
------------------------------------------------------------------ */

.fh-about { display: grid; gap: var(--fh-space-8); align-items: start; }
@media (min-width: 900px) {
  .fh-about { grid-template-columns: 1fr 1fr; gap: var(--fh-space-12); }
}

/* Every watermark on the page is offset with a margin percentage rather than
   a top or bottom percentage. Both resolve against the containing block, but
   a top or bottom percentage resolves against its HEIGHT and a margin
   percentage against its WIDTH. Opening a disclosure row changes a section's
   height and never its width, which is why the artwork used to slide down the
   page whenever a dropdown opened. Same reason the journey line is hung on a
   margin. */

/* Kas tai is the exception, and it is the stronger fix: this one is not a
   plane at all. It sits in the flow under the opening sentence, in the left
   column, which no dropdown can resize. So it cannot drift, and the section
   grows to hold it instead of cropping it, which is what happened on a wide
   screen where the column is short and the watermark is at full size. */
.fh-about__art {
  position: static;
  width: min(320px, 74%);
  /* The glyph ratio, not the icon box ratio: this one carries a cropped
     viewBox, so the element is all artwork and no transparent padding. */
  aspect-ratio: 562 / 694;
  margin-top: var(--fh-space-5);
  display: none;
}
@media (min-width: 1100px) { .fh-about__art { display: block; } }

.fh-points { display: flex; flex-direction: column; gap: var(--fh-space-3); }

/* The staircase. The right edge holds and the left edge steps, so the stack
   cuts a slope without any row ever reaching past the frame. */
.fh-point {
  background: var(--fh-night-2);
  transition: background var(--fh-motion-fast) var(--fh-ease);
}
.fh-point:nth-child(1) { margin-left: calc(var(--fh-step) * 1.5); }
.fh-point:nth-child(3) { margin-left: calc(var(--fh-step) * 3); }
.fh-point[open] { background: var(--fh-blue-deep); }

.fh-point > summary {
  list-style: none;
  display: block;
  padding: var(--fh-space-4);
}
.fh-point > summary::-webkit-details-marker { display: none; }

.fh-point__head { display: flex; align-items: center; gap: 14px; }
.fh-point__dot { flex: none; width: 12px; height: 12px; background: var(--fh-mark, var(--fh-blue)); }
.fh-point:nth-child(1) { --fh-mark: var(--fh-mustard); }
.fh-point:nth-child(2) { --fh-mark: var(--fh-spark); }
.fh-point:nth-child(3) { --fh-mark: var(--fh-turquoise); }

.fh-point__title {
  flex: 1 1 auto;
  font-size: var(--fh-size-row);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* The open and closed marker. Outlined SKY when closed, a solid white square
   when open, which is the only state change the row needs.

   Two hairlines rather than a plus glyph, because a glyph swap cannot be
   animated: the upright bar rotates flat into the other one, so the plus
   becomes a minus over the same duration the row takes to open. */
.fh-point__toggle,
.fh-included__toggle {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--fh-blue);
  color: var(--fh-blue);
  transition:
    background var(--fh-motion-fast) var(--fh-ease),
    border-color var(--fh-motion-fast) var(--fh-ease),
    color var(--fh-motion-fast) var(--fh-ease);
}
.fh-point__toggle::before,
.fh-point__toggle::after,
.fh-included__toggle::before,
.fh-included__toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--fh-motion-fast) var(--fh-ease);
}
.fh-point__toggle::after,
.fh-included__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] > summary .fh-point__toggle::after,
details[open] > summary .fh-included__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
details[open] > summary .fh-point__toggle,
details[open] > summary .fh-included__toggle {
  background: var(--fh-white);
  border-color: var(--fh-white);
  color: var(--fh-blue-deep);
}

.fh-point__lead {
  display: block;
  margin-top: 14px;
  font-size: var(--fh-size-small);
  line-height: 1.6;
  color: var(--fh-grey);
  transition:
    color var(--fh-motion-fast) var(--fh-ease),
    font-size var(--fh-motion-fast) var(--fh-ease);
}
.fh-point[open] .fh-point__lead { color: var(--fh-white); font-size: var(--fh-size-body); }

.fh-point__more {
  margin: 0 var(--fh-space-4) var(--fh-space-4);
  padding-top: var(--fh-space-3);
  border-top: 1px solid var(--fh-white-34);
  font-size: var(--fh-size-small);
  line-height: 1.6;
  color: var(--fh-white-82);
}
.fh-point:not([open]) .fh-point__more { color: var(--fh-grey); border-top-color: var(--fh-line); }

/* ------------------------------------------------------------------
   Kas ieina. Seven disclosure rows, the first open. The diagonal comes from
   the rows themselves: the left edge steps right on every row while the right
   edge holds, so the stack cuts a slope through the section.
------------------------------------------------------------------ */

.fh-included__art {
  right: -4%;
  top: 0;
  width: min(420px, 30%);
  aspect-ratio: 420 / 294;
  display: none;
}
@media (min-width: 1100px) { .fh-included__art { display: block; } }

.fh-included { display: flex; flex-direction: column; gap: var(--fh-space-2); }
.fh-included details:nth-child(2) { margin-left: calc(var(--fh-step) * 1); }
.fh-included details:nth-child(3) { margin-left: calc(var(--fh-step) * 2); }
.fh-included details:nth-child(4) { margin-left: calc(var(--fh-step) * 3); }
.fh-included details:nth-child(5) { margin-left: calc(var(--fh-step) * 4); }
.fh-included details:nth-child(6) { margin-left: calc(var(--fh-step) * 5); }
.fh-included details:nth-child(7) { margin-left: calc(var(--fh-step) * 6); }

.fh-included summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--fh-space-3);
  min-height: 72px;
  padding: var(--fh-space-2) var(--fh-space-4);
  background: var(--fh-night-2);
  transition:
    color var(--fh-motion-fast) var(--fh-ease),
    background var(--fh-motion-fast) var(--fh-ease);
}
.fh-included summary::-webkit-details-marker { display: none; }
.fh-included summary:hover { color: var(--fh-blue); }
.fh-included details[open] summary { background: var(--fh-blue-deep); color: var(--fh-white); }

.fh-included__name {
  flex: 1 1 auto;
  font-size: var(--fh-size-row);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* The open body: a NIGHT-2 plate with a SKY rule standing in for the row's
   left edge, so an open row still reads as part of the staircase. */
.fh-included__body {
  display: flex;
  gap: var(--fh-space-4);
  background: var(--fh-night-2);
  padding: var(--fh-space-3) var(--fh-space-4) var(--fh-space-4) 0;
}
.fh-included__body::before { content: ''; flex: none; width: 4px; background: var(--fh-blue); }
.fh-included__body p { max-width: 74ch; line-height: 1.6; }

/* ------------------------------------------------------------------
   Ko ieskom. A sheared SKY band cut with clip-path rather than a transform,
   running the full width of the frame. The heading is printed on it in NIGHT,
   the artwork is cropped by the left edge, and the white text plate sits on
   top and hangs below the band's lower boundary.
------------------------------------------------------------------ */

.fh-seek__band {
  inset: 0;
  background: var(--fh-blue);
  -webkit-clip-path: polygon(0 var(--fh-shear-top), 100% 0, 100% calc(100% - var(--fh-shear-bottom)), 0 100%);
  clip-path: polygon(0 var(--fh-shear-top), 100% 0, 100% calc(100% - var(--fh-shear-bottom)), 0 100%);
}

.fh-seek__art {
  left: -6%;
  bottom: 0;
  margin-bottom: -3.3%;
  width: min(420px, 26%);
  aspect-ratio: 420 / 359;
  display: none;
}
@media (min-width: 1100px) { .fh-seek__art { display: block; } }

.fh-seek { display: grid; gap: var(--fh-space-6); align-items: start; }
@media (min-width: 900px) {
  .fh-seek { grid-template-columns: 0.85fr 1.15fr; gap: var(--fh-space-8); }
}

.fh-seek__head { color: var(--fh-ink); }
.fh-seek__mark { display: block; width: 14px; height: 14px; background: var(--fh-spark); margin-bottom: var(--fh-space-3); }

.fh-seek__body {
  background: var(--fh-white);
  color: var(--fh-ink);
  padding: var(--fh-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--fh-space-3);
}
@media (min-width: 900px) {
  /* The plate hangs below the band's lower boundary, which is what stops the
     shear from reading as a stripe with a box parked inside it. */
  .fh-seek__body { margin-bottom: calc(-1 * var(--fh-band-pad) / 2); }
}
.fh-seek__body .fh-lead { max-width: 44ch; line-height: 1.42; }
.fh-seek__body .fh-body { color: var(--fh-ink-74); font-size: clamp(16px, 1.3vw, 17px); }

/* ------------------------------------------------------------------
   Renginiai. Plates of different height and ground shingled across a second
   tear of the halftone. The three accent colours do their brandbook job here
   and only here on this band: they label the event type. Every card is a
   solid ground, so no copy sits on the dots.

   The markup comes from render.js, so these class names are a contract.
------------------------------------------------------------------ */

.fh-events__tear {
  left: 40%;
  right: -6%;
  top: -14%;
  bottom: -8%;
  --fh-tear-mask: var(--fh-tear-mask-b);
  /* Sampled, not guessed: the seed 41 mask carries a transparent column down
     its left third and a torn corner bottom left, so the field is placed to
     put both inside the frame and end mid shape. */
  --fh-tear-scale: 1150px;
  --fh-tear-pos: -96px 0px;
}

.fh-events { margin-top: var(--fh-space-8); }

/* One grid, three hosts: the landing section and the two lists on the events
   page. The shingle comes from the nth-child rules below, and those count
   inside their own container, so each list steps on its own. */
#events,
#events-upcoming,
#events-past { display: grid; gap: var(--fh-space-4); }
@media (min-width: 780px) {
  #events,
  #events-upcoming,
  #events-past { grid-template-columns: 1fr 1fr 1.25fr; align-items: start; }
}

.fh-event {
  display: flex;
  flex-direction: column;
  gap: var(--fh-space-2);
  min-height: 300px;
  padding: var(--fh-space-4);
  background: var(--fh-night-2);
}
.fh-event > div:nth-of-type(1) { flex: 1 1 auto; }

/* Three grounds in rotation, so a fourth event extends the pattern instead of
   needing a new rule. */
@media (min-width: 780px) {
  .fh-event:nth-child(3n + 1) { margin-top: var(--fh-space-6); }
  .fh-event:nth-child(3n + 3) { margin-top: var(--fh-space-12); }
}
/* An entry carrying only a date and a title has nothing to fill 300px with, so
   the card sizes to its content rather than holding an open well under the
   title. It returns to the tall card by itself the moment a description, a tag
   or a registration button comes back. */
.fh-event:not(:has(.fh-event__meta)):not(:has(.fh-tag)):not(:has(.fh-btn)) {
  min-height: 0;
}

.fh-event:nth-child(3n + 2) { background: var(--fh-white); color: var(--fh-ink); }
.fh-event:nth-child(3n + 3) { background: var(--fh-blue); color: var(--fh-ink); }

.fh-event__date {
  font-family: var(--fh-font-mega);
  font-weight: var(--fh-mega-weight);
  font-variation-settings: 'wdth' 78;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 0.84;
  letter-spacing: var(--fh-mega-track);
  word-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fh-blue);
}
.fh-event:nth-child(3n + 2) .fh-event__date { color: var(--fh-blue-deep); }
.fh-event:nth-child(3n + 3) .fh-event__date { color: var(--fh-ink); }

.fh-event__title { font-size: clamp(20px, 1.8vw, 25px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.fh-event__meta { font-size: var(--fh-size-small); line-height: 1.55; color: var(--fh-grey); margin-top: 10px; }
.fh-event:nth-child(3n + 2) .fh-event__meta,
.fh-event:nth-child(3n + 3) .fh-event__meta { color: var(--fh-ink-74); }

/* The parked secondary palette earns exactly one job on this page: telling
   four event categories apart. The mapping is fixed by
   design-direction-v1-2026-08-06.md line 54 and nothing else may reassign it:
   MUSTARD public, SPARK hackathon, TURQUOISE mentorship, SKY ship night. */
.fh-tag {
  align-self: flex-start;
  display: inline-block;
  padding: 8px 14px;
  background: var(--fh-tag, var(--fh-blue));
  color: var(--fh-ink);
  font-family: var(--fh-font-display);
  font-size: 10px;
  letter-spacing: var(--fh-track-display);
  text-transform: uppercase;
}
.fh-tag--ship-night { --fh-tag: var(--fh-sky); }
.fh-tag--mentorship { --fh-tag: var(--fh-turquoise); }
.fh-tag--public     { --fh-tag: var(--fh-mustard); }
.fh-tag--hackathon  { --fh-tag: var(--fh-spark); }

.fh-event .fh-btn { align-self: flex-start; }

.fh-empty { grid-column: 1 / -1; padding: var(--fh-space-6); background: var(--fh-night-2); color: var(--fh-grey); }

/* The toggle and the SKY rule that carries it off the right edge. */
#events-more {
  display: flex;
  align-items: center;
  gap: var(--fh-space-6);
  margin-top: var(--fh-space-8);
}
#events-more::after {
  content: '';
  flex: 1 1 auto;
  height: 4px;
  background: var(--fh-blue);
}
/* The rule runs off the right edge, but only where there is a margin outside
   the content column for it to run into. */
@media (min-width: 780px) {
  #events-more::after { margin-right: calc((100% - 100vw) / 2); }
}

/* ------------------------------------------------------------------
   Komanda. Four plates, one row, on the same shingle as the events above.
   The plate is the only ground here and it is NIGHT-2, so the band itself
   stays NIGHT and the 40 percent holds.

   No accent colour on this band. Mustard, spark and turquoise label event
   types one band up and reassigning them to people would empty both meanings,
   so the only colour is SKY: the role label and the hairline over the links.
------------------------------------------------------------------ */

/* The icon sprite. Defined once, referenced eight times, and never painted:
   [hidden] takes it out of flow and <use> still resolves against it. */
.fh-sprite { position: absolute; width: 0; height: 0; }

/* Four in a row as early as the row fits, which Rokas asked for on 2026-08-27.
   880px is where it starts: a column is then about 185px, which still holds the
   4:5 plate, the name on one or two lines and the link row once that row is
   allowed to wrap. Below it the pairing is the honest fallback, and one column
   on a phone. */
.fh-team { display: grid; gap: var(--fh-space-3); }
@media (min-width: 520px) { .fh-team { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (min-width: 880px) { .fh-team { grid-template-columns: repeat(4, 1fr); gap: var(--fh-space-4); } }

/* The shingle. Every second plate drops, which reads as one deliberate step at
   two columns and as an alternating row at four. Flat on a phone, where a
   single column of offset cards is just uneven spacing. */
@media (min-width: 520px) {
  .fh-person:nth-child(even) { margin-top: var(--fh-space-6); }
}
@media (min-width: 1100px) {
  .fh-person:nth-child(even) { margin-top: var(--fh-space-8); }
}

/* The hairline is what makes the plate a plate. NIGHT-2 on NIGHT is a two step
   difference and on a phone screen in daylight it is close to none, so the edge
   carries the shape rather than the fill. */
.fh-person {
  display: flex;
  flex-direction: column;
  background: var(--fh-night-2);
  border: 1px solid var(--fh-line);
}

/* 4:5, so the plate holds its shape before the headshot arrives and does not
   jump the whole row when it does. */
.fh-person__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fh-night);
}
.fh-person__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Square on a phone. Four 4:5 portraits at full column width add about
   1300px of scroll to a page whose next section is the one that converts. */
@media (max-width: 519px) {
  .fh-person__photo { aspect-ratio: 1 / 1; }
}

.fh-person__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--fh-space-3) var(--fh-space-2) var(--fh-space-2);
}

.fh-person__name {
  font-size: var(--fh-size-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fh-person__role {
  margin-top: 6px;
  color: var(--fh-blue);
}

/* The links sit on the bottom edge of the plate whatever the role line wraps
   to, so the row of buttons stays a row across all four plates. */
/* One line at every width, because four cards in a row means the narrowest card
   is about 136px of content and a wrapped button there makes each plate a
   different height for no reason. The two glyphs keep their square, the mail
   button takes whatever is left, and its label centres inside it. */
.fh-person__links {
  display: flex;
  align-items: center;
  gap: var(--fh-space-1);
  margin-top: var(--fh-space-3);
  padding-top: var(--fh-space-3);
  border-top: 1px solid var(--fh-blue-wash);
}
.fh-person__body > .fh-person__links { margin-top: auto; }

/* Square, same height as the small button beside it, and it inverts to SKY on
   hover exactly like the primary button does. */
.fh-social {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--fh-white);
  border: 1px solid var(--fh-line);
  transition: background var(--fh-motion-fast) var(--fh-ease),
              color var(--fh-motion-fast) var(--fh-ease),
              border-color var(--fh-motion-fast) var(--fh-ease);
}
.fh-social:hover {
  background: var(--fh-blue);
  border-color: var(--fh-blue);
  color: var(--fh-ink);
  text-decoration: none;
}
.fh-social__i { width: 17px; height: 17px; display: block; }

/* Its own width, pushed to the right edge of the row, and it never wraps. It may
   shrink, which is what keeps it on one line in the four column layout; growing
   it to fill instead turned a button into a 190px slab next to two 34px squares.
   min-width: 0 is what allows the shrink at all. */
.fh-person__mail {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  padding-inline: 14px;
  white-space: nowrap;
}

/* The tight half of the four column row. Between 880 and 1100 a card carries
   about 146px of content, and 34 + 34 + a 12px Audiowide label does not fit in
   it. Everything comes down one step rather than the button wrapping, because a
   wrapped button makes every plate a different height. */
@media (min-width: 880px) and (max-width: 1099px) {
  .fh-social { width: 32px; height: 32px; }
  .fh-social__i { width: 15px; height: 15px; }
  .fh-person__mail { font-size: 11px; padding-inline: 8px; }
}

/* ------------------------------------------------------------------
   Kaip patekti. The journey element kept and put on a slope: one drawn line
   of travel running off both edges with the start square on it, four tiles
   threaded onto it at four heights, one icon and one number per tile. This is
   the second and last rotation on the page.

   Below 900px the line stands up: the row becomes a column and the line runs
   down the left of the tiles, which is the same reading with no rotation.
------------------------------------------------------------------ */

.fh-journey__plane {
  left: 43%;
  right: 0;
  top: 0;
  bottom: 0;
  background: var(--fh-night-2);
  -webkit-clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  display: none;
}
@media (min-width: 900px) { .fh-journey__plane { display: block; } }

.fh-journey__art {
  right: -6%;
  bottom: 0;
  margin-bottom: -8.1%;
  width: min(520px, 32%);
  aspect-ratio: 520 / 292;
  display: none;
}
@media (min-width: 1100px) { .fh-journey__art { display: block; } }

/* --fh-journey-lead is the distance from the top of a node to the middle of
   its tile, so the line can be hung on the tile centres rather than on the
   top of the row. */
.fh-journey {
  position: relative;
  display: grid;
  gap: var(--fh-space-6);
  margin-top: var(--fh-space-8);
  --fh-tile: clamp(84px, 9.2vw, 132px);
  --fh-journey-lead: calc(25px + var(--fh-tile) / 2);
}

/* The line of travel. Upright and vertical on a phone, rotated on desktop
   where the four tiles are threaded onto it. */
.fh-journey::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--fh-blue);
  opacity: 0.6;
}
.fh-journey::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  background: var(--fh-spark);
}
.fh-journey__node { position: relative; padding-left: var(--fh-space-5); }

@media (min-width: 900px) {
  .fh-journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--fh-space-3);
    margin-top: var(--fh-space-12);
    padding-bottom: 4%;
  }
  /* Percentage padding on a grid item resolves against the column width, so
     the staircase and the line keep the same angle at every desktop width
     instead of drifting apart between breakpoints. */
  .fh-journey__node { padding-left: 0; padding-top: calc(var(--fh-i) * 20%); }
  .fh-journey__node:nth-child(1) { --fh-i: 3; }
  .fh-journey__node:nth-child(2) { --fh-i: 2; }
  .fh-journey__node:nth-child(3) { --fh-i: 1; }
  .fh-journey__node:nth-child(4) { --fh-i: 0; }

  /* The line hangs on the tile centres, not on the top of the row. A margin
     percentage resolves against the container WIDTH, which is the same thing
     the staircase is measured in, so the two cannot drift apart:
     the tile centres sit at a quarter of the row plus the half tile, taken
     along the tangent of the slope. */
  .fh-journey::before {
    left: -14%;
    right: -14%;
    width: auto;
    top: var(--fh-journey-lead);
    margin-top: calc(4.59% + 15.4px);
    bottom: auto;
    height: 3px;
    opacity: 1;
    transform: rotate(-10.4deg);
  }
  /* The square marks where the line starts, so it rides the same slope out to
     the left edge: half the row plus its own offset, at the line's tangent. */
  .fh-journey::after {
    left: -2%;
    top: var(--fh-journey-lead);
    margin-top: calc(14.14% + 6.4px);
    width: 18px;
    height: 18px;
  }
}

.fh-journey__n { display: block; color: var(--fh-blue); margin-bottom: var(--fh-space-1); }

.fh-journey__tile {
  --fh-icon-base: var(--fh-white);
  --fh-icon-accent: var(--fh-blue);
  width: var(--fh-tile);
  height: var(--fh-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fh-night-2);
  border: 1px solid var(--fh-blue);
  margin-bottom: var(--fh-space-3);
}
.fh-journey__tile svg { width: var(--fh-icon-w, 56%); height: var(--fh-icon-h, 60%); display: block; }

.fh-journey__node:nth-child(1) .fh-journey__tile { --fh-icon-w: 56%; --fh-icon-h: 61%; }
.fh-journey__node:nth-child(2) .fh-journey__tile {
  background: var(--fh-blue-deep); border-color: var(--fh-blue-deep);
  --fh-icon-w: 59%; --fh-icon-h: 61%;
}
.fh-journey__node:nth-child(3) .fh-journey__tile {
  background: var(--fh-blue); border-color: var(--fh-blue);
  --fh-icon-base: var(--fh-ink); --fh-icon-accent: var(--fh-blue-deep);
  /* The 001 glyph fills 706 by 246 of its 1000 box, so it needs the whole
     tile to carry the same optical weight as the other three. */
  --fh-icon-w: 100%; --fh-icon-h: 100%;
}
.fh-journey__node:nth-child(4) .fh-journey__tile {
  background: var(--fh-white); border-color: var(--fh-white);
  --fh-icon-base: var(--fh-blue-deep); --fh-icon-accent: var(--fh-ink);
  --fh-icon-w: 59%; --fh-icon-h: 56%;
}

.fh-journey__title {
  font-size: clamp(18px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  max-width: 22ch;
}

/* ------------------------------------------------------------------
   Aplikacija. The page's one full plane, and it is SKY, the brandbook's
   accent on dark. A white plate with a cut diagonal edge slides in from the
   right and off the frame, and the mark sits whole on the white, never half
   cropped.
------------------------------------------------------------------ */

.fh-apply {
  position: relative;
  overflow: hidden;
  background: var(--fh-blue);
  color: var(--fh-ink);
  padding-block: var(--fh-band-pad);
}

.fh-apply__plate {
  position: relative;
  z-index: 1;
  margin-top: var(--fh-space-8);
  background: var(--fh-white);
  padding: var(--fh-space-6);
  display: flex;
  justify-content: center;
}
.fh-apply__plate svg {
  --fh-icon-base: var(--fh-blue-deep);
  --fh-icon-accent: var(--fh-ink);
  width: min(320px, 76%);
  height: auto;
  display: block;
}
@media (min-width: 900px) {
  .fh-apply__plate {
    position: absolute;
    z-index: 0;
    margin: 0;
    top: -12%;
    bottom: -12%;
    left: 58%;
    right: 0;
    align-items: center;
    padding-left: 10%;
    -webkit-clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }
  .fh-apply__plate svg { width: min(400px, 62%); }
}

.fh-apply__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; }
.fh-apply__mark { display: block; width: 14px; height: 14px; background: var(--fh-mustard); margin-bottom: var(--fh-space-2); }
.fh-apply__title { margin-bottom: var(--fh-space-4); }
.fh-apply .fh-lead { max-width: 34ch; }
.fh-apply .fh-btn { margin-top: var(--fh-space-4); }

/* ------------------------------------------------------------------
   DUK. Two registers of different width at different starting heights, the
   right one printed on a lifted plane that runs off the right edge. The
   accent bars are the only colour marks.
------------------------------------------------------------------ */

.fh-duk__plane {
  left: 48%;
  right: 0;
  top: var(--fh-space-8);
  height: 72%;
  background: var(--fh-night-2);
  display: none;
}
@media (min-width: 900px) { .fh-duk__plane { display: block; } }

.fh-duk__art {
  right: -4%;
  bottom: 0;
  margin-bottom: -7.9%;
  width: min(380px, 24%);
  aspect-ratio: 380 / 418;
  display: none;
}
@media (min-width: 1100px) { .fh-duk__art { display: block; } }

.fh-duk__mark { display: block; width: 14px; height: 14px; background: var(--fh-mustard); margin-bottom: var(--fh-space-3); }

.fh-faq { display: grid; gap: var(--fh-space-6); margin-top: var(--fh-space-8); }
@media (min-width: 900px) {
  .fh-faq { grid-template-columns: 1fr 1.02fr; gap: var(--fh-space-12); align-items: start; }
  /* The right register starts higher than the left one, which is what makes
     the two read as two registers of a poster rather than one split list. */
  .fh-faq__col:nth-child(2) { margin-top: calc(-1 * var(--fh-space-12)); }
}

.fh-faq__col { display: flex; flex-direction: column; gap: var(--fh-space-5); }

/* The mark is drawn rather than laid out. It used to be a flex item, which
   made the details a row container, which put an open answer beside its
   question at half width instead of under it. Found 2026-08-21. */
.fh-faq details {
  position: relative;
  padding-left: calc(8px + var(--fh-space-3));
}
.fh-faq details::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--fh-mark, var(--fh-blue));
}
.fh-faq__col:nth-child(1) details:nth-child(1) { --fh-mark: var(--fh-mustard); }
.fh-faq__col:nth-child(1) details:nth-child(2) { --fh-mark: var(--fh-spark); }
.fh-faq__col:nth-child(1) details:nth-child(3) { --fh-mark: var(--fh-turquoise); }
.fh-faq__col:nth-child(2) details:nth-child(1) { --fh-mark: var(--fh-sky); }
.fh-faq__col:nth-child(2) details:nth-child(2) { --fh-mark: var(--fh-turquoise); }
.fh-faq__col:nth-child(2) details:nth-child(3) { --fh-mark: var(--fh-mustard); }

.fh-faq summary {
  position: relative;
  list-style: none;
  display: block;
  padding-right: 40px;
  font-size: var(--fh-size-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.fh-faq summary::-webkit-details-marker { display: none; }

/* Same two hairlines as the other rows, hung on the first line of the
   question so a two line question keeps its marker at the top. */
.fh-faq summary::before,
.fh-faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 0.65em;
  width: 16px;
  height: 1px;
  background: var(--fh-blue);
  transition: transform var(--fh-motion-fast) var(--fh-ease);
}
.fh-faq summary::after { transform: rotate(90deg); }
.fh-faq details[open] summary::after { transform: rotate(0deg); }
.fh-faq p { margin-top: var(--fh-space-2); font-size: var(--fh-size-body); line-height: 1.6; color: var(--fh-grey); max-width: 58ch; }

/* ------------------------------------------------------------------
   The events page. The same rows as the landing section, split into two
   lists. Past events are dimmed rather than dropped: a club with a record
   reads as a club that has been running.
------------------------------------------------------------------ */

.fh-back {
  display: inline-block;
  margin-bottom: var(--fh-space-4);
  font-family: var(--fh-font-display);
  font-size: var(--fh-size-micro);
  letter-spacing: var(--fh-track-display);
  text-transform: uppercase;
  color: var(--fh-blue);
}
.fh-back::before { content: '←'; margin-right: 10px; }

.fh-events__heading {
  margin-top: var(--fh-space-8);
  margin-bottom: var(--fh-space-3);
  color: var(--fh-blue);
}
#events-past { opacity: 0.66; }

/* The tear starts at 40 percent of the frame, so the page intro has to stop
   before it. Event rows may cross it because every row is a solid plate;
   loose copy may not, which is the rule the whole site is built on. */
#visi-renginiai .fh-intro { max-width: 32ch; }

/* ------------------------------------------------------------------
   Footer. The 001 glyph blown up and cropped by the right and bottom edges,
   so the page ends on the room number as artwork rather than a footnote.
------------------------------------------------------------------ */

.fh-footer {
  position: relative;
  overflow: hidden;
  background: var(--fh-night);
  padding-block: var(--fh-space-12) var(--fh-space-6);
  border-top: 1px solid var(--fh-line);
}
.fh-footer > .fh-wrap { position: relative; z-index: 2; }

.fh-footer__grid { display: grid; gap: var(--fh-space-8); }
@media (min-width: 760px) { .fh-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.fh-footer__lockup { height: 56px; width: auto; }
.fh-footer h3 { margin-bottom: var(--fh-space-3); color: var(--fh-blue); }
.fh-footer li + li { margin-top: 10px; }
.fh-footer li a { font-size: var(--fh-size-small); color: var(--fh-grey); }
.fh-footer li a:hover { color: var(--fh-white); }

/* Cropped hard by the right edge, which is the point, but at -8% the frame
   landed mid gap and left the upright of the 1 standing alone at the edge as a
   25px grey rectangle with nothing to read it as. -12% puts the whole numeral
   outside the frame, so what remains is the pair of slashed zeros running off
   the corner. The offset is a percentage, so the crop holds at every width. */
.fh-footer__mark {
  position: absolute;
  z-index: 0;
  right: -12%;
  bottom: -18%;
  width: min(820px, 54%);
  height: auto;
  opacity: 0.26;
  pointer-events: none;
}

/* The bottom line is the one piece of footer copy the blown up glyph runs
   under, so it gets its own solid ground and crops the artwork rather than
   sitting on it. Same rule as everywhere else on the page.

   That ground has to run the full width of the frame, and until 2026-08-27 it
   did not: it stopped at the edge of the content column, so it cut a hard
   rectangle out of the middle of the glyph with the rest of the artwork carrying
   on at full strength either side of it. It read as a stray box rather than as a
   crop. The ground and the rule now sit on a pseudo element that runs 100vw and
   down past the bottom of the footer, so the artwork is cropped by the frame the
   way every other band on this page crops its own.

   Absolute rather than in flow, because a ::before inside a flex container would
   otherwise become a third flex item and land between the two spans. */
.fh-footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fh-space-2) var(--fh-space-6);
  justify-content: space-between;
  margin-top: var(--fh-space-12);
  padding-top: var(--fh-space-4);
  font-size: var(--fh-size-micro);
  color: var(--fh-grey);
}
.fh-footer__bottom > * { position: relative; }
.fh-footer__bottom::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -100vh;
  left: calc((100% - 100vw) / 2);
  width: 100vw;
  background: var(--fh-night);
  border-top: 1px solid var(--fh-line);
}

/* ------------------------------------------------------------------
   Scroll reveal. Off unless the script marked the document, so a dead script
   can never hide the copy.
------------------------------------------------------------------ */

.js .fh-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--fh-ease), transform 0.6s var(--fh-ease);
}
.js .fh-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .fh-reveal { opacity: 1; transform: none; }
}

/* Preview-only bar raised by render.js while seeded placeholder data is loaded. */
.fh-devbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--fh-blue);
  color: var(--fh-ink);
  text-align: center;
  padding: 10px var(--fh-space-3);
  font-size: var(--fh-size-micro);
  font-weight: 700;
}

/* Slash width per face. Measured off the rendered glyph, not guessed: the
   slash wants to sit a hair wider than the zero so it reads as a slash rather
   than as a bar inside it. */
body { --fh-slash: 0.74em; }                    /* DM Sans, the body face */
.fh-label,
.fh-slide__ph,
.fh-tag,
.fh-lang a { --fh-slash: 1.06em; }              /* Audiowide, the label face */
.fh-mega,
.fh-statement,
.fh-kicker,
.fh-fold__title,
.fh-event__date { --fh-slash: 0.56em; }         /* Archivo at 78% width */