/* REVL ARTIFACT SHELL: locations page round 1, concept B, Roll call.
   The studio page's hero (reel, scrims, the title on its bottom edge, the same entrance), its
   centred intro, then every studio name set big as an editorial index. Type carries the page;
   the one flourish is the studio's own street following the cursor on hover. Tokens only. */

:root{
  --bar:72px;            /* the jump bar */
  --num:44px;            /* the number column */
  --meta:300px;          /* the fixed address column */
  --colgap:32px;
  --nm:clamp(44px,5.6vw,88px); /* the name size, refined by app.js to fit the longest name */
  --shade72:color-mix(in srgb,var(--ground) 72%,transparent);
}

/* ---------- hero: lifted from studio-page/round-2/page/style.css ----------
   (its scrim stops are the same; written as token mixes so no raw black sits in this sheet) */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--ground)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.hero-photo{object-position:50% 62%}
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),
    linear-gradient(to top,var(--ground) 0,var(--shade72) 16%,transparent 46%)}
.hero-name{position:absolute;left:var(--g);right:var(--g);bottom:0;margin:0;color:var(--white);white-space:nowrap;font-size:8.4vw;line-height:.94;transform:translateY(.02em);
  opacity:0;animation:nameIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards}
.hero-name .ln{display:block}
@keyframes nameIn{from{opacity:0;transform:translateY(.08em)}to{opacity:1;transform:translateY(.02em)}}
@media (prefers-reduced-motion:reduce){
  .hero-name{opacity:1}
}

/* ---------- intro + search (the studio page's .claim, centred) ---------- */
.claim{padding:calc(var(--sec) * .4) var(--g) 0}
.intro{max-width:800px;margin:0 auto;text-align:center;font-size:26px;line-height:1.5;color:var(--grey)}
.find{max-width:640px;margin:48px auto 0;display:flex;flex-direction:column;align-items:center}
.find .box{width:100%;cursor:text}
.find .glass{width:18px;height:18px;flex:none;margin-left:20px;color:var(--dim)}
.find .box input{padding-left:14px}
.go-q{flex:none;width:56px;height:100%;display:flex;align-items:center;justify-content:center;color:var(--dim);transition:color .2s ease}
.go-q svg{width:15px;height:13px}
.go-q:hover{color:var(--white)}
.locate{margin-top:14px}
.locate svg{width:15px;height:15px;flex:none}
.status{margin:10px 0 0;min-height:15px;font-size:12px;font-weight:400;color:var(--dim);text-align:center}

/* ---------- the jump bar: sticks once scrolled past ---------- */
.jump{position:sticky;top:0;z-index:40;background:var(--ground);margin-top:80px}
.jump-in{width:min(100% - var(--g)*2, var(--max));margin-inline:auto;height:var(--bar);display:flex;align-items:center;gap:44px}
.jump a{text-decoration:none}
.jump .filt{gap:10px;position:relative}
.jump .filt::before{position:absolute;left:-15px;top:50%;margin-top:-3px}
.jump .filt .c{color:var(--dim);font-weight:400}
.jump .filt.is-empty{opacity:.4;pointer-events:none}
.jump .to-search{margin-left:auto;opacity:0;pointer-events:none;transition:opacity .25s ease}
.jump.is-stuck .to-search{opacity:1;pointer-events:auto}
.jump .to-search svg{width:14px;height:14px}

/* ---------- the roll ---------- */
.roll{padding-bottom:var(--sec)}
.state{scroll-margin-top:calc(var(--bar) - 56px)}
.state-head{padding-top:96px;margin:0 0 26px}
.state:first-child .state-head{padding-top:40px}
.state-head .k{display:flex;gap:16px;align-items:baseline}
.state-head .where{color:var(--dim)}

.row{position:relative;display:grid;grid-template-columns:var(--num) minmax(0,1fr) var(--meta) 52px;column-gap:var(--colgap);align-items:last baseline;padding:30px 0 30px;border-top:1px solid var(--line2)}
.rows .row:last-child{border-bottom:1px solid var(--line2)}
.num{font-family:var(--fmono);font-weight:400;font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
  /* sits on the name's baseline, then lifts so its cap top meets the name's cap top */
  transform:translateY(calc(var(--nm) * -.72 + 9.3px))}
.name{margin:0;font-size:var(--nm);line-height:.9;color:var(--white);white-space:nowrap;transition:color .35s ease;display:flex;align-items:baseline;gap:22px;min-width:0}
.name .tagk{flex:none;transform:translateY(calc(var(--nm) * -.72 + 9.3px))}
.name .tagk.dist{color:var(--beige)}
.row.is-soon .name{color:var(--dim)}
.info{font-size:17px;line-height:1.4;color:var(--grey)}
.info p{margin:0}
.info .contact{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:2px}
.info .tel,.info .dir{position:relative;z-index:2}
.info .tel{color:var(--dim);text-decoration:none;white-space:nowrap}
.info .tel:hover{color:var(--white)}
.info .dir{padding:0;font-size:13px;gap:8px;white-space:nowrap}
.info .dir svg{width:10px;height:10px}
.go{align-self:center;width:52px;height:52px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line);color:var(--white);transition:border-color .2s ease}
.go::after{content:"";position:absolute;inset:0;z-index:1}
.go svg{width:15px;height:13px}
.go.out svg{width:13px;height:13px}

