/* perioraldermatitis.dk. Tokens first; everything below references them. See DESIGN.md. */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/serif-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: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/serif-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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/serif-italic-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: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/serif-italic-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: 'Libre Franklin'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/assets/fonts/franklin-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: 'Libre Franklin'; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/assets/fonts/franklin-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; }

:root {
  /* colour: cold white paper, graphite ink, one deep blue */
  --paper: #f5f7f9;
  --paper-2: #e8edf2;
  --field: #dae3ed;
  --ink: #14181c;
  --ink-soft: #3b4550;
  --blue: #1b3f75;
  --blue-press: #142f58;
  --blue-pale: #b9c8db;
  --graphite: #1d2228;
  --on-graphite: #eef1f4;
  --on-graphite-soft: #c3cbd4;
  --link-on-graphite: #bcd0ea;

  /* type */
  --sans: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --step-small: 0.9375rem;                              /* 15 */
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17-19 */
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* 20-24 */
  --step-head: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);   /* 28-44 */
  --step-display: clamp(2.75rem, 1.2rem + 6.6vw, 7rem); /* 44-112, home only */
  --step-title: clamp(2rem, 1.1rem + 3.9vw, 4.5rem);   /* 32-72, subpage titles */

  /* space */
  --gutter: clamp(16px, 8vw - 8px, 64px);
  --max: 1360px;
  --section: clamp(72px, 9vw, 168px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: var(--step-body); line-height: 1.58; font-optical-sizing: auto; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--blue-press); text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--blue); color: #fff; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--step-title); line-height: 1; letter-spacing: -0.035em; margin: 0; }
.hero h1 { font-size: var(--step-display); }
h2 { font-size: var(--step-head); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 0.6em; }
h3 { font-size: var(--step-body); line-height: 1.3; letter-spacing: -0.005em; margin: 1.6em 0 0.35em; }
p { margin: 0 0 1em; }
.small { font-size: var(--step-small); }
.dim { color: var(--ink-soft); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -60px; background: var(--blue); color: #fff; padding: 10px 16px; z-index: 50; }
.skip:focus { top: 12px; }

/* ---------- bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--paper); }
.bar-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.mark { font-family: var(--sans); font-weight: 800; font-size: var(--step-body); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-right: auto; }
.mark:hover { color: var(--blue); }
.bar-nav { display: flex; gap: 22px; font-family: var(--sans); font-size: var(--step-small); font-weight: 500; }
.bar-nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; }
.menu { position: relative; font-family: var(--sans); }
.menu summary { list-style: none; cursor: pointer; background: var(--blue); color: #fff; font-weight: 600; font-size: var(--step-small); padding: 10px 18px; border-radius: 999px; transition: background .2s var(--ease), transform .15s var(--ease); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--blue-press); }
.menu summary:active { transform: scale(.97); }
.menu[open] summary { background: var(--ink); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(420px, calc(100vw - 2 * var(--gutter))); background: var(--paper); padding: 10px 0; box-shadow: 0 18px 50px rgba(20, 24, 28, .22); border-radius: 18px; } /* taste-skill-ignore: the open menu is a real overlay */
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a { display: block; padding: 10px 22px; color: var(--ink); text-decoration: none; font-size: var(--step-small); font-weight: 500; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--paper-2); color: var(--blue); }
.menu-panel a[aria-current] { color: var(--blue); font-weight: 700; }
@media (max-width: 860px) { .bar-nav { display: none; } }

/* ---------- the ring ---------- */
.head-ring, .foot-ring, .hero-ring, .ring-inline { fill: var(--blue); }

/* ---------- subpage head ---------- */
.head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 32px; align-items: center; padding-top: clamp(40px, 7vw, 112px); padding-bottom: clamp(48px, 6vw, 96px); overflow: visible; }
.head-text { max-width: 54rem; }
.head .lead { margin-top: 28px; }
.lead { font-size: var(--step-lead); line-height: 1.42; color: var(--ink); max-width: 40rem; }
.meta { font-family: var(--sans); font-size: var(--step-small); color: var(--ink-soft); margin: 18px 0 0; max-width: 40rem; }
.head-ring { width: 100%; height: auto; transform: translateX(14%); }
@media (max-width: 860px) {
  .head { grid-template-columns: 1fr; }
  .head-ring { order: -1; width: 62%; margin-left: auto; transform: translateX(24%); margin-bottom: -8px; }
}

