/* ============================================================
   ORANGE TIE STUDIOS — THE HUB  ·  v2, tactile

   THE MODEL
   ---------
   Home is a fixed grid of panels that never scrolls. Every
   destination is one tap away, permanently.

   TWO PATHS TO CONTACT, ON PURPOSE:
     Fast path  — nav "Contact" and the contact tile go straight
                  to email + phone. No questions asked.
     Story path — the hero's "Start a conversation" opens the
                  door picker: the visitor names their situation
                  and gets an answer written for it.

   WHAT'S NEW IN v2 — the tactile surface system
   ---------------------------------------------
   One light source, top and slightly left, applied consistently.
     · Two shadow layers on every raised surface. A tight CONTACT
       shadow says "this touches the page." A wide, faint AMBIENT
       shadow says "this has volume." Real objects cast both;
       a single blurred shadow reads as floating.
     · Buttons TRAVEL when pressed — down 2px, outer shadow gone,
       inset shadow in. Same thing a real key does.
     · LETTERPRESS on the wordmark and small labels only. Never
       on body copy: it costs legibility and buys nothing.
     · TEXTURE baked into each surface as inline SVG noise — no
       image files, no extra requests. Dark surfaces take a
       heavier tooth than light ones, like ink on uncoated stock.
     · Content SETTLES with a slight overshoot instead of gliding.

   Deliberately NOT here: transparency, glass, neumorphism,
   gradients, or any animation library. All CSS.

   TERMINAL MODE — press ~ or ` anywhere. A working command
   bar: navigates the site, copies the email, has history and
   tab completion. No button, no on-screen hint; the only
   breadcrumb is the console greeting, which reaches exactly
   the people it's for.
   ============================================================ */

:root{
  /* ---- colour ---- */
  --ink:#1c1c1e;
  --ink-2:#2c2c2f;
  --ink-3:#2a2a2d;           /* raised surface on dark */
  --orange:#fe7701;          /* graphic + fills only, never text on light */
  --orange-deep:#ad4d00;     /* orange TEXT on light backgrounds — AA 5.0:1 */
  --orange-soft:rgba(254,119,1,.10);
  --orange-dark:#c95d00;     /* the shaded underside of an orange object */
  --paper:#f7f5ee;
  --paper-2:#fffdf8;
  --line:#e3e0d8;
  --muted:#64625e;
  --dim:#8b8985;             /* muted text on ink — AA 4.9:1 */

  /* ---- type ---- */
  --display:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ---- type: system mono, terminal only. No extra font file. ---- */
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.4,.64,1);
  --settle:cubic-bezier(.16,1.36,.3,1);   /* overshoot, then rest */
  --press-t:.09s;

  /* ---- the tactile shadow system ---- */
  --contact:0 1px 2px rgba(24,24,26,.13);
  --ambient:0 6px 18px -8px rgba(24,24,26,.16);
  --contact-lift:0 2px 4px rgba(24,24,26,.15);
  --ambient-lift:0 16px 34px -12px rgba(24,24,26,.22);
  --edge:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(24,24,26,.05);
  --edge-dark:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.34);
  --edge-orange:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(120,55,0,.26);
  --press:inset 0 2px 4px rgba(24,24,26,.15);
  --press-orange:inset 0 2px 4px rgba(120,55,0,.34), inset 0 -1px 0 rgba(255,255,255,.16);
  --press-dark:inset 0 2px 5px rgba(0,0,0,.45);

  /* ---- surface texture (opacity baked in; no overlay layers) ---- */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.042'/%3E%3C/svg%3E");
  --grain-page:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E");
  --grain-orange:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");

  /* ---- letterpress (used on the wordmark and small labels ONLY) ---- */
  --press-light:0 1px 0 rgba(255,255,255,.82);
  --press-dark-t:0 1px 0 rgba(0,0,0,.42);

  --plate:#1c1c1e;       /* a dark plate: hero, CTA band, solid buttons */
  --on-dark:#fffdf8;     /* text sitting on that plate */
  --surface:#f7f5ee;     /* raised above a card */
  --surface-2:#fffdf8;   /* raised above that */
  --well:#f1eee5;        /* a recess: arrows, chip circles */
  --on-orange:#1c1c1e;   /* text on an orange fill — fixed in both themes */
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background-color:var(--paper);
  background-image:var(--grain-page);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--orange-deep);outline-offset:3px;border-radius:5px}

.shell{height:100dvh;display:flex;flex-direction:column;padding:clamp(12px,2vw,22px);gap:clamp(10px,1.4vw,16px)}

/* ================= ARRIVAL STRIP =================
   A strip, not a card. One line, dark plate, so it reads as chrome
   the visitor can ignore rather than a message demanding a decision.

   WHY ONE LINE IS A CONSTRAINT AND NOT A CHOICE

   .shell is a fixed 100dvh with overflow:hidden. Anything added at
   the top comes straight out of the hero's height — there is no
   scroll to absorb it. A two-line note pushed the headline down on
   every laptop and off the fold on a phone. The verification detail
   it carried now lives in the About and Contact panels, where the
   person checking an invoice is actually looking.

   Square corners, and the orange is a 3px rule rather than a fill:
   at 4.5:1 the rule reads as an accent, whereas an orange bar reads
   as a warning. This is reassurance.
   ================================================================ */
