/* ───────────────────────────────────────────────
   Ani Pfeifer — portfolio
   Fonts: Ani (her own handwriting), Anton (placeholder for Cinder), Barlow (body)
   Swap them in the three @font-face blocks + the --f-* variables.
   ─────────────────────────────────────────────── */

@font-face { font-family: "Display"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hand";    src: url("../fonts/ani.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Body";    src: url("../fonts/barlow-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Body";    src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --pink: #fa3ccf;          /* paper background */
  --hot: #ff00bf;           /* type + icon pink */
  --logo: #c6006b;
  --white: #fff;
  --black: #0b0b0b;
  --f-display: "Hand", "Comic Sans MS", cursive;
  --f-hand: "Hand", "Comic Sans MS", cursive;
  --f-body: "Body", "Barlow", system-ui, sans-serif;
  --pad: clamp(18px, 5.8vw, 80px);
  --u: min(calc(100vw / 1334), 1.15px);   /* layout unit: 1 = a px of the 1334 mockup */
  --k: calc(100vw / 2344);                  /* landing mockup unit */
  --head-h: calc(var(--u) * 84);
  --strip-h: calc(100vw * 148 / 1334);
  --strip-b: calc(100vw * 173 / 1334);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--white);
  font-family: var(--f-body); font-weight: 300; line-height: 1.35;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 6px var(--hot); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* paper */
.paper { background: var(--pink) url("../img/paper.jpg") 0 0 / 1366px 440px repeat; }

