/* =============================================================================
   Ev3u — stylesheet
   Tokens and measurements come from the Figma variables / node properties:
     page #FC961A · soft #F1BE81 · brown #3C1F00 · button brown #C56A0B
     input #FFD6A5 · Josefin Sans (headings) · Inter (body)
   ========================================================================== */

:root{
  --surface-page:#FC961A;
  --surface-inverse:#000000;
  --soft:#F1BE81;
  --text-primary:#000000;
  --text-inverse:#FFFFFF;
  --brown:#3C1F00;
  --brown-btn:#C56A0B;
  --peach:#FFD6A5;
  --heading:'Josefin Sans',sans-serif;
  --body:'Inter',sans-serif;
  --stage-width:1512px;
  --page:200px;           /* left/right content margin from the design */
  --radius-card:26px;
  /* The layout is authored at a fixed 1512px width (the Figma frame). This
     factor shrinks the whole stage to the viewport, so nothing is ever cropped
     and every proportion stays exactly as designed. It is set from app.js. */
  --scale:1;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:#0d0d0d;}
body{
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  color:var(--text-primary);
  background:#0d0d0d;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
[hidden]{display:none !important;}

/* =========================== stage ======================================== */
/* Everything is authored in the Figma frame's own 1512px coordinate system and
   then scaled to fit the window. At 1512px and wider the factor is 1, so the
   desktop rendering is pixel-exact; narrower windows shrink uniformly instead
   of cropping. The wrapper is given the scaled height from app.js because a
   transformed box does not reserve its own space in the document. */
.stage-wrap{position:relative;width:100%;}
.stage{
  position:absolute;left:50%;top:0;
  width:var(--stage-width);
  min-height:100vh;
  /* Stands in for the header, which is now fixed outside the stage. */
  padding-top:255px;
  background:var(--surface-page);
  transform-origin:top center;
  transform:translateX(-50%) scale(var(--scale));
}
.view{position:relative;}

/* =========================== header ======================================= */
/* The header is fixed so it always paints above the page, and it is scaled by
   the same factor as the stage so its geometry matches the design. Its layout
   box stays 255px tall in design pixels; the painted area shrinks to 210px
   ("Variant 2") while scrolling. */
.site-header{
  position:fixed;
  top:0;left:50%;
  width:var(--stage-width);
  height:255px;
  z-index:120;
  /* The 255px layout box is only a placeholder: without this, the transparent
     area below the painted bar would still swallow clicks meant for the page. */
  pointer-events:none;
  transform-origin:top center;
  transform:translate(-50%,var(--header-y,0px)) scale(var(--scale));
  transition:transform .3s ease;
}
.site-header__logo,.site-header__menu{pointer-events:auto;}
.site-header__bg{
  position:absolute;left:0;top:0;width:100%;height:255px;
  background:linear-gradient(180deg,#FC961A 0%,#FC961A 83.045%,rgba(252,150,26,0) 93.079%);
  transition:height .3s ease,background .3s ease,border-radius .3s ease,box-shadow .3s ease;
}
.site-header__logo{
  position:absolute;left:660px;top:24px;width:202px;height:103px;
  transition:left .28s ease,top .28s ease,width .28s ease,height .28s ease;
}
.site-header__logo img{width:100%;height:100%;object-fit:contain;object-position:bottom;}
.site-header__menu{
  position:absolute;left:var(--menu-left,336px);top:151px;width:var(--menu-w,840px);height:68px;
  display:flex;align-items:center;justify-content:space-between;
  transition:top .28s ease;
}
/* Each label carries its designed width (set inline). Wrapping is allowed on
   purpose: the UA "Скринька пропозицій" is a 155px box and breaks over 2 lines. */
.menu-btn{
  flex:0 0 auto;height:68px;min-width:0;max-width:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:400;font-size:20px;line-height:1.15;
  color:var(--text-primary);text-transform:uppercase;text-align:center;
}
/* A label never grows past the menu box: it wraps (the UA "Скринька
   пропозицій" is designed over two lines) and a single unbreakable word is
   broken rather than pushing the header out of its 1512px stage. */
.menu-btn__inner{display:block;max-width:100%;overflow-wrap:anywhere;}
.menu-btn__w{display:inline;}
/* Hovering underlines the words on the label's LAST line. That makes an
   ordinary one-line label underline completely, while a wrapped label
   ("Скринька / пропозицій") only underlines its lower word — which is how the
   Figma header draws it. The button for the page you are already on is never
   underlined. */
.menu-btn:hover .menu-btn__w.is-last-line,
.menu-btn:focus-visible .menu-btn__w.is-last-line{text-decoration:underline;text-underline-offset:6px;}

/* Folded (scrolled) state: no gradient and no rounded corners. It becomes a
   compact solid bar that ends in a soft shadow, so it reads as a bar floating
   above the content instead of a full-height orange wash across the page. */
.site-header.is-scrolled .site-header__bg{
  height:112px;
  background:var(--surface-page);
  box-shadow:0 16px 36px rgba(60,31,0,.20);
}
.site-header.is-scrolled .site-header__logo{left:60px;top:29px;width:96px;height:54px;}
.site-header.is-scrolled .site-header__menu{
  top:22px;width:var(--menu-w-scrolled,var(--menu-w,840px));
}
body.header-hidden{--header-y:-255px;}

/* =========================== up button =================================== */
/* Anchored to the right edge of the stage (200px in from it, like the design)
   rather than to an absolute left offset, so it can never create sideways
   overflow on narrow screens. */
.up-btn{
  position:fixed;
  right:calc(max((100vw - 1512px) / 2, 0px) + 200px * var(--scale));
  bottom:calc(40px * var(--scale));z-index:130;
  width:calc(90px * var(--scale));height:calc(90px * var(--scale));
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
.up-btn.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.up-btn svg,.up-btn img{width:100%;height:100%;}

/* =========================== footer ====================================== */
.site-footer{
  position:relative;width:100%;height:535px;
  background:var(--surface-inverse);
}
.site-footer__logo{position:absolute;left:199px;top:83px;width:192px;height:103px;object-fit:contain;object-position:bottom;}
.site-footer__nav a,.site-footer__nav span{position:absolute;white-space:nowrap;}
.footer-link{
  font-family:var(--heading);font-weight:500;font-size:20px;line-height:1;
  color:var(--text-inverse);text-transform:uppercase;letter-spacing:4px;
}
.footer-link:hover{text-decoration:underline;text-underline-offset:4px;}
.footer-soon{
  position:absolute;font-family:var(--body);font-weight:500;font-size:15px;
  letter-spacing:3px;color:rgba(255,255,255,.7);
}
.footer-lang{
  position:absolute;font-family:var(--heading);font-weight:500;font-size:20px;line-height:1;
  color:var(--text-inverse);text-transform:uppercase;letter-spacing:4px;text-align:center;
}
.footer-lang--active{text-decoration:underline;text-underline-offset:4px;}
.footer-globe{position:absolute;left:1221px;top:241px;width:35px;height:35px;}
.site-footer__socials{position:absolute;left:1032px;top:83px;width:252px;height:60px;}
.site-footer__socials a{position:absolute;display:block;}
.site-footer__socials .s-yt{left:0;top:0;width:60px;height:60px;}
.site-footer__socials .s-tt{left:101px;top:1px;width:50px;height:58px;}
.site-footer__socials .s-dc{left:192px;top:8px;width:60px;height:45px;}
.site-footer__socials svg,.site-footer__socials img{width:100%;height:100%;object-fit:contain;}
.site-footer__copyright{
  position:absolute;left:461px;top:446px;width:594px;
  font-family:var(--body);font-weight:500;font-size:15px;line-height:1.15;
  color:rgba(255,255,255,.5);text-align:center;white-space:pre-line;
}

/* =========================== generic bits ================================ */
.display{
  font-family:var(--heading);font-weight:700;font-size:64px;line-height:1;
  text-transform:uppercase;
}
.section-title{font-family:var(--heading);font-weight:700;font-size:32px;line-height:1;text-transform:uppercase;}
.doodle{position:absolute;pointer-events:none;object-fit:contain;}

/* search / category bar */
.search-bar{
  position:relative;width:1112px;height:67px;
  background:var(--soft);border-radius:var(--radius-card);
  /* A single flow instead of fixed positions: the category chip takes exactly
     the room its label needs (up to a cap), then the field and the icon follow.
     A long category name ("Ukrainian Song Marathon") therefore shortens with an
     ellipsis inside its own chip instead of overflowing into the field. */
  display:flex;align-items:center;
  padding:0 16px 0 18px;
  gap:0;
}
.search-bar__category{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  height:67px;max-width:380px;min-width:0;
  margin:0;padding:0;text-align:left;
}
.search-bar__category-label{
  flex:0 1 auto;min-width:0;
  font-family:var(--heading);font-weight:700;font-size:20px;line-height:1.6;
  text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-bar__category svg,.search-bar__category img{
  flex:0 0 auto;width:26px;height:16px;
}
.search-bar__input{
  flex:1 1 auto;min-width:0;height:67px;margin-left:20px;
  background:none;border:0;outline:none;
  font-family:var(--heading);font-style:italic;font-weight:400;font-size:20px;
  text-transform:uppercase;color:rgba(60,31,0,.7);
  overflow:hidden;text-overflow:ellipsis;
}
.search-bar__input::placeholder{color:rgba(60,31,0,.7);}
.search-bar__icon{
  flex:0 0 auto;width:45px;height:45px;margin-left:16px;cursor:pointer;
}

/* cover / video card */
/* Discography cards. The thumbnail fills the whole 546x348 box — no black
   frame — so the artwork is never boxed in. `object-fit:cover` keeps the
   YouTube thumbnail's 16:9 proportions and crops the overflow instead of
   scaling it out of shape. */
.cover-card{
  position:relative;width:546px;height:348px;
  overflow:hidden;background:#1a1a1a;
}
.cover-card img{width:100%;height:100%;object-fit:cover;}
/* Hover: a bottom-up shade rises behind the copy (the goal shows no play
   button, just the gradient and the text). */
.cover-card::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 72%);
  opacity:0;transition:opacity .3s ease;
}
.cover-card:hover::after,.cover-card:focus-visible::after{opacity:1;}
/* "Variant 2" of the "Latest Covers" component (94:409): the title and the
   credit line fade in over the artwork on hover. */
.cover-card__info{
  position:absolute;left:32px;bottom:28px;right:24px;z-index:2;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;pointer-events:none;
}
.cover-card:hover .cover-card__info,
.cover-card:focus-visible .cover-card__info{opacity:1;transform:translateY(0);}
.cover-card__info-title{
  display:block;font-family:var(--heading);font-weight:600;font-size:36px;line-height:1.1;
  color:var(--text-inverse);
}
.cover-card__info-sub{
  display:block;margin-top:20px;font-family:var(--heading);font-weight:600;font-size:15px;
  line-height:1.6;color:var(--text-inverse);
}

/* generic 2-column grid used by discography / gallery / news */
.grid-2{display:grid;grid-template-columns:repeat(2,546px);gap:20px 20px;justify-content:start;}

/* content card (news / gallery) — geometry from the Figma
   "Component 1" / "Group 3" news cards: title 36px from the top,
   image 93px from the top (25px below the title), 27px below the image. */
.card{
  position:relative;width:546px;min-height:405px;background:rgba(0,0,0,.22);
  border-radius:var(--radius-card);padding:36px 31px 27px;
}
.gallery-card{padding-bottom:78px;}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.card__title{
  font-family:var(--heading);font-weight:700;font-size:32px;line-height:1;
  text-transform:uppercase;color:var(--text-inverse);
}
.card__date{
  font-family:var(--heading);font-weight:500;font-size:24px;line-height:1;
  text-transform:uppercase;color:var(--text-inverse);white-space:nowrap;padding-top:4px;
}
/* News media. Figma gives these frames a 7px black stroke on the inside and a
   linear black gradient (100% opacity -> 0%) over the picture, so the shading
   sits behind the caption area of every news post. Scoped to #news-grid so the
   gallery pictures keep their unframed look. */
.card__media{
  position:relative;margin-top:25px;height:285px;background:#111;overflow:hidden;
}
#news-grid .card__media:not(.card__media--split),
#news-grid .card__media--split .slot{border:7px solid #000;}
/* The shade is mirrored: it starts at half-transparent black across the top and
   fades smoothly to fully transparent at the midpoint, so the lower half of the
   artwork is left completely clear. */
#news-grid .card__media:not(.card__media--split)::after,
#news-grid .card__media--split .slot::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,0,0,.50) 0%,
    rgba(0,0,0,.38) 15%,
    rgba(0,0,0,.24) 30%,
    rgba(0,0,0,.10) 42%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,0) 100%);
}
.card__media-link{display:block;position:relative;}

