/* ============================================================
   EVERMORE GROUP — demo layer, on top of /assets/ev.css
   Dev preview only (_src is never deployed). Everything the site
   already has (type, tokens, reveals, loader, curtain, cursor, the
   chevron arrow) is reused as is; this file only adds the landing.
   ============================================================ */

/* ---------------------------------------------------- the lockup
   Where a logo will go, set as text until the logos exist: EVERMORE
   over the name, caps, two lines, the shape and weight of the Agency
   lockup, so a real logo drops into the same box later. */
.lockup{
  display:flex;align-items:flex-start;
  gap:.29em;            /* the Agency logo's own icon-to-word gap, .168 x the icon */
  font-weight:600;
  text-transform:uppercase;
  line-height:1;
  letter-spacing:.015em;
  white-space:nowrap;
}
.lockup__type{display:block}
.lockup__type > span{display:block}
.lockup .reveal > *{transition-duration:1s}
/* The icon runs from the cap top of EVERMORE to the baseline of the
   second line, like the Agency logo. Measured on Söhne 600 at
   line-height 1: cap top .18em, second baseline 1.90em. */
.lockup__mark{flex:none;display:block;width:1.72em;height:1.72em;margin-top:.18em}
.lockup__mark > span{height:100%}
.mark{display:block;width:100%;height:100%;fill:currentColor;overflow:visible}

/* ------------------------------------------------ the Group logo
   The whole mark, a thin rule, EVERMORE GROUP on one line in spaced
   caps. Sized from the type: the mark is 2.2em, about three cap
   heights, the rule as tall as the mark. In the header the mark comes
   out the height of the Agency logo's own icon (~33px at 1440). */
.glock{
  display:flex;align-items:center;gap:.95em;
  font-weight:500;text-transform:uppercase;letter-spacing:.2em;
  line-height:1;white-space:nowrap;
}
.glock__mark{flex:none;display:block;width:2.2em;height:2.2em}
.glock__mark > span{height:100%}
.glock__rule{
  flex:none;display:block;width:1px;height:2.2em;
  background:currentColor;opacity:.42;
  transition:transform 1s var(--ease) .2s;
}
/* caps sit .04em under the middle of a line-height-1 box (cap top .18em,
   baseline .90em), so lift them onto the mark's centre; the negative
   margin takes back the tracking after the last letter */
.glock__type{display:block;position:relative;top:-.04em;margin-right:-.2em}

/* --------------------------------------- every brand, one size
   A brand's two-line lockup is set at the Agency logo's own scale,
   measured off the PNG (1024 wide: icon 238px tall, caps 99px): font
   size .1343 x the logo's width puts the icon and the caps at the same
   height as the Agency's, so the four brands weigh the same in a
   header. --lock is that size at the header logo's width. */
:root{--lock:calc(clamp(120px,11vw,168px) * .1343)}
/* Management's header and menu logo (build.py's group build): the link
   keeps every width ev.css gives .hdr__logo, and the lockup follows it */
.hdr__logo--lockup{container-type:inline-size}
.hdr__logo--lockup > .lockup{font-size:calc(100cqw * .1343)}
.menu .hdr__logo--lockup{color:var(--ink)}

.g .hdr__logo{width:auto;font-size:clamp(.8125rem,1.05vw,1rem)}
.g .hdr__logo.lockup{font-size:var(--lock)}
.g .hdr::before{opacity:.5}
.g .hdr__nav a{font-size:.875rem}

/* the loader carries the page's own brand */
.g .load__inner,.load__inner:has(> .lockup){width:auto}
.load__logo.glock{width:auto;font-size:clamp(1rem,1.5vw,1.25rem)}
.load__logo.lockup{width:auto;font-size:calc(min(240px,54vw) * .1343)}

/* ------------------------------------------------- the curtain
   It holds every brand's mark (curtain_marks() in make.py) and shows
   the page's own, unless the link clicked names another brand in
   data-to: then it carries the logo of where you are going. */
