/* ==========================================================================
   Jennifer Ewbank  ·  jenniferewbank.nl
   Netherlands additions to the shared site stylesheet.
   Loaded AFTER site.css. Everything else on this site is the UK stylesheet,
   unchanged, so the two properties stay visually identical.
   Only two things live here. Do not put page styling in this file.
   ========================================================================== */

/* --- Region switcher ------------------------------------------------------
   NL, UK and Global. Sits in the navigation, the mobile menu and the footer
   base, so a visitor can always cross to the right property.
   -------------------------------------------------------------------------- */
.region{display:inline-flex;align-items:center;border:2px solid var(--espresso);line-height:1}
.region a{
  display:inline-block;padding:9px 11px;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  text-decoration:none;border-bottom:none;border-right:1px solid var(--stitch);
}
.region a:last-child{border-right:none}
.region a:hover{background:var(--accent);color:var(--je-plum-deep);border-bottom:none}
.region a[aria-current="true"]{background:var(--espresso);color:var(--blush)}
.region a[aria-current="true"]:hover{background:var(--espresso);color:var(--blush)}

/* On dark grounds: the footer base and the mobile menu */
.fbase .region{border-color:var(--rose)}
.fbase .region a{border-right-color:rgba(227,176,164,.35);color:var(--sand)}
.fbase .region a[aria-current="true"]{background:var(--rose);color:var(--espresso)}
.mobilemenu .region{margin-top:14px}
.mobilemenu .region a{padding:10px 14px;border-bottom:none}

/* --- Plain hero -----------------------------------------------------------
   The UK hero carries a photograph. No usage licence is on file from Michel
   Zoeter or SKIRR, so the Dutch pages run a token built ground instead. When
   the licences land, drop .plain and set a background image exactly as the
   UK hero does.
   -------------------------------------------------------------------------- */
.hero.plain{
  min-height:62vh;
  background:linear-gradient(160deg,var(--je-plum-deep) 0%,var(--je-plum) 55%,var(--je-navy) 100%);
}
.hero.plain::after{background:none}
.hero.plain h1{text-transform:none}

/* Shorter hero on interior pages */
.hero.plain.short{min-height:46vh}

/* --- Stat band inside a dark section --------------------------------------
   .stat sets a light background but no ink colour, so inside .darkwrap it
   inherits the pale text and the labels drop to cream on cream. Restore the
   dark ink. Same rule would be worth adding to the UK site.css.
   -------------------------------------------------------------------------- */
.darkwrap .stat{color:var(--espresso)}
.darkwrap .stat b{color:var(--whiskey)}

/* Table used on the archive page */
.tbl.nl{width:100%;border-collapse:collapse;margin-top:38px;font-size:.94rem}
.tbl.nl th,.tbl.nl td{text-align:left;padding:13px 14px;border-bottom:1px dashed var(--stitch);vertical-align:top}
.tbl.nl th{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--whiskey)}
.tbl.nl td.year{white-space:nowrap;font-variant-numeric:tabular-nums}
.tblwrap{overflow-x:auto}

