/* Palanga v5 — Faz 2. One print, four inks, two voices.
   Every surface is a flat ink; tone comes from a halftone, never from transparency; no shadows; at most one tilted
   object per screen. The wordmark stands alone. Pink and blue live only inside the EP section.
   Type, three roles and no others:
   - display: Bricolage 800, narrowest (75%), capitals: the EP title, song titles, lyric headings, the footer's links;
   - label: Bricolage 650, 80%, capitals, tracked .08em, one size (13px, 12px on phones): every chip, menu, credit and
     button;
   - typewriter: Special Elite, only the band's own words (the story and the lyrics). */

/* ---------- tokens ---------- */
:root{
 --sari:#ebbf00;--murekkep:#15110f;--kirmizi:#ff2801;--kagit:#f1ebdf;   /* page inks */
 --pembe:#e81ca2;--mavi:#022bf9;                                          /* EP plates only */
 --tabela:'Bricolage Grotesque',system-ui,sans-serif;
 --daktilo:'Special Elite',ui-monospace,monospace;
 --kenar:3.3%;
 /* the one paper grain: multiplied at .18 on light inks, alive only during the intro */
 --gren:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .06 0 0 0 0 .05 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
 /* tone without transparency: ink dots on a 10 px grid, about a quarter covered */
 --tram:radial-gradient(circle,var(--murekkep) 2.8px,transparent 3.4px) 0 0/10px 10px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;background:var(--sari);color:var(--murekkep);transition:background-color .4s,color .4s}