/* ── header ─────────────────────────────────── */
.top {
  position: relative; z-index: 20; height: var(--head-h); background: var(--white);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 calc(var(--u) * 18);
}
.top .logo { grid-column: 1; justify-self: start; display: block; width: calc(var(--u) * 120); }
.top.landing .logo { width: calc(var(--u) * 168); }
.top .logo img { width: 100%; }
.top .logo { transition: rotate .3s, scale .3s; }
.top .logo:hover { rotate: -4deg; scale: 1.05; }
.tabs { grid-column: 2; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 15); }
.tab {
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  font-family: var(--f-hand); color: var(--hot); text-align: center; text-transform: uppercase;
  font-size: calc(var(--fs) * var(--u)); line-height: .92; letter-spacing: 0; white-space: nowrap;
}
.tab::before { content: ""; position: absolute; inset: calc(var(--u) * -4); background: var(--bg) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.tab span { position: relative; padding-top: .06em; }
.tab { transition: rotate .25s, scale .25s; }
.tab:hover, .tab:focus-visible { rotate: -3deg; scale: 1.06; }
.tab[aria-current] { rotate: 1.5deg; scale: 1.04; }
.socials { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: calc(var(--u) * 16); }
.ig { width: calc(var(--u) * 34); display: block; transition: rotate .3s, scale .3s; }
.ig:hover { rotate: 8deg; scale: 1.1; }
.ig img { width: 100%; }
.menu-btn { display: none; grid-column: 3; justify-self: end; position: relative; width: 96px; height: 42px; font-family: var(--f-hand); font-size: 28px; line-height: 1; text-transform: uppercase; color: var(--hot); place-items: center; }
.menu-btn::before { content: ""; position: absolute; inset: -3px; background: var(--bg) 0 0 / 100% 100% no-repeat; }
.menu-btn span { position: relative; padding-top: 3px; }
@media (max-width: 1020px) {
  .tabs, .socials { display: none; }
  .menu-btn { display: grid; }
  .top { height: 62px; padding: 0 16px; }
  .top .logo, .top.landing .logo { width: 108px; }
}

/* ── full-screen menu ───────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 90; visibility: hidden; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  clip-path: inset(0 0 100% 0);
}
.menu.is-open { visibility: visible; }
.menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu li { overflow: hidden; }
.menu a.big {
  display: inline-block; font-family: var(--f-display); text-transform: uppercase; color: var(--white);
  font-size: clamp(40px, 8.4vh, 104px); line-height: 1.04; letter-spacing: -.01em; padding: .04em .2em;
  transition: color .2s, rotate .25s, scale .25s;
}
.menu a.big:hover, .menu a.big:focus-visible { color: var(--black); rotate: -2deg; scale: 1.03; }
.menu .menu-close { position: absolute; top: 14px; right: 18px; font-family: var(--f-hand); font-size: 30px; text-transform: uppercase; color: var(--white); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.menu .menu-foot { margin-top: 3vh; font-family: var(--f-hand); font-size: clamp(20px, 2.4vw, 30px); text-transform: lowercase; }
.menu .menu-foot a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ── star strips (static, traced from her drawing) ── */
.strip { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; background-repeat: no-repeat; background-size: 100% 100%; }
.strip.s-top { top: -2px; height: calc(var(--strip-h) + 2px); background-image: url("../img/strip-top.svg"); }
.strip.s-bot { bottom: -2px; height: calc(var(--strip-b) + 2px); background-image: url("../img/strip-bottom.svg"); }
.strip.s-top.pink { background-image: url("../img/strip-top-pink.svg"); }
.strip.s-bot.pink { background-image: url("../img/strip-bottom-pink.svg"); }
.fs.sc { opacity: .95; }
.fs { position: absolute; z-index: 3; pointer-events: none; height: auto; }
@media (max-width: 700px) {
  :root { --strip-h: 64px; --strip-b: 76px; }
  .strip { background-size: auto 100%; background-repeat: repeat-x; }
}

/* ── landing ────────────────────────────────── */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; height: clamp(520px, calc(100svh - var(--top-h, 86px)), calc(var(--k) * 1282)); min-height: 520px; padding: calc(var(--strip-h) * .55) 0 0; }
.ripples { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.ripples .ring { position: absolute; left: 50%; top: 52%; width: 56vw; height: 40vw; margin: -20vw 0 0 -28vw; transform: scale(.05); opacity: 0; will-change: transform, opacity; }
.ripples .ring img { width: 100%; height: 100%; object-fit: fill; }
.fs-os { left: 65.3%; top: calc(var(--k) * 29); width: calc(var(--k) * 270); }
.fs-left { left: 0; top: calc(var(--k) * 504); width: calc(var(--k) * 170); }
.fs-br { right: 0; bottom: 0; width: calc(var(--k) * 244); }
.hero-grid {
  position: relative; z-index: 4; flex: 1; display: grid; grid-template-columns: 1fr minmax(240px, 32vw) 1fr; align-items: end;
  width: 100%; padding: 0 calc(var(--k) * 70) clamp(44px, calc(var(--k) * 120), 80px);
}
.name {
  font-family: var(--f-display); text-transform: uppercase; color: var(--white);
  font-size: clamp(26px, 4.3vw, 100px); line-height: 1; letter-spacing: -.005em; margin: 0; font-weight: 400;
  display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: .3em; align-self: start;
}
.name.left { justify-content: flex-start; margin-top: calc(var(--k) * 200); }
.name.right { justify-content: flex-end; margin-top: calc(var(--k) * 200); }
.name .ani { position: relative; display: inline-block; }
.name .ani svg { position: absolute; left: 4%; right: 4%; bottom: -.13em; width: 92%; height: .2em; overflow: visible; }
.name .ani path { fill: none; stroke: var(--white); stroke-width: 6; stroke-linecap: round; }

.portrait { position: relative; width: min(100%, calc((100svh - var(--top-h, 86px) - var(--strip-h) * .55 - 150px) * .908)); justify-self: center; align-self: end; line-height: 0; }
.portrait .faces { position: relative; width: 100%; aspect-ratio: 999 / 1100; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.portrait img.face-alt { opacity: 0; }

.roles {
  position: absolute; left: 0; right: 0; bottom: calc(var(--k) * 40); z-index: 5; text-align: center; text-transform: uppercase; margin: 0; padding: 0 24px;
  font-size: clamp(11px, 1.5vw, 34px); letter-spacing: .01em; color: var(--white); text-shadow: 0 0 12px rgba(120,0,90,.55);
}

@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: calc(var(--strip-h) * .5); }
  .hero-grid { grid-template-columns: 1fr; justify-items: center; padding: 0 16px; }
  .portrait { order: 1; width: min(78vw, 360px); }
  .name.left { order: 2; margin: 4px 0 0; justify-content: center; font-size: 11vw; }
  .name.right { order: 3; margin: 0; justify-content: center; font-size: 11vw; }
  .roles { position: relative; bottom: auto; padding: 14px 24px 60px; order: 4; }
  .fs-os, .fs-left { display: none; }
  .fs-br { width: 70px; }
  .ripples .ring { width: 150vw; height: 110vw; margin: -55vw 0 0 -75vw; top: 40%; }
}

