/* =====================================================================
   TEN OF CLUBS STUDIO — LEGAL DESIGN SYSTEM  ·  v2
   legal.css — shared foundation for every Legal Center document.

   Layers:
     01 tokens        02 base & a11y     03 topbar
     04 shell layout  05 doc header     06 prose
     07 components    08 hub            09 footer
     10 responsive    11 print
   ===================================================================== */

/* ------------------------------------------------ 01 · TOKENS ------ */
:root{
  /* surfaces — ivory "paper" for long reading */
  --paper:      #f7f3ea;
  --paper-hi:   #fffdf8;   /* raised: cards, callouts        */
  --paper-lo:   #eee8d9;   /* recessed: zebra rows, hovers   */

  /* ink */
  --ink:        #1c1c1a;
  --ink-2:      #55524a;   /* secondary                      */
  --ink-3:      #8b8779;   /* meta, captions                 */

  /* brand — the felt table from the landing page */
  --felt:       #103a2d;
  --felt-hi:    #185342;
  --felt-lo:    #0a2820;
  --on-felt:    #efe9da;
  --on-felt-2:  #9bb1a5;
  --felt-line:  rgba(239,233,218,.16);

  /* accent */
  --gold:       #c9a24b;
  --gold-ink:   #a07f33;   /* gold dark enough for text on paper */

  /* functional */
  --line:       rgba(28,28,26,.13);
  --line-2:     rgba(28,28,26,.24);
  --link:       #14624a;
  --warn:       #a35b22;
  --danger:     #963c3c;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* scale */
  --fs-0:  .72rem;                              /* mono micro     */
  --fs-1:  .82rem;                              /* mono meta      */
  --fs-2:  .95rem;                              /* small body     */
  --fs-3:  1.0625rem;                           /* body (17px)    */
  --fs-4:  1.2rem;                              /* h3             */
  --fs-5:  clamp(1.45rem, 2.6vw, 1.8rem);       /* h2             */
  --fs-6:  clamp(2.1rem, 4.6vw, 3rem);          /* doc title      */

  /* rhythm & shape */
  --shell:    1280px;
  --measure:  72ch;
  --rail-l:   232px;   /* documents rail   */
  --rail-r:   208px;   /* on-this-page rail */
  --r:        12px;
  --r-sm:     7px;
  --topbar-h: 62px;
}

/* ------------------------------------------ 02 · BASE & A11Y ------ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--fs-3)/1.72 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }

::selection{ background:rgba(201,162,75,.35); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:99;
  background:var(--felt); color:var(--on-felt);
  font:500 var(--fs-1) var(--mono);
  padding:.7rem 1.1rem; text-decoration:none;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
}

/* ---------------------------------------------- 03 · TOPBAR ------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--felt);
  border-bottom:1px solid var(--felt-line);
}
.topbar__in{
  max-width:var(--shell); margin:0 auto;
  min-height:var(--topbar-h);
  padding:.6rem clamp(1rem,4vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{
  display:flex; align-items:center; gap:.7rem;
  color:var(--on-felt); text-decoration:none;
}
.brand__card{ width:30px; height:auto; flex:0 0 auto; transform:rotate(-3deg); filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.brand__name{
  font:600 1.04rem/1.05 var(--display); letter-spacing:-.01em;
  display:block;
}
.brand__dept{
  font:400 var(--fs-0)/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-felt-2); display:block; margin-top:.28em;
}

.topbar__nav{ display:flex; align-items:center; gap:.5rem; }
.topbar__link{
  color:var(--on-felt); text-decoration:none;
  font:400 var(--fs-1) var(--mono);
  padding:.5rem .85rem; border:1px solid var(--felt-line); border-radius:var(--r-sm);
  transition:border-color .18s ease, background .18s ease;
}
.topbar__link:hover{ border-color:var(--gold); background:rgba(239,233,218,.07); }

.nav-toggle{
  display:none;
  font:500 var(--fs-1) var(--mono);
  color:var(--on-felt); background:none; cursor:pointer;
  padding:.5rem .85rem; border:1px solid var(--felt-line); border-radius:var(--r-sm);
}
.nav-toggle[aria-expanded="true"]{ border-color:var(--gold); color:var(--gold); }

/* ---------------------------------------- 04 · SHELL LAYOUT ------- */
.shell{
  max-width:var(--shell); margin:0 auto;
  padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,2rem) 4.5rem;
  display:grid;
  grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
  gap:clamp(1.5rem,3.5vw,3rem);
  align-items:start;
}
.shell--hub{ grid-template-columns:minmax(0,1fr); }

