/* =====================================================================
   THE BUREAU — page styles (sits on top of novadiem.css)
   Sacred Instrument geometry in the site's brass + cyan language.
   ===================================================================== */

:root{
  --current:#3ECFCF;            /* circuit cyan — flow / the current */
  --current-soft:rgba(62,207,207,.16);
  --current-line:rgba(62,207,207,.42);
  --amber:#d8a23a;              /* orchestration map: rework / reject leg */
  --ok:#5fb98b;                 /* orchestration map: pass / approval leg */
}
[data-theme="light"]{
  --current:#1d8090;
  --current-soft:rgba(29,128,144,.14);
  --current-line:rgba(29,128,144,.4);
  --amber:#a8730f;
  --ok:#2f8a5f;
}

/* =====================================================================
   HERO — orchestration map (free-standing animated SVG, replaces .binst)
   ===================================================================== */
.borch{min-height:100dvh;display:grid;align-items:center;overflow:hidden;position:relative;}
.borch .wrap{display:grid;grid-template-columns:0.92fr 1.08fr;gap:30px;align-items:center;width:100%;}
.borch .statpill{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--current);
  border:1px solid var(--current-line);border-radius:999px;padding:7px 15px;margin-bottom:24px;
  background:var(--current-soft);}
.borch .statpill .dot{width:7px;height:7px;border-radius:50%;background:var(--current);
  box-shadow:0 0 0 0 var(--current);animation:bp 2.4s ease-out infinite;}
@keyframes bp{0%{box-shadow:0 0 0 0 rgba(62,207,207,.5);}100%{box-shadow:0 0 0 8px rgba(62,207,207,0);}}
.borch h1 em{font-style:italic;color:var(--gold);}

/* free-standing map — no frame */
.map{position:relative;display:flex;justify-content:center;}
.map svg{display:block;width:auto;height:84dvh;max-height:680px;max-width:100%;overflow:visible;}
.map::before{content:"";position:absolute;left:42%;top:38%;width:42%;height:42%;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--current-soft),transparent 70%);
  filter:blur(18px);pointer-events:none;}

/* wires (data-flow) */
.wire{fill:none;stroke:var(--gold-line);stroke-width:1.15;stroke-opacity:.42;}
.wire--dash{stroke-dasharray:2 6;stroke-opacity:.5;}

/* nodes */
.nd .shp{fill:var(--surface-2);stroke:var(--gold-line);stroke-width:1.3;transition:fill .3s,stroke .3s;}
.nd .sig{stroke:var(--gold-soft);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s;}
.nd.on .shp{fill:var(--current-soft);stroke:var(--current);}
.nd.on .sig{stroke:var(--current);}
.nd--gate .shp{fill:none;stroke-dasharray:4 4;}
.nd--mem .shp{stroke:var(--current-line);}
.nd--mem .sig{stroke:var(--current);}
/* the conductor hub */
.hub .hshp{fill:var(--bg-alt);stroke:var(--current-line);stroke-width:1.8;transition:fill .25s,stroke .25s;}
.hub.on .hshp{fill:var(--current-soft);stroke:var(--current);}
.hub .hring{fill:none;stroke:var(--current-line);stroke-dasharray:3 4;}
.hub .sig{stroke:var(--current);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.hub .homega{fill:var(--current);stroke:none;}

/* tokens (the moving data dots) */
.tk{fill:var(--current);filter:drop-shadow(0 0 4px var(--current));}
.tk-h{fill:var(--current);opacity:.2;}
.tk--amber{fill:var(--amber);filter:drop-shadow(0 0 4px var(--amber));}
.tk-h--amber{fill:var(--amber);}
.tk--ok{fill:var(--ok);filter:drop-shadow(0 0 4px var(--ok));}
.tk-h--ok{fill:var(--ok);}

@media(prefers-reduced-motion:reduce){.borch .statpill .dot{animation:none;}}
@media(max-width:900px){.borch .wrap{grid-template-columns:1fr;gap:30px;}.map{max-width:520px;margin-inline:auto;}}

/* =====================================================================
   PILLARS — what the bureau is (value, grounded)
   ===================================================================== */
.valuegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.value{
  border:1px solid var(--border);border-radius:var(--r);padding:30px 26px 26px;
  background:var(--surface);position:relative;overflow:hidden;
}
.value::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.5;}
.value .vsig{width:48px;height:48px;color:var(--gold);margin-bottom:20px;}
.value h3{font-size:19px;margin-bottom:10px;}
.value p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55;}
@media(max-width:900px){.valuegrid{grid-template-columns:1fr;}}

