/* tokens */

:root{
  --navy:#152A4D;
  --navy-deep:#0B1830;
  --navy-mid:#1D3760;
  --brass:#C0972D;
  --brass-bright:#E0B252;
  --brass-ink:#7A5F1C;
  --hall:#F2F1EC;
  --stone:#E3E1D8;
  --paper:#FBFAF7;
  --ink:#101A2B;
  --ink-muted:#4E5D73;
  --on-navy:#EDEFF3;
  --on-navy-muted:#A9B6C9;
  --up:#256B4C;
  --down:#A63A28;
  --display:"Prata",Georgia,"Times New Roman",serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1240px;
  --pad:clamp(20px,4vw,44px);
  --lintel-h:80px;
  --lintel-h-stuck:66px;
}

/* reset */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--hall);color:var(--ink);
  font-family:var(--body);font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.12;color:var(--ink);}
p{margin:0;}
a{color:inherit;text-decoration:none;text-underline-offset:3px;}
img{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
table{border-collapse:collapse;}
::selection{background:var(--brass);color:var(--navy-deep);}
input,select,textarea{caret-color:var(--brass-ink);font:inherit;}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px;}
html{scrollbar-color:var(--brass) var(--navy-deep);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--navy-deep);}
::-webkit-scrollbar-thumb{background:var(--brass);border:3px solid var(--navy-deep);border-radius:8px;}

[id]{scroll-margin-top:calc(var(--lintel-h-stuck) + 38px);}

/* utilities */

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.skip{position:fixed;left:12px;top:12px;z-index:200;background:var(--brass);color:var(--navy-deep);padding:12px 22px;font-weight:600;transform:translateY(-180%);transition:transform .2s var(--ease);}
.skip:focus{transform:none;}

/* street */
/* @probe .street */

.street{background:var(--hall);color:var(--ink-muted);font-size:.78rem;border-bottom:1px solid rgba(16,26,43,.1);}
.street .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px;flex-wrap:wrap;padding-block:6px;}
.street__facts{display:flex;gap:20px;flex-wrap:wrap;}
.street__facts span{letter-spacing:.02em;}
.street__tools{display:flex;align-items:center;gap:12px;}
.street__tools a{padding:4px 2px;}
.street__tools a:hover{color:var(--brass-ink);text-decoration:underline;}
.street__tools a[aria-current]{color:var(--navy);font-weight:600;}
.street__tools .na{padding:4px 2px;color:rgba(78,93,115,.45);cursor:not-allowed;}
.street__facts a{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--ink);}
.street__facts a:hover{color:var(--brass-ink);text-decoration:underline;}
.street__sep{width:1px;height:12px;background:rgba(16,26,43,.22);}

@media (max-width:820px){
  .street__facts span:nth-child(2){display:none;}
}

/* lintel */
/* @probe .lintel */

.lintel{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--stone);transition:box-shadow .3s var(--ease),background .3s var(--ease);}
.lintel.is-stuck{box-shadow:0 10px 30px -18px rgba(11,24,48,.45);background:var(--hall);}
.lintel .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,28px);min-height:var(--lintel-h);}
.lintel.is-stuck .wrap{min-height:var(--lintel-h-stuck);}
.brand{flex:none;}
.brand img{height:44px;width:auto;display:block;}
.lintel.is-stuck .brand img{height:36px;}
.menu{display:flex;gap:clamp(11px,1.35vw,20px);}
.menu a{position:relative;font-size:.855rem;font-weight:500;padding:10px 1px;color:var(--ink);}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease);}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1);}
.lintel__cta{display:flex;align-items:center;gap:12px;}
.burger{display:none;width:48px;height:48px;position:relative;}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .2s;}
.burger span:nth-child(1){top:17px;}
.burger span:nth-child(2){top:23px;}
.burger span:nth-child(3){top:29px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.drawer{display:none;}

/* keys & ghosts */
/* @probe .key .ghost .link-arrow */

.key,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;font-size:.9rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s,border-color .2s,color .2s;}
.key{background:var(--brass);color:var(--navy-deep);box-shadow:0 10px 22px -12px rgba(192,151,45,.75),inset 0 1px 0 rgba(255,255,255,.35);}
.key:hover{background:var(--brass-bright);transform:translateY(-2px);box-shadow:0 16px 28px -14px rgba(192,151,45,.85),inset 0 1px 0 rgba(255,255,255,.4);}
.key:active{transform:translateY(0);}
.ghost{border:1px solid var(--stone);color:var(--ink);background:transparent;}
.ghost:hover{border-color:var(--brass);color:var(--brass-ink);}
.ghost--lit{border-color:rgba(237,239,243,.35);color:var(--on-navy);}
.ghost--lit:hover{border-color:var(--brass-bright);color:var(--brass-bright);}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--brass-ink);}
.link-arrow svg{transition:transform .25s var(--ease);}
.link-arrow:hover svg{transform:translateX(5px);}