.article{ min-width:0; max-width:var(--measure); }

/* left rail — documents */
.rail{ position:sticky; top:calc(var(--topbar-h) + 20px); max-height:calc(100vh - var(--topbar-h) - 40px); overflow-y:auto; }
.pagenav{ position:sticky; top:calc(var(--topbar-h) + 20px); max-height:calc(100vh - var(--topbar-h) - 40px); overflow-y:auto; }
.rail__label{
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 .7rem; padding-left:.15rem;
}
.docs-nav{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.docs-nav a{
  display:block; padding:.48rem .9rem; margin-left:-1px;
  border-left:2px solid transparent;
  color:var(--ink-2); text-decoration:none;
  font-size:var(--fs-2); line-height:1.35;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.docs-nav a:hover{ color:var(--ink); background:var(--paper-lo); }
.docs-nav a[aria-current="page"]{
  color:var(--felt); font-weight:600; border-left-color:var(--gold);
}

/* right rail — on this page (scrollspy) */
.pagenav__label{
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 .7rem;
}
.pagenav ol{ list-style:none; margin:0; padding:0; }
.pagenav a{
  display:block; padding:.34rem 0;
  color:var(--ink-3); text-decoration:none;
  font-size:.88rem; line-height:1.35;
  transition:color .15s ease;
}
.pagenav a:hover{ color:var(--ink); }
.pagenav a.is-active{ color:var(--gold-ink); font-weight:600; }

/* ------------------------------------------ 05 · DOC HEADER ------- */
.eyebrow{
  display:flex; align-items:center; gap:.55rem;
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--felt);
  margin:0 0 1rem;
}
.eyebrow .pip{ color:var(--gold); font-size:1.05em; }

.doc-title{
  font:600 var(--fs-6)/1.05 var(--display);
  letter-spacing:-.016em; color:var(--ink);
  margin:0 0 1.1rem;
}

.doc-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  font:400 var(--fs-1) var(--mono); color:var(--ink-2);
  padding-bottom:1.5rem; margin-bottom:1.9rem;
  border-bottom:1px solid var(--line);
}
.doc-meta b{ font-weight:400; color:var(--ink-3); }

.doc-summary{
  background:var(--paper-hi);
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--r-sm);
  padding:1.1rem 1.35rem; margin:0 0 2.2rem;
  font-size:var(--fs-2); color:var(--ink-2);
}
.doc-summary strong{ color:var(--ink); }

/* inline TOC — shown when the right rail is hidden */
.toc{
  background:var(--paper-hi); border:1px solid var(--line);
  border-radius:var(--r); padding:1.15rem 1.35rem; margin:0 0 2.4rem;
  display:none;
}
.toc__label{
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  margin:0 0 .65rem;
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc li{ counter-increment:toc; margin:.32rem 0; }
.toc a{
  display:flex; gap:.7rem; align-items:baseline;
  color:var(--ink-2); text-decoration:none; font-size:var(--fs-2);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font:500 var(--fs-1) var(--mono); color:var(--gold-ink);
}
.toc a:hover{ color:var(--ink); }

/* ----------------------------------------------- 06 · PROSE ------- */
.prose{ counter-reset:sec; }

.prose h2{
  font:600 var(--fs-5)/1.18 var(--display);
  letter-spacing:-.012em; color:var(--ink);
  margin:2.9rem 0 .95rem;
  scroll-margin-top:calc(var(--topbar-h) + 24px);
}
.prose h3{
  font:600 var(--fs-4)/1.3 var(--display);
  color:var(--ink); margin:2rem 0 .6rem;
  scroll-margin-top:calc(var(--topbar-h) + 24px);
}
.prose h4{
  font:700 var(--fs-1)/1.3 var(--body);
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
  margin:1.5rem 0 .5rem;
}

/* auto section numbering — add .numbered to .prose */
.prose.numbered h2{ counter-increment:sec; counter-reset:sub; }
.prose.numbered h2::before{
  content:counter(sec) ".\2002";
  color:var(--gold-ink); font-variant-numeric:tabular-nums;
}
.prose.numbered h3{ counter-increment:sub; }
.prose.numbered h3::before{
  content:counter(sec) "." counter(sub) "\2002";
  font:500 .85em var(--mono); color:var(--gold-ink);
}

.prose p{ margin:0 0 1.15rem; }
.prose strong{ font-weight:600; color:var(--ink); }

.prose a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .15s ease;
}
.prose a:hover{ color:var(--link); }

