/* ==========================================================================
   Jennifer Ewbank | jenniferewbank.co.uk
   Site stylesheet. Rebuilt on the Brand and Design System v1.1.
   Every colour below resolves to a token in jennifer_ewbank_brand_tokens.css.
   Do not write a raw colour value into this file.
   ========================================================================== */

:root{
  /* Site level names mapped onto the brand tokens */
  --espresso: var(--je-plum);          /* dark ground and body ink        */
  --whiskey:  var(--je-clay-deep);     /* accent ink, readable on light   */
  --accent:   var(--je-amber);         /* accent fills, rules, focus      */
  --tan:      var(--je-amber);         /* accent on dark grounds          */
  --rose:     var(--je-blush-light);   /* soft accent on dark grounds     */
  --blush:    var(--je-cream);         /* light ink on dark, tinted bands */
  --white:    var(--je-off-white);     /* page ground                     */
  --sand:     var(--je-sand);          /* secondary light text on dark    */
  --muted:    var(--je-text-muted);
  --stitch:   rgba(180,119,116,.42);
  --scrim-clear:  var(--je-scrim-clear);   /* barely there, keeps the image  */
  --scrim-veil:   var(--je-scrim-veil);    /* the open window over footage    */
  --scrim-soft:   var(--je-scrim-soft);    /* mid weight over moving footage */
  --scrim-strong: var(--je-scrim-strong);  /* under headings and buttons     */
  --wrap:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--espresso);
  font-family:'Jost',system-ui,sans-serif;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.script{font-family:'Caveat',cursive;font-weight:600}
.orn{color:var(--whiskey);letter-spacing:.5em;font-size:.8rem}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--espresso);color:var(--blush);padding:12px 18px}

/* --- Announcement bar --------------------------------------------------- */
.announce{
  background:var(--espresso);color:var(--blush);text-align:center;padding:10px 16px;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800;
}
.announce .script{font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--rose);margin-right:12px}
.announce a{color:var(--tan);text-decoration:none;border-bottom:1px solid var(--tan);margin-left:12px}

/* --- Navigation --------------------------------------------------------- */
.nav{
  display:flex;justify-content:space-between;align-items:center;padding:20px 50px;
  background:var(--white);border-bottom:2px dashed var(--stitch);position:relative;z-index:20;
}
.wordmark{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.35rem;text-decoration:none}
.wordmark span{color:var(--whiskey)}
.navlinks{display:flex;gap:30px;align-items:center;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800}
.navlinks a{text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.navlinks a:hover{border-bottom-color:var(--accent)}
.navlinks a.here{border-bottom-color:var(--accent)}
.navlinks a.cta{background:var(--espresso);color:var(--blush);padding:12px 22px;border-bottom:none}
.navlinks a.cta:hover{background:var(--accent);color:var(--je-plum-deep)}

.burger{
  display:none;background:none;border:2px solid var(--espresso);padding:11px 14px;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--espresso);
}
.mobilemenu{display:none;background:var(--blush);border-bottom:2px dashed var(--stitch);padding:14px 28px 22px}
.mobilemenu.open{display:block}
.mobilemenu a{
  display:block;text-decoration:none;padding:13px 0;border-bottom:1px dashed var(--stitch);
  font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;
}
.mobilemenu a:last-child{border-bottom:none}

/* --- Section scaffolding ------------------------------------------------ */
.section{max-width:var(--wrap);margin:0 auto;padding:90px 32px}
.section.tight{padding-top:0}
.eyebrow{text-align:center;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;font-weight:800;color:var(--whiskey)}
.eyebrow .orn{margin:0 14px}
.eyebrow.left{text-align:left}
.title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(1.9rem,3.8vw,2.8rem);text-align:center;margin-top:10px;line-height:1.15}
.title em{font-style:italic;color:var(--whiskey)}
.lead{text-align:center;max-width:62ch;margin:14px auto 0;font-size:1rem}
.prose p{margin-top:16px;max-width:66ch}
.prose p:first-child{margin-top:0}

/* --- Interior page plate ------------------------------------------------ */
.plate{background:var(--espresso);color:var(--blush);position:relative;overflow:hidden}
.plate .bgnote{
  position:absolute;right:-20px;top:-30px;font-family:'Caveat',cursive;font-size:15rem;
  color:rgba(227,176,164,.10);pointer-events:none;line-height:1;
}
.plate .inner{max-width:var(--wrap);margin:0 auto;padding:74px 32px 78px;position:relative;z-index:2}
.plate .script{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--rose);display:block;transform:rotate(-2deg);transform-origin:left}
.plate h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.04;text-transform:uppercase;margin-top:4px}
.plate .sub{margin-top:18px;max-width:58ch;color:var(--sand)}
.crumb{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800;color:var(--tan);margin-bottom:22px}
.crumb a{text-decoration:none}

