/* ═══════════════════════════════════════════════════════════════════
   LEGUM LEX — ADVOCATE PROFILE (the dossier)
   ───────────────────────────────────────────────────────────────────
   Production port of the Claude Design "Advocate profile" sheet:
   persistent identity plate left, scrolling dossier centre, section
   rail right — the RyanCV résumé structure translated into the
   Lexcore language. Shared primitives (bands, type, buttons, marquee)
   come from editorial.css as lxe-*; everything here is the advocate
   layer plus the design's graphic layer.

   Motion start states are gated on html.lxe-motion — the class
   editorial.js sets only once GSAP is confirmed present — so a blocked
   CDN costs the animation, never the content.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The dossier grid ───────────────────────────────────── */
.dossier{display:grid;grid-template-columns:300px minmax(0,1fr) 56px;
         column-gap:clamp(1.25rem,2.5vw,2.5rem);align-items:start;
         padding-inline:var(--lxe-gut);padding-block:clamp(2rem,4vw,3.5rem)}
.dossier>main{min-width:0}
@media(max-width:1020px){.dossier{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .plate-col{max-width:34rem}}
.dossier-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:13px var(--lxe-gut);border-bottom:1px solid var(--lxe-rule)}

/* ── Identity plate — sticky left ─────────────────────────
   Guarded by min-width, not cancelled by the max-width block above: that
   block already said position:static and lost, because this rule carries
   the same specificity and comes later in the file. Below 1020 the dossier
   is a single column, so a sticky plate pins a transparent 350×554 card
   over everything that scrolls beneath it — the chamber board included,
   which is why the figures were unreadable on a phone. */
@media(min-width:1021px){.plate-col{position:sticky;top:clamp(1rem,2vw,2rem)}}
.plate{border:1px solid var(--lxe-rule);background:var(--lxe-paper)}
.plate-seal{display:grid;place-items:center;padding:clamp(1.75rem,3vw,2.5rem) 1rem 1.25rem}
.seal{width:112px;height:112px;position:relative;display:grid;place-items:center;
      background:var(--lxe-paper)}
.seal b{font-family:var(--lxe-serif);font-weight:500;font-style:italic;font-size:2rem;
        letter-spacing:-.02em;color:var(--lxe-ink)}
.seal i{position:absolute;bottom:-4px;left:0;right:0;text-align:center;font-style:normal;
        font-family:var(--lxe-mono);font-size:7.5px;letter-spacing:.3em;color:var(--lxe-ink-3)}
/* the advocate's photograph — the staff profile image, clipped to the
   drawn ring; the serif monogram is the no-photo fallback */
.seal img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);
          border-radius:50%;object-fit:cover;display:block}
.plate-name{text-align:center;padding:0 1.25rem}
.plate-name h1{font-family:var(--lxe-serif);font-weight:500;font-size:1.75rem;
               letter-spacing:-.02em;line-height:1.1;margin:0}
.plate-name p{font-family:var(--lxe-mono);font-size:9.5px;letter-spacing:.18em;
              text-transform:uppercase;color:var(--lxe-ink-3);margin:.6rem 0 0}
.plate-status{display:flex;align-items:center;justify-content:center;gap:9px;
              font-family:var(--lxe-mono);font-size:9.5px;letter-spacing:.14em;
              text-transform:uppercase;color:var(--lxe-verdant);padding:1rem 0 1.25rem}
.plate dl{margin:0;border-top:1px solid var(--lxe-rule)}
.plate dl div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
              padding:.7rem 1.1rem;border-bottom:1px solid var(--lxe-rule-soft)}
.plate dt{font-family:var(--lxe-mono);font-size:9px;letter-spacing:.14em;
          text-transform:uppercase;color:var(--lxe-ink-3);margin:0;white-space:nowrap}
.plate dd{margin:0;font-size:12.5px;font-weight:500;color:var(--lxe-ink);text-align:right}
.plate-cta{padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;align-items:stretch;
           border-top:1px solid var(--lxe-rule)}
.plate-cta .lxe-btn{justify-content:center}
.plate-links{display:flex;justify-content:center;gap:1.4rem;padding:0 1.1rem 1.2rem}
.plate-foot{border-top:1px solid var(--lxe-rule);padding:.7rem 1.1rem;text-align:center}

/* ── Section rail — sticky right, scroll-spied ──────────── */
.rail{position:sticky;top:clamp(1rem,2vw,2rem);display:flex;flex-direction:column;
      gap:.35rem;align-items:stretch}