.curtain [data-mark]{display:none}
.curtain .curtain__mark--own{display:flex}
.curtain img.curtain__mark--own{display:block}
html[data-to]:not([data-to=""]) .curtain .curtain__mark--own{display:none}
html[data-to="group"] .curtain [data-mark="group"],
html[data-to="management"] .curtain [data-mark="management"],
html[data-to="talents"] .curtain [data-mark="talents"]{display:flex}
html[data-to="agency"] .curtain [data-mark="agency"]{display:block}
.curtain__mark--text{width:auto;filter:none;color:var(--ink)}
/* the Group's mark: top left, like every text mark. The landing signs
   at the bottom, so the curtain carries it away as it lifts. */
.curtain__mark.glock{font-size:clamp(.8125rem,1.05vw,1rem);width:max-content}
.curtain__mark.lockup{font-size:var(--lock)}
/* a text mark lands exactly where that brand's header has its logo, so
   when the curtain lifts the logo stays put and only changes colour.
   The Agency PNG keeps the curtain's own place, as on the live site. */
html:is([data-to="group"],[data-to="management"],[data-to="talents"]) .curtain__inner,
html:not([data-to="agency"]) .curtain__inner:has(> .curtain__mark--own.curtain__mark--text){
  max-width:none;padding-top:clamp(1rem,2.2vw,1.75rem);
}

/* ------------------------------------ the way back to the house
   Each brand keeps its own menu as it was, plus one item that goes back
   to all the brands (5 Oct 2026, the agency, after a house menu with
   drops was "super lelijk"). build.py GROUP_WORD, _hdr_nav, _menu_nav.
   In the header: after a hairline, a word like the others. In the menu
   panel: under a short rule, in ink, at .6 of the brand's words, so it
   reads as one more item and as one level up. At the words' full size
   "Evermore Group", the longest word in the panel, outweighed the
   brand's own menu (tried, 5 Oct 2026). */
.hdr__sep{display:block;flex:none;width:1px;height:1rem;background:currentColor;opacity:.4}
.menu__nav a.menu__house{
  margin-top:clamp(.5rem,2vh,1.25rem);
  padding-top:clamp(.85rem,3vh,1.9rem);
  font-size:calc(clamp(2rem,3.7vw,3.625rem) * .6);
  letter-spacing:-.025em;
}
/* the rule: one em of the word, the underline's own weight, drawn in from
   the right edge once the words have arrived; on close it rides out */
.menu__nav a.menu__house::before{
  content:"";position:absolute;right:0;top:0;width:1em;height:2px;
  background:var(--ink);
  transform:scaleX(0);transform-origin:right;
  transition:transform .8s var(--ease);
}
.menu.is-open .menu__house::before{transform:none;transition-delay:.55s}
.menu.is-closing .menu__house::before{transform:none;transition:none}
.menu:not(.is-open):not(.is-closing) .menu__house::before{transition:none}
@media (max-height:560px){
  /* 844x390: six words and the contact block still fit without a scroll */
  .menu__nav a.menu__house{margin-top:.2rem;padding-top:.55rem;font-size:calc(clamp(1.5rem,5.4vh,2.25rem) * .6)}
}

/* ---------------------------------------------------- page frame
   One screen on a desktop. ev.css
   reserves a scrollbar gutter for the menu; these pages have no menu
   and do not scroll on a desktop, so the gutter would be a bare strip. */
html.g-html{scrollbar-gutter:auto}
.g{min-height:100svh;display:flex;flex-direction:column}

/* the old hero film, one continuous field behind everything */
.g__media{
  position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink);
  transition:opacity 2.2s var(--ease-io);
}
.g__poster,.g__video{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;transform:scale(1.04);
}
.g__video{opacity:0;transition:opacity 1.6s var(--ease)}
.g__video.is-playing{opacity:1}
.g__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,11,.3) 0%,rgba(11,11,11,.12) 34%,rgba(11,11,11,.36) 68%,rgba(11,11,11,.82) 100%);
}
html.g-plain .g__media{display:none}

/* ------------------------------------------- the brand logos
   lockup("Agency"|"Management") is the agency's own vector (make.py
   logo_svg). At a given font-size it takes the Agency PNG's box: the
   PNG is 1024x262 and the lockup's font-size is .1343 x its width, so
   the drawing is 262/1024/.1343 = 1.9052em high. */
