/*
 * HTT Minimal — design system foundation
 * Source: new-tt-design_handoff_htt_minimal / BUILD-SPEC.md §1–§5
 *
 * NAMESPACED ON PURPOSE. Every rule sits under .htt-min because the live site
 * already owns these names: .htt-card (123 rules), .htt-btn (12), .htt-table (6),
 * .htt-chip (3), .htt-gate (2), .htt-meter (2), plus the custom properties
 * --htt-ink (41 uses), --htt-card (22), --htt-muted (4), --htt-rule (3), --htt-s5/--htt-s1.
 * Declaring any of those globally would restyle the existing Kent Rayo pages.
 *
 * Usage: put `htt-min` in the CSS Classes field of the outermost Elementor
 * container of a screen built to this design. The handoff's markup then pastes
 * in verbatim — class names inside are exactly as BUILD-SPEC writes them.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens  (BUILD-SPEC §1) — scoped, not :root
 * ------------------------------------------------------------------ */
.htt-min{
  --htt-ink:        #2B3A5C;  /* headings, body ink, dark bands */
  --htt-muted:      #5C6883;  /* secondary text, labels */
  --htt-accent:     #4C63A0;  /* filled buttons, ivory text on top */
  --htt-accent-hi:  #6B85C8;  /* button hover, widget card border */
  --htt-sky:        #C5D2F0;  /* eyebrows on navy */
  --htt-ivory:      #EFEEEA;  /* page background, text on navy */
  --htt-card:       #F7F6F2;  /* panels, inputs, code blocks */
  --htt-image:      #E4E3DD;  /* behind photography */
  --htt-rule:       #DAD9D2;  /* every hairline */
  --htt-track:      #E2E1DA;  /* behind every bar fill */
  --htt-grey:       #A8AFC0;  /* locked bars */

  --htt-s5: #26694A;
  --htt-s4: #47702F;
  --htt-s3: #7E5F10;
  --htt-s2: #99511F;
  --htt-s1: #8E2F27;
}

/* ------------------------------------------------------------------ *
 * 1b. Base — the shell. No border-radius anywhere in this system.
 * ------------------------------------------------------------------ */