.rail a{font-family:var(--lxe-mono);font-size:9px;font-weight:500;letter-spacing:.1em;
        color:var(--lxe-ink-3);text-decoration:none;border:1px solid transparent;
        padding:9px 0;text-align:center;transition:color .25s,border-color .25s;
        writing-mode:vertical-rl;min-height:86px;
        display:inline-flex;align-items:center;justify-content:center;gap:.6em}
.rail a .lxe-num{writing-mode:horizontal-tb;font-size:9px}
.rail a:hover{color:var(--lxe-ink)}
.rail a.is-live{color:var(--lxe-claret);border-color:var(--lxe-rule)}

/* ── Dossier sections ───────────────────────────────────── */
.dossier-sec{padding-block:clamp(2.25rem,4vw,3.5rem);border-bottom:1px solid var(--lxe-rule)}
.dossier-sec:last-child{border-bottom:0}
.dossier-sec:first-child{padding-top:0}
.prose{font-size:14.5px;line-height:1.75;color:var(--lxe-ink-2);max-width:62ch;
  text-align:justify;text-justify:inter-word;hyphens:auto}
.prose p{margin:0 0 1.15rem}
.prose p:last-child{margin-bottom:0}
.dossier .lxe-lede{text-align:justify;text-justify:inter-word;hyphens:auto}

/* ═════ THE TEXT SECTION — layout after the RyanCV "about" pattern ═════
   Three columns: the mono side-coding, the measured prose, and the
   instrument column — the lattice census and the forums orbit — filling
   the right-hand air with the register, drawn in primitives. */
.about{display:grid;
  grid-template-columns:clamp(6rem,11vw,10rem) minmax(0,1fr) clamp(200px,21vw,264px);
  column-gap:clamp(1.25rem,3vw,2.75rem)}
@media(max-width:1240px){.about{grid-template-columns:clamp(6rem,11vw,10rem) minmax(0,1fr)}
  .about-fig{display:none}}
@media(max-width:720px){.about{grid-template-columns:1fr;row-gap:1.25rem}}
.about-fig{display:flex;flex-direction:column;gap:1.25rem;
  border-left:1px solid var(--lxe-rule);padding-left:clamp(1rem,2vw,1.75rem)}
.about-fig .lattice{margin-top:0}
.about-fig .lattice-grid{grid-template-columns:repeat(10,1fr)}

/* the forums orbit — one node per forum on the register, in orbit
   around the seat. Same construction kit as the seal and the compass:
   hairline circles, one dashed claret ring slowly turning. */
.orbit{border:1px solid var(--lxe-rule);background:var(--lxe-paper-2);
  padding:clamp(1rem,2vw,1.4rem)}
.orbit-fig{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;
  margin-top:.9rem}
.orbit-fig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-fig circle{fill:none;stroke:var(--lxe-rule);stroke-width:1}
.orbit-fig .o-dash{stroke:var(--lxe-claret);stroke-opacity:.5;stroke-dasharray:2 7;
  transform-origin:50% 50%;animation:sealturn 60s linear infinite}
.orbit-fig .o-hair{stroke:var(--lxe-claret);stroke-opacity:.55}
.orbit-fig .node{fill:var(--lxe-claret);stroke:none}
html.lxe-motion .orbit-fig .node{opacity:0}
.orbit-core{position:relative;text-align:center}
.orbit-core b{display:block;font-family:var(--lxe-serif);font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1;
  color:var(--lxe-ink);font-variant-numeric:tabular-nums}
.orbit-core span{font-family:var(--lxe-mono);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lxe-ink-3);display:block;margin-top:.4rem}
.about-side{display:flex;flex-direction:column;gap:.55rem;border-top:1px solid var(--lxe-rule);
  padding-top:.7rem}
.about-side span{font-family:var(--lxe-mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lxe-ink-3)}
.about-side span b{display:block;font-weight:500;color:var(--lxe-ink);letter-spacing:.1em;
  font-size:10px;margin-top:.25rem}
.lead{font-family:var(--lxe-serif);font-weight:400;font-size:clamp(1.3rem,2.1vw,1.72rem);
  line-height:1.4;letter-spacing:-.015em;color:var(--lxe-ink);max-width:44ch;margin:1.6rem 0 0;
  text-align:justify;text-justify:inter-word;hyphens:auto}