/* shared legal + source lines */
/* @probe .source .legal-line .sheet-legal */

.source{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.7rem;letter-spacing:.02em;color:var(--ink-muted);line-height:1.6;margin:0;}
.legal-line{font-size:.76rem;line-height:1.65;color:var(--ink-muted);margin:0;max-width:78ch;}
.sheet-legal{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(122,95,28,.4);margin-top:clamp(24px,3vw,36px);padding-top:16px;}

/* sections */
/* Deliberately unprobed, and the only migrated module that is: the first
   declaration below is a bare element selector. A sub-page that opens on a
   titled page head and then carries one plain <section> band would match neither
   .section-head nor .rule, so probing on them would silently drop the padding
   from every band on that page. Comments are stripped before declarations are
   compared, so removing this line changes nothing split-verify.mjs measures. */

section{padding:clamp(72px,10vh,120px) 0;}
.section-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(40px,6vh,68px);}
.section-head h2{font-size:clamp(1.85rem,3.2vw,2.75rem);line-height:1.16;max-width:22ch;}
.section-head p{color:var(--ink-muted);max-width:44ch;font-size:.98rem;}
.rule{height:1px;background:var(--brass);transform-origin:left;}
.js .rule-draw{transform:scaleX(0);}
.js .rule-draw.in{transform:scaleX(1);transition:transform 1.1s var(--ease);}

@media (max-width:820px){
  .section-head{grid-template-columns:1fr;}
}

/* reveal */
/* @probe .rise */

.js .rise{opacity:0;transform:translateY(16px);clip-path:inset(0 0 100% 0);}
.js .rise.in{opacity:1;transform:none;clip-path:inset(-16% -10%);transition:opacity .7s var(--ease),transform .85s var(--ease),clip-path .95s var(--ease);transition-delay:calc(var(--i,0) * 70ms);}

/* night */
/* @probe .night */

.night{background:var(--navy-deep);color:var(--on-navy-muted);padding:clamp(56px,8vh,88px) 0 0;}
.night__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-bottom:52px;border-bottom:1px solid rgba(237,239,243,.14);}
.night__brand img{height:50px;width:auto;margin-bottom:18px;}
.night__brand p{font-size:.86rem;line-height:1.75;max-width:30ch;}
.night h4{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;}
.night__col a{display:block;font-size:.88rem;padding:5px 0;color:var(--on-navy-muted);}
.night__col a:hover{color:var(--on-navy);text-decoration:underline;}
.night__disclosure{padding:30px 0;font-size:.78rem;line-height:1.75;max-width:96ch;}
.night__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 0 30px;font-size:.78rem;}
.night__col .na{display:block;font-size:.88rem;padding:5px 0;color:rgba(169,182,201,.5);cursor:not-allowed;}
.night__demo{margin-top:18px;font-size:.76rem;line-height:1.7;color:rgba(169,182,201,.8);max-width:40ch;}
.night__social{display:flex;gap:12px;}
.night__social a,.night__social span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(237,239,243,.22);color:var(--on-navy-muted);transition:border-color .25s,color .25s;}
.night__social a:hover{border-color:var(--brass-bright);color:var(--brass-bright);}
.night__social span{border-style:dashed;border-color:rgba(237,239,243,.16);color:rgba(169,182,201,.42);cursor:not-allowed;}
.night__social svg{width:17px;height:17px;}
.night__terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding:30px 0;border-top:1px solid rgba(237,239,243,.14);border-bottom:1px solid rgba(237,239,243,.14);}
.night__terms h3{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--on-navy);margin-bottom:10px;}
.night__terms p{font-size:.78rem;line-height:1.75;margin:0;color:rgba(169,182,201,.9);max-width:64ch;}