.strip{
  flex:0 0 auto;
  display:flex;align-items:center;gap:12px;
  padding:8px 10px 8px 15px;
  background-color:var(--plate);background-image:var(--grain-dark);
  border-left:3px solid var(--orange);
  border-radius:0;
  box-shadow:var(--contact),var(--edge-dark);
  animation:arrive .45s var(--spring) both;
}
.strip[hidden]{display:none}
@keyframes arrive{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.strip{animation:none}}

.strip p{
  font-size:12.5px;line-height:1.45;color:var(--dim);
  min-width:0;
}
/* --on-dark, not --ink: the plate is dark in both themes, so the
   text on it must not follow the theme. */
.strip strong{color:var(--on-dark);font-weight:600}
.strip a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.strip a:hover{color:var(--on-dark)}

.strip-x{
  margin-left:auto;flex:0 0 auto;
  width:24px;height:24px;border-radius:4px;
  display:grid;place-items:center;
  font-size:11px;color:var(--dim);
  transition:background-color .18s ease,color .18s ease;
}
.strip-x:hover{background-color:rgba(255,255,255,.09);color:var(--on-dark)}

@media (max-width:600px){
  .strip{padding:7px 8px 7px 12px;gap:8px}
  .strip p{font-size:11.5px;line-height:1.4}
}

/* ================= HEADER ================= */
/* position:relative anchors the mobile sheet. It has to be absolute
   rather than in flow: on a phone the shell is min-height:100dvh and
   a sheet in normal flow would shove the hero down every time the
   menu opened. */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;position:relative}
.bar nav{margin-left:auto}
.mark{display:flex;align-items:center;gap:10px;min-width:0}
.mark svg{height:30px;width:auto;overflow:visible}
.mark .tie{transform-origin:512px 300px;transition:transform .9s var(--spring)}
.mark:hover .tie{transform:rotate(-7deg)}
.mark .tie.nod{animation:nod .8s var(--spring)}
@keyframes nod{0%{transform:rotate(0)}35%{transform:rotate(-11deg)}70%{transform:rotate(5deg)}100%{transform:rotate(0)}}

/* LETTERPRESS — pressed into the paper */
.wordmark{
  font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:-.02em;line-height:1;
  color:var(--ink);text-shadow:var(--press-light);
}
.wordmark span{
  display:block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:2px;text-shadow:var(--press-light);
}

/* nav — a physical control cluster, recessed into the page */
.jump{
  display:flex;align-items:center;gap:4px;border-radius:999px;padding:4px;
  background-color:var(--paper-2);background-image:var(--grain);
  box-shadow:var(--contact),var(--edge);
}
.jump a,.jump button{
  font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:999px;color:var(--muted);
  transition:color .2s,background-color .2s,transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out;
  white-space:nowrap;
}
.jump a:hover,.jump button:hover{color:var(--ink);background-color:var(--orange-soft)}
.jump a:active,.jump button:active{transform:translateY(1px);box-shadow:var(--press)}
.jump a.cta,.jump button.cta{
  background-color:var(--plate);background-image:var(--grain-dark);color:var(--on-dark);
  box-shadow:var(--contact),var(--edge-dark);
}
.jump a.cta:hover,.jump button.cta:hover{background-color:#2a2a2e}
.jump a.cta:active,.jump button.cta:active{transform:translateY(1px);box-shadow:var(--press-dark)}

/* ---------- the selected item ----------
   PRESSED IN, not highlighted. Every other control in this system
   travels downward when you push it — that is the whole tactile
   conceit. So "you are here" is the key that stayed down: recessed
   surface, inset shadow, no outer shadow. A coloured pill would have
   said "this is important"; a pressed key says "this is current",
   which is the actual meaning.

   Orange text carries it for anyone who can't read depth, and
   aria-current carries it for anyone using a screen reader. Three
   independent signals, because colour alone fails WCAG 1.4.1 and
   depth alone fails everyone on a low-contrast display.

   No transform. The item must not move when it becomes selected, or
   the whole nav twitches on every navigation. */
.jump a[aria-current="page"]{
  color:var(--orange-deep);
  background-color:var(--well);
  box-shadow:var(--press);
}
.jump a[aria-current="page"]:hover{color:var(--orange-deep);background-color:var(--well)}

/* Contact is already a dark plate, so it cannot go darker to look
   pressed. It loses its lift instead — outer shadow out, inset in —
   and the tie orange does the rest. */
.jump a.cta[aria-current="page"]{
  color:var(--orange);
  background-color:var(--ink-3);
  box-shadow:var(--press-dark);
}
.jump a.cta[aria-current="page"]:hover{background-color:var(--ink-3);color:var(--orange)}

/* The menu button exists only below the collapse breakpoint.
   Declared hidden here so it never flashes into view during the
   first paint on a wide screen. */
.menu-btn{display:none}

/* ================= TILE GRID ================= */
.stage{flex:1 1 auto;position:relative;min-height:0}
.grid{
  position:absolute;inset:0;display:grid;gap:clamp(10px,1.2vw,14px);
  grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);
  transition:opacity .35s var(--ease),transform .45s var(--ease),filter .35s;
}
.grid.hidden{opacity:0;transform:scale(.97);pointer-events:none;filter:blur(3px)}

