/* Voicverg website.

   THE DESIGN, IN ONE PARAGRAPH
   Deep black canvas. Light is white, never coloured. Glass is a material used
   where something floats above the page, not a coat of paint on every box.
   Type does most of the work. Motion is physical and short. A few small
   hand-drawn marks hide in the corners for anyone who looks twice.

   WHAT IS DELIBERATELY ABSENT
   No purple-to-blue gradient, no gradient buttons, no gradient headings, no
   neon, no glow, no coloured aurora blobs. Those are the house style of every
   AI product shipping this year, and a product that looks like all of them
   reads as one of them. Contrast, spacing and material do the work instead.

   COLOUR RULE
   The interface is monochrome. Three low-saturation tints exist for status
   only (ready, low, empty) and appear as small dots and thin rules, never as
   fills. Rendered entirely in grey, nothing here would stop working.

   Same tokens as the desktop app's app.css, so the site and the app read as
   one product. */

:root{
  /* Surfaces. Four steps of near-black, close together on purpose: the
     separation should be felt rather than seen. */
  --bg:#060607;
  --bg-2:#0a0a0c;
  --bg-3:#101013;

  /* Glass. Low transparency, because stacking many translucent layers turns
     an interface muddy faster than anything else. */
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.10);
  --glass-3:rgba(255,255,255,.15);
  --stroke:rgba(255,255,255,.11);
  --stroke-2:rgba(255,255,255,.19);
  --stroke-3:rgba(255,255,255,.30);

  /* Ink. Very slightly warm white; pure #fff on pure black is harsh at size
     and reads as unfinished. */
  --ink:#f4f4f2;
  --ink-2:rgba(244,244,242,.60);
  --ink-3:rgba(244,244,242,.36);
  --ink-4:rgba(244,244,242,.20);

  /* Status, desaturated to the point of being greys with a hint of hue. */
  --ok:#9db5a6;
  --low:#c4b78f;
  --no:#c49a9a;

  --r-lg:26px; --r-md:20px; --r-sm:13px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.32,.52,1);
  --fast:.16s var(--ease);
  --mid:.26s var(--ease);
  --wide:1140px;

  /* Compatibility aliases.
     A handful of templates set colours inline, from the old palette. Mapping
     the old names here means this redesign is a ONE FILE change: drop in the
     new stylesheet and nothing else on the server has to move. --accent used
     to be the purple; it is now simply ink, which is the whole point. */
  --accent:var(--ink);
  --accent-2:var(--ink-2);
  --good:var(--ok);
  --warn:var(--low);
  --bad:var(--no);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",
       "Helvetica Neue",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; overflow-x:hidden;
  letter-spacing:-.006em;
}
[hidden]{display:none !important}
a{color:inherit}
img{max-width:100%; display:block}
::selection{background:rgba(255,255,255,.16)}

/* ── ambient light ────────────────────────────────────────────────────
   Three soft white sources drifting slowly behind everything. Not orbs:
   they are wide, faint and mostly off-screen, so what reaches the page is a
   gradient rather than a shape. Reads as studio light in a dark room.

   These reuse the .aurora markup already in the layouts, so the redesign
   needed no HTML changes anywhere. */
.aurora{position:fixed; inset:-25%; z-index:0; pointer-events:none;
  filter:blur(110px); opacity:.9}
.aurora i{position:absolute; display:block; border-radius:50%;
  animation:drift 34s var(--ease) infinite alternate}
.aurora i:nth-child(1){width:52vw;height:52vw;left:-14%;top:-12%;
  background:radial-gradient(circle,rgba(255,255,255,.34),transparent 62%)}
.aurora i:nth-child(2){width:44vw;height:44vw;right:-12%;top:24%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 62%);
  animation-delay:-11s}
.aurora i:nth-child(3){width:40vw;height:40vw;left:32%;bottom:-22%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);
  animation-delay:-22s}
@keyframes drift{to{transform:translate3d(5%,-4%,0) scale(1.16)}}

