/* ============================================================
   VoxenMC - slab UI

   Everything here is built on one idea: surfaces have thickness.
   A raised slab shows a solid side underneath it, and pressing takes
   that side away and drops the slab into place. A well inverts it,
   dark at the top.

   The depth comes from that side, not from shine. Faces are flat
   colour, the lit edge is barely there, and the sides are kept
   shallow - a gradient plus a bright highlight on every face is what
   made the old plates read as polished stone.

   Ported from the Bedrock AI app so the site and the app are one
   product. Class names are unchanged; only the recipe underneath is.
   ============================================================ */

:root,
:root[data-theme="dark"]{
  --void:           #0b0c0e;   /* behind everything */
  --deep:           #141519;   /* recessed floor */
  --slab:           #22242a;   /* the standard raised surface */
  --slab-2:         #2a2d34;   /* a slab sitting on a slab */
  --slab-3:         #33373f;   /* hover */
  --edge:           #0e0f12;   /* the side of a slab, its thickness */
  --edge-2:         #16181c;

  --lit:            rgba(255,255,255,.045);
  --lit-2:          rgba(255,255,255,.07);
  --dark:           rgba(0,0,0,.3);

  /* the ambient shadow a slab casts, and the shade inside a well */
  --amb:            rgba(0,0,0,.26);
  --amb-2:          rgba(0,0,0,.30);
  --amb-3:          rgba(0,0,0,.36);
  --well-sh:        rgba(0,0,0,.42);
  --well-sh-2:      rgba(0,0,0,.48);

  /* cubic, with just enough radius to stop the corners biting */
  --r:              4px;
  --r-sm:           3px;

  /* ---- legacy names, kept so page markup and the older tools
          keep resolving; every one maps onto the slab palette ---- */
  --bg:            var(--void);
  --panel:         var(--slab-2);
  --panel-2:       var(--slab);
  --panel-3:       var(--slab-3);
  --sunken:        var(--deep);

  --stroke:        transparent;
  --drop:          0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  --drop-sm:       0 2px 0 var(--edge), 0 3px 5px var(--amb);
  --drop-lift:     0 6px 0 var(--edge), 0 10px 18px var(--amb-3);
  --drop-none:     0 0 0 rgba(0,0,0,0);

  --line:          #33373f;

  --ink:           #eef0f3;
  --ink-2:         #a4abb6;
  --ink-3:         #6b7280;

  --green:         #43c94b;
  --green-hi:      #6be070;
  --green-lit:     #6be070;
  --green-lite:    #6be070;
  --green-side:    #1d6b23;
  --green-lo:      #1d6b23;
  --green-mid:     #43c94b;
  --green-press:   #35a83c;
  --green-corner:  #8fe993;
  --green-soft:    #17281a;
  --green-soft-ink:#7ddc83;
  --accent-ink:    #6be070;

  --blue:          #3f9dfb;
  --amber:         #e8a838;
  --red:           #e05a4f;

  /* the neutral (ghost) button face */
  --btn2:          #33373f;
  --btn2-hi:       #3c414b;
  --btn2-lite:     #3c414b;
  --btn2-lo:       var(--edge);
  --btn2-mid:      #3c414b;
  --btn2-press:    #2a2d34;
  --btn2-corner:   #3c414b;
  --btn2-ink:      var(--ink);

  /* the dark button, for nav and icon plates */
  --btn3:          #2a2d34;
  --btn3-hi:       #33373f;
  --btn3-lite:     #33373f;
  --btn3-mid:      #33373f;
  --btn3-lo:       var(--edge);
  --btn3-press:    #22242a;
  --btn3-corner:   #3c414b;

  --red-hi:        #e8756a;
  --red-lite:      #e8756a;
  --red-mid:       #e05a4f;
  --red-lo:        #7a2620;
  --red-press:     #c44a40;
  --red-corner:    #f09186;
  --red-soft:      #2c1a18;
  --red-soft-ink:  #f0918a;

  --gold:          #e8a838;
  --gold-soft:     #2a2114;
  --gold-ink:      #e8c07a;

  --blue-soft:     #16222e;
  --blue-soft-ink: #7fc1f0;
  --violet-soft:   #221d33;
  --violet-soft-ink:#b79be6;
  --chip-edge:     var(--lit);

  /* sunken controls: input, select, slider */
  --in-bg:         var(--deep);
  --in-top:        transparent;
  --in-bot:        transparent;
  --in-ink:        var(--ink);
  --in-off:        #1c1e23;
  --in-off-ink:    #4d545e;
  --track:         #191b20;
  --thumb:         #33373f;
  --thumb-hi:      #3c414b;
  --thumb-lo:      var(--edge);

  /* rings are blue, the way the app's fields ring */
  --focus:         rgba(63,157,251,.55);

  --shell:         1180px;

  --sans:          "Segoe UI Variable Text","Segoe UI",system-ui,
                   -apple-system,Roboto,Helvetica,Arial,sans-serif;
  --pixel:         var(--sans);
  --title:         var(--sans);
  --mono:          ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* ============================================================
   LIGHT
   Same thickness, on paper instead of stone. The slab still shows a
   side; that side is a grey shadow rather than a black one, and the
   lit edge on top is real white instead of a hint of it.
   ============================================================ */
:root[data-theme="light"]{
  --void:           #c9ced6;   /* the desk */
  --deep:           #dde2e9;   /* recessed floor */
  --slab:           #f6f8fa;
  --slab-2:         #ffffff;
  --slab-3:         #eef1f5;
  --edge:           #aeb6c2;
  --edge-2:         #bfc6d0;

  --lit:            rgba(255,255,255,.75);
  --lit-2:          rgba(255,255,255,1);
  --dark:           rgba(23,29,40,.10);

  --amb:            rgba(23,29,40,.13);
  --amb-2:          rgba(23,29,40,.15);
  --amb-3:          rgba(23,29,40,.19);
  --well-sh:        rgba(23,29,40,.16);
  --well-sh-2:      rgba(23,29,40,.20);

  --line:           #d5dae1;

  --ink:            #14171b;
  --ink-2:          #4a525c;
  --ink-3:          #78818d;

  --green:          #2f9e3a;
  --green-hi:       #37b543;
  --green-lit:      #37b543;
  --green-lite:     #37b543;
  --green-side:     #1a6a22;
  --green-lo:       #1a6a22;
  --green-mid:      #2f9e3a;
  --green-press:    #278530;
  --green-corner:   #6bd274;
  --green-soft:     #e2f3e3;
  --green-soft-ink: #1f6b27;
  --accent-ink:     #237a2c;

  --blue:           #1c7ee0;
  --amber:          #b87d14;
  --red:            #c4372c;

  --btn2:           #eef1f5;
  --btn2-hi:        #e4e8ee;
  --btn2-lite:      #ffffff;
  --btn2-lo:        var(--edge);
  --btn2-mid:       #ffffff;
  --btn2-press:     #dde2e9;
  --btn2-corner:    #ffffff;
  --btn2-ink:       var(--ink);

  --btn3:           #eef1f5;
  --btn3-hi:        #e4e8ee;
  --btn3-lite:      #ffffff;
  --btn3-mid:       #ffffff;
  --btn3-lo:        var(--edge);
  --btn3-press:     #dde2e9;
  --btn3-corner:    #ffffff;

  --red-hi:         #d24336;
  --red-lite:       #d24336;
  --red-mid:        #c4372c;
  --red-lo:         #8a221a;
  --red-press:      #a72d24;
  --red-corner:     #ea8378;
  --red-soft:       #fbe4e1;
  --red-soft-ink:   #8e2418;

  --gold:           #b87d14;
  --gold-soft:      #faf1da;
  --gold-ink:       #6b5111;

  --blue-soft:      #ddedf9;
  --blue-soft-ink:  #14567c;
  --violet-soft:    #ebe4f7;
  --violet-soft-ink:#4b3175;
  --chip-edge:      var(--lit);

  --in-off:         #dde2e9;
  --in-off-ink:     #9aa2ad;
  --track:          #cbd2db;
  --thumb:          #ffffff;
  --thumb-hi:       #ffffff;
  --thumb-lo:       var(--edge);

  --focus:          rgba(28,126,224,.55);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4{
  margin:0 0 .5em;
  font-family:var(--title);
  font-weight:700;
  color:var(--ink);
  line-height:1.22;
  letter-spacing:-.02em;
}
h1{ font-size:clamp(26px,3.9vw,40px); }
h2{ font-size:clamp(20px,2.7vw,27px); }
h3{ font-size:16px; letter-spacing:-.01em; }
h4{ font-size:13px; letter-spacing:0; }
p{ margin:0 0 1em; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 20px; }

/* ============================================================
   BUTTON - a slab with a visible side
   --lip  the thickness of that side
   Pressing takes the side away and drops the slab into the page.
   ============================================================ */
.btn{
  --side:var(--green-side);
  --lip:3px;
  --face:var(--green);
  --face-hi:var(--green-lit);
  --face-press:var(--green-press);
  --b-ink:#0c1a0d;
  --edge-lit:rgba(255,255,255,.13);

  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  margin-bottom:3px;

  font-family:var(--sans);
  font-size:13.5px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
  text-align:center;
  text-decoration:none;
  color:var(--b-ink);

  background:var(--face);
  border:0;
  border-radius:var(--r);
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    0 var(--lip) 0 var(--side),
    0 calc(var(--lip) + 2px) 6px var(--amb);

  cursor:pointer;
  user-select:none;
  transform:translateY(0);
  transition:background .1s linear, outline-color .1s linear,
             transform .07s linear, box-shadow .07s linear;
}
.btn:hover{ background:var(--face-hi); color:var(--b-ink); text-decoration:none; }
.btn:focus-visible{ outline-color:var(--focus); }
.btn:active{
  --lip:0px;
  background:var(--face-press);
  transform:translateY(4px);
  box-shadow:inset 0 2px 4px var(--amb-3);
}
.btn[disabled],
.btn[aria-disabled="true"]{
  --face:var(--in-off); --face-hi:var(--in-off); --face-press:var(--in-off);
  --side:var(--edge-2); --b-ink:var(--in-off-ink); --edge-lit:transparent;
  cursor:not-allowed;
  pointer-events:none;
}
.btn svg{ width:15px; height:15px; }

/* ---- colour variants ---- */
/* A neutral plate has to be a step away from the panel it sits on, or
   the only thing left saying "button" is its side. */
.btn--ghost{
  --face:var(--slab-3); --face-hi:#3c414b; --face-press:var(--slab-2);
  --side:var(--edge); --b-ink:var(--ink);
  --edge-lit:var(--lit-2);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 var(--lip) 0 var(--side),
    0 calc(var(--lip) + 2px) 6px var(--amb);
}
.btn--ghost:active{ box-shadow:inset 0 2px 4px var(--amb-3); }
.btn--red{
  --face:var(--red); --face-hi:var(--red-hi); --face-press:var(--red-press);
  --side:var(--red-lo); --b-ink:#fff;
}
.btn--dark{
  --face:var(--slab); --face-hi:var(--slab-2); --face-press:var(--deep);
  --side:var(--edge); --b-ink:var(--ink);
  --edge-lit:var(--lit-2);
}

/* ---- sizes: the side scales with the plate ---- */
.btn--sm{
  --lip:2px;
  padding:8px 13px;
  font-size:12px;
  gap:6px;
}
.btn--sm:active{ transform:translateY(3px); }
.btn--lg{
  --lip:4px;
  padding:14px 26px;
  font-size:15px;
}
.btn--lg:active{ transform:translateY(5px); }
.btn--block{ display:flex; width:100%; }

/* ============================================================
   RAISED SURFACES - one recipe, everywhere
   ============================================================ */
.panel,
.tile,
.step,
.pack,
.tool,
.toolbar,
.hero__stat,
.callout,
.notice,
.faq details{
  background:var(--slab-2);
  border:0;
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  margin-bottom:3px;
}
.panel--pad{ padding:22px 24px; }

/* a frame is a well with a slab lip around it */
.frame{
  padding:8px;
  background:var(--slab-2);
  border:0;
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  margin-bottom:3px;
}
.frame__inner{
  padding:20px;
  background:var(--deep);
  border-radius:var(--r-sm);
  box-shadow:inset 0 2px 4px var(--well-sh), inset 0 -1px 0 var(--lit);
}

/* ============================================================
   TOP BAR / BRAND
   ============================================================ */
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.brand:hover{ text-decoration:none; }
.brand__mark{
  width:38px; height:38px; flex:0 0 38px;
  display:grid; place-items:center;
  border-radius:var(--r);
  background:var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 0 var(--green-side), 0 3px 6px var(--amb);
  transition:background .1s linear;
}
.brand:hover .brand__mark{ background:var(--green-lit); }
.brand__mark svg{ width:19px; height:19px; display:block; }
.brand__mark svg rect{ fill:#0c1a0d; }
.brand__mark svg .sh{ fill:var(--green-side); }
.brand__name{
  font-family:var(--title); font-weight:700; font-size:17px;
  color:var(--ink); letter-spacing:-.01em;
}
.brand__name span{ color:var(--accent-ink); }

/* ---- the neutral plate: nav links and icon buttons ---- */
.nav-demo a,
.iconbtn{
  --side:var(--edge);
  --lip:2px;

  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:2px;

  font-family:var(--sans);
  font-size:13px; font-weight:600; line-height:1.2; letter-spacing:0;
  color:var(--ink-2);
  text-decoration:none;

  background:var(--slab-2);
  border:0;
  border-radius:var(--r);
  outline:2px solid transparent;
  outline-offset:2px;
  box-shadow:
    inset 0 1px 0 var(--lit), inset 0 -1px 0 var(--dark),
    0 var(--lip) 0 var(--side),
    0 calc(var(--lip) + 2px) 5px var(--amb);

  cursor:pointer;
  user-select:none;
  transform:translateY(0);
  transition:background .1s linear, color .1s linear,
             outline-color .1s linear, transform .07s linear, box-shadow .07s linear;
}
.nav-demo a{ padding:10px 14px; }
.nav-demo{ display:flex; flex-wrap:wrap; gap:7px; }
.nav-demo a:hover,
.iconbtn:hover{ background:var(--slab-3); color:var(--ink); text-decoration:none; }
.nav-demo a:focus-visible,
.iconbtn:focus-visible{ outline-color:var(--focus); }
.nav-demo a:active,
.iconbtn:active{
  --lip:0px;
  transform:translateY(3px);
  box-shadow:inset 0 2px 3px var(--amb-3);
}
.nav-demo a.is-active{
  --side:var(--green-side);
  color:#0c1a0d;
  background:var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 var(--lip) 0 var(--side), 0 calc(var(--lip) + 2px) 5px var(--amb);
}
.nav-demo a.is-active:hover{ color:#0c1a0d; background:var(--green-lit); }

/* Square icon plate: the hero slider arrows and the style guide.
   The navbar has its own copy in voxen-nav.css, which has to stand
   alone on the tool pages. */
.iconbtn{
  width:42px; height:40px;
  padding:0;
  color:var(--ink);
}
.iconbtn svg{ width:16px; height:16px; fill:currentColor; display:block; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding:0 0 44px; }

.banner{ width:100%; margin-bottom:30px; }
.hero h1{ margin-bottom:14px; }
.hero__lead{ font-size:17px; max-width:54ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; justify-content:center; }
.hero__stats{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; justify-content:center; }

/* banner slides are letterbox shaped and capped so they stay on screen */
.banner{ --shot-ratio:2.2; --shot-max-h:min(62vh,560px); }
.banner .slider{
  max-width:calc(var(--shot-max-h) * var(--shot-ratio));
  margin:0 auto;
}
.banner .slide{ aspect-ratio:var(--shot-ratio); }
.banner .slide__cap{ left:16px; bottom:16px; padding:9px 16px; }
.banner .slide__cap b{ font-size:17px; }
.banner .slide__ph{ font-size:clamp(36px,9vw,80px); }

.banner .slider__dots{
  position:absolute; z-index:2;
  right:20px; bottom:22px; left:auto;
  margin:0;
}
.hero__stat{ padding:11px 16px; }
.hero__stat b{
  display:block; font-family:var(--sans); font-weight:700;
  font-size:19px; color:var(--accent-ink); line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.hero__stat span{
  font-size:10.5px; font-weight:700; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.07em;
}

/* ---- hero banner: slides across, images optional ---- */
.slider{ position:relative; }
.slider:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
/* The picture is dragged rather than stepped with arrows that only showed
   up on hover. pan-y hands the browser the vertical axis, so the page
   still scrolls straight through the banner and only sideways drags are
   ours; grab says the frame is the control. */
.slider__view{
  overflow:hidden;
  border-radius:var(--r);
  touch-action:pan-y;
  cursor:grab;
}
.slider__view.is-dragging{ cursor:grabbing; user-select:none; }
/* The browser's own drag-and-drop would otherwise take the gesture over
   the moment the pointer moves: a slide is an <a> and it holds an <img>,
   and both of those are natively draggable. The JS below cancels
   dragstart as well - Firefox ignores user-drag. */
.slide,
.slide img{ -webkit-user-drag:none; user-drag:none; }
.slider__track{
  display:flex;
  transition:transform .42s cubic-bezier(.16,.84,.3,1);
}
.slide{
  flex:0 0 100%;
  position:relative;
  aspect-ratio:16/10;
  display:flex; align-items:flex-end;
  text-decoration:none;
  overflow:hidden;
  background:var(--deep);
}
.slide:hover{ text-decoration:none; }
/* The banner fills its frame edge to edge whatever shape the artwork was
   uploaded at. It used to be fitted inside the frame with a blurred copy
   of itself filling the gap, which meant most banners sat in a band of
   blur instead of being the picture. Cover crops instead - and the part
   it takes is off the top and bottom, where these banners carry nothing. */
.slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:1;
}
.slide__ph{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--title); font-weight:700;
  font-size:clamp(28px,7vw,44px);
  color:rgba(255,255,255,.28);
  letter-spacing:-.02em;
}
/* The name only, in a plate resting on the artwork - a full width bar
   with a blurb under it was covering half the banner, which is the thing
   the carousel is there to show. */
.slide__cap{
  position:absolute; z-index:2;
  left:12px; bottom:12px; right:auto; width:auto;
  max-width:calc(100% - 24px);
  padding:8px 13px;
  border-radius:var(--r-sm);
  background:rgba(11,12,14,.74);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.slide__cap b{
  display:block;
  font-family:var(--title); font-weight:700;
  font-size:14px; line-height:1.3; letter-spacing:-.01em;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---- what the carousel is drawing from ----
   One square plate in the corner opposite the name, cycling packs and
   tools -> packs -> tools. A row of three labelled buttons was tried and
   was too much furniture for a control this minor; the glyph says which
   of the three it is on, and the title says it in words. */
.slider__pick{
  position:absolute; z-index:3;
  top:10px; right:10px;
  width:30px; height:30px;
  display:grid; place-items:center;
  padding:0;
  border:0;
  border-radius:var(--r-sm);
  background:rgba(11,12,14,.7);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#c5cad2;
  cursor:pointer;

  /* Out of the way until you are on the picture. It also stops being a
     target while hidden, or an invisible button in the corner would
     swallow the start of a drag. */
  opacity:0;
  pointer-events:none;
  transition:background .1s linear, color .1s linear, opacity .14s linear;
}
.slider:hover .slider__pick,
.slider__pick:focus-visible{
  opacity:1;
  pointer-events:auto;
}
/* A touch screen has no hover, so on one the plate simply stays out. */
@media (hover:none){
  .slider__pick{ opacity:1; pointer-events:auto; }
}
.slider__pick:hover{ background:rgba(11,12,14,.85); color:#fff; }
.slider__pick:active{ transform:translateY(1px); }
.slider__pick:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.slider__pick svg{ width:15px; height:15px; fill:currentColor; display:none; }
.slider__pick[data-mode="all"]   .pick-all,
.slider__pick[data-mode="packs"] .pick-packs,
.slider__pick[data-mode="tools"] .pick-tools{ display:block; }
/* narrowed to one side, so it reads as filtered rather than resting */
.slider__pick[data-mode="packs"],
.slider__pick[data-mode="tools"]{ color:var(--green-lit); }

@media (max-width:560px){
  .slider__pick{ top:8px; right:8px; width:27px; height:27px; }
  .slider__pick svg{ width:14px; height:14px; }
}

.slider__dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.slider__dot{
  width:11px; height:11px; padding:0;
  border:0; border-radius:50%;
  background:var(--slab-3);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.22);
  cursor:pointer;
}
.slider__dot.is-on,
.banner .slider__dot.is-on{
  background:var(--green);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 9px rgba(67,201,75,.75);
}
.banner .slider__dot{
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.22);
}
.slider__dot:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:48px 0; }
/* The recessed band, and the line where it is cut into the page.

   The tone change alone was not enough to say "new section": --deep sits
   two steps from --void, which on a dark screen is nearly the same
   colour, so Packs and Tools ran together. The line is the edge of the
   cut, and it is what the eye actually reads a section break from. */
.section--alt{
  background:var(--deep);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 3px 7px var(--well-sh), inset 0 -3px 7px var(--well-sh);
}
/* Except where it opens straight off the hero. There is nothing above it
   to be divided from - the line only has a job between two sections that
   both hold content, which on the front page is Packs and Tools. */
.hero + .section--alt{
  border-top:0;
  box-shadow:inset 0 -3px 7px var(--well-sh);
}
.section--alt .panel,
.section--alt .tile,
.section--alt .step,
.section--alt .tool,
.section--alt .pack,
.section--alt .faq details{ background:var(--slab-2); }

.section__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:26px;
}
.section__head p{ margin:0; max-width:62ch; }
.section__head h2{ margin-bottom:8px; }

/* ============================================================
   TILES
   ============================================================ */
.tiles{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.tile{ padding:22px; transition:background .12s linear, transform .1s linear, box-shadow .1s linear; }
.tile:hover,
.step:hover{
  background:var(--slab-3);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 6px 0 var(--edge), 0 10px 18px var(--amb-3);
}
.tile__icon{
  width:42px; height:42px; margin-bottom:16px;
  display:grid; place-items:center;
  border-radius:var(--r);
  background:var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 0 var(--green-side), 0 3px 6px var(--amb);
  color:#0c1a0d; font-family:var(--sans); font-weight:700; font-size:15px; line-height:1;
}
.tile h3{ margin-bottom:8px; }
.tile p{ margin:0; font-size:14.5px; }

/* ============================================================
   PACK CARDS
   ============================================================ */
.grid-packs{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }

.pack{
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:background .12s linear, transform .1s linear, box-shadow .1s linear;
}
.pack:hover{
  background:var(--slab-3);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 6px 0 var(--edge), 0 10px 18px var(--amb-3);
}

/* the artwork lies flat in a well - nothing cast over it.
   16/9 rather than the 2.2/1 letterbox it was: pack banners are drawn to
   be looked at, and the extra height is the difference between seeing the
   art and seeing a strip of it. */
.pack__thumb{
  position:relative;
  aspect-ratio:16/9;
  display:grid; place-items:center;
  margin:8px 8px 0;
  border-radius:var(--r-sm);
  background-color:var(--deep);
  overflow:hidden;
  box-shadow:inset 0 2px 5px var(--well-sh);
}
/* with no artwork the plate keeps a faint weave and a floor shadow, so
   a flat colour still reads as a surface rather than a blank swatch */
.pack__thumb::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 50%, rgba(0,0,0,.06) 50%),
    linear-gradient(90deg, rgba(255,255,255,.03) 50%, rgba(0,0,0,.04) 50%);
  background-size:8px 8px, 8px 8px;
  opacity:.6;
}
.pack__thumb::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.3));
}
/* The artwork fills the card's frame edge to edge, whatever size the
   file happens to be. Same reasoning as the carousel: fitting it inside
   and filling the rest with a blurred copy of itself meant you were
   mostly looking at blur. */