/* =====================================================================
   THE CURRENT OF INTENT — horizontal routing rail
   ===================================================================== */
.current-wrap{position:relative;margin-top:8px;}
.current-rail{
  position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:14px;
  padding-top:54px;
}
/* the brass rail with cyan current running through it */
.current-rail::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:2px;
  background:linear-gradient(90deg,var(--gold-line),var(--gold) 12%,var(--gold) 88%,var(--gold-line));
  opacity:.55;
}
.current-rail::after{
  content:"";position:absolute;left:0;right:0;top:25px;height:4px;border-radius:4px;
  background:repeating-linear-gradient(90deg,var(--current) 0 16px,transparent 16px 40px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  opacity:.85;animation:railFlow 1.6s linear infinite;
}
@keyframes railFlow{to{background-position:40px 0;}}
@media (prefers-reduced-motion:reduce){.current-rail::after{animation:none;}}

.station{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;}
.station__node{
  position:absolute;top:-44px;left:0;width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:2px solid var(--gold);display:grid;place-items:center;
  box-shadow:0 0 0 5px var(--bg), 0 0 16px -4px var(--gold-glow);transition:.22s;
}
.station__node::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);}
.station--gate .station__node{border-color:var(--current);border-style:dashed;}
.station--gate .station__node::after{background:var(--current);}
.station__idx{font-family:var(--serif);font-size:11px;letter-spacing:.16em;color:var(--gold-soft);margin-bottom:7px;}
.station__name{font-weight:700;font-size:15px;line-height:1.2;margin-bottom:4px;}
.station__role{font-family:var(--serif);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.station__art{
  font-family:var(--mono,"Hanken Grotesk");font-size:11.5px;color:var(--ink-2);
  border:1px solid var(--border);border-radius:7px;padding:7px 10px;background:var(--bg-alt);
  display:flex;align-items:center;gap:7px;width:100%;
}
.station__art .fdot{width:6px;height:6px;border-radius:1px;background:var(--current);flex:0 0 auto;}
.station__art b{color:var(--ink);font-weight:700;font-family:var(--serif);letter-spacing:.04em;}
.station:hover .station__node{transform:scale(1.18);box-shadow:0 0 0 5px var(--bg),0 0 22px -2px var(--current);}
.station--gate .station__name{color:var(--current);}

.current-note{
  display:flex;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2);
}
.current-note .chip{
  font-family:var(--serif);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--gold-line);border-radius:999px;padding:5px 12px;color:var(--gold);
}
.current-note .chip--current{color:var(--current);border-color:var(--current-line);}
@media(max-width:920px){
  .current-rail{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:30px;}
  .current-rail::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto;}
  .current-rail::after{left:8px;right:auto;top:0;bottom:0;width:4px;height:auto;
    background:repeating-linear-gradient(180deg,var(--current) 0 16px,transparent 16px 40px);
    -webkit-mask:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
    animation:railFlowV 1.6s linear infinite;}
  @keyframes railFlowV{to{background-position:0 40px;}}
  .station{padding:18px 0 22px;}
  .station__node{top:20px;left:-30px;}
}

/* =====================================================================
   THE HUB — live radial structure (svg built in JS)
   ===================================================================== */
.hubgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;}
@media(max-width:940px){.hubgrid{grid-template-columns:1fr;}.hubstage{order:-1;}}
.hubstage{position:relative;width:100%;max-width:600px;margin-inline:auto;aspect-ratio:1;}
.hubstage svg{width:100%;height:100%;overflow:visible;}
.hub-rules{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.hub-rules li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);}
.hub-rules li b{color:var(--ink);font-weight:700;}
.hub-rules .rk{
  font-family:var(--serif);font-size:11px;color:var(--gold);flex:0 0 auto;margin-top:3px;
  width:20px;text-align:center;
}
/* hub interactive bits */
@keyframes hubDash{to{stroke-dashoffset:-40;}}
@media (prefers-reduced-motion:reduce){.hwire-cur{animation:none !important;}}
.hubstage .hnode{cursor:default;transition:opacity .2s;}
.hubstage .hwire{transition:stroke-opacity .25s,stroke-width .25s;}
.hubstage.dim .hnode:not(.is-on){opacity:.32;}
.hubstage.dim .hwire:not(.is-on){stroke-opacity:.08;}
.hub-tip{
  position:absolute;pointer-events:none;z-index:5;transform:translate(-50%,-130%);
  background:var(--surface);border:1px solid var(--gold-line);border-radius:8px;
  padding:8px 12px;min-width:120px;opacity:0;transition:opacity .18s;box-shadow:var(--shadow-2);
}
.hub-tip.show{opacity:1;}
.hub-tip .t-nm{font-weight:700;font-size:13px;}
.hub-tip .t-rl{font-family:var(--serif);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-top:2px;}

/* =====================================================================
   SPECIALIST CARDS — expandable, sigil-led
   ===================================================================== */
.spec-groups{display:flex;flex-direction:column;gap:46px;}
.spec-group__h{
  display:flex;align-items:baseline;gap:14px;margin-bottom:20px;flex-wrap:wrap;
}
.spec-group__h h3{font-family:var(--serif);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);}
.spec-group__h span{font-size:13.5px;color:var(--ink-3);}
.spec-group__h::after{content:"";flex:1;height:1px;background:var(--hair);min-width:30px;}

.specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;}
@media(max-width:920px){.specgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.specgrid{grid-template-columns:1fr;}}

.spec{
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  overflow:hidden;transition:border-color .25s, box-shadow .25s, transform .25s;
}
.spec:hover{border-color:var(--gold-line);box-shadow:var(--shadow-2);}
.spec.is-open{border-color:var(--gold);}
.spec.conductor{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--current) 7%, var(--surface)));}
.spec__btn{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;color:inherit;
  display:grid;grid-template-columns:54px 1fr 18px;gap:16px;align-items:center;
  padding:20px 20px;font-family:inherit;
}
.spec__sig{
  width:54px;height:54px;border-radius:11px;display:grid;place-items:center;color:var(--gold);
  border:1px solid var(--gold-line);background:radial-gradient(120% 120% at 50% 0%,var(--surface-2),var(--bg-alt));
}
.spec.conductor .spec__sig{color:var(--current);border-color:var(--current-line);}
.spec__sig svg{width:30px;height:30px;}
.spec__hd{display:flex;flex-direction:column;min-width:0;}
.spec__hd .nm{font-weight:700;font-size:17px;line-height:1.15;}
.spec__hd .rl{font-family:var(--serif);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:4px;}
.spec__hd .disc{font-size:12.5px;color:var(--ink-3);margin-top:5px;}
.spec__hd .disc b{color:var(--ink-2);font-weight:600;}
.spec__chev{color:var(--gold);transition:transform .3s ease;display:grid;place-items:center;}
.spec.is-open .spec__chev{transform:rotate(180deg);}

.spec__more{display:none;}
.spec.is-open .spec__more{display:block;animation:specIn .34s ease;}
@keyframes specIn{from{opacity:.85;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.spec.is-open .spec__more{animation:none;}}
.spec__inner{overflow:hidden;}
.spec__body{padding:0 20px 22px;border-top:1px dashed var(--hair);margin-top:0;}
.spec__creed{
  font-family:var(--serif);font-style:italic;font-size:14px;color:var(--ink);
  margin:16px 0 16px;line-height:1.45;
}
.spec.conductor .spec__creed{color:var(--ink);}
.spec__row{margin-bottom:14px;}
.spec__row .k{
  font-family:var(--serif);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:6px;
}
.spec__row p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.spec__row .q{font-style:italic;color:var(--ink-2);}
.spec__tarot{
  display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--hair);font-size:12px;color:var(--ink-3);
}
.spec__tarot .card-no{
  font-family:var(--serif);font-size:11px;letter-spacing:.1em;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:5px;padding:3px 8px;flex:0 0 auto;
}
.spec__tarot b{color:var(--ink-2);font-weight:600;}

/* =====================================================================
   THE ARCHIVE — seven collections
   ===================================================================== */