.htt-min{
  background:var(--htt-ivory);
  color:var(--htt-ink);
  font-family:'Jost',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.htt-min a{color:var(--htt-ink);text-decoration:none}
.htt-min a:hover{color:var(--htt-ink);opacity:.6}
.htt-min *,
.htt-min *::before,
.htt-min *::after{border-radius:0}
/* The theme layer sets a bare h1{color:var(--htt-red)}. State the colour here
 * or every heading in this design inherits the Kent Rayo red. */
.htt-min h1,.htt-min h2,.htt-min h3,.htt-min h4,.htt-min h5,.htt-min h6{
  font-family:'Aboreto',serif;font-weight:400;margin:0;color:var(--htt-ink)}
.htt-min h1{font-size:44px;line-height:1.06}
.htt-min h2{font-size:26px;line-height:1.16}
.htt-min p{line-height:1.7}

/* The page ground behind the shell. Without this the Kent Rayo paper (#F7F1E1)
 * shows around and below the frame. Applied only where the body carries the
 * flag, so no other page on the site is touched. */
body.htt-min-page{background:#EFEEEA}
body.htt-min-page .elementor-kit{background:#EFEEEA}

/* The whole screen sits in a single 1px hairline. */
.htt-min .htt-shell{
  max-width:1240px;margin:0 auto;padding:0 24px 80px}
.htt-min .htt-frame{
  border:1px solid var(--htt-rule);background:var(--htt-ivory)}
.htt-min .htt-section{padding:26px}
.htt-min .htt-rule{border:0;border-top:1px solid var(--htt-rule);margin:0}

/* ------------------------------------------------------------------ *
 * 2. Primitives  (BUILD-SPEC §2)
 * ------------------------------------------------------------------ */

/* 2.1 Eyebrow */
.htt-min .htt-eyebrow{
  font:600 11px/1.2 'Jost',sans-serif;letter-spacing:.22em;
  text-transform:uppercase;color:var(--htt-muted)}

/* 2.2 Score chip — needs: score */
.htt-min .htt-chip{
  display:inline-block;padding:4px 8px;font:600 12px/1 'Jost',sans-serif;
  color:var(--htt-ivory);white-space:nowrap}
.htt-min .htt-chip--sm{padding:3px 6px;font-size:10.5px}

/* 2.3 Meter — needs: percentage, score */
.htt-min .htt-meter{display:block;height:10px;background:var(--htt-track)}
.htt-min .htt-meter > i{display:block;height:100%}
/* Heights by context: 8px cards, 9px widgets, 10px tables, 12–14px worked example. */
.htt-min .htt-meter--card{height:8px}
.htt-min .htt-meter--widget{height:9px}
.htt-min .htt-meter--lg{height:14px}

/* 2.4 Locked bar — the gated placeholder */
.htt-min .htt-locked{
  width:100%;
  background:repeating-linear-gradient(90deg,var(--htt-grey) 0 5px,var(--htt-track) 5px 9px)}

/* 2.5 Blurred row — real values, blurred. Never fabricated. */
.htt-min .htt-blur{opacity:.42}
.htt-min .htt-blur .htt-blur-text{filter:blur(2.6px)}

/* 2.6 Buttons */
.htt-min .htt-btn{
  display:inline-block;padding:13px 20px;background:var(--htt-accent);
  color:var(--htt-ivory);font:700 11.5px/1 'Jost',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;border:0;cursor:pointer;text-align:center}
.htt-min .htt-btn:hover{background:var(--htt-accent-hi);color:var(--htt-ivory);opacity:1}
.htt-min .htt-btn--ghost{
  background:transparent;color:var(--htt-ink);border:1px solid var(--htt-ink)}
.htt-min .htt-btn--ghost:hover{background:var(--htt-card);color:var(--htt-ink)}
.htt-min .htt-btn--dark{background:var(--htt-ink);color:var(--htt-ivory)}
.htt-min .htt-btn--dark:hover{background:var(--htt-accent);color:var(--htt-ivory)}
.htt-min .htt-link{
  display:inline-block;font:600 11px/1 'Jost',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;border-bottom:1px solid var(--htt-ink);white-space:nowrap}

/* 2.7 Input — Aboreto in the field is deliberate: search reads as display type. */
.htt-min .htt-input{
  border:1.5px solid var(--htt-ink);background:var(--htt-card);
  padding:13px 15px;font:400 15px/1.2 'Aboreto',serif;color:var(--htt-ink)}
.htt-min .htt-input::placeholder{color:var(--htt-muted);opacity:1}
.htt-min .htt-input:focus{outline:2px solid var(--htt-accent);outline-offset:-2px}

/* 2.8 Data table */
.htt-min .htt-table{border-top:1.5px solid var(--htt-ink)}
.htt-min .htt-thead{
  font:600 11px/1.2 'Jost',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--htt-muted);padding:10px 0;
  border-bottom:1px solid var(--htt-rule)}
.htt-min .htt-row{
  padding:12px 0;border-bottom:1px solid var(--htt-rule);font-size:13.5px}
.htt-min .htt-row:hover{background:var(--htt-card)}
.htt-min .htt-thead,
.htt-min .htt-row{display:grid;gap:16px;align-items:baseline}
/* Numeric columns always end right, tabular. */
.htt-min .htt-thead > .num,
.htt-min .htt-row > .num{text-align:right;font-variant-numeric:tabular-nums}

/* 2.9 Key–value row (summaries, specs, settings) */
.htt-min .htt-kv{
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:18px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--htt-rule)}
.htt-min .htt-kv > .k{
  font:600 11px/1.2 'Jost',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--htt-muted)}
