/* ===== OWNER'S GUIDE TO RESTORATION ===== */

/* table of contents */
.og-toc{ background:var(--white); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:var(--r-lg); padding:22px 26px; }
.og-toc-t{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-mute); font-weight:600; margin-bottom:12px; }
.og-toc ol{ list-style:none; margin:0; padding:0; columns:2; column-gap:34px; }
.og-toc li{ break-inside:avoid; margin-bottom:7px; }
.og-toc a{ display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--text);
  font-size:15px; line-height:1.4; padding:3px 0; }
.og-toc a:hover{ color:var(--amber-deep); }
.og-toc a:hover .og-n{ background:var(--amber); color:#fff; border-color:var(--amber); }
.og-n{ flex:none; font-family:var(--f-mono); font-size:11px; font-weight:600; color:var(--text-mute);
  border:1px solid var(--line); border-radius:5px; padding:2px 6px; transition:.14s; }
@media (max-width:700px){ .og-toc ol{ columns:1; } }

/* section head */
.og-sec{ scroll-margin-top:90px; }
.og-head{ display:flex; gap:20px; align-items:flex-start; margin-bottom:22px; }
.og-num{ flex:none; font-family:var(--f-display); font-weight:900; font-size:clamp(30px,4vw,46px);
  line-height:1; color:var(--line); letter-spacing:-.02em; }
.og-head h2{ font-size:clamp(24px,3.3vw,36px); margin:2px 0 0; }
.og-head .kicker{ display:block; margin-bottom:4px; }

/* body */
.og-body{ max-width:74ch; }
.og-body p{ font-size:17px; line-height:1.62; color:var(--text-soft); margin:0 0 15px; }
.og-body h4{ font-family:var(--f-display); font-weight:700; font-size:19px; color:var(--text);
  margin:26px 0 10px; }
.og-body strong{ color:var(--text); }
.og-lead{ font-size:18px !important; color:var(--text) !important; font-weight:500; }

.og-list{ margin:0 0 16px; padding-left:0; list-style:none; }
.og-list li{ position:relative; padding-left:22px; font-size:16.5px; line-height:1.58;
  color:var(--text-soft); margin-bottom:9px; }
.og-list li::before{ content:""; position:absolute; left:2px; top:11px; width:7px; height:7px;
  border-radius:2px; background:var(--amber); }

/* call-outs */
.og-note{ margin:20px 0 !important; padding:15px 18px; background:var(--paper);
  border-left:3px solid var(--amber); border-radius:var(--r); font-size:16px !important; }
.og-warn{ margin:20px 0 !important; padding:15px 18px; background:#FDF4EF;
  border-left:3px solid var(--rust); border-radius:var(--r); font-size:16px !important; }
.og-warn strong{ color:var(--rust); }

/* cross-links to the pages that own the depth */
.og-cross{ margin:22px 0; padding:16px 20px; background:var(--white);
  border:1px dashed var(--line); border-radius:var(--r-lg); }
.og-cross p{ font-size:15.5px !important; margin:0 0 8px !important; }
.og-cross p:last-child{ margin:0 !important; }
.og-cross a{ font-family:var(--f-mono); font-size:14px; font-weight:600;
  color:var(--amber-deep); text-decoration:none; }
.og-cross a:hover{ text-decoration:underline; }

/* service-life table */
.og-table{ width:100%; border-collapse:collapse; margin:8px 0 18px; }
.og-table th{ text-align:left; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:var(--ink); padding:10px 14px; }
.og-table td{ padding:11px 14px; font-size:16px; color:var(--text-soft);
  border-bottom:1px solid var(--line-soft); }
.og-table tr:nth-child(even) td{ background:var(--paper); }

@media (max-width:640px){
  .og-head{ gap:12px; }
  .og-body p, .og-list li{ font-size:16px; }
}

/* ===== friendly topic icons (in the collapsed head) ===== */
.topic-head{ grid-template-columns:42px 1fr 44px 26px !important; align-items:center !important; }
.tp-ico{ width:42px; height:42px; justify-self:end; opacity:.92; transition:transform .18s ease; }
.topic:hover .tp-ico, .topic.pinned .tp-ico{ transform:scale(1.08) rotate(-2deg); }
@media (max-width:620px){
  .topic-head{ grid-template-columns:36px 1fr 22px !important; }
  .tp-ico{ display:none; }
}

/* the unit-owner topic gets a warmer treatment so owners find it */
.topic--owners{ border-color:var(--gold,#E0A458) !important; background:#FFFCF6; }
.topic--owners .topic-index{ background:var(--gold,#E0A458); color:var(--ink); }
.topic--owners:hover, .topic--owners.pinned{ border-color:#C98A3C !important; }

/* ===== "who are you" orientation cards ===== */
.og-who{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:820px){ .og-who{ grid-template-columns:1fr; } }
.who-card{ display:flex; gap:16px; align-items:flex-start; background:var(--white);
  border:2px solid var(--line); border-radius:16px; padding:18px 20px; }
.who-card--owner{ border-color:#E7C79A; background:#FFFCF6; }
.who-ico{ width:44px; height:44px; flex:none; }
.who-card h3{ font-family:var(--f-display); font-weight:800; font-size:18px; margin:0 0 5px; color:var(--text); }
.who-card p{ margin:0; font-size:15px; line-height:1.5; color:var(--text-soft); }
.who-card a{ color:var(--amber-deep); font-weight:600; }

/* body typography inside a topic */
.topic-inner .og-body,
.topic-inner{ max-width:none; }
.topic-inner p{ font-size:16.5px; line-height:1.62; color:var(--text-soft); margin:0 0 14px; }
.topic-inner h4{ font-family:var(--f-display); font-weight:700; font-size:18px; color:var(--text); margin:24px 0 9px; }
/* Part 2 (execution) topics get the warmer marker so the split reads at a glance */
.topic--exec .topic-index{ background:var(--gold,#E0A458); color:var(--ink); }
.who-card--exec{ border-color:#E7C79A; background:#FFFCF6; }

/* ===== FIX: keep topic content inside its column ===== */
/* grid children default to min-width:auto, so wide content blows the column out */
.guide-layout{ min-width:0; }
.topics{ min-width:0; max-width:100%; }
.topic, .topic-body, .topic-inner{ min-width:0; max-width:100%; }

/* anything wide inside a topic must fit the column */
.topic-inner img,
.topic-inner svg{ max-width:100%; height:auto; }
.topic-inner pre,
.topic-inner table{ max-width:100%; }

/* full-width section grids from the old page layout: stack them inside a topic */
.topic-inner .cr-band,
.topic-inner .cr-split,
.topic-inner .methods,
.topic-inner .proc,
.topic-inner .stages,
.topic-inner .photo-grid,
.topic-inner .grid-2,
.topic-inner .grid-3{ grid-template-columns:1fr !important; gap:22px; }

@media (min-width:1080px){
  /* on wide screens the visual pairs can go back to two-up, but never overflow */
  .topic-inner .cr-band,
  .topic-inner .cr-split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
  .topic-inner .methods,
  .topic-inner .proc{ grid-template-columns:repeat(auto-fit, minmax(min(210px,100%), 1fr)) !important; }
  .topic-inner .photo-grid{ grid-template-columns:repeat(auto-fit, minmax(min(180px,100%), 1fr)) !important; }
}

/* ===== board / owner split divider ===== */
.part-split{ display:flex; align-items:center; gap:16px; margin:34px 0 20px; }
.part-split .ps-line{ flex:1; height:2px; background:linear-gradient(90deg, transparent, #E7C79A); }
.part-split .ps-line:last-child{ background:linear-gradient(90deg, #E7C79A, transparent); }
.part-split .ps-label{ display:inline-flex; align-items:center; gap:10px; flex:none;
  font-family:var(--f-display); font-weight:800; font-size:15px; color:#A8712C;
  background:#FFF7EC; border:2px solid #E7C79A; border-radius:100px; padding:8px 18px; white-space:nowrap; }
.part-split .ps-label svg{ width:22px; height:22px; flex:none; }
@media (max-width:560px){ .part-split .ps-label{ font-size:13px; padding:7px 13px; } }

/* TOC split label */
.toc nav .toc-split{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:#A8712C; padding:14px 0 6px 16px; margin-left:-1px;
  border-left:2px solid #E7C79A; font-weight:600; }

/* ===== glossary ===== */
.og-gloss dl{ margin:6px 0 0; }
.og-gloss dt{ font-family:var(--f-display); font-weight:800; font-size:16px; color:var(--text);
  margin-top:16px; }
.og-gloss dt:first-child{ margin-top:0; }
.og-gloss dd{ margin:4px 0 0; padding-left:0; font-size:16px; line-height:1.58; color:var(--text-soft); }
.og-gloss dd + dt{ padding-top:14px; border-top:1px solid var(--line-soft); }