/*
 * Vilaino v2 — Sampo Field Atlas
 * Global Tilda layer · 2026-10-04
 * Applied through Project Settings > Custom CSS.
 * The rules deliberately avoid map internals and preserve inline content data.
 */

:root {
  --vil-paper: #f3eee3;
  --vil-paper-light: #fbf8f1;
  --vil-night: #122a2b;
  --vil-ink: #253432;
  --vil-muted: #5d6965;
  --vil-atlantic: #0b6b78;
  --vil-atlantic-deep: #064c56;
  --vil-focus-inverse: #fbf8f1;
  --vil-brass: #d6a12e;
  --vil-brass-ink: #76520a;
  --vil-clay: #a5523f;
  --vil-lichen: #b8c0a9;
  --vil-mist: #dce7e3;
  --vil-stone: #cec8ba;
  --vil-line: rgba(18, 42, 43, .18);
  --vil-radius-action: 2px;
  --vil-radius-surface: 4px;
  --vil-radius-map: 22px;
}

html { scroll-behavior: smooth; }

body,
.t-body {
  background: var(--vil-paper);
  color: var(--vil-ink);
  font-family: TildaSans, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::selection { background: var(--vil-brass); color: var(--vil-night); }

h1, h2, h3,
.t-title,
.t-title_xl,
.t-title_xxs,
.t-name,
.t-card__title,
.t-feed__post-popup__title-wrapper {
  color: var(--vil-night);
  font-family: Literata, Georgia, serif !important;
  font-optical-sizing: auto;
  font-weight: 500 !important;
  letter-spacing: -.025em;
  text-wrap: balance;
}

p,
.t-text,
.t-descr,
.t-card__descr { color: var(--vil-ink); }

.t-descr,
.t-text { text-wrap: pretty; }

a { text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--vil-atlantic-deep); }

:is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--vil-atlantic-deep) !important;
  outline-offset: 3px !important;
}

/* The dark colophon and explicitly marked night surfaces need an inverse ring.
   Atlantic Deep passes on paper, but not against Night. */
.t-footer :is(a, button, input, textarea, select, summary):focus-visible,
.vil-on-night :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--vil-paper-light) !important;
}

:is(
  .v2-sampo-stage,
  .v2-route,
  .v2-memory,
  .v2-finale,
  .vs-note,
  .t-footer,
  .t-rec[style*="background-color:#122a2b"],
  .t-rec[style*="background-color: #122a2b"],
  .t-rec[style*="background-color:#172323"],
  .t-rec[style*="background-color: #172323"],
  .t-rec[style*="background-color:#0b6b78"],
  .t-rec[style*="background-color: #0b6b78"],
  .t-rec[style*="background-color:#a5523f"],
  .t-rec[style*="background-color: #a5523f"]
) :is(a, button, input, textarea, select, summary):focus-visible {
  outline-color: var(--vil-focus-inverse) !important;
}