/* a tile is an object resting on the page */
.tile{
  position:relative;overflow:hidden;border-radius:var(--r);
  background-color:var(--paper-2);background-image:var(--grain);
  box-shadow:var(--contact),var(--ambient),var(--edge);
  padding:clamp(16px,2vw,26px);text-align:left;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  transition:transform .42s var(--ease),box-shadow .42s var(--ease);
  will-change:transform;
}
/* weighted lift — contact shadow softens fast, ambient spreads slow */
.tile:hover,.tile:focus-visible{transform:translateY(-6px);box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge)}
.tile:active{transform:translateY(-1px);box-shadow:var(--contact),0 3px 8px -4px rgba(24,24,26,.18),var(--edge);transition-duration:var(--press-t)}

.tile .eyebrow{
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);text-shadow:var(--press-light);transition:color .25s;
}
.tile:hover .eyebrow{color:var(--orange-deep)}
.tile h3{font-family:var(--display);font-size:clamp(19px,2.1vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.tile p{font-size:13px;color:var(--muted);line-height:1.5;max-width:34ch}
.tile .arrow{
  position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);
  width:28px;height:28px;border-radius:50%;
  background-color:var(--well);box-shadow:var(--press);
  display:grid;place-items:center;font-size:13px;color:var(--muted);
  transition:all .3s var(--ease);
}
.tile:hover .arrow{
  background-color:var(--orange);color:var(--ink);transform:rotate(-45deg);
  box-shadow:var(--contact),var(--edge-orange);
}

/* hero — a dark plate */
.t-hero{
  grid-column:span 7;grid-row:span 4;justify-content:center;gap:18px;
  background-color:var(--plate);background-image:var(--grain-dark);
  box-shadow:var(--contact),var(--ambient),var(--edge-dark);
}
.t-hero h1{font-family:var(--display);font-weight:900;color:var(--on-dark);font-size:clamp(28px,4.4vw,62px);line-height:1.02;letter-spacing:-.035em;max-width:15ch}
.t-hero h1 em{font-style:normal;color:var(--orange)}
.t-hero p{color:var(--dim);font-size:clamp(13px,1.15vw,16px);max-width:44ch;line-height:1.55}
/* letterpress inverts on dark — the label is debossed into the ink */
.t-hero .eyebrow{color:var(--dim);text-shadow:var(--press-dark-t)}
.t-hero:hover,.t-hero:active{transform:none;box-shadow:var(--contact),var(--ambient),var(--edge-dark)}

.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* ---- PRESS-IN BUTTONS ---- */
.btn{
  font-size:13px;font-weight:600;padding:12px 22px;border-radius:10px;
  background-color:var(--orange);background-image:var(--grain-orange);color:var(--on-orange);
  box-shadow:var(--contact),var(--ambient),var(--edge-orange);
  transition:transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out,background-color .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge-orange)}
.btn:active{transform:translateY(2px);box-shadow:var(--press-orange)}
.btn.ghost{
  background-color:transparent;background-image:none;color:var(--on-dark);
  box-shadow:inset 0 0 0 1px #3a3a3e, inset 0 1px 0 rgba(255,255,255,.05);
}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--orange), inset 0 1px 0 rgba(255,255,255,.05);color:var(--orange)}
.btn.ghost:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--orange),var(--press-dark)}
.btn.light{
  background-color:var(--paper-2);background-image:var(--grain);color:var(--ink);
  box-shadow:var(--contact),var(--ambient),var(--edge);
}
.btn.light:active{transform:translateY(2px);box-shadow:var(--press)}

.t-work{grid-column:span 5;grid-row:span 4;justify-content:space-between}
.t-services{grid-column:span 4;grid-row:span 2}
.t-about{grid-column:span 4;grid-row:span 2}
.t-contact{
  grid-column:span 4;grid-row:span 2;
  background-color:var(--orange);background-image:var(--grain-orange);
  box-shadow:var(--contact),var(--ambient),var(--edge-orange);
}
.t-contact h3{color:var(--on-orange)}
.t-contact .eyebrow{color:rgba(24,24,26,.82);text-shadow:0 1px 0 rgba(255,255,255,.24)}
.t-contact p{color:rgba(24,24,26,.82)}
.t-contact .arrow{background-color:var(--orange-dark);color:var(--ink);box-shadow:var(--press-orange)}
.t-contact:hover{box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge-orange)}
.t-contact:hover .arrow{background-color:var(--ink);color:var(--orange);box-shadow:var(--contact)}

