/* ===========================================================
   PAPAYA CREATIVE
   =========================================================== */

:root{
  --ink:        #050609;
  --ink-2:      #0a0c12;
  --ink-3:      #10131c;
  --line:       rgba(244,241,228,.13);
  --line-soft:  rgba(244,241,228,.07);

  --blue:       #1a6ff5;
  --blue-hot:   #4d92ff;
  --blue-deep:  #0b2b6b;

  --cream:      #f4f1e4;
  --mute:       rgba(244,241,228,.56);
  --mute-2:     rgba(244,241,228,.34);

  --gold-1:     #6b5518;
  --gold-2:     #f0d67a;
  --gold:       #c9a227;

  --pad:        clamp(20px, 5vw, 88px);
  --maxw:       1560px;

  --ease:       cubic-bezier(.16,1,.3,1);
  --ease-io:    cubic-bezier(.7,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv05";
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--blue); color:#fff; }

/* --- grain + vignette over everything ---------------------------------- */
body::after{
  content:"";
  position:fixed; inset:0; z-index:900; pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 45%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}

/* ===========================================================
   Type
   =========================================================== */

.display{
  font-family:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  font-weight:400;
  line-height:.84;
  letter-spacing:-.012em;
  text-transform:uppercase;
  margin:0;
}

.eyebrow{
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute-2);
  font-weight:500;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--blue); flex:none;
}

.lede{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.5;
  color:var(--mute);
  max-width:62ch;
}

.section-n{
  font-family:"Anton",sans-serif;
  font-size:11px; letter-spacing:.2em;
  color:var(--blue);
}

/* ===========================================================
   Layout
   =========================================================== */

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

section{ position:relative; }

.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ===========================================================
   Loader
   =========================================================== */

#loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-in{ text-align:center; }
.loader-mark{
  width:54px; height:54px; margin:0 auto 22px;
  animation:spinmark 1.6s var(--ease-io) infinite;
}
@keyframes spinmark{
  0%{ transform:rotateY(0) scale(1); }
  50%{ transform:rotateY(180deg) scale(.86); }
  100%{ transform:rotateY(360deg) scale(1); }
}
.loader-bar{
  width:190px; height:2px; background:rgba(244,241,228,.12); overflow:hidden; margin:0 auto;
}
.loader-bar i{
  display:block; height:100%; width:0%; background:var(--blue);
  transition:width .35s linear;
}
.loader-txt{
  margin-top:14px; font-family:"Space Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.3em; color:var(--mute-2); text-transform:uppercase;
}

/* ===========================================================
   Nav
   =========================================================== */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.solid{
  background:rgba(5,6,9,.72);
  backdrop-filter:blur(18px) saturate(1.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--line-soft);
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand svg{ width:22px; height:auto; }
.brand span{
  font-family:"Anton",sans-serif; font-size:15px; letter-spacing:.09em; text-transform:uppercase;
}
.brand span em{ font-style:normal; color:var(--blue); }

.nav-links{ display:flex; gap:6px; align-items:center; }
.nav-links a{
  position:relative;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 14px; color:var(--mute);
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ transform:scaleX(1); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--blue);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{ color:#fff; border-color:var(--blue); }
.btn:hover::before{ transform:translateY(0); }
.btn.solid{ background:var(--blue); border-color:var(--blue); color:#fff; }
.btn.solid::before{ background:var(--cream); }
.btn.solid:hover{ color:var(--ink); border-color:var(--cream); }
.btn.big{ padding:19px 34px; font-size:13px; }

.burger{ display:none; width:38px; height:38px; place-items:center; }
.burger i{ display:block; width:20px; height:1.5px; background:var(--cream); position:relative; transition:.35s var(--ease); }
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--cream);
  transition:.35s var(--ease);
}
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.nav.open .burger i{ background:transparent; }
.nav.open .burger i::before{ top:0; transform:rotate(45deg); }
.nav.open .burger i::after{ top:0; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:74px 0 auto 0; z-index:799;
  background:rgba(5,6,9,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line-soft);
  display:none; flex-direction:column; padding:14px var(--pad) 30px;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{
  font-family:"Anton",sans-serif; font-size:30px; text-transform:uppercase;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}

/* ===========================================================
   Hero
   =========================================================== */

.hero{
  min-height:100svh;
  display:grid;
  align-items:center;
  padding-top:74px;
  overflow:hidden;
}

#stage{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
}
/* stacked layout: fade the mark out before it reaches the headline */
@media (max-width:999px){
  #stage{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 58%);
    mask-image:linear-gradient(180deg,#000 0%,#000 34%,transparent 58%);
  }
  .hero{ --glow-x:50%; }
  .hero::before{ top:30%; }
  .hero-grid{ padding-block:40vh clamp(50px,9vh,90px); }
}
#stage canvas{ width:100%; height:100%; }

/* blue floor glow under the mark */
.hero::before{
  content:""; position:absolute; z-index:0;
  left:var(--glow-x,50%); top:52%; transform:translate(-50%,-50%);
  width:min(1100px,120vw); aspect-ratio:1;
  background:radial-gradient(circle, rgba(26,111,245,.30) 0%, rgba(26,111,245,.07) 38%, transparent 66%);
  filter:blur(20px);
  pointer-events:none;
}

.hero-grid{
  position:relative; z-index:2;
  display:grid;
  gap:clamp(24px,4vw,50px);
  padding-block:clamp(60px,10vh,120px);
  pointer-events:none;
}
.hero-grid > *{ pointer-events:auto; }

.hero-title{
  font-size:clamp(58px,13.2vw,208px);
  text-align:center;
}
.hero-title .l{ display:block; overflow:hidden; }
.hero-title .l > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1.15s var(--ease) forwards;
}
.hero-title .l:nth-child(1) > span{ animation-delay:.15s; }
.hero-title .l:nth-child(2) > span{ animation-delay:.26s; }
.hero-title .l:nth-child(3) > span{ animation-delay:.37s; }
@keyframes riseIn{ to{ transform:translateY(0); } }

