/* ==========================================================================
   ForexTrade Capital — front-end stylesheet
   One file, no framework, no preprocessor. Tokens mirror theme.json so the
   editor and the front end cannot drift apart.
   ========================================================================== */

/* --------------------------------------------------------- fonts */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0400-04FF,U+2000-206F,U+2190-21BB,U+2212;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/plex-mono-var.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0400-04FF,U+2000-206F;
}

/* --------------------------------------------------------- tokens */
:root{
  --navy-900:#08182C;--navy-800:#0D2340;--navy-700:#143152;
  --slate-700:#3C4C5F;--slate-600:#546477;--slate-500:#6F7F92;--slate-400:#93A2B3;
  --slate-300:#C2CCD7;--slate-200:#DCE3EA;--slate-100:#EDF1F5;
  --paper:#FFFFFF;--paper-alt:#F7F9FB;
  --gold:#A8823C;--gold-soft:#C9A768;

  --shell:1240px;--radius:2px;--measure:68ch;
  --step-0:1.0625rem;--step-1:1.1875rem;
  --step-2:clamp(1.35rem,1.1rem + .9vw,1.6rem);
  --step-3:clamp(1.75rem,1.35rem + 1.7vw,2.4rem);
  --step-4:clamp(2.2rem,1.5rem + 2.8vw,3.6rem);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* --------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy-900);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.72;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.18;letter-spacing:-.021em}
p{margin:0}a{color:inherit}img,svg{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--navy-900);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--navy-900);color:#fff;padding:12px 20px}
.skip:focus{left:0}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:24px}
@media(min-width:900px){.shell{padding-inline:40px}}
.measure{max-width:var(--measure)}

.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:24px;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-500)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}

/* --------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--radius);
  font-size:.9375rem;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.btn--solid{background:var(--navy-900);color:#fff}
.btn--solid:hover{background:var(--navy-700)}
.btn--line{border-color:var(--slate-300);color:var(--navy-900);background:transparent}
.btn--line:hover{border-color:var(--navy-900)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:#96742f}
.btn--sm{padding:10px 18px;font-size:.875rem}

/* --------------------------------------------------------- header */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--slate-200)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:32px;height:74px}
.top__end{display:flex;align-items:center;gap:16px}

.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark__glyph{flex:none}
.mark__text{display:flex;flex-direction:column;line-height:1}
.mark__a{font-size:.9375rem;font-weight:600;letter-spacing:.01em}
.mark__b{margin-top:5px;font-family:var(--mono);font-size:.5625rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate-500)}
.mark--dark .mark__a{color:#fff}

.nav{display:none}
@media(min-width:1000px){.nav{display:block}}
.nav__list{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.nav__list li{list-style:none}
.nav__list li::marker{content:""}
.nav a{text-decoration:none;font-size:.9375rem;color:var(--slate-700);
  padding-block:4px;border-bottom:1.5px solid transparent;transition:.15s}
.nav a:hover,.nav .current-menu-item>a{color:var(--navy-900);border-bottom-color:var(--gold)}

.burger{display:inline-flex;align-items:center;background:none;border:0;padding:10px 0;cursor:pointer}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:20px;height:1.5px;background:var(--navy-900);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--navy-900)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* --------------------------------------------------------- page heads */
.phead{padding-block:76px 44px}
@media(min-width:900px){.phead{padding-block:104px 52px}}
.phead h1{font-size:var(--step-4);letter-spacing:-.03em;max-width:18ch}
.phead__lede{margin-top:26px;font-size:var(--step-1);line-height:1.6;color:var(--slate-700);max-width:62ch}
.phead--page{padding-block:34px 44px;border-bottom:1px solid var(--slate-200)}

.crumbs{display:flex;flex-wrap:wrap;gap:10px;padding-top:34px;
  font-family:var(--mono);font-size:.75rem;color:var(--slate-500)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--gold)}

/* --------------------------------------------------------- home sections */
.section{padding-block:88px}
@media(min-width:900px){.section{padding-block:128px}}
.section--alt{background:var(--paper-alt);border-block:1px solid var(--slate-200)}
.section--dark{background:var(--navy-900);color:#fff}
.section--dark .eyebrow{color:var(--slate-400)}

.hero{padding-block:76px 0}
@media(min-width:900px){.hero{padding-block:112px 0}}
.hero h1{font-size:var(--step-4);letter-spacing:-.032em;max-width:16ch}
.hero .lede{margin-top:30px;max-width:52ch;font-size:var(--step-1);color:var(--slate-700)}

.negations{border:1px solid var(--slate-200);background:var(--paper-alt);padding:30px 28px}
.negations__title{margin-bottom:22px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500)}
.negations li{display:flex;gap:14px;align-items:baseline;padding-block:13px;
  border-top:1px solid var(--slate-200);font-size:.9375rem;color:var(--slate-700)}