.pack__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
  /* leans in as the card lifts, so the art is what the hover is about */
  transition:transform .25s cubic-bezier(.2,.9,.3,1);
}
.pack:hover .pack__img{ transform:scale(1.045); }
.pack__thumb.has-img::before,
.pack__thumb.has-img::after{ display:none; }

.pack__initials{
  position:relative; z-index:1;
  font-family:var(--title); font-weight:700;
  font-size:40px; letter-spacing:-.03em; color:var(--ink);
  opacity:.9;
  transition:transform .12s linear;
}
/* Title line: the name on the left, the download count pushed to the
   right of it. */
.pack__title{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:9px;
}
.pack__title h3{ margin:0; flex:1; min-width:0; }

.pack__dl{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px;
  margin-top:2px;
  border-radius:var(--r-sm);
  background:var(--green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 var(--green-side);
  font-family:var(--sans); font-size:10.5px; font-weight:700; line-height:1.5;
  letter-spacing:.02em;
  color:#0c1a0d;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.pack__dl svg{
  width:9px; height:9px;
  fill:currentColor;
  display:block;
  flex:0 0 9px;
}

.pack__body{ padding:14px 16px 15px; display:flex; flex-direction:column; flex:1; }
.pack__body h3{ font-size:14.5px; line-height:1.35; }
/* three lines for every card, so a short blurb does not shrink the card */
.pack__body p{
  font-size:13.5px; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(3 * 1.65em);
}
.pack__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:auto; margin-bottom:0; }