/* Route-like navigation: thin, quiet and editorial rather than app-like. */
.t-menu__link-item,
.t451__link-item,
.t280__menu__item,
.t-menusub__link-item {
  color: var(--vil-night) !important;
  font-family: TildaSans, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

.t-menu__link-item::after,
.t451__link-item::after {
  background-color: var(--vil-brass) !important;
  height: 2px !important;
}

/* Keep the visible 22 x 14 burger glyph, but give its button a WCAG-sized
   target on all three production pages. */
.t-menu-burger.t-menuburger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

/* Buttons become sturdy field labels: low radius, no generic pill silhouette. */
.t-btn,
.t-submit,
a.t-btn,
button.t-btn {
  border-radius: var(--vil-radius-action) !important;
  font-family: TildaSans, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  min-height: 52px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important;
}

.t-btn:hover,
.t-submit:hover {
  transform: translateY(-2px);
  box-shadow: none !important;
}

.t-btn[style*="background-color:#0b6b78"],
.t-btn[style*="background-color: #0b6b78"],
.t-submit {
  background-color: var(--vil-atlantic) !important;
  border-color: var(--vil-atlantic) !important;
}

.t-btn[style*="background-color:#0b6b78"]:hover,
.t-btn[style*="background-color: #0b6b78"]:hover,
.t-submit:hover {
  background-color: var(--vil-atlantic-deep) !important;
  border-color: var(--vil-atlantic-deep) !important;
}

/* Editorial section rhythm. Inline record padding remains the source of truth. */
.t-rec { position: relative; }
.t-rec[style*="background-color:#f6f2e9"],
.t-rec[style*="background-color: #f6f2e9"] { background-color: var(--vil-paper) !important; }

.t-rec[style*="background-color:#ddebec"],
.t-rec[style*="background-color: #ddebec"] { background-color: var(--vil-mist) !important; }

.t-rec[style*="background-color:#172323"],
.t-rec[style*="background-color: #172323"] { background-color: var(--vil-night) !important; }

/* Headings receive the open Sampo-fragment gesture instead of a decorative icon. */
.t017 .t-section__topwrapper,
.t795 .t-section__topwrapper,
.t1123 .t-section__topwrapper,
.t1331 .t-section__topwrapper {
  position: relative;
}

.t017 .t-section__topwrapper::before,
.t795 .t-section__topwrapper::before,
.t1123 .t-section__topwrapper::before {
  content: "";
  display: block;
  width: 46px;
  height: 12px;
  margin: 0 0 18px;
  border-top: 2px solid var(--vil-brass);
  border-left: 2px solid var(--vil-brass);
  transform: skewX(-22deg);
  transform-origin: left bottom;
}

/* Documentary photographs: restrained geometry, never floating generic cards. */
.t-bgimg,
.t-img,
.t107__width,
.t795__img,
.t1241__img,
.t977__img {
  border-radius: var(--vil-radius-surface) !important;
}

.t1241__img,
.t795__img {
  box-shadow: none !important;
}

.t1241__wrapper {
  background: var(--vil-paper) !important;
}

/* Core editorial heroes carry one restrained open Sampo corner. */
#rec3965265601 .t1241__content-wrapper,
#rec3810837401 .t1241__content-wrapper,
#rec3999003301 .t1241__content-wrapper {
  position: relative;
}

#rec3965265601 .t1241__content-wrapper::before,
#rec3810837401 .t1241__content-wrapper::before,
#rec3999003301 .t1241__content-wrapper::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: clamp(30px, 5vw, 68px);
  left: clamp(22px, 5vw, 68px);
  width: 46px;
  height: 16px;
  border-top: 3px solid var(--vil-brass);
  border-left: 3px solid var(--vil-atlantic);
  pointer-events: none;
  transform: skewX(-18deg);
  transform-origin: left bottom;
}

/* Facts and lists read as evidence, with rules instead of white tiles. */
.t1034__wrapper,
.t-list__item,
.t-card__col {
  border-color: var(--vil-line) !important;
}

.t1034__content {
  background: transparent !important;
  border-top: 1px solid var(--vil-line);
  border-bottom: 1px solid var(--vil-line);
}

.t1034__textwrapper { border-right-color: var(--vil-line) !important; }

/* Native-page signatures. These selectors are intentionally record-scoped so
   the system gains a recognisable rhythm without rewriting verified content. */

/* Field facts: the actual native CL19N DOM on Home, Palmela and Sergey. */
:is(
  #rec3965278801,
  #rec3819088801,
  #rec3894331101
) .t1034__container {
  border-top: 1px solid var(--vil-stone);
  border-bottom: 1px solid var(--vil-stone);
}

:is(
  #rec3965278801,
  #rec3819088801,
  #rec3894331101
) .t1034__title {
  color: var(--vil-night) !important;
  font-family: Literata, Georgia, serif !important;
  font-optical-sizing: auto;
  font-weight: 500 !important;
}

:is(
  #rec3965278801,
  #rec3819088801,
  #rec3894331101
) .t1034__divider {
  background-color: var(--vil-stone) !important;
  opacity: 1 !important;
}

:is(
  #rec3965278801,
  #rec3819088801,
  #rec3894331101
) .t1034__text {
  color: var(--vil-muted) !important;
  font-family: TildaSans, Arial, sans-serif !important;
}

