/* Confessions of a Perfectionist · "Rain into Water"
   One committed night world: behind the studio glass (teal) → clearing → violet water. */

:root{
  --glass:#0A2A33; --violet:#2A1F52; --night:#0B0913;
  --sky:#0A2A33;
  --ink:#ECE8F4; --ink-soft:rgba(236,232,244,.86); --ink-faint:rgba(236,232,244,.62);
  --line:rgba(236,232,244,.16);
  --lamp:#E3C98E; --periwinkle:#A39BE6; --tear:#7B6CC4;
  --f-display:'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --f-read:'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-ui:'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --f-zh:'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --gutter:clamp(18px, 5vw, 72px);
  --breath:3.6s; /* one bar of Technicolour Life at 67 BPM */
  --ease:cubic-bezier(.45,.05,.25,1);
}
*{box-sizing:border-box}
html{background:var(--glass); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--sky); color:var(--ink); font-family:var(--f-read); font-size:clamp(17px,1.15vw,19px); line-height:1.6; overflow-x:hidden}
img,video{max-width:100%; display:block}
a{color:inherit}
button,input,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--lamp); outline-offset:3px}
::selection{background:rgba(123,108,196,.55)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{padding-inline:var(--gutter); max-width:1360px; margin-inline:auto; position:relative; z-index:2}
.eyebrow{font-family:var(--f-ui); font-size:.72rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin:0}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--glass); padding:8px 12px; font-family:var(--f-ui)}
.skip:focus{top:12px}

