/* ==========================================================================
   DESIGN "Žurnál" (editorial) — professional review

   Serif for the voice of the house (headings, masthead, names), Inter for
   everything read at length. Georgia is used as a system face, never shipped
   as a webfont — it is licensed with the operating system, not with us.
   Fallbacks cover Linux (Liberation Serif) and older Windows.

   Two grounds, and every colour is checked on the one it sits on.
   On the warm white: ink 15.9:1, muted 6.3:1, accent 9.9:1.
   On the deep blue of the hero (#003f7d): hero-ink 10.3:1, hero-muted 5.5:1,
   hero-rule 4.1:1, filled button 10.3:1, its hover 6.4:1, ghost hover 7.1:1,
   focus ring 3.7:1. The cyan claim is 3.6:1 — it is part of the logotype,
   the same exemption the production site records for it, and it is the
   manual's own pairing of cyan on deep blue.
   ========================================================================== */

:root {
  --paper: #fbfaf7;
  --paper-tint: #f3f1ea;
  --ink: #16181a;
  --ink-muted: #5b6066;
  --rule: #ddd8cd;
  --rule-strong: #b4ac9c;
  --accent: #00427f;      /* the manual's navy, one notch deeper for text */
  --deep: #003f7d;        /* the manual's Deep Blue, the hero ground */
  --accent-soft: #7ba7d4;
  --cyan: #00a3e0;

  --serif: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --sans: 'Inter Variable', Inter, Helvetica, Arial, sans-serif;

  --measure: 42rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.3;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
strong { color: var(--ink); font-weight: 600; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* A section focused by an anchor jump (script.js) is a landing point, not
   a control — a ring around the whole section would only be noise. */
[tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* The logo draws in currentColor (see App\Support\Logo): navy on paper
   here, white on the hero below. Only the cyan bar is fixed. */
.logo { display: block; color: var(--deep); }

/* --------------------------------------------------------------------------
   BAR — a running head, not a hero header
   -------------------------------------------------------------------------- */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  /* Opaque, not translucent: the bar floats over the deep-blue hero, and at
     92% paper the blue bled through as a cold grey. Nothing behind it needs
     a blur — every section under it is flat colour. */
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 78rem;
  margin-inline: auto;
  height: 4.25rem;
  padding-inline: var(--gutter);
}
.bar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.bar-logo { width: auto; height: 1.9rem; flex: none; }

.bar-nav { display: none; gap: 2rem; }
@media (min-width: 900px) { .bar-nav { display: flex; } }
.bar-link {
  position: relative;
  padding: 0.25rem 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.bar-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.bar-link:hover { color: var(--ink); }
.bar-link.is-active { color: var(--ink); }
.bar-link.is-active::after, .bar-link:hover::after { transform: scaleX(1); }

.bar-side { display: flex; align-items: center; gap: 1rem; }
.bar-toggle {
  display: flex;
  align-items: center;
  padding: 0.4rem;
  margin-right: -0.4rem;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.bar-icon { width: 1.5rem; height: 1.5rem; }
@media (min-width: 900px) { .bar-toggle { display: none; } }

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  gap: 1rem;
  background: var(--paper);
  text-align: center;
}
.menu[hidden] { display: none; }
/* The overlay covers the bar, so its own close button stands in for the
   toggle — same height and gutter, so the icon does not shift when it opens. */
.menu-close {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 4.25rem;
  padding-inline: var(--gutter);
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.menu-link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.75rem;
  text-decoration: none;
}

.lang {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}
.lang a { color: var(--ink-muted); text-decoration: none; }
.lang a:hover { color: var(--accent); }
.lang-current { color: var(--ink); font-weight: 700; }
.lang-sep { color: var(--rule-strong); }

/* --------------------------------------------------------------------------
   MASTHEAD
   -------------------------------------------------------------------------- */

/* The hero is the one dark field in the design: the manual's Deep Blue, edge
   to edge. Its three colours are hero-local names, not overrides of --ink and
   --rule — the rest of the page keeps reading against the paper, and the
   print block at the end flips the whole section by resetting just these. */
.masthead {
  --hero-ink: var(--paper);
  --hero-muted: #a8c0d8;
  --hero-rule: color-mix(in srgb, var(--paper) 55%, transparent);

  background: var(--deep);
  color: var(--hero-muted);
  padding-block: 10rem clamp(4rem, 9vw, 7rem);
  text-align: center;
}
.masthead-inner {
  max-width: 60rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.masthead-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hero-muted);
}
.masthead-rule {
  height: 3px;
  margin-top: 1.25rem;
  border-top: 1px solid var(--hero-ink);
  border-bottom: 1px solid var(--hero-ink);
}
.masthead-rule-thin {
  height: 0;
  margin-top: 0;
  border-bottom: 0;
  border-top: 1px solid var(--hero-rule);
}

/* The logotype block, held between the two rules. */
.masthead-block { padding-block: 2.5rem; }

.masthead-wordmark { line-height: 1; }
.masthead-logo {
  width: clamp(11rem, 34vw, 21rem);
  height: auto;
  margin: 0 auto;
  color: var(--hero-ink);
}
.masthead-claim {
  margin-top: 1.25rem;
  color: var(--cyan);
  font-family: var(--sans);
  /* Sized to run about as wide as the wordmark above it, as in the manual. */
  font-size: clamp(0.6rem, 1.8vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.58em;
  text-indent: 0.58em;
  white-space: nowrap;
}
.masthead-lead {
  margin-top: 2.5rem;
  color: var(--hero-ink);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
}
.masthead-fields {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.75rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 2rem;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.btn-solid { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }
.btn-quiet { color: var(--accent); border: 1px solid var(--rule-strong); }
.btn-quiet:hover { border-color: var(--accent); background: var(--paper-tint); }

/* On the deep ground the polarity flips: the filled button is the light one,
   so its label is the dark one. Hover moves the fill to the manual's cyan —
   away from the label, never toward it, which is the trap the production
   site's notes record for exactly this pair. */
.masthead .btn-solid {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--deep);
}
.masthead .btn-solid:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink);
}
.masthead .btn-quiet {
  color: var(--hero-ink);
  border-color: var(--hero-rule);
}
.masthead .btn-quiet:hover {
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border-color: var(--hero-ink);
  color: var(--hero-ink);
}

/* The default ring is the navy accent, which on the navy hero is invisible.
   Cyan is the one manual colour that carries on both grounds. */
.masthead :focus-visible { outline-color: var(--cyan); }

/* --------------------------------------------------------------------------
   SECTION — label in the margin, text on its measure
   -------------------------------------------------------------------------- */

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--rule);
}

