/* ==========================================================================
   Balerion — Option D · Dark Premium
   The direction the client chose from the five design options, laid over the
   existing theme rather than replacing it: same templates, same content, same
   motion. Loaded last, so everything here is an override; removing the one
   enqueue line in inc/enqueue.php brings the previous look back.

   What changes: one darker ground top to bottom (the paper sections go), the
   display face opens up to its widest, footage shows as shot under a scrim
   instead of being graded down, buttons take the ember, cards round off, and
   What we do becomes a sticky heading with the six beside it.
   ========================================================================== */

:root {
  color-scheme: dark;
  --void:   #060504;
  --bg:     #0A0907;
  --bg-2:   #141210;
  --bg-3:   #1C1915;
  --line:   rgba(242, 238, 228, .12);
  --line-2: rgba(242, 238, 228, .24);
  --ink-3:  #8E8678;

  --display-wdth: 125;
  --t-h1:   clamp(40px, 6.1vw, 88px);
  --t-h2:   clamp(34px, 4.6vw, 64px);   /* section headings; Our services sits a step up */
  --sec-y:  clamp(80px, 10vw, 152px);
  --nav-h:  84px;
  --r:      16px;
  --r-lg:   20px;

  /* Dark text on the full ember measured 4.4:1 at its red end, short of AA
     for button text. Starting a step lighter than --red gives 5.8. */
  --ember-btn: linear-gradient(100deg, #F2553C 0%, var(--orange) 100%);
}
@media (max-width: 760px) { :root { --display-wdth: 88; --nav-h: 62px; } }
@media (max-width: 440px) { :root { --display-wdth: 80; } }

.display { line-height: .9; letter-spacing: -.025em; }
.ember {
  background: var(--ember); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  font-size: 14.5px; font-weight: 600; padding: 15px 26px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--ember-btn); color: #140A06; }
.btn--primary:hover {
  background: var(--ember-btn); color: #140A06;
  transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(248, 120, 67, .55);
}
.btn--ghost {
  background: rgba(242, 238, 228, .08); border-color: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(242, 238, 228, .16); border-color: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(242, 238, 228, .3);
}
/* .btn above outranks base.css's text button by load order, so restore it. */
.btn--text { padding: 0; font-size: 13.5px; }
.btn--text:hover { transform: none; box-shadow: none; }

/* ── Header ─────────────────────────────────────────────── */
.site-header.is-stuck { background: rgba(10, 9, 7, .78); }
.nav__links > a, .nav__megaTrigger { font-size: 14px; }
.nav__cta {
  font-size: 14px; padding: 12px 22px;
  background: rgba(242, 238, 228, .08); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nav__cta:hover {
  background: rgba(242, 238, 228, .16); color: var(--ink); transform: none;
  box-shadow: inset 0 0 0 1px rgba(242, 238, 228, .3);
}
.mega { background: rgba(10, 9, 7, .97); }

/* ── Hero ───────────────────────────────────────────────── */
/* About two thirds of the screen, so Our services shows without scrolling, and
   no stat band under it (client list #16, #25). */
.hero { min-height: 68svh; background: var(--bg); }
.hero__video { filter: none; }
.hero__scrim {
  background:
    linear-gradient(180deg, rgba(10,9,7,.7) 0%, rgba(10,9,7,.1) 28%, rgba(10,9,7,.35) 58%, rgba(10,9,7,.96) 100%),
    linear-gradient(90deg, rgba(10,9,7,.75) 0%, rgba(10,9,7,.15) 60%);
}
.hero__heat, .hero__rules { display: none; }
/* The lede and the buttons share the last row, as in the design. */
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px;
  align-content: end; align-items: end;
  padding-block: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) clamp(40px, 5vw, 72px);
}
/* Two lines on a desktop: "Transformation for" / "business impact". The first
   line measures 15.1x the font size in this face, so 5.8vw keeps it inside the
   column at every width down to the phone breakpoint, and 78px fits the 1208px
   column of a wide screen. Phones wrap to more lines, as they must. */
