/* Answer pages. Inherits the site's tokens from style.css; only what the
   article template needs lives here. Serif throughout, like the rest of the
   site -- these pages should read as Ocean Ridge, not as a blog bolted on. */

.ia-body{background:var(--cream-warm,#FAF6EE);color:var(--charcoal,#1A2332)}

.ia{max-width:43rem;margin:0 auto;padding:2.5rem 1.25rem 5rem;
  font-family:var(--font-body,'Newsreader',Georgia,serif);font-size:1.125rem;line-height:1.72}
.ia-crumb{font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--charcoal-muted,#6B7689);margin-bottom:2rem}
.ia-crumb a{color:var(--navy,#1B3A5C);text-decoration:none}
.ia-crumb a:hover{text-decoration:underline}
.ia-crumb span{margin:0 .35rem}

.ia-head{margin-bottom:1.5rem}
.ia-tax{display:flex;flex-wrap:wrap;gap:.45rem;margin:.85rem 0 0}
.ia-tax a{font-size:.75rem;text-decoration:none;border-radius:999px;padding:.2rem .7rem;
  border:1px solid var(--cream-deep,#E1D5BD);color:var(--charcoal-soft,#3A4759)}
.ia-tax a:hover{border-color:var(--navy,#1B3A5C);color:var(--navy,#1B3A5C)}
.ia-tax .ia-cat{background:var(--navy,#1B3A5C);border-color:var(--navy,#1B3A5C);color:#fff}
.ia-tax .ia-cat:hover{color:#fff;opacity:.9}
.ia-byline{font-size:.9375rem;color:var(--charcoal-muted,#6B7689);margin:0 0 .75rem}
.ia-byline a{color:var(--navy,#1B3A5C);text-decoration:none;font-weight:600}
.ia-byline a:hover{text-decoration:underline}
.ia h1{font-family:var(--font-display,'Spectral',Georgia,serif);font-weight:600;
  font-size:clamp(1.9rem,4.6vw,2.75rem);line-height:1.18;letter-spacing:-.015em;
  color:var(--navy-ink,#0E1D2F);margin:0;text-wrap:balance}

/* The block AI engines lift. First thing after the H1, nothing above it. */
.ia-short{font-size:1.3125rem;line-height:1.6;color:var(--navy-deep,#13283F);
  font-weight:500;margin:0 0 1.5rem;padding-left:1.1rem;
  border-left:3px solid var(--gold,#E8B84A)}
.ia-tax{font-size:.9375rem;color:var(--charcoal-soft,#3A4759);background:rgba(232,184,74,.12);
  border:1px solid rgba(232,184,74,.4);border-radius:4px;padding:.6rem .85rem;margin:0 0 1.5rem}

.ia-hero{margin:0 0 2rem}
.ia-hero img{width:100%;height:auto;display:block;border-radius:4px}

.ia h2{font-family:var(--font-display,'Spectral',Georgia,serif);font-weight:600;
  font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.3;letter-spacing:-.01em;
  color:var(--navy,#1B3A5C);margin:2.5rem 0 .85rem;text-wrap:balance}
.ia p{margin:0 0 1.15rem}
.ia a{color:var(--navy,#1B3A5C)}
.ia ol,.ia ul{margin:0 0 1.15rem;padding-left:1.35rem}
.ia li{margin-bottom:.45rem}
.ia strong{font-weight:600;color:var(--navy-ink,#0E1D2F)}

/* Tables are cited about 2.5x as often as the same data in prose, so they
   need to survive a phone. Below 34rem each row becomes its own block. */
.ia table{width:100%;border-collapse:collapse;margin:1.35rem 0;font-size:1rem}
.ia thead th{background:var(--navy,#1B3A5C);color:#fff;text-align:left;
  font-family:var(--font-body,'Newsreader',Georgia,serif);font-weight:600;
  font-size:.9375rem;padding:.6rem .75rem}
.ia tbody td{border:1px solid var(--cream-deep,#E1D5BD);padding:.6rem .75rem;vertical-align:top}
.ia tbody tr:nth-child(even) td{background:var(--cream,#F5EFE6)}

.ia-stance{background:var(--cream,#F5EFE6);border-radius:6px;padding:1.4rem 1.5rem;margin:2.5rem 0}
.ia-stance h2{margin-top:0}
.ia-limits h2{color:var(--charcoal-soft,#3A4759)}

.ia-faq details{border-bottom:1px solid var(--cream-deep,#E1D5BD);padding:.9rem 0}
.ia-faq details:first-of-type{border-top:1px solid var(--cream-deep,#E1D5BD)}
.ia-faq summary{cursor:pointer;font-weight:600;color:var(--navy,#1B3A5C);
  font-size:1.0625rem;list-style:none;position:relative;padding-right:1.5rem}
.ia-faq summary::-webkit-details-marker{display:none}
.ia-faq summary:after{content:'+';position:absolute;right:0;top:-.1rem;
  font-size:1.3rem;color:var(--gold-deep,#C9982B);line-height:1}
.ia-faq details[open] summary:after{content:'\2212'}
.ia-faq details p{margin:.6rem 0 0;color:var(--charcoal-soft,#3A4759)}

.ia-close{margin:2.5rem 0 0;padding:1.1rem 1.3rem;background:var(--navy,#1B3A5C);
  color:var(--cream-warm,#FAF6EE);border-radius:6px;font-size:1.0625rem}
.ia-close a{color:var(--gold-soft,#F4D589);font-weight:600}

.ia-foot{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--cream-deep,#E1D5BD);
  font-size:.875rem;color:var(--charcoal-muted,#6B7689)}
.ia-dates{margin:0 0 1.25rem}
.ia-sibs p{font-weight:600;color:var(--navy,#1B3A5C);margin:0 0 .4rem;font-size:.9375rem}
.ia-sibs ul{list-style:none;padding:0;margin:0 0 1.25rem}
.ia-sibs li{margin-bottom:.35rem}
.ia-sibs a{color:var(--navy,#1B3A5C)}
.ia-disc{font-size:.75rem;line-height:1.55;color:var(--charcoal-muted,#6B7689);margin:0}

/* ---------- index ---------- */
.ic{max-width:70rem;margin:0 auto;padding:2.5rem 1.25rem 5rem;
  font-family:var(--font-body,'Newsreader',Georgia,serif)}
.ic-head{max-width:40rem;margin-bottom:2rem}
.ic-head h1{font-family:var(--font-display,'Spectral',Georgia,serif);font-weight:600;
  font-size:clamp(2.1rem,5vw,3rem);color:var(--navy-ink,#0E1D2F);margin:0 0 .6rem;letter-spacing:-.015em}
.ic-head p{font-size:1.1875rem;color:var(--charcoal-soft,#3A4759);margin:0;line-height:1.6}
.ic-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}
.ic-filters-tag{margin-bottom:2rem}
.ic-fl{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--charcoal-muted,#6B7689);margin:0 .35rem 0 0}
.ic-f{font:inherit;font-size:.875rem;cursor:pointer;border:1px solid var(--cream-deep,#E1D5BD);
  background:#fff;color:var(--charcoal-soft,#3A4759);border-radius:999px;padding:.45rem .9rem}
.ic-f span{color:var(--charcoal-muted,#6B7689);margin-left:.3rem;font-size:.8125rem}
.ic-f:hover{border-color:var(--navy,#1B3A5C);color:var(--navy,#1B3A5C)}
.ic-f.on{background:var(--navy,#1B3A5C);border-color:var(--navy,#1B3A5C);color:#fff}
.ic-f.on span{color:rgba(255,255,255,.65)}
.ic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:1.5rem}
.ic-card{background:#fff;border:1px solid var(--cream-deep,#E1D5BD);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column}
.ic-img img{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block}
.ic-body{padding:1.1rem 1.25rem 1.35rem}
.ic-cluster{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-deep,#C9982B);font-weight:600;margin:0 0 .45rem}
.ic-card h2{font-family:var(--font-display,'Spectral',Georgia,serif);font-weight:600;
  font-size:1.1875rem;line-height:1.32;margin:0 0 .5rem;text-wrap:balance}
.ic-card h2 a{color:var(--navy-ink,#0E1D2F);text-decoration:none}
.ic-card h2 a:hover{color:var(--navy,#1B3A5C);text-decoration:underline}
.ic-lede{font-size:.9375rem;line-height:1.55;color:var(--charcoal-soft,#3A4759);margin:0 0 .75rem}
.ic-date{font-size:.8125rem;color:var(--charcoal-muted,#6B7689);margin:0;
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ic-tag{font-size:.75rem;border:1px solid var(--cream-deep,#E1D5BD);border-radius:999px;
  padding:.1rem .55rem;color:var(--charcoal-soft,#3A4759)}

@media (max-width:34rem){
  .ia{font-size:1.0625rem;padding:1.75rem 1.1rem 4rem}
  .ia-short{font-size:1.1875rem}
  .ia table,.ia thead,.ia tbody,.ia tr,.ia td{display:block;width:100%}
  .ia thead{display:none}
  .ia tbody tr{border:1px solid var(--cream-deep,#E1D5BD);border-radius:4px;
    margin-bottom:.75rem;padding:.25rem 0}
  .ia tbody td{border:0;padding:.4rem .75rem}
  .ia tbody td:before{content:attr(data-th);display:block;font-size:.75rem;
    letter-spacing:.06em;text-transform:uppercase;color:var(--charcoal-muted,#6B7689);
    font-weight:600;margin-bottom:.15rem}
}

/* ============================================================
   Answer page, v2. The page now carries the site's own header,
   closing band and footer, plus a left rail and sibling cards.
   Nothing below changes the content classes the QA gate and the
   review document read; it is layout around them.
   ============================================================ */

/* The site header is fixed and transparent over a video hero. An answer page
   has no video, so it gets the solid treatment the rest of the site only gets
   after scrolling, and the page is pushed clear of it. */
.site-header.ia-solid {
  position: sticky;
  background: rgba(250, 246, 238, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(27, 58, 92, .08);
}
.site-header.ia-solid .nav-links a { color: var(--charcoal-soft); text-shadow: none; }
.site-header.ia-solid .nav-links a:hover { color: var(--navy); }
.site-header.ia-solid .brand img { filter: none; opacity: 1; }

.ia-body { background: var(--cream-warm); }
.ia-main { max-width: 1120px; margin: 0 auto; padding: 3.5rem 1.5rem 0; }

/* --- centred title block, as on the reference --- */
.ia-top { max-width: 760px; margin: 0 auto 2.25rem; text-align: center; }
.ia-crumb { justify-content: center; }
.ia-top h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.05rem);
  line-height: 1.12; letter-spacing: -.02em;
  color: var(--navy-deep); text-wrap: balance; margin: .6rem 0 1rem;
}
.ia-chips { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* --- hero sits wider than the text column --- */
.ia-hero { margin: 0 0 2.75rem; }
.ia-hero img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* --- rail + body --- */
.ia-cols { display: grid; grid-template-columns: 190px minmax(0, 44rem); gap: 3.25rem;
  align-items: start; justify-content: center; }
.ia-rail { position: sticky; top: 6.5rem; display: grid; gap: 1.5rem; }
.ia-rail-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--charcoal-muted); margin: 0 0 .45rem;
}
.ia-rail-value { font-size: .92rem; color: var(--charcoal-soft); margin: 0; }
.ia-author { display: flex; align-items: center; gap: .6rem; }
.ia-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center top; }
.ia-author span { display: flex; flex-direction: column; line-height: 1.35; }
.ia-author a { font-size: .92rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.ia-author a:hover { text-decoration: underline; }
.ia-author time { font-size: .78rem; color: var(--charcoal-muted); }
.ia-rail-cta { border-top: 1px solid rgba(27, 58, 92, .12); padding-top: 1.25rem; }
.ia-rail-cta p { font-size: .85rem; line-height: 1.5; color: var(--charcoal-soft); margin: 0 0 .5rem; }
.ia-rail-cta a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px;
}
.ia-rail-cta a:hover { color: var(--gold-deep); }
.ia-body-col { max-width: 42rem; }

/* --- previous / next --- */
.ia-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 3rem 0 1.5rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(27, 58, 92, .12);
}
.ia-pager a {
  display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem;
  background: #fff; border: 1px solid rgba(27, 58, 92, .1); border-radius: 12px;
  text-decoration: none; transition: border-color 200ms, transform 200ms;
}
.ia-pager a:hover { border-color: var(--gold); transform: translateY(-2px); }
.ia-pager span { font-size: .7rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--charcoal-muted); }
.ia-pager strong { font-family: var(--font-display); font-size: .95rem; font-weight: 500;
  line-height: 1.35; color: var(--navy-deep); }
.ia-pager-next { text-align: right; align-items: flex-end; }

/* --- closing band, the home page's shape in flat navy --- */
.ia-cta { background: var(--navy-deep); margin-top: 4.5rem; padding: 4.5rem 1.5rem; text-align: center; }
.ia-cta-inner { max-width: 640px; margin: 0 auto; }
.ia-cta-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; }
.ia-cta h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15; color: #fff; margin: 0 0 .85rem; }
.ia-cta h2 em { font-style: italic; color: var(--gold-soft); }
.ia-cta-sub { font-size: 1rem; line-height: 1.65; color: rgba(245, 239, 230, .8); margin: 0 0 1.9rem; }

/* --- sibling cards --- */
.ia-more { background: var(--cream-sand); padding: 4.5rem 1.5rem; }
.ia-more-inner { max-width: 1120px; margin: 0 auto; }
.ia-more-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ocean); margin: 0 0 .7rem; }
.ia-more h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--navy-deep); margin: 0 0 2rem; }
.ic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.ic-card { background: #fff; border: 1px solid rgba(27, 58, 92, .09); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; transition: transform 220ms, box-shadow 220ms; }
.ic-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(19, 40, 63, .09); }
.ic-img { display: block; }
.ic-img img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; display: block; }
.ic-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.ic-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.ic-card h3 { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.33;
  font-weight: 600; margin: 0; }
.ic-card h3 a { color: var(--navy-deep); text-decoration: none; }
.ic-card h3 a:hover { color: var(--ocean); }
.ic-lede { font-size: .88rem; line-height: 1.6; color: var(--charcoal-soft); margin: 0; }
.ic-more { margin: auto 0 0; }
.ic-more a { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem;
  font-weight: 600; color: var(--navy); text-decoration: none; }
.ic-more a:hover { color: var(--gold-deep); }
.ia-more-all { margin: 2rem 0 0; }
.ia-more-all a { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem;
  font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

@media (max-width: 900px) {
  .ia-cols { grid-template-columns: 1fr; gap: 2rem; }
  .ia-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.25rem 1.75rem; padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(27, 58, 92, .12); }
  .ia-rail-cta { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
  .ia-body-col { max-width: none; }
  .ia-pager { grid-template-columns: 1fr; }
  .ia-pager-next { text-align: left; align-items: flex-start; }
}

/* .ia-tax was doing two jobs: the chip row under the H1 and the tax sentence.
   The chips are .ia-chips now, so each name means one thing. */
.ia-chips a, .ic-chips span {
  font-size: .75rem; text-decoration: none; border-radius: 999px; padding: .22rem .72rem;
  border: 1px solid rgba(27, 58, 92, .22); color: var(--charcoal-soft);
  background: #fff; line-height: 1.6; white-space: nowrap;
}
.ia-chips a:hover { border-color: var(--navy); color: var(--navy); }
.ia-chips .ia-cat, .ic-chips .ia-cat {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.ia-chips .ia-cat:hover { color: #fff; opacity: .9; }

/* The reference sets the body a size up from ours and gives it more leading.
   On a page whose whole job is to be read in one sitting, that is the right
   trade against fitting more above the fold. */
.ia-body-col.ia { font-size: 1.0625rem; line-height: 1.78; color: var(--charcoal-soft); }
.ia-body-col.ia .ia-short { font-size: 1.28rem; line-height: 1.62; }
.ia-body-col.ia h2 { margin-top: 2.9rem; }
.ia-body-col.ia .ia-asking > h2 { margin-top: 0; }
.ia-body-col.ia table { font-size: .94rem; }
/* The stance block is the page's pull quote, as on the reference. */
.ia-body-col.ia .ia-stance {
  background: var(--cream-sand); border-left: 3px solid var(--gold);
  border-radius: 0 10px 10px 0; padding: 1.6rem 1.75rem .4rem; margin: 2.9rem 0;
}
.ia-body-col.ia .ia-stance h2 { margin-top: 0; }
.ia-rail-cta a { line-height: 1.45; }

/* --- author page --- */
.au-head { display: flex; gap: 2rem; align-items: flex-start; max-width: 54rem;
  margin: 1rem auto 2.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid rgba(27,58,92,.12); }
.au-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  object-position: center top; flex-shrink: 0; }
.au-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ocean); margin: 0 0 .5rem; }
.au-head h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--navy-deep); margin: 0 0 .5rem; }
.au-role { font-size: .95rem; color: var(--charcoal-muted); margin: 0 0 1rem; }
.au-track { font-size: 1.05rem; line-height: 1.6; color: var(--navy-deep); font-weight: 500;
  padding-left: 1rem; border-left: 3px solid var(--gold); margin: 0 0 1.25rem; }
.au-links { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: 0; }
.au-links a { font-size: .88rem; font-weight: 600; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid rgba(27,58,92,.25); padding-bottom: 2px; }
.au-links a:hover { border-color: var(--gold); color: var(--gold-deep); }
.au-bio { max-width: 42rem; margin: 0 auto 3rem; font-size: 1.0625rem; line-height: 1.78;
  color: var(--charcoal-soft); }
.au-written { max-width: 54rem; margin: 0 auto; }
.au-written h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--navy-deep);
  margin: 0 0 1.5rem; }
.au-empty { font-size: .95rem; color: var(--charcoal-muted); background: var(--cream-sand);
  border-radius: 10px; padding: 1.25rem 1.5rem; margin: 0; }
@media (max-width: 700px) {
  .au-head { flex-direction: column; gap: 1.25rem; }
  .au-photo { width: 104px; height: 104px; }
}

/* Next-step box: his order, call first and the quiz second. The quiz sits under
   the button as a sentence rather than a second button, so the two reads are
   clearly first choice and fallback, not a pair of equal options. */
.ia-cta-acts{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.ia-cta-alt{margin:0;font-size:.92rem;line-height:1.5;color:rgba(250,246,238,.72)}
.ia-cta-alt a{color:#FAF6EE;text-decoration:underline;text-underline-offset:3px}
.ia-cta-alt a:hover{color:#E8C87A}

/* The standing notice under the short answer, on every article. Quieter than the
   tax line, which is specific and belongs to the article that carries it. */
.ia-notice{margin:.9rem 0 0;padding:.65rem .85rem;border-left:2px solid rgba(27,58,92,.22);
  background:rgba(27,58,92,.035);font-size:.82rem;line-height:1.55;color:#5A6472}
.ia-notice + .ia-tax{margin-top:.5rem}

/* Tax articles: the warning goes above the answer. Deliberately the loudest
   element on the page above the fold, because these are the pages a reader is
   most likely to act on. */
.ia-taxbox{margin:0 0 1.4rem;padding:1rem 1.15rem;border:1px solid rgba(176,129,42,.42);
  border-left:4px solid #B0812A;border-radius:6px;background:rgba(176,129,42,.07)}
.ia-taxbox-t{margin:0 0 .35rem;font-weight:700;font-size:.9rem;letter-spacing:.01em;color:#6E4F12}
.ia-taxbox p{margin:0;font-size:.86rem;line-height:1.6;color:#4A5563}

/* On the index the notice sits under the standfirst, full width of the column. */
.ic-notice{max-width:46rem;margin-top:1.2rem}