.lockup--logo{display:block;width:max-content}
.lockup--logo svg{display:block;height:1.9052em;width:auto;overflow:visible}
.lockup--logo .reveal{display:block}
.lockup--logo .reveal > *{display:block}

/* =================================================================
   THE LANDING (28 Oct 2026, third design): the Agency home's language
   The house's film full bleed, rising out of the ink; the Group lockup
   where every brand has its logo, nothing opposite it; at the foot the
   Group's line and the two brands as two rows of an index, the real
   logos large on one diagonal (Agency left and high, Management right
   and low). Pointing at a brand steps the other row back. Rejected the
   same day, do not rebuild: two words at a centre rule over the film,
   and two flat fields of mint and ink with the Group on the seam or in
   a band under them ("vergeleken met de agency website ... lelijk").
   ================================================================= */
.g--home{
  /* the logos' height: the Agency PNG's box, so both brands weigh the same */
  --gl:clamp(3.25rem,6.6vw,6.75rem);
  min-height:100svh;background:var(--ink);
}

/* the photography: fixed, full bleed, behind everything */
.gm{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.gm__stage{
  position:absolute;inset:-1.5%;          /* room for the pointer drift */
  /* arrival: the picture comes up out of the ink, settling as it does;
     paused by group.js until the loader has gone, plays without JS */
  animation:g-in 2.8s var(--ease) .05s backwards;
}
@keyframes g-in{from{opacity:0;transform:scale(1.07)}}
html.g-hold .gm__stage{animation-play-state:paused}
/* the film: the poster is the LCP and what reduced motion, Save-Data and
   a slow line keep; the loop fades in over it once it plays (group.js) */
.gm .g__poster,.gm .g__video{transform:scale(1.03)}
/* the film is dark already: the scrim only settles the foot, where the
   index sits, and the top edge under the lockup */
.gm::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(11,11,11,.4) 0%,rgba(11,11,11,.08) 24%,rgba(11,11,11,.12) 46%,rgba(11,11,11,.6) 74%,rgba(11,11,11,.88) 100%);
}

/* the Group lockup, where every brand has its logo; the curtain's Group
   mark lands on it */
.gx__h1{margin:0}
.g--home .hdr{z-index:5}

/* the page: one screen, everything at the foot like the Agency hero */
.gx{
  position:relative;z-index:1;
  min-height:100svh;display:flex;align-items:flex-end;
  padding:clamp(7rem,18vh,11rem) 0 clamp(1rem,2.6vh,1.75rem);
}
.gx__in{width:100%}
.gx__line{
  max-width:19em;text-wrap:balance;
  margin-bottom:clamp(1.5rem,4.5vh,3rem);
  font-size:clamp(1.125rem,.85rem + .9vw,1.75rem);font-weight:500;
  line-height:1.22;letter-spacing:-.015em;color:var(--paper);
}
.gx__line .reveal{padding-bottom:.12em;margin-bottom:-.12em}

/* the index: two rows between hairlines that draw in on arrival */
.gx__list{position:relative}
.gx__list::after,.gx__row::before{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--line-strong);
  transform-origin:left;
  animation:g-draw 1.5s var(--ease) calc(750ms + var(--i,0) * 170ms) backwards;
}
.gx__row::before{top:0}
.gx__list::after{bottom:0;--i:2}
@keyframes g-draw{from{transform:scaleX(0)}}
.gx__row{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 3rem;
  padding-block:clamp(1rem,3.2vh,2.1rem);
  color:var(--paper);-webkit-tap-highlight-color:transparent;
  transition:opacity .6s var(--ease-io);
}
/* the diagonal: Management's logo on the right */
.gx__row--management{flex-direction:row-reverse}
.gx__logo{position:relative;display:block;flex:none;font-size:calc(var(--gl) / 1.9052)}
.gx__lock{transition:translate .7s cubic-bezier(.17,.17,0,1)}
.gx__lock .reveal > *{transition-duration:1.25s}
/* the Agency roster's hover: the name slides, a short mint bar draws in
   where it was. Management mirrors it, towards the middle. */
