@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Office:ital,wght@0,300..800;1,300..800&display=swap');

/* ============================================================
   The Coordination Commons — a DRep reference space
   One stylesheet. No build step. No dependencies.
   ============================================================ */

:root{
  --paper:      #FAF7F1;
  --surface:    #F3EEE4;
  --surface-2:  #EBE4D6;
  --ink:        #191713;
  --ink-soft:   #3D382F;
  --muted:      #6E6658;
  --faint:      #948B7B;
  --rule:       #DCD3C2;
  --rule-soft:  #E8E1D3;
  --accent:     #8C3A1E;
  --accent-bg:  #F6E9E1;
  /* The seam gets the only other hue in the system. It appears
     nowhere else, so that crossing the joint is legible as colour. */
  --seam:       #2F5D62;
  --seam-bg:    #E3EDEC;

  --measure: 36rem;
  --rail: 15rem;
  --gap: 3.25rem;

  --font: 'Ysabeau Office', 'Ysabeau', 'Segoe UI', 'Helvetica Neue', -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141310; --surface:#1D1B16; --surface-2:#262319;
    --ink:#EDE7DA; --ink-soft:#D6CEBE; --muted:#9E9584; --faint:#7A7263;
    --rule:#302C24; --rule-soft:#262218;
    --accent:#E08B62; --accent-bg:#2A1E17;
    --seam:#84B7B4; --seam-bg:#16221F;
  }
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5rem; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.68;
  font-weight:400;
  font-variant-numeric:oldstyle-num;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout shells ---------- */

.shell{ max-width:76rem; margin:0 auto; padding:0 1.5rem; }
.narrow{ max-width:var(--measure); margin-inline:auto; }

/* ---------- masthead ---------- */

.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.2) blur(6px);
}
.masthead .shell{
  display:flex; align-items:baseline; gap:1.5rem;
  padding-block:.85rem; flex-wrap:wrap;
}
.wordmark{
  font-weight:700; letter-spacing:-.015em; font-size:1.02rem;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.wordmark span{ color:var(--faint); font-weight:400; }
.masthead nav{ margin-left:auto; display:flex; gap:1.15rem; flex-wrap:wrap; }
.masthead nav a{
  font-size:.9rem; color:var(--muted); text-decoration:none;
  letter-spacing:.005em; border-bottom:1px solid transparent; padding-bottom:1px;
}
.masthead nav a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.masthead nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--rule); }
.masthead nav a.is-seam:hover{ color:var(--seam); border-bottom-color:var(--seam); }

/* ---------- typography ---------- */

h1,h2,h3,h4{ line-height:1.18; letter-spacing:-.016em; font-weight:650; color:var(--ink); }
h1{ font-size:clamp(2rem,1.4rem + 2.4vw,3.05rem); margin:0 0 .5rem; font-weight:700; }
h2{ font-size:1.5rem; margin:3.1rem 0 .85rem; }
h3{ font-size:1.155rem; margin:2.1rem 0 .55rem; font-weight:650; }
h4{ font-size:1.02rem; margin:1.6rem 0 .4rem; color:var(--ink-soft); font-weight:650; }

