/* tamirfjornfable.com — Gotland picture stones: limestone slabs, shallow relief, red ochre, raking light from the upper left.
   hard-offset-shadow (relief): (+L,+L) shade + (−1,−1) bone; photo-cutout: ochre silhouettes, one fill, one shadow. */
:root {
  --ink: #1F1A17; --inkSoft: #2C2520; --hall: #978F82; --stone: #C3BBAB; --bone: #EEE7D9; --ochre: #A8402C; --ochreDeep: #561A10; --ochreLit: #E0957F; --soot: #25201B; --shade: #2B211A;
  --disp: 'Faculty Glyphic', Georgia, serif; --text: 'Hubot Sans', 'Arial Narrow', system-ui, sans-serif;
  --pad: 16px; --L: 3px; --p: 1;
  --relief: 3px 3px 0 rgba(43, 33, 26, .6), -1px -1px 0 rgba(238, 231, 217, .55);
  --rtext: 2px 2px 0 rgba(43, 33, 26, .45), -1px -1px 0 rgba(238, 231, 217, .35);
}
@media (min-width: 600px) { :root { --pad: 32px; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hall); color: var(--ink); font: 400 15px/1.55 var(--text); font-stretch: 75%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--disp); font-weight: 400; line-height: 1.05; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ochreDeep); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--bone); color: var(--ink); padding: 8px 14px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- grounds + raking light ---------- */
.hall { background: var(--hall) url(/assets/img/ground-hall.webp) center / cover; }
.stone-g { background: var(--stone) url(/assets/img/ground-stone.webp) center / cover; }
.sec { position: relative; display: flex; flex-direction: column; gap: 24px; padding: 56px var(--pad); overflow: hidden; }
[data-rake]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: soft-light;
  background: linear-gradient(135deg, rgba(255, 246, 228, 0) 38%, rgba(255, 246, 228, .55) 50%, rgba(255, 246, 228, 0) 62%) no-repeat;
  background-size: 300% 300%; background-position: calc((1 - var(--p)) * 100%) calc((1 - var(--p)) * 100%); opacity: calc(1 - var(--p)); }
.rl { text-shadow: var(--rtext); }
.fig { filter: drop-shadow(calc(var(--p) * (var(--L) - 1px)) calc(var(--p) * (var(--L) - 1px)) 0 rgba(43, 33, 26, .42)) drop-shadow(-1px -1px 0 rgba(238, 231, 217, .5)); pointer-events: none; }

/* ---------- UI genome ---------- */
.chip { font: 600 12px/1.55 var(--text); font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: var(--ochreDeep); }
.chip.soft { color: var(--inkSoft); } .chip.ink { color: var(--ink); }
.ar { width: 14px; height: 14px; flex: none; color: var(--ochre); }
.tl { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-weight: 600; font-size: 15px; color: var(--ochreDeep); text-decoration: none; }
.tl span { text-decoration: underline; text-underline-offset: 2px; }
.tl .ar { transition: transform .2s; } .tl:hover .ar { transform: translateX(4px); }
.tl.ink { color: var(--ink); } .tl.ink .ar { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border: 0; background: var(--ochre); color: var(--bone); font: 600 15px/1.55 var(--text); font-stretch: 75%;
  text-decoration: none; box-shadow: var(--L) var(--L) 0 rgba(37, 32, 27, .9); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(2px, 2px); box-shadow: calc(var(--L) - 2px) calc(var(--L) - 2px) 0 rgba(37, 32, 27, .9); }