.night__legal{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.night__legal a + a{border-left:1px solid rgba(237,239,243,.2);padding-left:14px;}
.night__legal a:hover{color:var(--brass-bright);}

@media (max-width:1080px){
  .night__grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:820px){
  .night__terms{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .night__grid{grid-template-columns:1fr;}
}

/* page head */
/* @probe .page-head */

/* The Engraved-Head rule written for the top of a document instead of the middle
   of one: a Prata heading held to 22ch, one Archivo sentence held to 44ch,
   optionally closed by a 1px brass rule. The rule itself is the `.rule` that
   07-rhythm already defines — reused here rather than restated, so the system
   still has exactly one rule element and one draw-on-reveal behaviour.

   Two deliberate departures from `.section-head`, both worth stating because a
   reader will otherwise "fix" them:

   · The heading is the document's h1, and it sits below the hero's Display tier
     (clamp(2.7rem,4.6vw,4.6rem)). The hall is the loudest voice in the building;
     a room you walked into from it must not match it, or every sub-page opens by
     shouting over the front door.
   · Neither the title nor the lede carries `.rise`. A page title is wayfinding,
     not a reveal: putting the one line that says where you are behind a shutter
     trades an arrival gesture for a blank frame on every navigation, and for the
     largest text on the page that is also the LCP candidate. The closing rule
     still draws, so the head is not motionless — it just never hides its name.

   Ground is the hall limestone, which is the body's own ground: a page head that
   commits to no material lets whatever band follows read as a level change. It
   still closes on a 1px stone hairline, because the band below may be the same
   tone and the Layout rule requires adjacent equals to be separated. */

.page-head{background:var(--hall);border-bottom:1px solid var(--stone);padding:clamp(52px,7vh,84px) 0 clamp(40px,6vh,64px);}
.page-head__title{font-size:clamp(2.05rem,3.4vw,3.1rem);line-height:1.08;letter-spacing:-0.02em;max-width:22ch;}
.page-head__lede{color:var(--ink-muted);max-width:44ch;font-size:.98rem;margin-top:clamp(14px,2vh,20px);}
.page-head .rule{max-width:clamp(120px,16vw,200px);margin-top:clamp(28px,4vh,44px);}

@media (max-width:820px){
  .page-head{padding:40px 0 32px;}
}

/* breadcrumb */
/* @probe .crumb */

/* Wayfinding, now that the building has more than one floor.

   It sits above an Engraved-Head, which forbids "a kicker or eyebrow line above
   any heading". That rule is aimed at decorative pre-titles — an uppercase
   fragment restating the heading's own category — and this is not one: it is a
   landmark nav with its own accessible name, a trail of links, and a last step
   rendered as a <span> rather than an <a> because a link to the page you are
   already on is a dead control. It is set at .78rem in ink-muted, quieter than
   every other voice on the page, and it is the only element above a heading that
   the building permits.

   Archivo, not mono. The plan sketched this in JetBrains Mono; Tabular-Only
   reserves mono for figures that align in columns and names "labels" as something
   mono never sets, and a trail of room names is a label. What it does borrow is
   the street rail's small utility hand, so the two pieces of quiet furniture in
   the building match: .78rem, .02em tracking, a 1px × 10px ink tick at 22% as the
   separator (`.street__sep` is 1px × 12px at the same alpha — one step shorter
   because it separates words rather than contact details), and navy at 600 for
   the step you are standing on, lifted from `.street__tools a[aria-current]`.

   The separator is `content:""` with a drawn bar rather than a glyph, so there is
   no generated text for a screen reader to announce between two real names. */

.crumb{font-size:.78rem;letter-spacing:.02em;color:var(--ink-muted);margin-bottom:clamp(16px,2.4vh,24px);}
.crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;list-style:none;margin:0;padding:0;}
.crumb li{display:flex;align-items:center;gap:10px;}
.crumb li+li::before{content:"";width:1px;height:10px;background:rgba(16,26,43,.22);}
.crumb a{padding:2px 0;}
.crumb a:hover{color:var(--brass-ink);text-decoration:underline;}
.crumb [aria-current]{color:var(--navy);font-weight:600;}

/* nav current */
/* @probe .lintel */

/* The seven lintel links became seven routes, so "which room am I in" is a fact
   the nav can state instead of a scroll position it has to infer. Both treatments
   reuse vocabulary the building already has rather than inventing a badge:

   · On the paper lintel the current link holds open the same 2px brass underline
     that hover and focus draw from the left — the bar is simply never retracted,
     and the label takes the navy-at-600 the street rail gives its current
     language. Flat-At-Rest governs shadows, and this casts none; a persistent
     state marker at rest is exactly what `.street__tools a[aria-current]` already
     is, so the building has one grammar for "you are here", not two.
   · Inside the navy drawer the current link takes brass-bright at 600 over a 2px
     brass-bright left edge, hung the way the fold drawer and the reading room's
     active chapter hang theirs. The edge is what keeps this off colour alone:
     brass-bright against on-navy is a real contrast step, but Never-Colour-Alone
     asks for a shape that survives monochrome and a weight that survives
     blindness, and `aria-current="page"` supplies the announced half.

   The edge is drawn inside the link's own box (negative margin, matching
   padding-left) so the label stays on the column every other row uses.

   The homepage is the one route where nothing here fires: its `section` is "home",
   which matches none of the seven, and `{{home}}` resolves to `#main` there for
   the same reason — on the front door, "go home" is not a destination. */

.menu a[aria-current]{color:var(--navy);font-weight:600;}
.menu a[aria-current]::after{transform:scaleX(1);}
.drawer a[aria-current]{color:var(--brass-bright);font-weight:600;border-left:2px solid var(--brass-bright);padding-left:14px;margin-left:-16px;}

/* band link */
/* @probe .band-link */

/* A .link-arrow standing alone at the foot of a band. It needs the same gap the
   band's own legal block uses above itself, so the two do not fight when a band
   carries both. It is a plain block wrapper rather than a flex item on purpose:
   .link-arrow is inline-flex, and inside any flex or grid parent it would
   stretch to the full measure, giving a full-width hit area with the label
   pinned to its left edge. As a block child it shrinks to the link. */

.band-link{margin:clamp(22px,3vw,34px) 0 0;}

/* night headings */
/* @probe .night */

/* The footer's six group labels were <h4> (nav columns) and <h3> (legal blocks)
   in the single-file page, where they only cleared the heading-order check
   because that document happened to contain an <h3> in its body. A shared footer
   cannot know how deep the page above it went, so all six are now <h2> — the one
   level every document can reach straight after its <h1>.

   These are the pinned 24-night.css declarations with the tag swapped, so the
   footer renders exactly as it did. `.night__terms h2` must come second: it now
   also matches `.night h2`, and has to undo the uppercase and tracked-out
   letter-spacing that rule brings with it. Both rules die with the retired
   `.night h4` / `.night__terms h3` selectors once the single-file page goes. */

.night h2{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;}
.night__terms h2{font-family:var(--body);font-size:.9rem;font-weight:600;letter-spacing:-0.01em;text-transform:none;color:var(--on-navy);margin-bottom:10px;}

/* tabs */
/* @probe .tabs */

/* The tab set is what a fund page opens with: five or six rooms behind one door,
   per the sitemap's "Trang con tích hợp" column (PHVSF five, VNSHINE six, the
   academy guides four). It is a ruled row, not a segmented control — the vault
   already owns the bordered-bed-and-brass-hand form as its period dial, and two
   objects sharing one shape would read as one object.

   The row never wraps. Six Vietnamese tab names do not fit 390px, and a wrapped
   tablist strands the active tab's rule above the hairline it is supposed to sit
   on, so the row scrolls instead and the rule stays married to the line. Arrow
   keys move selection and scroll the chosen tab into view (f-tabs.js), which is
   also how a keyboard reader reaches what the scroll hides.

   Never-Colour-Alone: the chosen tab is carried by weight, ink colour and the
   brass rule together with aria-selected="true", never by the rule alone. */

.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:clamp(2px,.6vw,8px);border-bottom:1px solid rgba(16,26,43,.16);scrollbar-width:thin;}
.tabs__tab{flex:0 0 auto;font-family:var(--body);font-size:.9rem;font-weight:400;letter-spacing:.01em;line-height:1.2;color:var(--ink-muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 16px 12px;cursor:pointer;white-space:nowrap;transition:color .25s var(--ease),border-color .25s var(--ease);}
.tabs__tab:hover{color:var(--ink);}
.tabs__tab[aria-selected="true"]{color:var(--navy);font-weight:600;border-bottom-color:var(--brass);}

.tabpanel{padding-top:clamp(28px,4.5vh,48px);}

@media (max-width:560px){
  .tabs__tab{font-size:.86rem;padding:8px 12px 10px;}
  .tabpanel{padding-top:24px;}
}

/* document row */
/* @probe .docrows */

/* A fund's paper trail: prospectus, NAV reports, fund reports, trading
   information — the sitemap's "Tài liệu quỹ" and "Báo cáo quỹ" tabs. The row
   keeps the registry's cadence (Prata name, mono stamp, status pill) but re-cuts
   it for a row that also has to hand over a file: name and description stack in
   the reading column, the stamp and the state stand at the right edge.

   The row owns the generic `.na` plaque. A channel that does not exist in the
   demo is never merely tinted out and never faked as a download — the plan marks
   the VNSHINE fund reports and the ETF trading information CHƯA CÓ, so those rows
   carry a dashed plaque with the reason written into it, in the reader's
   language, and `cursor: not-allowed`. The street's language plates and the
   footer's app-store plaques keep their own scoped `.na` rules on their own
   grounds; this is the light-ground form every future row inherits.

   Two states, never a third: an outbound link to the channel that really holds
   the file (fund.phfm.vn, D5 spoken at the register that lists them), or the
   plaque. A row that offers neither is a dead row and does not ship. */

.docrows{list-style:none;margin:0;padding:0;border-top:1px solid rgba(16,26,43,.16);}
.docrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px clamp(16px,2.4vw,32px);align-items:center;padding:clamp(16px,2.4vh,24px) 0;border-bottom:1px solid rgba(16,26,43,.16);}
.docrow__name{font-family:var(--display);font-weight:400;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.3;color:var(--ink);margin:0;}
.docrow__desc{font-size:.84rem;line-height:1.6;color:var(--ink-muted);margin:6px 0 0;max-width:56ch;}
.docrow__stamp{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:.72rem;letter-spacing:.04em;color:var(--ink-muted);white-space:nowrap;}
.docrow__state{display:flex;flex-direction:column;align-items:flex-end;gap:9px;}
.docrow__pill{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(122,95,28,.5);color:var(--brass-ink);padding:5px 11px;white-space:nowrap;}
.docrow__pill i{width:6px;height:6px;border-radius:50%;background:var(--up);font-style:normal;}
.docrow[data-state="soon"] .docrow__pill{border-color:rgba(16,26,43,.3);color:var(--ink-muted);}
.docrow[data-state="soon"] .docrow__pill i{background:var(--ink-muted);}
.docrow__file{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(122,95,28,.4);white-space:nowrap;}
.docrow__file:hover{color:var(--navy);text-decoration-color:var(--navy);}