p{ margin:0 0 1.15rem; }
a{ color:var(--accent); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
a:hover{ border-bottom-color:var(--accent); }

strong{ font-weight:650; }
em{ font-style:italic; }

hr{ border:0; border-top:1px solid var(--rule); margin:2.75rem 0; }

blockquote{
  margin:1.6rem 0; padding:.15rem 0 .15rem 1.35rem;
  border-left:2px solid var(--rule);
  color:var(--ink-soft); font-style:italic;
}
blockquote p:last-child{ margin-bottom:0; }

ul,ol{ margin:0 0 1.15rem; padding-left:1.35rem; }
li{ margin-bottom:.42rem; }
li::marker{ color:var(--faint); }

code{
  font-family:var(--mono); font-size:.855em;
  background:var(--surface); padding:.1em .34em; border-radius:3px;
  border:1px solid var(--rule-soft); word-break:break-word;
}
pre{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:6px; padding:1rem 1.1rem; overflow-x:auto;
  font-size:.86rem; line-height:1.55; margin:1.5rem 0;
}
pre code{ background:none; border:0; padding:0; font-size:inherit; }

table{
  width:100%; border-collapse:collapse; margin:1.6rem 0;
  font-size:.94rem; display:block; overflow-x:auto;
}
th,td{ text-align:left; padding:.55rem .8rem; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
th{ font-weight:650; color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; border-bottom-color:var(--rule); }

img{ max-width:100%; height:auto; }

/* ---------- eyebrow / breadcrumb ---------- */

.eyebrow{
  font-size:.735rem; text-transform:uppercase; letter-spacing:.15em;
  font-weight:650; color:var(--faint); margin:0 0 .9rem;
}
.eyebrow a{ color:var(--muted); border:0; }
.eyebrow a:hover{ color:var(--accent); }
.eyebrow .sep{ opacity:.5; margin:0 .45em; }

/* ---------- page head ---------- */

.page-head{ padding:3.5rem 0 0; }
.standfirst{
  font-size:1.19rem; line-height:1.5; color:var(--ink-soft);
  font-weight:350; margin:0 0 1.5rem; max-width:44rem;
}
.metastrip{
  display:flex; flex-wrap:wrap; gap:.45rem .5rem;
  margin:0 0 2rem; padding:0; list-style:none;
}
.metastrip li{
  margin:0; font-size:.74rem; letter-spacing:.055em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--rule-soft);
  padding:.24rem .6rem; border-radius:2rem;
}
.metastrip li b{ color:var(--faint); font-weight:600; }

/* ---------- doc grid: rail + column ---------- */

.doc{ display:grid; gap:var(--gap); grid-template-columns:1fr; padding-bottom:5rem; }
@media (min-width:64rem){
  .doc{ grid-template-columns:var(--rail) minmax(0,var(--measure)) 1fr; }
  .doc > .rail{ grid-column:1; }
  .doc > .body{ grid-column:2; }
  .page-head .headwrap{ max-width:56rem; }
}

.rail{ font-size:.86rem; }
@media (min-width:64rem){
  .rail{ position:sticky; top:5rem; align-self:start; max-height:calc(100vh - 7rem); overflow-y:auto; padding-bottom:2rem; }
}
.rail h2{ font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:0 0 .7rem; font-weight:650; }
.rail nav ol{ list-style:none; margin:0 0 2rem; padding:0; border-left:1px solid var(--rule); }
.rail nav li{ margin:0; }
.rail nav a{
  display:block; padding:.25rem 0 .25rem .85rem; margin-left:-1px;
  border:0; border-left:1px solid transparent;
  color:var(--muted); line-height:1.35; font-size:.855rem;
}
.rail nav a:hover{ color:var(--accent); border-left-color:var(--accent); }
.rail nav a.active{ color:var(--ink); border-left-color:var(--accent); font-weight:600; }
.rail nav li.lvl3 a{ padding-left:1.6rem; font-size:.8rem; }

/* ---------- headings anchors ---------- */

.body h2, .body h3{ position:relative; scroll-margin-top:5.5rem; }
.anchor{
  border:0; color:var(--faint); opacity:0; text-decoration:none;
  font-weight:400; margin-left:.4em; font-size:.72em;
  transition:opacity .12s;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus{ opacity:1; }
.anchor:hover{ color:var(--accent); }

/* ---------- panels ---------- */

.panel{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:7px; padding:1.15rem 1.3rem; margin:2.25rem 0;
  font-size:.93rem; line-height:1.6;
}
.panel > :last-child{ margin-bottom:0; }
.panel h3{ margin:0 0 .6rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); font-weight:650; }

/* the seam marker — the single load-bearing joint, made visible */
.seam-note{
  border:1px solid color-mix(in srgb, var(--seam) 38%, transparent);
  border-left:3px solid var(--seam);
  background:var(--seam-bg); border-radius:0 7px 7px 0;
  padding:1.05rem 1.3rem; margin:2.5rem 0; font-size:.93rem; line-height:1.6;
}
.seam-note > :last-child{ margin-bottom:0; }
.seam-note h3{
  margin:0 0 .45rem; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.14em; color:var(--seam); font-weight:700;
}
.seam-note a{ color:var(--seam); border-bottom-color:color-mix(in srgb, var(--seam) 40%, transparent); }

/* lineage / typed edges */
.lineage{ list-style:none; margin:0; padding:0; }
.lineage li{
  margin:0 0 .5rem; padding-left:0;
  display:grid; grid-template-columns:9.5rem 1fr; gap:.6rem;
}
@media (max-width:34rem){ .lineage li{ grid-template-columns:1fr; gap:.1rem; } }
.lineage .rel{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.09em;
  font-weight:650; color:var(--faint); padding-top:.22rem;
  font-family:var(--mono);
}

/* cite block */
.cite{ margin:3rem 0 0; }
.cite .perma{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:.78rem; color:var(--muted);
  word-break:break-all;
}
.copy{
  font:inherit; font-family:var(--font); font-size:.78rem; font-weight:600;
  background:var(--paper); color:var(--muted);
  border:1px solid var(--rule); border-radius:4px;
  padding:.24rem .6rem; cursor:pointer; white-space:nowrap;
}
.copy:hover{ color:var(--accent); border-color:var(--accent); }
.copy[data-done]{ color:var(--seam); border-color:var(--seam); }

/* ---------- funnel cards ---------- */

.cards{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin:2.5rem 0; }
@media (min-width:48rem){ .cards.two{ grid-template-columns:1fr 1fr; } }
.card{
  background:var(--paper); padding:1.5rem 1.6rem; display:block;
  border:0; color:inherit; text-decoration:none;
}
.card:hover{ background:var(--surface); border:0; }
.card .kicker{ font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; color:var(--faint); font-weight:650; display:block; margin-bottom:.45rem; }
.card h3{ margin:0 0 .4rem; font-size:1.16rem; color:var(--accent); letter-spacing:-.012em; }
.card:hover h3{ text-decoration:underline; text-underline-offset:3px; }
.card p{ margin:0; font-size:.93rem; color:var(--ink-soft); line-height:1.55; }
.card .tail{ display:block; margin-top:.6rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); }
.card.is-seam h3{ color:var(--seam); }