/* A news post that links out to a video gets the discography card's hover
   treatment: a shade rises from the bottom of the picture and a "check this
   out" line fades in over it. The static top-down gradient stays as it is at
   rest, so the "next" / "coming soon" slot labels keep their contrast. */
.card__media:not(.card__media--split)::before,
.card__media--split .slot::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 72%);
  opacity:0;transition:opacity .3s ease;
}
.card__media-link:hover .card__media:not(.card__media--split)::before,
.card__media-link:focus-visible .card__media:not(.card__media--split)::before,
.card__media-link:hover .card__media--split .slot::before,
.card__media-link:focus-visible .card__media--split .slot::before{opacity:1;}
.card__media-cta{
  position:absolute;left:31px;bottom:22px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--heading);font-weight:700;font-size:20px;line-height:1.6;
  text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.card__media-cta img{width:14px;height:14px;}
.card__media-link:hover .card__media-cta,
.card__media-link:focus-visible .card__media-cta{opacity:1;transform:translateY(0);}
.card__media img{width:100%;height:100%;object-fit:cover;}
.card__media--split{display:grid;grid-template-columns:226px 225px;gap:20px;background:none;}
.card__media--split .slot{
  position:relative;height:285px;background:#111;overflow:hidden;
}
.card__media--split .slot img{width:100%;height:100%;object-fit:cover;}
.card__slot-label{
  position:absolute;left:17px;top:22px;right:17px;z-index:2;
  font-family:var(--heading);font-weight:400;font-size:17px;line-height:1.15;
  text-transform:uppercase;color:var(--text-inverse);
  /* Both languages have to fit inside the 226px slot, so the label wraps and
     shortens instead of crowding the border. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;
  /* Room for a diacritic on the first line (see the overflow guard note). */
  padding-top:.16em;margin-top:-.16em;
}
.card__body{
  margin-top:18px;font-family:var(--body);font-weight:400;font-size:16px;line-height:1.5;
  color:rgba(255,255,255,.85);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--heading);font-weight:700;font-size:20px;
  /* Not 1: see the diacritic note in the overflow guard below — a capital
     carrying a breve (Й) needs a taller line box or the mark gets clipped.
     1.6 clears it by a wide margin whatever font the fallback lands on. */
  line-height:1.6;
  text-transform:uppercase;text-decoration:none;
  max-width:100%;
}
/* Black pill ("visit my channel", "send ideas!"): on hover the whole button
   turns half-transparent, so the orange page shows through and it reads as a
   warm dark brown. Measured from the design recording: fill goes from solid
   #000 to rgba(0,0,0,.85) and the label from #fff to rgba(255,255,255,.85). */
