/* Made with love by Webtoget · https://webtoget.no */
/* ==== tokens.css ==== */
/* Hallmark · macrostructure: 19 Map / Diagram (the council's organisation drawn as a Vainakh tower on /organisasjon/: the members are the foundation, the annual meeting the top floor; the front page opens on the client's painting of a Vainakh valley under a slate overlay) · theme: custom light, brand-anchored — limestone paper oklch(96.6% .005 75) from the tower stone and snow of the client's painting / tower ink oklch(21.5% .016 255) from the seal's black, slate-tinted, also the overlay the hero copy sits in / seal red oklch(44% .135 24) as the one accent (the red stripe of the flag, the wax under a seal) · nav: N7 slab, civic knobs (seal + Literata wordmark, sentence-case links, a 2 px seal-red rule under the current page, «Søk medlemskap» as the one red button, a running-diamond ornament strip instead of the plain rule) · footer: Ft1 mast-headed on tower ink (the seal in paper, the three aims as the tagline, registered address + org.nr) · type: Literata / Host Grotesk · read: a national umbrella council's site for Chechens across Norway and the Norwegian bodies that need one serious counterpart, with a dignified, plain-spoken civic language, leaning toward quiet institutional editorial on the tower seal and the client's own painted Vainakh valley, seal red as the one accent · dials: V4 M2 D4 · critique: philosophy 4 · hierarchy 5 · execution 4 · specificity 5 · restraint 5 · variety 5 */
/* Made with love by Webtoget · https://webtoget.no */
/* ==========================================================================
   Tsjetsjensk råd i Norge — design tokens
   --------------------------------------------------------------------------
   Every colour, font, size, space, radius, easing and z-index used anywhere
   in the CSS is a token declared here. Components reference tokens by name
   only. Contrast is computed, not eyeballed (OKLCH → sRGB → WCAG):
     ink on paper 15.9 · ink-2 on paper 9.8 · muted on paper 6.5 / paper-2 5.9 / paper-3 5.3
     accent on paper 7.5 · accent-ink on accent 7.8 · focus on paper 5.7
     on-ink on ink-paper 15.5 · on-ink-2 on ink-paper 9.2 / ink-paper-2 8.0
   ========================================================================== */

