/* ============================================================
   DYUTAM INTEL — Site chrome
   header · nav · drawer · inline search · RTP ticker · footer
   ============================================================ */

/* ============================================================
   HEADER / NAV
   ============================================================ */
.hdr{position:sticky;top:0;z-index:200;background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--border);transition:box-shadow .3s,background .3s}
.hdr.scrolled{box-shadow:var(--shadow)}
.hdr .wrap{display:flex;align-items:center;gap:26px;height:64px}
/* Ace wordmark: Dyut[A]m — the capital A rides a playing-card tile with the
   header diamond watermarked on its face. Geometry from the approved mockup
   (04, "Both tilted · ink D"): card −7°, A +8° back so it reads upright, the
   word all ink so the card is the only colour moment. The tile is padded
   around the A and baseline-aligned, so it hangs naturally in the word. */
.brand{display:flex;align-items:center;flex-shrink:0}
.brand-word{display:inline-block;font-family:var(--font-serif);font-weight:600;font-size:30px;letter-spacing:-.01em;line-height:1;color:var(--text);white-space:nowrap}
.brand-ace{
  position:relative;display:inline-block;
  padding:.16em .12em .12em;margin:0 -.06em;line-height:1;color:var(--accent);
  background:var(--surface);border:1px solid var(--accent-line);border-radius:.14em;
  box-shadow:.02em .04em .1em rgba(14,17,22,.12);
  transform:rotate(-7deg);transition:box-shadow .25s,transform .25s;
}
/* The negative margins tuck the card under the neighbouring letters; lifting
   pre/post above the tile keeps the type on top, so the card reads as slipped
   in behind the word rather than wedged between t and m. */
.brand-word .pre,.brand-word .post{position:relative;z-index:1}
.brand-ace .a{position:relative;z-index:1;display:block;transform:rotate(8deg)}
.brand-ace svg{position:absolute;left:50%;top:50%;width:.62em;height:.62em;transform:translate(-50%,-50%);opacity:.17;overflow:visible;display:block}
.brand:hover .brand-ace{transform:translateY(-.04em) rotate(-7deg);box-shadow:.02em .07em .16em rgba(14,17,22,.18)}
.invert .brand-ace,[data-theme="dark"] .brand-ace{color:var(--accent-bright);background:rgba(59,130,246,.14)}
.invert .brand-ace svg,[data-theme="dark"] .brand-ace svg{opacity:.3}
.invert .brand-ace path,[data-theme="dark"] .brand-ace path{stroke:var(--accent-bright)}
.brand-logo{display:flex;align-items:center}
.brand-logo img{max-height:38px;width:auto}