/* --- Buttons and chips -------------------------------------------------- */
.btn{display:inline-block;text-decoration:none;font-weight:800;letter-spacing:.22em;text-transform:uppercase;font-size:.75rem;padding:16px 32px}
.btn.solid{background:var(--accent);color:var(--je-plum-deep)}
.btn.solid:hover{background:var(--rose);color:var(--je-plum-deep)}
.btn.line{border:2px solid var(--blush);color:var(--blush)}
.btn.line:hover{background:var(--blush);color:var(--espresso)}
.btn.dark{background:var(--espresso);color:var(--blush)}
.btn.dark:hover{background:var(--whiskey)}
.chip{
  display:inline-block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  text-decoration:none;border:2px solid var(--espresso);padding:12px 20px;
}
.chip:hover{background:var(--espresso);color:var(--blush)}
.chip.fill{background:var(--espresso);color:var(--blush)}
.chip.fill:hover{background:var(--whiskey);border-color:var(--whiskey)}
.chip.pale{border-color:var(--blush);color:var(--blush)}
.chip.pale:hover{background:var(--blush);color:var(--espresso)}

/* --- Home hero ---------------------------------------------------------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:flex-end;
  background:url('https://jenniferewbank.nl/wp-content/uploads/2025/07/One-Step-At-a-Time_track_cover.png') center 28%/cover no-repeat;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(64,39,43,.12) 25%,rgba(64,39,43,.92) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;padding:0 50px 60px;color:var(--blush);max-width:1240px;margin:0 auto}
.hero .script{font-size:clamp(1.9rem,3.6vw,3rem);color:var(--rose);display:block;transform:rotate(-2deg);transform-origin:left}
.hero h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(2.5rem,6.4vw,5.1rem);line-height:1.02;text-transform:uppercase}
.hero .sub{margin-top:16px;max-width:54ch;font-size:1.02rem;color:var(--sand)}
.hero .btns{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.platforms{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--rose)}
.platforms span{border-bottom:1px dashed var(--rose);padding-bottom:4px}

/* --- Featured release --------------------------------------------------- */
.feature{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center;margin-top:56px}
.feature .art{position:relative}
.feature .art img{width:100%;height:auto;display:block;box-shadow:0 30px 60px rgba(42,30,34,.30)}
.feature .art::before{content:"";position:absolute;inset:-16px;border:2px dashed var(--accent)}
.feature .art .pin{position:absolute;top:-30px;right:-18px;background:var(--whiskey);color:var(--blush);padding:12px 18px;transform:rotate(4deg);z-index:2}
.feature .art .pin .script{font-size:1.4rem;color:var(--blush);display:block;line-height:1}
.feature .kicker{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;font-weight:800;color:var(--whiskey)}
.feature h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(2rem,4vw,3rem);margin-top:8px;line-height:1.1}
.feature p{margin-top:16px;max-width:52ch}
.feature .quote{margin-top:22px;padding-left:20px;border-left:3px solid var(--rose);font-style:italic;font-size:1.02rem}
.feature .quote span{display:block;font-style:normal;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--whiskey);margin-top:6px}
.feature .links{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}

/* --- Discography grid --------------------------------------------------- */
.disco{margin-top:52px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.disco.roomy{grid-template-columns:repeat(4,1fr);gap:26px}
.d{position:relative;display:block;text-decoration:none}
.d img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;transition:transform .4s ease}
.d:hover img{transform:scale(1.03)}
.d .lab{margin-top:10px}
.d .lab b{display:block;font-size:.82rem;font-weight:800;line-height:1.3}
.d .lab span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--whiskey);font-weight:800}
.discofoot{text-align:center;margin-top:40px}

/* --- Videos ------------------------------------------------------------- */
.videowrap{background:var(--blush)}
.vids{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.v{text-decoration:none;display:block}
.v .thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.v .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.v:hover .thumb img{transform:scale(1.04)}
.v .thumb::after{content:"";position:absolute;inset:0;background:rgba(64,39,43,.20)}
.v .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.v .play div{
  width:62px;height:62px;border-radius:50%;background:rgba(238,223,205,.94);
  display:flex;align-items:center;justify-content:center;color:var(--espresso);font-size:1.2rem;padding-left:5px;
}
.v h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.12rem;margin-top:14px}
.v .meta{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--whiskey);margin-top:3px}