.gx__logo::before{
  content:"";position:absolute;top:50%;left:0;width:2rem;height:3px;margin-top:-1.5px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.17,.17,0,1);
}
.gx__row--management .gx__logo::before{left:auto;right:0;transform-origin:right}

/* the brand's own line, and the site's chevron with a shaft */
.gx__say{
  display:flex;align-items:center;gap:.9rem;
  font-size:clamp(.9375rem,.85rem + .3vw,1.125rem);line-height:1.35;
  color:var(--paper-dim);text-wrap:balance;transition:color .4s var(--ease);
}
.gx__say i{position:relative;display:block;flex:none;width:15px;height:10px;
  animation:g-fade .9s var(--ease) calc(1500ms + var(--i) * 180ms) backwards}
.gx__say i::before,.gx__say i::after{content:"";position:absolute;top:50%;left:0}
.gx__say i::before{
  width:7px;height:7px;margin-top:-3.5px;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);transition:translate .35s var(--ease-menu);
}
.gx__say i::after{
  width:13px;height:1.5px;margin-top:-.75px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-menu);
}
@keyframes g-fade{from{opacity:0}}

@media (hover:hover){
  .gx__list:has(.gx__row:hover) .gx__row:not(:hover){opacity:.32}
  .gx__row--agency:hover .gx__lock{translate:3rem 0}
  .gx__row--management:hover .gx__lock{translate:-3rem 0}
  .gx__row:hover .gx__logo::before{transform:scaleX(1);transition-delay:.12s}
  .gx__row:hover .gx__say{color:var(--paper)}
  .gx__row:hover .gx__say i::before{translate:5px 0}
  .gx__row:hover .gx__say i::after{transform:scaleX(1)}
}
.gx__row:focus-visible{outline:none}
.gx__list:has(.gx__row:focus-visible) .gx__row:not(:focus-visible){opacity:.32}
.gx__row--agency:focus-visible .gx__lock{translate:3rem 0}
.gx__row--management:focus-visible .gx__lock{translate:-3rem 0}
.gx__row:focus-visible .gx__logo::before{transform:scaleX(1)}
.gx__row:focus-visible .gx__say{color:var(--paper)}
.gx__row:focus-visible .gx__say i::before{translate:5px 0}
.gx__row:focus-visible .gx__say i::after{transform:scaleX(1)}

/* the Group's small print, under the index */
.gx__foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;
  padding-top:clamp(.9rem,2.2vh,1.4rem);
  font-size:.8125rem;line-height:1.4;color:var(--paper-faint);
  animation:g-fade 1.2s var(--ease) 1.9s backwards;
}
.gx__links{display:flex;gap:1.75rem}
.gx__foot a{position:relative;padding-block:.2rem;color:var(--paper-dim);transition:color .3s var(--ease)}
.gx__foot a:hover{color:var(--paper)}
.gx__foot a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--ease-io);
}
.gx__foot a:hover::after{transform:scaleX(1)}
html.g-hold .gx__list::after,html.g-hold .gx__row::before,html.g-hold .gx__say i,html.g-hold .gx__foot{animation-play-state:paused}

/* upright and narrow: each row stacks its logo over its line, the
   diagonal stays (Agency left, Management right) */
@media (max-width:700px){
  .g--home{--gl:min(12.6vw,4.25rem)}
  .gx{padding-top:7rem}
  .gx__line{font-size:1.1875rem;max-width:15em}
  .gx__row{flex-direction:column;align-items:flex-start;gap:.85rem;padding-block:1.35rem 1.4rem}
  .gx__row--management{flex-direction:column;align-items:flex-end}
  .gx__row--management .gx__say{justify-content:flex-end;text-align:right}
  .gx__say{font-size:.9375rem}
  .gx__foot{font-size:.75rem}
}
@media (max-width:380px){.gx__say{font-size:.875rem}}
/* a landscape phone: the same, smaller, one screen */
@media (max-height:520px) and (orientation:landscape){
  .g--home{--gl:min(6.4vw,12svh)}
  .gx{padding-top:5rem;padding-bottom:.75rem}
  .gx__line{font-size:1rem;max-width:none;margin-bottom:.9rem}
  .gx__row{padding-block:.7rem}
  .gx__say{font-size:.875rem}
  .gx__foot{padding-top:.6rem;font-size:.6875rem}
}

