/* v464 staging: "Journal" type layer = /v02/v02-type.css scoped under html.theme-journal (generated by build.js). */
/* futurehours.at /v02 preview: typography from the Figma frame "Final"
   (file FqJstAhvLBSlUBInR2N683, node 26:1350). Type only: family, size, weight,
   line height, tracking, case. Layout and colours stay as on the live site.
   The FUTURE:HOURS word mark (header h1 ticker) and the halftone canvases are untouched.
   Sizes: Figma px 1:1 at a 1440 px viewport, scaled down with vw below that. */

/* Courier Prime 400: same OFL file the site already hosts (fonts/OFL.txt). */
@font-face {
  font-family: "Courier Prime";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/courier-prime-400.woff2") format("woff2");
}

html.theme-journal {
  /* Families */
  --v02-serif: "Times New Roman", Times, serif;          /* system font, no file shipped */
  --v02-mono: "Courier Prime", "Courier New", Courier, monospace;
  --v02-sans: "ABC Areal", "Helvetica Neue", Arial, sans-serif;

  /* Scale (Figma px at 1440 viewport) */
  --v02-title: clamp(40px, 5.556vw, 80px);   /* Times 80 / 84  "Brutally good logic" */
  --v02-title-lh: 1.05;
  --v02-toc: clamp(28px, 2.778vw, 40px);     /* Times 40 / 42  TOC titles, credit names */
  --v02-toc-lh: 1.05;
  --v02-section: clamp(22px, 2.222vw, 32px); /* Areal 32 / 42 uppercase +0.02em */
  --v02-section-lh: 1.3125;
  --v02-head: clamp(18px, 1.806vw, 26px);    /* Areal 26 / 31.5 masthead */
  --v02-head-lh: 1.2115;
  --v02-body: clamp(20px, 1.736vw, 25px);    /* Times 25 / 31.5 body */
  --v02-body-lh: 1.26;
  --v02-mono-num: 18px;                      /* Courier 18  TOC numbers */
  --v02-mono-body: 15px;                     /* Courier 15 / 21 articles, footer boxes */
  --v02-mono-body-lh: 1.4;
  --v02-label: 11px;                         /* Courier 11 / 16 uppercase +0.05em heads, captions */
  --v02-label-lh: 1.4545;
}

/* Figma uses Regular (400) throughout; the live site forces 450 on everything. */
html.theme-journal body,
html.theme-journal body * { font-weight: 400 !important; }

/* ---- Hero ---------------------------------------------------------------- */
/* Claim ("Brands with brutally good logic") = Figma title, Times 80/84. */
html.theme-journal body.fh-section > header .lead {
  font-family: var(--v02-serif);
  font-size: var(--v02-title);
  line-height: var(--v02-title-lh);
  letter-spacing: 0;
}
/* Offer + "Anfrage starten" + "Made by Humans" = Figma masthead right, Areal 26/31.5. */
html.theme-journal body.fh-section > main .band .col p,
html.theme-journal body.fh-section > main .info-line {
  font-family: var(--v02-sans);
  font-size: var(--v02-head);
  line-height: var(--v02-head-lh) !important;
  letter-spacing: 0;
}
html.theme-journal body.fh-section > main .info-open,
html.theme-journal body.fh-section > main [data-i18n="heroStart"] { font-size: inherit; line-height: inherit; }