.prose ul,.prose ol{ margin:0 0 1.2rem; padding-left:1.45rem; }
.prose li{ margin:.35rem 0; padding-left:.2rem; }
.prose ul li::marker{ color:var(--gold-ink); }
.prose ol li::marker{ color:var(--gold-ink); font:500 .92em var(--mono); }

.prose blockquote{
  margin:1.5rem 0; padding:.35rem 0 .35rem 1.2rem;
  border-left:3px solid var(--line-2);
  color:var(--ink-2); font-style:italic;
}

.prose code{
  font:400 .88em var(--mono);
  background:var(--paper-lo); border:1px solid var(--line);
  border-radius:4px; padding:.1em .38em;
}

/* club divider — the quiet signature between major parts */
.divider{
  border:0; margin:3rem 0; text-align:center;
  position:relative; height:1px; background:var(--line);
  overflow:visible;
}
.divider::after{
  content:"♣";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--paper); padding:0 .8rem;
  color:var(--gold); font-size:.95rem; line-height:1;
}

/* ------------------------------------------ 07 · COMPONENTS ------- */

/* callouts */
.callout{
  --c:var(--felt);
  background:var(--paper-hi);
  border:1px solid var(--line); border-left:3px solid var(--c);
  border-radius:var(--r-sm);
  padding:1rem 1.25rem; margin:1.7rem 0;
  font-size:var(--fs-2);
}
.callout__label{
  display:block;
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--c);
  margin-bottom:.4rem;
}
.callout p:last-child{ margin-bottom:0; }
.callout--warn{ --c:var(--warn); }
.callout--danger{ --c:var(--danger); }
.callout--gold{ --c:var(--gold-ink); }

/* tables */
.table-wrap{
  overflow-x:auto; margin:1.7rem 0;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--paper-hi);
}
.table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-2); min-width:min(100%,540px);
}
.table caption{
  text-align:left; padding:.85rem 1rem .2rem;
  font:500 var(--fs-0)/1.3 var(--mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.table th,.table td{
  text-align:left; vertical-align:top;
  padding:.68rem .95rem;
  border-bottom:1px solid var(--line);
}
.table thead th{
  background:var(--felt); color:var(--on-felt);
  font:500 var(--fs-0)/1.35 var(--mono);
  letter-spacing:.07em; text-transform:uppercase;
}
.table tbody tr:nth-child(even){ background:var(--paper-lo); }
.table tbody tr:last-child td{ border-bottom:0; }

/* definitions */
.defs{ margin:1.7rem 0; }
.defs dt{
  font:600 1.03rem var(--display); color:var(--ink);
  margin-top:1.15rem;
}
.defs dd{ margin:.22rem 0 0; color:var(--ink-2); }

/* badges */
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.07em; text-transform:uppercase;
  padding:.32rem .62rem; border-radius:999px;
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--paper-hi);
}
.badge--live{ color:#2c7a52; border-color:#93c5a8; background:#edf6f0; }
.badge--soon{ color:var(--ink-3); border-style:dashed; }

/* contact card */
.contact-card{
  display:flex; gap:1.15rem; align-items:flex-start;
  background:var(--felt);
  background-image:radial-gradient(130% 160% at 8% 0%, var(--felt-hi) 0%, var(--felt) 55%);
  color:var(--on-felt);
  border-radius:var(--r);
  padding:1.5rem 1.6rem; margin:2.6rem 0 0;
}
.contact-card__card{ width:46px; flex:0 0 auto; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); transform:rotate(-3deg); }
.contact-card__title{ font:600 1.14rem var(--display); margin:0 0 .35rem; }
.contact-card p{ margin:.18rem 0; color:var(--on-felt-2); font-size:var(--fs-2); }
.contact-card a{
  color:var(--on-felt); text-decoration:underline;
  text-decoration-color:var(--gold); text-underline-offset:3px;
}
.contact-card a:hover{ color:var(--gold); }

.back-top{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:2.6rem;
  font:400 var(--fs-1) var(--mono);
  color:var(--ink-3); text-decoration:none;
}
.back-top:hover{ color:var(--felt); }