/* ---- placeholder card, shown while nothing is published yet ---- */
.pack--slot{ opacity:.85; }
.pack--slot:hover{ transform:none; background:var(--slab-2); box-shadow:
  inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
  0 3px 0 var(--edge), 0 5px 9px var(--amb-2); }
.pack--slot .pack__thumb{ background-color:var(--deep); }
.pack--slot .pack__initials{ color:var(--ink-3); font-size:24px; }

/* shimmering placeholder, while the list loads */
.skel{
  display:block;
  height:12px;
  margin-bottom:9px;
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--deep) 25%,var(--slab-3) 37%,var(--deep) 63%);
  background-size:200% 100%;
  animation:voxen-shimmer 1.4s linear infinite;
}
.skel--title{ height:17px; width:64%; margin-bottom:13px; }
.skel--sm{ width:78%; margin-bottom:14px; }

/* ---- tool card, same shell as a pack card ---- */
.tool{
  display:flex; flex-direction:column;
  padding:18px 20px 20px;
  transition:background .12s linear, transform .1s linear, box-shadow .1s linear;
}
.tool:hover{
  background:var(--slab-3);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 6px 0 var(--edge), 0 10px 18px var(--amb-3);
}
.tool:hover .tool__ico{ filter:brightness(1.1); }

/* ---- whole-card links ---- */
.pack.is-open,
.tool.is-open{ cursor:pointer; }
.pack.is-open:focus-visible,
.tool.is-open:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}
.tool.is-open .btn{ cursor:pointer; }
.tool .btn[aria-disabled="true"]{ cursor:default; }
.pack:hover .pack__initials{ transform:scale(1.04); }