/* ---------------------------------------------------- coming soon */
.soon{
  position:relative;z-index:1;flex:1;
  display:flex;align-items:flex-end;
  min-height:30rem;
  padding-block:clamp(7rem,16vh,10rem) clamp(2.25rem,6vh,4rem);
}
.g--soon .g__media::after{
  background:linear-gradient(180deg,rgba(11,11,11,.42) 0%,rgba(11,11,11,.3) 34%,rgba(11,11,11,.55) 68%,rgba(11,11,11,.88) 100%);
}
.soon__meta{margin-top:clamp(1.75rem,3.5vw,3rem)}
/* the brand's icon over its name, the size of one line of caps */
.soon__mark{width:clamp(2.75rem,5.2vw,5rem);margin-bottom:clamp(1.25rem,2.4vw,2.25rem);color:var(--paper)}
.soon__mark .mark{height:auto}
/* the brand's own line, from the brand architecture, under its name */
.soon__line{
  margin-top:clamp(1.25rem,2.4vw,2rem);max-width:34ch;text-wrap:balance;
  font-size:clamp(1.0625rem,1.5vw,1.375rem);line-height:1.35;color:var(--paper-dim);
  transition:opacity .9s var(--ease) .5s,translate .9s var(--ease) .5s;
}
.soon__meta .label{transition:opacity .8s var(--ease) .6s}
.soon__meta .ulink{transition:opacity .8s var(--ease) .7s}

/* ---------------------------------------------------- the bottom bar */
.g__foot{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem 2rem;
  padding:1.05rem var(--gutter) 1.15rem;
  border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.4;color:var(--paper-dim);
  background:rgba(11,11,11,.5);
  transition:opacity 1s var(--ease) .8s;
}
.g__foot p{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.75rem}
.g__foot a{position:relative;padding-block:.2rem}
.g__foot a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:center;
  transition:transform .45s var(--ease-io);
}
.g__foot a:hover::after{transform:scaleX(1)}
.g__copy{color:var(--paper-faint);padding-block:.2rem}

/* ---------------------------------------------------- arrival
   group.js holds this state until the loader lifts (or at once after
   the curtain), then lets go: the rules draw, the names rise out of
   their masks column by column, the lines under them follow, then the
   bottom bar. Set by JS only, so with JS off nothing is ever hidden. */
html.g-hold .g__media{opacity:0}
html.g-hold .reveal > *{transform:translate3d(0,130%,0)}
html.g-hold .soon__meta .label,html.g-hold .soon__meta .ulink{opacity:0}
html.g-hold .soon__line{opacity:0;translate:0 14px}
html.g-hold .g__foot{opacity:0}
html.g-hold .glock__rule{transform:scaleY(0)}

/* ---------------------------------------------------- phone
   The axis turns horizontal: two halves stacked, the names meeting at
   the rule from above and below, centred like the house above them. */
@media (max-width:860px) and (min-height:521px), (max-width:860px) and (orientation:portrait){
  .g .hdr__nav{display:flex;gap:1.1rem}
  .g .hdr__nav a{font-size:.8125rem}
  .g__foot{gap:.35rem 1.5rem;padding-block:.9rem 1rem;justify-content:center;text-align:center}
  .g__foot p{gap:.25rem 1.25rem;justify-content:center}
}
/* a phone: the lockup with its icon and the three-word nav share one
   row on the coming-soon pages, so both step down together. The curtain's
   text mark follows the header, it has to land on it. */
@media (max-width:420px){
  .g .hdr__logo.glock,.curtain__mark.glock{font-size:.75rem}
  .g .hdr__nav{gap:.85rem}
  .g .hdr__nav a{font-size:.75rem}
}
/* a landscape phone keeps the split (the stacked layout above needs the
   height), set smaller */
@media (max-height:520px) and (orientation:landscape){
  .soon{min-height:100svh;padding-block:5.5rem 1.5rem}
}