/* the five doors on the entry page */
.doors{ display:grid; gap:1.15rem; margin:2.75rem 0 1rem; }
@media (min-width:52rem){ .doors{ grid-template-columns:repeat(2,1fr); } }
.door{
  border:1px solid var(--rule); border-radius:8px; padding:1.4rem 1.55rem;
  background:var(--paper); text-decoration:none; color:inherit; display:block;
  transition:border-color .14s, transform .14s;
}
.door:hover{ border-color:var(--accent); transform:translateY(-1px); }
.door .num{ font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.1em; }
.door h3{ margin:.35rem 0 .4rem; font-size:1.24rem; color:var(--ink); }
.door:hover h3{ color:var(--accent); }
.door p{ margin:0; font-size:.94rem; color:var(--muted); line-height:1.55; }
.door .enters{ display:block; margin-top:.75rem; font-size:.78rem; color:var(--faint); font-style:italic; }
.door.is-seam{ border-color:color-mix(in srgb,var(--seam) 45%,transparent); background:var(--seam-bg); }
.door.is-seam:hover{ border-color:var(--seam); }
.door.is-seam:hover h3{ color:var(--seam); }
.door.is-seam .num{ color:var(--seam); }
@media (min-width:52rem){ .door.wide{ grid-column:1 / -1; } }

/* ---------- index list (map page) ---------- */

.index-group{ margin:0 0 3rem; }
.index-group > h2{ margin-top:0; padding-bottom:.5rem; border-bottom:1px solid var(--rule); }
.index-list{ list-style:none; margin:0; padding:0; }
.index-list li{ margin:0; border-bottom:1px solid var(--rule-soft); }
.index-list a{ display:block; padding:.7rem 0; border:0; }
.index-list a:hover{ background:var(--surface); }
.index-list .t{ color:var(--accent); font-weight:600; }
.index-list .d{ display:block; color:var(--muted); font-size:.88rem; line-height:1.45; margin-top:.1rem; }
.index-list .k{ float:right; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-family:var(--mono); padding-top:.25rem; }

/* ---------- rationale ledger ---------- */