/* --- Split (image and text) --------------------------------------------- */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.split.flip{grid-template-columns:1.1fr .9fr}
.frame{position:relative}
.frame img{width:100%;height:auto;display:block}
.frame::before{content:"";position:absolute;inset:-14px;border:2px dashed var(--accent)}
.frame .tape{position:absolute;bottom:-24px;left:-20px;background:var(--rose);color:var(--espresso);padding:10px 18px;transform:rotate(-3deg)}
.frame .tape .script{font-size:1.4rem}
.split h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:2.3rem;line-height:1.2}
.split h2 em{font-style:italic;color:var(--whiskey)}
.split p{margin-top:16px;font-size:1rem;max-width:58ch}

/* --- Stat band ---------------------------------------------------------- */
.stats{margin-top:34px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(210,146,62,.45)}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{background:var(--white);padding:20px 22px}
.stat b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;display:block;color:var(--whiskey)}
.stat span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}

/* --- Dark band ---------------------------------------------------------- */
.darkwrap{background:var(--espresso);color:var(--blush);position:relative;overflow:hidden}
.darkwrap .bgnote{position:absolute;right:-30px;top:30px;font-family:'Caveat',cursive;font-size:16rem;color:rgba(227,176,164,.09);pointer-events:none;line-height:1}
.darkwrap .eyebrow{color:var(--rose)}
.darkwrap .title{color:var(--blush)}
.darkwrap .lead{color:var(--sand)}

.journey{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(227,176,164,.26)}
.leg{background:var(--espresso);padding:34px 30px;position:relative}
.leg .no{font-family:'Caveat',cursive;font-size:2.2rem;color:var(--rose);line-height:1}
.leg h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.35rem;margin-top:6px}
.leg .when{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--tan);margin-top:4px}
.leg p{margin-top:14px;font-size:.92rem;opacity:.9}
.leg .st{display:inline-block;margin-top:18px;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;border:1px solid var(--rose);color:var(--rose);padding:8px 14px}
.cities{margin-top:44px;text-align:center;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;font-weight:800;color:var(--rose)}
.cities b{color:var(--blush)}

/* --- Timeline (the stitch becomes the thread) --------------------------- */
.thread{margin-top:60px;position:relative;padding-left:0}
.thread::before{content:"";position:absolute;left:118px;top:8px;bottom:8px;border-left:2px dashed var(--stitch)}
.mark{position:relative;display:grid;grid-template-columns:100px 1fr;gap:56px;padding-bottom:46px}
.mark:last-child{padding-bottom:0}
.mark .yr{
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;color:var(--whiskey);
  text-align:right;padding-top:2px;
}
.mark .dot{position:absolute;left:112px;top:14px;width:14px;height:14px;background:var(--accent);border-radius:50%;z-index:2}
.mark.big .dot{background:var(--rose);width:18px;height:18px;left:110px;top:12px}
.mark .body h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.25rem;line-height:1.3}
.mark .body p{margin-top:8px;font-size:.95rem;max-width:60ch}
.mark .body .tagrow{margin-top:12px}
.tag{
  display:inline-block;margin:0 8px 8px 0;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:800;color:var(--whiskey);border:1px solid var(--accent);padding:6px 12px;
}

/* --- Cards -------------------------------------------------------------- */
.cards{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{border:2px dashed var(--stitch);padding:32px 30px;background:var(--white)}
.card .no{font-family:'Caveat',cursive;font-size:2rem;color:var(--whiskey);line-height:1}
.card h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.3rem;margin-top:6px;line-height:1.3}
.card p{margin-top:12px;font-size:.94rem}
.card .kicker{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--whiskey);margin-top:4px}
.card ul{margin-top:14px;padding-left:18px;font-size:.94rem}
.card li{margin-bottom:8px}

/* --- Press quotes ------------------------------------------------------- */
.quotes{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.q{border-top:2px dashed var(--tan);padding-top:24px}
.q p{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.35rem;line-height:1.45}
.q span{display:block;margin-top:12px;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--whiskey)}
.pressfoot{margin-top:46px;text-align:center}
.pressfoot .chip{margin:0 8px 10px}