/* Video grid, two up */
.vids.nl{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.vids.nl .v{border:2px dashed var(--stitch);padding:14px;background:var(--white)}
.vids.nl .ratio{position:relative;width:100%;padding-top:56.25%;background:var(--espresso)}
.vids.nl .ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vids.nl p{margin-top:12px;font-size:.9rem}
@media(max-width:820px){.vids.nl{grid-template-columns:1fr}}

/* --- Cards inside a dark section ------------------------------------------
   .card sets a light background but no ink colour, so within .darkwrap it
   inherits the pale text and becomes cream on cream. Same class of bug as
   .stat above.
   -------------------------------------------------------------------------- */
.darkwrap .card{color:var(--espresso)}
.darkwrap .card a{color:var(--whiskey)}
.darkwrap .card .no,.darkwrap .card .kicker{color:var(--whiskey)}

/* NOTE: the table year column is class "year", not "yr". site.js rewrites the
   text of every .yr element to the current year for the footer copyright, and
   it will happily rewrite a table cell too. Do not use .yr outside the footer. */

/* --- Release cards --------------------------------------------------------
   Cover artwork above the title, with a link through to the streaming page.
   Artwork files sit in assets/img and are served locally rather than
   hotlinked, so nothing breaks when a CDN path rotates.
   -------------------------------------------------------------------------- */
.rel{border:2px dashed var(--stitch);background:var(--white);padding:14px;color:var(--espresso)}
.rel a.art{display:block;text-decoration:none;border-bottom:none;position:relative}
.rel a.art img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.rel a.art::after{
  content:"\25B6";position:absolute;right:12px;bottom:12px;
  width:38px;height:38px;line-height:38px;text-align:center;
  background:var(--accent);color:var(--je-plum-deep);font-size:.8rem;
  opacity:0;transition:opacity 180ms ease;
}
.rel a.art:hover::after,.rel a.art:focus-visible::after{opacity:1}
.rel .body{padding:16px 12px 8px}
.rel h4{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.2rem;line-height:1.25}
.rel .kicker{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:800;color:var(--whiskey);margin-top:6px}
.rel p{margin-top:11px;font-size:.9rem}
.rel .links{margin-top:14px}
.rel .links a{
  display:inline-block;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  text-decoration:none;border:2px solid var(--espresso);padding:8px 14px;
}
.rel .links a:hover{background:var(--espresso);color:var(--blush)}

.rels{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.rels.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.rels,.rels.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rels,.rels.three{grid-template-columns:1fr}}

/* Featured release: artwork beside the copy */
.relfeature{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;margin-top:52px}
.relfeature .art img{display:block;width:100%;height:auto;border:2px dashed var(--stitch);padding:12px;background:var(--white)}
@media(max-width:900px){.relfeature{grid-template-columns:1fr;gap:32px}}

/* ==========================================================================
   HERO VIDEO  ·  Netherlands home page
   Mirrors the UK banner pattern. Colours via tokens only.
   Two differences from the UK version, both deliberate:
     1. A gradient sits under the video, so before the file loads, or if it is
        missing entirely, the hero is a finished plum ground rather than black.
     2. Reduce Motion gets an opt in Play button instead of a dead end. The UK
        script currently hides the control and returns, which leaves a visitor
        on that setting with no way to watch at all.
   ========================================================================== */

.hero.hasvideo{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,var(--je-plum-deep) 0%,var(--je-plum) 55%,var(--je-navy) 100%);
}
.hero.hasvideo>.herovid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;z-index:0;pointer-events:none;
  background-color:transparent;
}
.hero.hasvideo>.heroscrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:var(--je-plum-deep);opacity:.74;
}
@supports (background:color-mix(in srgb,white 50%,transparent)){
  .hero.hasvideo>.heroscrim{
    opacity:1;background-color:transparent;
    background-image:
      linear-gradient(100deg,
        color-mix(in srgb,var(--je-plum-deep) 93%,transparent) 0%,
        color-mix(in srgb,var(--je-plum-deep) 86%,transparent) 32%,
        color-mix(in srgb,var(--je-plum-deep) 52%,transparent) 66%,
        color-mix(in srgb,var(--je-plum-deep) 34%,transparent) 100%),
      linear-gradient(180deg,
        color-mix(in srgb,var(--je-plum-deep) 58%,transparent) 0%,
        color-mix(in srgb,var(--je-plum-deep) 0%,transparent) 30%,
        color-mix(in srgb,var(--je-plum-deep) 62%,transparent) 100%);
  }
}
.hero.hasvideo>.inner{position:relative;z-index:2}

/* --- Controls -------------------------------------------------------------- */
.hero .herocontrols{
  position:absolute;z-index:3;right:clamp(16px,4vw,46px);bottom:clamp(16px,4vw,40px);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;
}
.hero .vidcredit{
  font-family:var(--je-font-ui);font-size:.6rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--je-blush);opacity:.8;margin:0;
}
.hero .vidcredit a{color:inherit;border-bottom:1px solid currentColor;text-decoration:none}
.hero .vidcredit a:hover{color:var(--je-amber)}