.about { position: relative; padding: clamp(40px, 6vw, 90px) var(--pad) calc(var(--strip-b) + clamp(20px, 3vw, 50px)); overflow: hidden; }
.fs-os2 { right: 44%; bottom: calc(var(--strip-b) * .7); width: calc(var(--k) * 200); }
.fs-left2 { left: 1%; top: 3%; width: calc(var(--k) * 120); }
.about-inner { position: relative; z-index: 4; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 770fr) minmax(0, 480fr); gap: 4vw; align-items: end; }
.about h2 {
  margin: 0 0 clamp(8px, 1.2vw, 16px); font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--white);
  font-size: clamp(36px, 5.9vw, 86px); line-height: 1;
}
.about p { margin: 0 0 1.35em; text-transform: uppercase; text-align: justify; hyphens: manual; font-size: clamp(13px, 1.6vw, 22px); line-height: 1.36; letter-spacing: .005em; }
.about p:last-child { margin-bottom: 0; }
.casual { position: relative; margin: 0 calc(var(--pad) * -1 - 4vw) calc((var(--strip-b) + clamp(20px, 3vw, 50px)) * -1) 0; align-self: end; line-height: 0; z-index: 4; }
.casual img { width: 100%; height: auto; }
.casual .pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.casual .pen path { fill: none; stroke: var(--white); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.casual .pen path + path { stroke-width: 4; opacity: .8; }
.casual .pen text { font-family: var(--f-hand); font-size: 64px; fill: #fff; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; }
  .casual { width: min(88%, 440px); margin: 10px calc(var(--pad) * -1) calc((var(--strip-b) + 20px) * -1) auto; }
  .about p { text-align: left; }
  .fs-os2, .fs-left2 { display: none; }
}

/* ── footer ─────────────────────────────────── */
.foot {
  position: relative; z-index: 10; background: var(--white); color: var(--hot);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px;
  padding: calc(var(--u) * 12) calc(var(--u) * 18); font-family: var(--f-hand); font-size: clamp(18px, 2vw, 26px); text-transform: uppercase;
}
.foot .flogo { display: block; width: clamp(96px, calc(var(--u) * 150), 170px); }
.foot .flogo img { width: 100%; }
.foot nav { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.foot a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* ── section pages ──────────────────────────── */
.page-title {
  position: relative; z-index: 20; background: var(--white); margin: 0; padding: 0 16px calc(var(--u) * 6); text-align: center;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--hot);
  font-size: clamp(40px, 6.9vw, 120px); line-height: .98; letter-spacing: -.012em;
}
.page-title span { display: inline-block; }
.page-title-wrap { position: relative; z-index: 19; background: var(--white); }

.work { position: relative; overflow: hidden; min-height: 70vh; padding: calc(var(--strip-h) * .98) var(--pad) calc(var(--strip-b) + 40px); }
.grid { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 84px) clamp(20px, 5.6vw, 80px); max-width: 1220px; margin: 0 auto; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
.tile { position: relative; display: block; }
.tile .frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #1b1b1b; }
.tile .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; filter: brightness(.9) saturate(1.04); }
.tile:hover .frame img, .tile:focus-visible .frame img { transform: scale(1.06); filter: brightness(.74) saturate(1.1); }
.tile .label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 6%;
  font-family: var(--f-hand); color: var(--white); text-transform: uppercase;
  font-size: clamp(26px, 3.7vw, 54px); line-height: .98; letter-spacing: .01em; transform: rotate(-1.5deg); text-shadow: 0 1px 16px rgba(0,0,0,.32); transition: transform .3s;
}
.tile:hover .label { transform: rotate(1deg) scale(1.05); }