.role{display:flex;align-items:center;gap:.7rem;margin:1.15rem 0 0;font-family:var(--lxe-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lxe-ink-3)}
.role .cyc{position:relative;display:inline-block;color:var(--lxe-claret);min-width:15ch}

/* word-by-word reveal — each word rides up out of its own clip */
.wmask{display:inline-block;overflow:hidden;vertical-align:bottom}
.wmask .w{display:inline-block}
html.lxe-motion .wmask .w{transform:translateY(105%)}

/* ═════ STAT BOARD — live from the matter register ═════ */
.board{border:1px solid var(--lxe-rule);margin-bottom:clamp(2rem,4vw,3rem)}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--lxe-rule);background:var(--lxe-paper-2)}
.board-top .lxe-fine{display:flex;align-items:center;gap:.6rem}
/* Five cells since jurisdictions joined the board, and five is odd: any even
   column count leaves the last row short. Only 5 / 2 / 1 are used, because
   those are the three widths where the border rules below stay exact — at
   3 columns the fifth cell shares a row with the fourth and :not(:last-child)
   would rule underneath a cell that is already on the bottom row. */
.board-grid{display:grid;grid-template-columns:repeat(5,1fr)}
@media(max-width:760px){.board-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.board-grid{grid-template-columns:1fr}}
.board-cell{padding:1.3rem clamp(1rem,2vw,1.5rem);border-right:1px solid var(--lxe-rule);
  position:relative;overflow:hidden}
.board-cell:last-child{border-right:0}
@media(max-width:760px){.board-cell:nth-child(2n){border-right:0}
  .board-cell:not(:last-child){border-bottom:1px solid var(--lxe-rule)}}
@media(max-width:420px){.board-cell{border-right:0}}
.board-cell b{display:block;font-family:var(--lxe-serif);font-weight:400;font-size:clamp(2rem,3.4vw,2.6rem);
  letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.board-cell span{font-family:var(--lxe-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lxe-ink-3);display:block;margin-top:.55rem}
.board-cell i.spark{position:absolute;left:0;bottom:0;height:2px;background:var(--lxe-claret);
  width:100%;transform:scaleX(0);transform-origin:left;display:block}

/* jurisdiction register — forums actually being attended */
.jur{border:1px solid var(--lxe-rule);border-bottom:0}
.jur-row{display:grid;grid-template-columns:2.5rem minmax(0,1fr) minmax(0,10rem) 4.5rem;
  align-items:baseline;gap:1rem;padding:.75rem 1.1rem;border-bottom:1px solid var(--lxe-rule-soft)}
.jur-row:last-child{border-bottom:1px solid var(--lxe-rule)}
.jur-row.is-head{background:var(--lxe-paper-2);border-bottom-color:var(--lxe-rule)}
.jur-row.is-head span{font-family:var(--lxe-mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lxe-ink-3)}
.jur-row .jf{font-size:13.5px;font-weight:500;color:var(--lxe-ink)}
.jur-row .js{font-family:var(--lxe-mono);font-size:10.5px;letter-spacing:.06em;color:var(--lxe-ink-3)}
.jur-row .jm{font-family:var(--lxe-mono);font-size:11px;color:var(--lxe-ink-2);text-align:right;
  font-variant-numeric:tabular-nums}
.jur-row:hover{background:var(--lxe-paper-2)}

/* Group header — the High Court a run of forums sits under. Reads as a rule
   across the table rather than as another row: claret, mono, uppercase, and
   no hover, so it is plainly a heading and not a forum you could click. */
.jur-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,10rem) 4.5rem;
  align-items:baseline;gap:1rem;padding:.85rem 1.1rem .6rem;
  border-bottom:1px solid var(--lxe-rule);background:var(--lxe-paper-2)}
.jur-group:not(:first-of-type){border-top:1px solid var(--lxe-rule)}
.jur-group .jg-name{font-family:var(--lxe-mono);font-size:10px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lxe-claret)}
.jur-group .jg-count{font-family:var(--lxe-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lxe-ink-3)}
.jur-group .jg-matters{font-family:var(--lxe-mono);font-size:11px;color:var(--lxe-ink-2);
  text-align:right;font-variant-numeric:tabular-nums}
/* The child's forum name is indented so the hierarchy is legible at a glance
   without a second column or a glyph. */
.jur-row.is-child .jf{padding-left:.85rem;box-shadow:inset 2px 0 0 -1px var(--lxe-rule)}