.hero-title .thin{
  font-size:.44em;
  letter-spacing:.02em;
  color:var(--mute);
}
.hero-title .hot{
  background:linear-gradient(96deg, var(--blue-hot), var(--cream) 42%, var(--blue) 78%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.hero-foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:26px;
  opacity:0; animation:fadeUp 1s var(--ease) .8s forwards;
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

.hero-foot p{ margin:0; max-width:40ch; font-size:15px; color:var(--mute); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:9px; letter-spacing:.3em; color:var(--mute-2); text-transform:uppercase;
  opacity:0; animation:fadeUp 1s var(--ease) 1.4s forwards;
}
.scroll-cue span{ font-family:"Space Mono",ui-monospace,monospace; }
.scroll-cue i{ display:block; width:1px; height:44px; background:linear-gradient(var(--blue),transparent); }

/* ===========================================================
   Marquee
   =========================================================== */

.marquee{
  border-block:1px solid var(--line-soft);
  background:var(--blue);
  color:#fff;
  overflow:hidden;
  padding:15px 0;
  position:relative; z-index:5;
}
.marquee-track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
@media (prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }
.marquee-track span{
  font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:clamp(15px,1.7vw,22px); letter-spacing:.03em;
  padding-inline:26px; display:flex; align-items:center; gap:26px; white-space:nowrap;
}
.marquee-track span::after{ content:"◆"; font-size:.5em; opacity:.6; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ===========================================================
   Reveal utility
   =========================================================== */

.rv{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.08s } .rv[data-d="2"]{ transition-delay:.16s }
.rv[data-d="3"]{ transition-delay:.24s } .rv[data-d="4"]{ transition-delay:.32s }
.rv[data-d="5"]{ transition-delay:.40s } .rv[data-d="6"]{ transition-delay:.48s }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } }

/* ===========================================================
   About
   =========================================================== */

.about{ padding-block:clamp(90px,13vh,170px); }
.about-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);
  gap:clamp(24px,5vw,70px); align-items:start;
}
.about-statement{
  font-family:"Anton",sans-serif; text-transform:uppercase;
  font-size:clamp(30px,4.2vw,66px); line-height:.98; letter-spacing:-.012em;
  margin:0; text-wrap:balance;
}
.about-statement b{ font-weight:400; color:var(--blue-hot); }

.about-body{ display:grid; gap:clamp(20px,2.4vw,34px); }
.about-meta{ display:grid; gap:26px; align-content:start; }
.about-meta dl{
  margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 20px;
  font-family:"Space Mono",ui-monospace,monospace; font-size:11.5px;
}
.about-meta dt{ color:var(--mute-2); text-transform:uppercase; letter-spacing:.12em; }
.about-meta dd{ margin:0; color:var(--mute); }