/* ------------------------------------- the Agency inside the group
   build.py's group build of the Agency (_src/demo/agency/, see GROUP
   there) links this file for the rules below; nothing else in this file
   matches its markup. */
/* ------------------------------------- Evermore Management
   The brand book (28 Oct 2026, "Evermore Management, Brand Book"): one
   page, five sections in its order (opening, artists, what we do, about,
   contact), the quietest room in the building. Same house system with
   more space and fewer elements, near-black and mint only, one idea per
   screen, and nothing that moves except scrolling: blocks only fade in,
   nothing slides, scales or follows the pointer. build_management() and
   build_mg_artist() in build.py. */
.mg .rise,.mgc .rise{transform:none;transition:opacity 1.1s var(--ease);transition-delay:var(--delay,0ms)}
.mg .media img{transform:none;transition:none}

/* 1. the opening: the lockup and the line, nothing else, no button. The
   header's own logo steps aside, so the mark is on the screen once. */
body:has(.mg--home) .hdr > .hdr__logo{visibility:hidden}
.mgo{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:7rem clamp(3.5rem,13vh,9rem)}
.mgo__h1{margin:0;line-height:1}
.mgo__lock{font-size:clamp(2.35rem,6.2vw,6.75rem);color:var(--paper)}
.mgo__line{margin-top:clamp(1.5rem,3.2vw,2.75rem);max-width:30ch;
  font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.35;color:var(--paper-dim)}

/* every section: a label column and a content column, generous air */
.mgs{padding-block:clamp(6rem,14vw,13rem);scroll-margin-top:0}
.mgs + .mgs{border-top:1px solid var(--line)}
.mgs__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s4) clamp(2rem,6vw,6rem);align-items:start}
.mgs__label{margin:0;padding-top:.45em}
.mgs--artists .mgs__label{margin-bottom:clamp(2rem,4vw,3.5rem)}

/* 2. the artists: large portraits, the name under each. No count, no
   genre, no order beyond A-Z. */
.mgr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.5rem)}
.mgr__item{display:block;color:var(--paper);text-decoration:none}
.mgr__item:focus-visible{outline:2px solid var(--mint);outline-offset:6px}
.mgr__media{aspect-ratio:2/3}
.mgr__media img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,30%)}
.mgr__media::after{content:"";position:absolute;inset:0;background:rgba(11,11,11,.2);
  transition:opacity .6s var(--ease);pointer-events:none}
.mgr__name{margin:0;padding-top:1.1rem;font-size:clamp(1.375rem,2.2vw,2.125rem);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.mgr__name span{position:relative;display:inline-block;padding-bottom:.12em}
/* the house underline, grown from the middle, in mint: what is
   interactive on hover */
.mgr__name span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--mint);transform:scaleX(0);transform-origin:center;transition:transform .45s var(--ease-io)}
@media (hover:hover){
  .mgr__item:hover .mgr__media::after{opacity:0}
  .mgr__item:hover .mgr__name span::after{transform:scaleX(1)}
}
.mgr__item:focus-visible .mgr__name span::after{transform:scaleX(1)}

/* 3. what we do: four lines between hairlines, no icons */
.mgw{margin:0;border-top:1px solid var(--line)}
.mgw__row{display:grid;grid-template-columns:minmax(8rem,1fr) minmax(0,2fr);gap:var(--s2) var(--s4);
  padding-block:clamp(1.4rem,2.6vw,2.25rem);border-bottom:1px solid var(--line)}
.mgw dt,.mgw dd{margin:0;font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.35}
.mgw dt{font-weight:600;color:var(--paper);letter-spacing:-.01em}
.mgw dd{color:var(--paper-dim);max-width:32ch}

/* 4. about: one statement, then where it belongs */
.mgab__line{max-width:21ch;font-size:clamp(1.75rem,3.5vw,3.5rem);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--paper)}
.mgab__part{margin-top:clamp(1.5rem,3vw,2.5rem);font-size:clamp(1.0625rem,1.3vw,1.25rem);color:var(--paper-dim)}
.mgab__part .ulink{color:var(--paper)}