.archive-band{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center;}
@media(max-width:900px){.archive-band{grid-template-columns:1fr;}}
.coll-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
@media(max-width:760px){.coll-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:420px){.coll-grid{grid-template-columns:repeat(2,1fr);}}
.coll{
  border:1px solid var(--border);border-radius:9px;background:var(--bg-alt);
  padding:14px 8px;text-align:center;position:relative;transition:.22s;
}
.coll:hover{border-color:var(--gold);transform:translateY(-3px);}
.coll .spine{width:5px;height:26px;border-radius:2px;background:var(--gold);margin:0 auto 12px;
  box-shadow:0 0 12px -2px var(--gold);}
.coll .cn{font-family:var(--serif);font-size:11px;letter-spacing:.12em;color:var(--ink);}
.coll .cd{font-size:10px;color:var(--ink-3);margin-top:4px;line-height:1.3;}
.archive-emblem{position:relative;aspect-ratio:1;max-width:340px;margin-inline:auto;width:100%;color:var(--gold);}
.archive-emblem svg{width:100%;height:100%;overflow:visible;}

/* =====================================================================
   PRINCIPLES strip
   ===================================================================== */
.princ{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.princ{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.princ{grid-template-columns:1fr;}}
.principle{border:1px solid var(--border);border-radius:var(--r);padding:24px 22px;background:var(--surface);}
.principle .pk{font-family:var(--serif);font-size:26px;color:var(--gold);line-height:1;margin-bottom:14px;}
.principle h3{font-size:15px;margin-bottom:8px;letter-spacing:.01em;}
.principle p{font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.5;}

/* section intro helper */
.sec-intro{max-width:62ch;}
.sec-intro .lede{max-width:62ch;}

/* =====================================================================
   PROBLEM — two-up
   ===================================================================== */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:820px){.twoup{grid-template-columns:1fr;}}
.prob{
  border:1px solid var(--border);border-radius:var(--r);padding:30px 28px;background:var(--surface);
  display:flex;flex-direction:column;gap:14px;position:relative;
}
.prob .psig{width:54px;height:54px;color:var(--gold);}
.prob h3{font-size:21px;}
.prob p{font-size:15px;color:var(--ink-2);margin:0;line-height:1.6;}
.prob p b{color:var(--ink);font-weight:600;}
.fixline{
  margin-top:30px;font-family:var(--serif);font-size:clamp(18px,2.2vw,24px);
  color:var(--ink);text-align:center;letter-spacing:.01em;
}
.fixline em{font-style:italic;color:var(--gold);}

/* =====================================================================
   MEMORY STRATA — layered record
   ===================================================================== */
.strata{display:grid;grid-template-columns:34px 1fr;gap:18px;align-items:stretch;}
.strata__axis{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 0;}
.strata__axis .ln{position:absolute;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--current),var(--gold));opacity:.5;}
.strata__axis .cap{
  writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--serif);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);background:var(--bg);padding:4px 0;z-index:1;
}
.strata__stack{display:flex;flex-direction:column;gap:10px;}
.layer{
  display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:center;
  border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;background:var(--surface);
  position:relative;overflow:hidden;transition:.22s;
}
.layer:hover{border-color:var(--gold-line);}
.layer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:var(--w,.4);}
.layer__sig{width:46px;height:46px;color:var(--gold);display:grid;place-items:center;}
.layer__sig svg{width:30px;height:30px;}
.layer__main .nm{font-weight:700;font-size:17px;line-height:1.2;}
.layer__main .ds{font-size:13.5px;color:var(--ink-2);margin-top:5px;line-height:1.5;max-width:62ch;}
.layer__tag{
  font-family:var(--serif);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:999px;padding:5px 12px;white-space:nowrap;align-self:flex-start;margin-top:2px;
}
.layer--base{background:linear-gradient(180deg,var(--surface),var(--surface-2));border-color:var(--gold-line);}
@media(max-width:680px){
  .strata{grid-template-columns:1fr;}
  .strata__axis{flex-direction:row;justify-content:space-between;height:24px;}
  .strata__axis .ln{top:auto;left:8px;right:8px;bottom:auto;height:1px;width:auto;background:linear-gradient(90deg,var(--current),var(--gold));}
  .strata__axis .cap{writing-mode:horizontal-tb;}
  .layer{grid-template-columns:40px 1fr;gap:14px;}
  .layer__tag{grid-column:2;}
}