.tool__head{
  display:flex; align-items:center; gap:12px;
  min-height:56px;
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.tool__ico{
  --ico:#33373f;
  --ico-side:var(--edge);
  flex:0 0 44px; height:44px;
  display:grid; place-items:center;
  border-radius:var(--r);
  font-size:20px; line-height:1;
  background:var(--ico);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 0 var(--ico-side), 0 3px 6px var(--amb);
  transition:filter .12s linear;
}
/* each category gets its own plate colour so the grid scans faster */
.tool__ico--cosmetics{  --ico:#8b5ac4; --ico-side:#4a2f6b; }
.tool__ico--editors{    --ico:#3f9dfb; --ico-side:#1d5490; }
.tool__ico--generators{ --ico:#43c94b; --ico-side:#1d6b23; }
.tool__ico--converters{ --ico:#e8a838; --ico-side:#8a5f12; }
.tool__ico--creators{   --ico:#2e9e8f; --ico-side:#175a51; }
.tool__ico--curseforge{ --ico:#e0653a; --ico-side:#7d3318; }
.tool h3{ margin:0; font-size:14.5px; line-height:1.3; }
.tool p{
  font-size:13.5px; margin:0 0 14px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(3 * 1.65em);
}
.tool__meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.tool__foot{ margin-top:auto; display:flex; gap:9px; }
.tool__foot .btn{ flex:1; }
.grid-tools{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }





/* ============================================================
   CHIPS - a label cut into the card, not a plate on it
   ============================================================ */
.chip{
  display:inline-flex; align-items:center; gap:5px;
  height:21px; padding:0 8px;
  margin-bottom:0;
  border-radius:var(--r-sm);
  background:var(--deep);
  box-shadow:inset 0 1px 2px var(--well-sh);
  font-family:var(--sans); font-size:10px; font-weight:700; line-height:1;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}
.chip::before{
  content:""; width:5px; height:5px; flex:0 0 5px; border-radius:50%;
  background:currentColor; opacity:.9;
}
/* Plain word tags (pack tags, link tags) keep no pip - the pip is for
   the coloured badge and version chips. */
.chip--bare::before{ display:none; }

.chip--green{ color:var(--green-lit); }
/* Category plate: solid green, the one tag that names what the pack is. */
.chip--cat{
  background:var(--green);
  color:#0c1a0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 var(--green-side);
}
.chip--cat::before{ display:none; }
/* Version chip: a well with a green pip - reads as info, not as a badge. */
.chip--ver{ color:var(--ink-2); }
.chip--ver::before{ background:var(--green); opacity:1; }
.chip--gold{ color:var(--gold-ink); }
.chip--red{ color:var(--red-soft-ink); }
.chip--blue{ color:var(--blue-soft-ink); }
.chip--violet{ color:var(--violet-soft-ink); }

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:14px 16px;
  margin-bottom:26px;
}

/* ============================================================
   SUNKEN CONTROLS - input, select, slider
   A field is a hole punched into the panel: dark at the top, one
   lit line along the bottom. Focus rings in blue.
   ============================================================ */
.field,
.pinput,
.pselect{
  background:var(--deep);
  border:0;
  border-radius:var(--r);
  box-shadow:inset 0 2px 4px var(--well-sh), inset 0 -1px 0 var(--lit);
  color:var(--ink);
  outline:0;
  transition:box-shadow .1s linear;
}

.field{
  flex:1 1 240px;
  display:flex; align-items:center; gap:10px;
  padding:0 13px;
  margin-bottom:0;
}
.field:focus-within{
  box-shadow:inset 0 2px 4px var(--well-sh), 0 0 0 2px var(--focus);
}
.field input{
  flex:1; min-width:0;
  padding:12px 0;
  border:0; outline:0; background:transparent;
  font:inherit; font-size:14px; color:var(--ink);
}
.field input::placeholder{ color:var(--ink-3); }
.field__icon{ width:15px; height:15px; flex:0 0 15px; fill:var(--ink-3); }

/* ---- standalone text input ---- */
.pinput{
  display:block;
  width:100%;
  margin-bottom:0;
  padding:12px 13px;
  font-family:var(--sans);
  font-size:14px;
}
.pinput::placeholder{ color:var(--ink-3); }
.pinput:focus{
  box-shadow:inset 0 2px 4px var(--well-sh), 0 0 0 2px var(--focus);
}

/* ---- select ---- */
.pselect{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%;
  margin-bottom:0;
  padding:12px 13px;
  font-family:var(--sans);
  font-size:14px;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
select.pselect{
  padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px;
}
select.pselect option{ background:var(--slab); color:var(--ink); }
.pselect:focus,
.pselect:focus-visible{
  box-shadow:inset 0 2px 4px var(--well-sh), 0 0 0 2px var(--focus);
}
.pselect .count{ color:var(--ink-3); font-size:13px; margin-left:6px; }
.pselect .chev{ opacity:.7; }

.pinput:disabled, .pinput.is-off,
.pselect:disabled, .pselect.is-off,
.field.is-off{
  background:var(--in-off);
  color:var(--in-off-ink);
  box-shadow:inset 0 1px 2px var(--well-sh);
  cursor:not-allowed;
}

.control-label{
  display:block;
  margin-bottom:7px;
  font-family:var(--sans);
  font-size:12px; font-weight:700; letter-spacing:0;
  color:var(--ink-2);
}

/* ---- slider: a well with a green fill and a slab thumb ---- */
input[type="range"].pslider{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:10px;
  margin:16px 0;
  padding:0;
  border:0;
  background:transparent;
  line-height:0;
  cursor:pointer;
}
input[type="range"].pslider::-webkit-slider-runnable-track{
  height:10px;
  border:0;
  border-radius:var(--r-sm);
  background:
    linear-gradient(var(--green),var(--green)) 0 / var(--fill,50%) 100% no-repeat,
    var(--track);
  box-shadow:inset 0 2px 3px var(--well-sh);
}
input[type="range"].pslider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px; height:20px;
  margin-top:-5px;
  border:0; border-radius:50%;
  background:var(--thumb);
  box-shadow:
    inset 0 1px 0 var(--lit-2),
    0 2px 0 var(--thumb-lo), 0 3px 5px var(--amb);
  cursor:pointer;
}
input[type="range"].pslider:hover::-webkit-slider-thumb{ background:var(--slab-3); }
input[type="range"].pslider:focus::-webkit-slider-thumb{
  box-shadow:
    inset 0 1px 0 var(--lit-2),
    0 2px 0 var(--thumb-lo), 0 0 0 3px var(--focus);
}
input[type="range"].pslider::-moz-range-track{
  height:10px; border:0; border-radius:var(--r-sm); background:var(--track);
  box-shadow:inset 0 2px 3px var(--well-sh);
}
input[type="range"].pslider::-moz-range-progress{
  height:10px; border:0; border-radius:var(--r-sm); background:var(--green);
}
input[type="range"].pslider::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:50%;
  background:var(--thumb);
  box-shadow:0 2px 0 var(--thumb-lo);
}
input[type="range"].pslider:focus{ outline:none; }

.filters{ display:flex; flex-wrap:wrap; gap:9px; }
/* every word sits in the same grid cell, so the button keeps the width of
   the longest one and never jumps as the label rotates */
.cycle-label{ display:inline-grid; align-items:center; justify-items:center; }
.cycle-word{ grid-area:1 / 1; opacity:0; transition:opacity .28s ease; white-space:nowrap; }
.cycle-word.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .cycle-word{ transition:none; } }
.filters .btn[aria-pressed="true"]{
  --face:var(--green); --face-hi:var(--green-lit); --face-press:var(--green-press);
  --side:var(--green-side); --b-ink:#0c1a0d; --edge-lit:rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 var(--edge-lit),
    0 var(--lip) 0 var(--side),
    0 calc(var(--lip) + 2px) 6px var(--amb);
}

.result-count{
  margin:0 0 18px;
  font-size:11px; font-weight:700; letter-spacing:.07em;
  color:var(--ink-3); text-transform:uppercase;
}

.empty{
  padding:44px 20px; text-align:center;
  border-radius:var(--r);
  background:var(--deep);
  box-shadow:inset 0 2px 5px var(--well-sh);
  color:var(--ink-3);
  font-size:13px;
}

/* ============================================================
   STEPS
   ============================================================ */
.steps{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:s; }
.step{ padding:22px; transition:background .12s linear, transform .1s linear, box-shadow .1s linear; }
.step::before{
  counter-increment:s; content:counter(s);
  display:grid; place-items:center;
  width:34px; height:34px; margin-bottom:15px;
  border-radius:50%;
  background:var(--green); color:#0c1a0d;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 2px 0 var(--green-side), 0 3px 5px var(--amb);
  font-family:var(--sans); font-weight:700; font-size:14px; line-height:1;
}
.step h3{ margin-bottom:8px; }
.step p{ margin:0; font-size:14.5px; }

/* ============================================================
   CALLOUT / NOTICE
   Both are wells with a coloured spine, the way the app marks an
   aside - a tinted plate reads as a second card here.
   ============================================================ */
.callout{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px; padding:24px 26px;
  background:var(--slab-2);
  border-left:3px solid var(--green);
}
.callout h2{ margin-bottom:8px; }
.callout p{ margin:0; max-width:58ch; }

.notice{
  display:flex; gap:13px; align-items:center;
  padding:14px 16px;
  background:var(--slab-2);
  border-left:3px solid var(--amber);
  color:var(--ink-2); font-size:14.5px;
}
.notice p{ margin:0; }
.notice b{ color:var(--amber); font-size:12.5px; font-weight:700; letter-spacing:0; }
.notice__mark{
  flex:0 0 28px; height:28px; display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--amber); color:#1a1408;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 0 #8a5f12;
  font-family:var(--sans); font-weight:700; font-size:14px; line-height:1;
}

/* ============================================================
   MOCK PREVIEW
   ============================================================ */
.mock__bar{
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; margin-bottom:14px;
  border-radius:var(--r);
  background:var(--slab-2);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 2px 0 var(--edge), 0 3px 5px var(--amb);
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink-3); text-transform:uppercase;
}
.mock__dot{
  width:9px; height:9px; border-radius:50%; background:var(--ink-3);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.25);
}
.mock__dot:first-child{
  background:var(--green);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 0 8px rgba(67,201,75,.7);
}
.mock__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; }
.mock__slot{
  aspect-ratio:1/1;
  display:grid; place-items:center;
  padding:6px; text-align:center;
  border-radius:var(--r-sm);
  background:var(--deep);
  box-shadow:inset 0 2px 3px var(--well-sh);
  color:var(--ink-3);
  font-size:10.5px; line-height:1.4;
}
.mock__slot--full{
  background:var(--slab-3);
  color:var(--green-lit);
  box-shadow:inset 0 1px 0 var(--lit), 0 2px 0 var(--edge-2);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ display:grid; gap:12px; }