.nav{display:flex;align-items:center;gap:3px;margin-left:8px}
.nav ul{list-style:none;display:flex;align-items:center;gap:3px;margin:0;padding:0}
.nav li{position:relative}
.nav a{
  position:relative;font-size:14.5px;font-weight:500;color:var(--text-muted);
  padding:8px 13px;border-radius:var(--r-sm);transition:color .18s,background .18s;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
/* only the top level takes the fusion's heavier voice — sub-menu
   links keep the stock weight */
.nav .menu>li>a{font-weight:600}
.nav a:hover,.nav a:focus-visible{color:var(--text)}
/* Sub-menu links keep the pill for hover feedback — the top level's
   feedback is the underline sweep below. */
.nav .sub-menu a:hover{background:var(--surface-3)}
.nav .current-menu-item>a,.nav .current-menu-ancestor>a,
.nav .current_page_item>a,.nav .current-menu-parent>a{color:var(--text)}
/* The fusion nav (f10): a 2px blue-to-mint underline sweeps in from
   the left on hover; the current page holds it swept in at rest (the
   old solid accent bar's job). Top level only — a sub-menu link must
   never inherit the sweep. */
.nav .menu>li>a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--accent),#45d6ba);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.2,.75,.25,1)}
.nav .menu>li>a:hover::after,.nav .menu>li>a:focus-visible::after{transform:scaleX(1)}
/* (0,3,3): must outrank the base sweep's scaleX(0) resting state */
.nav .menu>li.current-menu-item>a::after,
.nav .menu>li.current-menu-ancestor>a::after{transform:scaleX(1)}
[data-theme="dark"] .nav .menu>li>a::after{
  background:linear-gradient(90deg,var(--accent-bright),#55ddc1)}
@media(prefers-reduced-motion:reduce){
  .nav .menu>li>a::after{transition:none}
}
/* Menu-item tag pill ("LIVE", "NEW"). Defined standalone so it survives in
   the drawer, which renders the same menu outside .nav. */
.tg{display:inline-block;margin-left:6px;font-size:var(--type-label-floor);font-weight:700;letter-spacing:.08em;
  line-height:1.5;vertical-align:middle;color:var(--up-text);
  border:1px solid color-mix(in srgb,var(--up-text) 36%,transparent);border-radius:5px;padding:1px 4px}
.nav a .tg{margin-left:0}

/* one level of dropdown — enough for "Tools > Verifiers/Calculators" */
.nav .sub-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:216px;list-style:none;
  display:flex;flex-direction:column;gap:2px;padding:8px;margin:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(-8px);
  transition:opacity .18s,transform .18s;z-index:60}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;pointer-events:auto;transform:none}
.nav .sub-menu a{font-size:13.5px;padding:9px 11px}
.nav .menu-item-has-children>a::before{
  content:"";width:5px;height:5px;order:2;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px);opacity:.6}

.nav-spacer{flex:1}
.hdr-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--text-muted);
  border:1px solid transparent;transition:.18s}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .sun{display:block}
[data-theme="dark"] .theme-toggle .moon{display:none}
.menu-btn{display:none}
@media(max-width:1040px){.nav{display:none}.menu-btn{display:grid}}
@media(max-width:560px){.hdr .wrap{gap:14px}.hdr-actions .btn{display:none}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:300;background:color-mix(in srgb,var(--bg) 70%,transparent);
  backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(82vw,360px);background:var(--surface);
  border-left:1px solid var(--border);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
  padding:22px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.drawer.open .drawer-panel{transform:none}
.drawer-panel ul{list-style:none;margin:0;padding:0}
/* Scoped to menu links only — the brand lockup and the CTA button keep
   their own display and must not be flattened into block rules. */
.drawer-panel .menu a{display:block;padding:14px 6px;font-size:18px;font-family:var(--font-serif);border-bottom:1px solid var(--border)}
.drawer-panel .menu a:hover{color:var(--accent-text)}
.drawer-panel .sub-menu a{font-size:15px;padding-left:20px;color:var(--text-muted)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.drawer-head .brand-word{font-size:25px}
.drawer-cta{margin-top:22px;justify-content:center}

/* ============================================================
   TICKER — thin, quiet, numerals in mono
   ============================================================ */
.ticker{border-bottom:1px solid var(--border);background:var(--surface-2);overflow:hidden;position:relative}
.ticker-inner{display:flex;align-items:center}
.ticker-lbl{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:0 15px;height:34px;
  background:var(--surface-3);color:var(--text-muted);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;z-index:2;position:relative;
  border-right:1px solid var(--border)}
.ticker-lbl .pulse{width:6px;height:6px;border-radius:50%;background:var(--up);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 45%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ticker-track{display:flex;align-items:center;white-space:nowrap;will-change:transform;animation:scroll-x 240s linear infinite}
/* Pause on hover AND keyboard focus so pointer, keyboard and (via focusing a
   link) touch users can all halt the marquee to read it. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:9px;padding:0 20px;height:34px;font-size:12px}
.ticker-item .nm{color:var(--text-muted);font-weight:500}
.ticker-item .rtp{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:11.5px}
.ticker-item .pc{font-family:var(--font-mono);font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:3px;color:var(--text-dim)}
.ticker-item .pc.u{color:var(--up-text)}
.ticker-item .pc.d{color:var(--down-text)}
a.ticker-item .nm{transition:color .18s}
a.ticker-item:hover .nm{color:var(--accent-text)}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Reduced motion stops the marquee outright — a slower crawl is still
   motion. The links stay reachable by keyboard, and hover/focus already
   pause the track for everyone else. */
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .ticker-lbl .pulse{animation:none}
}

/* ============================================================
   INLINE SEARCH
   ============================================================ */
.search-inline{position:relative;display:flex;align-items:center}
.search-toggle{position:relative;z-index:2}
.search-toggle .ico-close{display:none}
.search-inline.open .search-toggle .ico-search{display:none}
.search-inline.open .search-toggle .ico-close{display:block}
.search-field{position:absolute;right:42px;top:50%;transform:translateY(-50%);
  width:0;opacity:0;pointer-events:none;height:40px;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);
  padding:0 18px;font-family:var(--font-sans);font-size:14px;color:var(--text);outline:none;
  box-shadow:var(--shadow);transition:width .34s cubic-bezier(.2,.7,.2,1),opacity .26s,border-color .2s}
.search-inline.open .search-field{width:min(320px,52vw);opacity:1;pointer-events:auto}
.search-inline.open .search-field:focus{border-color:var(--accent-bright)}
.search-drop{position:absolute;top:calc(100% + 10px);right:0;width:min(340px,84vw);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);
  overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s;z-index:50}