@media(max-width:640px){.jur-row{grid-template-columns:2rem minmax(0,1fr) 3.5rem}
  .jur-row .js{display:none}
  .jur-group{grid-template-columns:minmax(0,1fr) 3.5rem}
  .jur-group .jg-count{display:none}}

/* ── The register — timeline ────────────────────────────── */
.tl{position:relative;padding-left:clamp(5.5rem,9vw,7.5rem)}
.tl-line{position:absolute;left:clamp(4.35rem,7.6vw,6.1rem);top:6px;bottom:6px;width:1px;
         background:var(--lxe-rule)}
.tl-line i{position:absolute;inset:0;background:var(--lxe-claret);display:block;
           transform-origin:top}
html.lxe-motion .tl-line i{transform:scaleY(0)}
.tl-item{position:relative;padding-bottom:clamp(1.6rem,3vw,2.4rem)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;width:7px;height:7px;border-radius:50%;
                 background:var(--lxe-paper);border:1px solid var(--lxe-claret);
                 left:calc(clamp(4.35rem,7.6vw,6.1rem) - clamp(5.5rem,9vw,7.5rem) - 3px);
                 top:6px}
.tl-year{position:absolute;left:calc(-1 * clamp(5.5rem,9vw,7.5rem));top:0;
         width:clamp(3.4rem,6vw,4.6rem);text-align:right;
         font-family:var(--lxe-mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;
         color:var(--lxe-claret);font-variant-numeric:tabular-nums}
.tl-item h3{margin:0 0 .3rem}
.tl-item .lxe-fine{margin:0 0 .45rem}
.tl-item p.tl-body{margin:0;font-size:13.5px;line-height:1.65;color:var(--lxe-ink-2);max-width:56ch;
  text-align:justify;text-justify:inter-word;hyphens:auto}
/* The publication's locus — a page range and an ISBN. Bibliographic data, not
   prose, so it takes the mono face the rest of the register uses for figures
   rather than tl-body's justified paragraph, which would set two short
   reference strings as though they were a sentence. */
.tl-item p.tl-cite{margin:0;font-family:var(--lxe-mono);font-size:10.5px;letter-spacing:.05em;
  color:var(--lxe-ink-3);font-variant-numeric:tabular-nums}
.tl-item .lxe-fine cite{font-style:italic}

/* ── Practice — filter tabs + matrix ────────────────────── */
.tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.4rem}
.tabs button{font-family:var(--lxe-mono);font-size:10px;font-weight:500;letter-spacing:.1em;
             text-transform:uppercase;color:var(--lxe-ink-3);background:none;
             border:1px solid var(--lxe-rule);border-radius:2px;padding:8px 13px;cursor:pointer;
             transition:color .25s,border-color .25s,background .25s}
.tabs button:hover{color:var(--lxe-ink);border-color:var(--lxe-ink-3)}
.tabs button.is-on{color:var(--lxe-paper);background:var(--lxe-ink);border-color:var(--lxe-ink)}
.tabs button b{font-weight:500;color:var(--lxe-claret)}
.tabs button.is-on b{color:var(--lxe-claret-hi)}
.pf{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--lxe-rule);
    border-left:1px solid var(--lxe-rule)}
@media(max-width:720px){.pf{grid-template-columns:1fr}}
.pf-cell{border-right:1px solid var(--lxe-rule);border-bottom:1px solid var(--lxe-rule);
         padding:clamp(1.1rem,2vw,1.5rem);position:relative;overflow:hidden;isolation:isolate}
.pf-cell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
                 background:var(--lxe-claret);transform:scaleY(0);transform-origin:top;
                 transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pf-cell:hover::before{transform:scaleY(1)}
.pf-cell.is-hidden{display:none}
.pf-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
        margin-bottom:.55rem}
.pf-tag{font-family:var(--lxe-mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--lxe-ink-3)}
.pf-cell h3{font-size:1.05rem;margin:0 0 .4rem}
.pf-cell p{margin:0;font-size:12.5px;line-height:1.6;color:var(--lxe-ink-2);
  text-align:justify;text-justify:inter-word;hyphens:auto}
/* corner ticks on each practice cell */
.pf-cell::after{content:'';position:absolute;right:0;bottom:0;width:9px;height:9px;
  border-right:1px solid var(--lxe-rule);border-bottom:1px solid var(--lxe-rule);
  transition:width .4s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1)}
.pf-cell:hover::after{width:16px;height:16px;border-color:var(--lxe-claret)}

/* ── Enquiry close ──────────────────────────────────────── */
.desk{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
      gap:1.5rem}