.hero .soundbtn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--je-font-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--je-cream);
  background-color:transparent;border:1px solid var(--je-cream);
  border-radius:999px;padding:11px 20px;cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.hero .soundbtn:hover,.hero .soundbtn:focus-visible{
  background-color:var(--je-amber);color:var(--je-plum-deep);border-color:var(--je-amber);
}
.hero .soundbtn:focus-visible{outline:2px solid var(--je-cream);outline-offset:3px}
.hero .soundbtn .bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.hero .soundbtn .bars i{display:block;width:2px;height:3px;background-color:currentColor}
.hero .soundbtn.on .bars i{animation:jebars .9s ease-in-out infinite}
.hero .soundbtn.on .bars i:nth-child(2){animation-delay:.15s}
.hero .soundbtn.on .bars i:nth-child(3){animation-delay:.3s}
@keyframes jebars{0%,100%{height:3px}50%{height:11px}}
@media (prefers-reduced-motion:reduce){.hero .soundbtn.on .bars i{animation:none}}

@media (max-width:820px){
  .hero .herocontrols{right:16px;bottom:18px}
  .hero .vidcredit{display:none}
  .hero .soundbtn{font-size:.62rem;padding:9px 15px;letter-spacing:.14em}

  .hero.hasvideo>.heroscrim{background-color:var(--je-plum-deep);opacity:.72;background-image:none}
  @supports (background:color-mix(in srgb,white 50%,transparent)){
    .hero.hasvideo>.heroscrim{
      opacity:1;background-color:transparent;
      background-image:linear-gradient(180deg,
        color-mix(in srgb,var(--je-plum-deep) 62%,transparent) 0%,
        color-mix(in srgb,var(--je-plum-deep) 14%,transparent) 24%,
        color-mix(in srgb,var(--je-plum-deep) 32%,transparent) 44%,
        color-mix(in srgb,var(--je-plum-deep) 84%,transparent) 72%,
        color-mix(in srgb,var(--je-plum-deep) 96%,transparent) 100%);
    }
  }
  .hero.hasvideo>.herovid{object-position:center 26%}
  .hero.hasvideo{min-height:78svh}
}

/* --- Short video hero, interior pages -------------------------------------
   .hero.plain.short only ever matched the plain variant, so a video hero on
   an interior page came out the same height as the home page. An interior
   banner should be shorter, so the page proper starts sooner.

   The framing number changes with the height. At full height the hero is
   narrower than the 16:9 source, so the crop is horizontal and the vertical
   number does nothing. Shorten it and the crop becomes vertical, at which
   point 32 per cent starts cutting the top of her head. 22 holds it.
   -------------------------------------------------------------------------- */
.hero.hasvideo.short{min-height:58vh}
.hero.hasvideo.short>.herovid{object-position:center 22%}
@media(max-width:820px){
  .hero.hasvideo.short{min-height:62svh}
  .hero.hasvideo.short>.herovid{object-position:center 20%}
}

/* --- Prose columns ---------------------------------------------------------
   site.css sets .prose p{max-width:66ch} with no horizontal margin, so the
   body copy sits hard against the left edge of the section while the eyebrow,
   the title and the lead above it are all centred. The block reads as broken
   rather than as a deliberate choice.

   The fix is the column, not the alignment. Centre the measure and keep the
   text ranged left, because centred body copy is harder to read: the eye has
   to hunt for the start of every line.

   66ch is also wide for this size. 62 is closer to the 45 to 75 characters
   that reads comfortably, and the extra line height gives the long paragraphs
   on this page room to breathe.

   Same latent problem exists on the UK site, which shares this stylesheet.
   -------------------------------------------------------------------------- */
.prose{max-width:62ch;margin:38px auto 0}
.prose p{max-width:none;margin-top:20px;line-height:1.78}
.prose p:first-child{margin-top:0}

/* The lead is the bridge between a centred title and a ranged left column, so
   it gets the same measure. Without this it runs wider than the prose beneath
   and the two edges disagree. */
.lead{max-width:62ch}

/* Openings read better with the first line set slightly larger, which gives
   the eye somewhere to land after the title. */
.prose > p:first-child{font-size:1.06rem}

/* A short rule at the head of the column, ranged left with the text rather
   than centred. It marks the handover from the centred title and lead to the
   ranged left body, so the change of alignment reads as a decision instead of
   a mistake. Two pixels, nothing more.

   Use --accent, which is Golden Amber. Not --whiskey: despite the name that
   alias resolves to Clay Deep, and the rule comes out as a muted hairline
   almost the same colour as the body text. Worth knowing before reaching for
   it elsewhere. */