/* -------------------------------------------------- 08 · HUB ------ */
.hub-head{ max-width:var(--measure); margin-bottom:2.8rem; }
.hub-lede{ font-size:1.14rem; color:var(--ink-2); margin:.7rem 0 0; max-width:58ch; }

.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:1.15rem;
}
.doc-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper-hi);
  border:1px solid var(--line); border-radius:var(--r);
  padding:1.35rem 1.45rem 1.25rem;
  text-decoration:none; color:inherit;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.doc-card:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 14px 28px rgba(16,58,45,.12);
}
.doc-card__row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.95rem;
}
.doc-card__no{
  font:500 var(--fs-1) var(--mono);
  color:var(--gold-ink); letter-spacing:.05em;
}
.doc-card__title{
  font:600 1.24rem/1.22 var(--display);
  letter-spacing:-.008em; margin:0 0 .45rem;
}
.doc-card__desc{ font-size:var(--fs-2); color:var(--ink-2); margin:0; flex:1; }
.doc-card__go{
  margin-top:1.05rem;
  font:400 var(--fs-1) var(--mono); color:var(--felt);
  display:flex; align-items:center; gap:.45rem;
}
.doc-card__go i{ font-style:normal; transition:transform .16s ease; }
.doc-card:hover .doc-card__go i{ transform:translateX(4px); }

/* ------------------------------------------------ 09 · FOOTER ----- */
.footer{
  background:var(--felt);
  background-image:linear-gradient(180deg,var(--felt) 0%,var(--felt-lo) 100%);
  color:var(--on-felt-2);
  border-top:1px solid var(--felt-line);
}
.footer__in{
  max-width:var(--shell); margin:0 auto;
  padding:2.8rem clamp(1rem,4vw,2rem);
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem;
}
.f-brand{ display:flex; gap:.95rem; align-items:flex-start; }
.f-brand__card{ width:40px; flex:0 0 auto; transform:rotate(-3deg); filter:drop-shadow(0 5px 10px rgba(0,0,0,.35)); }
.f-brand__name{ font:600 1.06rem var(--display); color:var(--on-felt); }
.f-brand__legal{ font-size:var(--fs-1); line-height:1.55; margin:.45rem 0 0; }
.f-brand__legal a{ color:inherit; }

.f-col h4{
  font:500 var(--fs-0)/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-felt); margin:0 0 .85rem;
}
.f-col ul{ list-style:none; margin:0; padding:0; }
.f-col li{ margin:.42rem 0; }
.f-col a{
  color:var(--on-felt-2); text-decoration:none; font-size:.92rem;
  transition:color .15s ease;
}
.f-col a:hover{ color:var(--gold); }

.footer__base{
  max-width:var(--shell); margin:0 auto;
  padding:1.15rem clamp(1rem,4vw,2rem);
  border-top:1px solid var(--felt-line);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font:400 var(--fs-0)/1.4 var(--mono);
}

/* -------------------------------------------- 10 · RESPONSIVE ----- */
@media (max-width:1120px){
  .shell{ grid-template-columns:var(--rail-l) minmax(0,1fr); }
  .pagenav{ display:none; }
  .toc{ display:block; }
}
@media (max-width:840px){
  .shell{ grid-template-columns:1fr; gap:0; }
  .rail{ position:static; display:none; margin-bottom:2rem; }
  .rail.is-open{ display:block; }
  .nav-toggle{ display:inline-block; }
  .footer__in{ grid-template-columns:1fr; gap:1.7rem; }
}
@media (max-width:520px){
  body{ font-size:1rem; }
  .brand__dept{ display:none; }
  .topbar__link{ display:none; }
  .contact-card{ flex-direction:column; }
}

/* ------------------------------------------------- 11 · PRINT ----- */
@media print{
  .topbar,.rail,.pagenav,.nav-toggle,.back-top,.footer,.skip-link{ display:none!important; }
  body{ background:#fff; color:#000; font-size:11pt; line-height:1.55; }
  .shell{ display:block; max-width:none; padding:0; }
  .article{ max-width:none; }
  .toc{ display:block; }
  .doc-summary,.callout,.toc,.table-wrap,.contact-card{
    background:#fff!important; color:#000!important;
    border:1px solid #bbb!important; box-shadow:none!important;
  }
  .contact-card a,.prose a{ color:#000; }
  .prose h2,.prose h3{ page-break-after:avoid; }
  .table thead th{ background:#eee!important; color:#000!important; }
}