.htt-min .htt-kv > .v{font-size:14.5px;line-height:1.6}

/* 2.10 Listing card — needs: image, name, score, sub-line, percentage */
.htt-min .htt-card{
  display:block;padding:18px;border-right:1px solid var(--htt-rule);
  border-bottom:1px solid var(--htt-rule)}
.htt-min .htt-card:hover{background:var(--htt-card);opacity:1}
.htt-min .htt-card-img{
  position:relative;display:block;aspect-ratio:4/5;background:var(--htt-image);
  margin-bottom:14px}
.htt-min .htt-card-img > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.htt-min .htt-brand{
  font:400 14px/1.2 'Aboreto',serif;letter-spacing:.04em;text-transform:uppercase}
.htt-min .htt-card-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.htt-min .htt-card-sub{
  display:block;font-size:11px;color:var(--htt-muted);margin:5px 0 12px}
.htt-min .htt-card-foot{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--htt-muted);margin-top:7px}
/* Grid: 4-across on archives, 3-across on taxonomy and places. */
.htt-min .htt-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.htt-min .htt-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}

/* 2.11 Horizontal rail (tabs, chips, mock slides) */
.htt-min .htt-rail{display:flex;overflow-x:auto;scrollbar-width:none}
.htt-min .htt-rail::-webkit-scrollbar{display:none}
.htt-min .htt-tab{
  flex:none;padding:14px 18px;border-right:1px solid var(--htt-rule);
  font:500 12px/1.2 'Jost',sans-serif;display:inline-flex;gap:7px;align-items:baseline}
.htt-min .htt-tab[aria-current]{background:var(--htt-sky)}
.htt-min .htt-tab:hover{background:var(--htt-card);opacity:1}
.htt-min .htt-tab b{font:600 11px/1 'Jost',sans-serif;color:var(--htt-muted)}
/* Slide rails */
.htt-min .htt-rail--snap{scroll-snap-type:x mandatory}
.htt-min .htt-slide{flex:0 0 720px;scroll-snap-align:start}

/* 2.12 Gate block — the paywall */
.htt-min .htt-gate{
  display:grid;grid-template-columns:1.1fr 1fr;background:var(--htt-card);
  border-bottom:1px solid var(--htt-rule)}
.htt-min .htt-gate-main{
  padding:30px 26px;border-right:1px solid var(--htt-rule);min-width:0}
.htt-min .htt-gate-side{padding:30px 26px;min-width:0}
.htt-min .htt-gate-head{
  font:400 26px/1.16 'Aboreto',serif;margin:14px 0 12px;max-width:24ch}
.htt-min .htt-gate-copy{
  font-size:14px;line-height:1.7;color:var(--htt-muted);margin:0 0 20px;max-width:56ch}
.htt-min .htt-gate-cta{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--htt-muted)}

/* 2.13 Navy band */
.htt-min .htt-band{background:var(--htt-ink);color:var(--htt-ivory)}
.htt-min .htt-band a{color:var(--htt-ivory)}
.htt-min .htt-band h1,.htt-min .htt-band h2,
.htt-min .htt-band h3,.htt-min .htt-band h4{color:var(--htt-ivory)}
.htt-min .htt-band .htt-eyebrow{color:var(--htt-sky)}
.htt-min .htt-band .rule{border-color:rgba(239,238,234,.22)}
/* Values inside a navy band use sky, never --htt-accent-hi. */
.htt-min .htt-band .htt-val{color:var(--htt-sky)}
.htt-min .htt-band .htt-btn--ghost{color:var(--htt-ivory);border-color:var(--htt-ivory)}
.htt-min .htt-band .htt-btn--ghost:hover{background:rgba(239,238,234,.1);color:var(--htt-ivory)}

/* 2.14 Verification stamp — wording is always "Verified Throne Standard" */
.htt-min .htt-stamp{
  display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--htt-muted)}