.about-cols{
  margin-top:clamp(46px,7vw,90px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.about-col{ background:var(--ink); padding:clamp(26px,3vw,42px); }
.about-col h3{
  font-family:"Anton",sans-serif; text-transform:uppercase; font-size:13px;
  letter-spacing:.2em; margin:0 0 16px; color:var(--blue);
}
.about-col p{ margin:0; color:var(--mute); font-size:15px; line-height:1.6; }

.capsules{
  margin-top:clamp(46px,7vw,90px);
  display:flex; flex-wrap:wrap; gap:10px;
}
.capsule{
  border:1px solid var(--line); border-radius:999px;
  padding:11px 20px; font-family:"Space Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mute);
  transition:.4s var(--ease);
}
.capsule:hover{ color:var(--cream); border-color:var(--blue); background:rgba(26,111,245,.09); }

/* ===========================================================
   Services
   =========================================================== */

.services{ padding-block:clamp(90px,13vh,170px); background:var(--ink-2); }

.sec-head{
  display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between;
  gap:22px; margin-bottom:clamp(36px,5vw,66px);
}
.sec-head h2{
  font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(40px,7.4vw,120px); line-height:.86; letter-spacing:-.015em;
}
.sec-head h2 em{ font-style:normal; color:var(--blue); }

.svc-grid{
  display:grid; grid-template-columns:1fr;
  gap:1px; background:var(--line-soft); border:1px solid var(--line-soft);
}
@media (min-width:680px){  .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
.svc{
  background:var(--ink-2);
  padding:clamp(28px,3vw,44px);
  min-height:290px;
  display:grid; grid-template-rows:auto 1fr; align-content:start;
  position:relative; overflow:hidden; isolation:isolate;
  transition:background .5s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 130% at var(--mx,50%) var(--my,0%), rgba(26,111,245,.28), transparent 62%);
  opacity:0; transition:opacity .55s var(--ease);
}
.svc:hover{ background:var(--ink-3); }
.svc:hover::before{ opacity:1; }
.svc-n{
  font-family:"Space Mono",ui-monospace,monospace; font-weight:700;
  font-size:11px; letter-spacing:.2em; color:var(--mute-2);
  transition:color .4s var(--ease);
}
.svc:hover .svc-n{ color:var(--blue-hot); }
.svc-text{ display:grid; gap:14px; align-content:start; }
.svc h3{
  font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(23px,2.35vw,34px); line-height:.96; letter-spacing:-.005em;
}
.svc p{ margin:0; color:var(--mute); font-size:14.5px; line-height:1.62; max-width:34ch; }
.svc-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(46px,6vw,84px); }
.svc-arrow{
  width:34px; height:34px; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; flex:none;
  transition:.5s var(--ease);
}
.svc-arrow svg{ width:12px; height:12px; }
.svc:hover .svc-arrow{ background:var(--blue); border-color:var(--blue); transform:rotate(45deg); }

/* ===========================================================
   Portfolio
   =========================================================== */

.work{ padding-block:clamp(90px,13vh,170px); }

.work-list{ border-top:1px solid var(--line-soft); }
.work-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3.4vw,44px) 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  transition:padding-inline .55s var(--ease), background .55s var(--ease);
}
.work-row:hover{ padding-inline:clamp(10px,2vw,30px); background:rgba(26,111,245,.045); }
.work-idx{ font-family:"Space Mono",ui-monospace,monospace; font-size:12px; color:var(--mute-2); letter-spacing:.14em; }
.work-name{
  font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(26px,4.6vw,68px); line-height:.92; letter-spacing:-.012em;
  transition:color .45s var(--ease), transform .55s var(--ease);
}
.work-row:hover .work-name{ color:var(--blue-hot); }
.work-tags{ display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; max-width:340px; }
.work-tags span{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--mute);
  white-space:nowrap;
}

