:root{
    /* Ground is lifted off pure black and warmed very slightly. Pure #000
       against a saturated accent is what makes a dark page glare. */
    --bg:#0C0C0F; --bg-2:#101014; --panel:#15151A; --panel-2:#1B1B21;
    --ink:#EDECE8; --ink-rgb:237,236,232;
    --dim:#9A99A3; --faint:#63626D;

    /* One accent, defined twice: the hex for solid fills, the raw channels
       so every tint below can be rgba() off the same value. Change both
       together and the whole page re-themes. */
    --accent:#3EA4A8;
    --accent-rgb:62,164,168;
    --on-accent:#081616;   /* text that sits ON the accent */

    --line:rgba(237,236,232,.10); --line-2:rgba(237,236,232,.06);
    --maxw:1120px;
  }
  /* Parallax ground plane. Fixed and behind everything, so the grid drifts
     slower than the page as you scroll and the content reads as a layer above
     it. The grid is a repeating gradient, so it is panned by moving
     background-position rather than translating a box - it tiles forever and
     can never run out from under the viewport. */
  .bg{position:fixed;inset:0;z-index:0;pointer-events:none;
    --grid:rgba(237,236,232,.095);
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),
      linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:64px 64px;background-position:0 0;
    -webkit-mask-image:radial-gradient(120% 90% at 50% 12%,#000,transparent 78%);
    mask-image:radial-gradient(120% 90% at 50% 12%,#000,transparent 78%);
    will-change:background-position}
  /* content sits above the plane */
  nav,main,footer{position:relative;z-index:1}
  .trend{will-change:transform}
  @media (prefers-reduced-motion:reduce){ .bg,.trend{will-change:auto} }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);
    font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
    font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
    overflow-x:hidden}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:Space Grotesk,sans-serif;letter-spacing:-.025em;line-height:1.06;margin:0}
  .eyebrow{font-family:Space Mono,monospace;font-size:11px;font-weight:700;
    letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0}

  /* ---------- nav ---------- */
  nav{position:sticky;top:0;z-index:50;background:rgba(12,12,15,.80);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-2)}
  .navin{max-width:var(--maxw);margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:20px}
  .lockup{display:flex;align-items:center;gap:11px}
  .lockup .wm{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:18px;
    letter-spacing:-.01em;line-height:1;display:block}
  .lockup .sub{font-family:Space Mono,monospace;font-size:9px;letter-spacing:.2em;
    color:var(--faint);text-transform:uppercase;display:block;margin-top:3px}
  .navlinks{display:flex;align-items:center;gap:28px;font-size:14px;color:var(--dim);font-weight:450}
  .navlinks a:hover{color:var(--ink)}
  .btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:600;
    font-size:14px;padding:10px 20px;border-radius:999px;border:1px solid var(--accent);
    transition:transform .18s ease, background .18s ease;cursor:pointer;
    font-family:inherit;line-height:1.3}
  .btn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
  .btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
  /* honeypot: off-screen, never shown, never focusable */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  @media (max-width:780px){ .navlinks .hidem{display:none} }

  /* ---------- hero ---------- */
  .hero{position:relative;padding:88px 0 76px;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:-40% 0 auto 50%;width:1200px;height:800px;
    transform:translateX(-50%);pointer-events:none;
    background:radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),0) 70%)}
  .hero .wrap{position:relative;z-index:1}
  .livetag{display:inline-flex;align-items:center;gap:9px;
    font-family:Space Mono,monospace;font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim);
    border:1px solid var(--line);border-radius:999px;padding:7px 15px 7px 12px;margin-bottom:30px}
  /* The recording-light convention: a steady fade in and out, not an
     expanding ring. Reads as "this is live" at a glance. */
  .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 8px rgba(var(--accent-rgb),.75);
    animation:live 1.9s ease-in-out infinite}
  @keyframes live{
    0%,100%{opacity:1;box-shadow:0 0 8px rgba(var(--accent-rgb),.75)}
    50%    {opacity:.22;box-shadow:0 0 2px rgba(var(--accent-rgb),.15)}}

  /* The logo, used at scale: the same two hands framing the number, so the
     mark in the nav and the gesture around the count read as one idea. */
  /* horizontal padding must exceed .fh width or the bracket sits on the
     digits; at 1440 that is a 50px mark inside 68px of padding. */
  .countframe{position:relative;display:inline-block;margin:0 0 18px;
    padding:clamp(34px,5.4vw,76px) clamp(50px,11vw,162px)}
  .countframe .count{margin:0;position:relative;z-index:1}
  /* Rising trend line behind the number: the counter says the roster grows,
     this shows it. Sits under the digits and over the hero grid. */
  .trend{position:absolute;inset:0;width:100%;height:100%;z-index:0;
    color:var(--accent);pointer-events:none;overflow:hidden}
  .trend .tline{fill:none;stroke:var(--accent);stroke-width:2.5;
    stroke-linecap:round;stroke-linejoin:round;opacity:.42;
    vector-effect:non-scaling-stroke}
  .trend .thead{fill:none;stroke:var(--accent);stroke-width:2.5;
    stroke-linecap:round;stroke-linejoin:round;opacity:.62;
    vector-effect:non-scaling-stroke}
  @media (max-width:520px){ .trend .tline,.trend .thead{stroke-width:2} }
  /* The desktop clearance is wider than a phone can afford: at 375px the
     number alone is ~258px inside 327px of content box, so the frame has to
     give the padding back or it overflows and body{overflow-x:hidden} eats
     the far hand. Hand stays narrower than the padding at every width. */
  @media (max-width:520px){
    .countframe{padding:clamp(22px,6vw,38px) clamp(34px,10vw,58px)}
    .fh{width:clamp(32px,9.2vw,56px)}
  }
  .fh{position:absolute;pointer-events:none;
    width:clamp(56px,12.2vw,178px);height:auto}
  .fh-bl{bottom:0;left:0;animation:handBL .95s cubic-bezier(.22,1,.36,1) both}
  .fh-tr{top:0;right:0;animation:handTR .95s cubic-bezier(.22,1,.36,1) .06s both}
  @keyframes handBL{from{opacity:0;transform:translate(-16px,16px)}
                    to{opacity:.9;transform:none}}
  @keyframes handTR{from{opacity:0;transform:translate(16px,-16px)}
                    to{opacity:.9;transform:none}}

  .count{font-family:Space Grotesk,sans-serif;font-weight:700;
    font-size:clamp(46px,11.2vw,146px);line-height:1;letter-spacing:-.045em;
    color:var(--ink);margin:0 0 18px;
    display:flex;align-items:flex-start;flex-wrap:nowrap}
  /* glow must live on the parent: each .d clips overflow, so a text-shadow
     on the digits themselves gets sliced into rectangles. */
  .odo{display:inline-flex;align-items:flex-start;
    filter:drop-shadow(0 0 34px rgba(var(--ink-rgb),.10))}
  .d{display:inline-block;width:.63em;height:1em;overflow:hidden;position:relative}
  .strip{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;will-change:transform}
  .strip b{display:block;height:1em;line-height:1;font-weight:700;text-align:center;
    letter-spacing:normal}
  .sep{display:inline-block;width:.28em;text-align:center}

  .countlabel{font-family:Space Grotesk,sans-serif;font-weight:500;
    font-size:clamp(17px,2.5vw,26px);letter-spacing:-.02em;color:var(--ink);
    margin:0 0 8px;max-width:46ch}
  .countsub{color:var(--faint);font-size:13px;margin:0 0 46px;
    font-family:Space Mono,monospace;letter-spacing:.02em}
  .countsub b{color:var(--dim);font-weight:400}

  h1{font-size:clamp(30px,4.6vw,54px);font-weight:700;max-width:19ch;margin:0 0 20px}
  h1 .hl{color:var(--accent)}
  .herolede{color:var(--dim);font-size:clamp(15px,1.6vw,18px);max-width:56ch;margin:0 0 34px}
  .cta{display:flex;gap:12px;flex-wrap:wrap}
  .cta .btn{padding:13px 26px;font-size:15px}

  /* ---------- strip ---------- */
  .strip-stats{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
    background:var(--bg-2)}
  .statgrid{display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{padding:30px 24px;border-left:1px solid var(--line-2)}
  .stat:first-child{border-left:0}
  .stat .n{font-family:Space Grotesk,sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,36px);
    letter-spacing:-.03em;line-height:1;display:block;margin-bottom:8px}
  .stat .l{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint)}
  @media (max-width:760px){
    .statgrid{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(3){border-left:0}
    .stat:nth-child(n+3){border-top:1px solid var(--line-2)}}

  /* ---------- sections ---------- */
  section{padding:96px 0}
  .shead{margin-bottom:52px;max-width:60ch}
  .shead .eyebrow{margin-bottom:16px}
  .shead h2{font-size:clamp(28px,3.8vw,44px);font-weight:700;margin-bottom:16px}
  .shead p{color:var(--dim);margin:0;font-size:16px}

  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;
    background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
  .card{background:var(--bg);padding:34px 30px;transition:background .2s ease}
  .card:hover{background:var(--panel)}
  .card .ci{width:34px;height:34px;margin-bottom:22px;color:var(--accent)}
  .card h3{font-size:19px;font-weight:600;margin-bottom:10px}
  .card p{color:var(--dim);font-size:14.5px;margin:0;line-height:1.62}

  /* ---------- store band ----------
     The one inverted block on the page. It gives the .store arm its own
     moment and breaks up a long dark scroll. Keep it the only lime field. */
  /* Was a full-bleed field of pure accent, which is a huge area at maximum
     brightness and the single worst thing on the page for eye strain. Now a
     dark band lit by a soft off-center wash, so it still reads as a distinct
     section without the glare. */
  .storeband{background:var(--bg-2);padding:0;position:relative;
    border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .storeband::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 120% at 12% 50%,
      rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),0) 68%)}
  .storeband .wrap{position:relative;padding-top:76px;padding-bottom:76px;
    display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
  .storeband .eyebrow{margin-bottom:16px}
  .storeband h2{font-size:clamp(28px,3.8vw,44px);font-weight:700;
    color:var(--ink);margin:0 0 16px;max-width:16ch}
  .storeband p{color:var(--dim);font-size:16px;margin:0 0 30px;max-width:46ch}
  .storelist{list-style:none;padding:0;margin:0}
  .storelist li{display:flex;gap:14px;padding:17px 0;
    border-top:1px solid var(--line-2);font-size:14.5px;color:var(--dim)}
  .storelist li:last-child{border-bottom:1px solid var(--line-2)}
  .storelist svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:var(--accent)}
  .storelist b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
  .storelist i{display:block;font-style:normal}
  @media (max-width:820px){ .storeband .wrap{grid-template-columns:1fr;gap:36px} }

  /* ---------- brands + discretion ---------- */
  .roster{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  /* Logo wall. Centered flex-wrap, not a grid: the brand count changes and a
     rigid grid leaves a ragged last row every time it does. Logos are white
     silhouettes on a common canvas height, so one CSS height balances them. */
  .brandwall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:clamp(26px,4vw,54px) clamp(30px,5vw,68px);
    background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;
    padding:clamp(30px,4.6vw,50px) clamp(24px,4vw,44px)}
  .bw{display:inline-flex;align-items:center;gap:11px;
    opacity:.66;transition:opacity .2s ease}
  .bw:hover{opacity:1}
  .bw img{display:block;height:clamp(19px,2.5vw,32px);width:auto}
  .bw b{font-family:Space Grotesk,sans-serif;font-weight:600;letter-spacing:-.01em;
    font-size:clamp(13px,1.55vw,19px);color:var(--ink);white-space:nowrap}
  .brandnote{color:var(--dim);font-size:14.5px;max-width:62ch;margin:22px 0 0}
  .disc{margin-top:26px;border:1px solid var(--line);border-radius:18px;background:var(--panel);
    padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .disc h3{font-size:clamp(22px,2.9vw,32px);font-weight:700;margin-bottom:14px}
  .disc h3 .hl{color:var(--accent)}
  .disc .dtext{color:var(--dim);font-size:15px;margin:0;max-width:40ch}
  .disclist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:20px}
  .disclist li{display:flex;gap:14px;font-size:14.5px}
  .disclist svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:var(--accent)}
  .disclist b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
  .disclist i{display:block;font-style:normal;color:var(--dim)}
  @media (max-width:820px){ .disc{grid-template-columns:1fr;gap:32px;padding:34px 28px} }

  /* ---------- process ---------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
  .step{position:relative;padding-top:26px;border-top:2px solid var(--accent)}
  .step .sn{font-family:Space Mono,monospace;font-size:11px;font-weight:700;letter-spacing:.18em;
    color:var(--accent);display:block;margin-bottom:12px}
  .step h3{font-size:17px;font-weight:600;margin-bottom:9px}
  .step p{color:var(--dim);font-size:14px;margin:0}
  @media (max-width:860px){ .steps{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .steps{grid-template-columns:1fr} }

  /* ---------- looking for ---------- */
  .lf{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .lflist{list-style:none;padding:0;margin:0}
  .lflist li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-2);
    font-size:15px;color:var(--ink)}
  .lflist li:last-child{border-bottom:0}
  .lflist svg{flex:0 0 18px;width:18px;height:18px;margin-top:4px;color:var(--accent)}
  .lflist span b{display:block;font-weight:600;margin-bottom:2px}
  .lflist span i{display:block;font-style:normal;color:var(--dim);font-size:14px}
  .quote{border-left:2px solid var(--accent);padding:4px 0 4px 24px}
  .quote p{font-family:Space Grotesk,sans-serif;font-size:clamp(19px,2.4vw,26px);
    font-weight:500;letter-spacing:-.02em;line-height:1.32;margin:0 0 16px}
  .quote cite{font-family:Space Mono,monospace;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint);font-style:normal}
  @media (max-width:860px){ .lf{grid-template-columns:1fr;gap:40px} }

  /* ---------- apply ---------- */
  .apply{background:var(--bg-2);border-top:1px solid var(--line-2)}
  form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px}
  .f{display:flex;flex-direction:column;gap:8px}
  .f.full{grid-column:1/-1}
  label{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint)}
  input,select,textarea{background:var(--panel);border:1px solid var(--line);color:var(--ink);
    border-radius:10px;padding:13px 14px;font-family:inherit;font-size:15px;width:100%;
    transition:border-color .18s ease}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
  textarea{resize:vertical;min-height:112px}
  select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B9AA3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
  .formnote{grid-column:1/-1;color:var(--faint);font-size:13px;margin:0}
  .formmsg{grid-column:1/-1;font-size:14px;margin:0;display:none;padding:13px 15px;border-radius:10px}
  .formmsg.ok{display:block;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.35);color:var(--accent)}
  .formmsg.err{display:block;background:rgba(255,90,90,.09);border:1px solid rgba(255,90,90,.3);color:#ff9a9a}
  @media (max-width:620px){ form{grid-template-columns:1fr} }

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line-2);padding:56px 0 64px;background:var(--bg)}
  .fin{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
  .fnote{color:var(--faint);font-size:13px;max-width:38ch;margin:16px 0 0}
  .flinks{display:flex;gap:40px;flex-wrap:wrap}
  .fcol h4{font-family:Space Mono,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--faint);margin:0 0 14px;font-weight:700}
  .fcol a{display:block;color:var(--dim);font-size:14px;padding:4px 0}
  .fcol a:hover{color:var(--accent)}
  .legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-2);
    color:var(--faint);font-size:12px;font-family:Space Mono,monospace;letter-spacing:.04em;
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    /* The live dot is the exception. It fades opacity in place and never moves,
       so it does not cause the discomfort this setting exists to prevent, and it
       is the only thing on the page telling a reader the count is live. */
    .dot{animation:live 1.9s ease-in-out infinite!important}}


  /* ---------- our journey ----------
     A dated spine, not a decorative one: the rule and the node exist to make
     the order readable, and every entry hands off to the full post. */
  .tl{list-style:none;margin:0;padding:0;position:relative}
  .tl::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:1px;
    background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent)}
  @media (min-width:781px){ .tl::before{left:97px} }
  .tl li{position:relative;display:grid;grid-template-columns:1fr;gap:8px;
    padding:0 0 34px 34px}
  @media (min-width:781px){
    .tl li{grid-template-columns:90px 1fr;gap:44px;padding:0 0 38px 0}
    .tl li>div{padding-left:6px} }
  .tl li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:11px;
    border-radius:50%;background:var(--bg);border:1px solid var(--line)}
  @media (min-width:781px){ .tl li::before{left:92px} }
  /* the most recent entry is the live one */
  .tl li:last-child::before{background:var(--accent);border-color:var(--accent);
    box-shadow:0 0 10px rgba(var(--accent-rgb),.6)}
  .tlyr{font-family:Space Mono,monospace;font-size:12px;font-weight:700;
    letter-spacing:.16em;color:var(--accent);line-height:1.9;
    font-variant-numeric:tabular-nums}
  @media (min-width:781px){ .tlyr{text-align:right;font-size:13px} }
  .tl h3{font-size:19px;font-weight:600;margin:0 0 8px;letter-spacing:-.015em}
  .tl p{color:var(--dim);font-size:15px;margin:0;max-width:64ch}
  .tl p a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
  .tl p a:hover{border-color:var(--accent);color:var(--accent)}
  .tlink{display:inline-block;margin-top:11px;font-family:Space Mono,monospace;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
  .tlink:hover{color:var(--accent)}
  .tlend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
    margin:10px 0 0;color:var(--dim);font-size:15px}

  /* ---------- journal ---------- */
  .jlist{display:flex;flex-direction:column}
  .jitem{display:grid;grid-template-columns:160px 1fr;gap:32px;padding:28px 0;
    border-top:1px solid var(--line-2);align-items:start;transition:opacity .18s ease}
  .jitem:last-child{border-bottom:1px solid var(--line-2)}
  a.jitem:hover{opacity:.72}
  .jdate{font-family:Space Mono,monospace;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint);padding-top:6px;white-space:nowrap}
  .jitem h3{font-size:20px;font-weight:600;margin-bottom:9px}
  .jitem p{color:var(--dim);font-size:15px;margin:0;max-width:62ch}
  @media (max-width:700px){ .jitem{grid-template-columns:1fr;gap:10px} .jdate{padding-top:0} }

  /* long-form post body, journal page only */
  .post{max-width:68ch;padding:52px 0;border-top:1px solid var(--line-2)}
  .post:first-of-type{border-top:0;padding-top:0}
  .post .jdate{display:block;margin-bottom:16px;padding-top:0}
  .post h2{font-size:clamp(24px,3.2vw,34px);font-weight:700;margin-bottom:22px}
  .post p{color:var(--dim);font-size:16.5px;line-height:1.78;margin:0 0 20px}
  .post p:last-child{margin-bottom:0}
  .post strong{color:var(--ink);font-weight:600}
  /* a post now owns a page, so its title is the h1 */
  .post h1{font-size:clamp(26px,3.6vw,38px);font-weight:700;margin-bottom:22px;
    letter-spacing:-.03em;text-wrap:balance}
  .postpage{padding-top:0;border-top:0}
  .crumbs{display:flex;align-items:center;gap:9px;margin-bottom:34px;
    font-family:Space Mono,monospace;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--faint)}
  .crumbs a{color:var(--faint)}
  .crumbs a:hover{color:var(--accent)}
  /* prev/next: two equal cards, so a reader who finishes one post has an
     obvious next move and a crawler has two more internal links to follow */
  .postnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;
    max-width:68ch;margin:54px 0 30px}
  @media (max-width:640px){ .postnav{grid-template-columns:1fr} }
  .pn{display:block;border:1px solid var(--line-2);border-radius:14px;padding:16px 18px;
    background:var(--panel);transition:border-color .18s ease}
  .pn:hover{border-color:rgba(var(--accent-rgb),.45)}
  .pn span{display:block;font-family:Space Mono,monospace;font-size:9.5px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
  .pn b{display:block;font-family:Space Grotesk,sans-serif;font-size:15px;font-weight:600;
    line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
  .pn-r{text-align:right;grid-column:2}
  @media (max-width:640px){ .pn-r{text-align:left;grid-column:1} }
  .backrow{margin:0}
  /* listing entries carry a standfirst and a read cue */
  .jlist .jitem h2{font-size:20px;font-weight:600;margin:0 0 9px;letter-spacing:-.02em}
  .jlist .jitem .tlink{margin-top:12px}

  .backlink{font-family:Space Mono,monospace;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--faint)}
  .backlink:hover{color:var(--accent)}