/* ===========================================================================
   404motivation — the rooms and the press.

   Kinetic Spark's aesthetic, kept as it was: near-black ground, huge condensed
   uppercase display type with one word carrying a cyan-to-amber gradient, neon
   accents, Space Grotesk. Owner directive 2026-09-10 — retain the aesthetics.

   One room inside it is deliberately quiet. "Today" borrows Today's Thought's
   nocturnal calm: a floating panel, a serif line, no shouting. A page that only
   shouts stops registering as loud, so the loud parts need something to be loud
   against.

   Nothing here asks a third party for anything. The faces are in faces.css,
   downloaded and served from this folder.
   ======================================================================== */

@import url("faces.css");

:root{
  --void:#070709;
  --panel:#121217;
  --panel-2:#17171e;
  --line:#26262f;
  --white:#ffffff;
  --gray:#888899;
  --dim:#5a5a68;

  --cyan:#00f0ff;
  --green:#39ff14;
  --pink:#ff007f;
  --ember:#ff7a18;
  --ember-soft:#ffb061;

  /* Today's Thought's ground, kept a shade off the page so the panel floats. */
  --night:#0b0d1a;
  --night-edge:#1b2039;

  --disp:"Space Grotesk",system-ui,sans-serif;
  --mono:"Courier Prime",ui-monospace,monospace;
  --serif:"EB Garamond",Georgia,serif;

  --shell:min(1180px,92vw);

  /* Measured at 1440x900 before this was set: 176px between every section, and
     a page eight and a half screens deep. Sections need separating, not
     isolating — this is roughly half, and still reads as a break. */
  --gap-section:clamp(2rem,4.4vw,3.4rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:#050507}
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(0,240,255,.05), transparent 60%),
    radial-gradient(90% 70% at 100% 110%, rgba(255,122,24,.045), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(255,0,127,.035), transparent 55%),
    linear-gradient(180deg,#0a0a10 0%,#050507 45%,#0d0a0e 100%);
  background-attachment:fixed;color:var(--white);
  font-family:var(--disp);font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* The living substrate — a WebGL flow field, in substrate.js. It adds light to
   the CSS void below rather than covering it, so every fallback path (no WebGL,
   blocked script, phone) still shows a graded ground. */
#webgl-bg{
  position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
  display:block;opacity:0;transition:opacity 1.2s ease;
}
#webgl-bg.on{opacity:1}
@media (max-width:760px){ #webgl-bg{display:none} }

/* The CSS field underneath it, which is also the fallback */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vmax 40vmax at 12% -10%, rgba(0,240,255,.10), transparent 62%),
    radial-gradient(50vmax 38vmax at 92% 8%, rgba(255,122,24,.09), transparent 60%),
    radial-gradient(70vmax 50vmax at 50% 110%, rgba(255,0,127,.07), transparent 62%);
}
main,header,footer{position:relative;z-index:1}

.shell{width:var(--shell);margin-inline:auto}

a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:99;background:var(--cyan);color:#000;padding:.6em 1em;border-radius:6px}

/* ----------------------------------------------------------------- nav --- */
.nav{
  display:flex;align-items:center;gap:1.4rem;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
}
.wordmark{
  font-family:var(--disp);font-weight:700;font-size:1.05rem;letter-spacing:.16em;
  text-decoration:none;margin-right:auto;
}
.wordmark i{font-style:normal;color:var(--cyan)}
.nav a{color:var(--gray);text-decoration:none;transition:color .18s}
.nav a:hover,.nav a:focus-visible{color:var(--white)}
.nav .up{color:var(--dim);border-left:1px solid var(--line);padding-left:1.1rem}
@media (max-width:760px){ .nav .hide-s{display:none} }

/* ---------------------------------------------------------------- hero --- */
.hero{padding:clamp(2.4rem,6vw,4.4rem) 0 clamp(1.6rem,3.4vw,2.6rem)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:.6rem;margin:0 0 1.4rem;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember)}

h1.kinetic{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(2.6rem,9.2vw,7rem);
  line-height:.94;letter-spacing:-.03em;text-transform:uppercase;
  margin:0 0 1.5rem;max-width:15ch;
}
h1.kinetic .grad{
  background:linear-gradient(96deg,var(--cyan) 6%,#9fe8c9 38%,var(--ember-soft) 72%,var(--ember) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{max-width:56ch;color:#c3c3cf;font-size:clamp(1rem,1.6vw,1.12rem)}
.lede b{color:var(--white);font-weight:500}

.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:2rem 0 0}
.btn{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.95em 1.6em;border-radius:2px;text-decoration:none;
  background:var(--cyan);color:#04141a;font-weight:700;
  border:1px solid var(--cyan);transition:transform .16s,box-shadow .16s;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 8px 26px -10px var(--cyan)}
.btn.ghost{background:transparent;color:var(--white);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--white);box-shadow:none}

.stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,3rem);
  margin:clamp(1.6rem,4vw,2.6rem) 0 0;padding-top:1.5rem;border-top:1px solid var(--line);
}
.stat b{
  display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;letter-spacing:-.02em;
}
.stat span{
  display:block;margin-top:.5rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.stat:nth-child(1) b{color:var(--cyan)}
.stat:nth-child(2) b{color:var(--green)}
.stat:nth-child(3) b{color:var(--ember)}
.stat:nth-child(4) b{color:var(--pink)}

/* -------------------------------------------------------------- section -- */
section{padding:var(--gap-section) 0}
.sec-h{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 .8rem;
}
.sec-h b{color:var(--white);font-weight:400}
h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.7rem,4.4vw,3rem);line-height:1;margin:0 0 1rem;
}
.sec-lede{max-width:60ch;color:#a6a6b4;margin:0 0 1.6rem}

/* ---------------------------------------------------------- today card --- */
/* The quiet room. Today's Thought's palette and serif, inside this page. */
.today{
  background:linear-gradient(180deg,var(--night),#080a14);
  border:1px solid var(--night-edge);border-radius:14px;
  padding:clamp(1.8rem,5vw,3.4rem);position:relative;overflow:hidden;
}
.today::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 20% 0%, rgba(120,150,255,.10), transparent 70%);
}
.today .date{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#7f8bbf;margin:0 0 1.4rem;
}
.today blockquote{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,3.6vw,2.35rem);line-height:1.28;color:#eef0fb;max-width:24ch;
}
.today .who{
  margin:1.5rem 0 0;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:#9aa4d0;
}
.today .where{margin:.45rem 0 0;font-family:var(--serif);font-style:italic;color:#6f79a8;font-size:.95rem}
.today .acts{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 0}
.today .acts a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#c3cbf0;text-decoration:none;border:1px solid #262c4d;border-radius:2px;padding:.7em 1.1em;
}
.today .acts a:hover,.today .acts a:focus-visible{border-color:#5b67a8;color:#fff}

/* ---------------------------------------------------------- the press ---- */
.press{display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:1fr}
@media (min-width:940px){
  /* Near-equal columns. 420px fixed made the poster a strip beside a wide list;
     the poster is the thing being made and should not be the smaller half. */
  .press{grid-template-columns:minmax(0,1.02fr) minmax(400px,1fr);align-items:start}
  /* The poster follows the reader down the choices. Sticky rather than fixed so
     it releases at the end of the section instead of hanging over the page. */
  .stage{position:sticky;top:1.2rem;max-height:calc(100vh - 2.4rem);overflow:auto}
  .stage #poster{max-height:calc(100vh - 16rem)}
}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.4rem}
.panel h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin:0 0 1rem;font-weight:400;
}