.ledger{ border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin:2.5rem 0; }
.ledger-row{
  display:block; padding:1.25rem 1.4rem; border:0; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--rule);
}
.ledger-row:last-child{ border-bottom:0; }
.ledger-row:hover{ background:var(--surface); }
.verdict{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; padding:.18rem .55rem; border-radius:3px;
  border:1px solid currentColor; margin-right:.7rem; vertical-align:.09em;
}
.v-yes{ color:#2F6B3C; } .v-no{ color:#93331E; } .v-abstain{ color:var(--muted); }
@media (prefers-color-scheme: dark){ .v-yes{ color:#7FBF8C; } .v-no{ color:#E28A6E; } }
.ledger-row h3{ display:inline; font-size:1.1rem; color:var(--accent); }
.ledger-row:hover h3{ text-decoration:underline; text-underline-offset:3px; }
.ledger-row .gaid{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--faint); margin-top:.5rem; word-break:break-all; }
.ledger-row .when{ display:block; font-size:.83rem; color:var(--muted); margin-top:.35rem; }

/* ---------- prev / next ---------- */

.updown{
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  border-radius:8px; overflow:hidden; margin:3.5rem 0 0;
}
@media (min-width:44rem){ .updown.pair{ grid-template-columns:1fr 1fr; } }
.updown a{ background:var(--paper); padding:1rem 1.2rem; border:0; text-decoration:none; color:inherit; }
.updown a:hover{ background:var(--surface); }
.updown .lbl{ display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.13em; color:var(--faint); font-weight:650; margin-bottom:.25rem; }
.updown .ttl{ color:var(--accent); font-weight:600; font-size:.98rem; }
.updown a.next{ text-align:right; }

/* ---------- entry page hero ---------- */

.hero{ padding:4.5rem 0 1rem; }
.hero h1{ font-size:clamp(2.3rem,1.4rem + 3.4vw,3.9rem); letter-spacing:-.026em; line-height:1.06; margin-bottom:1.1rem; }
.hero .lede{ font-size:1.28rem; line-height:1.48; font-weight:350; color:var(--ink-soft); max-width:38rem; }
.hero .sig{ margin-top:1.6rem; font-size:.92rem; color:var(--muted); }
.hero .sig code{ font-size:.8rem; }

.claim{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:2.1rem 0; margin:3rem 0;
}
.claim p{ font-size:1.3rem; line-height:1.42; font-weight:500; letter-spacing:-.012em; max-width:40rem; margin:0; }
.claim .attrib{ font-size:.84rem; color:var(--faint); margin-top:.9rem; font-weight:400; letter-spacing:0; }

/* convergence diagram */
.converge{ margin:2.5rem 0 3rem; }
.converge svg{ width:100%; height:auto; display:block; }
.converge .cx-line{ stroke:var(--rule); stroke-width:1; fill:none; }
.converge .cx-line.to-seam{ stroke:color-mix(in srgb,var(--seam) 55%,transparent); }
.converge .cx-label{ fill:var(--muted); font-family:var(--font); font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.converge .cx-seam{ fill:var(--seam); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:.05em; }
.converge .cx-node{ fill:var(--paper); stroke:var(--rule); }
.converge .cx-dot{ fill:var(--seam); }
.converge a text{ cursor:pointer; }
.converge a:hover .cx-label{ fill:var(--accent); }

/* ---------- footer ---------- */

.site-foot{
  border-top:1px solid var(--rule); margin-top:4rem; padding:2.5rem 0 4rem;
  font-size:.88rem; color:var(--muted);
}
.site-foot .cols{ display:grid; gap:2rem; }
@media (min-width:48rem){ .site-foot .cols{ grid-template-columns:2fr 1fr 1fr; } }
.site-foot h4{ font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--faint); margin:0 0 .6rem; font-weight:650; }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:.32rem; }
.site-foot a{ color:var(--muted); border-bottom-color:transparent; }
.site-foot a:hover{ color:var(--accent); }
.site-foot .fine{ margin-top:2.25rem; padding-top:1.25rem; border-top:1px solid var(--rule-soft); font-size:.8rem; color:var(--faint); max-width:44rem; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:.5rem; background:var(--paper); padding:.5rem .8rem; border:1px solid var(--accent); border-radius:4px; z-index:99; }

@media print{
  .masthead,.rail,.updown,.site-foot,.copy{ display:none; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .doc{ display:block; }
  a{ color:#000; border:0; }
}