/* ---- Nav pills (topics bar + Info) = Figma masthead left: Areal 26/31.5, uppercase, +0.02em */
html.theme-journal body.fh-section #made-panel .flow-choices > .chip,
html.theme-journal body.fh-section .directory-pill,
html.theme-journal body.fh-section .directory-pill:hover,
html.theme-journal body.fh-section .directory-pill[aria-pressed="true"],
html.theme-journal body.fh-section > .modal-actions.is-aligned-with-nav .directory-pill,
html.theme-journal body.fh-section .modal-actions.is-over-panel .directory-pill,
html.theme-journal.fh-mbar-on body.fh-section :is(.fh-topics-toggle, .fh-topic),
html.theme-journal.fh-mbar-on body.fh-section .fh-chapters :is(.fh-topics-toggle, #directory-open) {
  font-family: var(--v02-sans);
  font-size: var(--v02-head) !important;
  line-height: var(--v02-head-lh) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---- Body: thread text = Figma body, Times 25/31.5 ------------------------ */
html.theme-journal body.fh-section .made-panel .flow-thread .bubble {
  font-family: var(--v02-serif);
  font-size: var(--v02-body) !important;
  line-height: var(--v02-body-lh) !important;
  letter-spacing: 0;
}
/* Small action pills (+ Namche, Case Study, Credits, Projekt anfragen, Nach oben, directory bar)
   = Figma footer boxes, Courier 15/21. */
html.theme-journal body.fh-section .flow-mini,
html.theme-journal body.fh-section .band-mail,
html.theme-journal body.fh-section .to-top,
html.theme-journal body.fh-section .directory-bar .chip,
html.theme-journal body.fh-section .foot-drops .drop-pills .chip,
html.theme-journal body.fh-section .theme-options .chip {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body) !important;
  line-height: var(--v02-mono-body-lh) !important;
  letter-spacing: 0;
}
/* Credits under the videos = Figma credits, Courier 11/16. */
html.theme-journal body.fh-section .flow-detail,
html.theme-journal body.fh-section .flow-credit {
  font-family: var(--v02-mono);
  font-size: var(--v02-label) !important;
  line-height: var(--v02-label-lh);
  letter-spacing: 0;
  opacity: 1;
}

/* ---- Section labels = Figma "A NEW WAY OF WORKING": Areal 32/42 uppercase +0.02em */
html.theme-journal body.fh-section .foot-drops-label,
html.theme-journal body.fh-section .flow-index-label {
  font-family: var(--v02-sans);
  font-size: var(--v02-section);
  line-height: var(--v02-section-lh);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---- List rows (projects; service index) = Figma TOC titles, Times 40/42 */
html.theme-journal body.fh-section .foot-drops .drop-btn,
html.theme-journal body.fh-section .flow-index-btn {
  font-family: var(--v02-serif);
  font-size: var(--v02-toc) !important;
  line-height: var(--v02-toc-lh) !important;
  letter-spacing: 0;
}
/* Row numbers = Figma TOC numbers, Courier 18. */
html.theme-journal body.fh-section .flow-index-no {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-num);
}
/* Opened project text = Figma article text, Courier 15/21; specs + credit = Courier 11/16. */
html.theme-journal body.fh-section .foot-drops .drop-body {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body) !important;
  line-height: var(--v02-mono-body-lh) !important;
  letter-spacing: 0;
}
html.theme-journal body.fh-section .foot-drops .drop-body .project-specs,
html.theme-journal body.fh-section .foot-drops .drop-body .credit-line {
  font-size: var(--v02-label) !important;
  line-height: var(--v02-label-lh) !important;
}
html.theme-journal body.fh-section .foot-drops .drop-body .project-specs { letter-spacing: 0.05em; text-transform: uppercase; }

/* ---- Footer ---------------------------------------------------------------- */
/* Large band line = Figma credit names, Times 40/42. */
html.theme-journal body.fh-section .word-band .band-line {
  font-family: var(--v02-serif);
  font-size: var(--v02-toc);
  line-height: var(--v02-toc-lh);
  letter-spacing: 0;
}
/* Address, mail, phone, legal = Figma footer box, Courier 15/21. */
html.theme-journal body.fh-section .word-band .sheet-foot-meta,
html.theme-journal body.fh-section .word-band .sheet-foot-meta a {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body);
  line-height: var(--v02-mono-body-lh);
  letter-spacing: 0;
}