body{font-family:var(--tabela);font-stretch:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* the focus ring is always the ink that stands out from the surface it is drawn on, never the element's own colour
   (a yellow-on-ink chip on the yellow page would otherwise draw a yellow ring on yellow) */
button:focus-visible,a:focus-visible{outline:3px solid var(--odak,var(--murekkep));outline-offset:4px}
.ch-typed,.ch-ep,.intro,.skip,.site-foot{--odak:var(--sari)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-smooth:not(.lenis-scrolling) iframe{pointer-events:auto}   /* the Spotify player never swallows a scroll in flight */
html.intro-lock,html.intro-lock body{overflow:hidden}
.ch{position:relative;overflow:clip}

/* the sign voice: narrow, capitals, open tracking */
.header nav a,.sub-head nav a,.hero-ep,.hero-dinle,.skip,.intro-credit,.ep-player-label,.song-num,.lineup-note,.lyrics-close,.lyrics-body .eyebrow,
.mq-track{font-family:var(--tabela);font-weight:650;font-stretch:80%;text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
/* sign-voice chips: ink on the page, red when touched */
.header nav a,.sub-head nav a,.hero-dinle{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;background:var(--murekkep);color:var(--sari);transition:background-color .15s,color .15s}
.header nav a:hover,.sub-head nav a:hover{background:var(--kirmizi);color:var(--murekkep)}
/* the one red chip: the hero's way to the music; it turns ink when touched */
.hero-dinle{gap:7px;background:var(--kirmizi);color:var(--murekkep)}.hero-dinle:hover{background:var(--murekkep);color:var(--sari)}
/* paper slips: the band's typewriter, on paper */
.lineup-head{background:var(--kagit);color:var(--murekkep)}

/* ---------- hero: a poster — the wordmark runs off both sides and the bottom, the three-headed dog stands on it ---------- */
/* The wordmark's width follows the screen's width only, so the name never loses a letter: on a wide screen it runs 3%
   off each side, on a tall one 2%. Its bottom 11% sinks below the fold, into the black of the story that follows. The
   dog stands on it, small beside the name, its feet cut out of the letters by the yellow gap; the release line and the
   one red chip, Dinle, stand beside its right head (above it on a tall screen). --bw is the dog's box
   (amblem-hero.js): the dog and the gap around it. */
.hero{position:relative;height:100svh;min-height:700px;overflow:hidden;isolation:isolate;
 --wmw:106vw;--wmh:calc(var(--wmw) / 3.426);--sink:calc(var(--wmh) * .74);
 --th:min(calc(100svh - var(--sink) - 96px),calc(100vw * .32));--bw:calc(var(--th) * 1.2054)}
.hero::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background:var(--gren)}
.header{position:absolute;inset:30px var(--kenar) auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header nav{display:flex;align-items:center;gap:12px;font-size:13px}
/* replay: the icon alone, a square chip like the menu's (ink, yellow, red when touched); it turns a little when touched */
.header .replay{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;cursor:pointer;background:var(--murekkep);color:var(--sari);transition:background-color .15s,color .15s}
.header .replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;transition:rotate .35s cubic-bezier(.2,.7,.2,1)}
.header .replay:hover svg{rotate:-200deg}
.header .replay:hover{background:var(--kirmizi);color:var(--murekkep)}
.title-wrap{position:absolute;left:50%;bottom:calc(var(--wmh) * -.11);z-index:1;width:var(--wmw);translate:-50% 0}
h1{display:block;margin:0;padding:0;line-height:0}
.wordmark{display:block;width:100%;height:auto;overflow:visible;fill:var(--murekkep)}
/* the wordmark is printed with the emblem's ink: its flecks and scratches, a worn edge and a broken pale line inside it
   (veri/wordmark_doku.py). The mask sits on each letter, so it travels with the letter when it lifts. site.js adds .doku
   once the texture has loaded; until then the letters are flat ink. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.doku .wordmark .lt{mask:url(#doku)}
.band{position:absolute;left:50%;bottom:var(--sink);z-index:3;width:var(--bw);height:var(--th);margin:0;overflow:hidden;pointer-events:none;will-change:transform;transform:translateX(-50%)}
/* the dog, printed red, with the yellow gap that cuts it out of the letters (veri/amblem.py): the first frame, and all
   there is without JavaScript. Once the canvas has drawn, it takes over and the dog can be hovered and clicked. */
.band img,.foot-uclu img,.amblem-cv{display:block;width:100%;height:100%}
/* the trio's three plates lie on one sheet; with JavaScript they are laid by site.js, and the whole print below goes */
.foot-uclu .uk{position:absolute;inset:0;mix-blend-mode:normal}
.js .foot-uclu .uk{visibility:hidden}.foot-uclu.basildi .uk-tam{visibility:hidden}
.amblem-cv{position:absolute;inset:0}
.band.live{pointer-events:auto}.band.live img{visibility:hidden}
.hero-alt{position:absolute;left:calc(50% + var(--bw) * .5 + 28px);bottom:calc(var(--sink) + var(--th) * .45);z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:calc(50vw - var(--bw) * .5 - 28px - var(--kenar))}
.hero-ep{margin:0;font-size:13px;color:var(--murekkep)}
.hero-dinle{font-size:13px}
.js .chrome,.js h1 .lt,.js .band{visibility:hidden}
@media(min-width:1700px){.hero{min-height:850px}}
/* tall screens (tablets upright, phones): the dog as large as the width allows, the release line and Dinle above it */
@media(max-aspect-ratio:1/1){
 .hero{min-height:0;--wmw:104vw;--th:min(calc(100svh - var(--sink) - 230px),calc(96vw / 1.2054));
  height:min(100svh,calc(var(--sink) + var(--th) + 190px))}   /* as tall as its content: no empty yellow above on a phone */
 .hero-alt{left:50%;translate:-50% 0;bottom:calc(var(--sink) + var(--th) + 20px);align-items:center;max-width:none;width:max-content}
}

/* ---------- the wait before the intro ----------
   From the first paint until the descent can start (fonts and the street's data, about half a second), the dog,
   stamped on the ink the descent opens on; on the page's yellow for a returning visitor, who gets the hero instead.
   It goes the moment the intro or the hero takes over (app.js), and in any case after six seconds. */
.yukle-ekran{display:none}
.yukle .yukle-ekran{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--murekkep);animation:yukle-son 0s 6s forwards}
.yukle-sari .yukle-ekran{background:var(--sari)}
.yukle-kopek{width:clamp(96px,11vw,150px);aspect-ratio:480/396;background:var(--sari);
 -webkit-mask:url(assets/amblem.webp) center/contain no-repeat;mask:url(assets/amblem.webp) center/contain no-repeat}
.yukle-sari .yukle-kopek{background:var(--murekkep)}
@media(prefers-reduced-motion:no-preference){
 .yukle-kopek{animation:yukle-bas .36s steps(3) both,yukle-adim .5s steps(2) .5s infinite}
}
@keyframes yukle-bas{from{scale:.9;translate:4px -3px}to{scale:1;translate:0 0}}   /* pressed on, off register to true */
@keyframes yukle-adim{50%{translate:0 -4%}}   /* then it keeps stepping, on twos, while it waits */
@keyframes yukle-son{to{visibility:hidden}}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:20;visibility:hidden;pointer-events:none;background:var(--murekkep)}
.intro canvas{display:block;width:100%;height:100%}
/* same grain as the hero, so the last yellow frame of the intro is the page's yellow */
.intro::after{content:'';position:absolute;inset:-160px;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background:var(--gren);animation:grain .6s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-37px,61px)}40%{transform:translate(83px,-24px)}60%{transform:translate(-71px,-90px)}80%{transform:translate(29px,113px)}}
.intro-credit{position:absolute;bottom:28px;right:32px;color:var(--murekkep);font-size:11px}
.skip{background:var(--murekkep);color:var(--sari)}
.skip{position:fixed;top:30px;right:var(--kenar);z-index:22;visibility:hidden;padding:7px 12px 6px;font-size:13px}
.skip:hover{background:var(--kirmizi);color:var(--murekkep)}
/* the height the camera is at, read off the street as it goes down */