.negations li:first-child{border-top:0;padding-top:0}
.negations li b{flex:none;width:22px;font-family:var(--mono);font-size:.75rem;
  font-weight:500;color:var(--gold)}
.negations__foot{margin-top:22px;padding-top:20px;border-top:1px solid var(--slate-200);
  font-size:.875rem;line-height:1.55;color:var(--navy-900)}

.areas{border-top:1px solid var(--slate-300);margin-top:56px}
.area{display:grid;gap:8px;padding:30px 0;border-bottom:1px solid var(--slate-200);
  text-decoration:none;transition:background .15s}
@media(min-width:860px){
  .area{grid-template-columns:64px 1fr 1.25fr 26px;gap:32px;align-items:baseline;padding:32px 16px 32px 0}
  .area:hover{background:var(--paper-alt)}
}
.area__n{font-family:var(--mono);font-size:.8125rem;font-weight:500;color:var(--gold)}
.area__h{font-size:var(--step-2);font-weight:600;letter-spacing:-.02em}
.area__d{font-size:.9375rem;color:var(--slate-600);line-height:1.55}
.area__x{font-family:var(--mono);font-size:.9375rem;color:var(--slate-400);justify-self:end;transition:.15s}
.area:hover .area__x{color:var(--gold);transform:translateX(4px)}

/* --------------------------------------------------------- blog listing */
.filters{position:sticky;top:74px;z-index:30;border-block:1px solid var(--slate-200);
  background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(8px)}
.filters__in{display:flex;gap:8px;overflow-x:auto;padding-block:16px;scrollbar-width:none}
.filters__in::-webkit-scrollbar{display:none}
.filters a{flex:none;white-space:nowrap;text-decoration:none;padding:9px 16px;
  border:1px solid var(--slate-300);border-radius:var(--radius);font-size:.875rem;
  color:var(--slate-700);transition:.15s}
.filters a:hover{border-color:var(--navy-900);color:var(--navy-900)}
.filters a[aria-current]{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.filters .cnt{margin-left:7px;font-family:var(--mono);font-size:.6875rem;color:var(--slate-400)}
.filters a[aria-current] .cnt{color:rgba(255,255,255,.6)}

.list{padding-block:8px 96px}
.posts{border-top:1px solid var(--slate-300);margin-top:44px}
.post{display:grid;gap:9px;padding:26px 0;border-bottom:1px solid var(--slate-200);
  text-decoration:none;transition:background .15s}
@media(min-width:860px){
  .post{grid-template-columns:150px minmax(0,1fr) 150px;gap:34px;align-items:baseline;padding:28px 16px 28px 0}
  .post:hover{background:var(--paper-alt)}
}
.post__cat{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}
.post__b{display:grid;gap:8px}
.post__h{font-size:var(--step-1);font-weight:500;line-height:1.35;letter-spacing:-.015em}
.post__d{font-size:.9375rem;color:var(--slate-600);line-height:1.55;max-width:64ch}
.post__m{font-family:var(--mono);font-size:.75rem;color:var(--slate-400)}
@media(min-width:860px){.post__m{justify-self:end;text-align:right}}
.empty{padding-block:64px;color:var(--slate-600)}

.pager{padding-block:44px 0}
.pager .nav-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pager .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;padding-inline:14px;border:1px solid var(--slate-300);
  border-radius:var(--radius);font-family:var(--mono);font-size:.8125rem;
  text-decoration:none;color:var(--slate-600)}
.pager .page-numbers:hover{border-color:var(--navy-900);color:var(--navy-900)}
.pager .page-numbers.current{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* --------------------------------------------------------- article */
.single .head{padding-block:34px 44px;border-bottom:1px solid var(--slate-200)}
.single .head h1{font-size:var(--step-4);letter-spacing:-.03em;max-width:20ch}
.head__lede{margin-top:26px;font-size:var(--step-1);line-height:1.6;color:var(--slate-700);max-width:60ch}

.byline{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:34px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--slate-500)}
.byline b{font-weight:500;color:var(--navy-900)}