.search-inline.open .search-drop{opacity:1;pointer-events:auto;transform:none}
.search-drop .sg-h{font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:var(--text-dim);padding:14px 16px 6px}
.search-results{padding:2px 8px 8px}
.search-drop a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--text);transition:background .15s}
.search-drop a:hover,.search-drop a.hl{background:var(--surface-3)}
.search-drop a .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);
  border:1px solid var(--border);border-radius:5px;padding:2px 6px;margin-left:auto;flex-shrink:0}
.search-empty{display:none;padding:12px 18px 18px;font-size:13px;color:var(--text-dim)}
.search-drop.no-res .search-results{display:none}
.search-drop.no-res .search-empty{display:block}
.search-drop .go-all{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.search-drop .go-all:hover{color:var(--accent-text);background:var(--surface-3)}
/* display:flex above beats the UA's [hidden] rule — restate it, so the
   link is genuinely gone until the script fills in a query. */
.search-drop .go-all[hidden]{display:none}
/* Below ~800px the icon-anchored flyout has nowhere to go: the field backs
   into the wordmark and the panel's left edge leaves the screen. Re-anchor
   both to the header bar itself (.search-inline goes static, so the nearest
   positioned ancestor is the sticky .hdr — a full-width strip) and lay them
   out as a sheet under the bar, pinned to the page edges. */
@media(max-width:800px){
  .search-inline{position:static}
  .search-field,
  .search-inline.open .search-field{
    left:14px;right:14px;width:auto;top:calc(100% + 10px);transform:none;
    font-size:16px} /* under 16px, iOS zooms the page on focus */
  .search-drop{left:14px;right:14px;width:auto;top:calc(100% + 60px);
    max-height:min(62vh,calc(100dvh - 140px));overflow-y:auto}
  .searchform input[type="search"]{font-size:16px}
}

/* standalone search form (search page, 404, sidebar) */
.searchform{display:flex;gap:10px;max-width:520px}
.searchform input[type="search"]{flex:1;min-width:0;padding:14px 18px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-family:var(--font-sans);font-size:14.5px;outline:none;transition:border-color .2s}
.searchform input[type="search"]:focus{border-color:var(--accent-bright)}

/* ============================================================
   FOOTER — LEDGER: colossal wordmark floor
   ============================================================ */
.f-links{display:flex;gap:18px;flex-wrap:wrap}
.f-links a{font-size:12.5px;color:var(--text-dim);transition:color .18s;white-space:nowrap}
.f-links a:hover{color:var(--text)}

.f1{position:relative;overflow:hidden;background:var(--bg);padding-top:0}
.f1-mark{position:absolute;left:-70px;bottom:-110px;width:clamp(340px,32vw,500px);pointer-events:none;opacity:.42;z-index:0}
.f1-mark svg{width:100%;height:auto;display:block}
.f1 .wrap{position:relative;z-index:1}
.f1-rail{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;border-bottom:1px solid var(--border);padding:16px 0}
.f1-rail .lbl{display:flex;align-items:center;gap:9px;white-space:nowrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.f1-rail .lbl i{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 22%,transparent)}
.f1-stats{display:flex;gap:34px;justify-content:flex-end;flex-wrap:wrap}
.f1-stat{display:flex;align-items:baseline;gap:8px}
.f1-stat b{font-family:var(--font-mono);font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.f1-stat span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.f1-main{display:grid;grid-template-columns:1.15fr repeat(4,minmax(0,.62fr));gap:44px;padding:clamp(40px,4.6vw,64px) 0 clamp(38px,4vw,56px)}
.f1-say h2{font-family:var(--font-serif);font-weight:500;font-size:clamp(22px,2.2vw,29px);line-height:1.24;letter-spacing:-.02em;margin:18px 0 12px;max-width:24ch;text-wrap:pretty}
.f1-say h2 em{font-style:italic;color:var(--accent-bright)}
.f1-say p{font-size:13.5px;color:var(--text-muted);line-height:1.65;max-width:36ch;margin-bottom:20px}
.f1-col h3{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:700;padding-bottom:11px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.f1-col h3 i{font-family:var(--font-mono);font-style:normal;font-size:var(--type-label-floor);color:var(--accent-text);opacity:1}
.f1-col ul{list-style:none;margin:0;padding:0}
.f1-col a{display:block;font-size:13.5px;color:var(--text-muted);padding:6px 0;transition:.18s;position:relative;white-space:nowrap}
.f1-col a:hover{color:var(--text);padding-left:11px}
.f1-col a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--accent-bright);opacity:0;transition:.18s}
.f1-col a:hover::before{opacity:1}
.f1-word{position:relative;line-height:.74;text-align:center;padding-top:8px;margin-bottom:-.1em;user-select:none}
.f1-word span{display:inline-block;white-space:nowrap;font-family:var(--font-serif);font-weight:600;font-size:clamp(88px,15.6vw,236px);letter-spacing:-.045em;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-3) 80%,var(--text)) 4%,transparent 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px var(--border-strong)}
.f1-word span b{font-weight:600;-webkit-text-stroke:1px var(--accent-line);background:linear-gradient(180deg,var(--accent-soft),transparent 90%);-webkit-background-clip:text;background-clip:text}
.f1-bot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--border);padding:20px 0 26px}
.f1-resp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* The risk disclaimer is the footer's one YMYL-load-bearing line — a step
   up from the --text-dim small print, not part of it. */
.f1-resp p{font-size:13px;color:var(--text-muted);max-width:66ch;line-height:1.6}
.badge18{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em}
.badge18 b{display:inline-grid;place-items:center;width:28px;height:22px;border-radius:6px;
  background:var(--surface-3);border:1px solid var(--border-strong);color:var(--text-muted);font-size:11px;letter-spacing:0}
@media(max-width:1080px){.f1-main{grid-template-columns:1fr 1fr 1fr;gap:34px}.f1-say{grid-column:1/-1}}
@media(max-width:660px){.f1-main{grid-template-columns:1fr}.f1-stats{justify-content:flex-start}.f1-rail{grid-template-columns:1fr}}

/* footer widget area — optional, sits above the ledger rail */
.f1-widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;
  padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--border)}
.f1-widgets .widget-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dim);font-weight:700;margin-bottom:12px}