.tabs{display:flex;gap:.4rem;margin:0 0 1rem;flex-wrap:wrap}
.tab{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--gray);border:1px solid var(--line);border-radius:2px;
  padding:.6em 1em;cursor:pointer;
}
.tab[aria-selected="true"]{background:var(--white);color:#000;border-color:var(--white)}

.qlist{list-style:none;margin:0;padding:0;max-height:420px;overflow-y:auto}
/* Tall enough to meet the poster column, so neither side leaves a hole. */
@media (min-width:940px){ .qlist{max-height:600px} }
.qlist li{border-bottom:1px solid var(--line)}
.qlist button,.qlist .row{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:.95rem .4rem;color:inherit;font:inherit;
}
.qlist button:hover,.qlist button:focus-visible{background:var(--panel-2)}
.qlist .line{display:block;color:#e6e6ee;font-size:.98rem;line-height:1.45}
.qlist .by{
  display:block;margin-top:.4rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.qlist .by em{font-style:normal;color:var(--ember)}

.tmpl{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.tmpl button{
  aspect-ratio:4/5;border:1px solid var(--line);border-radius:6px;cursor:pointer;
  background:#0d0d12;position:relative;overflow:hidden;padding:0;
}
.tmpl button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.tmpl button span{
  position:absolute;left:0;right:0;bottom:0;padding:.4em .5em;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:#cfcfdb;background:linear-gradient(transparent,rgba(0,0,0,.85));text-align:left;
}
.tmpl canvas{width:100%;height:100%;display:block}

.stage{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.4rem}
#poster{width:100%;height:auto;display:block;border-radius:6px;background:#000}
.stage .row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.stage .row .btn{flex:1 1 auto;text-align:center}

.nojs{
  border:1px solid var(--line);border-left:2px solid var(--ember);
  border-radius:6px;padding:1rem 1.2rem;margin:0 0 1.6rem;color:#a6a6b4;font-size:.9rem;
}

/* --------------------------------------------------------------- cards --- */
/* the room grid is a real list, so it needs its bullets removed rather
   than being faked with divs -- a screen reader should still hear how
   many rooms there are. */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.5rem;
  transition:border-color .2s,transform .2s;
}
.card:hover{border-color:#3a3a48;transform:translateY(-3px)}
.card h3{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em;margin:0 0 .6rem}
.card p{margin:0;color:#a0a0ae;font-size:.93rem}
.card .k{
  display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 .9rem;
}
.card:nth-child(1) .k{color:var(--cyan)}
.card:nth-child(2) .k{color:var(--green)}
.card:nth-child(3) .k{color:var(--ember)}
.card:nth-child(4) .k{color:var(--pink)}

/* -------------------------------------------------------------- footer --- */
footer{border-top:1px solid var(--line);padding:2.6rem 0;color:var(--dim);font-size:.85rem}
footer .frow{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:baseline}
footer a{color:var(--gray);text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--white)}
footer .note{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-left:auto}

/* --------------------------------------------------------------- motion -- */
.rise{opacity:1}                       /* default visible — JS off keeps it so */
html.js .rise{opacity:0;transform:translate3d(0,22px,0);transition:opacity .6s,transform .6s}
html.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .rise,.rise{opacity:1!important;transform:none!important;transition:none!important}
  .btn:hover,.card:hover{transform:none}
}


/* ------------------------------------------------------------ the moods --- */
/* Twelve states, laid out as a wrapping row. Big enough to hit on a phone
   (44px minimum, per the original's accessibility baseline). */
.moods{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.6rem}
.moods button{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;
  min-height:44px;padding:.75em 1.15em;cursor:pointer;border-radius:3px;
  background:var(--panel);color:var(--gray);
  border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease, color .3s ease;
}
.moods button:hover,.moods button:focus-visible{
  color:var(--white);border-color:rgba(0,240,255,.35);transform:translateY(-2px);
}
.moods button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--cyan),#7ee8d0);
  color:#04141a;border-color:transparent;font-weight:700;
}
.mood-out{
  background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--cyan);
  border-radius:0 10px 10px 0;padding:1.3rem 1.5rem;
}
.mood-line{margin:0 0 1rem;color:#d6d6e0;font-size:1.05rem;max-width:60ch}
.mood-rooms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.mood-rooms a{
  display:inline-block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--white);
  border:1px solid var(--line);border-radius:2px;padding:.65em 1em;
}
.mood-rooms a:hover,.mood-rooms a:focus-visible{border-color:var(--cyan);color:var(--cyan)}

/* ----------------------------------------------------------- the editor --- */
.panel h3 em{color:var(--dim);font-style:normal;font-weight:400}
.hint{margin:0 0 1rem;font-size:.82rem;color:var(--dim);max-width:46ch}
.fld{display:block;margin:0 0 .8rem}
.fld > span{
  display:block;margin:0 0 .35rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.fld textarea,.fld input{
  width:100%;background:rgba(255,255,255,.04);color:var(--white);
  border:1px solid var(--line);border-radius:4px;padding:.7em .8em;
  font-family:var(--disp);font-size:.95rem;line-height:1.45;resize:vertical;
}
.fld textarea:focus,.fld input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.fld-row{display:grid;gap:.8rem;grid-template-columns:1fr}
@media (min-width:520px){ .fld-row{grid-template-columns:1fr 1fr} }

/* ---------------------------------------------------------- the chooser --- */
.tmpl{grid-template-columns:repeat(3,1fr)}
@media (min-width:1200px){ .tmpl{grid-template-columns:repeat(4,1fr)} }
.pal{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.pal button{
  border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#0d0d12;
  padding:0;overflow:hidden;position:relative;
}
.pal button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset}
.pal canvas{width:100%;height:52px;display:block}
.pal span{
  display:block;padding:.4em;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:#cfcfdb;
}
.fmt{display:flex;flex-wrap:wrap;gap:.5rem}
.fmt button{
  flex:1 1 auto;min-height:44px;cursor:pointer;border-radius:3px;
  background:transparent;color:var(--gray);border:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
}
.fmt button[aria-pressed="true"]{background:var(--white);color:#000;border-color:var(--white)}
.fmt button span{display:block}

/* The poster can be any of three shapes now, so the stage must not assume one. */
#poster{max-height:70vh;object-fit:contain;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .moods button:hover{transform:none}
}


/* ------------------------------------------------- the lobby's quick press --
   The full chooser lives in the Studio. What stays here is a taster, so the
   controls are one compact block under the poster rather than four stacked
   panels beside it — which is what made this section 2,842px tall. */
.quick{display:grid;gap:.55rem;margin:.9rem 0 0}
.tmpl--mini{grid-template-columns:repeat(6,1fr);gap:.35rem;max-height:118px;overflow-y:auto}
.tmpl--mini button{aspect-ratio:4/5}
.tmpl--mini button span{font-size:.5rem;padding:.25em .3em}
.pal--mini{grid-template-columns:repeat(6,1fr);gap:.35rem}
.pal--mini canvas{height:26px}
.pal--mini span{font-size:.52rem;padding:.28em .2em;text-align:center}

/* Room cards were ragged because their blurbs differ in length. Equal heights,
   with the line count pinned to the bottom, so the grid reads as a grid. */
#galleries .cards{
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  grid-auto-rows:1fr;   /* every row the same height, not each row its own */
}
#galleries .card{display:flex;flex-direction:column}
#galleries .card p{margin-top:auto;padding-top:.5rem}
#galleries .card .k{order:-1}