.wrap{display:grid;gap:52px;padding-block:56px 0}
@media(min-width:1040px){.wrap{grid-template-columns:220px minmax(0,1fr);gap:80px;align-items:start}}

.toc{display:none}
@media(min-width:1040px){.toc{display:block;position:sticky;top:106px}}
.toc[hidden]{display:none}
.toc h4{margin-bottom:18px;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500)}
.toc li{border-top:1px solid var(--slate-200)}
.toc a{display:block;padding:11px 0;font-size:.875rem;line-height:1.45;
  color:var(--slate-600);text-decoration:none}
.toc a:hover{color:var(--navy-900)}
.toc a.is-on{color:var(--navy-900);box-shadow:inset 2px 0 0 var(--gold);padding-left:12px}

.copy{max-width:var(--measure)}
.copy>*+*{margin-top:26px}
.copy h2{font-size:var(--step-2);margin-top:56px;scroll-margin-top:110px}
.copy h3{font-size:var(--step-1);margin-top:40px;scroll-margin-top:110px}
.copy p{color:var(--slate-700)}
.copy strong{color:var(--navy-900);font-weight:600}
.copy a{color:var(--navy-900);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.copy ul{display:grid;gap:12px}
.copy ul li{position:relative;padding-left:26px;color:var(--slate-700)}
.copy ul li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1.5px;background:var(--gold)}
.copy--page{max-width:none;padding-block:44px 0}

.copy blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 26px;margin:44px 0 0}
.copy blockquote p{font-size:var(--step-2);line-height:1.45;color:var(--navy-900);
  font-weight:500;letter-spacing:-.018em}

.copy table{border-collapse:collapse;width:100%;font-size:.9375rem}
.copy th{padding:0 16px 12px 0;border-bottom:1px solid var(--slate-300);text-align:left;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate-500)}
.copy td{padding:13px 16px 13px 0;border-bottom:1px solid var(--slate-200);color:var(--slate-700);
  font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- blocks */
.figure{border:1px solid var(--slate-200);background:var(--paper);padding:22px;margin-top:44px}
.figure__stamp{margin-top:14px;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--slate-400)}
.figure figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--slate-200);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--slate-500);line-height:1.6}

.scope{margin-top:56px;padding:26px 28px;background:var(--paper-alt);
  border:1px solid var(--slate-300);border-left:3px solid var(--gold)}
.scope h4{margin-bottom:12px;font-size:.9375rem}
.scope p{font-size:.9375rem;color:var(--slate-700);line-height:1.65}

.ftc-notice{padding:16px 18px;border:1px dashed var(--slate-300);color:var(--slate-600);font-size:.9375rem}

.related{margin-top:96px;padding-top:56px;border-top:1px solid var(--slate-200)}