:root {
  /* ---- colour · OKLCH only · paper = surfaces · ink = text · one accent ---- */
  --color-paper:        oklch(96.6% 0.005 75);   /* limestone: the tower stone and the snow     */
  --color-paper-2:      oklch(93.6% 0.007 75);   /* raised band                                 */
  --color-paper-3:      oklch(89.8% 0.009 75);   /* highest surface, media backings             */
  --color-ink:          oklch(21.5% 0.016 255);  /* tower ink: the seal's black, slate-tinted   */
  --color-ink-2:        oklch(36% 0.016 255);    /* secondary text                              */
  --color-muted:        oklch(46% 0.014 255);    /* captions, meta — ≥ 5.2:1 on every paper     */
  --color-rule:         oklch(85% 0.008 75);     /* hairlines                                   */
  --color-rule-2:       oklch(90.5% 0.006 75);   /* quieter hairlines                           */
  --color-rule-strong:  oklch(21.5% 0.016 255);  /* the tower's outline and heavy rules (= ink) */
  --color-accent:       oklch(44% 0.135 24);     /* seal red — buttons, the current page, marks */
  --color-accent-2:     oklch(37% 0.125 24);     /* accent hover / pressed                      */
  --color-accent-ink:   oklch(97.5% 0.006 75);   /* text on the accent fill                     */
  --color-accent-soft:  oklch(93.2% 0.022 24);   /* tint for quiet highlights, ::selection      */
  --color-focus:        oklch(49% 0.15 255);     /* focus ring — slate blue, 5.7:1 on paper     */
  --color-error:        oklch(53% 0.19 36);      /* vivid vermilion, never the seal red         */
  --color-success:      oklch(47% 0.11 150);

  /* inverted ground (footer, closing bands) — the night over the tower */
  --color-ink-paper:    oklch(21% 0.018 255);
  --color-ink-paper-2:  oklch(26% 0.02 255);
  --color-on-ink:       oklch(95.5% 0.006 75);
  --color-on-ink-2:     oklch(79% 0.012 75);
  --color-rule-on-ink:  oklch(36% 0.02 255);
  --color-on-ink-wash:  oklch(95.5% 0.006 75 / 0.1);  /* hover wash on dark surfaces */

  /* overlays · tinted to the ink, never pure black */
  --color-scrim:        oklch(21% 0.018 255 / 0.66);
  --color-backdrop:     oklch(15% 0.02 255 / 0.86);
  /* the hero overlay at ≥ 64rem: the tower ink laid over the left of the painting, a lighter veil from the top */
  --color-shade:        oklch(21% 0.018 255 / 0.84);
  --color-shade-2:      oklch(21% 0.018 255 / 0.5);
  --color-shade-3:      oklch(21% 0.018 255 / 0.32);
  --color-shade-0:      oklch(21% 0.018 255 / 0);
  --color-ornament:     oklch(36% 0.016 255 / 0.55);   /* the running-diamond strip */
  --color-ornament-on-ink: oklch(79% 0.012 75 / 0.45);  /* the same strip on the night ground */

  /* ---- type · display + body · self-hosted via fonts.css ---- */
  --font-display: "Literata", Georgia, "Times New Roman", serif;
  --font-body:    "Host Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Host Grotesk", "Segoe UI", system-ui, sans-serif;  /* no third family: labels are the body face in tabular caps */

  /* 1.25-ish scale from 17 px; fluid only where a heading must survive a phone */
  --text-xs:      0.8125rem;
  --text-sm:      0.9375rem;
  --text-base:    1.0625rem;
  --text-md:      1.25rem;
  --text-lg:      1.5rem;
  --text-xl:      1.875rem;
  --text-2xl:     2.375rem;
  --text-3xl:     3rem;
  --text-hero:    clamp(2.6rem, 1.35rem + 3.9vw, 4.6rem);   /* the name in the sky: two lines at desktop */
  --text-h1:      clamp(2.2rem, 1.45rem + 2.4vw, 3.4rem);
  --text-h2:      clamp(1.75rem, 1.3rem + 1.6vw, 2.55rem);
  --text-h3:      clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --text-lead:    clamp(1.125rem, 1.03rem + 0.35vw, 1.3rem);
  --text-display: clamp(2.75rem, 1.5rem + 5vw, 5.25rem);
  --text-soon:    clamp(2.4rem, 0.9rem + 3.4vw, 4.4rem);    /* the holding page (soon.css): the name on one line from tablets up */

  --leading-tight: 1.04;
  --leading-snug:  1.2;
  --leading-body:  1.62;
  --track-label:   0.1em;
  --track-display: -0.018em;
  --measure:       64ch;
  --measure-tight: 46ch;

  /* ---- space · 4pt scale, named by role ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;
  --section-y:        clamp(3.5rem, 2.25rem + 5.5vw, 7.5rem);
  --section-y-tight:  clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --page-gutter:      clamp(1.25rem, 4vw, 3rem);
  --page-max:         76rem;
  --nav-h:            4.5rem;      /* measured header height — anchors scroll below it */
  --seal-nav:         3rem;        /* the seal in the header */
  --seal-foot:        7.5rem;      /* the seal on the footer mast */
  --seal-soon:        clamp(6rem, 4.5rem + 3.75vw, 8.25rem);   /* the seal over the name on the holding page (owner: 50 % bigger, 2026-10-13) */
  --ornament-h:       0.5rem;      /* the running-diamond strip */
  --tower-step:       clamp(0.5rem, 0.1rem + 1.9vw, 1.875rem);   /* how much each floor of the diagram tapers */

  /* ---- surface · one radius system: sharp ---- */
  --rule-hair:   1px;
  --rule-heavy:  2px;
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   3px;
  --radius-pill: 999px;
  --shadow-lift:  0 1px 2px oklch(21% 0.018 255 / 0.06), 0 8px 24px oklch(21% 0.018 255 / 0.08);
  --shadow-panel: 0 16px 48px oklch(21% 0.018 255 / 0.18);
  /* one treatment across the illustration photographs, so mixed sources read as one set (never on the client's painting) */
  --photo-filter: saturate(0.8) contrast(1.03);

  /* the running-diamond ornament (a kilim border, hand-built): used as a mask, coloured by --color-ornament */
  --ornament-diamonds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M0 4 4 .6 8 4 12 .6 16 4M0 4 4 7.4 8 4 12 7.4 16 4' fill='none' stroke='black' stroke-width='1'/%3E%3Ccircle cx='4' cy='4' r='1.1'/%3E%3Ccircle cx='12' cy='4' r='1.1'/%3E%3C/svg%3E");

  /* ---- motion · transform + opacity only · the curves are Emil Kowalski's (emil-design-eng) ----
     entering / exiting (reveal, dialog, tooltip, dropdown) → --ease-out   (starts fast: feels responsive)
     moving / morphing while on screen (icon rotate, resize) → --ease-in-out
     hover and colour changes                                → --ease-hover (the browser `ease`)
     sheets and drawers (the mobile menu)                     → --ease-drawer (iOS curve)
     constant motion (spinner)                                → --ease-linear
     Never `ease-in` on UI: it delays the first frame, which is the one the user watches. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hover:  ease;
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-linear: linear;
  /* durations by role: press 100–160 · hover 150–250 · dialog/drawer 200–500 · the reveal may be longer.
     Nothing interactive above 300 ms. */
  --dur-micro:   120ms;   /* button press, focus, small state flips          */
  --dur-short:   200ms;   /* hover, colour, accordion marker                  */
  --dur-medium:  360ms;   /* dialogs, the menu sheet                          */
  --dur-long:    640ms;   /* the one scroll reveal (io-reveal) — never on hover */

  /* ---- z · named levels only ---- */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav:    200;
  --z-menu:   300;
  --z-modal:  400;
  --z-toast:  500;
  --z-skip:   600;
}