.na{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px dashed rgba(16,26,43,.3);font-size:.76rem;letter-spacing:.02em;color:var(--ink-muted);cursor:not-allowed;white-space:nowrap;}

.docrows-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-top:clamp(24px,3.4vw,38px);}
.docrows-foot .legal-line{margin:0;max-width:70ch;}

@media (max-width:820px){
  .docrow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name state" "desc desc" "stamp stamp";gap:8px 14px;align-items:start;}
  .docrow__name{grid-area:name;}
  .docrow__desc{grid-area:desc;}
  .docrow__stamp{grid-area:stamp;}
  .docrow__state{grid-area:state;}
}
@media (max-width:560px){
  .docrow__state{align-items:flex-start;}
}

/* article body */
/* @probe .article */

/* Long-form reading: the dispatch pages behind /goc-nhin/ and the academy's
   guides. The measure is 68ch — wider than any band's capped lede because a
   reader who chose an article chose to read, and narrower than the hall because
   Prata-adjacent Archivo at .98rem still owes the eye a line it can finish.

   Prose links live here. The reset strips colour and underline from every
   anchor so that the building's instruments (keys, ghosts, menu links,
   link-arrows) can each carry their own hand, and the side effect was that a
   link inside a paragraph became invisible — a dead control wearing text.
   Inside .article a link is brass-ink with a held underline, the only brass
   permitted as text on a light ground, warming to navy on hover so the state
   change is a word darkening rather than a colour appearing.

   The figure is plated in the hall's materials by the same three declarations
   the reading room's plates use — desaturate, navy screen, brass-bright
   multiply — because an unfiltered photograph would be the only object on the
   page lit by someone else's sun. The caption is furniture: a mono figure
   number, a hairline, one Archivo sentence. */