/* work thumbs — recessed wells, so the tile reads as having depth inward too */
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1 1 auto;min-height:0;margin-bottom:14px}
.thumb{
  border-radius:9px;background-color:var(--well);background-image:var(--grain);
  box-shadow:var(--press);position:relative;overflow:hidden;
  transition:transform .5s var(--ease);
}
.t-work:hover .thumb:nth-child(1){transform:translateY(-4px)}
.t-work:hover .thumb:nth-child(2){transform:translateY(-4px);transition-delay:.05s}
.t-work:hover .thumb:nth-child(3){transform:translateY(-4px);transition-delay:.1s}
.thumb::after{content:'';position:absolute;inset:auto 12px 12px 12px;height:4px;border-radius:2px;background:var(--orange);opacity:.5}

/* ================= PANELS ================= */
.panel{
  position:absolute;inset:0;border-radius:var(--r);
  background-color:var(--paper-2);background-image:var(--grain);
  box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge);
  display:none;flex-direction:column;overflow:hidden;
}
.panel.open{display:flex;animation:panelIn .5s var(--settle) both}
@keyframes panelIn{from{opacity:0;transform:scale(.985) translateY(12px)}to{opacity:1;transform:none}}

.panel-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,32px);
  box-shadow:0 1px 0 var(--line);z-index:2;
}
.panel-head h2{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.025em}
.head-left{display:flex;align-items:center;gap:14px;min-width:0}
.close{
  display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);
  border-radius:999px;padding:9px 16px;flex:0 0 auto;
  background-color:var(--surface);box-shadow:var(--contact),var(--edge);
  transition:transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out,color .2s;
}
.close:hover{color:var(--ink)}
.close:active{transform:translateY(2px);box-shadow:var(--press)}
.panel-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:clamp(20px,3vw,40px) clamp(18px,2.4vw,32px) clamp(40px,5vw,60px)}
.inner{max-width:900px;margin:0 auto}

/* ---- SETTLE: content arrives with mass, not a glide ---- */
.panel.open .stag>*{animation:settleIn .6s var(--settle) both}
.panel.open .stag>*:nth-child(1){animation-delay:.05s}
.panel.open .stag>*:nth-child(2){animation-delay:.12s}
.panel.open .stag>*:nth-child(3){animation-delay:.19s}
.panel.open .stag>*:nth-child(4){animation-delay:.26s}
.panel.open .stag>*:nth-child(5){animation-delay:.33s}
.panel.open .stag>*:nth-child(6){animation-delay:.40s}
@keyframes settleIn{0%{opacity:0;transform:translateY(20px) scaleX(.96)}100%{opacity:1;transform:none}}

/* ---- shared content ---- */
.lede{font-family:var(--display);font-size:clamp(20px,2.6vw,30px);font-weight:600;line-height:1.28;letter-spacing:-.02em;max-width:22ch;margin-bottom:26px}
.lede em{font-style:normal;color:var(--orange-deep)}
.body-copy{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:62ch;margin-bottom:16px}
.note{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:24px;padding-top:20px;box-shadow:inset 0 1px 0 var(--line);max-width:58ch}
/* small label — letterpress */
.sec-label{
  font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-shadow:var(--press-light);margin:40px 0 14px;
}

.svc-list{display:grid;box-shadow:inset 0 1px 0 var(--line)}
.svc{display:flex;align-items:baseline;gap:18px;padding:20px 4px;box-shadow:inset 0 -1px 0 var(--line);transition:padding-left .3s var(--ease),background-color .25s;position:relative}
.svc:hover{padding-left:14px;background-color:var(--orange-soft)}
.svc::before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--orange);transform:translateY(-50%) scale(0);transition:transform .3s var(--spring)}
.svc:hover::before{transform:translateY(-50%) scale(1)}
.svc h4{font-family:var(--display);font-size:19px;font-weight:700;flex:0 0 clamp(150px,26%,240px);letter-spacing:-.01em}
.svc p{font-size:14px;color:var(--muted);line-height:1.55}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.work-scroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 16px}
.work-scroll::-webkit-scrollbar{height:5px}
.work-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.work-scroll .proj{flex:0 0 clamp(210px,26vw,270px);scroll-snap-align:start}
.proj{
  border-radius:12px;overflow:hidden;text-align:left;width:100%;display:block;
  background-color:var(--paper);background-image:var(--grain);
  box-shadow:var(--contact),var(--ambient),var(--edge);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.proj:hover,.proj:focus-visible{transform:translateY(-5px);box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge)}
.proj:active{transform:translateY(-1px);transition-duration:var(--press-t)}
/* ---- real captures: two devices standing on a shelf ----
   Both screenshots sit on the bottom edge of the frame like objects
   resting on a surface — same light source as everything else.
   Sized entirely by flex and aspect-ratio: no absolute positioning,
   no percentage heights, nothing that can collapse or overlap.
   Generated by scripts/shots.mjs.                                   */
/* ---- project card image ----
   One image, filling the frame, cropped from the top so the client's
   header and hero stay visible. Deliberately simple: two earlier
   attempts at compositing a phone shot into the corner both broke,
   and a card that always renders correctly beats a clever one.
   The phone capture is still taken and sits in public/shots/ if we
   want to use it somewhere later.                                  */