/* ==== fonts.css ==== */
/* ==========================================================================
   fonts.css — self-hosted webfonts (generated by _recipe/tools/fonts.mjs)
   Host Grotesk · Literata — SIL Open Font License.
   Served from /assets/fonts: no third-party request, works offline, GDPR-clean.
   ========================================================================== */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/host-grotesk-normal-400-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/host-grotesk-normal-400-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/literata-normal-400-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/literata-normal-400-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==== base.css ==== */
/* ==========================================================================
   base.css — reset, typography, layout primitives, focus, motion floor.
   Design-neutral: this file is the same on every Webtoget site. Tokens only.
   ========================================================================== */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

body {
  overflow-x: clip;
  min-height: 100dvh;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
picture { height: 100%; }   /* so an img with height: 100% + object-fit: cover fills a sized box even inside <picture> */
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }
main { display: block; }

::selection { background: var(--color-accent-soft); color: var(--color-ink); }

/* ---- focus · appears instantly, never animated in ---- */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---- typography ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-md); }
p, li, dd, td, th, figcaption, label { max-width: var(--measure); }
p + p { margin-top: var(--space-md); }
strong, b { font-weight: 600; }
small, .small { font-size: var(--text-sm); }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--color-ink-2); max-width: var(--measure-tight); text-wrap: pretty; }
.t-num { font-variant-numeric: tabular-nums lining-nums; }
.t-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--color-muted); }

/* long-form copy (personvern, artikler) */
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { margin-top: var(--space-2xl); font-size: var(--text-xl); }
.prose h3 { margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2xs); }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--color-accent-2); }
.prose table th, .prose table td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.prose blockquote { padding-left: var(--space-lg); border-left: 2px solid var(--color-accent); color: var(--color-ink-2); }