.article{max-width:68ch;}
.article__meta{display:flex;align-items:center;gap:10px;margin:0 0 1.4em;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--brass-ink);}
.article__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--brass-ink);}
.article__meta time{color:var(--ink-muted);font-weight:500;letter-spacing:.04em;}
.article li b{font-weight:600;color:var(--navy);}

.article p{font-size:.98rem;line-height:1.78;color:var(--ink);margin:0 0 1.2em;}
.article__lede{font-size:1.02rem;line-height:1.7;color:var(--ink-muted);margin:0 0 1.7em;}
.article h2{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.2;letter-spacing:-0.01em;color:var(--navy);margin:1.9em 0 .6em;}
.article h3{font-family:var(--display);font-weight:400;font-size:clamp(1.12rem,1.6vw,1.35rem);line-height:1.25;color:var(--navy);margin:1.6em 0 .5em;}
.article a{color:var(--brass-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(122,95,28,.45);}
.article a:hover{color:var(--navy);text-decoration-color:var(--navy);}
.article ul{margin:0 0 1.2em;padding-left:1.25em;}
.article li{font-size:.98rem;line-height:1.78;color:var(--ink);margin:.45em 0;}
.article li::marker{color:var(--brass-ink);}
.article blockquote{margin:1.8em 0;padding:2px 0 2px clamp(18px,2.6vw,30px);border-left:2px solid var(--brass);}
.article blockquote p{font-family:var(--display);font-weight:400;font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.42;letter-spacing:-0.01em;color:var(--navy);margin:0;}
.article figure{margin:2em 0;}
.article__plate{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/9;background:var(--navy-deep);}
.article__plate img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06) brightness(1.1);}
.article__plate::before{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:screen;pointer-events:none;z-index:1;}
.article__plate::after{content:"";position:absolute;inset:0;background:var(--brass-bright);mix-blend-mode:multiply;opacity:.58;pointer-events:none;z-index:2;}
.article figcaption{display:flex;gap:10px;align-items:baseline;margin-top:12px;padding-top:10px;border-top:1px solid rgba(16,26,43,.16);font-size:.78rem;line-height:1.6;color:var(--ink-muted);max-width:56ch;}
.article figcaption .idx{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-ink);white-space:nowrap;}
.article .legal-line{margin-top:2.2em;padding-top:14px;border-top:1px solid rgba(16,26,43,.16);}

