/* ============================================================
   Jupiter Innovation Lab — shared design system
   K3pler Sans · monochrome · halftone geometry
   ============================================================ */

/* Self-hosted: one variable file per style covers the whole 100-900 axis,
   and nothing is fetched from a third party. See assets/fonts/OFL.txt. */
@font-face{
  font-family:'K3pler Sans';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/K3plerSans-Variable.woff2') format('woff2-variations');
}
@font-face{
  font-family:'K3pler Sans';
  font-style:italic;font-weight:100 900;font-display:swap;
  src:url('fonts/K3plerSans-Italic-Variable.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/GeistMono-Variable.woff2') format('woff2-variations');
}

:root{
  --bg:#ffffff;
  --ink:#000000;
  --sub:#6b6b6b;
  --line:#e4e4e4;
  --line-soft:#f0f0f0;
  --brand:#ef0274;
  --brand-ink:#d40068;
  --mono:'Geist Mono','SFMono-Regular',ui-monospace,monospace;
  --sans:'K3pler Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1180px;
  /* how much air is left between the hero field and the viewport edge */
  --hero-gap: clamp(12px, 2.2vw, 34px);
  /* distance from the centred container's content edge to the viewport edge,
     less that gap */
  --bleed: calc((100vw - min(1180px, 100vw))/2 + var(--pad) - var(--hero-gap));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
::selection{background:#000;color:#fff}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.rule{height:1px;background:var(--line);width:100%}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad);height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:-.02em;font-size:15px;white-space:nowrap}
.brand img.logo{height:44px;width:auto;display:block;margin-left:-3.5px}
.brand img.logo-mark{height:36px;width:auto;display:none}
@media(max-width:520px){
  .brand img.logo{display:none}
  .brand img.logo-mark{display:block}
}
.nav-links{display:flex;gap:28px;font-size:13.5px;color:var(--sub)}
.nav-links a{transition:color .15s;white-space:nowrap;position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-20px;height:2px;background:var(--brand)}
.nav-right{display:flex;align-items:center;gap:22px}

/* language switch */
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px}
.lang a{
  padding:4px 7px;border-radius:5px;color:var(--sub);transition:all .13s;
}
.lang a:hover{color:var(--ink)}
.lang a.on{background:var(--brand);color:#fff}

.nav-cta{
  font-size:13px;border:1px solid var(--ink);
  padding:7px 15px;border-radius:6px;font-weight:500;
  transition:background .15s,color .15s;white-space:nowrap;
}
.nav-cta:hover{background:var(--ink);color:#fff}
.menu-btn{display:none;background:none;border:0;font-family:var(--mono);font-size:12px;cursor:pointer;padding:6px}
@media(max-width:960px){
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px var(--pad) 16px}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:15px}
  .menu-btn{display:block}
  .nav-cta{display:none}
}

/* ---------- generic section ---------- */
section{padding:clamp(64px,10vh,120px) 0}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:8px}
.sec-kicker{font-family:var(--mono);font-size:12px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase}
.sec-title{font-size:clamp(28px,4vw,48px);letter-spacing:-.035em;font-weight:600;line-height:1.02;max-width:20ch}
.sec-intro{margin-top:22px;font-size:clamp(16px,1.5vw,18.5px);color:var(--sub);max-width:56ch;line-height:1.55}