.wrap {
  display: grid;
  gap: 1.5rem 3rem;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 1000px) {
  .wrap { grid-template-columns: 8rem minmax(0, 1fr); }
}

.margin-note {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-top: 0.5rem;
}
@media (min-width: 1000px) {
  .margin-note {
    position: sticky;
    top: 6.5rem;
    align-self: start;
    flex-direction: column;
    gap: 0.35rem;
    text-align: right;
  }
}
.margin-no {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--rule-strong);
  line-height: 1;
}
.margin-label {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.column { max-width: 52rem; }

.section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  max-width: var(--measure);
}

.dropcap {
  margin-top: 2rem;
  max-width: var(--measure);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  line-height: 1.6;
}
.dropcap::first-letter {
  float: left;
  margin: 0.3rem 0.6rem 0 0;
  color: var(--accent);
  font-size: 3.6em;
  line-height: 0.78;
  font-weight: 700;
}

.prose { margin-top: 1.5rem; max-width: var(--measure); }

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
/* The separator lives inside the item, so a wrapped line never starts
   with a stray dot. */
.inline-list li:not(:last-child)::after {
  content: '·';
  margin-left: 0.75rem;
  color: var(--accent-soft);
}

.rubric {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 3.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
}
.rubric-icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }

/* Notes — columns of text separated by hairlines, never boxes */
.columns { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 700px) {
  .columns-2 { grid-template-columns: repeat(2, 1fr); }
  .columns-3 { grid-template-columns: repeat(3, 1fr); }
  .columns > * + * {
    padding-left: 2rem;
    border-left: 1px solid var(--rule);
    margin-left: -1rem;
  }
}
.note-icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.note-title { margin-top: 0.9rem; font-size: 1.15rem; font-weight: 400; }
.note-title-lg { font-size: 1.35rem; }
.note-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.note p { margin-top: 0.6rem; font-size: 0.95rem; }

.passage { margin-top: 3rem; max-width: var(--measure); }
.passage-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.4rem;
  font-weight: 400;
}
.passage-icon { width: 1.4rem; height: 1.4rem; flex: none; color: var(--accent); }
.passage-sub { margin-top: 0.5rem; font-style: italic; font-family: var(--serif); }