/* ---- layout primitives ---- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.wrap--narrow { max-width: 48rem; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--rule { border-top: var(--rule-hair) solid var(--color-rule); }
.is-raised { background: var(--color-paper-2); }
.is-dark { background: var(--color-ink-paper); color: var(--color-on-ink); }
.is-dark .lead, .is-dark .t-label { color: var(--color-on-ink-2); }
.grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stack > * + * { margin-top: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- skip link ---- */
.skip-link {
  position: absolute; inset-inline-start: var(--space-md); top: -100%;
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink); color: var(--color-paper);
  font-weight: 600; border-radius: var(--radius-sm);
}
.skip-link:focus-visible { top: var(--space-md); }

/* ---- reveals · one quiet rise per block, gated on .js so nothing is ever
        hidden without scripting; main.js adds a 3 s failsafe ---- */
.js .io-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .io-reveal.is-in { opacity: 1; transform: none; }
.js .io-reveal:nth-child(2) { transition-delay: 60ms; }
.js .io-reveal:nth-child(3) { transition-delay: 120ms; }
.js .io-reveal:nth-child(4) { transition-delay: 180ms; }

/* ---- signature motion · owner rule 2026-10-09 (as webtoget.no): [data-motion="signature"]
        plays under reduced motion at half speed (--motion-slow), pauses with its
        [data-motion-toggle] button (WCAG 2.2.2) and rests off screen (main.js) ---- */
:root { --motion-slow: 1; }
[data-motion="signature"].is-paused, [data-motion="signature"].is-paused *,
[data-motion="signature"].is-offscreen, [data-motion="signature"].is-offscreen * { animation-play-state: paused !important; }
[data-motion-toggle] .i-play, [data-motion-toggle][data-paused="true"] .i-pause { display: none; }
[data-motion-toggle][data-paused="true"] .i-play { display: inline-block; }

/* ---- reduced motion · everything but the signature collapses (reveals, transitions, smooth scroll) ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-slow: 2; }
  html { scroll-behavior: auto; }
  :not([data-motion="signature"], [data-motion="signature"] *),
  :not([data-motion="signature"], [data-motion="signature"] *)::before,
  :not([data-motion="signature"], [data-motion="signature"] *)::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .io-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- print ---- */
@media print {
  .nav, .menu, .actionbar, .skip-link, .consent, .footer__credit, .btn { display: none !important; }
  body { background: white; color: black; } /* print: real paper, real ink — the one place keywords are right */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* ==== soon.css ==== */
/* ==========================================================================
   soon.css — the «kommer snart» holding page (src/soon/, SITE.comingSoon).
   --------------------------------------------------------------------------
   Bundled INSTEAD of components.css + site.css while the full site is being
   written (tokens → fonts → base → soon), so the one page ships a fraction of
   the CSS. One screen: the client's painting, the sentence set as an
   invitation in Literata, one line on what the council is, the night footer.
   Phones and tablets: the painting as a band that settles into the night
   ground, the copy on the night below it. ≥ 64rem: the painting full-bleed
   under the full site's slate overlay, the copy on the shaded left, the
   towers in daylight on the right.
   Tokens only · transform + opacity motion only · the night ground is what
   contrast is measured against.
   ========================================================================== */

/* ---- page: the night ground, the footer at the foot of the screen ---- */
.is-soon { display: grid; grid-template-rows: 1fr auto; background: var(--color-ink-paper); color: var(--color-on-ink); }
.is-soon main { display: grid; }
.is-soon ::selection { background: var(--color-on-ink); color: var(--color-ink); }
.is-soon :focus-visible { outline-color: var(--color-on-ink); }
/* a wider column than the full site's 76rem, so on big screens the words stay left of the towers */
.is-soon .wrap { max-width: 96rem; }

/* the running-diamond ornament (as in site.css: a kilim border, a hand-built SVG used as a mask) */
.ornament {
  display: block; height: var(--ornament-h);
  background-color: var(--color-ornament-on-ink);
  -webkit-mask-image: var(--ornament-diamonds); mask-image: var(--ornament-diamonds);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
  -webkit-mask-position: left center; mask-position: left center;
}

/* ---- the painting ---- */
.hero--soon { position: relative; isolation: isolate; display: grid; align-content: start; }
.hero--soon .hero__bg { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-ink-paper-2); }
.hero--soon .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 50%; }
/* the band settles into the night ground instead of ending on an edge */
.hero--soon .hero__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--color-shade-0) 45%, var(--color-ink-paper) 100%); }
@media (min-width: 40rem) { .hero--soon .hero__bg { aspect-ratio: 16 / 9; } }