/* project pages */
.project .project-inner { position: relative; z-index: 4; max-width: 1260px; margin: 0 auto; }
.player { position: relative; aspect-ratio: 16 / 9; background: #151515; overflow: hidden; }
.player iframe, .player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.player .soon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); font-family: var(--f-hand); font-size: clamp(24px, 4vw, 56px); text-transform: uppercase; color: var(--white); text-shadow: 0 0 14px rgba(120,0,90,.6); white-space: nowrap; }
.gallery { columns: 3 320px; column-gap: clamp(12px, 2vw, 26px); }
.gallery .shot { display: block; break-inside: avoid; margin: 0 0 clamp(12px, 2vw, 26px); overflow: hidden; background: #1b1b1b; cursor: zoom-in; }
.gallery .shot img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery .shot:hover img { transform: scale(1.04); }
.project .meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 30px; margin-top: clamp(24px, 3vw, 44px); font-family: var(--f-hand); font-size: clamp(22px, 2.4vw, 34px); text-transform: uppercase; color: var(--white); }
.project .meta a:hover { text-decoration: underline; text-underline-offset: 5px; }
.lb { position: fixed; inset: 0; z-index: 150; display: none; place-items: center; background: rgba(250,60,207,.94); }
.lb.on { display: grid; }
.lb img { max-width: 92vw; max-height: 86vh; object-fit: contain; box-shadow: 0 10px 50px rgba(80,0,60,.5); }
.lb button { position: absolute; font-family: var(--f-hand); font-size: 34px; text-transform: uppercase; color: #fff; padding: 12px 18px; }
.lb .x { top: 8px; right: 12px; } .lb .p { left: 8px; top: 50%; } .lb .n { right: 8px; top: 50%; }

/* text pages (REC, contact) */
.text-page { position: relative; overflow: hidden; padding: calc(var(--strip-h) * .98) var(--pad) calc(var(--strip-b) + 40px); min-height: 70vh; }
.text-page .copy { position: relative; z-index: 4; max-width: 880px; margin: 0 auto; }
.text-page p { text-transform: uppercase; font-size: clamp(15px, 1.9vw, 26px); line-height: 1.34; margin: 0 0 1.2em; }
.big-links { list-style: none; margin: clamp(10px, 2vw, 30px) 0 0; padding: 0; display: grid; gap: clamp(6px, 1.2vw, 16px); }
.big-links a { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(34px, 6.4vw, 92px); line-height: 1; letter-spacing: -.005em; display: inline-block; transition: transform .25s, color .2s; }
.big-links a:hover, .big-links a:focus-visible { color: var(--black); transform: rotate(-1.5deg) translateX(8px); }
.big-links small { font-family: var(--f-hand); font-size: .32em; letter-spacing: .02em; margin-left: .6em; opacity: .9; }

/* ── page wipe ──────────────────────────────── */
.wipe { position: fixed; inset: 0; z-index: 200; pointer-events: none; transform: translateY(0); will-change: transform; }
.wipe .strip.s-top { top: 100%; bottom: auto; }
.wipe .strip.s-bot { bottom: 100%; top: auto; }
html:not(.js) .wipe { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wipe { display: none; }
}

/* Ani typeface everywhere the display/hand voice is used; thicken the thin scan strokes slightly */
.name, .hero h1, h1, h2, h3, .big-links a, .menu a, .tab, .page-title-wrap * { -webkit-text-stroke: .018em currentColor; letter-spacing: .01em; }
.roles{font-family:var(--f-hand);letter-spacing:.04em;font-size:clamp(16px,1.9vw,26px)}

/* star cursor + click sprinkle */
@media (hover: hover) and (pointer: fine) {
  html, body, * { cursor: url("../img/cursor.png") 32 13, auto; }
  a, button, [role="button"], .tab, .shot, summary, label { cursor: url("../img/cursor-hover.png") 40 16, pointer; }
}
.spark { position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; z-index: 99999; will-change: transform, opacity; overflow: visible; }
.project-inner .player + .player { margin-top: clamp(18px, 2.6vw, 40px); }
.bts-title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--white); font-size: clamp(30px, 4.4vw, 64px); margin: clamp(40px, 6vw, 90px) 0 clamp(14px, 2vw, 28px); -webkit-text-stroke: .018em currentColor; }
.bts-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 2vw, 26px); margin-bottom: clamp(12px, 2vw, 26px); }
.bts-videos video { width: 100%; height: auto; display: block; background: #151515; }
.bts-title + .bts-videos + .gallery { margin-top: 0; }

/* breathing room between video(s) and the photos below */
.project-inner > .project-text + .gallery, .project-inner > .player + .gallery, .project-inner > .player + .bts-title { margin-top: clamp(44px, 6vw, 96px); }
/* mixed clips + photos, small tiles so there is hardly any scrolling */
.gallery.mix { columns: 4 190px; column-gap: clamp(8px, 1.2vw, 16px); }
.gallery.mix .shot, .gallery.mix .player { break-inside: avoid; margin: 0 0 clamp(8px, 1.2vw, 16px); }
.gallery.mix .player { display: block; }

/* ── rose headings, tab fill, project copy ── */
:root { --rose: #ff9be9; }
.page-title { color: var(--hot); }
.tab, .menu-btn { color: var(--hot); isolation: isolate; transition: rotate .25s, scale .25s, color .2s; }
.tab::after, .menu-btn::after { content: ""; position: absolute; inset: calc(var(--u) * -4); background: var(--fill) 0 0 / 100% 100% no-repeat; opacity: 0; z-index: -1; transition: opacity .2s; pointer-events: none; }
.menu-btn::after { inset: -3px; }
.tab:hover, .tab:focus-visible, .tab:active, .tab[aria-current]:hover,
.menu-btn:hover, .menu-btn:focus-visible, .menu-btn:active { color: var(--white); }
.tab:hover::after, .tab:focus-visible::after, .tab:active::after,
.menu-btn:hover::after, .menu-btn:focus-visible::after, .menu-btn:active::after { opacity: 1; }
.project-text { max-width: 760px; margin: clamp(36px, 5vw, 72px) auto 0; color: var(--white); text-align: center; }
.project-text p { font-family: var(--f-body); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; margin: 0 0 1em; }
.project-text em { font-style: italic; }
.project-text .credit { font-family: var(--f-hand); text-transform: uppercase; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15; margin-top: 1.1em; -webkit-text-stroke: .018em currentColor; }
.project-text + .meta, .project-inner > .project-text + .meta { margin-top: clamp(32px, 4vw, 60px); }
.project-inner > .project-text + .gallery { margin-top: clamp(36px,5vw,72px); }

.project-text { margin-top: clamp(40px,5.5vw,84px); margin-bottom: clamp(40px,5.5vw,84px); }
.project-inner > .gallery + .project-text { margin-top: clamp(36px,5vw,72px); }

/* REC page media */
.rec-media { position: relative; z-index: 4; max-width: 1180px; margin: clamp(36px, 5vw, 72px) auto 0; columns: 3; column-gap: clamp(12px, 2vw, 26px); }
.rec-media .shot { display: block; break-inside: avoid; margin: 0 0 clamp(12px, 2vw, 26px); overflow: hidden; background: #1b1b1b; }
.rec-media img, .rec-media video { display: block; width: 100%; height: auto; }
.rec-media .shot.vid { cursor: auto; }
@media (max-width: 760px) { .rec-media { columns: 2; } }

/* language switch */
.langs { display: inline-flex; gap: calc(var(--u) * 10); margin-right: calc(var(--u) * 10); font-family: var(--f-hand); font-size: calc(var(--u) * 24); line-height: 1; }
.langs a { color: var(--hot); padding: 4px 3px; text-decoration: none; opacity: .75; transition: opacity .2s; }
.langs a:hover, .langs a:focus-visible, .langs a[aria-current] { opacity: 1; }
.langs a[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.menu .menu-langs { margin-top: 2.2vh; display: flex; gap: 18px; font-family: var(--f-hand); font-size: clamp(22px, 2.6vw, 32px); text-transform: uppercase; }
.menu .menu-langs a { opacity: .85; }
.menu .menu-langs a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.top .socials .langs { align-self: center; }