.btn--black{
  height:80px;padding:0 30px;border-radius:36px;background:#000;color:#fff;
  box-shadow:0 10px 5px rgba(0,0,0,.25);
  transition:background .45s ease,color .45s ease,box-shadow .45s ease;
}
.btn--black:hover,.btn--black:focus-visible{
  background:rgba(0,0,0,.85);color:rgba(255,255,255,.85);
  box-shadow:0 10px 5px rgba(0,0,0,.18);
}
/* Brown collection button: on hover the fill simply darkens (the label stays
   white), matching the second recording. */
.btn--brown{
  position:relative;height:86px;width:500px;border-radius:14px;background:var(--brown-btn);
  color:#fff;font-family:var(--heading);font-weight:500;font-size:22px;letter-spacing:1px;
  text-transform:uppercase;justify-content:flex-start;padding-left:37px;gap:10px;
  /* room for the arrow on the right, so a long label ellipsizes before it */
  padding-right:74px;
  transition:background .35s ease;
}
.btn--brown:hover,.btn--brown:focus-visible{background:#9C5409;}
.btn--brown img{
  position:absolute;right:37px;top:50%;margin-top:-10px;width:20px;height:20px;
  transform-origin:50% 50%;transition:transform .35s cubic-bezier(.33,.02,.24,1);
}
/* The arrow grows a little while the button is hovered, in step with the
   darkening fill and the label sliding to the right. */
.btn--brown:hover img,.btn--brown:focus-visible img{transform:scale(1.28);}
.btn--link{
  display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--heading);
  font-weight:700;font-size:20px;text-transform:uppercase;
}
.btn--link img{width:14px;height:14px;}
.btn--link:hover{text-decoration:underline;}