.proj .shot{
  aspect-ratio:16/10;position:relative;overflow:hidden;display:block;
  background-color:var(--well);background-image:var(--grain);
  box-shadow:inset 0 -1px 0 rgba(24,24,26,.07);
}
.proj .shot.placeholder::after{content:'';position:absolute;inset:auto 16px 16px;height:5px;border-radius:3px;background:var(--orange);opacity:.55}
.proj .shot img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  background:var(--well);
}
.proj .shot .m{display:none}   /* captured, not composited */
.proj .shot.dead{filter:saturate(.15) contrast(.92)}
.proj .live{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  color:var(--orange-deep);margin-top:9px;
}
.proj .flag{
  display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#8a6a3a;background:rgba(180,130,60,.10);border-radius:5px;padding:3px 8px;margin-top:9px;
}
.proj .meta{padding:14px 16px 16px}
.proj .tag{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-shadow:var(--press-light)}
.proj h4{font-family:var(--display);font-size:17px;font-weight:700;margin:5px 0 4px}
.proj p{font-size:13px;color:var(--muted);line-height:1.5}

.steps,.pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:8px 0 28px}
.step,.pt{
  border-radius:12px;padding:22px 20px;
  background-color:var(--surface);background-image:var(--grain);
  box-shadow:var(--contact),var(--edge);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.step:hover,.pt:hover{transform:translateY(-3px);box-shadow:var(--contact-lift),var(--ambient),var(--edge)}
.step .n,.pt .n{font-family:var(--display);font-size:30px;font-weight:900;color:var(--orange-deep);line-height:1}
.pt .n{font-size:15px}
.step h4,.pt h4{font-family:var(--display);font-size:16.5px;font-weight:700;margin:10px 0 6px}
.step p,.pt p{font-size:13px;color:var(--muted);line-height:1.5}
.pts{margin-top:32px}

/* ---- CONTACT CARDS with copy confirm ---- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:8px}
.ccard{
  position:relative;border-radius:12px;padding:22px;overflow:hidden;
  background-color:var(--surface);background-image:var(--grain);
  box-shadow:var(--contact),var(--ambient),var(--edge);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge)}
.ccard .k{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-shadow:var(--press-light);
}
.ccard .v{font-family:var(--display);font-size:17px;font-weight:700;margin-top:7px;letter-spacing:-.01em;word-break:break-word;line-height:1.25}
.cacts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mini-btn{
  font-size:12px;font-weight:600;padding:8px 14px;border-radius:8px;color:var(--muted);
  background-color:var(--surface-2);box-shadow:var(--contact),var(--edge);
  transition:transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out,color .2s;
  display:inline-block;
}
.mini-btn:hover{color:var(--ink)}
.mini-btn:active{transform:translateY(2px);box-shadow:var(--press)}
/* the flood */
.flood{color:var(--on-orange);
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none;
  background-color:var(--orange);background-image:var(--grain-orange);
  clip-path:circle(0% at 50% 62%);transition:clip-path .52s var(--ease);
  font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.01em;
}
.ccard.copied .flood{color:var(--on-orange);clip-path:circle(140% at 50% 62%)}

/* cross-link between the two contact paths */
.crosslink{
  margin-top:26px;border-radius:12px;padding:20px 22px;width:100%;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background-color:var(--well);background-image:var(--grain);
  box-shadow:var(--press);
  transition:transform var(--press-t) ease-out,box-shadow .3s;
}
.crosslink:hover{box-shadow:var(--contact),var(--ambient),var(--edge)}
.crosslink:active{transform:translateY(2px);box-shadow:var(--press)}
.crosslink .t{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.crosslink .s{font-size:13px;color:var(--muted);margin-top:4px;line-height:1.5}
.crosslink .go{font-size:12.5px;font-weight:600;color:var(--orange-deep);white-space:nowrap}

/* ================= THE DOOR PICKER ================= */
.talk-step{display:none}
.talk-step.on{display:block}
#p-talk[data-dir="fwd"] .talk-step.on{animation:stepFwd .45s var(--ease) both}
#p-talk[data-dir="back"] .talk-step.on{animation:stepBack .45s var(--ease) both}
@keyframes stepFwd{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

.ask-q{font-family:var(--display);font-weight:900;font-size:clamp(26px,3.6vw,44px);line-height:1.04;letter-spacing:-.035em;max-width:18ch}
.ask-q em{font-style:normal;color:var(--orange-deep)}
.ask-sub{font-size:15px;color:var(--muted);line-height:1.6;max-width:48ch;margin-top:14px}

.chips{display:flex;flex-direction:column;gap:11px;margin-top:30px;max-width:760px}
.chip{
  display:block;position:relative;text-align:left;border-radius:13px;
  padding:19px 56px 19px 22px;
  background-color:var(--surface);background-image:var(--grain);
  box-shadow:var(--contact),var(--ambient),var(--edge);
  font-family:var(--display);font-size:clamp(16.5px,1.8vw,21px);font-weight:600;letter-spacing:-.015em;line-height:1.28;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s;
  opacity:0;animation:chipIn .55s var(--settle) forwards;
}
@keyframes chipIn{from{opacity:0;transform:translateY(16px) scaleX(.97)}to{opacity:1;transform:none}}
.chip:nth-child(1){animation-delay:.06s}
.chip:nth-child(2){animation-delay:.13s}
.chip:nth-child(3){animation-delay:.20s}
.chip:nth-child(4){animation-delay:.27s}
.chip:nth-child(5){animation-delay:.34s}
.chip:hover,.chip:focus-visible{transform:translateY(-3px);box-shadow:var(--contact-lift),var(--ambient-lift),var(--edge);background-color:var(--surface-2)}
.chip:active{transform:translateY(2px);box-shadow:var(--press);transition-duration:var(--press-t)}
.chip .go{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background-color:var(--well);box-shadow:var(--press);
  display:grid;place-items:center;font-size:14px;color:var(--muted);
  transition:all .35s var(--spring);font-family:var(--sans);
}
.chip:hover .go,.chip:focus-visible .go{
  background-color:var(--orange);color:var(--ink);transform:translateY(-50%) translateX(4px);
  box-shadow:var(--contact),var(--edge-orange);
}
.chip .hint{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted);margin-top:6px;letter-spacing:0}

.ask-foot{margin-top:28px;font-size:13.5px;color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.ask-foot button{text-decoration:underline;text-underline-offset:3px;color:var(--ink);font-weight:500}
.ask-foot button:hover{color:var(--orange-deep)}

.backstep{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);
  border-radius:999px;padding:9px 17px;margin-bottom:24px;
  background-color:var(--paper);box-shadow:var(--contact),var(--edge);
  transition:transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out,color .2s;
}
.backstep:hover{color:var(--ink)}
.backstep:active{transform:translateY(2px);box-shadow:var(--press)}
.said{font-family:var(--display);font-size:15px;font-weight:600;color:var(--muted);letter-spacing:-.01em;padding-left:16px;margin-bottom:24px;max-width:46ch;line-height:1.4;box-shadow:inset 2px 0 0 var(--orange)}
.answer h3{font-family:var(--display);font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.05;letter-spacing:-.035em;max-width:19ch}
.answer h3 em{font-style:normal;color:var(--orange-deep)}
.answer .p{font-size:15.5px;line-height:1.66;color:var(--ink-2);max-width:60ch;margin-top:18px}

.cta-band{
  margin-top:44px;border-radius:16px;padding:clamp(24px,3.4vw,38px);
  background-color:var(--plate);background-image:var(--grain-dark);
  box-shadow:var(--contact),var(--ambient),var(--edge-dark);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band h4{font-family:var(--display);font-size:clamp(20px,2.5vw,28px);font-weight:700;color:var(--on-dark);letter-spacing:-.025em;max-width:20ch;line-height:1.15}
.cta-band p{font-size:14px;color:var(--dim);margin-top:8px;max-width:40ch;line-height:1.55}
.cta-band .acts{display:flex;gap:10px;flex-wrap:wrap}

/* =========================================================
   TERMINAL MODE  —  press ~ or `
   A real command bar. Hidden from anyone who never presses
   the key. Uses the system mono stack, so no extra font.
   Given the same tactile treatment as everything else: it's
   a dark plate resting above the page, not a floating layer.
   ========================================================= */
.term-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:flex-end;justify-content:center;
  padding:0 clamp(12px,3vw,24px) clamp(16px,7vh,70px);
  background:rgba(24,24,26,.38);
}
.term-overlay.on{display:flex;animation:termFade .18s ease-out both}
@keyframes termFade{from{opacity:0}to{opacity:1}}

.term{
  width:100%;max-width:660px;border-radius:14px;overflow:hidden;
  background-color:#0d0f0d;background-image:var(--grain-dark);
  box-shadow:0 2px 4px rgba(0,0,0,.34),0 26px 60px -20px rgba(0,0,0,.62),
             inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5);
  font-family:var(--mono);font-size:13px;line-height:1.72;
  animation:termIn .34s var(--settle) both;
}
@keyframes termIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}