/* The two ends of the page were doing the same thing at different sizes. */
#how .cards,.cards{align-items:stretch}

/* =============================================================== the essays ==
   Three pages in this world are reading rather than looking: they are about
   quotations instead of being them. They borrow the lobby's chrome and nothing
   else — a measured column, a serif nowhere (this world's voice is the
   grotesque), and headings that step down clearly enough to be skimmed.
   ======================================================================== */
.essay{padding:clamp(2rem,5vw,3.4rem) 0 clamp(2.4rem,6vw,4rem)}
.essay .crumb{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 1.6rem;
}
.essay .crumb a{color:var(--gray);text-decoration:none}
.essay .crumb a:hover{color:var(--white)}
.essay-h1{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,3.6rem);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 1.2rem;max-width:18ch;
}
.essay .lede{
  max-width:56ch;color:#c3c3cf;font-size:clamp(1.02rem,1.7vw,1.18rem);
  margin:0 0 2.4rem;padding-bottom:2rem;border-bottom:1px solid var(--line);
}
.essay-body{max-width:68ch;color:#b6b6c4;font-size:1.02rem;line-height:1.72}
.essay-body p{margin:0 0 1.15rem}
.essay-body b{color:var(--white);font-weight:600}
.essay-body em,.essay-body i{color:#d2d2de}
.essay-body h2{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.1;letter-spacing:-.01em;
  color:var(--white);margin:2.6rem 0 .9rem;
}
.essay-body h3{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);margin:1.9rem 0 .6rem;font-weight:400;
}
.essay-body ul{margin:0 0 1.15rem;padding-left:1.1rem}
.essay-body li{margin:0 0 .6rem}
.essay-body li::marker{color:var(--ember)}
.essay-body a{color:var(--cyan)}

/* The pulled-aside box. One per essay at most — it is for the example that
   makes the argument, not for anything that could have stayed in a paragraph. */
.essay-body .callout{
  margin:1.6rem 0;padding:1.2rem 1.4rem;border-radius:10px;
  border:1px solid var(--line);border-left:2px solid var(--ember);
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
}
.essay-body .callout p:last-child{margin:0}

/* The comparison table, which is the whole argument of one of the three. */
.essay-body .cmp{
  width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:.95rem;
  display:block;overflow-x:auto;
}
.essay-body .cmp th,.essay-body .cmp td{
  padding:.72rem .9rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top;
}
.essay-body .cmp thead th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);border-bottom-color:#3a3a48;
}
.essay-body .cmp thead th:nth-child(2){color:var(--pink)}
.essay-body .cmp thead th:nth-child(3){color:var(--green)}
.essay-body .cmp td:first-child{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.essay-body .cmp tbody td{color:#c3c3cf}

.essay-body .relstrip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:.8rem;margin:2.6rem 0 0;
}
.essay-body .relstrip a{
  display:block;padding:1rem 1.1rem;border-radius:10px;text-decoration:none;
  border:1px solid var(--line);color:var(--white);
  background:linear-gradient(157deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:border-color .25s,transform .25s;
}
.essay-body .relstrip a:hover{border-color:rgba(0,240,255,.3);transform:translateY(-2px)}
.essay-body .relstrip .rk{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);margin:0 0 .35rem;
}