/* ---------- overflow guard ---------------------------------------------
   Anything with a fixed box shortens with an ellipsis instead of spilling out
   of its container. Multi-line headings/clamps stop at the line count the
   design has room for.

   Cyrillic capitals that carry a diacritic — Й, Ї, Ё, Ќ — put ink 0.95em above
   the baseline, while a line box at line-height:1 puts the baseline only 0.75em
   down. The mark therefore hangs ~0.2em outside the line box, and because
   every rule here clips with overflow:hidden (the ellipsis and the clamp need
   it), the mark was sliced off and Й came out looking exactly like И.

   Two fixes, both invisible by design:
   - single-line labels get a taller line box (they sit centred in fixed-height
     buttons, so only the empty space above/below them changes);
   - clamped multi-line titles get a little top padding, pulled back with a
     negative margin, so the first line's mark fits inside the clip without
     changing the leading or where the text sits. */
.card__title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;
  padding-top:.22em;margin-top:-.22em;
}
.suggestion__title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;
  padding-top:.22em;margin-top:-.22em;
}
.suggestion__comment{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;overflow-wrap:anywhere;
  padding-top:.12em;margin-top:-.12em;
}
.cover-card__info-title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;
  padding-top:.22em;margin-top:-.22em;
}
.cover-card__info-sub{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.latest-block__title{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;
  padding-top:.16em;margin-top:-.16em;
}

/* news / gallery / suggestion dates and titles never wrap mid-token */
.card__date{white-space:nowrap;}

/* buttons: a label longer than the pill shortens instead of bursting out */
.btn{overflow:hidden;}
.btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* The label itself moves on hover, not just the fill. Measured frame by frame
   from the design recordings (label bbox, cursor pixels excluded):
     black pill  -> label width 603 -> 573 px with the centre fixed = exactly
                    95%, so the text shrinks to 95% about its own centre while
                    the pill keeps its size;
     brown button -> the label keeps its size and slides 4px to the right
                    (glyph left edge +12 crop px at 2.43x zoom), baseline
                    unchanged.
   Both run on the same timing as the colour change. */
.btn__label{
  display:inline-block;max-width:100%;
  transition:transform .45s cubic-bezier(.33,.02,.24,1);
}
.btn--black:hover .btn__label,.btn--black:focus-visible .btn__label{
  transform:rotate(-6deg) scale(.95);
}
.btn--brown:hover .btn__label,.btn--brown:focus-visible .btn__label{transform:translateX(4px);}
.btn--black:active .btn__label{transform:rotate(-4deg) scale(.92);}

/* =========================== home ======================================== */
/* 2620px = footer top (2875) − header height (255), exactly as the frame. */
.home{position:relative;height:2620px;}

.hero{position:absolute;left:0;top:0;width:1512px;height:641px;}
.hero__pfp{position:absolute;left:211px;top:50px;width:518px;height:518px;}
.hero__pfp img{
  border-radius:50%;width:100%;height:100%;object-fit:cover;
  outline:9px solid #000;outline-offset:-4px;
  /* A touch richer than the source photo. The hero is the first thing on the
     page, so slightly more saturation lifts it against the orange without
     looking edited — and it applies to whatever picture is uploaded. */
  filter:saturate(1.2);
}
.hero__count{
  position:absolute;left:758px;top:101px;width:522px;
  font-family:var(--heading);font-weight:700;font-size:200px;line-height:1;
  text-align:center;text-transform:uppercase;
}
.hero__count-label{
  position:absolute;left:769px;top:289px;width:511px;
  font-family:var(--heading);font-weight:700;font-size:64px;line-height:1;
  text-align:center;text-transform:uppercase;color:#fff;
}
.hero__cta{position:absolute;left:897px;top:383px;}

.latest-block{position:absolute;left:0;top:565px;width:calc(var(--stage-width) - 8px);height:990px;cursor:pointer;}
/* Both Figma states are the same element in the same place: the frame simply
   grows from the folded card to the near-fullscreen panel. The size/position
   are written by JS on every scroll frame (see initLatestBlock), so there is
   no CSS transition here - the scroll position IS the animation clock.

   The block is tall enough (990px) to contain the largest panel, so growing it
   never paints over the hero above or the About section below. */
.latest-block__inner{
  position:absolute;left:252px;top:174px;width:1008px;height:677px;
  border:7px solid #000;overflow:hidden;background:#111;
  transition:box-shadow .4s ease;
  will-change:left,top,width,height;
}
.latest-block__inner img{width:100%;height:100%;object-fit:cover;}
.latest-block__shade{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 55%);
}
.latest-block__text{
  position:absolute;left:310px;top:660px;z-index:3;max-width:560px;
  will-change:left,top;
}
.latest-block__title{
  font-family:var(--heading);font-weight:600;font-size:64px;line-height:1;
  text-transform:uppercase;color:#fff;
}
/* Folded state: the song/artist line stays inside the card and never spills
   over its right edge. */