/* floating hover preview */
#peek{
  position:fixed; z-index:700; width:290px; aspect-ratio:4/3;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  border:1px solid var(--line);
  background:linear-gradient(145deg, var(--blue-deep), var(--ink-3) 55%, #000);
  display:grid; place-items:center; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
#peek.on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
#peek b{
  font-family:"Anton",sans-serif; font-size:52px; color:rgba(244,241,228,.24);
  text-transform:uppercase; letter-spacing:.04em;
}
#peek::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(80% 70% at 30% 20%, rgba(26,111,245,.35), transparent 70%);
}
@media (hover:none){ #peek{ display:none; } }

/* ===========================================================
   Stats
   =========================================================== */

.stats{
  border-block:1px solid var(--line-soft);
  background:var(--ink-2);
}
.stats-in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:1px; background:var(--line-soft);
}
.stat{ background:var(--ink-2); padding:clamp(32px,4vw,54px) clamp(20px,3vw,40px); }
.stat b{
  display:block; font-family:"Anton",sans-serif; font-variant-numeric:tabular-nums;
  font-size:clamp(40px,5.4vw,80px); line-height:1; letter-spacing:-.02em;
  color:var(--cream);
}
.stat b i{ font-style:normal; color:var(--blue); }
.stat span{ display:block; margin-top:10px; font-family:"Space Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2); }

/* ===========================================================
   Contact
   =========================================================== */

.contact{
  padding-block:clamp(100px,15vh,190px);
  position:relative; overflow:hidden;
}
.contact::before{
  content:""; position:absolute; inset:auto 0 -40% 0; height:80%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(26,111,245,.22), transparent 70%);
  pointer-events:none;
}
.contact-in{ position:relative; text-align:center; display:grid; gap:clamp(24px,3.5vw,44px); justify-items:center; }
.contact h2{
  font-family:"Anton",sans-serif; text-transform:uppercase; margin:0;
  font-size:clamp(46px,10.6vw,180px); line-height:.85; letter-spacing:-.02em;
}
.contact h2 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--blue-hot),var(--cream) 50%,var(--blue));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.contact-mail{
  font-family:"Anton",sans-serif; text-transform:lowercase;
  font-size:clamp(17px,2.5vw,34px); letter-spacing:.01em;
  border-bottom:1px solid var(--line); padding-bottom:6px;
  transition:.45s var(--ease);
}
.contact-mail:hover{ color:var(--blue-hot); border-color:var(--blue); }

/* ===========================================================
   Footer
   =========================================================== */

footer{ border-top:1px solid var(--line-soft); padding-block:44px; }
.foot-in{
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
  font-family:"Space Mono",ui-monospace,monospace; font-size:11.5px; color:var(--mute-2); letter-spacing:.06em;
}
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot-links a{ transition:color .35s var(--ease); }
.foot-links a:hover{ color:var(--cream); }

/* ===========================================================
   Cursor
   =========================================================== */

#cursor{
  position:fixed; z-index:950; top:0; left:0; width:26px; height:26px;
  border:1px solid rgba(244,241,228,.45); border-radius:50%;
  pointer-events:none; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
#cursor.big{ width:64px; height:64px; background:rgba(244,241,228,.9); border-color:transparent; }
@media (hover:none),(pointer:coarse){ #cursor{ display:none; } }

/* ===========================================================
   Responsive
   =========================================================== */

/* wide: type left, glass mark right */
@media (min-width:1000px){
  .hero{ --glow-x:73%; }
  .hero-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    grid-template-areas:"title mark" "foot mark";
    align-content:center;
  }
  .hero-title{ grid-area:title; text-align:left; font-size:clamp(64px,7.4vw,132px); }
  .hero-foot{ grid-area:foot; flex-direction:column; align-items:flex-start; gap:30px; }
  .hero-foot p{ font-size:17px; max-width:34ch; }
}

@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-in > .btn{ display:none; }
  .burger{ display:grid; }
  .about-head{ grid-template-columns:1fr; }
  .work-row{ grid-template-columns:auto minmax(0,1fr); }
  .work-tags{ grid-column:1/-1; justify-content:flex-start; max-width:none; }
  .hero-foot{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:600px){
  .svc{ min-height:auto; }
  .svc-top{ margin-bottom:34px; }
  .hero-title{ font-size:clamp(44px,13.5vw,84px); }
  .hero-foot p{ font-size:14.5px; }
  .svc{ min-height:auto; }
}

/* --- focus ------------------------------------------------------------- */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--blue-hot);
  outline-offset:3px;
  border-radius:4px;
}