/* ---- the copy: seal, sentence, ornament, one line ---- */
.hero--soon .hero__copy { position: relative; margin-top: calc(-1 * var(--space-2xl)); padding-bottom: var(--space-2xl); }
.hero--soon .hero__copy > * + * { margin-top: var(--space-lg); }
.soon__seal-pic { height: auto; width: max-content; }   /* base.css gives every <picture> height: 100% (for cover images) */
.soon__seal { width: var(--seal-soon); height: var(--seal-soon); }

/* the sentence set as an invitation: «Her kommer» / the name / «sin hjemmeside». One h1, read as one sentence. */
.soon__title { font-size: var(--text-soon); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--track-display); color: var(--color-on-ink); }
.soon__title > span { display: block; }
.soon__pre, .soon__post { font-size: max(0.42em, var(--text-md)); font-weight: 400; letter-spacing: -0.005em; color: var(--color-on-ink-2); }
.soon__pre { margin-bottom: 0.3em; }
.soon__post { margin-top: 0.4em; }
.soon__title--sm { font-size: var(--text-h1); }
.soon__ornament { width: 7.5rem; }
.hero--soon .lead { max-width: 30rem; color: var(--color-on-ink-2); text-wrap: balance; }

/* one quiet entrance: the copy rises once into place (base.css collapses it under reduced motion) */
.hero--soon .hero__copy { transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
@starting-style { .hero--soon .hero__copy { opacity: 0; transform: translateY(12px); } }

/* the 404's way home */
.soon__link {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-lg);
  border: var(--rule-hair) solid var(--color-on-ink-2); border-radius: var(--radius-sm);
  color: var(--color-on-ink); font-weight: 600; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-hover), border-color var(--dur-short) var(--ease-hover), transform var(--dur-micro) var(--ease-out);
}
.soon__link:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .soon__link:hover { border-color: var(--color-on-ink); background: var(--color-on-ink-wash); } }

/* ---- ≥ 64rem: the painting full-bleed, the copy in the shade on the left ---- */
@media (min-width: 64rem) {
  .hero--soon { align-content: center; }
  .hero--soon .hero__bg { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
  .hero--soon .hero__bg img { object-position: 70% 50%; }
  /* the tower ink over the left where the words sit, thinned out before the towers; the foot settles into
     the footer's night, and a light veil from the top calms the bright sky */
  .hero--soon .hero__bg::after {
    background:
      linear-gradient(90deg, var(--color-shade) 0%, var(--color-shade) 34%, var(--color-shade-2) 56%, var(--color-shade-0) 74%),
      linear-gradient(0deg, var(--color-ink-paper) 0%, var(--color-shade-0) 18%),
      linear-gradient(180deg, var(--color-shade-3) 0%, var(--color-shade-0) 38%);
  }
  .hero--soon .hero__copy { margin-top: 0; padding-block: var(--space-2xl); }
  .hero--soon .hero__copy > * + * { margin-top: var(--space-xl); }
  .hero--soon .soon__title + .ornament { margin-top: var(--space-lg); }
}

/* ---- footer: the name and the org.nr under the running-diamond strip ---- */
.soon-foot { padding-bottom: env(safe-area-inset-bottom); font-size: var(--text-sm); color: var(--color-on-ink-2); }
.soon-foot__inner { padding-block: var(--space-md); }
.soon-foot p { max-width: none; }
/* phones: the org.nr on its own line instead of a «·» left hanging at the end of the first */
@media (max-width: 29.99rem) { .soon-foot__org { display: block; } .soon-foot__org > span { display: none; } }