/* buttons */
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;padding:12px 20px;border-radius:7px;border:1px solid var(--ink);transition:all .16s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:#fff;color:#000}
.btn-ghost:hover{background:#f6f6f6}

/* flow */
.flow{margin-top:34px;font-family:var(--mono);font-size:12.5px;color:var(--ink);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.flow .arrow{color:var(--sub)}
.flow .node{border:1px solid var(--line);padding:6px 11px;border-radius:5px}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(70px,13vh,150px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(38px,6.4vw,82px);line-height:.98;letter-spacing:-.045em;font-weight:600;max-width:14ch}
.hero .lede{margin-top:26px;font-size:clamp(16px,1.6vw,19px);color:var(--sub);max-width:46ch;line-height:1.55}
.hero .meta{margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--ink);display:flex;flex-wrap:wrap;gap:8px 0}
.hero .meta .dot{color:var(--line);padding:0 10px}
.hero .place{margin-top:14px;font-family:var(--mono);font-size:12.5px;color:var(--sub)}
.halftone-hero{width:calc(100% + var(--bleed));aspect-ratio:1.35/1;max-width:none;margin-left:auto;margin-right:calc(-1 * var(--bleed));display:block}
@media(max-width:900px){.halftone-hero{aspect-ratio:1.55/1;margin:0 calc(-1 * var(--bleed)) 0 0}}
/* side by side, the field reaches back across the column gap so its sparse tail
   lands next to the headline — stopping a few px short of the text column */
@media(min-width:901px){
  /* the text paints over the field, so strays can sit right against the type */
  .hero-grid > div:first-child{position:relative;z-index:1}
  .halftone-hero{
    --hero-reach: clamp(16px, 5.5vw, 78px);
    width:calc(100% + var(--bleed) + var(--hero-reach));
    margin-left:calc(-1 * var(--hero-reach));
    position:relative;z-index:0;
  }
}

/* ---------- work list ---------- */
.work-item{display:grid;grid-template-columns:210px 1fr;gap:48px;padding:52px 0;border-top:1px solid var(--line)}
.work-item:first-of-type{border-top:1px solid var(--ink)}
@media(max-width:820px){.work-item{grid-template-columns:1fr;gap:22px;padding:40px 0}}
.work-tag{font-family:var(--mono);font-size:12px;color:var(--sub);letter-spacing:.04em;text-transform:uppercase;line-height:1.7}
/* the visual is square and sits at the foot of its column, so its bottom edge
   lands on the last line of the entry (the keywords / link row opposite) */
.work-item > div:first-child{display:flex;flex-direction:column}
.work-visual{width:100%;max-width:210px;aspect-ratio:1/1;height:auto;margin-top:auto}
@media(max-width:820px){.work-visual{width:156px;aspect-ratio:1/1;height:auto;margin-top:14px}}
.work-name{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;font-weight:600}
.work-lead{font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;margin-top:12px;font-weight:500;max-width:34ch;line-height:1.25}
.work-body{margin-top:16px;color:var(--sub);font-size:15.5px;max-width:60ch;line-height:1.6}
.work-body p+p{margin-top:12px}
.work-stats{margin-top:20px;display:flex;gap:34px;flex-wrap:wrap}
.stat .n{font-size:26px;font-weight:600;letter-spacing:-.03em}
.stat .l{font-family:var(--mono);font-size:11.5px;color:var(--sub);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}
.work-foot{margin-top:22px;display:flex;gap:24px;flex-wrap:wrap;align-items:center}
.tags{font-family:var(--mono);font-size:11.5px;color:var(--sub)}
.inline-link{font-size:14.5px;font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:1px;transition:color .15s,border-color .15s}
.inline-link:hover{color:var(--brand-ink);border-color:var(--brand)}

/* ---------- research grid ---------- */
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);margin-top:44px;border-top:1px solid var(--ink)}
@media(max-width:820px){.rgrid{grid-template-columns:1fr}}
.rcell{padding:36px 40px 40px 0;border-bottom:1px solid var(--line);position:relative}
.rcell:nth-child(odd){border-right:1px solid var(--line);padding-right:40px}
.rcell:nth-child(even){padding-left:40px}
@media(max-width:820px){.rcell{padding:32px 0!important;border-right:0!important}}
.rcode{font-family:var(--mono);font-size:12px;color:var(--sub);letter-spacing:.04em}
.rq{font-size:clamp(19px,2vw,24px);letter-spacing:-.025em;font-weight:600;margin-top:14px;line-height:1.15;max-width:24ch}
.rbody{margin-top:14px;color:var(--sub);font-size:15px;line-height:1.6;max-width:48ch}
.rbody p+p{margin-top:10px}
.rstack{margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--ink);letter-spacing:.02em}
.rcell.linked{cursor:pointer;transition:background .15s}
.rcell.linked:hover{background:#fafafa}
.rmore{margin-top:16px;font-family:var(--mono);font-size:11.5px;border-bottom:1px solid var(--ink);display:inline-block;padding-bottom:1px}

/* ---------- sovereignty ---------- */
.sov{background:var(--ink);color:#fff}
.sov ::selection{background:#fff;color:#000}
.sov .sec-kicker{color:#8a8a8a}
.sov .sec-intro{color:#adadad}
.sov-layers{margin:44px 0;font-family:var(--mono);font-size:clamp(13px,1.6vw,17px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.sov-layers .plus{color:#666}
.sov-layers .layer{border:1px solid #333;padding:9px 15px;border-radius:6px}
.sov-claims{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
@media(max-width:820px){.sov-claims{grid-template-columns:1fr;gap:26px}}
.sov-claim h3{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;font-weight:600;line-height:1.05}
.sov-claim.dim h3{color:#7d7d7d}
.sov-claim p{margin-top:14px;color:#adadad;font-size:15.5px;line-height:1.6;max-width:44ch}
.sov-tail{margin-top:48px;font-family:var(--mono);font-size:14px;border-top:1px solid #2a2a2a;padding-top:24px}

/* ---------- dual use ---------- */
.du-caps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
@media(max-width:640px){.du-caps{grid-template-columns:1fr}}
.du-cap{background:#fff;padding:32px 30px}
.du-cap h4{font-size:18px;letter-spacing:-.02em;font-weight:600}
.du-cap p{margin-top:10px;color:var(--sub);font-size:14.5px;line-height:1.55}
.du-note{margin-top:34px;color:var(--sub);font-size:15px;line-height:1.6;max-width:64ch}
.du-arch{margin-top:30px;font-family:var(--mono);font-size:12.5px;border:1px solid var(--ink);padding:16px 20px;border-radius:7px;display:inline-block}

/* ---------- europe ---------- */
.eu-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:center}
@media(max-width:820px){.eu-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- open ---------- */
.open-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:44px}
@media(max-width:820px){.open-grid{grid-template-columns:1fr}}
.open-cell{background:#fff;padding:36px 32px;min-height:220px;display:flex;flex-direction:column}
.open-cell h4{font-size:20px;letter-spacing:-.025em;font-weight:600}
.open-cell p{margin-top:12px;color:var(--sub);font-size:14.5px;line-height:1.55;flex:1}
.open-cell .foot{margin-top:20px;font-family:var(--mono);font-size:12.5px}
.open-cell .foot a{border-bottom:1px solid var(--ink);padding-bottom:1px}
.specimen{font-size:44px;letter-spacing:-.03em;line-height:1;margin-top:6px}
.specimen small{display:block;font-family:var(--mono);font-size:11px;color:var(--sub);margin-top:10px;letter-spacing:.04em}

/* ---------- questions ---------- */
.q-list{margin-top:40px;border-top:1px solid var(--ink)}
.q-item{padding:30px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:60px 1fr;gap:20px;align-items:baseline}
@media(max-width:640px){.q-item{grid-template-columns:1fr;gap:6px}}
.q-num{font-family:var(--mono);font-size:12px;color:var(--sub)}
.q-text{font-size:clamp(19px,2.3vw,27px);letter-spacing:-.03em;font-weight:500;line-height:1.15;max-width:32ch}

/* ---------- final ---------- */
.final{padding-top:clamp(90px,16vh,180px);padding-bottom:clamp(70px,11vh,120px)}
.final h2{font-size:clamp(32px,5.6vw,72px);letter-spacing:-.045em;font-weight:600;line-height:.98;max-width:16ch}
.final h2 .soft{color:var(--sub)}
.final .place{margin-top:34px;font-family:var(--mono);font-size:13px;color:var(--sub)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 60px}
.foot-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:30px 40px;flex-wrap:wrap}
.foot-contact{font-family:var(--mono);font-size:12.5px;color:var(--sub);display:flex;flex-direction:column;gap:10px}
.foot-contact address{font-style:normal;line-height:1.6}
.foot-contact a{color:var(--sub);border-bottom:1px solid var(--line);padding-bottom:1px;align-self:flex-start}
.foot-contact a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot-links{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;color:var(--sub);flex-wrap:wrap}
.foot-links a:hover{color:var(--ink)}
.foot-legal{font-family:var(--mono);font-size:12px;color:var(--sub)}
/* its own full-width row at the foot, so it does not squeeze the columns */
.foot-attrib{flex:0 0 100%;margin-top:26px;font-size:11.5px}
.foot-legal a{color:var(--sub);border-bottom:1px solid var(--line);padding-bottom:1px}
.foot-legal a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot-brand{font-weight:600;letter-spacing:-.02em;font-size:15px;display:flex;align-items:center;gap:10px}
.foot-brand img{height:34px;width:auto;display:block;margin-left:-2.7px}

/* keyboard focus — brand ring */
a:focus-visible,button:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}

/* ============================================================
   INNER PAGE styles
   ============================================================ */
.page-hero{padding-top:clamp(60px,11vh,120px);padding-bottom:clamp(40px,6vh,70px)}
.breadcrumb{font-family:var(--mono);font-size:12px;color:var(--sub);margin-bottom:26px}
.breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{padding:0 8px;color:var(--line)}
.page-eyebrow{font-family:var(--mono);font-size:12.5px;color:var(--sub);letter-spacing:.05em;text-transform:uppercase}
.page-title{font-size:clamp(40px,7vw,92px);letter-spacing:-.045em;font-weight:600;line-height:.95;margin-top:16px}
.page-lead{margin-top:26px;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;color:var(--ink);max-width:34ch;line-height:1.25;font-weight:500}
.page-hero-grid{display:grid;grid-template-columns:1fr .7fr;gap:56px;align-items:center}
@media(max-width:860px){.page-hero-grid{grid-template-columns:1fr;gap:34px}}
.page-canvas{width:100%;max-width:360px;aspect-ratio:1/1;margin-left:auto;display:block}
@media(max-width:860px){.page-canvas{max-width:260px;margin:0 auto}}

.prose{max-width:64ch}
.prose h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em;font-weight:600;margin-top:56px;line-height:1.05}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:34px}
.prose p{margin-top:16px;color:var(--sub);font-size:16.5px;line-height:1.65}
.prose p strong{color:var(--ink);font-weight:600}
.prose ul{margin-top:16px;list-style:none}
.prose li{color:var(--sub);font-size:16px;line-height:1.6;padding-left:22px;position:relative;margin-top:10px}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--ink);border-radius:50%}
.mono-stack{font-family:var(--mono);font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:16px 20px;margin-top:22px;line-height:1.9;letter-spacing:.02em}

/* spec table */
.spec{margin-top:30px;border-top:1px solid var(--ink)}
.spec-row{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:640px){.spec-row{grid-template-columns:1fr;gap:4px}}
.spec-k{font-family:var(--mono);font-size:12.5px;color:var(--sub);letter-spacing:.03em;padding-top:2px}
.spec-v{font-size:15.5px;line-height:1.55}

/* two column content */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:30px}}

/* CTA band */
.cta-band{border-top:1px solid var(--line);margin-top:0}
.cta-band .inner{padding-top:clamp(60px,10vh,110px);padding-bottom:clamp(60px,10vh,110px)}
.cta-band h2{font-size:clamp(28px,4.5vw,54px);letter-spacing:-.04em;font-weight:600;line-height:1;max-width:18ch}

/* notes list */
.note-list{margin-top:44px;border-top:1px solid var(--ink)}
.note-row{display:grid;grid-template-columns:130px 1fr 120px;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline;transition:background .15s}
.note-row:hover{background:#fafafa}
@media(max-width:720px){.note-row{grid-template-columns:1fr;gap:6px}}
.note-date{font-family:var(--mono);font-size:12px;color:var(--sub)}
.note-title{font-size:18px;font-weight:600;letter-spacing:-.02em}
.note-tag{font-family:var(--mono);font-size:11px;color:var(--sub);text-align:right}
@media(max-width:720px){.note-tag{text-align:left}}

/* reveal */
@media(prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .rise.in{opacity:1;transform:none}
}

/* ---------- typeface specimen ---------- */
.spec-meta{display:flex;flex-wrap:wrap;gap:0 34px;margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--sub)}
.spec-meta b{display:block;color:var(--ink);font-weight:500;margin-top:3px;font-size:13.5px}
.spec-band{border-top:1px solid var(--line);padding:clamp(48px,7vh,84px) 0}
.spec-band:first-of-type{border-top:1px solid var(--ink)}
.spec-label{font-family:var(--mono);font-size:12px;color:var(--sub);letter-spacing:.06em;text-transform:uppercase;margin-bottom:26px}
/* the giant alphabet: let it run to the edge and clip rather than wrap */
.spec-hero-type{font-size:clamp(56px,13vw,190px);line-height:.86;letter-spacing:-.05em;font-weight:600;word-break:break-all}
.spec-hero-type .thin{font-weight:200}
/* weights */
.wt-row{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-soft)}
.wt-row:first-child{border-top:0}
.wt-name{font-family:var(--mono);font-size:11.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.05em}
.wt-sample{font-size:clamp(24px,4.4vw,46px);letter-spacing:-.03em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:clip}
@media(max-width:640px){.wt-row{grid-template-columns:1fr;gap:2px}}
/* playground */
.pg-controls{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:center;margin-bottom:30px;font-family:var(--mono);font-size:12px;color:var(--sub)}
.pg-control{display:flex;flex-direction:column;gap:8px;min-width:190px}
.pg-control .val{color:var(--ink)}
.pg-control input[type=range]{width:100%;accent-color:var(--brand)}
.pg-stage{border:1px solid var(--line);border-radius:8px;padding:clamp(20px,3vw,38px);min-height:190px}
.pg-stage:focus-within{border-color:var(--ink)}
.pg-text{width:100%;border:0;outline:0;resize:none;font-family:var(--sans);color:var(--ink);background:transparent;overflow:hidden;line-height:1.06;letter-spacing:-.03em}
/* character set */
.glyphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.glyph{background:#fff;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:23px;transition:background .12s,color .12s;cursor:default}
.glyph:hover{background:var(--ink);color:#fff}
.glyph-group{margin-top:34px}
.glyph-group:first-child{margin-top:0}
.glyph-group h3{font-family:var(--mono);font-size:11.5px;color:var(--sub);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-weight:400}
/* size specimen */
.sz-row{border-top:1px solid var(--line-soft);padding:18px 0;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline}
.sz-row:first-child{border-top:0}
.sz-n{font-family:var(--mono);font-size:11.5px;color:var(--sub)}
.sz-t{letter-spacing:-.02em;line-height:1.25}
/* install */
.code-block{background:#fafafa;border:1px solid var(--line);border-radius:8px;padding:20px 22px;font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow-x:auto;white-space:pre;color:var(--ink)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:20px}
.dl{border:1px solid var(--line);border-radius:8px;padding:16px 18px;display:block;transition:border-color .15s}
.dl:hover{border-color:var(--ink)}
.dl .n{font-weight:600;font-size:15px;letter-spacing:-.02em}
.dl .m{font-family:var(--mono);font-size:11.5px;color:var(--sub);margin-top:4px}