:root{
  --black:#000;--ink:#0d0d0d;--white:#fff;
  --gr:#6e6e73;--gr-l:#a9a9ae;--line:#e6e6e6;--line-d:rgba(255,255,255,.16);
  /* Brand yellow, confirmed by Stefan 16 Sep 2026, replacing #ff9000.
     Same value as Sinarchie's --volt, so the two brands now share one
     accent. Renamed from --orange on purpose: a variable called orange
     holding a yellow is a trap for whoever edits this next. */
  --volt:#FCE300;
  --pad:clamp(20px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--white);color:var(--black);font-family:'Manrope',system-ui,sans-serif;
  line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--volt);color:#000}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
img,video{display:block;max-width:100%}
h1,h2,h3{letter-spacing:-.03em;line-height:1.06;font-weight:800}
h1{font-size:clamp(2.4rem,6.4vw,5.4rem)}
h2{font-size:clamp(1.8rem,4vw,3.1rem)}
h3{font-size:1.22rem;letter-spacing:-.02em;font-weight:700}
p{font-size:16px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.pad{padding-top:clamp(64px,9vh,120px);padding-bottom:clamp(64px,9vh,120px)}
.dark{background:var(--black);color:var(--white)}
.dark .sub,.dark .muted{color:var(--gr-l)}
.sub{color:var(--gr);font-size:clamp(1rem,1.5vw,1.22rem);max-width:48ch;line-height:1.5}
.muted{color:var(--gr);font-size:13.5px}
.centre{text-align:center;margin-left:auto;margin-right:auto}
.kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--volt);margin-bottom:14px}

/* ---- wordmark ---- */
.logo{display:inline-flex;align-items:center;gap:3px;font-weight:800;font-size:23px;
  letter-spacing:-.035em;line-height:1}