/* fund page */
/* @probe .fundfacts */

/* The three data displays of a fund tab: the identity grid, the three-period
   return list and the allocation bars. They repeat the vault fold's grammar —
   hairline above each fact, tabular mono figures, brass hand on the bar — but
   they are server-rendered and static, because a fund page states its own
   numbers instead of asking the reader to open a drawer first. */

.fundfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;margin:0 0 clamp(22px,3vw,32px);}
.fundfacts div{border-top:1px solid rgba(16,26,43,.12);padding-top:10px;}
.fundfacts dt{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px;}
.fundfacts dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:.9rem;color:var(--ink);}

.fundret{margin:0 0 clamp(18px,2.6vw,26px);border-top:1px solid rgba(122,95,28,.4);}
.fundret div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 2px;border-bottom:1px solid rgba(16,26,43,.1);}
.fundret dt{font-size:.84rem;color:var(--ink-muted);}
.fundret dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:1rem;color:var(--ink);}
.fundret dd.pos{color:var(--up);}
.fundret dd.neg{color:var(--down);}

.fundalloc{display:flex;flex-direction:column;gap:14px;margin:0 0 clamp(6px,1vw,10px);}
.fundalloc__row{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:.84rem;color:var(--ink-muted);}
.fundalloc__bar{grid-column:1/-1;height:6px;background:rgba(16,26,43,.12);position:relative;overflow:hidden;}
.fundalloc__bar i{position:absolute;inset:0;background:var(--brass);transform-origin:0 50%;}
.fundalloc__pct{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;color:var(--brass-ink);}

@media (max-width:560px){
  .fundfacts{grid-template-columns:1fr;}
}

/* band surfaces */
/* @probe .band-paper .band-stone */

.band-paper{background:var(--paper);}
.band-stone{background:var(--stone);}

/* nav mode switch */

@media (max-width:1200px){
  .menu,.lintel__cta{display:none;}
  .burger{display:block;}
  .drawer{display:block;position:fixed;inset:0 0 auto 0;top:0;z-index:55;background:var(--navy-deep);color:var(--on-navy);padding:calc(var(--lintel-h) + 16px) var(--pad) 40px;transform:translateY(-102%);transition:transform .45s var(--ease);box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
  .drawer.is-open{transform:none;}
  .drawer a{display:block;padding:14px 0;font-size:1.05rem;border-bottom:1px solid rgba(237,239,243,.12);}
  .drawer .drawer__cta{display:flex;flex-direction:column;gap:12px;margin-top:26px;border:0;}
}

/* reduced motion */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .js .rise{opacity:1;transform:none;clip-path:none;}
  .js .rule-draw{transform:scaleX(1);}
  .louver i{transform:none!important;}
}