/* --------------------------------------------------------- footer */
.foot{background:var(--navy-900);color:var(--slate-300);padding-block:72px 40px;margin-top:96px}
.foot__grid{display:grid;gap:44px}
@media(min-width:900px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{margin-bottom:20px;font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate-500)}
.foot li{padding-block:7px}
.foot a{color:var(--slate-300);text-decoration:none;font-size:.9375rem}
.foot a:hover{color:#fff}
.foot__note{max-width:42ch;font-size:.875rem;line-height:1.65;color:var(--slate-400)}
.disclaimer{margin-top:34px;padding:24px 26px;border:1px solid rgba(255,255,255,.14);
  font-size:.8125rem;line-height:1.7;color:var(--slate-400)}
.disclaimer strong{color:var(--gold-soft);font-weight:500}
.foot__bar{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;
  margin-top:56px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.8125rem;color:var(--slate-500)}

.searchform{display:flex;gap:10px}
.searchform input{flex:1;padding:13px 16px;border:1px solid var(--slate-300);
  border-radius:var(--radius);font-size:.9375rem}
.searchform input:focus{outline:0;border-color:var(--navy-900)}


/* --------------------------------------------------------- home page block layout
   Top-level blocks on the front page carry the .shell class themselves, so the only thing
   this rule owns is vertical rhythm and the full-bleed exception. */
.home>*{padding-block:56px}
@media(min-width:900px){.home>*{padding-block:88px}}
.home>*:first-child{padding-top:72px}
@media(min-width:900px){.home>*:first-child{padding-top:104px}}
.home>.alignfull{padding-inline:0}
.home .wp-block-columns{gap:52px}
@media(min-width:1000px){.home .wp-block-columns{gap:72px}}
.home .wp-block-buttons{margin-top:36px;gap:14px}
.home .lede{font-size:var(--step-1);line-height:1.6;color:var(--slate-700);max-width:54ch}
.home h2{font-size:var(--step-3);letter-spacing:-.026em;max-width:22ch}
.home p{color:var(--slate-700);max-width:var(--measure)}
.home .section--dark p{color:var(--slate-400)}
.home .section--dark h2{color:#fff}
.home .wp-block-list{display:grid;gap:12px;margin-top:26px;max-width:var(--measure)}
.home .wp-block-list li{position:relative;padding-left:26px}
.home .wp-block-list li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:1.5px;background:var(--gold)}
.home .section--dark .wp-block-list li::before{background:var(--gold-soft)}


/* --------------------------------------------------------- core block corrections
   Fixes for how WordPress actually renders core blocks, as opposed to how the static
   prototype rendered hand-written markup. */

/* Button block. The theme's button skin belongs on the anchor: core puts its own padding and
   pill radius there, so skinning the wrapper produced a box inside a box. */
.wp-block-button.btn{background:none;border:0;padding:0;display:inline-block}
.wp-block-button.btn .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border:1px solid transparent;border-radius:var(--radius);
  font-size:.9375rem;font-weight:500;line-height:1.2;text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;
}
.wp-block-button.btn--solid .wp-block-button__link{background:var(--navy-900);color:#fff}
.wp-block-button.btn--solid .wp-block-button__link:hover{background:var(--navy-700)}
.wp-block-button.btn--line .wp-block-button__link{background:transparent;border-color:var(--slate-300);color:var(--navy-900)}
.wp-block-button.btn--line .wp-block-button__link:hover{border-color:var(--navy-900);background:transparent}

/* Latest posts block, styled to match the hand-built listing rows. */
.wp-block-latest-posts{margin-top:44px;border-top:1px solid var(--slate-300)}
.wp-block-latest-posts li{padding:22px 0;border-bottom:1px solid var(--slate-200)}
.wp-block-latest-posts__post-title{display:block;font-size:var(--step-1);font-weight:500;
  line-height:1.35;letter-spacing:-.015em;color:var(--navy-900);text-decoration:none}
.wp-block-latest-posts__post-title:hover{box-shadow:inset 0 -2px 0 var(--gold)}
.wp-block-latest-posts__post-date{display:block;margin-top:8px;font-family:var(--mono);
  font-size:.75rem;color:var(--slate-400)}
.wp-block-latest-posts__post-excerpt{margin-top:8px;font-size:.9375rem;color:var(--slate-600);line-height:1.55}


/* --------------------------------------------------------- vertical rhythm corrections
   The hero group carries both .hero and .home>*:first-child, which stacked two sets of padding
   and opened roughly 250px of dead space above the headline. */
.home .hero{padding-block:0}
.home>*:first-child{padding-top:56px}
@media(min-width:900px){.home>*:first-child{padding-top:72px}}
.home>*:last-child{padding-bottom:96px}

/* The footer sets its own top margin for article templates. Page templates already end with
   padding, so the two were adding up. */
.foot{margin-top:0}
.page,.single{padding-bottom:80px}

/* Admin-bar offsets are handled by the token block at the end of this file. */

/* --------------------------------------------------------- custom logo */
.mark__img{max-height:40px;width:auto;object-fit:contain}


/* --------------------------------------------------------- spacing trim
   72px above the first block plus a 74px header read as a hole rather than as air. */
.home>*:first-child{padding-top:40px}
@media(min-width:900px){.home>*:first-child{padding-top:56px}}
.home .wp-block-columns{align-items:flex-start}


/* --------------------------------------------------------- header navigation, final word
   Written defensively and placed last on purpose. wp_nav_menu markup varies with the plugins a
   site ends up running, and a menu that silently stacks or grows markers is the one visual bug a
   visitor notices before anything else. */
.top .nav{display:none}
@media(min-width:1000px){.top .nav{display:block}}
.top .nav ul{display:flex;align-items:center;gap:34px;margin:0;padding:0;list-style:none}
.top .nav li{display:block;margin:0;padding:0;list-style:none}
.top .nav li::before,.top .nav li::after{content:none;display:none}
.top .nav li::marker{content:""}
.top .nav a{display:inline-block;white-space:nowrap}


/* --------------------------------------------------------- mobile drawer */
.drawer{
  position:fixed;left:0;right:0;top:74px;bottom:0;z-index:39;
  /* Must stay outside .top: see the note in header.php. */
  background:var(--paper);border-top:1px solid var(--slate-200);
  padding:8px 24px 40px;overflow-y:auto;overscroll-behavior:contain;
}
.drawer[hidden]{display:none}
@media(min-width:1000px){.drawer{display:none}}

.drawer__list{margin:0;padding:0;list-style:none}
.drawer__list li{list-style:none;border-bottom:1px solid var(--slate-200)}
.drawer__list li::before,.drawer__list li::after{content:none;display:none}
.drawer__list a{
  display:block;padding:20px 0;font-size:1.25rem;font-weight:500;
  letter-spacing:-.018em;text-decoration:none;color:var(--navy-900);
}
.drawer__list .current-menu-item>a{box-shadow:inset 3px 0 0 var(--gold);padding-left:14px}
.drawer__cta{margin-top:28px;width:100%}

/* Scroll lock while the panel is open. */
html.nav-open,html.nav-open body{overflow:hidden}

/* Burger turns into a close control without swapping icons. */
.burger span{transition:background .15s}
.burger span::before,.burger span::after{transition:transform .18s,top .18s}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}