/* Film grain. One SVG turbulence, tiled, at an opacity you notice only when
   it is removed. Stops large black areas reading as flat digital void and
   gives the glass something to sit on. */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image: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='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── glass ────────────────────────────────────────────────────────────
   Smoked architectural glass: barely transparent, a thin bright edge along
   the top where light would catch, shadow beneath to lift it off the page. */
.glass{
  position:relative;
  background:linear-gradient(158deg,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 40%,
    rgba(255,255,255,.012) 100%);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  backdrop-filter:blur(34px) saturate(150%);
  -webkit-backdrop-filter:blur(34px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 0 40px rgba(255,255,255,.028),
    0 24px 60px -24px rgba(0,0,0,.9);
}
/* The specular edge: a one-pixel white line fading along the top and left,
   the way light catches the lip of a real pane. This detail is most of the
   difference between glass and a grey rectangle. */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none;
  background:linear-gradient(150deg,
    rgba(255,255,255,.45), rgba(255,255,255,.06) 34%, transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.65;
}

.wrap{position:relative; z-index:1;
  width:min(100% - 44px, var(--wide)); margin:0 auto}

/* ── header ───────────────────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:20; padding:15px 0;
  background:rgba(6,6,7,.68);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--stroke)}
.topbar .wrap{display:flex; align-items:center; gap:26px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600;
  letter-spacing:-.02em; font-size:16.5px; text-decoration:none; color:var(--ink)}
.brand svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.8;
  stroke-linecap:round;fill:none; opacity:.85;
  transition:transform var(--mid), opacity var(--fast)}
.brand:hover svg{opacity:1; transform:scaleY(1.22)}
.mainnav{display:flex; gap:2px; margin-left:auto; align-items:center}
.mainnav a{padding:8px 13px; border-radius:var(--r-sm); text-decoration:none;
  color:var(--ink-2); font-size:14px;
  transition:color var(--fast), background var(--fast)}
.mainnav a:hover{color:var(--ink); background:var(--glass)}
.mainnav a.on{color:var(--ink)}
.navtoggle{display:none; margin-left:auto; background:none; border:0;
  color:var(--ink); font-size:20px; cursor:pointer; padding:6px 10px}

/* ── buttons ──────────────────────────────────────────────────────────
   No gradients anywhere. Primary is solid off-white with dark text, which on
   a black canvas is the strongest possible call to action and costs no
   colour. Secondary is glass. Hover changes brightness and lift, not hue. */
.btn{
  position:relative; display:inline-flex; align-items:center;
  justify-content:center; gap:8px;
  padding:11px 19px; border-radius:var(--r-sm);
  border:1px solid var(--stroke-2); background:var(--glass);
  color:var(--ink); font:inherit; font-size:14px; font-weight:500;
  letter-spacing:-.005em; cursor:pointer; text-decoration:none;
  transition:background var(--fast), border-color var(--fast),
             transform var(--fast), box-shadow var(--fast), color var(--fast);
}
.btn:hover{background:var(--glass-2); border-color:var(--stroke-3);
  transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.btn.primary{background:var(--ink); border-color:var(--ink);
  color:#08080a; font-weight:560}
.btn.primary:hover{background:#fff; border-color:#fff;
  box-shadow:0 8px 26px -10px rgba(255,255,255,.4)}

.btn.ghost{background:transparent; border-color:var(--stroke)}
.btn.ghost:hover{background:var(--glass); border-color:var(--stroke-2)}
.btn.small{padding:7px 13px; font-size:13px}
.btn.danger{border-color:rgba(196,154,154,.34); color:var(--no)}
.btn.danger:hover{border-color:rgba(196,154,154,.6);
  background:rgba(196,154,154,.07)}
.btn[disabled]{opacity:.4; pointer-events:none}

/* ── hero ─────────────────────────────────────────────────────────────
   Left aligned rather than centred. A centred hero over a centred
   sub-headline over two centred buttons is the exact shape of the template
   this design is trying not to be. */
.hero{padding:118px 0 84px; position:relative; z-index:1}
.hero h1{margin:0 0 20px; font-size:clamp(42px,7.2vw,78px); line-height:1.02;
  letter-spacing:-.042em; font-weight:600; max-width:14ch}
/* The emphasised word gets a hand-drawn underline rather than gradient text.
   Same job, none of the AI-product signature. */
.hero h1 em{font-style:normal; position:relative; white-space:nowrap}
.hero h1 em::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.01em;
  height:.13em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.5C38 3.2 84 2.4 128 5.1c26 1.6 48 3.4 70 5.2' stroke='rgba(244,244,242,.42)' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  transform-origin:left center;
  animation:draw 1.1s var(--ease) .35s both;
}
@keyframes draw{from{transform:scaleX(0); opacity:0}
                to{transform:scaleX(1); opacity:1}}

.hero p.lead{margin:0 0 34px; max-width:52ch; font-size:18.5px;
  color:var(--ink-2); line-height:1.6}
.hero .cta{display:flex; gap:11px; flex-wrap:wrap}
.hero .note{margin-top:22px; font-size:13.5px; color:var(--ink-3); max-width:58ch}

/* The meter. White bars on black, varying opacity for depth rather than
   colour. The one piece of ambient motion on the page. */
.wavebar{display:flex; align-items:flex-end; gap:3px;
  height:56px; margin:56px 0 0; width:min(460px,86vw)}
.wavebar i{flex:1; border-radius:2px; background:var(--ink);
  opacity:.30; animation:bounce 1.5s var(--ease) infinite alternate;
  transform-origin:bottom}
.wavebar i:nth-child(3n){opacity:.5}
.wavebar i:nth-child(4n){opacity:.18}
@keyframes bounce{from{height:10%} to{height:100%}}

/* ── sections ─────────────────────────────────────────────────────── */
section{position:relative; z-index:1}
.band{padding:78px 0}
.band h2{margin:0 0 12px; font-size:clamp(25px,3.2vw,36px);
  letter-spacing:-.032em; font-weight:600; line-height:1.15}
.band p.sub{margin:0 0 40px; color:var(--ink-2); max-width:56ch; font-size:16.5px}

/* Small uppercase label with a rule. Carries a lot of the editorial feel for
   very little ink. */
.eyebrow{display:inline-flex; align-items:center; gap:8px; margin:0 0 20px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--ink-4)}

.grid{display:grid; gap:14px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}

.card{padding:26px; border-radius:var(--r-md);
  transition:border-color var(--mid), transform var(--mid)}
.card:hover{border-color:var(--stroke-2)}
.card h3{margin:0 0 9px; font-size:16px; font-weight:560;
  letter-spacing:-.015em; color:var(--ink)}
.card p{margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.62}
.card .ico{width:22px;height:22px;margin-bottom:20px;stroke:var(--ink);
  stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  opacity:.7; transition:opacity var(--mid), transform var(--mid)}
.card:hover .ico{opacity:1; transform:translateY(-1px)}

/* ── pricing ──────────────────────────────────────────────────────── */
.priceblock{display:flex; align-items:baseline; gap:12px; margin:4px 0 6px}
.priceblock b{font-size:clamp(40px,5vw,54px); font-weight:600;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.priceblock span{color:var(--ink-2); font-size:15px}

.packs{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
.pack{position:relative; padding:22px; border-radius:var(--r-md);
  text-align:left; cursor:pointer;
  transition:border-color var(--fast), background var(--fast),
             transform var(--fast)}
.pack:hover{border-color:var(--stroke-2); transform:translateY(-2px)}
.pack .m{font-size:24px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.pack .c{color:var(--ink-2); font-size:13.5px; margin:3px 0 18px}
/* Selection is a white edge and a tick, not a colour. */
.pack.on{border-color:var(--stroke-3); background:var(--glass-2)}
.pack.on::after{content:"✓"; position:absolute; top:16px; right:18px;
  font-size:13px; color:var(--ink)}

/* ── forms ────────────────────────────────────────────────────────── */
.field{display:block; margin:0 0 17px}
.field > span{display:block; margin-bottom:8px; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  font-weight:500}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],select,textarea{
  width:100%; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--stroke); background:rgba(255,255,255,.026);
  color:var(--ink); font:inherit; font-size:15px;
  transition:border-color var(--fast), background var(--fast)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input:hover,select:hover,textarea:hover{border-color:var(--stroke-2)}
input:focus,select:focus,textarea:focus{outline:none;
  border-color:var(--stroke-3); background:rgba(255,255,255,.05)}
textarea{min-height:92px; resize:vertical}
select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='rgba(244,244,242,.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  background-size:11px; padding-right:36px}
.hint{color:var(--ink-3); font-size:13px; margin:7px 0 0; line-height:1.55}
.check{display:flex; align-items:center; gap:10px; font-size:14px;
  color:var(--ink-2); margin:0 0 14px; cursor:pointer}
.check input{width:15px;height:15px;accent-color:#f4f4f2}

/* ── auth pages ───────────────────────────────────────────────────── */
.authpage{min-height:100vh; display:grid; place-items:center; padding:44px 20px}
.authbox{width:100%; max-width:400px; padding:34px; border-radius:var(--r-lg)}
.authbox h1{margin:0 0 7px; font-size:24px; letter-spacing:-.03em;
  font-weight:600}
.authbox .sub{margin:0 0 26px; color:var(--ink-2); font-size:14px}
.authbox .alt{margin:18px 0 0; text-align:center; font-size:13.5px;
  color:var(--ink-3)}
.authbox .alt a{color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--stroke-2); padding-bottom:1px;
  transition:color var(--fast), border-color var(--fast)}
.authbox .alt a:hover{color:var(--ink); border-color:var(--stroke-3)}

/* ── flashes ──────────────────────────────────────────────────────────
   A thin left rule carries the status. No filled colour panels: a green
   block on black is loud out of all proportion to "saved". */
.flash{padding:13px 17px; border-radius:var(--r-sm); margin:0 0 14px;
  font-size:14px; border:1px solid var(--stroke);
  background:var(--glass); border-left-width:2px; color:var(--ink-2)}
.flash.ok{border-left-color:var(--ok)}
.flash.error{border-left-color:var(--no); color:var(--ink)}
.flash.info{border-left-color:var(--ink-3)}

/* ── app shell (account + admin) ──────────────────────────────────── */
.shell{display:grid; grid-template-columns:224px 1fr; gap:16px; padding:16px;
  min-height:100vh; position:relative; z-index:1}
.rail{padding:20px 12px; display:flex; flex-direction:column; gap:24px;
  border-radius:var(--r-lg); align-self:start; position:sticky; top:16px}
.rail .brand{padding:0 8px}
.rail nav{display:flex; flex-direction:column; gap:1px}
.rail nav a{display:flex; align-items:center; gap:12px; padding:10px 11px;
  border-radius:var(--r-sm); color:var(--ink-3); text-decoration:none;
  font-size:14px; position:relative;
  transition:color var(--fast), background var(--fast)}
.rail nav a svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail nav a:hover{color:var(--ink-2); background:var(--glass)}
.rail nav a.on{color:var(--ink); background:var(--glass-2)}
.rail nav a.on::before{content:""; position:absolute; left:-12px; top:50%;
  width:2px; height:16px; margin-top:-8px; border-radius:0 2px 2px 0;
  background:var(--ink)}
.rail .foot{margin-top:auto; padding:0 6px; font-size:12.5px; color:var(--ink-4)}

.stage{padding:6px 6px 70px; min-width:0}
.phead{padding:10px 2px 26px}
.phead h1{margin:0; font-size:28px; letter-spacing:-.032em; font-weight:600}
.phead .sub{margin:7px 0 0; color:var(--ink-2); font-size:14.5px}

/* ── status chips ─────────────────────────────────────────────────────
   A 5px dot carries the state. The text stays grey, so a row of chips does
   not turn into a traffic light. */
.chip{display:inline-flex; align-items:center; gap:8px; padding:5px 12px;
  border-radius:999px; font-size:12px; color:var(--ink-2);
  background:var(--glass); border:1px solid var(--stroke)}
.chip::before{content:""; width:5px; height:5px; border-radius:50%;
  background:var(--ink-3); flex:none}
.chip.good::before{background:var(--ok)}
.chip.warn::before{background:var(--low)}
.chip.bad::before{background:var(--no)}
button.chip{cursor:pointer; font:inherit; font-size:12px;
  transition:border-color var(--fast), background var(--fast)}
button.chip:hover{border-color:var(--stroke-2); background:var(--glass-2)}

/* ── balance ──────────────────────────────────────────────────────── */
.balance{display:flex; align-items:baseline; gap:12px; margin:0 0 10px}
.balance b{font-size:clamp(34px,4.4vw,44px); font-weight:600;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.balance span{color:var(--ink-3); font-size:14px}

/* ── tables ───────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto; border-radius:var(--r-md)}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-weight:500; color:var(--ink-4); font-size:11px;
  text-transform:uppercase; letter-spacing:.1em; padding:11px 14px;
  border-bottom:1px solid var(--stroke); white-space:nowrap}
td{padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--ink-2); vertical-align:middle}
tbody tr{transition:background var(--fast)}
tbody tr:hover{background:rgba(255,255,255,.018)}
tr:last-child td{border-bottom:0}
td b, td strong{color:var(--ink); font-weight:540}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums}
td a{color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--stroke-2)}
td a:hover{border-color:var(--ink-3)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px; letter-spacing:-.01em}

/* ── stats ────────────────────────────────────────────────────────── */
.stats{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.stat{padding:20px; border-radius:var(--r-md);
  transition:border-color var(--mid)}
.stat:hover{border-color:var(--stroke-2)}
.stat .k{color:var(--ink-4); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.11em; font-weight:500}
.stat .v{font-size:clamp(20px,2.2vw,28px); font-weight:600;
  letter-spacing:-.035em; margin-top:9px; font-variant-numeric:tabular-nums;
  line-height:1.15; text-wrap:balance}
.stat .d{font-size:12.5px; color:var(--ink-3); margin-top:5px}

/* Bar chart in divs. A charting library for one bar chart is a dependency
   and a supply chain. Bars are white at varying opacity. */
.spark{display:flex; align-items:flex-end; gap:3px; height:128px;
  margin-top:18px}
.spark i{flex:1; min-width:3px; min-height:2px; border-radius:2px 2px 0 0;
  background:rgba(255,255,255,.06); transition:background var(--fast)}
.spark i.has{background:rgba(255,255,255,.34)}
.spark i:hover{background:var(--ink)}

.barlist{display:flex; flex-direction:column; gap:11px}
.barrow{display:grid; grid-template-columns:128px 1fr 74px; gap:14px;
  align-items:center; font-size:14px; color:var(--ink-2)}
.barrow .track{height:6px; border-radius:3px;
  background:rgba(255,255,255,.05); overflow:hidden}
.barrow .track i{display:block; height:100%; background:var(--ink-2);
  border-radius:3px; transition:background var(--fast)}
.barrow:hover .track i{background:var(--ink)}
.barrow .n{text-align:right; color:var(--ink-3);
  font-variant-numeric:tabular-nums}

/* ── payment ──────────────────────────────────────────────────────── */
.payline{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.payline code{flex:1; padding:13px 15px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.03); border:1px solid var(--stroke);
  overflow-x:auto; color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;
  white-space:nowrap}

/* ── videos ───────────────────────────────────────────────────────── */
.vidgrid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px}
.vid{border-radius:var(--r-md); overflow:hidden; text-decoration:none;
  display:block; transition:transform var(--mid), border-color var(--mid)}
.vid:hover{transform:translateY(-3px); border-color:var(--stroke-2)}
.vid .thumb{aspect-ratio:16/9; background:rgba(255,255,255,.03);
  display:grid; place-items:center; border-bottom:1px solid var(--stroke);
  background-size:cover; background-position:center; filter:grayscale(1);
  transition:filter var(--mid)}
.vid:hover .thumb{filter:grayscale(.55)}
.vid .thumb svg{width:34px;height:34px;stroke:var(--ink-3);stroke-width:1.3;
  fill:none}
.vid .meta{padding:15px 16px}
.vid .meta b{display:block; font-weight:540; font-size:14.5px;
  margin-bottom:4px; color:var(--ink)}
.vid .meta span{color:var(--ink-3); font-size:13px}
.embed{aspect-ratio:16/9; width:100%; border:0; border-radius:var(--r-md)}

/* ── footer ───────────────────────────────────────────────────────── */
footer.site{padding:52px 0 44px; border-top:1px solid var(--stroke);
  margin-top:72px; color:var(--ink-4); font-size:13.5px;
  position:relative; z-index:1}
footer.site .wrap{display:flex; gap:24px; flex-wrap:wrap; align-items:center}
footer.site a{color:var(--ink-3); text-decoration:none;
  transition:color var(--fast)}
footer.site a:hover{color:var(--ink)}
footer.site .spacer{margin-left:auto}

/* ── small marks ──────────────────────────────────────────────────────
   Three tiny hand-drawn things, placed once each, low contrast, easy to miss
   on a first read. They are personality, not decoration, so there are three
   and not thirty. Hidden on small screens, where there is no margin to hide
   anything in. */
.hero::after{
  content:""; position:absolute; right:6%; top:26%;
  width:26px; height:26px; opacity:.16; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.7 5 2.8 7.1 7.8 7.8-5 .7-7.1 2.8-7.8 7.8-.7-5-2.8-7.1-7.8-7.8 5-.7 7.1-2.8 7.8-7.8z' fill='none' stroke='%23f4f4f2' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  animation:twinkle 6s var(--ease) infinite;
}
@keyframes twinkle{
  0%,88%,100%{opacity:.16; transform:scale(1) rotate(0deg)}
  93%{opacity:.4; transform:scale(1.14) rotate(8deg)}
}
.band:nth-of-type(2)::before{
  content:""; position:absolute; left:max(14px, calc(50% - var(--wide)/2 - 46px));
  top:64px;
  width:34px; height:34px; opacity:.11; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 22c6-11 14-14 25-11m0 0-6-4m6 4-4 6' fill='none' stroke='%23f4f4f2' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
footer.site::before{
  content:""; position:absolute; right:8%; top:22px;
  width:30px; height:18px; opacity:.1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M2 12c3-6 6-6 9 0s6 6 9 0 6-6 8-2' fill='none' stroke='%23f4f4f2' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
  animation:float 9s var(--ease) infinite alternate;
}
@keyframes float{to{transform:translateY(-6px)}}
@media (max-width:900px){
  .hero::after,.band:nth-of-type(2)::before,footer.site::before{display:none}
}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:900px){
  .grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}
  .shell{grid-template-columns:1fr; padding:12px}
  .rail{position:static; flex-direction:row; align-items:center;
    overflow-x:auto; gap:12px; padding:12px}
  .rail nav{flex-direction:row; gap:2px}
  .rail nav a.on::before{display:none}
  .rail .foot{margin-top:0; margin-left:auto; white-space:nowrap}
}
@media (max-width:680px){
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .mainnav{position:fixed; inset:64px 12px auto 12px; flex-direction:column;
    padding:10px; border-radius:var(--r-md); background:rgba(10,10,12,.97);
    border:1px solid var(--stroke); display:none;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px)}
  .mainnav.open{display:flex}
  .mainnav a{padding:12px}
  .navtoggle{display:block}
  .hero{padding:72px 0 56px}
  .hero h1{max-width:none}
  .band{padding:56px 0}
  .barrow{grid-template-columns:94px 1fr 58px}
}

/* Decoration should never be mandatory. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .hero h1 em::after{animation:none; transform:none; opacity:1}
}