/* Native Palmela chapters keep their verified text and gain one open fragment. */
:is(
  #rec3965279001,
  #rec3831289801,
  #rec3838420501,
  #rec3839654901,
  #rec3854085101,
  #rec3855746501,
  #rec3857854701,
  #rec3858846301,
  #rec3858892701,
  #rec3858910101,
  #rec3858942101,
  #rec3858943101,
  #rec3858944601,
  #rec3964677801
) :is(.t795__title, .t795__descr) {
  max-width: 720px;
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

:is(
  #rec3965279001,
  #rec3831289801,
  #rec3838420501,
  #rec3839654901,
  #rec3854085101,
  #rec3855746501,
  #rec3857854701,
  #rec3858846301,
  #rec3858892701,
  #rec3858910101,
  #rec3858942101,
  #rec3858943101,
  #rec3858944601,
  #rec3964677801
) .t795__title::before {
  display: block;
  width: 46px;
  height: 14px;
  margin-bottom: 18px;
  border-top: 3px solid var(--vil-brass);
  border-left: 3px solid var(--vil-atlantic);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg);
  transform-origin: left bottom;
}

/* TL03 section and route chapters on Home and Sergey. */
:is(
  #rec3965316801,
  #rec3894320801,
  #rec3894371601,
  #rec4080036601,
  #rec4080258001,
  #rec4080385601,
  #rec4080529001,
  #rec4080660601,
  #rec4080783501,
  #rec3894488301,
  #rec3894500701,
  #rec3894514601
) :is(.t017__uptitle, .t017__title, .t017__descr) {
  max-width: 720px;
  text-align: left !important;
}

:is(
  #rec3965316801,
  #rec3894320801,
  #rec3894371601,
  #rec4080036601,
  #rec4080258001,
  #rec4080385601,
  #rec4080529001,
  #rec4080660601,
  #rec4080783501,
  #rec3894488301,
  #rec3894500701,
  #rec3894514601
) .t017__uptitle::before {
  display: block;
  width: 46px;
  height: 14px;
  margin-bottom: 18px;
  border-top: 3px solid var(--vil-brass);
  border-left: 3px solid var(--vil-atlantic);
  content: "";
  pointer-events: none;
  transform: skewX(-18deg);
  transform-origin: left bottom;
}

/* The Vilho + Aino story is the one true Memory note on the main page. */
#rec3965345301 { background-color: var(--vil-clay) !important; }

#rec3965345301 :is(.t1123__title, .t1123__descr) {
  color: var(--vil-paper-light) !important;
}

#rec3965345301 .t1123__lineTop .t-divider {
  background-color: var(--vil-brass) !important;
}

/* Compact Sergey introductions become factual rails before each map. */
:is(
  #rec3894429701,
  #rec3894452401,
  #rec3894463601,
  #rec3894469901,
  #rec3894475401,
  #rec3998533401
) .t004 .t-text {
  box-sizing: border-box;
  padding-left: 24px;
  border-left: 2px solid var(--vil-atlantic);
}

/* Booking guidance and partnership disclosure stay visible as a field note. */
#rec3894516201 .t119__preface {
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 40px);
  border-left: 3px solid var(--vil-brass);
  color: var(--vil-ink) !important;
  background: var(--vil-mist);
}

/* Forms and practical controls. */
.t-input,
.t-input-block textarea,
.t-select,
.t-form .t-input,
.t-form .t-select,
.t-form .t-checkbox__indicator {
  background-color: var(--vil-paper-light) !important;
  border-color: var(--vil-stone) !important;
  border-radius: var(--vil-radius-surface) !important;
  color: var(--vil-night) !important;
}

.t-input:focus,
.t-select:focus,
.t-input-block textarea:focus {
  border-color: var(--vil-atlantic) !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 120, .12) !important;
}