.empty{margin:56px 0 0;font-size:12px;font-weight:400;color:var(--dim)}

/* hover: pointer devices only. Every other name dims; the button wakes. */
@media (hover:hover) and (pointer:fine){
  .row:hover .go{border-color:var(--white)}
}

/* the street that follows the cursor */
/* (the cursor-following street map was removed 4 Oct) */
.peek{position:fixed;left:0;top:0;z-index:60;width:360px;height:270px;overflow:hidden;background:var(--ground);pointer-events:none;opacity:0;transition:opacity .3s ease;will-change:transform,opacity}
.peek.is-on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}
.peek-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%)}
.peek-osm{position:absolute;right:8px;bottom:6px}
@media (hover:none),(pointer:coarse){ /* (the cursor-following street map was removed 4 Oct) */
.peek{display:none} }

/* ---------- widths ---------- */
@media (max-width:1180px){
  :root{--meta:260px;--colgap:24px}
}
@media (max-width:1024px){
  .hero{max-height:none}
}
@media (max-width:720px){
  :root{--bar:56px;--nm:34px}
  .hero{height:88svh;min-height:520px}
  .hero-media{object-position:58% 50%}
  .hero-name{font-size:12.5vw}
  .intro{font-size:21px;text-align:left}
  .find{align-items:stretch;margin-top:36px}
  .locate{align-self:flex-start}
  .status{text-align:left}
  .jump{margin-top:48px}
  .jump-in{width:100%;padding:0 var(--g);gap:28px;overflow-x:auto;scrollbar-width:none}
  .jump-in::-webkit-scrollbar{display:none}
  .jump .filt{flex:none}
  .jump .to-search{display:none}
  .state-head{padding-top:72px;margin-bottom:18px}
  .state:first-child .state-head{padding-top:32px}
  .row{grid-template-columns:30px minmax(0,1fr) 44px;grid-template-areas:"num name name" ". info go";column-gap:10px;row-gap:12px;padding:22px 0 22px}
  .num{grid-area:num;font-size:12px}
  .name{grid-area:name;white-space:normal;line-height:.95;flex-wrap:wrap;gap:6px 14px}
  .info{grid-area:info;font-size:16px}
  .info .contact{justify-content:flex-start;gap:18px;flex-wrap:wrap}
  .go{grid-area:go;align-self:end;width:44px;height:44px}
}

/* ---------- F: the review rail for the hero shot (goes when one is picked) ---------- */
.shot-rail{position:absolute;right:var(--g);top:136px;z-index:5;display:flex;gap:6px}
.shot-rail button{font-family:var(--fmono);font-size:12px;letter-spacing:-.02em;text-transform:uppercase;color:var(--grey);background:var(--ground);border:1px solid var(--line);border-radius:4px;padding:7px 10px}
.shot-rail button b{color:var(--white)}
.shot-rail button[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--midblack)}
.shot-rail button[aria-pressed="true"] b{color:var(--midblack)}
@media (max-width:1024px){ .shot-rail{top:96px;right:auto;left:var(--g);flex-wrap:wrap} }

/* ---------- F, 4 Oct (Macca): the title as a three-line block, upper left, clear of the window and the mark ---------- */
.hero-name{top:28%;bottom:auto;font-size:min(108px,12.5vh);line-height:.96;white-space:normal}
.hero-scrim{background:
    linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),
    radial-gradient(ellipse 46% 40% at 16% 42%,var(--shade72) 0,transparent 100%),
    linear-gradient(to top,var(--ground) 0,transparent 22%)}

/* ---------- F, 4 Oct (Macca): the row, cleaned. Address, phone and email read down one column;
   "Get directions" is a real button beside the arrow, both 52px, centred on the row. ---------- */
.row{grid-template-columns:var(--num) minmax(0,1fr) var(--meta) auto;align-items:center}
.num{align-self:center}
.info .contact{display:grid;gap:2px;justify-content:start;margin-top:8px}
.info .mail{color:var(--dim);text-decoration:none;white-space:nowrap;position:relative;z-index:2}
.info .mail:hover{color:var(--white)}
.acts{display:flex;gap:8px;align-items:center}
.acts .dir{position:relative;z-index:2;height:52px;font-size:13px;padding:0 18px}
.acts .dir svg{width:10px;height:10px}
.acts .go{align-self:auto}
@media (hover:hover) and (pointer:fine){ .acts .dir:hover{border-color:var(--white)} }
@media (max-width:720px){
  .hero-name{top:auto;bottom:0;font-size:15vw}
  /* phone: the photo holds the top and fades out before the title, so the title sits on black,
     never on the REVL mark on the turf */
  .hero-photo{height:72%;-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 100%);mask-image:linear-gradient(to bottom,#000 62%,transparent 100%)}
  .hero-scrim{background:
    linear-gradient(to bottom,var(--scrim-top) 0,transparent 190px),
    linear-gradient(to top,var(--ground) 0,var(--shade72) 18%,transparent 48%)}
  .row{grid-template-columns:30px minmax(0,1fr);grid-template-areas:"num name" ". info" ". acts";row-gap:14px}
  .num{align-self:baseline}
  .acts{grid-area:acts}
  .acts .dir{flex:1;height:44px}
  .acts .go{width:44px;height:44px}
}