/* --------------------------------------------------------- short-page footer
   On pages whose content is shorter than the viewport the document simply ended and the browser
   painted its own background underneath, which read as a white band below the footer. */
body{display:flex;flex-direction:column}
body>main{flex:1 0 auto}
body>.foot{flex:0 0 auto}


/* --------------------------------------------------------- latest articles block */
.latest .posts{margin-top:44px}
.latest__more{margin-top:34px}
.home .latest .post__d{max-width:58ch}


/* ==========================================================================
   Admin bar reconciliation

   Two separate offsets, because the toolbar behaves differently at each size and treating them
   as one number is what produced both the floating header and the white strip under the footer.

   --bar      how far a sticky element must sit below the top of the window. Non-zero only while
              the toolbar is genuinely fixed, which WordPress stops doing below 600px.
   --shift    the html margin WordPress adds unconditionally. It has to be subtracted from any
              100vh measurement or the document overflows the window by exactly that amount.
   ========================================================================== */
/* Static fallbacks for the no-JavaScript case. assets/js/nav.js overwrites both with measured
   values as an inline style on <body>, which wins over everything below. */
body{--bar:0px;--shift:0px}
body.admin-bar{--bar:32px;--shift:32px}
@media(max-width:782px){body.admin-bar{--bar:46px;--shift:46px}}
@media(max-width:600px){body.admin-bar{--bar:0px}}

body{min-height:calc(100vh - var(--shift))}
.top{top:var(--bar)}
.filters{top:calc(var(--bar) + 74px)}
.drawer{top:calc(var(--bar) + 74px)}
.toc{top:calc(var(--bar) + 106px)}


/* ==========================================================================
   Sample report

   Typeset as a document rather than as a web page. The visual grammar here is doing
   argumentative work: a reader deciding whether to pay for a report is really deciding
   whether this one looks like it was written by someone who does this for a living.
   ========================================================================== */
.doc-head{border:1px solid var(--slate-300);background:var(--paper-alt);padding:30px 32px;margin-top:8px}
.doc-head h2{margin-bottom:6px;font-size:var(--step-2)}
.doc-head .doc-ref{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.doc-head table{margin-top:22px;width:100%;border-collapse:collapse;font-size:.875rem}
.doc-head td{padding:9px 16px 9px 0;border-bottom:1px solid var(--slate-200);color:var(--slate-700);vertical-align:top}
.doc-head tr td:first-child{width:180px;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}

.doc-stamp{margin-top:26px;padding:16px 18px;border:1px dashed var(--slate-300);
  font-family:var(--mono);font-size:.75rem;line-height:1.7;color:var(--slate-600)}

.finding{border-left:3px solid var(--gold);padding:4px 0 4px 26px;margin-top:44px}
.finding h3{font-size:var(--step-1);margin:8px 0 12px}
.finding p{color:var(--slate-700)}
.finding .k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}

.copy--page h2{font-size:var(--step-2);margin-top:64px;padding-top:22px;border-top:1px solid var(--slate-300)}
.copy--page h3{margin-top:38px}
.copy--page table{margin-top:12px}
.copy--page td:not(:first-child),.copy--page th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}