/* ---------- The sky: colour descends from glass to water ---------- */
.sky{position:fixed; inset:0; z-index:0; background:var(--sky); pointer-events:none}
.glow{position:absolute; border-radius:50%; filter:blur(70px)}
.glow.lamp{width:60vmax; aspect-ratio:1; left:-18vmax; top:-22vmax; background:radial-gradient(circle,#D9A45B,rgba(217,164,91,0) 62%); opacity:var(--lamp-o,.22)}
.glow.haze-a{width:70vmax; aspect-ratio:1; right:-25vmax; top:10vh; background:radial-gradient(circle,#5A45A8,rgba(59,42,107,0) 64%); opacity:var(--haze-o,0); animation:drift 24s ease-in-out infinite alternate}
.glow.haze-b{width:80vmax; aspect-ratio:1.5; left:-10vmax; bottom:-35vmax; background:radial-gradient(circle,#3B2A6B,rgba(59,42,107,0) 66%); opacity:var(--haze-o,0); animation:drift 30s ease-in-out -8s infinite alternate-reverse}
@keyframes drift{to{transform:translate(5%,4%) scale(1.08)}}
.pane{position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:0}

/* ---------- Navigation ---------- */
.nav{position:fixed; z-index:50; top:0; left:0; right:0; display:flex; align-items:center; gap:clamp(14px,3vw,40px); padding:18px var(--gutter); font-family:var(--f-ui); transition:transform 1.2s var(--ease), background-color 1.2s ease, opacity 1.2s ease}
.nav.solid{background:color-mix(in srgb, var(--sky) 78%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.nav.away{transform:translateY(-110%)}
.nav.hush{opacity:.18}
.nav.hush:hover,.nav.hush:focus-within{opacity:1}
.brand{font-size:.8rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; text-decoration:none; margin-right:auto; white-space:nowrap}
.links{display:flex; gap:clamp(16px,2.4vw,34px)}
.links a{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); padding-block:6px; border-bottom:1px solid transparent; transition:color .8s ease, border-color .8s ease}
.links a:hover,.links a[aria-current="true"]{color:var(--ink); border-bottom-color:currentColor}
.presave{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; border:1px solid var(--lamp); color:var(--lamp); padding:9px 16px; white-space:nowrap; transition:background-color .8s ease}
.presave span{opacity:.6}
.presave:hover{background:rgba(227,201,142,.12)}
.menu-btn{display:none; background:none; border:0; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; padding:8px 0; cursor:pointer}
.menu{position:fixed; inset:0; z-index:49; background:color-mix(in srgb, var(--sky) 92%, black); display:flex; flex-direction:column; justify-content:center; padding:var(--gutter); animation:menuIn 1s var(--ease)}
.menu nav{display:grid; gap:10px}
.menu a{font-family:var(--f-display); font-style:italic; font-size:clamp(2.4rem,11vw,3.6rem); line-height:1.1; text-decoration:none}
.menu-foot{font-family:var(--f-ui); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin-top:40px}
@keyframes menuIn{from{opacity:0}}

.depth{position:fixed; z-index:40; right:clamp(10px,1.6vw,26px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--f-ui); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.depth span{writing-mode:vertical-rl}
.depth-line{display:block; width:1px; height:22vh; background:var(--line); position:relative; font-style:normal}
.depth-line b{position:absolute; left:-3px; top:calc(var(--depth,0) * 100%); width:7px; height:7px; border-radius:50%; background:var(--periwinkle); transform:translateY(-50%); box-shadow:0 0 12px var(--periwinkle)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-ui); font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:14px 22px; border:1px solid; cursor:pointer; background:transparent; transition:background-color .9s ease, color .9s ease}
.btn.lamp{border-color:var(--lamp); background:var(--lamp); color:#10262C}
.btn.lamp:hover{background:#EFD9A6}
.btn.ghost{border-color:rgba(236,232,244,.5); color:var(--ink)}
.btn.ghost:hover{background:rgba(236,232,244,.08)}
.btn.periwinkle{border-color:var(--periwinkle); background:var(--periwinkle); color:#16112E}
.btn.periwinkle:hover{background:#BDB6F0}

/* ---------- Hero: behind the glass ---------- */
.hero{position:relative; z-index:2; height:clamp(600px, 96svh, 1040px); overflow:hidden; background:var(--glass); cursor:crosshair; touch-action:pan-y}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 38%}
.hero canvas{position:absolute; inset:0; width:100%; height:100%}
.hero-scrim{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,42,51,.62) 0%, rgba(10,42,51,0) 20%, rgba(10,42,51,0) 45%, rgba(8,30,37,.9) 92%, #0A2A33 100%)}
.hero-copy{position:absolute; left:var(--gutter); right:var(--gutter); bottom:clamp(28px,5vw,64px); pointer-events:none}
.hero h1{margin:14px 0 0; font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(3.6rem,13vw,12.5rem); line-height:.84; letter-spacing:-.025em; color:#F3EFE6; text-shadow:0 4px 40px rgba(8,30,37,.55)}
.hero h1 span{display:block; font-family:var(--f-ui); font-style:normal; font-weight:300; font-size:clamp(.82rem,1.7vw,1.4rem); letter-spacing:.46em; text-transform:uppercase; margin:18px 0 0 .35em; color:var(--ink)}
.hero .eyebrow{color:var(--ink-soft)}
.hero-meta{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px 40px; margin-top:clamp(22px,3vw,40px)}
.hero-meta p{margin:0; font-family:var(--f-ui); font-weight:300; font-size:clamp(.95rem,1.3vw,1.1rem); line-height:1.5; color:var(--ink)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; pointer-events:auto}
.hero-hint{position:absolute; right:var(--gutter); top:clamp(84px,9vw,110px); margin:0; font-family:var(--f-ui); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(236,232,244,.72); pointer-events:none}
.hero-hint .coarse{display:none}
@media (pointer:coarse){ .hero-hint .fine{display:none} .hero-hint .coarse{display:inline} }

/* ---------- Confession ---------- */
.confession{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); gap:clamp(36px,7vw,120px); align-items:center; padding-block:clamp(90px,14vw,200px)}
.confession-text p{margin:0; font-family:var(--f-display); font-weight:400; line-height:1.14; text-wrap:balance}
.confession-text .c1{font-size:clamp(1.9rem,3.8vw,3.4rem)}
.confession-text .c2{font-size:clamp(1.9rem,3.8vw,3.4rem); margin-top:.7em}
.confession-text .c3{font-size:clamp(1.9rem,3.8vw,3.4rem); margin-top:.7em}
.confession-text em{color:var(--periwinkle)}
.confession-text .sig{font-family:var(--f-ui); font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); margin-top:2.4em}
.confession-text .sig::before{content:"— "}
.portrait{margin:0; display:grid; gap:14px}
.portrait-frame{position:relative; aspect-ratio:4/5; overflow:hidden; cursor:pointer; box-shadow:0 40px 70px -40px rgba(0,0,0,.8)}
.portrait-frame .face{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:opacity var(--breath) ease}
.portrait-frame .smile{opacity:0}
.portrait.swapped .smile{opacity:1}
.portrait.swapped .frown{opacity:0}
.portrait figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-family:var(--f-ui); font-size:.88rem; color:var(--ink-soft)}
.swap{background:none; border:0; border-bottom:1px solid var(--ink-faint); padding:2px 0; font-family:var(--f-ui); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer}
[data-tear]{position:relative}
canvas.tears,canvas.stains{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}
canvas.stains{mix-blend-mode:multiply}
canvas.tears{z-index:3}

/* ---------- Section heads ---------- */
.sec-head{display:grid; gap:12px; margin-bottom:clamp(40px,6vw,90px)}
.sec-head h2{margin:0; font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(2.4rem,5.6vw,5rem); line-height:1; letter-spacing:-.015em; text-wrap:balance}

/* ---------- Songs ---------- */
.songs{padding-block:clamp(40px,6vw,80px) clamp(90px,12vw,170px)}
.chapter{display:grid; grid-template-columns:minmax(220px,320px) minmax(0,1fr); gap:clamp(32px,6vw,110px); align-items:start}
.chapter + .chapter{margin-top:clamp(100px,14vw,200px)}
.chapter.flip{grid-template-columns:minmax(0,1fr) minmax(220px,320px)}
.chapter.flip .reel{order:2}
.reel{margin:0; position:relative; display:grid; gap:12px; position:sticky; top:96px}
.reel video{width:100%; aspect-ratio:9/16; object-fit:cover; background:#061B21; box-shadow:0 50px 80px -40px rgba(0,0,0,.85)}
.reel figcaption{font-family:var(--f-ui); font-size:.85rem; letter-spacing:.04em; color:var(--ink-soft)}
.sound{position:absolute; left:12px; top:12px; font-family:var(--f-ui); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; background:rgba(8,20,26,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(236,232,244,.4); padding:7px 11px; cursor:pointer}
.sound[aria-pressed="true"]{border-color:var(--lamp); color:var(--lamp)}
.numeral{margin:0; font-family:var(--f-display); font-size:clamp(4rem,8vw,7rem); line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(236,232,244,.42)}
.chapter h3{margin:18px 0 0; font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:1.02; letter-spacing:-.01em}
.track{margin:12px 0 0; font-family:var(--f-ui); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-variant-numeric:tabular-nums}
.essay{margin:clamp(28px,3vw,40px) 0 0; max-width:34em; font-size:clamp(1.14rem,1.45vw,1.32rem); line-height:1.72; font-weight:400; color:var(--ink-soft); text-wrap:pretty}
.essay p{margin:0}
.essay p + p{margin-top:1.1em}
.zh{font-family:var(--f-zh); font-weight:500; color:var(--ink); letter-spacing:.06em}
.lyric{margin:clamp(26px,3vw,38px) 0 0; padding-left:22px; border-left:1px solid var(--tear); font-family:var(--f-display); font-style:italic; font-size:clamp(1.3rem,1.9vw,1.6rem); line-height:1.55; color:#CFC9F5; max-width:30em}

.clip{margin-top:clamp(28px,3vw,40px); display:grid; grid-template-columns:52px minmax(0,1fr); gap:8px 16px; align-items:center; max-width:520px}
.play{width:52px; height:52px; border-radius:50%; border:1px solid var(--lamp); background:transparent; color:var(--lamp); cursor:pointer; display:grid; place-items:center; grid-row:span 2; transition:background-color .8s ease}
.play:hover{background:rgba(227,201,142,.12)}
.play svg{width:15px; height:15px; fill:currentColor}
.play .i-pause,.play[aria-pressed="true"] .i-play{display:none}
.play[aria-pressed="true"] .i-pause{display:block}
.clip-meta{display:flex; justify-content:space-between; gap:12px; font-family:var(--f-ui); font-size:.92rem}
.clip-time{color:var(--ink-faint); font-variant-numeric:tabular-nums}
.clip-wave{width:100%; height:34px}

/* ---------- Studio ---------- */
.studio{padding-block:clamp(40px,6vw,80px) clamp(90px,12vw,170px)}
.studio-rows{display:grid; gap:clamp(70px,10vw,140px)}
.row{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,6vw,96px); align-items:center}
.row.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.row.flip .shot{order:2}
.shot{margin:0; display:grid; gap:12px}
.shot-frame{position:relative; overflow:hidden; cursor:pointer; box-shadow:0 40px 70px -45px rgba(0,0,0,.85)}
.shot-frame img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.shot figcaption{font-family:var(--f-ui); font-size:.85rem; letter-spacing:.04em; color:var(--ink-soft)}
.note{margin:0; max-width:24em}
.note p{margin:0; font-family:var(--f-display); font-size:clamp(1.5rem,2.3vw,2.05rem); line-height:1.36; color:var(--ink); text-wrap:pretty}
.note p::before{content:"\201C"; display:block; font-size:2.2em; line-height:.5; height:.42em; color:var(--lamp)}
.letgo{margin:clamp(80px,11vw,160px) auto 0; max-width:30ch; text-align:center; font-family:var(--f-display); font-size:clamp(1.8rem,3.6vw,3.1rem); line-height:1.18; text-wrap:balance}
.letgo em{color:var(--periwinkle)}

/* ---------- Recital ---------- */
.recital{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(40px,7vw,120px); align-items:start; padding-block:clamp(90px,12vw,170px)}
.recital h2{margin:14px 0 0; font-family:var(--f-display); font-style:italic; font-weight:400; font-size:clamp(2.4rem,5.4vw,4.8rem); line-height:1.02; text-wrap:balance}
.details{margin:clamp(34px,4vw,56px) 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.details div{border-top:1px solid var(--line); padding-top:16px}
.details dt{font-family:var(--f-ui); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--periwinkle)}
.details dd{margin:8px 0 0; font-size:1.2rem; line-height:1.5}
.private{margin:28px 0 0; font-size:1.12rem; color:var(--ink-soft); max-width:40ch}
.invite{display:grid; gap:8px; padding:clamp(24px,3.4vw,44px); background:rgba(22,17,46,.42); border:1px solid rgba(163,155,230,.28); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.invite h3{margin:0 0 14px; font-family:var(--f-display); font-weight:400; font-size:clamp(1.6rem,2.4vw,2rem)}
.invite label{font-family:var(--f-ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px}
.invite label span{text-transform:none; letter-spacing:0; color:var(--ink-faint)}
.invite input,.invite textarea{width:100%; background:transparent; border:0; border-bottom:1px solid rgba(236,232,244,.35); padding:10px 0; font-family:var(--f-read); font-size:1.05rem; border-radius:0; transition:border-color .8s ease}
.invite textarea{resize:vertical}
.invite ::placeholder{color:var(--ink-faint)}
.invite input:focus,.invite textarea:focus{outline:none; border-bottom-color:var(--periwinkle)}
.invite input:focus-visible,.invite textarea:focus-visible{box-shadow:0 1px 0 var(--periwinkle)}
.invite .btn{margin-top:24px; justify-self:start}
.form-status{margin:10px 0 0; min-height:1.5em; font-size:.98rem; color:var(--ink)}
.form-status.err{color:#F0B4B4}

/* ---------- About ---------- */
.about{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(36px,6vw,100px); align-items:start; padding-block:clamp(60px,9vw,130px) clamp(90px,12vw,160px)}
.about-cover{width:100%; height:auto; aspect-ratio:1; object-fit:cover; opacity:.92; box-shadow:0 40px 70px -40px rgba(0,0,0,.9)}
.about h2{margin:12px 0 22px; font-family:var(--f-display); font-weight:400; font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1}
.about-copy > p{margin:0; max-width:34em; font-size:clamp(1.1rem,1.35vw,1.25rem); line-height:1.7; color:var(--ink-soft)}
.credits{margin:clamp(30px,4vw,48px) 0 0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 32px}
.credits div{border-top:1px solid var(--line); padding-top:12px}
.credits dt{font-family:var(--f-ui); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.credits dd{margin:4px 0 0; font-size:1.15rem}
.social{list-style:none; padding:0; margin:clamp(34px,4vw,50px) 0 0; display:flex; flex-wrap:wrap; gap:18px clamp(18px,3vw,34px)}
.social a{display:grid; justify-items:center; gap:10px; text-decoration:none; font-family:var(--f-ui); font-size:.82rem; letter-spacing:.06em; color:var(--ink-soft)}
.ico{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(163,155,230,.55); background:rgba(42,31,82,.35); color:var(--ink); transition:background-color .9s ease, color .9s ease, border-color .9s ease}
.ico svg{width:24px; height:24px; fill:currentColor}
.ico svg.stroke{fill:none; stroke:currentColor; stroke-width:1.8}
.ico svg.stroke .dot{fill:currentColor; stroke:none}
.social a:hover .ico,.social a:focus-visible .ico{background:var(--periwinkle); border-color:var(--periwinkle); color:#16112E}
.social a:hover{color:var(--ink)}

/* ---------- Ending: still water ---------- */
.ending{position:relative; z-index:2; padding:clamp(100px,14vw,200px) var(--gutter) 40px; text-align:center; overflow:hidden}
.ripples{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.surface{position:relative; display:grid; justify-items:center}
.phrase{margin:0; font-family:var(--f-zh); font-weight:300; font-size:clamp(2.2rem,7vw,5.6rem); letter-spacing:.16em; line-height:1.2; padding-left:.16em; color:var(--ink); text-shadow:0 0 38px rgba(163,155,230,.6)}
.waterline{display:block; width:min(80%,900px); height:1px; margin:clamp(10px,1.4vw,18px) 0; background:linear-gradient(90deg,transparent,rgba(217,164,91,.6),transparent); font-style:normal}
.reflection{transform:scaleY(-1); opacity:.42; filter:url(#water) blur(.4px); -webkit-mask-image:linear-gradient(0deg, transparent 5%, #000 95%); mask-image:linear-gradient(0deg, transparent 5%, #000 95%)}
.translation{margin:clamp(34px,4vw,56px) auto 0; font-family:var(--f-display); font-style:italic; font-size:clamp(1.2rem,2vw,1.6rem); color:var(--ink-soft); max-width:36ch}
.out{margin:clamp(60px,8vw,110px) 0 0; font-family:var(--f-ui); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft)}
.foot{margin-top:clamp(70px,9vw,120px); font-family:var(--f-ui); font-size:.7rem; letter-spacing:.08em; color:var(--ink-faint)}

/* ---------- Narrow screens ---------- */
@media (max-width: 900px){
  .links,.presave{display:none}
  .menu-btn{display:block}
  .depth{display:none}
  .hero-hint{left:var(--gutter); right:auto}
  .confession,.recital,.about{grid-template-columns:1fr}
  .portrait{max-width:420px}
  .chapter,.chapter.flip{grid-template-columns:1fr}
  .chapter.flip .reel{order:0}
  .reel{position:relative; top:0; max-width:320px}
  .row,.row.flip{grid-template-columns:1fr; gap:26px}
  .row.flip .shot{order:0}
  .details,.credits{grid-template-columns:1fr}
  .about-cover{max-width:280px}
}
@media (prefers-reduced-motion: reduce){
  .glow{animation:none}
  .nav,.portrait-frame .face{transition:none}
}
[hidden]{display:none !important}
[tabindex="-1"]:focus{outline:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.invite .btn:disabled{opacity:.6; cursor:wait}
.foot p{margin:0}
.foot .built{margin-top:8px}
.foot a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid rgba(163,155,230,.5)}
.foot a:hover{color:var(--ink); border-bottom-color:var(--periwinkle)}
/* Desktop: the long italic "f" in Confessions dips below the line, so give the subtitle room */
@media (min-width: 901px){
  .hero h1 span{margin-top:clamp(18px,4vw,76px)}
}
/* The closing phrase and its translation always sit on one line, scaled to the screen */
.phrase{white-space:nowrap; font-size:min(5.6rem, calc((100vw - 2 * var(--gutter)) / 12.2))}
.translation{white-space:nowrap; max-width:none; font-size:min(1.6rem, calc((100vw - 2 * var(--gutter)) / 27))}