/* O&G Abstractor guides. Shared by /guides/ and every guide page.
   Palette and type match the home page. */
:root{
  --ink:#0c0a09;--ink-soft:#1c1917;--paper:#f5f5f4;--surface:#ffffff;
  --amber:#78350f;--amber-lift:#92400e;--muted:#78716c;--rule:#e7e5e4;
  --amber-wash:rgba(120,53,15,.07);--amber-line:rgba(120,53,15,.28);
  --display:"Zilla Slab",Georgia,serif;
  --body:"Public Sans","Helvetica Neue",Arial,sans-serif;
  --doc:"Courier Prime","Courier New",monospace;
  --pad:clamp(18px,5vw,64px);--max:1160px;--read:740px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--amber)}
a:hover{color:var(--amber-lift)}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.015em;margin:0;color:var(--ink)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* masthead */
.masthead{position:sticky;top:0;z-index:60;background:rgba(245,245,244,.93);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:22px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;color:var(--ink)}
.mark{width:34px;height:34px;border-radius:7px;background:var(--amber);display:grid;place-items:center;flex:0 0 auto}
.mark svg{width:21px;height:21px;stroke:#f5f5f4}
.brand-name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;white-space:nowrap}
.navlinks{display:none;gap:26px;align-items:center}
.navlinks a{font-size:15px;font-weight:500;text-decoration:none;color:#44403c}
.navlinks a:hover,.navlinks a[aria-current]{color:var(--amber)}
@media (min-width:900px){.navlinks{display:flex}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-size:16px;font-weight:600;padding:14px 24px;border-radius:3px;border:1.5px solid var(--amber);text-decoration:none;transition:background .16s ease,transform .16s ease}
.btn-primary{background:var(--amber);color:#fdf9f4}
.btn-primary:hover{background:var(--amber-lift);color:#fdf9f4;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--amber)}
.btn-ghost:hover{background:var(--amber-wash)}
.masthead .btn{padding:10px 18px;font-size:15px}
.masthead .btn{white-space:nowrap}
@media (max-width:520px){.masthead .btn{padding:10px 14px;font-size:14px}}
@media (max-width:440px){.masthead .brand-name{display:none}}

/* article */
.crumbs,.article .crumbs,.hub .crumbs{font-family:var(--doc);font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin:36px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--amber);text-decoration:underline}
.article{max-width:var(--read);margin:0 auto;padding:0 0 64px}
.eyebrow,.article .eyebrow,.hub .eyebrow{font-family:var(--doc);font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--amber);margin:30px 0 14px}
.article h1{font-size:clamp(32px,5vw,50px)}
.dek,.article .dek,.hub .dek{font-size:clamp(18px,1.9vw,21px);color:#44403c;margin:18px 0 0}
.article .byline{font-family:var(--doc);font-size:13px;color:var(--muted);margin:20px 0 0;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.article h2{font-size:clamp(25px,3.2vw,33px);margin:52px 0 14px;scroll-margin-top:84px}
.article h3{font-size:clamp(19px,2vw,22px);margin:32px 0 8px;scroll-margin-top:84px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-left:22px}
.article li{margin:0 0 8px}
.article strong{font-weight:700}
.toc{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:20px 24px;margin:30px 0 0}
.toc b{display:block;font-family:var(--doc);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:4px 0}
.toc a{text-decoration:none;color:#44403c}
.toc a:hover{color:var(--amber);text-decoration:underline}
.callout{background:var(--amber-wash);border-left:3px solid var(--amber);border-radius:0 4px 4px 0;padding:16px 20px;margin:22px 0}
.article .callout p:last-child,.cta-box p:last-child{margin-bottom:0}
.callout .label{display:block;font-family:var(--doc);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.verbatim{font-family:var(--doc);font-size:15px;background:var(--surface);border:1px solid var(--rule);border-radius:3px;padding:12px 16px;margin:14px 0 18px;color:#292524}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 22px;border:1px solid var(--rule);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px;line-height:1.5}
th,td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--rule)}
th{font-family:var(--doc);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);background:#fbfaf8;font-weight:700}
tr:last-child td{border-bottom:none}
td:first-child{font-weight:600;white-space:nowrap}
.checklist{list-style:none;padding-left:0}
.checklist li{position:relative;padding-left:28px}
.checklist li::before{content:"";position:absolute;left:2px;top:7px;width:13px;height:13px;border:1.5px solid var(--amber);border-radius:2px}
.cta-box{background:var(--ink-soft);color:#e7e5e4;border-radius:4px;padding:28px 30px;margin:48px 0 0}
.cta-box h2{color:#fff;margin:0 0 10px;font-size:clamp(23px,3vw,29px)}
.cta-box p{color:#c4bdb6}
.cta-box .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.cta-box .btn-ghost{color:#f5f5f4;border-color:#a8a29d}
.cta-box .btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff}
.faq h3{margin-top:26px}
.article .disclaimer{font-family:var(--doc);font-size:12.5px;color:var(--muted);line-height:1.75;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule)}

/* hub */
.hub{max-width:var(--max);margin:0 auto;padding:0 0 70px}
.hub h1{font-size:clamp(34px,5.4vw,56px);max-width:18ch}
.hub .dek{max-width:60ch}
.cards{display:grid;gap:18px;margin-top:38px}
@media (min-width:760px){.cards{grid-template-columns:1fr 1fr}}
.card{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:24px 26px;text-decoration:none;color:var(--ink);transition:border-color .16s ease,transform .16s ease}
.card:hover{border-color:var(--amber);color:var(--ink);transform:translateY(-1px)}
.card .tag{font-family:var(--doc);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.card h2{font-size:clamp(21px,2.4vw,25px);margin:8px 0 8px}
.card p{color:#57534e;font-size:15.5px;margin:0}
.card .meta{font-family:var(--doc);font-size:12px;color:var(--muted);margin-top:14px}
.card.soon{border-style:dashed;background:transparent;pointer-events:none}
.card.soon h2{color:#57534e}

/* footer */
footer{background:var(--ink-soft);color:#a8a29d;padding:44px 0 40px;font-size:14.5px}
.foot-grid{display:grid;gap:26px}
@media (min-width:820px){.foot-grid{grid-template-columns:1fr 1.4fr;align-items:start}}
footer .brand-name{color:#f0eeec}
footer .mark{background:rgba(245,245,244,.1)}
footer p{margin-top:14px;max-width:46ch;line-height:1.7}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-links a{text-decoration:none;color:#c4bdb6}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-legal{max-width:none;margin-top:30px;padding-top:22px;border-top:1px solid rgba(245,245,244,.13);font-family:var(--doc);font-size:11.5px;color:#8a837c;line-height:1.8}