.htt-min .htt-stamp img{
  width:13px;height:13px;flex:none;display:block;object-fit:contain}

/* ------------------------------------------------------------------ *
 * 3. The embeddable widget  (BUILD-SPEC §3)
 * ------------------------------------------------------------------ */
.htt-min .htt-badge{
  display:inline-flex;align-items:center;gap:10px;min-width:220px;
  border:1.5px solid var(--htt-accent-hi);background:var(--htt-card);padding:10px 12px}
.htt-min .htt-badge b{
  display:block;font:600 12px/1.3 'Jost',sans-serif;white-space:nowrap}

.htt-min .htt-scorecard{position:relative;width:320px;height:150px}
.htt-min .htt-scorecard > .face{
  position:absolute;inset:0;background:var(--htt-card);
  border:1.5px solid var(--htt-accent-hi);padding:14px 16px;
  animation:htt-cycle 9s ease-in-out infinite}
.htt-min .htt-scorecard > .face:nth-child(2){animation-delay:3s}
.htt-min .htt-scorecard > .face:nth-child(3){animation-delay:6s}
.htt-min .htt-scorecard:hover .face{animation-play-state:paused}

/* ------------------------------------------------------------------ *
 * 4. Animation  (BUILD-SPEC §4)
 * ------------------------------------------------------------------ */
@keyframes htt-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes htt-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes htt-cycle{0%,26%{opacity:1}33%,93%{opacity:0}100%{opacity:1}}

.htt-min .htt-anim-rise{
  animation:htt-rise .7s ease-out both;transform-origin:bottom}
.htt-min .htt-anim-fill{
  animation:htt-fill 2.4s ease-out both;transform-origin:left}

@media (prefers-reduced-motion:reduce){
  .htt-min [data-anim],
  .htt-min .htt-anim-rise,
  .htt-min .htt-anim-fill{animation:none!important}
  .htt-min .htt-scorecard .face{animation:none}
  .htt-min .htt-scorecard .face:not(:first-child){display:none}
}

/* ------------------------------------------------------------------ *
 * 5. Responsive  (BUILD-SPEC §5)
 * ------------------------------------------------------------------ */
@media (max-width:900px){
  .htt-min [data-g="split"],
  .htt-min [data-g="two"],
  .htt-min [data-g="article"],
  .htt-min [data-g="card"],
  .htt-min [data-g="spec"]{grid-template-columns:1fr!important}
  .htt-min [data-g="quad"],
  .htt-min [data-g="cards"],
  .htt-min [data-g="foot"]{grid-template-columns:1fr 1fr!important}
  .htt-min [data-g="article"] > div,
  .htt-min [data-g="split"] > div{border-right:0!important;border-left:0!important}
  .htt-min [data-g="spec"]{gap:4px!important}
  .htt-min [data-g="spec"] > span:last-child{text-align:left!important}
  .htt-min h1{font-size:32px!important}
  .htt-min .htt-gate{grid-template-columns:1fr}
  .htt-min .htt-gate-main{border-right:0;border-bottom:1px solid var(--htt-rule)}
  .htt-min .htt-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .htt-min .htt-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .htt-min .htt-slide{flex:0 0 86vw}
}
@media (max-width:560px){
  .htt-min [data-g="quad"],
  .htt-min [data-g="cards"],
  .htt-min [data-g="foot"]{grid-template-columns:1fr!important}
  .htt-min .htt-grid-4,
  .htt-min .htt-grid-3{grid-template-columns:1fr}
  .htt-min .htt-scorecard{width:100%}
}

/* ------------------------------------------------------------------ *
 * 6. Chrome — masthead, mega panels, footer  (BUILD-SPEC §6)
 * ------------------------------------------------------------------ */
.htt-min .htt-mast{
  position:relative;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:18px 26px;
  border-bottom:1px solid var(--htt-rule);flex-wrap:wrap}