.faq summary{
  padding:15px 18px;
  cursor:pointer; list-style:none;
  font-family:var(--sans); font-size:15px; font-weight:650;
  color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-radius:var(--r);
  outline:2px solid transparent;
  outline-offset:-2px;
  transition:background .1s linear, outline-color .1s linear;
}
.faq summary:hover{ background:var(--slab-3); }
.faq summary:focus-visible{ outline-color:var(--focus); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+";
  flex:0 0 25px; height:25px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--green); color:#0c1a0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 var(--green-side);
  font-family:var(--sans); font-weight:700; font-size:14px; line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin:0; padding:0 18px 16px; font-size:14.5px; }

/* ============================================================
   SPLIT / LIST
   ============================================================ */
.split{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.list{ margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.list li{ position:relative; padding-left:24px; font-size:14.5px; }
.list li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:9px; height:9px; border-radius:50%;
  background:var(--green);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35);
}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.pagehead{
  padding:40px 0 34px;
  background:var(--deep);
  box-shadow:inset 0 -3px 7px var(--well-sh);
}
/* The page name is set in caps: it is a label for the page, not a
   sentence, and at this size caps read as one. */
.pagehead h1{
  margin-bottom:12px;
  text-transform:uppercase;
  letter-spacing:.015em;
  display:flex; align-items:center; gap:.42em;
}
/* The glyph is the page's own nav icon, put there by voxen-nav.js, on the
   same slab as everything else raised on this site. */
.pagehead__ico{
  flex:0 0 auto;
  width:1.45em; height:1.45em;
  display:grid; place-items:center;
  color:var(--accent-ink);
  background:var(--slab-2);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
}
.pagehead__ico svg{
  width:.8em; height:.8em; display:block;
  fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* The author's own picture, cut to a circle. It sits on a side like
   everything else raised on this site - on a round thing that side reads
   as a crescent under the lower edge, which is exactly what a disc
   resting on a surface looks like.

   The ring is listed first so it paints over the side rather than under
   it, and it gives the picture an edge of its own against a dark page.
   No inset highlight here: an <img> paints its own pixels over any inset
   shadow, so one would simply never be seen. */
.avatar{
  width:104px; height:104px;
  flex:0 0 104px;
  display:block;
  border-radius:50%;
  object-fit:cover;
  background:var(--slab-2);
  box-shadow:
    0 0 0 2px var(--slab-3),
    0 4px 0 var(--edge),
    0 8px 16px var(--amb-2);
}

/* ---- the ring around the picture ----
   A track all the way round with one bright quarter turning on it. The
   first go was a conic sweep fading to nothing, which meant most of the
   ring was invisible and the visible part read as a green smudge rather
   than a circle. A full track fixes that: the shape is always there, and
   the green is only saying where it is up to.

   Borders rather than a masked gradient - the arc stays the same weight
   the whole way round, and rotating the element is a compositor
   transform, so it costs nothing to keep turning.

   The wrap is sized to the ring, not the picture, so the ring has its own
   room and never reaches across to the name. */
.avatar-wrap{
  --ring:5px;          /* how heavy the band is */
  position:relative;
  flex:0 0 124px;
  width:124px; height:124px;
  display:grid; place-items:center;
}
.avatar-spin{
  position:absolute; inset:0;
  border-radius:50%;
  border:var(--ring) solid var(--slab-3);
  border-top-color:var(--green);
  pointer-events:none;
  will-change:transform;
  animation:avatar-spin 1.4s linear infinite;
}
@keyframes avatar-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
  .avatar-spin{ animation-duration:5s; }
}