/* ---------- 01 story: the band's typed page on a black desk, the three cut out together beside it ---------- */
.ch-typed{height:100svh;min-height:600px;padding:0 var(--kenar);overflow:hidden;background:var(--murekkep)}
.desk{position:relative;height:100%;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}
/* the story's one tilted object; it sits 12svh down, the band stand on the bottom edge */
.sheet{position:relative;z-index:1;overflow:hidden;margin:12svh 0 0;padding:clamp(28px,6vh,64px) clamp(26px,3.6vw,60px);rotate:-1.2deg;background:var(--kagit);color:var(--murekkep)}
.typed .stanza{margin:0 0 1.35em;font-family:var(--daktilo);font-size:clamp(14px,min(1.22vw,2.5vh),22px);line-height:1.55;text-shadow:0 0 .5px rgba(20,18,16,.55)}
.typed .stanza:last-child{margin-bottom:0}
/* every line of the band's text is a block: a long line that wraps hangs under itself, so its end is always visible */
.ln{display:block;padding-left:1.6em;text-indent:-1.6em}
/* the band's stamp, the three-headed dog, pressed at the sheet's foot once the page is typed, its legs off the edge;
   kept clear of the photo, which comes 6vw over the sheet, so all three heads always show */
.muhur{position:absolute;right:calc(6vw + 28px);bottom:calc(clamp(78px,7.4vw,128px) * -.36);display:block;width:clamp(78px,7.4vw,128px);height:auto;margin:0;mix-blend-mode:multiply}   /* half pressed off the sheet's foot: its legs go past the edge */
.js .muhur{visibility:hidden}.typed.done~.muhur,.no-type .muhur{visibility:visible}
.typed .ch{visibility:hidden}.typed.done .ch,.no-type .typed .ch{visibility:visible}
.figs{position:relative;z-index:2;align-self:end;margin:0 -3.3vw 0 -6vw}
.fig{display:block;width:100%;height:auto}

/* ---------- 02 EP: the cover's own inks (the only place pink and blue appear) ----------
   Nothing fades: the field is erased down to the cover's square, the cover is printed on it, the songs are set line by line. */
.ch-ep{background:var(--murekkep);color:var(--kagit)}
.ch-pin{position:relative;overflow:hidden}
.grad-canvas,.sivi-canvas{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}   /* sivi.js: the wide-screen fluid, over grad.js's field */
.grad-fallback{background:var(--kirmizi)}
.erase{z-index:1;margin:0;pointer-events:none;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
 font-family:var(--tabela);font-weight:800;font-stretch:75%;line-height:.69;letter-spacing:-.005em;text-align:center;
 transform:scaleX(.73);margin-inline:-18.5%}   /* a poster face: the narrowest Bricolage squeezed further, two lines set solid (cap height .66em);
   the box is laid out 1/.73 as wide, so once squeezed it is the width it sits in */