/* ---------- reading grid ---------- */
.read { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: clamp(40px, 6vw, 112px); align-items: start; padding-bottom: var(--section); }
.side { grid-column: 2; grid-row: 1; position: sticky; top: 96px; background: var(--paper-2); padding: 26px 26px 22px; border-radius: 20px; font-family: var(--sans); font-size: var(--step-small); }
.side-title { font-weight: 700; margin: 0 0 10px; color: var(--ink); }
.toc { list-style: none; margin: 0 0 24px; padding: 0; }
.toc li { margin: 0 0 4px; }
.toc a { display: block; padding: 4px 0; color: var(--ink); text-decoration: none; line-height: 1.35; }
.toc a:hover, .toc a.on { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; }
.body { grid-column: 1; grid-row: 1; max-width: 42rem; min-width: 0; }
.body > section { margin-bottom: clamp(88px, 8vw, 128px); }
.body > section:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
  .read { grid-template-columns: minmax(0, 1fr); }
  .side { grid-column: 1; grid-row: auto; position: static; margin-bottom: 48px; }
  .body { grid-row: auto; }
}

/* lists with the ring as bullet */
.body ul:not(.evkey):not(.srclist):not(.plain), ul.rings { list-style: none; padding: 0; margin: 0 0 1.2em; }
.body ul:not(.evkey):not(.srclist):not(.plain) > li, ul.rings > li { position: relative; padding-left: 1.7em; margin-bottom: 0.55em; }
.body ul:not(.evkey):not(.srclist):not(.plain) > li::before, ul.rings > li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 1.05em; height: 0.66em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath fill='%231b3f75' fill-rule='evenodd' d='M0 10a16 10 0 1 0 32 0a16 10 0 1 0 -32 0zM7 10a9 4.6 0 1 0 18 0a9 4.6 0 1 0 -18 0z'/%3E%3C/svg%3E") no-repeat center / contain; }
.body ol { padding-left: 1.4em; }
.body ol > li { margin-bottom: 0.55em; padding-left: 0.2em; }
.body ol > li::marker { font-family: var(--sans); font-weight: 700; color: var(--blue); }

/* evidence mark */
.ev { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: var(--step-small); font-weight: 600; color: var(--ink-soft); text-decoration: none; white-space: nowrap; vertical-align: 0.05em; padding: 1px 0; }
.ev svg { width: 3.6em; height: auto; flex: none; }
.ev .on { fill: var(--blue); }
.ev .off { fill: var(--blue-pale); }
.ev:hover { color: var(--blue); text-decoration: none; }
.evkey { list-style: none; margin: 0; padding: 0; }
.evkey li { margin: 0 0 12px; line-height: 1.35; color: var(--ink-soft); }
.evkey--compact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.evkey--compact li { margin: 0; }
.side-more { margin: 12px 0 0; }
.evkey li .ev { display: flex; font-size: var(--step-small); color: var(--ink); margin-bottom: 2px; }
.src { font-family: var(--sans); font-size: var(--step-small); font-weight: 600; }