/* 5. contact: the page inverts once, for the address only. No form, no
   line for artists. */
.mgc.field{padding-block:clamp(6rem,13vw,12rem) clamp(4rem,9vw,8rem);scroll-margin-top:0}
.mgc__who{font-size:clamp(1.0625rem,1.3vw,1.25rem);color:rgba(11,11,11,.66)}
.mgc__mail{position:relative;display:inline-block;margin-top:.6rem;padding-bottom:.08em;color:var(--ink);text-decoration:none;
  font-size:clamp(1.375rem,4.6vw,4.25rem);font-weight:600;line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere}
.mgc__mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
  transform:scaleX(1);transform-origin:center;transition:transform .45s var(--ease-io)}
.mgc__mail:hover::after{transform:scaleX(0)}

/* the footer: the brand book's signature line, the two other houses,
   then the small print. One field with the contact above it. */
.ftr.mgf{padding-block:clamp(3.5rem,7vw,6rem) clamp(1.25rem,2.4vw,2rem)}
.ftr.mgf--joined{padding-top:0}
.mgf:not(.mgf--joined) .mgf__row:first-child{border-top:0;padding-top:0}
.mgf__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4);
  padding-block:clamp(1.5rem,3vw,2.25rem);border-top:1px solid rgba(11,11,11,.16)}
.mgf__sign{font-size:clamp(.9375rem,1.1vw,1.0625rem);color:var(--ink)}
.mgf__house{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4)}
.ftr .mgf__house a,.ftr .mgf__links a{color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;
  transition:text-decoration-color var(--d-fast) var(--ease)}
.ftr .mgf__house a:hover,.ftr .mgf__links a:hover{text-decoration-color:currentColor}
.mgf__house a{font-size:clamp(.9375rem,1.1vw,1.0625rem);font-weight:500}
.mgf__row--small{border-top:0;padding-block:0;font-size:.8125rem}
.mgf__links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.mgf__copy{color:rgba(11,11,11,.5)}

/* the artist page, the brand book's template: name, one line, latest,
   links, bookings. The portrait stands on the left, one screen high; the
   facts sit at the foot of the right half, the way back at its top. */
.mga{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.mga__media.media{position:sticky;top:0;height:100svh}
.mga__media img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,30%)}
.mga__body{display:flex;flex-direction:column;min-width:0;min-height:100svh;
  padding:clamp(7rem,16vh,10rem) var(--gutter) clamp(3rem,8vh,5.5rem) clamp(2rem,5vw,6.5rem)}
.mga__body > *{max-width:36rem}
.mga__name{margin-top:auto;padding-top:var(--s5);font-size:clamp(3rem,6.5vw,7rem);font-weight:600;line-height:.92;letter-spacing:-.045em}
.mga__one{margin-top:clamp(1rem,2vw,1.5rem);font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.35;color:var(--paper-dim)}
.mga__facts{margin:clamp(2.5rem,7vh,4.5rem) 0 0;border-top:1px solid var(--line)}
.mga__row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--s2);align-items:baseline;
  padding-block:1.05rem;border-bottom:1px solid var(--line)}
.mga__row dt{margin:0}
.mga__row dd{margin:0;color:var(--paper)}
.mga__links{display:flex;flex-wrap:wrap;gap:0 clamp(1rem,2vw,1.5rem);margin:-.45rem 0}
.mga__agency{display:inline-flex;align-items:center;gap:.6rem;color:var(--paper);text-decoration:none;font-weight:500}
.mga__agency i{position:relative;display:block;flex:none;width:12px;height:10px}
.mga__agency i::before,.mga__agency i::after{content:"";position:absolute;top:50%;left:0}
.mga__agency i::before{width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;
  transform:rotate(45deg);transition:translate .2s cubic-bezier(.4,0,.2,1)}
.mga__agency i::after{width:10px;height:1.5px;margin-top:-.75px;background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .2s cubic-bezier(.4,0,.2,1)}
.mga__agency:hover,.mga__agency:focus-visible{color:var(--mint)}
.mga__agency:hover i::before,.mga__agency:focus-visible i::before{translate:4px 0}
.mga__agency:hover i::after,.mga__agency:focus-visible i::after{transform:scaleX(1)}
.mgp{margin-block:clamp(4rem,9vw,8rem) clamp(4rem,9vw,8rem)}