.er{display:inline-block;transform-origin:50% 100%}
.erase{column-gap:.34em}   /* a clear word space even after the .73 squeeze */.erase .w{display:inline-flex;white-space:nowrap}.erase .br{flex-basis:100%;height:0}   /* two lines, broken only there */
/* each letter is a sheet of cream paper, a little darker towards its foot, edged in a thin dark red and lifted off the
   field by its shadow: legible on every ink of the liquid */
.erase .er{background:linear-gradient(#fffaf0 8%,var(--kagit) 45%,#cfc3ad 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 padding:.2em 0 .24em;margin:-.2em 0 -.24em}   /* the box covers the accents too, so the paper does */
/* the edge is drawn round the letter's outside (a text stroke would also trace the variable font's overlapping inner
   contours), then the shadow */
.erase .w{filter:drop-shadow(.006em 0 0 #5c1407) drop-shadow(-.006em 0 0 #5c1407) drop-shadow(0 .006em 0 #5c1407) drop-shadow(0 -.006em 0 #5c1407)
 drop-shadow(0 .014em 0 #3f0d04) drop-shadow(0 .04em .05em rgb(21 17 15/.45))}
.ep-cover{z-index:2;aspect-ratio:1;margin:0}
.ep-cover{position:relative;background:var(--kagit)}
/* five plates on one sheet of paper, printed 1→5 by site.js: yellow, pink, blue, red, then the black line */
.kalip{position:absolute;inset:0;display:block;width:100%;height:100%}
.ep-side{z-index:3}
.ep-meta{display:flex;gap:18px;margin:0 0 22px;font-family:var(--tabela);font-weight:650;font-stretch:80%;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sari)}
.tracks{list-style:none;margin:0;padding:0;counter-reset:t}
.track{display:grid;grid-template-columns:3.2ch minmax(0,1fr) auto;align-items:baseline;gap:12px;padding:14px 0 13px;border-top:1px solid var(--kagit)}
.tracks li:last-child .track{border-bottom:1px solid var(--kagit)}
.t-n,.t-d{font-family:var(--tabela);font-weight:650;font-stretch:80%;font-size:13px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.t-t{font-family:var(--tabela);font-weight:800;font-stretch:75%;font-size:clamp(24px,2.1vw,34px);line-height:1;text-transform:uppercase}
.track:hover .t-t,.track:focus-visible .t-t{color:var(--sari)}
.ep-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ep-play,.ep-open{display:inline-flex;align-items:center;gap:8px;padding:11px 14px 10px;font-family:var(--tabela);font-weight:650;font-stretch:80%;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:background-color .15s,color .15s}
.ep-play{background:var(--kirmizi);color:var(--murekkep)}
.ep-play:hover{background:var(--kagit)}
.ep-open{box-shadow:inset 0 0 0 1px var(--kagit);color:var(--kagit)}
.ep-open:hover{background:var(--kagit);color:var(--murekkep)}
/* the player replaces the list in the same box once asked for; Spotify's own frame, nothing around it */
.ep-embed{display:block;width:100%;border:0}
.ep-side.playing .tracks,.ep-side.playing .ep-play{display:none}

/* wide screens: one screen, pinned, and the screen is the cover: its box stands on the bottom edge, as tall as fits
   while its right edge stays at 54%, and its flat red runs on past the box to every edge (grad.js). The songs are
   set on that red beside it, in ink. */
@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
 .ch-ep .ch-pin{height:100svh}
 .erase{position:absolute;inset:0;padding:0 3%;font-size:min(50svh,46vw)}   /* the two lines fill about 86% of the screen's height */
 .ch-ep .ch-pin{--cs:min(96svh,60vw)}
 .ep-cover{position:absolute;left:calc(54vw - var(--cs));bottom:0;width:var(--cs);background:var(--kirmizi)}
 .ep-side{color:var(--murekkep)}
 .ep-side .track{border-color:var(--murekkep)}
 .ep-side .track:hover .t-t,.ep-side .track:focus-visible .t-t{color:var(--kagit)}
 .ep-side .ep-play{background:var(--murekkep);color:var(--kirmizi)}
 .ep-side .ep-play:hover{background:var(--kagit);color:var(--murekkep)}
 .ep-side .ep-open{box-shadow:inset 0 0 0 1px var(--murekkep);color:var(--murekkep)}
 .ep-side .ep-open:hover{background:var(--murekkep);color:var(--kirmizi)}
 .ch-ep{--odak:var(--murekkep)}
 .ep-side{position:absolute;left:56%;right:var(--kenar);top:50%;translate:0 -50%}
}
/* narrower screens and reduced motion: no pin, one thing after another and nothing overlapping: the title on the black,
   the cover's square (the liquid poured into it settles into the cover as it scrolls up, site.js), then the songs */
@media(max-width:1100px),(prefers-reduced-motion:reduce){
 .ch-ep .ch-pin{height:auto;padding:clamp(64px,10vh,112px) 0 clamp(40px,6vh,72px)}
 .ch-ep .ch-pin>.grad-canvas{display:none}   /* only drawn inside the cover's square */
 .ep-cover .grad-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}
 .erase{position:relative;padding:0 5%;font-size:min(38vw,24svh)}
 .ep-cover{position:relative;width:min(88vw,620px);margin:clamp(28px,5vh,48px) auto 0}
 .ep-side{width:min(84vw,620px);margin:44px auto 0}
}
/* phones and tablets: no big title, the cover opens the chapter (the heading stays for screen readers) */
@media(max-width:1100px){
 .erase{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .ch-ep .ch-pin{padding:clamp(20px,3vh,32px) 0 0}   /* the cover follows the photo closely; the footer's own top room parts it from the EP */
 .ep-cover{margin-top:0}
}

/* ---------- footer: the closing credits ---------- */
/* Where the hero is a centred poster that plays, the end is still and lopsided: the three stand whole on the left,
   feet on the page's bottom edge, printed from their photo in three plates (veri/uclu_baski.py) that come down one by
   one off register and land true (site.js); the pointer pulls them apart again. The right half is
   the links large and stacked, and the signature at the foot.
   Yellow on ink. The grain lifts the black a little. */
.site-foot{--zemin:clamp(28px,5vh,48px);   /* the ground line: the trio's feet and the signature's foot stand on it */
 --uh:min(calc((60vw - var(--kenar) * 2) * 982 / 987),calc(100svh - 48px - var(--zemin)));   /* the trio's height */
 padding-bottom:var(--zemin);
 position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
 min-height:100svh;background:var(--murekkep);color:var(--sari)}
.site-foot::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.1;mix-blend-mode:screen;background:var(--gren)}
.foot-uclu{align-self:end;justify-self:center;height:var(--uh);aspect-ratio:987/982;margin:48px 0 0;position:relative;pointer-events:none}
.foot-son{align-self:end;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(28px,5vh,48px);padding:0 var(--kenar) 0 0}   /* on the ground line */
.foot-meta{font-family:var(--tabela);font-weight:650;font-stretch:80%;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.site-foot .foot-links a{display:inline-flex;align-items:flex-start;gap:.12em;min-height:0;padding:0;background:none;color:var(--sari);
 font-size:clamp(36px,3.8vw,72px);font-weight:800;font-stretch:75%;letter-spacing:.01em;line-height:1;text-transform:uppercase;transition:color .15s}
.site-foot .foot-links a:hover{background:none;color:var(--kirmizi)}
/* the arrows are drawn, as heavy as the letters, and hung from the cap line */
.foot-links .ok{width:.5em;height:.5em;margin-top:.1em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:square;stroke-linejoin:miter}
/* touched, a link is printed as the trio is: a pink and a yellow pull off register, pulled true on twos */
.foot-links .fl{position:relative;isolation:isolate}
.foot-links .fl::before,.foot-links .fl::after{content:attr(data-t);position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none}
.foot-links .fl::before{color:var(--pembe)}.foot-links .fl::after{color:var(--sari)}
@media(prefers-reduced-motion:no-preference){
 .foot-links a:hover .fl::before{animation:kayik-p .5s steps(4) forwards}
 .foot-links a:hover .fl::after{animation:kayik-s .5s steps(4) forwards}
}
@keyframes kayik-p{0%{opacity:1;translate:-.06em .04em}100%{opacity:1;translate:-.025em .015em}}
@keyframes kayik-s{0%{opacity:1;translate:.07em -.05em}100%{opacity:1;translate:.03em -.02em}}
.foot-meta{display:flex;align-items:center;gap:14px}
/* © and the wordmark itself, small: flat yellow (its ink texture would only be noise at this size) */
.telif{display:inline-flex;align-items:center;gap:8px;font-size:20px;line-height:1}
.meta-wm{width:auto;height:22px;fill:var(--sari)}.doku .meta-wm .lt{mask:none}
.foot-meta .sig{width:44px;height:44px;color:var(--murekkep)}   /* tigerweirdo's signature creature (signature.js) */
/* on the footer's black its ink legs would vanish: a thin yellow edge drawn round the whole creature */
.site-foot .sig svg{filter:drop-shadow(1px 0 0 var(--sari)) drop-shadow(-1px 0 0 var(--sari)) drop-shadow(0 1px 0 var(--sari)) drop-shadow(0 -1px 0 var(--sari))}
/* tall screens and phones: the words first, the three last, standing on the bottom edge across the width */
@media(max-aspect-ratio:1/1),(max-width:760px){
 .site-foot{grid-template-columns:minmax(0,1fr);min-height:0}
 .foot-son{order:-1;padding:clamp(72px,11vh,104px) var(--kenar) 8px}
 .foot-meta{margin-top:0}
 .foot-uclu{height:auto;width:min(92vw,620px);margin-top:32px}
}

/* ---------- lyrics page: a flat red sheet, the songs as a list of signs ---------- */
.page-lyrics{background:var(--kirmizi)}
.sub-head{position:absolute;z-index:5;inset:26px var(--kenar) auto;display:flex;justify-content:space-between;align-items:center;gap:24px}
.sub-head nav{display:flex;gap:12px;font-size:13px}
.sub-logo{display:block;width:clamp(120px,12vw,170px)}
.ch-songs{position:relative;isolation:isolate;min-height:min(100svh,900px);padding:clamp(80px,14vh,160px) var(--kenar) clamp(60px,10vh,120px);background:var(--kirmizi);color:var(--murekkep)}
.ch-songs::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background:var(--gren)}
/* the lyrics page's one tilted object: the typed "Sözler" slip */
.lineup-head{position:relative;display:inline-block;margin:0 0 clamp(20px,4vh,40px);padding:7px 11px 5px;font-family:var(--tabela);font-weight:800;font-stretch:75%;font-size:28px;line-height:1;text-transform:uppercase;rotate:-1.5deg}
.lineup{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start}
/* numbers in a fixed column on the left, the titles hung from one edge */
.ch-songs{--nw:clamp(34px,4.2vw,72px)}   /* the numbers' column; the note under the list starts where the titles do */
.song-row{all:unset;cursor:pointer;display:grid;grid-template-columns:var(--nw) auto;align-items:start;padding:.04em 0;--ts:clamp(48px,8.4vw,156px)}
.song-row:focus-visible{outline:3px solid var(--murekkep);outline-offset:6px}
.song-title{font-family:var(--tabela);font-weight:800;font-stretch:75%;font-size:var(--ts);line-height:.92;letter-spacing:0;text-transform:uppercase;transition:color .15s}
/* touching a song prints it in paper instead of ink: a change of ink, never a fade */
.song-row:hover .song-title,.song-row:focus-visible .song-title{color:var(--kagit)}
.song-num{margin-top:calc(var(--ts) * .14);font-size:13px}
.lineup-note{margin:clamp(28px,5vh,56px) 0 0 var(--nw);font-size:13px}
.lyrics-panel{position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(560px,100vw);padding:clamp(28px,5vh,56px) clamp(24px,3vw,48px);overflow:auto;overscroll-behavior:contain;
 background:var(--kagit);color:var(--murekkep);transform:translateX(102%);transition:transform .7s cubic-bezier(.7,0,.2,1)}
.lyrics-panel.open{transform:none}
/* the scrim is a halftone of ink, not a dimmed layer */
.lyrics-scrim{position:fixed;inset:0;z-index:55;background:var(--tram);opacity:0;pointer-events:none;transition:opacity .3s steps(3)}
.lyrics-scrim.open{opacity:1;pointer-events:auto}
.lyrics-close{all:unset;cursor:pointer;position:sticky;top:0;float:right;padding:8px 12px 7px;font-family:var(--tabela);font-weight:650;font-stretch:80%;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:var(--murekkep);color:var(--kagit)}
.lyrics-close:hover{background:var(--kirmizi);color:var(--murekkep)}
.lyrics-body .eyebrow{font-size:12px}
.lyrics-body h3{margin:12px 0 28px;font-family:var(--tabela);font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:clamp(44px,4.4vw,72px);line-height:.92;color:var(--murekkep)}
.lyrics-body .stanza{margin:0 0 22px;font-family:var(--daktilo);font-size:18px;line-height:1.55;text-shadow:0 0 .5px rgba(20,18,16,.55)}
/* chorus and bridge are set apart by an indent and a rule; red is too light for running text on paper (3.18:1) */
.lyrics-body .stanza.chorus{padding-left:1.1em;border-left:3px solid var(--kirmizi)}
.lyrics-body .stanza.bridge{padding-left:1.1em;border-left:3px solid var(--murekkep)}

/* ---------- tablet and phone ---------- */
@media(max-width:1100px){
 .ch-typed{height:auto;min-height:0;padding:72px 6% 0}
 .desk{display:flex;flex-direction:column;gap:28px;max-width:640px}
 .sheet{margin:0}
 .typed .stanza{font-size:clamp(14px,2.3vw,19px)}
 .muhur{right:clamp(26px,3.6vw,60px)}
 .sheet{padding-bottom:calc(clamp(28px,6vh,64px) + clamp(78px,7.4vw,128px) * .75)}   /* room for the stamp's heads under the last line */
 .figs{align-self:stretch;margin:0 -6vw}
}
@media(max-width:760px){
 :root{--kenar:max(16px,6%)}
 .header{inset:20px var(--kenar) auto;gap:14px}
 .header nav{gap:8px}.header nav a,.hero-ep,.hero-dinle{font-size:12px}.header nav a{padding:6px 8px 5px}
 .skip{top:20px;right:var(--kenar)}
 .intro-credit{bottom:46px;left:32px;right:auto}
 .ch-typed{padding:56px var(--kenar) 0}
 .sheet{padding:28px 20px}
 .typed .stanza{font-size:clamp(14px,4vw,17px)}
 .t-t{font-size:22px}
 .sub-head{inset:20px var(--kenar) auto}.sub-head nav{gap:8px;font-size:12px}
 .ep-play,.ep-open,.foot-meta,.ep-meta,.t-n,.t-d{font-size:12px}
 .ch-songs{padding:72px var(--kenar) 56px;min-height:0}.song-row{--ts:clamp(36px,11.5vw,68px)}
 .lyrics-body .stanza{font-size:16px}
}
/* touch screens: every chip at least 40px tall, the replay square to match */
@media(pointer:coarse){
 .header nav a,.sub-head nav a,.hero-dinle{min-height:40px}
 .header .replay{width:40px;height:40px}
 .ep-play,.ep-open{min-height:44px}
}
/* the narrowest phones: the menu's chips a little tighter, so all three fit beside the replay slip */
@media(max-width:360px){
 .header{gap:8px}.header nav{gap:4px}.header nav a{font-size:11px;padding:6px 6px 5px;letter-spacing:.05em}
}
@media(max-width:380px){.header nav{gap:6px}.header{left:5%;right:5%}}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
 .intro::after{animation:none}
}