/* =====================================================================
   RETRIEVAL — three converging paths
   ===================================================================== */
.retrieval{
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  padding:clamp(22px,3vw,34px);margin-top:18px;
}
.retrieval__svg{width:100%;height:auto;display:block;overflow:visible;}
.retrieval__cap{font-size:14.5px;color:var(--ink-2);margin:18px 0 0;line-height:1.6;max-width:70ch;}
.retrieval__cap b{color:var(--ink);font-weight:600;}

/* =====================================================================
   FEATURE block (Rheo, cold review, learns) — emblem + copy
   ===================================================================== */
.feature{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,56px);align-items:center;}
.feature.rev{grid-template-columns:1.2fr .8fr;}
.feature.rev .feature__art{order:2;}
@media(max-width:860px){.feature,.feature.rev{grid-template-columns:1fr;}.feature.rev .feature__art{order:-1;}}
.feature__art{position:relative;aspect-ratio:1;max-width:360px;width:100%;margin-inline:auto;color:var(--gold);}
.feature__art svg{width:100%;height:100%;overflow:visible;}
.feature__copy h2{margin-bottom:14px;}
.feature__copy p{color:var(--ink-2);font-size:16px;margin:0 0 16px;line-height:1.65;}
.feature__copy p b{color:var(--ink);font-weight:600;}
.feature__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.feature__chips span{
  font-family:var(--serif);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:999px;padding:6px 13px;
}

/* =====================================================================
   RECEIPT — a memory fact with provenance
   ===================================================================== */
.receipt{
  border:1px solid var(--gold-line);border-radius:var(--r);background:linear-gradient(180deg,var(--surface),var(--bg-alt));
  padding:24px 26px;max-width:380px;box-shadow:var(--shadow-2);position:relative;
}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-linear-gradient(90deg,var(--gold-line) 0 8px,transparent 8px 14px);opacity:.6;}
.receipt .fact{font-size:16px;color:var(--ink);font-weight:600;margin-bottom:18px;line-height:1.4;}
.receipt .fact .q{color:var(--gold);}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0;}
.receipt dt{font-family:var(--serif);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);}
.receipt dd{margin:0;font-size:13px;color:var(--ink-2);font-family:var(--mono,"Hanken Grotesk");}
.receipt dd .ok{color:var(--current);}

/* =====================================================================
   SAFETY — guard cards
   ===================================================================== */
.guards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:820px){.guards{grid-template-columns:1fr;}}
.guard{border:1px solid var(--border);border-radius:var(--r);padding:26px 24px;background:var(--surface);}
.guard .gn{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.guard .gsig{width:38px;height:38px;color:var(--current);flex:0 0 auto;}
.guard h3{font-size:17px;}
.guard p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.55;}

/* =====================================================================
   BOUNDARIES — the product
   ===================================================================== */
.bounds{display:flex;flex-direction:column;gap:12px;margin-top:8px;}
.bound{
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,40px);align-items:center;
  border:1px solid var(--border);border-radius:var(--r);padding:20px clamp(20px,3vw,34px);background:var(--surface);transition:.22s;
}
.bound:hover{border-color:var(--gold-line);}
.bound__a{text-align:right;font-weight:700;font-size:clamp(15px,1.7vw,18px);color:var(--ink);}
.bound__b{font-weight:600;font-size:clamp(14px,1.6vw,17px);color:var(--ink-2);}
.bound__div{
  width:38px;height:38px;border-radius:50%;border:1px dashed var(--gold-line);display:grid;place-items:center;
  font-family:var(--serif);font-size:15px;color:var(--gold);flex:0 0 auto;
}
.bound__a small,.bound__b small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3);font-family:var(--sans);letter-spacing:0;margin-top:3px;}
@media(max-width:680px){
  .bound{grid-template-columns:1fr;text-align:center;gap:10px;}
  .bound__a{text-align:center;}
  .bound__div{margin:0 auto;transform:rotate(90deg);}
}
.closing-line{
  margin-top:40px;font-family:var(--serif);font-size:clamp(18px,2.4vw,26px);line-height:1.4;
  color:var(--ink);text-align:center;max-width:30ch;margin-inline:auto;text-wrap:balance;
}
.closing-line em{font-style:italic;color:var(--gold);}