/* --- Data table --------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;margin-top:34px;font-size:.94rem}
.tbl th{
  text-align:left;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;
  color:var(--whiskey);padding:0 16px 12px 0;border-bottom:2px dashed var(--stitch);
}
.tbl td{padding:16px 16px 16px 0;border-bottom:1px dashed var(--stitch);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td b{font-weight:800}

/* --- Bio blocks (press page) -------------------------------------------- */
.bio{border:2px dashed var(--stitch);padding:34px 32px;margin-top:26px;background:var(--white)}
.bio h4{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800;color:var(--whiskey)}
.bio p{margin-top:14px;max-width:72ch}
.bio .count{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-top:16px}

/* --- Personality strip -------------------------------------------------- */
.persona{background:var(--blush)}
.persona .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.persona .cell{aspect-ratio:1/1;background-size:cover;background-position:center}
.persona .txt{
  background:linear-gradient(160deg,var(--whiskey),var(--espresso));display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:var(--blush);text-align:center;padding:20px;text-decoration:none;
}
.persona .txt .script{font-size:1.9rem;color:var(--rose)}
.persona .txt div{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;font-weight:800;margin-top:4px}

/* --- Newsletter --------------------------------------------------------- */
.outrowrap{background:var(--white)}
.outro{text-align:center;max-width:660px}
.signup{margin-top:36px;display:flex;justify-content:center;flex-wrap:wrap}
.signup input{
  width:340px;max-width:100%;padding:16px 18px;border:2px dashed var(--accent);border-right:none;
  background:var(--white);font-family:'Jost',sans-serif;font-size:.92rem;color:var(--espresso);
}
.signup button{
  padding:16px 30px;background:var(--whiskey);color:var(--blush);border:2px solid var(--whiskey);
  letter-spacing:.24em;text-transform:uppercase;font-size:.74rem;font-weight:800;cursor:pointer;font-family:'Jost',sans-serif;
}
.signup button:hover{background:var(--espresso);border-color:var(--espresso)}
.outro .small{margin-top:16px;font-size:.78rem;color:var(--muted)}

/* --- Forms -------------------------------------------------------------- */
.form{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column}
.field.wide{grid-column:1 / -1}
.field label{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;font-weight:800;color:var(--whiskey);margin-bottom:8px}
.field input,.field select,.field textarea{
  padding:14px 16px;border:2px dashed var(--stitch);background:var(--white);
  font-family:'Jost',sans-serif;font-size:.95rem;color:var(--espresso);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-style:solid;border-color:var(--accent)}
.formfoot{grid-column:1 / -1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.formfoot .note{font-size:.78rem;color:var(--muted)}

/* --- Footer ------------------------------------------------------------- */
.foot{background:var(--espresso);color:var(--blush);padding:64px 50px 34px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;max-width:var(--wrap);margin:0 auto}
.fgrid .script{font-size:2rem;color:var(--rose)}
.fgrid p{font-size:.86rem;opacity:.85;margin-top:10px;max-width:34ch}
.fgrid h5{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;font-weight:800;color:var(--tan);margin-bottom:16px}
.fgrid ul{list-style:none}
.fgrid li{margin-bottom:10px;font-size:.88rem}
.fgrid a{text-decoration:none}
.fgrid a:hover{color:var(--rose)}
.fbase{
  max-width:var(--wrap);margin:50px auto 0;padding-top:24px;border-top:2px dashed rgba(227,176,164,.30);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;opacity:.8;
}

/* --- Responsive --------------------------------------------------------- */
@media(max-width:960px){
  .nav{padding:16px 24px}
  .navlinks{display:none}
  .burger{display:block}
  .section{padding:64px 24px}
  .plate .inner{padding:52px 24px 56px}
  .hero .inner{padding:0 24px 44px}
  .feature{grid-template-columns:1fr;gap:44px}
  .disco{grid-template-columns:repeat(2,1fr)}
  .disco.roomy{grid-template-columns:repeat(2,1fr)}
  .vids{grid-template-columns:1fr}
  .split,.split.flip{grid-template-columns:1fr;gap:48px}
  .stats.four{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:1fr}
  .cards,.cards.two{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .persona .grid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .thread::before{left:8px}
  .mark{grid-template-columns:1fr;gap:0;padding-left:42px}
  .mark .yr{text-align:left;font-size:1.2rem}
  .mark .dot,.mark.big .dot{left:2px;top:12px}
  .foot{padding:48px 24px 28px}
}
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr}
  .signup input{border-right:2px dashed var(--accent);width:100%}
  .signup button{width:100%;margin-top:12px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}

/* --- Video plate --------------------------------------------------------
   The interior page banner with moving footage behind the heading. First
   used on song-price-to-pay.html. Three things matter here. The poster
   image is always in the markup, so the banner is complete before a single
   byte of video arrives and stays complete if the video never loads. The
   scrim is doing real work, because the footage swings from very dark to
   very bright inside two seconds and the heading has to survive both. And
   the video is muted, because every browser blocks sound until the visitor
   asks for it. The sound button is how they ask.
   To reuse on another song page, add plate--video to the plate, drop in the
   plate-media block with its two data attributes, and add the button.
   ----------------------------------------------------------------------- */
.plate--video .bgnote{display:none}
.plate--video .inner{
  min-height:clamp(340px,42vw,520px);
  padding-top:96px;padding-bottom:84px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.plate--video h1,.plate--video .script{text-shadow:0 2px 22px var(--scrim-strong)}
/* Amber cannot hold 4.5:1 against the bright frames in this footage whatever
   the scrim does, so the breadcrumb takes the cream ink over video. Amber is
   kept for the hover, where it is a state rather than the resting colour. */
.plate--video .crumb{color:var(--blush)}
.plate--video .crumb a:hover{color:var(--tan)}

.plate-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.plate-media .still,
.plate-media video{
  position:absolute;inset:0;display:block;border:0;
  width:100%;height:100%;object-fit:cover;object-position:center 38%;
}
.plate-media video{opacity:0;transition:opacity 800ms ease}
.plate-media video.is-playing{opacity:1}
.plate-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--scrim-soft) 0%,var(--scrim-veil) 22%,var(--scrim-strong) 100%),
    linear-gradient(90deg,var(--scrim-strong) 0%,var(--scrim-clear) 74%);
}