.dashes { margin-top: 1.25rem; display: grid; gap: 0.9rem; }
.dashes li { display: flex; gap: 0.75rem; font-size: 0.95rem; }
.dashes li::before {
  content: '—';
  color: var(--accent-soft);
  flex: none;
}

/* Numbered service entries — the closest thing to a table of contents */
.entries { margin-top: 2rem; display: grid; gap: 0; }
.entry {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
}
.entry-no {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--rule-strong);
}

/* --------------------------------------------------------------------------
   PEOPLE
   -------------------------------------------------------------------------- */

.people { margin-top: 1.5rem; }
.person {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.person-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  background: var(--paper-tint);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
}

.person-name { font-size: 1.15rem; font-weight: 400; line-height: 1.45; }
.person-bio { margin-top: 0.5rem; font-size: 0.95rem; }
.person-meta,
.person-verify-number {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
/* A member can be in two registers. Stacking is the wrapper's job, so the
   link itself keeps the inline-flex it needs to sit its icon next to its
   label — and a card with one link looks exactly as it did before. */
.person-verify-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.person-verify-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--accent);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-soft);
}
.person-verify-link:hover { text-decoration-color: var(--accent); }
.person-verify-icon { width: 0.8rem; height: 0.8rem; }

/* --------------------------------------------------------------------------
   CONTACTS
   -------------------------------------------------------------------------- */

.contact { margin: 1.25rem 0 0; display: grid; gap: 0.4rem; }
.contact dd { margin: 0; }
.contact a {
  color: var(--accent);
  font-size: 1.05rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent-soft);
}
.contact a:hover { text-decoration-color: var(--accent); }

.address { font-style: normal; margin-top: 0.75rem; font-size: 0.95rem; }

.vcard {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.vcard:hover { color: var(--accent); border-bottom-color: var(--accent); }
.vcard-icon { width: 0.85rem; height: 0.85rem; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.foot {
  max-width: 72rem;
  margin-inline: auto;
  padding: 3rem var(--gutter) 3rem;
}
.foot-rule {
  height: 3px;
  margin-bottom: 3rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.foot-inner { display: grid; gap: 2.5rem; }
@media (min-width: 800px) { .foot-inner { grid-template-columns: 1.4fr 1fr 1.4fr; } }

.foot-logo { width: auto; height: 2.25rem; }
.foot-claim {
  margin-top: 1rem;
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
}
.foot-note { margin-top: 1rem; font-size: 0.9rem; }
.foot-title {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.foot-list { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.foot-list a { text-decoration: none; }
.foot-list a:hover { color: var(--accent); }
.foot-fine { margin-top: 0.75rem; font-size: 0.82rem; line-height: 1.6; }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   ERROR PAGE — resources/views/errors/404.blade.php

   Layout only — spacing, sizes, centring. Not a single colour, so it cannot
   contradict the palette it lands in. It lives here rather than in a <style>
   in the page because the Content-Security-Policy allows no inline style.
   -------------------------------------------------------------------------- */

.nf { min-height: 100svh; display: grid; place-items: center; padding: 3rem 1.5rem; }
.nf-inner { max-width: 34rem; text-align: center; }
.nf-brand { display: inline-block; }
.nf-logo { width: 8.5rem; height: auto; }
.nf-code { margin-top: 3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.nf-title { margin-top: 1rem; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.nf-text { margin-top: 1.25rem; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.nf-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; margin-top: 3rem; padding: 0; list-style: none; font-size: 0.9rem; }
.nf-nav a { text-decoration: underline; text-underline-offset: 3px; }
.nf-fine { margin-top: 3rem; font-size: 0.8rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   MOTION
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar-link::after { transition: none; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */

@media print {
  .bar, .menu, .masthead-actions, .lang { display: none !important; }
  /* Six of the nine hero elements take their colour from these three tokens,
     so resetting them is the whole job — a printed page of deep blue is a
     page of toner. */
  .masthead {
    --hero-ink: #000;
    --hero-muted: #000;
    --hero-rule: #000;
    background: none;
    padding-top: 2rem;
  }
  .masthead-claim { color: #000; }
  .logo { color: #000; }
  .logo-accent { fill: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .person { break-inside: avoid; }
  .person-verify-link::after {
    content: ' (' attr(href) ')';
    font-size: 0.7rem;
  }
  body { background: #fff; color: #000; }
}