/* boxes: a step in tone, never a line */
.box { background: var(--paper-2); border-radius: 20px; padding: clamp(22px, 3vw, 34px); margin: 1.6em 0; }
.box > :last-child { margin-bottom: 0; }
.box h3 { margin-top: 0; }
.box--blue { background: var(--blue); color: #fff; }
.box--blue h2, .box--blue h3, .box--blue a { color: #fff; }
.box--blue .ev, .box--blue .src { color: #fff; }
.box--blue .ev .off { fill: rgba(255,255,255,.35); }
.box--blue .ev .on { fill: #fff; }
.box--field { background: var(--field); }
.unknown { background: var(--field); border-radius: 20px; padding: clamp(22px, 3vw, 34px); margin: 1.6em 0; }
.unknown h3 { margin-top: 0; }
.unknown > :last-child { margin-bottom: 0; }

/* two opinions side by side (disagreements) */
.disagree { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 1.2em 0 1.6em; }
.disagree > div { background: var(--paper-2); border-radius: 18px; padding: 20px 22px; }
.disagree > div > :last-child { margin-bottom: 0; }
.disagree b { font-family: var(--sans); display: block; margin-bottom: 4px; }
@media (max-width: 640px) { .disagree { grid-template-columns: 1fr; } }

/* tables: real tables may have lines */
.tablewrap { overflow-x: auto; margin: 1.4em 0 1.8em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; line-height: 1.5; }
caption { text-align: left; font-family: var(--sans); font-weight: 700; padding-bottom: 10px; }
th, td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 2px solid var(--paper-2); }
th { font-family: var(--sans); font-size: var(--step-small); font-weight: 700; }
thead th { border-bottom-color: var(--ink); }
@media (max-width: 640px) {
  .tablewrap { overflow: visible; }
  table, tbody, tr, th, td, caption { display: block; width: 100%; }
  thead { display: none; }
  tr { padding: 14px 0; border-bottom: 2px solid var(--paper-2); }
  th, td { border: 0; padding: 2px 0; }
  tbody th { font-size: var(--step-body); }
}


/* buttons: one shape, the ring's long ends */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--blue); color: #fff; font-family: var(--sans); font-weight: 600; font-size: var(--step-small); padding: 14px 26px; border-radius: 999px; text-decoration: none; transition: background .2s var(--ease), transform .15s var(--ease); }
.btn:hover { background: var(--blue-press); color: #fff; text-decoration: none; }
.btn:active { transform: scale(.97); }
.more { font-family: var(--sans); font-weight: 600; }

/* sources used on the page */
.used { background: var(--paper-2); padding: clamp(48px, 6vw, 88px) 0; }
.used h2 { font-size: var(--step-lead); }
.srclist { list-style: none; padding: 0; margin: 0 0 1.2em; columns: 2 26rem; column-gap: 56px; }
.srclist li { break-inside: avoid; margin: 0 0 14px; font-size: var(--step-small); line-height: 1.45; max-width: 40rem; }
.srclist li a { font-weight: 600; }
.srclist .small { display: block; color: var(--ink-soft); }

/* ---------- home ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 120px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.hero h1 { line-height: 0.92; letter-spacing: -0.045em; }
.hero .lead { margin-top: 36px; font-size: var(--step-lead); }
.hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
.hero-figure { position: relative; margin: 0; transform: translateX(16%); }
.hero-ring { width: 100%; height: auto; }
.hero-figure figcaption { font-family: var(--sans); font-size: var(--step-small); color: var(--ink-soft); max-width: 22rem; margin-top: 16px; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; width: 78%; margin-left: auto; transform: translateX(20%); }
  .hero-figure figcaption { display: none; }
}

/* find vej: stacked folders */
.ways { padding: var(--section) 0 0; }
.ways-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 40px; }
.ways-head h2 { margin: 0; }
.ways-head p { margin: 0; color: var(--ink); max-width: 34rem; }
@media (max-width: 860px) { .ways-head { grid-template-columns: 1fr; } }
.stack { list-style: none; margin: 0; padding: 0; }
.stack li { position: relative; margin-top: -26px; }
.stack li:first-child { margin-top: 0; }
.stack a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 30px var(--gutter) 52px; border-radius: 34px 34px 0 0; text-decoration: none; color: var(--ink); background: var(--c, var(--paper-2)); transition: transform .3s var(--ease), background .2s; }
.stack a:hover, .stack a:focus-visible { transform: translateY(-10px); }
.stack .q { font-family: var(--sans); font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.12; }
.stack .a { font-size: var(--step-body); line-height: 1.45; }
.stack .go { font-family: var(--sans); font-weight: 600; font-size: var(--step-small); white-space: nowrap; }
.stack li:nth-child(4n+1) a { --c: var(--paper-2); }
.stack li:nth-child(4n+2) a { --c: var(--field); }
.stack li:nth-child(4n+3) a { --c: var(--blue); color: #fff; }
.stack li:nth-child(4n+4) a { --c: var(--graphite); color: var(--on-graphite); }
.stack li:last-child a { padding-bottom: 72px; }
@media (max-width: 760px) {
  .stack li { margin-top: -22px; }
  .stack a { grid-template-columns: 1fr; gap: 8px; padding: 24px var(--gutter) 44px; border-radius: 26px 26px 0 0; }
  .stack .go { display: none; }
}

/* short answers, after the stack */
.answers { background: var(--graphite); color: var(--on-graphite); padding: var(--section) 0; }
.answers h2 { color: var(--on-graphite); }
.answers a { color: var(--link-on-graphite); }
.answers .ev { color: var(--on-graphite-soft); }
.answers .ev .on { fill: var(--link-on-graphite); }
.answers .ev .off { fill: #46505c; }
.answers-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 112px); }
.answers dl { margin: 0; }
.answers dt { font-family: var(--sans); font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.015em; margin: 0 0 8px; }
.answers dd { margin: 0 0 40px; color: var(--on-graphite); }
.answers dd:last-child { margin-bottom: 0; }
.answers .intro p { color: var(--on-graphite-soft); }
@media (max-width: 860px) { .answers-grid { grid-template-columns: 1fr; } }

.sender { padding: var(--section) 0; }
.sender-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.sender-grid .box { margin: 0; }
@media (max-width: 860px) { .sender-grid { grid-template-columns: 1fr; } }

/* live thing: product count on /hverdag/ */
.counter { background: var(--paper-2); border-radius: 24px; padding: clamp(22px, 3vw, 36px); margin: 1.6em 0; }
.counter fieldset { border: 0; padding: 0; margin: 0; }
.counter legend { font-family: var(--sans); font-weight: 700; font-size: var(--step-lead); margin-bottom: 14px; padding: 0; }
.counter .items { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.counter .items li { padding: 0; margin: 0; }
.counter .items li::before { content: none; }
.counter label { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; background: var(--paper); border-radius: 16px; padding: 14px 16px; cursor: pointer; transition: background .2s var(--ease); }
.counter label:hover { background: #fff; }
.counter input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--blue); grid-row: span 2; }
.counter .name { font-family: var(--sans); font-weight: 700; }
.counter .say { font-size: var(--step-small); color: var(--ink-soft); line-height: 1.45; }
.counter .tally { margin-top: 48px; background: var(--blue); color: #fff; border-radius: 20px; padding: 22px 24px; }
.counter .tally p { margin: 0; }
.counter .tally .n { font-family: var(--sans); font-weight: 700; font-size: var(--step-head); letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; display: block; }
.counter .tally a { color: #fff; }
.counter .tally .ev, .counter .tally .src { color: #fff; }
.counter .tally .ev .on { fill: #fff; } .counter .tally .ev .off { fill: rgba(255,255,255,.35); }

.stars { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.stars svg { width: 9.5rem; height: auto; flex: none; }
.stars-off { fill: #a3b6cf; } /* pale full stars behind, so the unfilled part of the fifth star shows */
.stars-on { fill: var(--blue); }
.stars-n { margin: 0; font-family: var(--sans); font-weight: 700; font-size: var(--step-lead); letter-spacing: -0.015em; }
.product { margin: 1.4em 0 1.6em; }
.product img { width: min(21rem, 70%); height: auto; }

/* checklist (til lægen) */
.check { list-style: none; padding: 0; margin: 0 0 1.4em; }
.check li { display: grid; grid-template-columns: 1.5em 1fr; gap: 10px; margin-bottom: 12px; }
.check li::before { content: ''; width: 1.15em; height: 1.15em; margin-top: 0.22em; border-radius: 5px; background: var(--blue-pale); }
.write { display: block; height: 3.2em; background: var(--paper-2); border-radius: 12px; margin: 6px 0 18px; }
@media print {
  .bar, .side, .foot, .used, .head-ring, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .read { display: block; padding: 0; }
  .head { display: block; padding: 0 0 12pt; }
  h1 { font-size: 24pt; }
  .write { background: #eee; border-radius: 0; }
  .check li::before { background: #ddd; }
}

/* drawing of skin tones */
.tones { margin: 1.6em 0; }
.tones svg { width: 100%; height: auto; }
.tones figcaption { font-size: var(--step-small); color: var(--ink-soft); margin-top: 10px; max-width: 36rem; }

/* ---------- footer ---------- */
.foot { position: relative; overflow: hidden; background: var(--graphite); color: var(--on-graphite); padding: clamp(72px, 9vw, 150px) 0 40px; }
.foot a { color: var(--link-on-graphite); }
.foot a:hover { color: #fff; }
.foot-ring { position: absolute; width: min(70vw, 980px); right: -22vw; top: -18%; fill: var(--blue); opacity: 1; }
.foot-in { position: relative; }
.foot-mark { margin: 0 0 18px; font-family: var(--sans); font-weight: 800; font-size: var(--step-head); letter-spacing: -0.045em; line-height: 0.95; }
.foot-mark a { color: var(--on-graphite); text-decoration: none; }
.foot-claim { max-width: 38rem; font-size: var(--step-lead); line-height: 1.4; color: var(--on-graphite); margin-bottom: clamp(48px, 6vw, 88px); }
.foot-cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 40px 56px; font-size: var(--step-small); line-height: 1.5; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; columns: 1; }
.foot-cols li { margin-bottom: 6px; }
.foot-cols p { color: var(--on-graphite-soft); }
.foot-h { font-family: var(--sans); font-weight: 700; color: var(--on-graphite) !important; margin-bottom: 8px; }
.foot-note { color: var(--on-graphite-soft); }
.foot-legal { margin: clamp(48px, 6vw, 80px) 0 0; font-family: var(--sans); font-size: var(--step-small); color: var(--on-graphite-soft); }
@media (max-width: 860px) { .foot-cols { grid-template-columns: 1fr; } .foot-ring { width: 120vw; right: -60vw; top: -6%; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
  .js .rise.in { opacity: 1; transform: none; }
  .js .head-ring, .js .hero-ring { transform-origin: 70% 50%; animation: ring-in 1.1s var(--ease) both; }
  .js .foot-ring { animation: drift 22s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: no-preference) {
  .head-text > *, .hero-grid > div > * { animation: rise-in .8s var(--ease) both; }
  .head-text > :nth-child(2), .hero-grid > div > :nth-child(2) { animation-delay: 80ms; }
  .head-text > :nth-child(3), .hero-grid > div > :nth-child(3) { animation-delay: 160ms; }
  .head-text > :nth-child(4), .hero-grid > div > :nth-child(4) { animation-delay: 240ms; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }
.lost { padding-bottom: var(--section); }
.lost h2 { margin-top: 24px; }
@keyframes ring-in { from { opacity: 0; transform: translateX(30%) scale(.92); } }
@media (max-width: 860px) { @media (prefers-reduced-motion: no-preference) {
  .head-text > *, .hero-grid > div > * { animation: rise-in .8s var(--ease) both; }
  .head-text > :nth-child(2), .hero-grid > div > :nth-child(2) { animation-delay: 80ms; }
  .head-text > :nth-child(3), .hero-grid > div > :nth-child(3) { animation-delay: 160ms; }
  .head-text > :nth-child(4), .hero-grid > div > :nth-child(4) { animation-delay: 240ms; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }
.lost { padding-bottom: var(--section); }
.lost h2 { margin-top: 24px; }
@keyframes ring-in { from { opacity: 0; transform: translateX(40%) scale(.92); } } }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-3vw, 2vw) rotate(-4deg); } }