/* a tablet and under: the artists one per screen, edge to edge */
@media (max-width:699px){
  .mgs__grid{grid-template-columns:1fr}
  .mgr{grid-template-columns:1fr;gap:clamp(3rem,9vw,4.5rem);margin-inline:calc(var(--gutter) * -1)}
  .mgr__media{aspect-ratio:auto;height:min(80svh,150vw)}
  .mgr__name{padding-inline:var(--gutter)}
  .mgw__row{grid-template-columns:1fr;gap:.35rem}
  .mgf__row{flex-direction:column;gap:var(--s2)}
}
/* upright and narrow: the portrait on top, one screen, the facts under
   it. A landscape phone keeps the split. */
@media (max-width:899px) and (orientation:portrait){
  .mga{grid-template-columns:1fr}
  .mga__media.media{position:relative;height:min(78svh,150vw)}
  .mga__body{min-height:0;padding:2.25rem var(--gutter) 0}
  .mga__name{margin-top:1.25rem;padding-top:0}
  .mga__row{grid-template-columns:7rem minmax(0,1fr)}
}
@media (max-height:560px) and (orientation:landscape){
  .mgo{padding-block:5rem 2.25rem}
  .mgo__lock{font-size:clamp(2rem,5vw,3.25rem)}
  .mga__body{padding-top:5.5rem;padding-bottom:2rem}
  .mga__name{font-size:clamp(2.25rem,6vw,3.5rem)}
  .mga__facts{margin-top:1.5rem}
  .mga__row{padding-block:.6rem;grid-template-columns:6.5rem minmax(0,1fr)}
}

/* ------------------------------ Management, while its site is built
   mgmt.evermoregroup.nl from 28 Oct 2026 (make.py build_mg_soon()): the
   brand book's opening screen on its own. The lockup large, the line,
   then three facts between hairlines, the book's signature at the foot.
   One screen, ink only, nothing moves but the fade in. */
.mgx{background:var(--ink)}
.mgx__main{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(5rem,14vh,9rem) clamp(2.5rem,7vh,4.5rem)}
.mgx__h1{margin:0;line-height:1}
.mgx__h1 .reveal{padding-bottom:.1em;margin-bottom:-.1em}
.mgx__lock{font-size:clamp(2.35rem,6.2vw,6.75rem);color:var(--paper)}
.mgx__line{margin-top:clamp(1.25rem,2.8vw,2.5rem);max-width:30ch;
  font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.35;color:var(--paper-dim)}
.mgx__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2) var(--s4);
  margin:clamp(3rem,10vh,6.5rem) 0 0;padding-top:1.25rem;border-top:1px solid var(--line)}
.mgx__row{margin:0}
.mgx__row dt{margin:0 0 .5rem}
.mgx__row dd{margin:0;color:var(--paper);font-size:clamp(1rem,1.15vw,1.125rem)}
.mgx__row .ulink{padding-block:.15rem}
.mgx__foot-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s4);
  padding-block:1.25rem clamp(1.25rem,2.4vw,2rem);border-top:1px solid var(--line);font-size:.8125rem;color:var(--paper-faint)}
.mgx__house{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline}
.mgx__house a{color:var(--paper);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;
  transition:text-decoration-color var(--d-fast) var(--ease)}
.mgx__house a:hover{text-decoration-color:currentColor}
@media (max-width:699px){
  .mgx__facts{grid-template-columns:1fr;gap:1.25rem}
  .mgx__foot-in{flex-direction:column}
}
@media (max-height:560px) and (orientation:landscape){
  .mgx__main{padding-block:2.5rem 1.5rem}
  .mgx__lock{font-size:clamp(1.75rem,4.5vw,2.75rem)}
  .mgx__facts{margin-top:1.75rem}
}

@media (prefers-reduced-motion:reduce){
  .g__video{display:none}
  .menu__house::before{transition-delay:0s!important}
}