.hero h1 { grid-column: 1 / -1; margin-bottom: clamp(24px, 2.6vw, 40px); font-size: clamp(40px, 5.8vw, 78px); }
.hero__lede { max-width: 44ch; }
.hero__ctas { margin-top: 0; }
@media (max-width: 820px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: calc(var(--nav-h) + 56px) 48px; }
  .hero__ctas { margin-top: 24px; }
}

/* ── Section heads ──────────────────────────────────────── */
.sechead { margin-bottom: clamp(36px, 4vw, 60px); }
.sechead h2 { margin-top: 16px; }
.sechead .lede { margin-top: 18px; max-width: 42ch; }
.sechead--split .lede { margin-top: 0; }

/* ── Positioning statement ──────────────────────────────── */
.stance { padding-block: var(--sec-y); text-align: center; }
.stance__video { filter: none; }
.stance__scrim { background: rgba(10, 9, 7, .72); }
.stance__label { display: block; margin-bottom: 26px; }
.stance p {
  font-variation-settings: 'wdth' 110, 'wght' 640; text-transform: none;
  font-size: clamp(30px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -.025em;
  max-width: 20ch; margin-inline: auto;
}

/* ── Our services (home) and the stack drawing ──────────── */
.sys {
  background: radial-gradient(46% 62% at 24% 52%, rgba(248, 120, 67, .13), transparent 70%), var(--bg);
}
.sys__in {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.sys__art { display: block; }
.sys__art .stk { max-width: 440px; margin-inline: auto; }
/* "built to fit." stays on one line: it measures 8.1x the font size, and the
   text column is about 0.47vw wide beside the drawing, so 5.4vw (72px at most)
   holds it with room to spare. nowrap is the guarantee if a font swaps late. */
h2.sys__title { font-size: clamp(36px, 5.4vw, 72px); margin-top: 16px; }  /* h2.display sets the size too */
.sys__title .ember { white-space: nowrap; }
.sys .lede { margin-top: 22px; max-width: 46ch; }
.sys__list {
  list-style: none; margin: 30px 0 34px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
}
/* Each row lights its slab in the drawing (list #13, home.js). */
.sys__list li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 3px 10px; align-items: baseline;
  padding: 13px 10px; border-top: 1px solid var(--line); border-radius: 8px; cursor: default;
  transition: background var(--dur) var(--ease);
}
.sys__list li:hover, .sys__list li.on, .sys__list li:focus-visible { background: rgba(248, 120, 67, .12); outline: none; }
.sys__n { font-family: var(--f-mono); font-size: 12px; color: var(--orange); }
.sys__list b { font-weight: 600; font-size: 15px; transition: color var(--dur) var(--ease); }
.sys__list li:hover b, .sys__list li.on b, .sys__list li:focus-visible b { color: var(--orange); }
.sys__list small { grid-column: 2; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 980px) {
  .sys__in { grid-template-columns: minmax(0, 1fr); }
  .sys__art .stk { max-width: 300px; }
}
@media (max-width: 640px) { .sys__list { grid-template-columns: minmax(0, 1fr); } }

.stk { display: block; width: 100%; height: auto; overflow: visible; }
.stk .ly { transition: transform .5s var(--ease); }
.stk .ft { fill: #2A251F; fill-opacity: .85; stroke: rgba(242, 238, 228, .42); stroke-width: 1; }
.stk .fl { fill: #1C1915; stroke: rgba(242, 238, 228, .28); stroke-width: 1; }
.stk .fr { fill: #141210; stroke: rgba(242, 238, 228, .28); stroke-width: 1; }
.stk .det { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-linecap: round; }
.stk .det .dot, .stk .det .head { fill: var(--ink-3); stroke: none; }
.stk .det .body { fill: #3A342C; }
.stk .ft, .stk .fl, .stk .fr, .stk .det * { transition: fill .25s, stroke .25s; }
.stk .ly.on .ft { fill: var(--orange); fill-opacity: 1; stroke: #FFB089; }
.stk .ly.on .fl { fill: #C9301B; stroke: #7E1A0E; }
.stk .ly.on .fr { fill: #A82413; stroke: #7E1A0E; }
.stk .ly.on .det { stroke: #140A06; }
.stk .ly.on .det .dot, .stk .ly.on .det .head { fill: #140A06; }
.stk .ly.on .det .body { fill: #FFC2A8; }
.stk .lab { cursor: pointer; }
.stk .lab:focus { outline: none; }
.stk .lab:focus-visible .lt { text-decoration: underline; }
.stk .lead { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.stk .ln { font: 500 12px var(--f-mono); fill: var(--ink-3); }
.stk .lt { font: 600 17px var(--f-body); fill: var(--ink); }
.stk .ls { font: 400 12.5px var(--f-body); fill: var(--ink-3); }
.stk .ly.on .ln, .stk .ly.on .lt { fill: var(--orange); }
.stk .ly.on .lead { stroke: var(--orange); stroke-dasharray: none; }
@media (prefers-reduced-motion: reduce) { .stk .ly { transition: none; } }

/* ── Testimonials ───────────────────────────────────────── */
/* The client's logo and name come first, so the reader knows who is speaking
   before the quote (list #20). */
.quote {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-2);
}
.quote__org {
  gap: 14px; padding: 20px clamp(28px, 3vw, 44px);
  background: var(--void); border-top: 0; border-bottom: 1px solid var(--line);
}
.quote__org img { width: 48px; height: 48px; }
.quote__orgName { font-size: 16px; }
.quote__body { position: relative; padding: clamp(28px, 3vw, 44px); gap: 28px; }
.quote__body::before {
  content: "\201C"; position: absolute; top: 4px; right: 28px; pointer-events: none;
  font-family: var(--f-display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 110px; line-height: 1;
  background: var(--ember); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .85;
}
.quote blockquote {
  position: relative; max-width: 34ch;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -.005em;
}
.quote blockquote::before, .quote blockquote::after { content: none; }
@media (min-width: 641px) { .quote blockquote { padding-right: 64px; max-width: calc(34ch + 64px); } }
.quote__who { padding-top: 22px; border-top: 1px solid var(--line); }
.quote__who img { width: 52px; height: 52px; border-radius: 50%; border: 0; }
.quote__name { font-size: 14.5px; }
.quote__role { font-size: 13px; }
/* More than three: a row that scrolls sideways and snaps (list #21). */
.quotes__grid--slider {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.quotes__grid--slider .quote { flex: 0 0 min(560px, 86%); scroll-snap-align: start; }
/* Two to a phone screen (list #29). */
@media (max-width: 640px) {
  #quotes.sec { padding-block: 56px; }
  .quotes__grid { gap: 12px; }
  .quote__org { padding: 10px 14px; gap: 10px; }
  .quote__org img { width: 34px; height: 34px; }
  .quote__orgName { font-size: 14px; }
  .quote__orgInd { font-size: 11px; }
  .quote__body { padding: 12px 14px 14px; gap: 10px; }
  .quote__body::before { display: none; }
  .quote blockquote { font-size: 13px; line-height: 1.45; }
  .quote__who { padding-top: 10px; gap: 10px; }
  .quote__who img { width: 32px; height: 32px; }
  .quote__name { font-size: 13px; }
  .quote__role { font-size: 11.5px; }
}

/* ── Industries: two columns of numbered rows over the port ─ */
.inds__video { filter: none; }
.inds::before {
  background: linear-gradient(180deg, rgba(10,9,7,.94) 0%, rgba(10,9,7,.7) 40%, rgba(10,9,7,.94) 100%);
}
.inds__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px);
  border: 0; counter-reset: ind;
}
.ind {
  counter-increment: ind;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; align-content: start;
  background: none; box-shadow: none; border-top: 1px solid var(--line);
  padding: 24px 0; min-height: 0;
}
.inds.sec { padding-block: 72px; }
a.ind { color: inherit; }
.ind:hover { background: none; }
.ind h3 { transition: color var(--dur) var(--ease); }
a.ind:hover h3, a.ind:focus-visible h3 { color: var(--orange); }
.ind::after {
  content: counter(ind, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2; padding-top: 6px;
  font-family: var(--f-mono); font-size: 12px; color: var(--orange);
}
.ind__icon { display: none; }
.ind h3 {
  grid-column: 2; text-transform: none;
  font-variation-settings: 'wdth' 112, 'wght' 720;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.1; letter-spacing: -.015em;
}
.ind p { grid-column: 2; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
@media (max-width: 820px) { .inds__grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Insights ───────────────────────────────────────────── */
/* Four things per card - photo, category, headline, date (list #23). The
   laptop mockup the list asked for on the lead card was dropped on review. */
.post {
  border-radius: 18px; background: var(--bg-2);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.post:hover { border-color: rgba(248, 120, 67, .55); background: var(--bg-2); transform: translateY(-4px); }
.post__media { border-radius: 18px 18px 0 0; aspect-ratio: 16 / 10; }
.post__screen {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, #2A2520, #15110D);
}
.post__screen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.post:hover .post__screen img { transform: scale(1.04); }
.post__text { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__cat { color: var(--orange); }
.post h3 {
  font-family: var(--f-body); font-variation-settings: normal; text-transform: none;
  font-weight: 600; font-size: 19px; line-height: 1.26; letter-spacing: -.012em;
}
.post__date { margin-top: auto; padding-top: 10px; }
/* A phone: small photo left, text right, three to a screen (list #30). */
@media (max-width: 640px) {
  .posts__grid { gap: 10px; }
  .post { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 12px; }
  .post__media { margin: 0; border-radius: 10px; aspect-ratio: 1 / 1; }
  .post__text { gap: 6px; }
  .post h3 { font-size: 15px; line-height: 1.3; }
  .post__date { padding-top: 4px; }
}

/* ── Careers ────────────────────────────────────────────── */
.join { background: var(--bg); }
.lore { border-color: var(--line); border-radius: var(--r); }
.leader img { border-radius: 50%; }

/* ── Contact band ───────────────────────────────────────── */
.cta-band { padding-block: 64px; }
.cta-band__scrim {
  background: linear-gradient(90deg, rgba(10,9,7,.92) 0%, rgba(10,9,7,.7) 50%, rgba(10,9,7,.35) 100%);
}
.cta-band h2 { font-size: clamp(48px, 7.4vw, 120px); max-width: 12ch; }
.cta-band .lede { margin-top: 28px; max-width: 46ch; font-size: clamp(16px, 1.3vw, 18px); }
.cta-band__row { margin-top: 36px; }
.cta-band__mail {
  background: rgba(242, 238, 228, .08); box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 760px) { .cta-band__scrim { background: rgba(10, 9, 7, .72); } }

/* ── Forms, modal, contact page, inner heads ────────────── */
.modal__panel { border-radius: var(--r-lg); border: 1px solid var(--line-2); }
.field input, .field textarea, .field select { border-radius: 10px; }
.contact__form { border-radius: var(--r-lg); border-top: 1px solid var(--line); }
.contact__side { border-radius: var(--r-lg); overflow: hidden; }
.page-head { background: var(--bg); }
.page-head__rules { display: none; }
.cap-aside__card { border-radius: var(--r-lg); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer__col h4 { color: var(--ink); }

/* ── The system page ────────────────────────────────────── */
.sys-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(40px, 5vw, 72px)) 0 clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.sys-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(48% 60% at 74% 48%, rgba(248, 120, 67, .16), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(239, 42, 60, .1), transparent 70%);
}
.sys-hero__grid {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 48px); align-items: center;
}
.sys-hero h1 { font-size: clamp(38px, 4.4vw, 68px); margin-top: 20px; }
.sys-hero h1 span { display: block; }
.sys-hero .lede { margin-top: 26px; max-width: 44ch; }
.sys-hero .lede b {
  display: block; margin-bottom: 6px; color: var(--ink);
  font-size: clamp(18px, 1.5vw, 21px); font-weight: 600;
}
.sys-hero__crumb a { color: var(--ink-2); transition: color var(--dur) var(--ease); }
.sys-hero__crumb a:hover { color: var(--orange); }
.sys-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.sys-hero__hint { margin-top: 28px; }
@media (max-width: 980px) { .sys-hero__grid { grid-template-columns: minmax(0, 1fr); } }

.c-layers { border-top: 1px solid var(--line); }
.c-layer {
  display: grid; grid-template-columns: 150px 64px minmax(0, 1fr) minmax(0, .8fr);
  gap: 24px; align-items: center;
  padding: 24px 20px; border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.c-layer:hover, .c-layer.on { background: var(--bg-2); }
.c-layer .stk-mini { width: 150px; }
.c-layer__n {
  font-family: var(--f-display); font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 34px; letter-spacing: -.02em; color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.c-layer:hover .c-layer__n, .c-layer.on .c-layer__n { color: var(--orange); }
.c-layer h3 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; letter-spacing: -.015em; font-weight: 600; }
.c-layer p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.c-scope { display: flex; flex-wrap: wrap; gap: 6px; }
/* Example projects; each opens the contact form with its name filled in. */
.c-scope button {
  padding: 7px 13px; border-radius: var(--r-pill); text-align: left;
  box-shadow: inset 0 0 0 1px var(--line); background: rgba(242, 238, 228, .04);
  font-size: 12.5px; line-height: 1.3; color: var(--ink-2);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.c-scope button:hover, .c-scope button:focus-visible {
  color: var(--ink); background: rgba(248, 120, 67, .12); box-shadow: inset 0 0 0 1px var(--orange);
}
.c-layer h3 a { transition: color var(--dur) var(--ease); }
.c-layer h3 a:hover { color: var(--orange); }
@media (max-width: 980px) {
  .c-layer { grid-template-columns: 96px minmax(0, 1fr); gap: 8px 18px; padding: 22px 0; }
  .c-layer .stk-mini { width: 96px; grid-row: span 3; }
  .c-layer__n { font-size: 22px; }
}


/* Eight items in the header since The system joined it: below 1100px they
   started wrapping onto two lines, so the burger takes over earlier. */
.nav__links > a, .nav__megaTrigger { white-space: nowrap; }
@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .drawer { display: flex; }
}

/* ── Industries dropdown in the header (list #50) ───────── */
.nav__drop { position: relative; }
.nav__dropPanel {
  position: absolute; top: calc(100% + 14px); left: -14px; min-width: 260px;
  display: grid; padding: 8px; border-radius: 14px;
  background: rgba(10, 9, 7, .97); box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px -16px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
/* Bridges the gap so the pointer can cross into the panel without closing it. */
.nav__dropPanel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav__drop:hover .nav__dropPanel, .nav__drop:focus-within .nav__dropPanel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__drop:hover .nav__chev, .nav__drop:focus-within .nav__chev { transform: rotate(180deg); }
.nav__dropPanel a {
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--ink-2); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__dropPanel a:hover, .nav__dropPanel a:focus-visible { background: rgba(248, 120, 67, .12); color: var(--ink); }

/* ── Cookie banner: see-through (list #32) ──────────────── */
/* 30% ground plus blur; the whole site is dark now, so the copy keeps its
   contrast over every section it can sit on. */
.cookie {
  background: rgba(10, 9, 7, .3);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}

/* ── Card hover: light running round the border ─────────── */
/* Replaces the ember bar that slid across the top of an Insights card and the
   plain orange outline: on hover a short arc of light travels round the edge
   on a loop. A conic gradient turns behind a 1.5px ring cut out with a mask;
   @property lets the angle animate. Same on the listing and the home cards. */
@property --orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --orbit: 360deg; } }

.articles { background: none; border: 0; gap: 16px; }
.card::before { display: none; }
.post { position: relative; }
.post:hover { border-color: var(--line); }
.post::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--orbit),
    transparent 0deg 230deg, rgba(248, 120, 67, .35) 280deg, #F87843 330deg, #FFE2CC 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 6px rgba(248, 120, 67, .6));
  opacity: 0; transition: opacity .35s var(--ease);
}
.post:hover::after, .post:focus-within::after { opacity: 1; animation: orbit 2.6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .post:hover::after, .post:focus-within::after { animation: none; background: var(--orange); }
}

/* ── Insights pagination ────────────────────────────────── */
.pager__pages a, .pager__pages span { border-radius: var(--r-pill); padding: 0 14px; }
.pager__pages [aria-current="page"] { background: var(--ember-btn); border-color: transparent; color: #140A06; font-weight: 600; }
.pager__pages .dots { border-color: transparent; }

/* ── Insights listing cards: the home card layout ───────── */
/* card-insight.php now carries the home card's markup; these settle the old
   .card box rules from blog.css onto it. */
.card { padding: 24px; gap: 13px; min-height: 0; }
.card h3 a::after { content: none; }
@media (max-width: 640px) { .card { padding: 12px; } }

/* ── Single article: cover image and body columns ───────── */
/* The featured image under the article head. */
.article-cover {
  margin: clamp(32px, 4vw, 56px) 0 0; aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: var(--r-lg); background: var(--bg-2);
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .article-cover { aspect-ratio: 16 / 10; border-radius: var(--r); } }
/* blog.js hides the TOC when an article has no subheadings, and the body then
   slid into the TOC's narrow first column. Pin each to its own column. */
@media (min-width: 861px) { .article-grid .prose { grid-column: 2; } }
@media (min-width: 1101px) { .article-grid .aside { grid-column: 3; } }

/* Insights listing (and its filtered and search views): half the usual
   section padding round the card grid. */
body:is(.blog, .archive, .search) #main > .sec { padding-block: calc(var(--sec-y) / 2); }

/* ── User manual page (templates/template-manual.php) ───── */
/* The display face has no Thai glyphs, so the Thai title uses the text stack. */
.man-head h1 {
  font-family: var(--f-body), "Noto Sans Thai", "Leelawadee UI", "Sukhumvit Set", sans-serif;
  font-variation-settings: normal; font-weight: 700; text-transform: none; letter-spacing: -.01em; line-height: 1.15;
  font-size: clamp(34px, 4.4vw, 60px);
}
.man, .man-head { font-family: var(--f-body), "Noto Sans Thai", "Leelawadee UI", "Sukhumvit Set", sans-serif; }
.man {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 72px); align-items: start;
}
.man-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.man-toc h2 { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.man-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.man-toc li { counter-increment: toc; }
.man-toc a {
  display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2); transition: color var(--dur) var(--ease);
}
.man-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-mono); font-size: 11px; color: var(--orange); padding-top: 3px; }
.man-toc a:hover { color: var(--ink); }
.man-body { max-width: 860px; }
.man-body section { padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.man-body section:last-child { border-bottom: 0; }
.man-n { font-family: var(--f-mono); font-size: 12px; color: var(--orange); letter-spacing: .1em; }
.man-body h2 { font-family: var(--f-body); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.015em; margin: 6px 0 18px; }
.man-body h3 { font-family: var(--f-body); font-weight: 600; font-size: 18px; color: var(--ink); margin: 28px 0 4px; }
.man-body p, .man-body li, .man-body dd { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.man-body p + p { margin-top: 12px; }
.man-body b { color: var(--ink); font-weight: 600; }
.man-body a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.man-body code {
  font-family: var(--f-mono); font-size: .86em; padding: 2px 6px; border-radius: 6px;
  background: var(--bg-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
}
.man-steps { margin: 16px 0; padding-left: 0; list-style: none; counter-reset: step; }
.man-steps > li { counter-increment: step; position: relative; padding: 10px 0 10px 44px; border-top: 1px solid var(--line); }
.man-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; color: #140A06; background: var(--ember-btn);
}
.man-steps ul { margin: 8px 0 0; padding-left: 18px; }
.man-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.man-table th, .man-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.man-table th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.man-shot { margin: 24px 0; }
.man-shot img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -24px rgba(0, 0, 0, .7); }
.man-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.man-note {
  margin: 20px 0; padding: 16px 18px; border-radius: 12px; font-size: 15px; line-height: 1.65; color: var(--ink-2);
  background: rgba(248, 120, 67, .08); box-shadow: inset 3px 0 0 var(--orange);
}
.man-note--warn { background: rgba(239, 42, 60, .1); box-shadow: inset 3px 0 0 var(--red); }
.man-faq dt { margin-top: 18px; font-weight: 600; color: var(--ink); }
.man-faq dd { margin: 4px 0 0; }
@media (max-width: 900px) {
  .man { grid-template-columns: minmax(0, 1fr); }
  .man-toc { position: static; }
  .man-table { display: block; overflow-x: auto; }
}