.prose::before{
  content:"";display:block;width:56px;height:2px;
  background:var(--accent);margin:0 0 30px;
}
/* On a dark band the amber is too hot against pale text. Soft Blush, which is
   what --rose resolves to, sits better and keeps the same weight. */
.darkwrap .prose::before{background:var(--rose)}

/* --- Dim plate variant ------------------------------------------------------
   The standard scrim assumes bright footage and darkens hard so the type can
   sit on top of it. The arena plate is already dark, mean luminance 65 out of
   255 with a floor of 32, and under the standard scrim it disappears
   altogether: a black rectangle with words on it.

   .dim opens up the right of the frame so the footage survives, while keeping
   the left and the top dark enough for the type. The numbers were not chosen
   by eye. They come from compositing the page, masking down to the pixels the
   glyphs actually cover, and taking the worst case across the whole loop:

     handwritten line   7.74 : 1   needs 4.5
     headline          10.45 : 1   needs 3.0   (large text)
     standing copy      9.35 : 1   needs 4.5

   The top of the vertical gradient is the load bearing number, at 88 per cent.
   The stage lighting in this clip throws bright beams across the upper left,
   which is exactly where the handwritten line sits. At the first setting that
   line measured 1.7 : 1. Widening the horizontal gradient did almost nothing;
   darkening the top fixed it in one move.
   -------------------------------------------------------------------------- */
.hero.hasvideo.dim>.heroscrim{background-color:var(--je-plum-deep);opacity:.55}
@supports (background:color-mix(in srgb,white 50%,transparent)){
  .hero.hasvideo.dim>.heroscrim{
    opacity:1;background-color:transparent;
    background-image:
      linear-gradient(100deg,
        color-mix(in srgb,var(--je-plum-deep) 95%,transparent) 0%,
        color-mix(in srgb,var(--je-plum-deep) 90%,transparent) 34%,
        color-mix(in srgb,var(--je-plum-deep) 48%,transparent) 68%,
        color-mix(in srgb,var(--je-plum-deep) 22%,transparent) 100%),
      linear-gradient(180deg,
        color-mix(in srgb,var(--je-plum-deep) 88%,transparent) 0%,
        color-mix(in srgb,var(--je-plum-deep) 26%,transparent) 34%,
        color-mix(in srgb,var(--je-plum-deep) 60%,transparent) 100%);
  }
}
@media(max-width:820px){
  .hero.hasvideo.dim>.heroscrim{
    background-image:linear-gradient(180deg,
      color-mix(in srgb,var(--je-plum-deep) 56%,transparent) 0%,
      color-mix(in srgb,var(--je-plum-deep) 20%,transparent) 30%,
      color-mix(in srgb,var(--je-plum-deep) 74%,transparent) 100%);
  }
}

/* ==========================================================================
   REGION SWITCHER  ·  v2
   --------------------------------------------------------------------------
   Three properties, one artist. The switcher is the only thing on the page
   that says so, and it has to survive on a light navigation bar, on a dark
   footer, and inside the mobile menu.

   The active region is filled with Golden Amber rather than outlined, because
   an outline reads as "clickable" and the point of the current one is that it
   is where you already are. The other two stay quiet until hovered.
   ========================================================================== */
.region{
  display:inline-flex;align-items:stretch;line-height:1;
  border:1px solid var(--stitch);border-radius:999px;overflow:hidden;
  background:color-mix(in srgb,var(--espresso) 5%,transparent);
}
@supports not (background:color-mix(in srgb,white 50%,transparent)){
  .region{background:transparent}
}
.region a{
  display:inline-flex;align-items:center;padding:8px 14px;
  font-family:'Jost',Verdana,sans-serif;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--espresso);text-decoration:none;border-bottom:none;
  transition:background-color .18s ease,color .18s ease;
}
.region a + a{border-left:1px solid var(--stitch)}
.region a:hover,.region a:focus-visible{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--espresso);border-bottom:none;
}
.region a[aria-current="true"]{
  background:var(--accent);color:var(--je-plum-deep);font-weight:800;cursor:default;
}
.region a[aria-current="true"]:hover{background:var(--accent)}
.region a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* On the dark footer base and inside the mobile menu */
.fbase .region,.mobilemenu .region{border-color:rgba(227,176,164,.30);background:transparent}
.fbase .region a,.mobilemenu .region a{color:var(--sand)}
.fbase .region a + a,.mobilemenu .region a + a{border-left-color:rgba(227,176,164,.30)}
.fbase .region a[aria-current="true"],.mobilemenu .region a[aria-current="true"]{
  background:var(--accent);color:var(--je-plum-deep);
}
.mobilemenu .region{margin-top:16px}
.mobilemenu .region a{padding:11px 16px;font-size:.64rem}
@media(max-width:1180px){.nav .region{display:none}}