/* One ring is enough. The picture keeps its drop but loses the outline it
   carries on its own, or there are two grey circles a few pixels apart. */
.avatar-wrap .avatar{
  box-shadow:0 3px 10px var(--amb-2);
}

/* the picture on the left, the name beside it */
.whoami{
  display:flex;
  align-items:center;
  gap:18px;
  margin:0 0 26px;
}
.whoami__text{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.whoami__name{
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.02em;
  line-height:1.2;
  color:var(--ink);
}
.whoami__role{
  font-size:13px;
  line-height:1.55;
  color:var(--ink-2);
}

/* Inside a card it is smaller: the panel sits in the narrow column of a
   split, and a 132px ring there leaves the name nowhere to go. */
/* The card holds nothing but this now, so there is no line to draw under
   it and nothing below to be spaced away from. */
.panel .whoami{
  gap:14px;
  margin:0;
}
/* Inside a card: the band stays heavy, the gap is only a few pixels. The
   ring is a frame around the picture, not a hoop it is floating in. */
.panel .avatar-wrap{ --ring:4px; flex-basis:94px; width:94px; height:94px; }
.panel .avatar{ width:76px; height:76px; flex-basis:76px; }
.panel .whoami__name{ font-size:19px; }

@media (max-width:640px){
  .whoami{ gap:10px; margin-bottom:20px; }
  .avatar{ width:76px; height:76px; flex-basis:76px; }
  .avatar-wrap{ flex-basis:92px; width:92px; height:92px; --ring:4px; }
}
.pagehead p{ margin:0; max-width:66ch; font-size:16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--slab-2);
  box-shadow:
    inset 0 1px 0 var(--lit-2),
    0 -3px 0 var(--edge), 0 -5px 9px var(--amb-2);
  padding:36px 0 22px;
  margin-top:4px;
}
.footer__grid{
  display:grid; gap:26px;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
}
.footer h4{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:13px;
}
.footer ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.footer a{ color:var(--ink-2); font-size:14px; font-weight:600; }
.footer a:hover{ color:var(--ink); }
.footer__bottom{
  margin-top:26px; padding-top:18px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
  font-size:12.5px; color:var(--ink-3);
}
.footer__note{ font-size:13.5px; margin:14px 0 0; max-width:46ch; }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes voxen-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes voxen-pop{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:none; }
}
@keyframes voxen-shimmer{ to{ background-position:-200% 0; } }

.reveal{ opacity:0; }
.reveal.is-in{ animation:voxen-in .4s cubic-bezier(.2,.9,.3,1) both; }

.pack{ animation:voxen-in .3s cubic-bezier(.2,.9,.3,1) both; }

.faq details[open] p{ animation:voxen-in .2s cubic-bezier(.2,.9,.3,1) both; }

.theme-swapping,
.theme-swapping *{
  transition:background-color .2s linear, color .2s linear, box-shadow .2s linear !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .split{ grid-template-columns:1fr; }
  /* Once the two columns stack, `split--flip` sends the right one up
     top - who I am reads better before why the site is here. */
  .split--flip > :nth-child(2){ order:-1; }
  .split--flip{ display:grid; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  /* Stay near the artwork's own 2.2:1 - a 16/9 or 4/3 frame here is
     mostly blurred backdrop with a thin band of banner in the middle. */
  .banner{ --shot-ratio:2; }
  .banner .slide__cap{ left:12px; bottom:12px; padding:7px 12px; max-width:62%; }
  .banner .slide__cap b{ font-size:14px; }
  .banner .slider__dots{ right:14px; left:auto; bottom:16px; }
}

@media (max-width:640px){
  .hero{ padding:0 0 30px; }
  .banner{ margin-bottom:22px; }
  .banner{ --shot-ratio:1.85; }
  .section{ padding:34px 0; }
  .panel--pad{ padding:18px; }
  .frame__inner{ padding:15px; }
  .callout{ padding:20px 22px; }
  .toolbar{ padding:12px 13px; }
  .hero__cta .btn{ flex:1 1 100%; }
  .footer__grid{ grid-template-columns:1fr; }
  .grid-packs{ grid-template-columns:1fr; }
  .brand__name{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; }
}

/* ============================================================
   PACK PAGE
   Layout for a single pack's own page: trailers, the feature list
   and the screenshot gallery. Shared, so the next pack page only
   needs markup.
   ============================================================ */
.packhead__meta{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 22px; }

/* ---- pack page: the bar under the title ----
   Who made it, how to pass it on, and a quiet way down to the button. */
.packbar{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:14px 22px;
  margin-top:22px; padding-top:20px;
  border-top:1px solid var(--line);
}

.packbar__by{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.packbar__mark{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 2px 0 var(--edge), 0 3px 5px var(--amb);
  overflow:hidden;
  background:var(--slab-3);
}
.packbar__mark img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.packbar__who{ display:flex; flex-direction:column; gap:3px; }
.packbar__who b{
  font-size:13px; font-weight:700; letter-spacing:0;
  color:var(--ink); line-height:1.2;
}
.packbar__who > span{
  font-size:10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); line-height:1.2;
}

/* A small plate rather than the full size button - it is a button, but
   it does not shout over the pack it belongs to. */
.packbar__jump{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px;
  margin-bottom:2px;
  border-radius:var(--r);
  font-size:11px; font-weight:700; line-height:1.2;
  letter-spacing:.04em; text-transform:uppercase;
  color:#0c1a0d; text-decoration:none; white-space:nowrap;
  background:var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 2px 0 var(--green-side), 0 4px 5px var(--amb);
  transition:background .1s linear, transform .07s linear, box-shadow .07s linear;
}
.packbar__jump::after{ content:"↓"; font-size:11px; }
.packbar__jump:hover{ background:var(--green-lit); text-decoration:none; }
.packbar__jump:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 3px var(--amb-3);
}

@media (max-width:620px){
  .packbar{ gap:16px; }
  .packbar__by{ margin-right:0; width:100%; }
}

/* 16:9 embeds that keep their ratio at every width - framed as wells,
   because a video is a thing you look into, not a plate. */
.embed{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r);
  background:var(--deep);
  box-shadow:inset 0 2px 6px var(--well-sh-2);
  overflow:hidden;
  margin-bottom:3px;
}
.embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}
.embed-pair{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}

/* A single wide image framed like a panel. */
.shot{
  border-radius:var(--r);
  background:var(--deep);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  margin-bottom:3px;
  overflow:hidden;
}
.shot img{ width:100%; height:auto; display:block; }

/* Screenshot grid. Shots are clicked to open full size in a new tab. */
.gallery{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.gallery a{
  display:block;
  border-radius:var(--r);
  background:var(--deep);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  margin-bottom:3px;
  overflow:hidden;
  transition:transform .1s linear, box-shadow .1s linear;
}
.gallery a:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--lit),
    0 6px 0 var(--edge), 0 10px 18px var(--amb-3);
  text-decoration:none;
}
.gallery img{
  width:100%; height:100%; display:block;
  aspect-ratio:16/10; object-fit:cover;
  image-rendering:pixelated;
}

/* Feature list. Rows, so the long sentences stay readable instead of
   being squeezed into columns. */