.latest-block__sub{
  margin-top:22px;font-family:var(--heading);font-weight:400;font-size:20px;
  line-height:1.6;
  letter-spacing:4px;text-transform:uppercase;color:#fff;
  max-width:660px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* "Variant 2" of the block (72:1449): the copy drops to the bottom-left of the
   panel, the song line gets its full width and a link appears under it. These
   extras are revealed only once the zoom has reached its single scroll point. */
.latest-block__cta{
  display:inline-flex;margin-top:26px;color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .32s ease,transform .32s ease;
}
.latest-block.is-fullscreen .latest-block__sub{
  margin-top:11px;
  max-width:876px;
  /* Two lines at most: the copy is anchored to the panel's lower-left corner,
     so a third line would push the link past the panel's bottom edge. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;
}
.latest-block.is-fullscreen .latest-block__cta{
  opacity:1;transform:translateY(0);pointer-events:auto;
  margin-top:32px;
}


.about{position:absolute;left:0;top:1555px;width:1512px;height:560px;}
/* The hand-written card sits below the section title: the title's own bbox in
   Figma stops where the card starts, so it must paint on top of it rather than
   disappear behind it. */
.about__card{
  position:absolute;left:214px;top:109px;width:578px;height:307px;z-index:2;
  background:#fff;border-radius:14px;transform:rotate(4.46deg);
  box-shadow:0 6px 0 rgba(0,0,0,.15);
}
/* The dark orange card from the design. It uses the exact same box as the white
   note (same left/top/width/height) but stays straight — 0deg — so the tilted
   white note sits inside it. It is scaled up from its own centre because a
   4.46deg rotation grows the white card's bounding box to 600x351; the scale
   leaves an even 12px frame of dark card visible on every side. */
/* The dark orange card from the design. It occupies exactly the same box as the
   white note — same left, top, width and height, no scaling — and is not
   rotated, so the white note's 4.46deg tilt reveals the dark frame at the
   corners instead of the frame being faked by a bigger box. */
.about__card-back{
  position:absolute;left:214px;top:109px;width:578px;height:307px;z-index:1;
  background:#A85E12;border:8px solid #2B1600;border-radius:14px;
  transform:rotate(0deg);
}
.about__card-text{
  position:absolute;left:242px;top:143px;width:516px;z-index:3;
  font-family:var(--body);font-weight:500;font-size:20px;line-height:1.35;
  letter-spacing:.05em;text-align:justify;transform:rotate(4.42deg);
  /* fitAboutCard() sets the line count and the max-height so the note always
     ends on a whole line inside the cropped card, with an ellipsis when a
     translation is longer than the paper. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;
  overflow:hidden;
}
.about__title{
  position:absolute;left:250px;top:48px;z-index:3;
  font-family:var(--heading);font-weight:700;font-size:64px;line-height:1;
  text-transform:uppercase;filter:drop-shadow(0 4px 10px rgba(252,150,26,.5));
  transform:rotate(-3.95deg);
}
.about__collections{position:absolute;left:940px;top:84px;width:500px;z-index:4;}
.about__collections-title{font-family:var(--heading);font-weight:700;font-size:32px;text-transform:uppercase;}
.about__buttons{margin-top:32px;display:flex;flex-direction:column;gap:24px;}

.suggestion-cta{position:absolute;left:0;top:2144px;width:1512px;height:354px;text-align:center;}
/* The design sets this heading in a narrow centred box, so it always breaks
   over two lines ("CHoose My / Next Song"), in both languages. */
.suggestion-cta__title{
  position:absolute;left:50%;top:44px;width:660px;transform:translateX(-50%);
  font-family:var(--heading);font-weight:700;font-size:64px;line-height:1.05;
  text-transform:uppercase;color:#fff;
}
.suggestion-cta__btn{position:absolute;left:50%;top:232px;transform:translateX(-50%);}

/* =========================== discography ================================= */
.discography{padding:0 var(--page);}
.discography__grid{margin-top:57px;padding-bottom:80px;}
.discography__empty{
  padding:60px 0;font-family:var(--heading);font-size:24px;text-transform:uppercase;
  color:rgba(0,0,0,.6);
}
/* The empty-state copy is authored with a hard line break ("Nothing to see
   here." / "But not for long... :)"), so the newline in the string has to
   survive rendering. pre-line keeps the break but still collapses repeated
   spaces and still wraps when the container is narrow. */
.empty-state{white-space:pre-line;}

/* =========================== simple pages ================================ */
.page{position:relative;padding:0 var(--page) 90px;}
.page__title{
  padding-top:12px;font-family:var(--heading);font-weight:700;font-size:32px;line-height:1.25;
  text-transform:uppercase;text-align:center;
}
.page__title--black{color:#000;}
.page__title--white{color:#fff;}
.page__title--display{font-size:64px;margin-top:20px;}
.page__grid{margin-top:90px;}
.page__note{
  margin-top:60px;font-family:var(--heading);font-weight:700;font-size:20px;line-height:1.6;
  text-transform:uppercase;text-align:center;
}

/* gallery discord callout — a plain black mark, no plate behind it (the footer
   keeps its white-on-black version) */
.gallery__discord{display:flex;justify-content:center;margin-top:56px;}
.gallery__discord a{display:block;line-height:0;}
.gallery__discord img{
  width:97px;height:74px;object-fit:contain;
  filter:brightness(0);
}
.gallery__discord a:hover img{opacity:.75;}

/* original songs */
/* Centred column from the design: the statement wraps onto two lines, the pill
   button sits centred under it, and the thank-you note is three centred lines
   with a generous empty band before the footer. */
.original{position:relative;padding:0 var(--page) 220px;text-align:center;}
.original__title{
  max-width:900px;margin:110px auto 0;
  font-family:var(--heading);font-weight:700;font-size:32px;line-height:1.3;
  text-transform:uppercase;color:#000;
}
.original__line{display:block;}
.original__btn{margin-top:54px;display:flex;justify-content:center;}
.original__note{
  max-width:1100px;margin:92px auto 0;
  font-family:var(--heading);font-weight:700;font-size:20px;line-height:1.6;
  text-transform:uppercase;color:#000;
}
/* Geometry from SUGGESTION BOX / DESKTOP (108:462): form card 1102x364,
/* fields 1028x52/84 with 20px gaps, submit at the bottom-right. */
.suggestionbox{position:relative;padding:0 var(--page) 90px;}
/* The design gives the title a 510px box, so "CHoose My Next Song"
   breaks over two lines. */
.suggestionbox__title{
  position:relative;max-width:510px;margin:26px auto 0;
  font-family:var(--heading);font-weight:700;font-size:64px;line-height:1;
  text-align:center;text-transform:uppercase;color:#fff;
}
.form-card{
  margin-top:34px;background:rgba(0,0,0,.22);border-radius:var(--radius-card);
  padding:46px 37px 31px;position:relative;
}
/* Every text field is the same 1028x52 pill, 20px apart. */
.form-card input,.form-card textarea{
  display:block;width:100%;background:rgba(255,214,165,.75);border:0;border-radius:18px;
  font-family:var(--heading);font-style:italic;font-weight:400;font-size:20px;line-height:1.2;
  text-transform:uppercase;color:rgba(60,31,0,.7);outline:none;padding:0 18px;
}
.form-card input{height:52px;margin-bottom:20px;}
.form-card textarea{
  height:84px;min-height:84px;padding:16px 18px;resize:vertical;
  margin-bottom:0;
}
.form-card input::placeholder,.form-card textarea::placeholder{color:rgba(60,31,0,.7);}
.form-card input:focus,.form-card textarea:focus{outline:2px solid rgba(255,255,255,.55);}
/* The NOTE is body copy in the design — Inter Regular 20px, not a Josefin
   heading, and not upper-cased. */
.form-card__note{
  margin-top:20px;padding-right:76px;
  font-family:var(--body);font-weight:400;font-size:20px;line-height:1.3;
  letter-spacing:0;text-transform:none;color:#fff;max-width:933px;
}
/* Send button: the big solid white arrow from the design. There is no chip
   behind it — the arrow sits directly on the brown card, so the button is just
   the icon with a generous hit area. */
.form-card__submit{
  position:absolute;right:34px;bottom:22px;width:74px;height:52px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  transition:transform .25s ease,opacity .25s ease;
}
.form-card__submit svg{width:74px;height:52px;display:block;}
/* Hover nudges the arrow in the direction it points — the same "send" motion
   the design implies. */
.form-card__submit:hover{transform:translateX(4px);opacity:.85;}
.form-card__submit:active{transform:translateX(1px) scale(.97);}

.suggestions-title{
  margin-top:60px;font-family:var(--heading);font-weight:700;font-size:64px;line-height:1;
  text-transform:uppercase;text-align:center;color:#fff;
}
.suggestions-list{margin-top:52px;display:flex;flex-direction:column;gap:20px;}
/* Geometry from the suggestion card in 108:462: 1102x162, date 28px from the
   top, title 58px, the submitted comment 110px. */
.suggestion{
  position:relative;background:rgba(0,0,0,.22);border-radius:var(--radius-card);
  padding:26px 31px 24px;
}
.suggestion__date{
  font-family:var(--heading);font-weight:500;font-size:16px;line-height:1;
  text-transform:uppercase;color:#fff;
}
.suggestion__title{
  margin-top:16px;font-family:var(--heading);font-weight:700;font-size:32px;line-height:1.1;
  text-transform:uppercase;color:#fff;
}
/* This is the text the visitor typed into the form's "Comment (optional)"
   field — plain copy, not a button. */
.suggestion__comment{
  margin-top:17px;font-family:var(--heading);font-weight:400;font-size:20px;line-height:1.3;
  text-transform:uppercase;color:#fff;
}
.suggestion__link{margin-top:14px;}
.suggestion__actions{
  position:absolute;right:25px;bottom:21px;display:flex;align-items:center;gap:22px;
}
.like-btn{display:flex;align-items:center;gap:10px;color:#fff;}
.like-btn svg{width:37px;height:33px;}
.like-btn.is-liked svg path{fill:#fff;fill-opacity:1;}
.like-btn__count{font-family:var(--heading);font-weight:500;font-size:24px;line-height:1;}
.like-btn:hover{text-decoration:underline;}

/* =========================== popups / overlays =========================== */
.overlay{
  position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.cat-popup{
  position:absolute;z-index:320;width:354px;background:#000;border-radius:var(--radius-card);
  padding:36px 20px 20px;box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.cat-popup__option{
  display:block;width:100%;text-align:left;padding:14px 0;
  font-family:var(--heading);font-weight:400;font-size:20px;line-height:1;
  text-transform:uppercase;color:#fff;
}
.cat-popup__option:hover,.cat-popup__option.is-active{color:var(--soft);}
.cat-popup__option.is-active{font-weight:700;}

/* The chevron of the category chip points down while the menu is closed and
   flips to point up while it is open. The rotation is a plain transition on a
   class, so opening turns it 180° forward and clicking the chip again turns it
   180° back to the resting position — never a full circle. */
.search-bar__category img{transition:transform .35s cubic-bezier(.33,.02,.24,1);}
.search-bar__category img.is-open{transform:rotate(180deg);}
@media (prefers-reduced-motion:reduce){
  .search-bar__category img{transition:none;}
  .btn--black,.btn--brown,.btn__label,.form-card__submit,.btn--brown img{transition:none;}
}

/* =========================== toast ====================================== */
.toast{
  position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:400;
  background:#000;color:#fff;font-family:var(--heading);font-weight:500;font-size:18px;
  text-transform:uppercase;padding:16px 28px;border-radius:36px;
}

/* =========================== admin panel ================================ */
.admin{
  width:1100px;max-height:88vh;overflow:auto;background:#fff;border-radius:24px;
  padding:40px 48px 56px;position:relative;
}
.admin h2{font-family:var(--heading);font-weight:700;font-size:32px;text-transform:uppercase;margin-bottom:18px;}
.admin h3{font-family:var(--heading);font-weight:700;font-size:22px;text-transform:uppercase;margin:34px 0 14px;}
.admin input,.admin textarea,.admin select{
  width:100%;border:2px solid #ddd;border-radius:12px;padding:12px 14px;font-size:16px;
  margin-bottom:12px;background:#fff;
}
.admin textarea{min-height:90px;resize:vertical;}
.admin .row{display:flex;gap:14px;}
.admin .row > *{flex:1;}
.admin button{
  background:#000;color:#fff;border-radius:12px;padding:12px 22px;
  font-family:var(--heading);font-weight:700;font-size:16px;text-transform:uppercase;
}
.admin button.ghost{background:#eee;color:#000;}
.admin table{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px;}
.admin th,.admin td{text-align:left;padding:8px 10px;border-bottom:1px solid #eee;vertical-align:top;}
.admin .muted{color:#777;font-size:14px;}
/* Plain typographic X — no icon font, no pseudo-element glyph. Scoped through
   .admin so it outranks the generic `.admin button` pill style above. */
.admin .admin__close{
  position:absolute;right:26px;top:18px;
  background:none;border:0;border-radius:0;padding:4px 8px;cursor:pointer;
  font-family:var(--heading);font-weight:700;font-size:30px;line-height:1;
  text-transform:none;color:#000;
}
.admin .admin__close:hover{opacity:.55;}
.admin__actions{display:flex;gap:10px;margin-top:24px;align-items:center;flex-wrap:wrap;}
.admin__badge{background:#FC961A;border-radius:8px;padding:4px 10px;font-size:13px;font-weight:600;}

/* ---- the console itself (/owner) ------------------------------------- */
.admin--console{width:1180px;padding:44px 52px 64px;}
.admin__top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;}
.admin__back{
  flex:0 0 auto;font-family:var(--heading);font-weight:700;font-size:15px;
  text-transform:uppercase;text-decoration:none;color:#000;
  border:2px solid #e6e6e6;border-radius:999px;padding:10px 18px;
}
.admin__back:hover{background:#f5f5f5;}
.admin__head{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.admin__head h2{margin-bottom:0;}
.admin__head .admin__actions{margin-top:0;}
.admin__tabs{display:flex;gap:10px;margin:28px 0 24px;border-bottom:2px solid #f0f0f0;padding-bottom:0;}
.admin__tab{
  background:none!important;color:#8a8a8a!important;border-radius:0!important;
  border-bottom:3px solid transparent;padding:12px 6px 14px!important;margin-right:8px;
}
.admin__tab.is-active{color:#000!important;border-bottom-color:#FC961A;}
.admin__tab-body{animation:adminFade .18s ease;}
@keyframes adminFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.admin__login{display:flex;gap:12px;align-items:center;margin-top:20px;}
.admin__login input{margin-bottom:0;max-width:340px;}
.admin__login button{white-space:nowrap;}
.admin__hint{margin-top:16px;}
.admin__hint code{background:#f3f3f3;border-radius:6px;padding:2px 6px;}
.admin__form{background:#fafafa;border-radius:16px;padding:24px 26px 8px;margin-bottom:26px;}
.admin__form .admin__actions{margin-top:8px;padding-bottom:16px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0;}
.field > span{
  font-family:var(--heading);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:#8a8a8a;
}
.admin__form .field > input,.admin__form .field > textarea,.admin__form .field > select{margin-bottom:0;}
.admin__image{display:flex;gap:10px;align-items:center;}
.admin__image input{flex:1;min-width:0;margin-bottom:0!important;}
.admin__upload{
  flex:0 0 auto;background:#000;color:#fff;border-radius:12px;padding:12px 18px;
  font-family:var(--heading);font-weight:700;font-size:14px;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
}
.admin__upload input{display:none;}
.admin__preview{
  width:54px;height:54px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#eee;
}
/* The hero picture is round on the live site, so preview it that way too. */
.admin__preview--round{width:96px;height:96px;border-radius:50%;}
/* "Latest covers" picker: one radio per row, centred in its column. */
.admin__feature-cell{text-align:center;}
.admin__feature-cell input{width:20px;height:20px;margin:0;cursor:pointer;accent-color:#FC961A;}
/* The [hidden] attribute has to beat the layout rules above. */
.admin [hidden]{display:none!important;}
.admin__list{display:flex;flex-direction:column;gap:12px;}
.admin__item{
  display:flex;gap:16px;align-items:center;background:#fff;border:2px solid #f0f0f0;
  border-radius:14px;padding:12px 16px;
}
.admin__item img,.admin__thumb{
  width:74px;height:52px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:#eee;
}
.admin__item-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
.admin__item-body strong{
  font-family:var(--body);font-weight:600;font-size:16px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.admin__item-body a{font-size:13px;color:#C56A0B;word-break:break-all;}
.admin__item-body .muted{font-size:13px;color:#8a8a8a;}
.admin__item-actions{display:flex;gap:8px;flex:0 0 auto;}
.admin__item-actions button{padding:8px 14px!important;font-size:13px!important;}
.admin__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;}
.admin__card{border:2px solid #f0f0f0;border-radius:14px;overflow:hidden;background:#fff;}
.admin__card img{width:100%;height:140px;object-fit:cover;display:block;background:#eee;}
.admin__card-body{display:flex;justify-content:space-between;gap:8px;padding:10px 12px 0;}
.admin__card-body strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin__card .admin__item-actions{padding:10px 12px 12px;}
.admin__title-cell{max-width:340px;}
.admin__list--wide table td input,.admin__list--wide table td select{margin-bottom:0;padding:8px 10px;font-size:14px;}
.admin__list--wide table td input{min-width:120px;}

/* =========================== helpers ==================================== */
.center{text-align:center;}