/* Cross property links. The shop, the causes page and the press kit live on
   one property and are shared by all three, so those links leave the site the
   visitor is on. Marking them is honesty, not decoration: an unmarked link
   that changes domain is the thing people complain about. */
.navlinks a.xsite::after,.mobilemenu a.xsite::after,.foot a.xsite::after{
  content:"\2197";font-size:.72em;margin-left:.28em;opacity:.65;
}

/* ==========================================================================
   CONSENT BANNER
   --------------------------------------------------------------------------
   PECR and GDPR: nothing non essential may be set before a choice is made, and
   refusing has to be as easy as accepting. So Accept and Decline are the same
   size, the same weight and next to each other. No pre ticked anything, no
   "legitimate interest" hidden behind a second screen, and the banner does not
   block the page, because a wall is not consent, it is coercion.
   ========================================================================== */
.cbanner{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--espresso);color:var(--sand);
  border-top:2px solid var(--accent);
  padding:20px clamp(16px,4vw,40px);
  display:none;
}
.cbanner.show{display:block}
.cbanner .cinner{
  max-width:var(--wrap);margin:0 auto;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between;
}
.cbanner p{margin:0;max-width:62ch;font-size:.88rem;line-height:1.6;color:var(--sand)}
.cbanner a{color:var(--rose);text-decoration:underline;text-underline-offset:3px}
.cbanner .cbtns{display:flex;gap:10px;flex-wrap:wrap}
.cbanner button{
  font-family:'Jost',Verdana,sans-serif;font-size:.66rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  padding:12px 22px;border-radius:999px;border:1px solid var(--sand);
  background:transparent;color:var(--sand);
  transition:background-color .18s ease,color .18s ease;
}
.cbanner button:hover{background:var(--sand);color:var(--espresso)}
.cbanner button.primary{background:var(--accent);border-color:var(--accent);color:var(--je-plum-deep)}
.cbanner button.primary:hover{background:var(--rose);border-color:var(--rose);color:var(--espresso)}
.cbanner button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){
  .cbanner .cinner{flex-direction:column;align-items:flex-start}
  .cbanner .cbtns{width:100%}
  .cbanner button{flex:1 1 auto}
}

/* --- Navigation fit --------------------------------------------------------
   The shared bar was built for the UK menu. These sites carry the same links
   plus a three part region switcher, and the Dutch site also has the longest
   item on any of the three, "TV & Radio". At around 1440 the whole row runs
   into the wordmark.

   The bar keeps its full spacing on a wide screen and tightens between there
   and the point where the switcher steps out of the bar altogether. Letter
   spacing gives up the most width for the least legibility, so it goes first.
   -------------------------------------------------------------------------- */
@media(min-width:1181px) and (max-width:1620px){
  .nav{padding:20px 32px}
  .navlinks{gap:20px;font-size:.68rem;letter-spacing:.15em}
  .region a{padding:8px 11px;letter-spacing:.12em}
  .nav .cta{padding-left:20px;padding-right:20px}
}
@media(min-width:1181px) and (max-width:1400px){
  .navlinks{gap:15px;font-size:.64rem;letter-spacing:.10em}
  .wordmark{font-size:1.15rem}
}

/* The consent banner is fixed to the bottom, so on a short screen it can sit
   over the last items of an open mobile menu. Give the menu its own scroll and
   enough bottom padding to clear the banner. */
@media(max-width:1120px){
  .mobilemenu.open{max-height:76vh;overflow-y:auto;padding-bottom:220px}
}