.features{ display:grid; gap:14px; }
.feature{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 18px;
}
.feature__mark{
  flex:0 0 32px; width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:var(--r);
  background:var(--green); color:#0c1a0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 var(--green-side);
  font-size:13px; font-weight:700;
}
.feature h3{ margin:0 0 4px; font-size:14px; }
.feature p{ margin:0; font-size:14.5px; }

@media (max-width:560px){
  .feature{ flex-direction:column; gap:10px; }
}

/* ---- pack page: one centred column ---- */
.pagehead--pack .shell,
.packpage .shell{ max-width:760px; }

.packpage .packdesc,
.packpage .packdesc .embed{ max-width:none; margin-left:0; margin-right:0; }

/* Browsing more packs is not reading, so that row keeps the full shell. */
.packpage .morefrom .shell{ max-width:var(--shell); }

/* The "get it" block: the pack, and the button. */
.getpack{
  max-width:460px; margin:0 auto 3px;
  padding:20px 22px 22px;
  border-radius:var(--r);
  background:var(--slab-2);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  scroll-margin-top:calc(var(--vxn-h, 78px) + 24px);
}

.getpack__head{
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.getpack__icon{
  width:44px; height:44px; flex:0 0 44px;
  display:grid; place-items:center;
  border-radius:var(--r);
  background:var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 0 var(--green-side), 0 3px 6px var(--amb);
}
.getpack__icon svg{ width:21px; height:21px; fill:#0c1a0d; display:block; }

.getpack__info{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.getpack__info b{
  font-family:var(--title); font-weight:700; font-size:15px;
  letter-spacing:-.01em;
  color:var(--ink); line-height:1.3;
}
.getpack__meta{
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.getpack__count{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-ink);
}
.getpack__count svg{ width:9px; height:9px; fill:currentColor; flex:0 0 9px; display:block; }

.getpack__btn{ width:100%; justify-content:center; }

@media (min-width:700px){
  .getpack{
    max-width:none;
    display:flex; align-items:center; justify-content:space-between;
    gap:26px;
    padding:18px 22px 20px;
  }
  .getpack__head{ margin-bottom:0; min-width:0; }
  .getpack__btn{ width:auto; min-width:230px; flex:0 0 auto; }
}

/* ============================================================
   CONTACT FORM
   Reuses the sunken .pinput well; only the pieces the form adds
   are defined here.
   ============================================================ */
.form{ display:grid; gap:18px; max-width:660px; }
.form__row{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.form__label{
  display:block; margin-bottom:7px;
  font-size:12px; font-weight:700; letter-spacing:0;
  color:var(--ink-2);
}
.form__label .req{ color:var(--accent-ink); }

textarea.pinput{
  min-height:170px;
  line-height:1.6;
  resize:vertical;
}

.form__hint{ font-size:13.5px; color:var(--ink-3); margin:0; }

/* Result line. Holds its own row so the form does not jump when a
   message appears after submitting. */
.form__note{
  min-height:22px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
}
.form__note.is-ok{ color:var(--green-lit); }
.form__note.is-bad{ color:var(--amber); }

/* Honeypot: a real person never sees it, a bot fills it in. */
.form__trap{
  position:absolute; left:-9999px;
  width:1px; height:1px; overflow:hidden;
}

/* ============================================================
   THE RAIL
   Every pack and tool, laid out sideways and dragged rather than
   paged. Cards keep one width here, so a wide screen gets more of
   them rather than the same three stretched tall and narrow.
   ============================================================ */
.rail{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 0 8px;
  /* the browser owns the vertical axis, so the page still scrolls
     straight through the rail; only sideways drags are the rail's */
  touch-action:pan-y;
  cursor:grab;
  /* The rail loops by moving the scroll position by exactly one copy.
     A smooth scroll would animate that jump and show the seam. */
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  /* Its scrollbar would be lying about where you are in a list that
     never ends, so it is not drawn. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail.is-dragging{ cursor:grabbing; user-select:none; }
/* same story here: every card is a link wrapped round an image */
.rail a,
.rail img{ -webkit-user-drag:none; user-drag:none; }
.rail > *{
  flex:0 0 262px;
  width:262px;
  margin-bottom:3px;   /* room for the slab's side */
}
/* the card's own hover lift would fight a rail being dragged under it */
.rail.is-dragging > *:hover{ transform:none; }
.rail img{ -webkit-user-drag:none; user-drag:none; }

@media (max-width:560px){
  .rail{ gap:12px; }
  .rail > *{ flex:0 0 78vw; width:78vw; }
}

/* The two ways out of the "more from" row, under the cards. */
.morefoot{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center;
  margin-top:26px;
}
@media (max-width:560px){
  .morefoot{ flex-direction:column; }
  .morefoot .btn{ width:100%; }
}

/* ============================================================
   PACK DESCRIPTION
   The body copy comes across from CurseForge as the author's own
   HTML, so this styles the tags they actually use rather than a
   class per element.
   ============================================================ */
.packdesc{ max-width:74ch; }
.packdesc > *:first-child{ margin-top:0; }
.packdesc > *:last-child{ margin-bottom:0; }

.packdesc p{ margin:0 0 1em; font-size:15px; }
.packdesc h2{ margin:1.6em 0 .6em; font-size:20px; }
.packdesc h3,
.packdesc h4{ margin:1.4em 0 .5em; font-size:15px; }

.packdesc ul,
.packdesc ol{ margin:0 0 1.2em; padding-left:22px; }
.packdesc li{ margin-bottom:.5em; }
.packdesc li::marker{ color:var(--accent-ink); }

.packdesc strong,
.packdesc b{ color:var(--ink); font-weight:650; }
.packdesc a{ text-decoration:underline; }

.packdesc img{
  max-width:100%; height:auto;
  margin:0 0 1.2em;
  border-radius:var(--r);
  box-shadow:0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
}

.packdesc .embed{
  display:block; position:relative;
  aspect-ratio:16/9;
  max-width:640px;
  margin:0 0 1.4em;
  border-radius:var(--r);
  background:var(--deep);
  box-shadow:inset 0 2px 6px var(--well-sh-2);
}
.packdesc .embed iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}

.packdesc code{
  font-family:var(--mono); font-size:12.5px;
  color:var(--green-lit);
  padding:2px 5px;
  border-radius:var(--r-sm);
  background:var(--deep);
  box-shadow:inset 0 1px 2px var(--well-sh);
}
.packdesc pre{
  margin:0 0 1.2em; padding:14px;
  border-radius:var(--r);
  background:var(--deep);
  box-shadow:inset 0 2px 5px var(--well-sh);
  overflow-x:auto;
}
.packdesc pre code{ box-shadow:none; padding:0; background:none; }

.packdesc table{
  width:100%; margin:0 0 1.2em;
  border-collapse:collapse;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--deep);
  box-shadow:inset 0 2px 4px var(--well-sh);
}
.packdesc th,
.packdesc td{ padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; }
.packdesc th{ background:var(--slab); color:var(--ink); font-size:12px; font-weight:700; }
.packdesc tr:last-child td{ border-bottom:0; }

.packdesc hr{ border:0; border-top:1px solid var(--line); margin:1.6em 0; }

/* Attribution line, for a project on the account that someone else made. */
.packhead__credit{
  font-size:13.5px;
  color:var(--ink-3);
  margin:-6px 0 0;
}

/* ============================================================
   LEAD SECTION
   Heading on the left, "see all" on the right, grid across the
   bottom.
   ============================================================ */
.shell--lead{
  display:grid;
  grid-template-columns:1fr auto;
  column-gap:18px;
}
.shell--lead > .section__head{ grid-column:1; grid-row:1; }
.shell--lead > .section__more{
  grid-column:2; grid-row:1;
  justify-self:end; align-self:end;
  margin-bottom:26px;          /* line up with the heading row's gap */
}
.shell--lead > .grid-packs,
.shell--lead > .grid-tools{ grid-column:1 / -1; grid-row:2; }

@media (max-width:700px){
  .shell--lead{ grid-template-columns:1fr; }
  .shell--lead > .section__more{
    grid-column:1; grid-row:3;
    justify-self:stretch;
    margin:18px 0 0;
  }
  .shell--lead > .section__more .btn{ width:100%; }
}

/* The hero: what the site is, the two ways in, the numbers behind them,
   and the carousel. Stacked on a phone, side by side from tablet up. */
.hero{ padding:20px 0 44px; }
.hero__intro{ text-align:center; }
.hero__intro h1{ margin:0 auto 14px; }
.hero__lead{ margin:0 auto; color:var(--ink-2); }

/* Stacked by default, banner first: on a phone the artwork is the thing
   worth showing before anything else, and the copy reads fine once you
   have seen it. */
.hero__grid{ display:flex; flex-direction:column; }
.hero__grid > .banner{ margin-bottom:30px; }

/* On a wide screen the two sit side by side, artwork on the left. The
   markup is already in that order, so the grid needs no placement - and
   the banner takes the larger column, because it is the half being
   looked at.

   The hero is left at its content's height. A full first screen was
   tried and dropped: inside a 1180px shell the banner column is about
   660px, so at 16:9 the artwork is 372px tall in a 640px row and the
   rest of the screen is empty. Stretching it to close that gap made the
   frame square and cropped a landscape banner to its middle third.

   The section ending part way down the first screen is not a fault. It
   puts a row of packs in view straight away - which is what people came
   for - and tells you there is more below. */
@media (min-width:960px){
  .hero__grid{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:38px;
    align-items:center;
  }

  .hero__grid > .banner{ margin-bottom:0; }
  /* 750 x 340 - the shape the pack banners are actually drawn at, not
     16:9. A number rather than a ratio literal, because --shot-ratio is
     also multiplied in the height cap further up.

     The cap keeps the frame from growing past the size the artwork was
     authored at; inside a 1180px shell with a column of copy beside it
     the banner comes out ~660px wide, so the cap only bites on a wider
     shell. */
  .banner{ --shot-ratio:2.206; }
  .banner .slider{ max-width:750px; margin:0; }

  .hero__intro{
    text-align:left;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:clamp(16px,2.6vh,28px);
  }
  .hero__intro h1{ margin:0; }
  .hero__lead{ margin:0; }
  .hero__cta{ margin-top:0; justify-content:flex-start; }
  .hero__stats{ margin-top:0; justify-content:flex-start; }
}

/* a stat is a well, not a plate - the number is read, not pressed */
.hero__stat{
  background:var(--deep);
  border-radius:var(--r);
  box-shadow:inset 0 2px 4px var(--well-sh), inset 0 -1px 0 var(--lit);
  margin-bottom:0;
  min-width:112px;
}

@media (max-width:640px){
  .hero__stat{ min-width:0; flex:1 1 30%; padding:10px 12px; }
  .hero__stat b{ font-size:16px; }
}

/* ============================================================
   SUPPORTERS + KO-FI
   The wall is a row of small slabs, one per person. It is fed by
   assets/js/supporters.js, which a Ko-fi webhook is meant to write.
   ============================================================ */
.wall{ display:flex; flex-wrap:wrap; gap:9px; }
.wall__one{
  display:inline-flex; flex-direction:column; gap:2px;
  padding:8px 13px;
  background:var(--slab-3);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 2px 0 var(--edge), 0 4px 7px var(--amb-2);
}
.wall__one b{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3; }
.wall__one span{ font-size:12px; color:var(--ink-3); line-height:1.4; }
/* monthly, so it gets the green edge rather than a badge to read */
.wall__one.is-member b{ color:var(--accent-ink); }
.wall__empty{ margin:0; font-size:13.5px; color:var(--ink-3); }


/* ---- supporters strip: a lane of names that slides on its own ----
   It is a real scroller, not a CSS animation: assets/js/main.js nudges
   scrollLeft a fraction of a pixel per frame and wraps by exactly one copy
   of the list, so the drift and a dragging finger are the same mechanism
   rather than two fighting over one transform.

   It runs edge to edge, wider than the shell, because a strip that stops
   short of the sides reads as a stalled carousel. */
.supwrap{
  overflow:hidden;
  padding:22px 0;
  /* a line above and below, so the band is plainly its own thing between
     the banner and the packs */
  border-top:1px solid var(--edge-2);
  border-bottom:1px solid var(--edge-2);
  background:var(--deep);
  box-shadow:inset 0 2px 5px var(--well-sh), inset 0 -2px 5px var(--well-sh);
}
.supstrip{
  position:relative;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.supstrip::-webkit-scrollbar{ display:none; }
.supstrip.is-held{ cursor:grabbing; }
.supstrip__lane{ display:flex; width:max-content; }
.supstrip__half{ display:flex; }

.supstrip__one{
  display:inline-flex; align-items:center; gap:9px;
  flex:0 0 auto;
  margin-right:10px;
  padding:9px 15px;
  background:var(--slab-2);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
  user-select:none;
}
.supstrip__cup{ font-size:15px; line-height:1; }
.supstrip__one b{ font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap; }
.supstrip__one > span:last-child{
  font-size:12.5px; color:var(--ink-3); white-space:nowrap;
}
/* monthly reads by its name being green, not by a badge to decode */
.supstrip__one.is-member b{ color:var(--accent-ink); }

.supstrip__empty{
  margin:0 auto; padding:0 20px;
  max-width:var(--shell);
  font-size:14px; color:var(--ink-3);
}
}

/* The way out of a section - "See all packs", "See all tools". It was a
   ghost plate sitting next to a heading, which is where the eye goes last,
   so it read as decoration. Green, with an arrow that leans when you point
   at it, is the amount of noise a link out of a section is worth. */
.btn--go{ padding-right:17px; }
.btn--go span{
  display:inline-block;
  transition:transform .12s ease-out;
}
.btn--go:hover span{ transform:translateX(3px); }

/* ---- support page ----
   One column, read top to bottom: what it is, the button, then the names.
   Nothing else is on it, because anything else would be filler. */
.shell--narrow{ width:100%; max-width:640px; margin:0 auto; padding:0 20px; }
.lede{ font-size:16px; line-height:1.7; color:var(--ink-2); margin-bottom:1.1em; }
.fine{ margin:12px 0 0; font-size:12.5px; color:var(--ink-3); }
.wall__head{ margin:44px 0 4px; font-size:clamp(18px,2.2vw,22px); }

/* ============================================================
   ACCOUNTS, COMMENTS AND MESSAGES
   The panel and the comment boxes. Same slab language as the rest:
   the sheet is a raised plate, the fields are wells.
   ============================================================ */


.vxc__msg{ margin:10px 0 0; font-size:12.5px; color:var(--ink-3); min-height:1em; }
.vxc__msg.is-bad{ color:#ff7a6b; }

/* ---- comments ---- */
.vxc{ margin-top:34px; }
.vxc__head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.vxc__head h2{ margin:0; font-size:clamp(17px,2vw,20px); }
.vxc__count{ font-size:12.5px; color:var(--ink-3); }

.vxc__write{ margin-bottom:22px; }
.vxc__gate{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  padding:16px 18px;
  background:var(--slab-2);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
}
.vxc__gate p{ margin:0; flex:1; min-width:220px; font-size:13.5px; color:var(--ink-2); }

.vxc__formrow{
  display:flex; align-items:center; gap:12px;
  margin-top:10px;
}
.vxc__as{ font-size:12.5px; color:var(--ink-3); margin-right:auto; }
.vxc__as b{ color:var(--ink-2); }

.vxc__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.vxc__one{
  padding:14px 16px;
  background:var(--slab-2);
  border-radius:var(--r);
  box-shadow:
    inset 0 1px 0 var(--lit-2), inset 0 -1px 0 var(--dark),
    0 3px 0 var(--edge), 0 5px 9px var(--amb-2);
}
.vxc__one.is-hidden{ opacity:.55; }
.vxc__by{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:7px;
  font-size:13px;
}
.vxc__by b{ color:var(--ink); }
.vxc__by time{ font-size:12px; color:var(--ink-3); }
.vxc__del{
  margin-left:auto;
  background:none; border:0; padding:0;
  font-family:var(--sans); font-size:12px; font-weight:600;
  color:var(--ink-3); cursor:pointer;
}
.vxc__del:hover{ color:#ff7a6b; text-decoration:underline; }
.vxc__one p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.vxc__note{ font-size:13px; color:var(--ink-3); }