/* ---- Info panel (directory) ------------------------------------------------ */
html.theme-journal body.fh-section #contact .start-how {
  font-family: var(--v02-serif);
  font-size: var(--v02-body);
  line-height: var(--v02-body-lh);
}
html.theme-journal body.fh-section .profile-name {
  font-family: var(--v02-serif);
  font-size: var(--v02-toc);
  line-height: var(--v02-toc-lh);
}
html.theme-journal body.fh-section .profile-bio {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body);
  line-height: var(--v02-mono-body-lh);
}
html.theme-journal body.fh-section .network-list li {
  font-family: var(--v02-serif);
  font-size: var(--v02-body);
  line-height: var(--v02-body-lh);
}
/* Meta labels + status line = Figma article heads, Courier 11/16 uppercase +0.05em. */
html.theme-journal body.fh-section .profile-role,
html.theme-journal body.fh-section .network-label,
html.theme-journal body.fh-section .theme-switch-label,
html.theme-journal body.fh-section .made-status,
html.theme-journal body.fh-section .made-status .partner-name,
html.theme-journal body.fh-section .lang-switch-btn {
  font-family: var(--v02-mono);
  font-size: var(--v02-label) !important;
  line-height: var(--v02-label-lh);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- News block (v457) = Figma Poolbar block: label Courier 11/16 uppercase, text Times 20/25 */
html.theme-journal body.fh-section .fh-news .fh-news-meta {
  font-family: var(--v02-mono);
  font-size: var(--v02-label) !important;
  line-height: var(--v02-label-lh) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.theme-journal body.fh-section .fh-news .fh-news-text {
  font-family: var(--v02-serif);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}
/* Showreel play button = Courier 15 like the other small actions. */
html.theme-journal body.fh-section .fh-reel-play { font-family: var(--v02-mono); font-size: var(--v02-mono-body); }

/* ---- Info contact blocks: one rule for both (Figma credits block "DESIGNED BY / MICHAEL MARTE"):
   label (Courier 11/16 uppercase +0.05em) → name (Times, Info-name size) → mail (Courier 15/21).
   index.html puts label before name in both blocks: Michael = role, Journal = "Journal" / Olya Berg. */
html.theme-journal body.fh-section .directory .profile { display: flex; flex-direction: column; align-items: flex-start; }
html.theme-journal body.fh-section .directory .profile .profile-role {
  order: 1;
  margin: 0 0 4px;
  font-family: var(--v02-mono);
  font-size: var(--v02-label) !important;
  line-height: var(--v02-label-lh) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.theme-journal body.fh-section .directory .profile .profile-name {
  order: 2;
  margin: 0;
  font-family: var(--v02-serif);
  font-size: var(--v02-toc) !important;
  line-height: var(--v02-toc-lh) !important;
  letter-spacing: 0;
  text-transform: none;
}
html.theme-journal body.fh-section .directory .profile .profile-bio {
  order: 3;
  margin: 0;
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body) !important;
  line-height: var(--v02-mono-body-lh) !important;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Hero info block room (v02 type is larger than live) ----
   Offer column spans 4 of 12 columns instead of 3 (less wrapping of "Brand Systems und Art Direction"),
   and the hero keeps 24 px below the block so the peeking section (bobs up 8 px) never cuts into it. */
@media (min-width: 40.01rem) {
  html.theme-journal body.fh-section > main .band .col { grid-column: 1 / 5; }
}
html.theme-journal body.fh-section > main { padding-bottom: calc(var(--space-8) + var(--space-16)) !important; }

/* ---- v460 Info panel: contact blocks follow DOM order (label, name, role, contact). Label Courier 11/16
   uppercase, name Times, role and contact Courier 15/21. Studio line and legal links Courier 15/21. */
html.theme-journal body.fh-section .directory .fh-contact .profile > * { order: 0 !important; }
html.theme-journal body.fh-section .directory .fh-contact .profile .profile-sub {
  margin: 2px 0 0;
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body) !important;
  line-height: var(--v02-mono-body-lh) !important;
  letter-spacing: 0;
  text-transform: none;
}
html.theme-journal body.fh-section .directory .fh-info-studio,
html.theme-journal body.fh-section .directory .fh-info-legal a {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body);
  line-height: var(--v02-mono-body-lh);
}
html.theme-journal body.fh-section .directory .fh-info-legal-label {
  font-family: var(--v02-mono);
  font-size: var(--v02-label) !important;
  line-height: var(--v02-label-lh);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
html.theme-journal body.fh-section .directory a.chip.fh-info-cta {
  font-family: var(--v02-mono);
  font-size: var(--v02-mono-body) !important;
  line-height: var(--v02-mono-body-lh) !important;
}

/* The FUTURE:HOURS ticker stays at 500 in Journal too. */
html.theme-journal body.fh-section header h1,
html.theme-journal body.fh-section header h1 * { font-weight: 500 !important; font-variation-settings: "wght" 500 !important; }