.btn.lt { background: var(--bone); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ochreDeep), var(--L) var(--L) 0 rgba(37, 32, 27, .9); }
.btn.lt:hover { box-shadow: inset 0 0 0 2px var(--ochreDeep), calc(var(--L) - 2px) calc(var(--L) - 2px) 0 rgba(37, 32, 27, .9); }
.dbl { position: relative; border: 1.5px solid var(--ochreDeep); padding: 4px; }
.dbl > div, .dbl > dl { border: 1px solid var(--ochreDeep); }
.plait { flex: none; height: 16px; background: url(/assets/img/plait-m.svg) 0 0 / 20px 16px repeat-x; filter: drop-shadow(2px 2px 0 rgba(43, 33, 26, .45)) drop-shadow(-1px -1px 0 rgba(238, 231, 217, .35)); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--inkSoft); }
.crumbs li { display: flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ''; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 9H15M9.5 3.5L15 9L9.5 14.5' fill='none' stroke='%232C2520' stroke-width='2.2'/%3E%3C/svg%3E") 0 0 / 12px 12px; }
.crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { font-weight: 600; }

/* cover-whole tile */
.tile { position: relative; display: block; padding: 4px; background: var(--ochreDeep); box-shadow: var(--relief); overflow: hidden; text-decoration: none; transition: box-shadow .3s ease-out; }
.tile .cv { width: 100%; aspect-ratio: 1; object-fit: cover; outline: 1px solid rgba(238, 231, 217, .6); outline-offset: -1px; }
.cap { position: absolute; left: 4px; right: 4px; bottom: 4px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bone); transform: translateY(calc(100% + 4px)); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.cap .chip { font-size: 10px; }
.ct { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 18px/1.1 var(--disp); color: var(--ink); }
a.tile:hover, a.tile:focus-visible { box-shadow: calc(var(--L) + 4px) calc(var(--L) + 4px) 0 rgba(43, 33, 26, .7), -1px -1px 0 rgba(238, 231, 217, .6); }
a.tile:hover .cap, a.tile:focus-visible .cap { transform: none; }

/* ---------- header + menu ---------- */
.hd { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); background: var(--hall) url(/assets/img/ground-hall.webp) center / cover; }
.hd.over { position: absolute; top: 0; left: 0; right: 0; background: none; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 20px/1.05 var(--disp); letter-spacing: -.01em; }
.logo img { width: 24px; height: 36px; filter: drop-shadow(2px 2px 0 rgba(43, 33, 26, .45)) drop-shadow(-1px -1px 0 rgba(238, 231, 217, .35)); }
.mn { position: relative; }
.mb { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: var(--bone); color: var(--ink); font-weight: 600; font-size: 13px; line-height: 1.55; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--L) var(--L) 0 rgba(37, 32, 27, .9); transition: transform .15s, box-shadow .15s; }
.mb svg { width: 16px; height: 16px; }
.mb:hover, .mb[aria-expanded=true] { transform: translate(2px, 2px); box-shadow: calc(var(--L) - 2px) calc(var(--L) - 2px) 0 rgba(37, 32, 27, .9); }
.menu { position: absolute; right: 0; top: calc(100% + 14px); width: 240px; background: var(--bone); border: 1.5px solid var(--ochreDeep); padding: 4px; box-shadow: var(--L) var(--L) 0 rgba(43, 33, 26, .5); }
.menu[hidden] { display: none; }
.menu ul { border: 1px solid var(--ochreDeep); padding: 6px 16px; }
.menu li + li { border-top: 1px solid rgba(86, 26, 16, .35); }
.menu a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font: 24px/1.1 var(--disp); text-decoration: none; }
.menu a[aria-current] { color: var(--ochre); }
.menu a:hover .ar { transform: translateX(4px); } .menu .ar { transition: transform .2s; }

/* ---------- home hero (360 composition below 1024) ---------- */
.hero { position: relative; overflow: hidden; padding: 92px var(--pad) 37px; }
.h1 { position: relative; font-size: 52px; line-height: 1; letter-spacing: -.02em; margin-left: -2px; }
.h1 span { display: block; position: relative; }
.h1 .l1 { z-index: 1; } .h1 .l2 { z-index: 3; }
.stone { position: absolute; z-index: 2; top: 318px; right: max(10px, calc(50% - 170px)); width: 156px; }
.stone > picture img { width: 156px; }
.stone .hr { position: absolute; left: 27px; top: 27px; width: 103px; }
.stone .hs { position: absolute; left: 9px; top: 164px; width: 131px; }
.sf { position: relative; z-index: 3; margin-top: 22px; max-width: 328px; line-height: 1.5; }
.hero .cta { position: relative; z-index: 3; margin-top: 102px; padding: 13px 18px; }
.plate { position: relative; z-index: 3; margin-top: 228px; max-width: 400px; border-color: var(--ink); }
.plate .pl-in { border-color: var(--ink); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.plate .pl-in > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plate dt { color: var(--ink); }
.plate dd { font-size: 14px; font-weight: 500; }

/* ---------- G: cover tiles ---------- */
.g-hd { display: flex; flex-direction: column; gap: 16px; }
.g-hd h2 { font-size: 36px; line-height: 1; letter-spacing: -.01em; }
.g-hd p { color: var(--inkSoft); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 152px)); gap: 16px; padding-bottom: 36px; }
.tiles li:nth-child(2n) { transform: translateY(36px); }

