/* davemanleyre.com v3: the shared guide template (Dave 10/20: every guide to the relocation standard).
   One reading column, a contents list (sticky on a laptop, at the top on a phone), each chapter opening
   on the horizon line with its small half sun, rounded photos, tables for numbers, numbered steps,
   and the compact Talk to Dave block at the end. Loaded after site.css on /guides/ pages only. */

/* hero */
.g-hero{padding:28px 0 8px}
.g-hero .lede{margin-top:18px}
.g-hero .h1{font-size:46px;max-width:14ch}
.g-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pencil)}
.g-hero .portrait img{aspect-ratio:4/3}
.g-hero .portrait:after{background:linear-gradient(180deg,rgba(15,14,13,0) 55%,rgba(15,14,13,.6) 100%)}

/* body grid */
.g-body{padding:40px 0 16px}
.g-grid{display:grid;gap:40px}
.g-main{min-width:0;max-width:720px}

/* contents */
.g-toc{background:var(--soft);border-radius:var(--r-soft);padding:22px 20px 14px}
.g-toc .lbl{margin-bottom:8px}
.g-toc ol{list-style:none;margin:0;padding:0;counter-reset:t}
.g-toc li{counter-increment:t}
.g-toc ol a{display:grid;grid-template-columns:34px 1fr;gap:6px;align-items:baseline;padding:10px 0;border-bottom:1px solid #DCDBD6;text-decoration:none;font:600 15.5px/1.35 var(--sans)}
.g-toc ol li:last-child a{border-bottom:0}
.g-toc ol a:before{content:counter(t,decimal-leading-zero);font:400 18px/1 var(--disp);color:var(--pencil)}
.g-toc ol a:hover span{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
.g-toc ol a[aria-current]:before{color:var(--red)}
.g-toc .g-talk{display:block;margin:12px 0 4px;font:600 15px/1.4 var(--sans)}

/* intro above chapter one */
.g-intro{margin:0 0 56px}
.g-intro p{font-size:19px;line-height:1.68;margin:0 0 18px;max-width:64ch}

/* a chapter */
.g-ch{padding:0 0 64px;scroll-margin-top:20px}
.hz{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:0 0 22px;padding:0 0 9px;border-bottom:1.5px solid var(--char)}
.hz:before{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:14px;background:var(--char);border-radius:14px 14px 0 0}
.hz .n{padding-left:40px;font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--char)}
.hz .of{font:600 12px/1.4 var(--sans);letter-spacing:.16em;color:var(--pencil)}
.g-h{font:400 38px/1 var(--disp);text-transform:uppercase;letter-spacing:.004em;margin:0 0 24px;max-width:20ch}
.g-main p{font-size:17.5px;line-height:1.72;margin:0 0 20px;max-width:68ch}
.g-main h3{font:650 20px/1.3 var(--sans);letter-spacing:-.01em;margin:36px 0 10px}
.g-main a:not(.btn):not(.go){font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.g-main a:not(.btn):not(.go):hover{text-decoration-color:var(--red)}

/* rounded photo */
.g-fig{margin:32px 0 34px}
.g-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-img);background:#d8d6cf}
.g-fig figcaption{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--pencil)}

/* numbered steps (never bullets) */
.g-num{list-style:none;margin:8px 0 26px;padding:0;counter-reset:n;display:grid;gap:16px}
.g-num li{counter-increment:n;display:grid;grid-template-columns:40px 1fr;gap:4px 10px;font-size:17px;line-height:1.65}
.g-num li:before{content:counter(n,decimal-leading-zero);font:400 22px/1.2 var(--disp);color:var(--pencil)}
.g-num b{font-weight:650}

/* a side note on the soft tone */
.g-note{background:var(--soft);border-radius:22px;padding:22px 22px 4px;margin:30px 0 32px}
.g-note .lbl{margin-bottom:8px}
.g-note p{font-size:16.5px;line-height:1.65}

/* tables for numbers */
.g-tabwrap{margin:26px 0 30px;background:var(--white);border-radius:22px;padding:8px 18px 4px}
.g-tab{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.g-tab th,.g-tab td{text-align:left;vertical-align:top;padding:12px 10px 12px 0;border-bottom:1px solid #E3E2DD}
.g-tab tbody tr:last-child th,.g-tab tbody tr:last-child td{border-bottom:0}
.g-tab thead th{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pencil);padding-top:14px}
.g-tab tbody th{font-weight:650}
.g-tab td.r,.g-tab th.r{text-align:right;white-space:nowrap}
.g-tab tfoot th,.g-tab tfoot td{font-weight:700;border-top:1.5px solid var(--char);border-bottom:0}
.g-src{font-size:14px;line-height:1.5;color:var(--pencil);margin:-14px 0 28px!important}

/* phones: wide text tables stack into label / value rows, so nothing scrolls sideways */
@media (max-width:640px){
  .g-tabwrap{padding:4px 16px}
  .g-tab.stack thead{display:none}
  .g-tab.stack tr{display:block;padding:12px 0;border-bottom:1px solid #E3E2DD}
  .g-tab.stack tbody tr:last-child{border-bottom:0}
  .g-tab.stack th,.g-tab.stack td{display:block;border:0;padding:3px 0}
  .g-tab.stack td[data-label]:before{content:attr(data-label);display:block;font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--pencil);margin-top:6px}
  .g-tab.stack td.r{text-align:left}
  .g-tab.tight{font-size:14px}
  .g-tab.tight th,.g-tab.tight td{padding-right:6px}
}

/* the other guides, at the bottom of each guide */
.g-more{padding:8px 0 40px}
.g-more .head{margin-bottom:22px}
.tiles.g-tiles{grid-template-columns:1fr 1fr;gap:26px 14px}
.g-tiles .tile h3{font-size:17px;margin-top:12px}
.g-tiles .tile p{font-size:14.5px;line-height:1.5}
.g-tiles .cue{display:none}
@media (min-width:700px){.tiles.g-tiles{grid-template-columns:repeat(3,1fr);gap:34px 22px}.g-tiles .tile h3{font-size:19px}.g-tiles .cue{display:inline-flex}}
@media (min-width:1000px){.tiles.g-tiles{grid-template-columns:repeat(5,1fr)}}

@media (min-width:700px){
  .g-h{font-size:46px}
}
@media (min-width:1000px){
  .g-hero{padding:44px 0 0}
  .g-hero .h1{font-size:68px;max-width:none}
  .g-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
  .g-body{padding:72px 0 24px}
  .g-grid{grid-template-columns:270px minmax(0,1fr);gap:80px;align-items:start}
  .g-toc{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;background:none;border-radius:0;padding:0}
  .g-toc ol a{font-size:14.5px;padding:9px 0}
  .g-ch{padding-bottom:96px}
  .g-h{font-size:54px}
  .g-main p{font-size:18px}
  .g-intro p{font-size:20px}
}
@media print{
  .mast,.foot,.callpill,.g-toc,.talk-sec,.g-more{display:none!important}
  .g-grid{display:block}
}