.t-checkbox__indicator { background-color: var(--vil-paper-light) !important; }
.t-checkbox:checked + .t-checkbox__indicator,
.t-checkbox:checked ~ .t-checkbox__indicator,
.t-checkbox__input:checked + .t-checkbox__indicator,
.t-checkbox__input:checked ~ .t-checkbox__indicator {
  background-color: var(--vil-atlantic) !important;
  border-color: var(--vil-atlantic) !important;
}
.t-checkbox:checked + .t-checkbox__indicator::after,
.t-checkbox:checked ~ .t-checkbox__indicator::after,
.t-checkbox__input:checked + .t-checkbox__indicator::after,
.t-checkbox__input:checked ~ .t-checkbox__indicator::after {
  border-color: var(--vil-paper-light) !important;
}
.t-checkbox__indicator.t-checkbox__indicator_without-border { border: 1px solid var(--vil-stone) !important; }

/* The native input remains visually compact; the full consent label is the
   interactive target and must not fall below 44 px on mobile. */
:is(#rec3887394301, #rec3894546201) .t-checkbox__control {
  box-sizing: border-box;
  min-height: 44px;
}

/* Global footer becomes a dark colophon. */
.t-footer .t-rec,
.t-footer[style],
.t977,
.t345 {
  --vil-ink: #f3eee3;
}

.t-footer a,
.t-footer .t-text,
.t-footer .t-descr,
.t-footer .t-title { color: var(--vil-paper) !important; }

/* Map internals deliberately remain untouched. Their Lora + Tilda Sans
   typography, radii and controls are governed by the map standard. */

/* Optional classes for new/retrofitted Zero Blocks. */
.vil-field-rail {
  border-left: 1px solid var(--vil-brass);
  color: var(--vil-muted);
  font: 600 11px/1.35 TildaSans, Arial, sans-serif;
  letter-spacing: .14em;
  padding-left: 12px;
  text-transform: uppercase;
}

.vil-evidence-strip {
  border-top: 1px solid var(--vil-line);
  border-bottom: 1px solid var(--vil-line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vil-evidence-strip > * { padding: 16px 18px; border-right: 1px solid var(--vil-line); }
.vil-evidence-strip > *:last-child { border-right: 0; }

.vil-memory-note {
  background: var(--vil-mist);
  border-left: 3px solid var(--vil-brass);
  padding: clamp(22px, 4vw, 42px);
}

@media (max-width: 980px) {
  .t-title { letter-spacing: -.02em; }
  .vil-evidence-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vil-evidence-strip > *:nth-child(2) { border-right: 0; }
  .vil-evidence-strip > *:nth-child(-n+2) { border-bottom: 1px solid var(--vil-line); }
}

@media (max-width: 640px) {
  .t-rec_pt_135 { padding-top: 84px !important; }
  .t-rec_pb_90 { padding-bottom: 68px !important; }
  .t-btn, .t-submit, a.t-btn, button.t-btn { width: 100%; min-height: 52px; }
  .vil-evidence-strip { grid-template-columns: 1fr; }
  .vil-evidence-strip > * { border-right: 0; border-bottom: 1px solid var(--vil-line); padding-left: 0; }
  .vil-evidence-strip > *:last-child { border-bottom: 0; }
  #rec3965265601 .t1241__content-wrapper::before,
  #rec3810837401 .t1241__content-wrapper::before,
  #rec3999003301 .t1241__content-wrapper::before {
    top: 22px;
    left: 20px;
    width: 34px;
    height: 12px;
  }
  :is(
    #rec3965279001,
    #rec3831289801,
    #rec3838420501,
    #rec3839654901,
    #rec3854085101,
    #rec3855746501,
    #rec3857854701,
    #rec3858846301,
    #rec3858892701,
    #rec3858910101,
    #rec3858942101,
    #rec3858943101,
    #rec3858944601,
    #rec3964677801
  ) .t795__title::before,
  :is(
    #rec3965316801,
    #rec3894320801,
    #rec3894371601,
    #rec4080036601,
    #rec4080258001,
    #rec4080385601,
    #rec4080529001,
    #rec4080660601,
    #rec4080783501,
    #rec3894488301,
    #rec3894500701,
    #rec3894514601
  ) .t017__uptitle::before {
    width: 34px;
    height: 12px;
    margin-bottom: 14px;
  }
  :is(
    #rec3894429701,
    #rec3894452401,
    #rec3894463601,
    #rec3894469901,
    #rec3894475401,
    #rec3998533401
  ) .t004 .t-text { padding-left: 18px; }
}

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