/* ---------- T: rune band ---------- */
.tband { position: relative; overflow: hidden; padding: 26px 0; }
.rune { display: flex; overflow: hidden; background: var(--ochre); box-shadow: 4px 4px 0 rgba(43, 33, 26, .5), -1px -1px 0 rgba(238, 231, 217, .55); }
.rune.tb { width: 104%; margin-left: -2%; transform: rotate(1.2deg); }
.rt { display: flex; flex: none; gap: 18px; padding-right: 18px; animation: rune 46s linear infinite; }
.rt li { display: flex; align-items: center; gap: 18px; padding: 11px 0; font-weight: 600; font-size: 12px; line-height: 1.55; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.rt li::after { content: ''; width: 7px; height: 7px; background: rgba(238, 231, 217, .75); transform: rotate(45deg); }
.rune:hover .rt, .rune:focus-within .rt, .rune:focus .rt { animation-play-state: paused; }
@keyframes rune { to { transform: translateX(-100%); } }

/* ---------- A: note beside a small stone ---------- */
.a { align-items: center; gap: 28px; padding: 48px var(--pad) 110px; }
.a-st { position: relative; width: 100%; max-width: 328px; height: 250px; }
.a-st img { position: absolute; left: calc(50% - 75px); top: 0; width: 150px; }
.note { position: relative; z-index: 1; width: 100%; background: var(--bone); box-shadow: var(--L) var(--L) 0 rgba(43, 33, 26, .5); }
.nt-in { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.note h2 { font-size: 30px; letter-spacing: -.01em; }
.note p { color: var(--inkSoft); }

/* ---------- E: three registers ---------- */
.e { gap: 0; overflow: visible; z-index: 1; }
.e > h2 { font-size: 34px; line-height: 1; letter-spacing: -.01em; padding-bottom: 22px; max-width: 640px; }
.er { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; }
.er h3 { display: flex; align-items: center; gap: 14px; font-size: 22px; line-height: 1.1; }
.er p { color: var(--inkSoft); max-width: 600px; }
.es { position: absolute; right: 6px; top: -124px; width: 200px; z-index: 2; }

/* ---------- footer ---------- */
.ft { background: var(--soot); color: var(--bone); }
.ft-body { display: flex; flex-direction: column; gap: 28px; padding: 36px var(--pad) 28px; }
.fa { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.fa .logo { color: var(--bone); }
.fa p { opacity: .85; font-size: 15px; }
.fm { font-weight: 600; font-size: 15px; text-underline-offset: 2px; }
.fcs { display: flex; gap: 32px; }
.fc { display: flex; flex-direction: column; gap: 10px; }
.fc .chip { color: var(--ochreLit); }
.fc ul { display: flex; flex-direction: column; gap: 10px; }
.fc a, .fc span, .fck { font-size: 15px; text-decoration: none; color: var(--bone); }
.fc a:hover, .fck:hover { text-decoration: underline; }
.fck { background: none; border: 0; padding: 0; text-align: left; line-height: 1.55; }
.fc.soc { display: none; }
.ft-base { display: flex; flex-direction: column; gap: 0; padding: 14px var(--pad) 22px; border-top: 1px solid rgba(168, 64, 44, .6); font-size: 13px; }
.ft-base p { opacity: .75; }

/* ---------- inner pages ---------- */
.ph { gap: 14px; padding: 24px var(--pad) 40px; align-items: flex-start; }
.ph h1 { font-size: min(44px, 12.8vw); line-height: 1; letter-spacing: -.015em; max-width: 760px; }
.ph .lead { font-size: 16px; color: var(--inkSoft); max-width: 620px; }
.ph > :not(.plait):not(.fig) { position: relative; z-index: 1; }
.phf { position: absolute; right: -45px; top: 8px; width: 150px; opacity: .35; }
.ph .plait { position: absolute; left: 0; right: 0; bottom: 0; }
.cat .cards { display: grid; gap: 40px; }
.card { display: flex; flex-direction: column; gap: 14px; }
.card h2 { font-size: 26px; letter-spacing: -.005em; }
.card .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card .ol { font-size: 15px; color: var(--inkSoft); }

.gt { gap: 22px; padding: 22px var(--pad) 40px; }
.gcv { display: flex; flex-direction: column; gap: 14px; }
.info { display: flex; flex-direction: column; gap: 18px; }
.info h1 { font-size: min(44px, 12.8vw); line-height: 1; letter-spacing: -.015em; }
.info .sum { font-size: 16px; color: var(--inkSoft); }
.gm { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--inkSoft); }
.facts { background: var(--bone); }
.fx-in { display: flex; flex-direction: column; gap: 12px; padding: 8px 14px; }
.facts dl { display: flex; flex-direction: column; gap: 12px; }
.facts h2 { font-size: 22px; line-height: 1.4; }
.facts dl > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }
.facts dl > div + div { border-top: 1px solid rgba(86, 26, 16, .35); }
.facts dd { font-size: 14px; }
.gb { gap: 12px; padding: 36px var(--pad) 40px; }
.acc { transition: background .2s; }
.dbl.acc { padding: 0; }
.dbl.acc > div { border: 0; }
.acc::after { content: ''; position: absolute; inset: 4px; border: 1px solid var(--ochreDeep); pointer-events: none; }
.acc[open] { background: var(--bone); box-shadow: var(--L) var(--L) 0 rgba(43, 33, 26, .45); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 21px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h2 { font-size: 22px; line-height: 1.1; }
.acc summary .ar { transition: transform .25s; }
.acc[open] summary .ar { transform: rotate(90deg); }
.acc summary:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.acc-b { display: flex; flex-direction: column; gap: 16px; padding: 0 21px 21px; }
.acc-b > p:not(.chip) { color: var(--inkSoft); max-width: 820px; }
.keys { display: flex; flex-wrap: wrap; gap: 12px; }
.keys li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px solid var(--ochreDeep); font-size: 14px; }
.keys b { font-weight: 700; } .keys span { color: var(--inkSoft); }
.al { display: flex; flex-direction: column; gap: 12px; }
.al li { display: flex; gap: 10px; color: var(--inkSoft); }
.al .ar { margin-top: .3em; }
.sims { display: flex; flex-direction: column; gap: 14px; }
.sims a { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.sims .tile { flex: none; width: 88px; }
.sims a > span { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sims b { font: 22px/1.1 var(--disp); }
.sims span span { color: var(--inkSoft); }
.sims a:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
.qa > div { padding: 12px 0; } .qa > div + div { border-top: 1px solid rgba(86, 26, 16, .35); }
.qa dt { font-weight: 600; } .qa dd { color: var(--inkSoft); }
.where { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }

.abody { gap: 0; }
.ar-row { display: flex; flex-direction: column; gap: 10px; padding: 22px 0; }
.ar-row h2 { font-size: 26px; }
.ar-row div { display: flex; flex-direction: column; gap: 12px; color: var(--inkSoft); }
.ak { flex-direction: row; gap: 56px; }
.kc h2 { font-size: 28px; }
.rs li { color: var(--ink); }
.kr { display: flex; flex-direction: column; gap: 14px; }
.kr > div { display: flex; align-items: center; gap: 16px; }
.kr dd { font-weight: 600; } .kr dd a { text-decoration: none; }
.ak-st { display: none; }
.lgb { gap: 0; padding: 28px var(--pad) 40px; }
.ls { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; }
.ls + .ls { border-top: 1px solid rgba(86, 26, 16, .5); }
.ls h2 { font-size: 22px; line-height: 1.1; }
.ls p { color: var(--inkSoft); }

/* ---------- cookie ---------- */
.cookie { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: 16px; }
.cookie[hidden] { display: none; }
.ck { max-width: 500px; margin-left: auto; background: var(--bone); border-width: 2px; padding: 5px; box-shadow: 6px 6px 0 rgba(37, 32, 27, .35); }
.ck-in { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; overflow: hidden; }
.ckr { position: absolute; right: 30px; top: 14px; width: 80px; opacity: .9; }
.ck h2 { font-size: 24px; padding-right: 110px; }
.ck p { color: var(--inkSoft); padding-right: 110px; }
.ck-acts { display: flex; gap: 14px; padding: 6px 3px 3px 0; }
.ck-acts .btn { flex: 1; padding: 13px 10px; white-space: nowrap; }
.ck .ln { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--ochreDeep); }
.ck-manage { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 14px; }
.ck-manage[hidden] { display: none; }
.ck-manage label { display: flex; align-items: center; gap: 8px; }
.ck-manage input { accent-color: var(--ochre); width: 16px; height: 16px; }

@media (max-width: 399px) {
  .ck h2, .ck p { padding-right: 70px; }
  .ckr { width: 60px; right: 12px; }
  .ck-acts { flex-direction: column; }
}
@media (min-width: 600px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 200px)); }
  .tiles li:nth-child(2n) { transform: none; }
  .tiles li:nth-child(3n+2) { transform: translateY(36px); }
  .cat .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
}