.desk-nap{display:flex;flex-direction:column;gap:.5rem;font-family:var(--lxe-mono);
          font-size:11px;letter-spacing:.05em;color:var(--lxe-ink-2)}
.desk-nap b{font-weight:500;color:var(--lxe-ink-3);letter-spacing:.14em;font-size:9px;
            text-transform:uppercase;display:inline-block;min-width:5.5rem}

/* ═══════════ GRAPHIC LAYER ═══════════
   All flat, all hairline, all built from primitives the system already
   owns: circles, squares, rules, ticks. Nothing illustrative. ═══════ */

/* reading progress — one claret hairline across the top */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
.progress i{display:block;height:100%;background:var(--lxe-claret);transform:scaleX(0);
  transform-origin:left}

/* seal rings — concentric circles, outer one dashed and slowly turning */
.seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seal svg circle{fill:none;stroke:var(--lxe-rule);stroke-width:1}
.seal .ring-dash{stroke:var(--lxe-claret);stroke-opacity:.5;stroke-dasharray:2 7;
  transform-origin:50% 50%;animation:sealturn 44s linear infinite}
@keyframes sealturn{to{transform:rotate(360deg)}}

/* the lattice — one cell per practice head, a graphic census */
.lattice{margin-top:clamp(1.75rem,3vw,2.5rem);border:1px solid var(--lxe-rule);
  background:var(--lxe-paper-2);padding:clamp(1rem,2vw,1.4rem)}
.lattice-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.9rem}
.lattice-grid{display:grid;grid-template-columns:repeat(19,1fr);gap:4px}
@media(max-width:600px){.lattice-grid{grid-template-columns:repeat(10,1fr)}}
.lattice-grid i{display:block;aspect-ratio:1;border:1px solid var(--lxe-ink-3);
  border-radius:1px;background:transparent}
.lattice-grid i.on{background:var(--lxe-claret);border-color:var(--lxe-claret)}
.lattice-grid i.adv{background:var(--lxe-ink);border-color:var(--lxe-ink)}
html.lxe-motion .lattice-grid i{opacity:0}
.lattice-key{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:.95rem}
.lattice-key span{font-family:var(--lxe-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lxe-ink-3);display:inline-flex;align-items:center;gap:.5em}
.lattice-key b{width:7px;height:7px;border-radius:1px;display:inline-block}

/* forums marquee spacing inside the dossier column */
.adv-marq{margin-block:clamp(2rem,4vw,3rem);max-width:100%}

/* drawn brace — a hairline bracket that writes itself in beside a heading */
.brace{display:block;overflow:visible}
.brace path{fill:none;stroke:var(--lxe-claret);stroke-width:1}

/* SVG draw-on (advocate layer's own gate, mirroring the foundation) */
html.lxe-motion .draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000)}

/* the compass — concentric squares that turn as the page scrolls */
.compass{width:clamp(140px,17vw,208px);height:clamp(140px,17vw,208px);position:relative;
  flex:none;display:grid;place-items:center}
.compass svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.compass rect,.compass circle,.compass line{fill:none;stroke:var(--lxe-rule);stroke-width:1}
.compass .sq-a,.compass .sq-b{transform-origin:50% 50%}
.compass .hair{stroke:var(--lxe-claret);stroke-opacity:.55}
.compass b{font-family:var(--lxe-mono);font-size:9px;letter-spacing:.2em;color:var(--lxe-ink-3);
  font-weight:400;position:relative}

/* tick ruler — a measured rule used as a section divider */
.ruler{display:flex;align-items:flex-end;gap:5px;height:24px;margin-top:1.5rem}
.ruler i{display:block;width:1px;background:var(--lxe-rule);height:8px;transform-origin:bottom}
.ruler i:nth-child(5n+1){height:20px;background:var(--lxe-ink-3)}
html.lxe-motion .ruler i{transform:scaleY(0)}

/* Respect the OS setting — everything visible, nothing moves. */
@media(prefers-reduced-motion:reduce){
  html.lxe-motion .wmask .w{transform:none!important}
  html.lxe-motion .lattice-grid i{opacity:1!important}
  html.lxe-motion .ruler i{transform:none!important}
  html.lxe-motion .tl-line i{transform:none!important}
  html.lxe-motion .draw{stroke-dashoffset:0!important}
  html.lxe-motion .orbit-fig .node{opacity:1!important}
  .seal .ring-dash,.orbit-fig .o-dash{animation:none}
  .progress{display:none}
}