/* Copied verbatim from about-standalone.html (.org through .org-card-here,
   plus the .card-head/.card-glyph/.tag/.stack-2/.h3/.mono-note/.body-text
   rules the cards' own markup depends on, plus the org-* rules inside the
   900px media query). Custom properties this block needs are declared on
   .org itself, with the exact values from that file's own :root -- nothing
   renamed, nothing rewritten. */
.org{display:flex;flex-direction:column;align-items:center;width:var(--w-full);
  --color-ink:#131f33;
  --color-ink-2:#465369;
  --color-ink-3:#59657c;
  --color-paper:#ffffff;
  --color-accent:#d93d27;
  --color-accent-2:#b32f1c;
  --color-accent-wash:#fbeeeb;
  --color-line:#dbe0ea;
  --color-line-2:#c1c9d6;
  --color-dark:#101d35;
  --color-on-dark:#ffffff;
  --font-sans:"IBM Plex Sans","Noto Sans JP","Helvetica Neue",sans-serif;
  --font-jp:"Noto Sans JP","IBM Plex Sans",sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;
  --fw-semi:600;
  --fw-bold:700;
  --fs-h2:34px;
  --fs-h3:19px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12px;
  --fs-glyph:26px;
  --lh-tight:1.06;
  --lh-head:1.22;
  --lh-body:1.6;
  --ls-eyebrow:0.14em;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --gap-card:24px;
  --w-full:100%;
  --w-measure:620px;
  --h-glyph:56px;
  --bw-1:1px;
  --radius:2px;
}
.org-parent{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-7);background:var(--color-dark);border:var(--bw-1) solid var(--color-dark);text-align:center;}
.org-parent-jp{font-family:var(--font-jp);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--color-paper);line-height:var(--lh-tight);}
.org-parent-rom{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-on-dark);}
.org-parent-note{max-width:420px;font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--color-on-dark);}
.org-stem{width:var(--bw-1);height:var(--sp-6);background:var(--color-line-2);}
.org-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card);width:var(--w-full);}
.org-branch{position:relative;display:flex;padding-top:var(--sp-6);}
.org-branch::before{content:"";position:absolute;top:0;left:calc(var(--gap-card) * -0.5);right:calc(var(--gap-card) * -0.5);height:var(--bw-1);background:var(--color-line-2);}
.org-branch:first-child::before{left:50%;}
.org-branch:last-child::before{right:50%;}
.org-branch::after{content:"";position:absolute;top:0;left:50%;width:var(--bw-1);height:var(--sp-6);margin-left:calc(var(--bw-1) * -0.5);background:var(--color-line-2);}
.org-card{display:flex;flex-direction:column;gap:var(--sp-4);width:var(--w-full);padding:var(--sp-6);background:var(--color-paper);border:var(--bw-1) solid var(--color-line);}
.org-card-here{border-color:var(--color-accent);box-shadow:inset var(--sp-1) 0 0 var(--color-accent);}

/* supporting classes used inside .org-card's own markup, same file */
.card-head{display:flex;align-items:center;gap:var(--sp-4);}
.card-glyph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--h-glyph);
  height:var(--h-glyph);
  flex:none;
  font-family:var(--font-jp);
  font-size:var(--fs-glyph);
  font-weight:var(--fw-bold);
  color:var(--color-paper);
  background:var(--color-ink);
}
.card-glyph-accent{background:var(--color-accent);}
.tag{
  display:flex;
  align-items:center;
  align-self:flex-start;
  padding:var(--sp-1) var(--sp-3);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--color-accent-2);
  background:var(--color-accent-wash);
  border-radius:var(--radius);
}
.stack-2{display:flex;flex-direction:column;gap:var(--sp-2);}
.h3{
  font-family:var(--font-sans);
  font-size:var(--fs-h3);
  font-weight:var(--fw-semi);
  line-height:var(--lh-head);
  color:var(--color-ink);
  margin:0;
}
.mono-note{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--color-ink-3);
}
.body-text{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-ink-2);
  max-width:var(--w-measure);
  margin:0;
  text-wrap:pretty;
}

@media (max-width:900px){
  .org-branches{grid-template-columns:minmax(0,1fr);}
  .org-branch{padding-left:var(--sp-7);padding-top:var(--sp-5);}
  .org-branch::before{top:50%;left:0;right:auto;width:var(--sp-7);height:var(--bw-1);}
  .org-branch:first-child::before{left:0;}
  .org-branch:last-child::before{right:auto;}
  .org-branch::after{top:0;bottom:0;left:0;height:auto;margin-left:0;}
  .org-branch:last-child::after{bottom:50%;}
}