/* ---------- desktop (Figma 1368) ---------- */
@media (min-width: 1024px) {
  :root { --pad: max(56px, calc(50% - 628px)); --L: 4px; --u: min(1px, calc(100vw / 1368));
    --relief: 4px 4px 0 rgba(43, 33, 26, .6), -1px -1px 0 rgba(238, 231, 217, .55); }
  body { font-size: 17px; }
  .sec { gap: 40px; padding: 96px var(--pad); }
  .e, .abody, .lgb { gap: 0; }
  .ar { width: 18px; height: 18px; }
  .dbl { border-width: 2px; padding: 5px; }
  .menu { border-width: 2px; padding: 5px; }
  .dbl > div, .dbl > dl { border-width: 1.2px; }
  .plait { height: 26px; background-image: url(/assets/img/plait.svg); background-size: 32.5px 26px; }
  .tile { padding: 6px; }
  .cap { left: 6px; right: 6px; bottom: 6px; height: 92px; gap: 6px; padding: 14px 16px; transform: translateY(calc(100% + 6px)); }
  .cap .chip { font-size: 12px; }
  .ct { font-size: 24px; }

  .hd { padding: 28px var(--pad); }
  .logo { font-size: 26px; }
  .logo img { width: 30px; height: 45px; }
  .mb { padding: 14px 20px; font-size: 14px; }
  .mb svg { width: 20px; height: 20px; }

  .hero { height: calc(880 * var(--u)); padding: 0; --x: calc(50% - 684 * var(--u)); }
  .h1 { position: absolute; inset: 0; margin: 0; font-size: calc(168 * var(--u)); }
  .h1 span { position: absolute; left: calc(var(--x) + 48 * var(--u)); white-space: nowrap; }
  .h1 .l1 { top: calc(186 * var(--u)); } .h1 .l2 { top: calc(351 * var(--u)); }
  .stone { top: calc(66 * var(--u)); left: calc(var(--x) + 772 * var(--u)); right: auto; width: calc(460 * var(--u)); }
  .stone > picture img { width: 100%; }
  .stone .hr { left: calc(78 * var(--u)); top: calc(78 * var(--u)); width: calc(304 * var(--u)); }
  .stone .hs { left: calc(28 * var(--u)); top: calc(483 * var(--u)); width: calc(386 * var(--u)); }
  .sf { position: absolute; left: calc(var(--x) + 56 * var(--u)); top: calc(550 * var(--u)); width: calc(560 * var(--u)); max-width: none; margin: 0; font-size: calc(20 * var(--u)); }
  .hero .cta { position: absolute; left: calc(var(--x) + 56 * var(--u)); top: calc(666 * var(--u)); margin: 0; padding: calc(16 * var(--u)) calc(24 * var(--u)); font-size: calc(16 * var(--u)); }
  .plate { position: absolute; left: calc(var(--x) + 280 * var(--u)); top: calc(646 * var(--u)); width: calc(400 * var(--u)); max-width: none; margin: 0; }
  .plate .pl-in { padding: calc(16 * var(--u)) calc(20 * var(--u)); gap: calc(8 * var(--u)); }
  .plate dt { font-size: calc(12 * var(--u)); }
  .plate dd { font-size: calc(15 * var(--u)); }

  .g { flex-direction: row; gap: 48px; }
  .g-hd { flex: none; width: 300px; }
  .g-hd h2 { font-size: 54px; }
  .tiles { flex: 1; max-width: 956px; margin-right: calc(8px - var(--pad)); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-bottom: 64px; align-self: flex-start; }
  .tiles li:nth-child(3n+2) { transform: translateY(64px); }

  .tband { padding: 48px 0; }
  .rt { gap: 28px; padding-right: 28px; }
  .rt li { gap: 28px; padding: 16px 0; font-size: 15px; }

  .a { flex-direction: row; align-items: center; gap: 72px; padding: 96px var(--pad) 150px; }
  .a-st { flex: none; width: 300px; max-width: none; height: 430px; }
  .a-st img { left: 20px; width: 260px; }
  .note { width: 560px; flex: none; }
  .nt-in { padding: 24px 28px; }
  .note h2 { font-size: 40px; }
  .e > h2 { font-size: 54px; padding-bottom: 36px; }
  .er { flex-direction: row; align-items: center; gap: 48px; padding: 30px 0; }
  .er h3 { flex: none; width: 460px; font-size: 30px; }
  .es { right: calc(50% - 604px); top: -273px; width: 440px; }

  .ft-body { flex-direction: row; gap: 64px; padding: 56px var(--pad) 40px; }
  .fa { flex: none; width: 420px; }
  .fcs { gap: 64px; }
  .fc.soc { display: flex; }
  .ft-base { flex-direction: row; justify-content: space-between; padding: 18px var(--pad) 26px; }
  .ft-base .socm { display: none; }

  .ph { gap: 22px; padding: 40px var(--pad) 72px; }
  .ph h1 { font-size: 88px; }
  .ph .lead { font-size: 19px; }
  .phf { right: calc(50% - 743px); top: 30px; width: 420px; opacity: 1; }
  .cat { padding: 96px var(--pad); }
  .cat .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 64px; }
  .card h2 { font-size: 32px; }

  .gt { flex-direction: row; align-items: flex-start; gap: 56px; padding: 40px var(--pad) 72px; }
  .gcv { flex: none; width: min(480px, 40%); }
  .info { flex: 1; padding-top: 48px; }
  .info h1 { font-size: 84px; }
  .info .sum { font-size: 19px; }
  .fx-in { padding: 10px 22px; }
  .facts dl > div { flex-direction: row; gap: 16px; }
  .facts dt { flex: none; width: 130px; }
  .gb { gap: 18px; padding: 72px max(calc(var(--pad) + 120px), calc(50% - 508px)); }
  .acc::after { inset: 5px; }
  .acc summary { gap: 12px; padding: 28.2px 34.2px; }
  .acc summary h2 { font-size: 30px; }
  .acc-b { padding: 0 34.2px 28.2px; }
  .where { flex-direction: row; align-items: center; gap: 32px; padding-top: 28px; }
  .where p { font-size: 15px; width: 560px; flex: none; }

  .abody { padding: 96px var(--pad); }
  .ar-row { flex-direction: row; gap: 64px; padding: 36px 0; }
  .ar-row h2 { flex: none; width: 380px; font-size: 36px; }
  .ar-row div { max-width: 640px; }
  .kc { width: 720px; flex: none; align-self: flex-start; }
  .kc h2 { font-size: 40px; }
  .ak-st { display: block; position: relative; flex: none; width: 360px; height: 380px; }
  .ak-st img { position: absolute; left: 60px; top: 0; width: 240px; }
  .lgb { padding: 56px max(calc(var(--pad) + 200px), calc(50% - 428px)) 80px; }
  .ls { padding: 28px 0; }
  .ls h2 { font-size: 28px; }
  .ls p { font-size: 16px; }

  .cookie { left: auto; right: 24px; bottom: 24px; width: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :root { --p: 1 !important; }
}

/* ---------- social: two shallow-relief panels ---------- */
.fc .sx, .ft-base .sx { flex-direction: row; gap: 10px; }
.sx a { display: grid; place-items: center; width: 38px; height: 38px; color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(238, 231, 217, .5); transition: background-color .2s, box-shadow .2s; }
.sx a:hover { background: var(--ochre); box-shadow: inset 0 0 0 1.5px var(--ochre); text-decoration: none; }
.sx svg { width: 17px; height: 17px; }
.ft-base .sx { display: flex; margin-top: 10px; }
@media (min-width: 1024px) { .ft-base .sx { display: none; } }