.logo .hub{background:var(--volt);color:#000;border-radius:6px;padding:2px 7px 3px}
.dark .logo, .hero .logo{color:#fff}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);height:62px}
.nav-r{display:flex;gap:22px;align-items:center;font-size:14px;color:var(--gr)}
.nav-r a:hover{color:#000}
@media(max-width:900px){.nav-r a:not(.cta){display:none}}
.cta{background:var(--volt);color:#000!important;font-weight:700;padding:10px 20px;
  border-radius:8px;font-size:14px}
.cta:hover{opacity:.9}
.btn{padding:14px 28px;border-radius:8px;font-weight:700;font-size:15px;display:inline-block;
  transition:opacity .2s ease,transform .16s ease}
.btn:active{transform:scale(.98)}
.btn-o{background:var(--volt);color:#000}
.btn-o:hover{opacity:.9}
.btn-line{border:1px solid var(--line-d);color:var(--white)}
.btn-line:hover{border-color:#fff}
.light-btn-line{border:1px solid var(--line);color:var(--black)}
.light-btn-line:hover{border-color:#000}

/* ---- video hero ---- */
.hero{position:relative;min-height:min(88svh,760px);display:flex;align-items:center;
  overflow:hidden;background:#000;color:#fff}
.hero video,.hero .fallback{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.5)}
.hero .inner{position:relative;z-index:2;padding-top:clamp(60px,9vh,110px);
  padding-bottom:clamp(60px,9vh,110px)}
.hero h1{margin-top:22px;max-width:14ch}
.hero h1 .o{color:var(--volt)}
.hero .sub{color:#e6e6e6;margin-top:20px;max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-facts{display:flex;gap:clamp(18px,4vw,52px);flex-wrap:wrap;margin-top:44px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:22px}
.hero-facts div b{display:block;font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.02em}
.hero-facts div span{font-size:13px;color:#cfcfcf}

/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:#fff}
.step b{display:block;font-size:12px;font-weight:800;color:var(--volt);letter-spacing:.1em;margin-bottom:14px}
.step h3{margin-bottom:8px}
.step p{font-size:14px;color:var(--gr);line-height:1.5}

/* ---- pods ---- */
.studio-grid{grid-template-columns:repeat(3,1fr)!important}
@media(max-width:900px){.studio-grid{grid-template-columns:1fr!important}}
/* Three across, not two. 4 Oct 2026.
   This was a 2x2 built for four sets. The White Pod came off in September
   once the photo folders proved it was the Luxe Pod relit, which left three
   cards in a four-card grid: two on the top row and one orphaned underneath.
   Three columns on desktop, two on a tablet, one on a phone. */
.pods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
@media(max-width:1040px){.pods{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.pods{grid-template-columns:1fr}}
.imgslot{width:100%;aspect-ratio:16/9;background:repeating-linear-gradient(45deg,#141414,#141414 12px,#191919 12px,#191919 24px);
  display:grid;place-items:center;text-align:center;padding:20px;border-bottom:1px solid var(--line-d)}
.imgslot span{font-size:12.5px;color:var(--volt);font-weight:700;line-height:1.5}
.pod{border-radius:16px;overflow:hidden;border:1px solid var(--line-d);
  background:#0b0b0b;display:flex;flex-direction:column;text-align:left;
  transition:border-color .2s ease}
.pod:hover{border-color:#fff}
.pod.chosen{border-color:var(--volt);border-width:2px}
.pod img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pod .body{padding:22px}
.pod .name{font-size:1.35rem;font-weight:800;letter-spacing:-.03em;margin-bottom:4px}
.pod .name span{color:var(--volt)}
.pod .tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gr-l);margin-bottom:14px}
.pod p{font-size:14.5px;color:var(--gr-l);line-height:1.55}
.pod .vibe{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d);
  font-size:13px;color:#fff}
.pod .vibe b{color:var(--volt);display:block;margin-bottom:4px;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase}

/* ---- filters + cards ---- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.filter{border:1px solid var(--line);border-radius:10px;padding:11px 18px;
  font-weight:600;font-size:14.5px;transition:border-color .18s,background .18s,color .18s}
.filter:hover{border-color:var(--black)}
.filter.on{background:var(--black);color:#fff;border-color:var(--black)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;margin-top:30px;align-items:start}
.card{border:1px solid var(--line);border-radius:16px;padding:26px 24px 24px;
  display:flex;flex-direction:column;height:100%;position:relative;background:#fff}
.card.hl{border-color:var(--volt);border-width:2px;padding:25px 23px 23px}
.badge{display:inline-block;background:var(--volt);color:#000;font-size:11.5px;
  font-weight:800;letter-spacing:.02em;padding:4px 11px;border-radius:99px;margin-bottom:14px}
.badge.quiet{background:#f2f2f2;color:#3a3a3a}
.card h3{margin-bottom:6px}
.who{font-size:14px;color:var(--gr);line-height:1.5;margin-bottom:18px}
.price{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;margin-bottom:18px}
.price .inc{font-size:clamp(1.8rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.price .inc small{font-size:.44em;font-weight:700;color:var(--gr);letter-spacing:0}
.price .ex{display:block;margin-top:8px;font-size:14px;color:var(--gr);font-weight:600}
.card details{margin-bottom:18px}
.card summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.card summary::-webkit-details-marker{display:none}
.card summary::after{content:"+";font-size:18px;color:var(--volt);font-weight:800}
.card details[open] summary::after{content:"−"}
.card ul{list-style:none;margin-top:10px}
.card li{font-size:14px;color:#3a3a3a;padding:5px 0 5px 20px;position:relative;line-height:1.45}
.card li::before{content:"";position:absolute;left:0;top:12px;width:8px;height:2px;background:var(--volt)}
.card .pick{margin-top:auto;width:100%;text-align:center}
.term{font-size:12.5px;color:var(--gr);margin-top:12px;line-height:1.45}

/* ---- includes + extras ---- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px)}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.inc-list{columns:4;column-gap:34px;list-style:none;margin-top:8px}
@media(max-width:1000px){.inc-list{columns:2}}
@media(max-width:620px){.inc-list{columns:1}}
.inc-list li{font-size:14.5px;padding:6px 0 6px 20px;position:relative;
  break-inside:avoid;color:#3a3a3a}
.inc-list li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:2px;background:var(--volt)}
.extras{margin-top:26px;border-top:1px solid var(--line)}
.extra{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line)}
.extra b{font-weight:700;font-size:15px}
.extra span{font-size:14px;color:var(--gr);white-space:nowrap;text-align:right}
.extra .note{display:block;font-size:13px;color:var(--gr);font-weight:400;margin-top:4px}


/* ---- gallery ---- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
@media(max-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.gal{grid-template-columns:repeat(2,1fr)}}
.gt{padding:0;border:0;border-radius:12px;overflow:hidden;background:#111;
  aspect-ratio:3/2;cursor:zoom-in;position:relative}
.gt img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .2s ease}
.gt:hover img{transform:scale(1.05)}
.gt:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:none;
  align-items:center;justify-content:center;padding:clamp(14px,4vw,56px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:86vh;border-radius:10px;object-fit:contain}
.lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#bdbdbd;font-size:13px}
.lb button{position:absolute;background:rgba(255,255,255,.10);color:#fff;border-radius:99px;
  width:48px;height:48px;font-size:22px;line-height:1;display:grid;place-items:center}
.lb button:hover{background:var(--volt);color:#000}
.lb .x{top:18px;right:18px}
.lb .pv{left:14px;top:50%;transform:translateY(-50%)}
.lb .nx{right:14px;top:50%;transform:translateY(-50%)}

/* ---- builder ---- */
.build-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,56px);
  margin-top:34px;align-items:start}
@media(max-width:950px){.build-grid{grid-template-columns:1fr}}
.bsec{margin-bottom:30px}
.bsec .lbl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gr);margin-bottom:14px}
.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:620px){.picks{grid-template-columns:1fr}}
.pk{border:1px solid var(--line);border-radius:12px;padding:15px 17px;text-align:left;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  transition:border-color .16s ease,background .16s ease}
.pk:hover{border-color:#000}
.pk.on{border-color:var(--volt);border-width:2px;padding:14px 16px;background:rgba(252,227,0,.16)}
.pk b{display:block;font-size:15px;font-weight:700}
.pk span{display:block;font-size:12.5px;color:var(--gr);margin-top:3px}
.pk .p{font-size:15px;font-weight:800;white-space:nowrap}
.xrow{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.xrow .xi b{display:block;font-size:15px;font-weight:700}
.xrow .xi span{display:block;font-size:12.5px;color:var(--gr);margin-top:3px}
.xrow .xc{display:flex;align-items:center;gap:10px;white-space:nowrap}
.xrow .xp{font-size:14px;font-weight:700;min-width:74px;text-align:right}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;font-weight:700;line-height:1}
.qty button:hover{border-color:#000}
.qty output{min-width:20px;text-align:center;font-weight:700;font-size:15px}
.tog{width:46px;height:27px;border-radius:99px;background:#dcdcdc;position:relative;
  transition:background .18s ease;flex:none}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:99px;background:#fff;transition:transform .18s ease}
.tog.on{background:var(--volt)}
.tog.on::after{transform:translateX(19px)}
.total{border:2px solid #000;border-radius:16px;padding:26px 24px;position:sticky;top:80px;background:#fff}
.total h3{margin-bottom:16px}
.tline{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;
  border-bottom:1px solid var(--line)}
.tline span{color:var(--gr)}
.tline b{font-weight:700;text-align:right}
.tbig{padding-top:16px;margin-top:8px;border-top:2px solid #000}
.tbig .n{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.tbig .n small{font-size:.36em;color:var(--gr);font-weight:700}
.tbig .ex{font-size:14px;color:var(--gr);font-weight:600;margin-top:8px}
.nudge{margin-top:16px;padding:14px 16px;border-left:3px solid var(--volt);
  background:rgba(252,227,0,.18);font-size:13.5px;line-height:1.55;display:none}
.nudge b{display:block;margin-bottom:4px}
.nudge button{color:var(--volt);font-weight:800;text-decoration:underline;font-size:13.5px}

/* ---- studio strip ---- */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
@media(max-width:900px){.strip{grid-template-columns:1fr}}
.strip img{border-radius:16px;width:100%;object-fit:cover}

/* ---- booking ---- */
.book-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,60px);
  margin-top:38px;align-items:start}
@media(max-width:900px){.book-grid{grid-template-columns:1fr}}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.field-row{grid-template-columns:1fr}}
.f{margin-bottom:14px}
.f label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.f label .req{color:var(--volt)}
.f input,.f select,.f textarea{width:100%;background:#fff;color:#000;
  border:1px solid var(--line);border-radius:10px;padding:13px 15px;font:inherit;font-size:15px}
.dark .f input,.dark .f select,.dark .f textarea{background:#111;color:#fff;border-color:#333}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--volt)}
.f textarea{min-height:96px;resize:vertical}
.f .hint{font-size:12.5px;color:var(--gr);margin-top:6px}
.dark .f .hint{color:var(--gr-l)}
.slots{display:flex;gap:9px;flex-wrap:wrap}
.slot{border:1px solid #333;border-radius:99px;padding:10px 18px;font-size:14px;font-weight:600}
.slot:hover{border-color:#fff}
.slot.on{background:var(--volt);border-color:var(--volt);color:#000}
.summary{border:1px solid #333;border-radius:16px;padding:26px 24px;position:sticky;top:80px}
.summary h3{margin-bottom:16px}
.sline{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid #262626;font-size:14px}
.sline span{color:var(--gr-l)}
.sline b{font-weight:700;text-align:right}
.notice{margin-top:18px;padding:14px 16px;border-left:3px solid var(--volt);
  background:rgba(252,227,0,.18);font-size:13.5px;line-height:1.55;color:#e8e8e8}
.formmsg{margin-top:14px;font-size:14px;font-weight:600;display:none}

/* ---- faq ---- */
.faq{margin-top:26px}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--volt);font-size:20px;font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq ul{list-style:none;padding-bottom:18px}
.faq li{font-size:14.5px;color:#3a3a3a;padding:5px 0 5px 20px;position:relative}
.faq li::before{content:"";position:absolute;left:0;top:13px;width:8px;height:2px;background:var(--volt)}

.ph{border-bottom:2px dashed var(--volt);font-weight:600;padding-bottom:1px}
.tray{position:sticky;bottom:0;z-index:60;background:rgba(0,0,0,.94);color:#fff;
  backdrop-filter:blur(16px);padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tray p{font-size:14px;color:var(--gr-l)}
.tray b{color:#fff;font-weight:700}
footer{background:var(--black);color:var(--gr-l);padding:52px var(--pad) 44px;font-size:14px}
.f-grid{max-width:1240px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.f-grid h4{color:#fff;font-size:13px;font-weight:800;margin-bottom:12px}
.f-grid p{font-size:14px;margin-bottom:6px}
.qr{width:96px;height:96px;border:2px dashed var(--volt);border-radius:10px;
  display:grid;place-items:center;font-size:11px;color:var(--volt);text-align:center;padding:8px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
  .hero video{display:none}}

/* ---------------------------------------------------------------------------
   PHRIVE ADDITIONS, 12 Sep 2026
   Everything above this line is Stefan's stylesheet, unchanged. Below are only
   the things a WordPress page needs that a standalone HTML file did not.
--------------------------------------------------------------------------- */

/* Keyboard skip link. Required by the brief's accessibility line, and the
   prototype had nowhere to put one because it had no header include. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--volt);
  color:#000;font-weight:700;padding:12px 20px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* The admin bar is fixed at the top for logged-in editors and would otherwise
   sit over the sticky nav. */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}

/* WordPress writes width and height attributes onto every image it renders.
   The height attribute is a presentational hint, and a CSS aspect-ratio is
   ignored while it is honoured, so images crop to the wrong shape unless the
   height is released. Same fix as site.css. */
.pod img,.gt img,.f-grid img{height:auto}

/* Native select and option colours. Stefan's fields inherit a transparent
   background, which the browser paints the dropdown list against, so the
   options came out white on white. Same fix as site.css. */
.f select{color-scheme:dark;background-color:#101010;color:#fff}
.f select option{background-color:#101010;color:#fff}

/* Server-side form response. The prototype wrote its message into a paragraph
   with JavaScript; the WordPress form is a real POST and comes back with the
   answer already rendered, so it needs a resting style rather than an
   inline one. */
.formnote{border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:14.5px;font-weight:600}
.formnote.ok{background:rgba(143,214,148,.14);color:#8fd694;border:1px solid rgba(143,214,148,.4)}
.formnote.error{background:rgba(255,157,107,.14);color:#ff9d6b;border:1px solid rgba(255,157,107,.45)}

/* ---------------------------------------------------------------------------
   YELLOW ON WHITE, Phrive, 16 Sep 2026

   The brand accent moved from #ff9000 to #FCE300. Against black that is a
   16:1 contrast and it sings. Against white it is 1.30:1, which is not a
   dim colour, it is an invisible one. The old orange was 2.27:1, already
   under the 4.5:1 that small text needs, so this was a latent problem the
   new colour turns into an obvious one.

   Podhub alternates white and .dark sections, so the fix is not to abandon
   the yellow but to use it the way the Sinarchie side of the site already
   does: on white it is a fill with black on top, never a text or hairline
   colour. On dark it stays exactly as Stefan drew it.

   Everything below therefore sets the light-section behaviour and then hands
   the yellow straight back inside .dark.
--------------------------------------------------------------------------- */

/* Kickers. Black on a yellow pill on white, matching how site.css handles
   .light-sec .kicker, and plain yellow text on the dark sections. */
.kicker{color:#000;background:var(--volt);display:inline-block;
  padding:4px 11px;border-radius:99px}
.dark .kicker,.hero .kicker{color:var(--volt);background:none;padding:0;border-radius:0}

/* Small marks that were yellow on white: the step numbers, the plus signs on
   the inclusion lists, and the little dashes in front of every bullet. All
   sit on white, all were about to disappear. */
.step b,
.card summary::after,
.faq summary::after{color:var(--ink)}
.card li::before,
.inc-list li::before,
.faq li::before{background:var(--ink)}

/* The highlighted package card. A 2px yellow border on white reads as nothing
   at all; the badge already carries the yellow, so the border carries the
   weight. */
.card.hl{border-color:var(--ink)}

/* The builder's upgrade prompt sits on white. Tint and rule stay yellow,
   because they are fills, but the link inside it has to be readable. */
.nudge{border-left-color:var(--ink)}
.nudge button{color:var(--ink)}

/* An on toggle is a yellow pill on a white panel. Without an edge it reads as
   a smudge rather than a control. */
.tog.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}

/* Focus rings. A yellow ring is invisible on white and an ink ring is
   invisible on black, so every focused element gets both: a dark ring with a
   yellow halo. Works on either ground. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;
  box-shadow:0 0 0 5px rgba(252,227,0,.55)}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--volt);
  box-shadow:0 0 0 5px rgba(0,0,0,.55)}
.gt:focus-visible{outline:2px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 5px rgba(252,227,0,.55)}