/* Sound toggle. Same shape as a chip so it reads as part of the set. */
.plate-sound{
  position:absolute;z-index:3;
  right:clamp(20px,3vw,44px);bottom:clamp(20px,3vw,32px);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:'Jost',system-ui,sans-serif;font-size:.68rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--blush);background:var(--scrim-strong);
  border:2px solid var(--blush);padding:11px 18px;
}
.plate-sound:hover{background:var(--blush);color:var(--espresso)}
.plate-sound[hidden]{display:none}
.plate-sound svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.plate-sound .waves{opacity:0}
.plate-sound .slash{opacity:1}
.plate-sound.is-on .waves{opacity:1}
.plate-sound.is-on .slash{opacity:0}

@media(max-width:960px){
  .plate--video .inner{min-height:clamp(300px,64vw,420px);padding-top:72px;padding-bottom:76px}
  .plate-sound{right:20px;bottom:18px;padding:10px 14px;font-size:.62rem;letter-spacing:.16em}
}

/* No motion means no motion. The poster carries the banner on its own. */
@media(prefers-reduced-motion:reduce){
  .plate-media video{display:none}
}

/* ------------------------------------------------------------------
   THE BAG AND THE TEAM LINK
   Added 1 August 2026 with the shop.
   Paste at the end of assets/css/site.css.
   ------------------------------------------------------------------ */

/* The bag only appears once there is something in it, so it is set
   hidden in the markup and revealed by the script. */
.navlinks a.bag[hidden],
.mobilemenu a.bag[hidden]{display:none}
.navlinks a.bag em,
.mobilemenu a.bag em{font-style:normal;font-weight:700}

/* Deliberately quiet. Nobody visiting to listen to a record needs to
   notice a staff door, so it sits at the same size as the rest of the
   base line and only lifts on hover. */
.fbase a.teamlink{opacity:.45}
.fbase a.teamlink:hover{opacity:1}


/* ------------------------------------------------------------------
   THE NAVIGATION, AT LAPTOP WIDTHS
   Added 1 August 2026.

   Adding Shop and Bag pushed the row past what fits between about
   1000 and 1250 pixels, which is exactly the width of most laptops.
   The page was being pushed sideways on every page of the site.

   Two changes. The gap and the letter spacing tighten as the room
   runs out, and the burger takes over at 1120 rather than 960, which
   is where the row actually stops fitting rather than where it was
   guessed to.
   ------------------------------------------------------------------ */

@media(max-width:1320px){
  .navlinks{gap:20px;letter-spacing:.18em}
  .navlinks a.cta{padding:11px 16px}
}

@media(max-width:1180px){
  .navlinks{gap:14px;letter-spacing:.12em;font-size:.7rem}
  .navlinks a.cta{padding:10px 13px}
}

@media(max-width:1120px){
  .navlinks{display:none}
  .burger{display:block}
}

/* Nothing decorative may push the page sideways. The big faint word
   behind a page heading is set to overflow on purpose, so the plate
   it sits in has to clip it. */
.plate{overflow:hidden}
body{overflow-x:hidden}