.term-bar{
  display:flex;align-items:center;gap:8px;padding:9px 13px;
  background:#171b16;box-shadow:inset 0 -1px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#333a31;display:block;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.term-bar i:first-child{background:var(--orange)}
.term-bar .ttl{
  margin-left:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7d8f75;
}
.term-bar .esc{margin-left:auto;font-size:11px;color:#7d8f75}

.term-out{
  padding:14px 16px 4px;max-height:min(46vh,340px);overflow-y:auto;
  overscroll-behavior:contain;color:#8ee06a;
}
.term-out::-webkit-scrollbar{width:6px}
.term-out::-webkit-scrollbar-thumb{background:#2c3629;border-radius:4px}
.term-out .dim{color:#6b8f5e}
.term-out .cmd{color:#f2f8ee}
.term-out .warn{color:var(--orange)}
.term-out .row{white-space:pre-wrap;word-break:break-word}
.term-out .kv{display:flex;gap:12px}
.term-out .kv b{color:#f2f8ee;font-weight:500;flex:0 0 108px}

.term-form{display:flex;align-items:center;gap:9px;padding:11px 16px 15px}
.term-form .ps{color:var(--orange);flex:0 0 auto}
.term-input{
  flex:1;background:none;border:none;outline:none;color:#f2f8ee;
  font:inherit;caret-color:var(--orange);min-width:0;
}
.term-input::placeholder{color:#4f6b45}

@media (max-width:520px){
  .term{font-size:12.5px}
  .term-out{max-height:40vh}
  .term-bar .esc{display:none}
}

/* ================= MOBILE ================= */
@media (max-width:860px){
  body{overflow:auto}
  .shell{height:auto;min-height:100dvh}
  .bar{position:sticky;top:0;z-index:50;background-color:var(--paper);background-image:var(--grain-page);padding:8px 0;margin:-8px 0 0}
  .jump{padding:3px}
  .jump a,.jump button{padding:7px 11px;font-size:12px}
  .stage{position:static}
  .grid{position:static;grid-template-columns:1fr;grid-template-rows:none;gap:12px}
  .grid.hidden{display:none}
  .tile{min-height:130px;padding:20px}
  .t-hero,.t-work,.t-services,.t-about,.t-contact{grid-column:auto;grid-row:auto}
  .t-hero{min-height:auto;padding:28px 22px 30px}
  .thumbs{min-height:88px}
  .panel{position:fixed;inset:0;border-radius:0;z-index:100}
  .panel.open{animation:sheetIn .4s var(--settle) both}
  @keyframes sheetIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .panel-head h2{font-size:19px}
  .svc{flex-direction:column;gap:5px}
  .svc h4{flex:none}
  .chip{padding:18px 50px 18px 19px}
  .cta-band{flex-direction:column;align-items:flex-start}
  /* touch has no hover — make the press the whole feedback */
  .tile:active{transform:translateY(1px);box-shadow:var(--contact),var(--edge)}
}

/* Declared after the 860px block on purpose: `.jump a` there sets a
   padding and font-size at the same specificity, so source order is
   the only thing deciding which wins. The sheet needs to win.
   ---------------------------------------------------------------- */
/* ================= THE NAV COLLAPSES =================
   700px, not 860px. The nav ran out of room long before the layout
   did — five items plus a theme toggle beside a two-line wordmark
   overflowed the bar on a phone and clipped the toggle off the right
   edge entirely.

   The old answer was .hide-sm on About, which is worse than it looks:
   it didn't just shrink the nav, it made a page unreachable from
   every screen except the home grid. A sheet has room for everything,
   so that hack is gone and About is back.

   Same <nav> element, restyled — see the template. One set of links,
   one aria-current, nothing to keep in sync.
   ================================================================ */
@media (max-width:700px){
  /* Order: logo ......... menu, theme.
     margin-left:auto on the first of the right-hand pair pulls both
     to the edge as a group. Without it, .bar's space-between spreads
     three items evenly and strands the theme toggle in the middle of
     the header, which is exactly what it was doing. */
  .menu-btn{order:2;margin-left:auto}
  .theme{order:3;margin-left:0}

  .menu-btn{
    display:grid;place-items:center;flex:0 0 auto;
    width:38px;height:38px;border-radius:11px;
    background-color:var(--paper-2);background-image:var(--grain);
    box-shadow:var(--contact),var(--edge);
    transition:transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out;
  }
  .menu-btn:active{transform:translateY(1px);box-shadow:var(--press)}
  .menu-btn svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round}

  /* Three lines fold into a cross. The middle bar fades rather than
     rotating with the others, which stops the X reading heavier in
     the centre than at its ends.

     ORDER MATTERS HERE, AND IT IS COUNTERINTUITIVE.

     CSS applies a transform list RIGHT to LEFT: the last function
     runs on the element first. So `rotate(45deg) translateY(5px)`
     means translate first, then rotate.

     That is the order this needs. The bar starts at y=7 and has to
     reach the centre at y=12 BEFORE it turns, so it pivots around
     its own middle. Written the other way round — translate listed
     first — the rotation happens while the bar is still 5px above
     the origin, swinging it off centre, and then the translate runs
     along the now-rotated axis and pushes it further out. The result
     is two diagonals that miss each other: a lopsided X. */
  .menu-btn svg path{transition:transform .3s var(--ease),opacity .2s ease;transform-origin:12px 12px}
  .bar.menu-open .menu-btn .m1{transform:rotate(45deg) translateY(5px)}
  .bar.menu-open .menu-btn .m2{opacity:0}
  .bar.menu-open .menu-btn .m3{transform:rotate(-45deg) translateY(-5px)}
  .bar.menu-open .menu-btn{background-color:var(--well);box-shadow:var(--press)}

  .jump{display:none}
  .bar.menu-open .jump{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:60;
    border-radius:var(--r);padding:7px;
    box-shadow:var(--contact),var(--ambient),var(--edge);
    animation:sheetDrop .28s var(--settle) both;
  }
  @keyframes sheetDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  .jump a{
    padding:13px 14px;border-radius:9px;font-size:14.5px;
    text-align:left;white-space:normal;
  }
  /* The Contact pill stops being a pill in a stack — a single dark
     row among light ones reads as an error, not a call to action. It
     keeps its weight through the orange text instead. */
  .jump a.cta{
    background-color:transparent;background-image:none;box-shadow:none;
    color:var(--orange-deep);
  }
  .jump a.cta[aria-current="page"]{background-color:var(--well);box-shadow:var(--press);color:var(--orange-deep)}
  .jump a[aria-current="page"]{box-shadow:var(--press)}
}

/* ---------- the wordmark ----------
   Two problems in one lockup: "Orange Tie" sits on line-height:1, so
   its descenders ran into STUDIOS underneath, and the whole thing was
   shrunk further than it needed to be back when the theme toggle was
   still competing for the same row.

   STUDIOS is never hidden. It is not a tagline — it is half the
   name, and dropping it leaves a logo that reads "Orange Tie". */
@media (max-width:700px){
  .mark{gap:9px}
  .mark svg{height:31px}
  .wordmark{font-size:16.5px;white-space:nowrap;line-height:1.05}
  .wordmark span{font-size:10px;letter-spacing:.15em;margin-top:4px}
}
@media (max-width:360px){
  .mark svg{height:28px}
  .wordmark{font-size:15px}
  .wordmark span{font-size:9px;letter-spacing:.12em;margin-top:3px}
}

@media (prefers-reduced-motion:reduce){.strip{animation:none}}

.strip p{
  font-size:12.5px;line-height:1.45;color:var(--dim);
  min-width:0;
}
/* --on-dark, not --ink: the plate is dark in both themes, so the
   text on it must not follow the theme. */
.strip strong{color:var(--on-dark);font-weight:600}
.strip a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.strip a:hover{color:var(--on-dark)}

.strip-x{
  margin-left:auto;flex:0 0 auto;
  width:24px;height:24px;border-radius:4px;
  display:grid;place-items:center;
  font-size:11px;color:var(--dim);
  transition:background-color .18s ease,color .18s ease;
}
.strip-x:hover{background-color:rgba(255,255,255,.09);color:var(--on-dark)}

@media (max-width:600px){
  .strip{padding:7px 8px 7px 12px;gap:8px}
  .strip p{font-size:11.5px;line-height:1.4}
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme: dark; }
}
:root[data-theme="dark"]{ color-scheme: dark; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#ededef;              /* now the TEXT colour, not the dark */
    --ink-2:#d6d5d8;
    --paper:#141416;            /* the ground */
    --paper-2:#1e1e21;          /* cards resting on it */
    --raised:#26262a;
    --top:#2e2e33;
    --line:#33333a;
    --muted:#9d9ba0;
    --dim:#9a98a1;
    --plate:#26262a; --on-dark:#ededef;
    --surface:#26262a; --surface-2:#2e2e33; --well:#17171a;
    --orange-deep:#fe7701;      /* on dark, the brand orange IS the text colour */
    --orange-soft:rgba(254,119,1,.14);
    --on-orange:#1c1c1e;

    --contact:0 1px 2px rgba(0,0,0,.5);
    --ambient:0 6px 18px -8px rgba(0,0,0,.55);
    --contact-lift:0 2px 5px rgba(0,0,0,.55);
    --ambient-lift:0 18px 36px -12px rgba(0,0,0,.6);
    --edge:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4);
    --edge-dark:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.5);
    --press:inset 0 2px 5px rgba(0,0,0,.55);
    --press-dark:inset 0 2px 6px rgba(0,0,0,.6);
    --press-light:0 1px 0 rgba(255,255,255,.05);   /* letterpress inverts */
    --press-dark-t:0 1px 0 rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ink:#ededef; --ink-2:#d6d5d8;
  --paper:#141416; --paper-2:#1e1e21; --raised:#26262a; --top:#2e2e33;
  --line:#33333a; --muted:#9d9ba0; --dim:#9a98a1;
  --plate:#26262a; --on-dark:#ededef;
  --surface:#26262a; --surface-2:#2e2e33; --well:#17171a;
  --orange-deep:#fe7701; --orange-soft:rgba(254,119,1,.14); --on-orange:#1c1c1e;
  --contact:0 1px 2px rgba(0,0,0,.5);
  --ambient:0 6px 18px -8px rgba(0,0,0,.55);
  --contact-lift:0 2px 5px rgba(0,0,0,.55);
  --ambient-lift:0 18px 36px -12px rgba(0,0,0,.6);
  --edge:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4);
  --edge-dark:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.5);
  --press:inset 0 2px 5px rgba(0,0,0,.55);
  --press-dark:inset 0 2px 6px rgba(0,0,0,.6);
  --press-light:0 1px 0 rgba(255,255,255,.05);
  --press-dark-t:0 1px 0 rgba(0,0,0,.5);
}

/* ---- the toggle ---- */
.theme{
  width:34px;height:34px;border-radius:999px;display:grid;place-items:center;flex:0 0 auto;
  background-color:var(--paper-2);box-shadow:var(--contact),var(--edge);
  transition:transform var(--press-t) ease-out,box-shadow var(--press-t) ease-out;
}
.theme:active{transform:translateY(2px);box-shadow:var(--press)}
.theme svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme:hover svg{stroke:var(--ink)}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme .sun{display:none}
  :root:not([data-theme="light"]) .theme .moon{display:block}
}