.htt-min .htt-mast-brand{
  display:flex;align-items:center;gap:11px;
  font-family:'Aboreto',serif;font-size:17px;letter-spacing:.14em}
.htt-min .htt-mast-brand img{width:30px;height:30px;flex:none;display:block;object-fit:contain}
.htt-min .htt-mast-nav{
  display:flex;align-items:center;gap:24px;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.htt-min .htt-nav-item{display:inline-block}
.htt-min .htt-nav-trig{
  background:none;border:0;padding:0;cursor:pointer;color:var(--htt-ink);
  font:600 11px/1 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.htt-min .htt-nav-trig:hover{opacity:.6}
.htt-min .htt-mast-link:hover,
.htt-min .htt-mast-tier:hover{opacity:.6}
.htt-min .htt-mast-tier{
  border:1px solid var(--htt-rule);padding:9px 12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em}

/* Mega panel: full width, anchored to the masthead row. */
.htt-min .htt-nav-panel{
  display:grid;position:absolute;top:100%;left:0;right:auto;width:100%;z-index:40;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  background:var(--htt-ivory);border:1px solid var(--htt-ink);
  text-transform:none;letter-spacing:0;font-weight:400}
.htt-min .htt-nav-panel[hidden]{display:none}
.htt-min .htt-nav-col{
  border-right:1px solid var(--htt-rule);padding:18px 20px 20px;min-width:0}
.htt-min .htt-nav-col:last-child{border-right:0}
.htt-min .htt-nav-h{
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--htt-ink)}
.htt-min .htt-nav-c{font-size:11px;color:var(--htt-muted);margin-top:5px}
.htt-min .htt-nav-links{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.htt-min .htt-nav-links a{font-size:12.5px;line-height:1.3}

/* Footer */
.htt-min .htt-foot{
  border-top:1px solid var(--htt-rule);display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr}
.htt-min .htt-foot-brand{padding:26px;border-right:1px solid var(--htt-rule)}
.htt-min .htt-foot-mark{display:flex;align-items:center;gap:10px}
.htt-min .htt-foot-mark img{width:34px;height:34px;flex:none;display:block;object-fit:contain}
.htt-min .htt-foot-mark span{font-family:'Aboreto',serif;font-size:14px;letter-spacing:.14em}
.htt-min .htt-foot-copy{font-size:11.5px;color:#8A93A8;line-height:1.7;margin-top:12px}
.htt-min .htt-foot-col{
  padding:26px;border-right:1px solid var(--htt-rule);font-size:12px;
  display:flex;flex-direction:column;gap:9px}
.htt-min .htt-foot-col:last-child{border-right:0}
.htt-min .htt-foot-h{
  font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--htt-muted);margin-bottom:3px}

/* Mega panels are hidden below 900px; the masthead falls back to a link list. */
@media (max-width:900px){
  .htt-min .htt-nav-panel{display:none!important}
  .htt-min .htt-mast{gap:14px}
  .htt-min .htt-mast-nav{gap:14px;flex-wrap:wrap;white-space:normal}
}

/* Global chrome: the masthead and footer carry their own hairline, so the
 * shell here is width and gutter only — the 80px page-bottom padding belongs
 * to a screen, not to the header. */
.htt-min.htt-shell--chrome{padding:0 24px}

/* Pagination */
.htt-min .htt-pager .page-numbers{
  display:inline-block;padding:9px 13px;border:1px solid var(--htt-rule);
  font:600 11.5px/1 'Jost',sans-serif;letter-spacing:.1em;text-transform:uppercase}
.htt-min .htt-pager .page-numbers:hover{background:var(--htt-card);opacity:1}
.htt-min .htt-pager .page-numbers.current{
  background:var(--htt-ink);color:var(--htt-ivory);border-color:var(--htt-ink)}
.htt-min .htt-pager .page-numbers.dots{border:0;padding:9px 4px}