/* loweffort.com reference pages: one stylesheet for all five (06.10.2026).
   Served from files.loweffort.com/site/ref/ref-pages.css. Everything is scoped to #le-ref,
   so nothing here touches the GHL template around the block.
   Low Effort design: Inter 400-800, colour through tokens, one signal colour, hairlines
   instead of shadows, pill buttons, 720px reading column. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

#le-ref{
  --ink:#0e1a33;--text:#111f32;--steel:#3a4661;--slate:#607179;
  --canvas:#f7f8fa;--surface:#ffffff;--sky:#f4f8fc;--mist:#e9ecf2;
  --line:rgba(14,26,51,.14);--action:#a91614;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-family:var(--font);font-size:16px;line-height:24px;color:var(--text);background:var(--surface);
  text-align:left;-webkit-font-smoothing:antialiased;
}
#le-ref *,#le-ref *::before,#le-ref *::after{box-sizing:border-box}

/* layout: reading column + side box */
#le-ref .ref-wrap{max-width:1068px;margin:0 auto;padding:48px 24px 72px;display:grid;
  grid-template-columns:minmax(0,720px) 260px;gap:40px;justify-content:space-between;align-items:start}
#le-ref .ref-wrap.ref-single{grid-template-columns:minmax(0,860px);justify-content:start}
#le-ref .ref-main{min-width:0}

/* type */
#le-ref h1,#le-ref h2,#le-ref h3{font-family:var(--font);color:var(--ink);margin:0}
#le-ref h1{font-size:40px;line-height:46px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px;text-wrap:balance}
#le-ref h2{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
#le-ref h3{font-size:17px;line-height:24px;font-weight:700;margin:16px 0 4px}
#le-ref p{font-size:16px;line-height:24px;margin:0 0 16px;color:var(--text)}
#le-ref .ref-intro{font-size:18px;line-height:27px;color:var(--steel)}
#le-ref ul,#le-ref ol{margin:0 0 8px;padding-left:20px;color:var(--text)}
#le-ref ul{list-style:disc}
#le-ref ol{list-style:decimal}
#le-ref li{font-size:16px;line-height:24px;margin-bottom:6px}
#le-ref a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--action)}
#le-ref a:hover{box-shadow:inset 0 -3px 0 var(--action)}
#le-ref a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#le-ref [id]{scroll-margin-top:96px}

#le-ref .ref-crumbs{font-size:13px;line-height:18px;color:var(--slate);margin-bottom:12px}
#le-ref .ref-crumbs a{color:var(--slate);box-shadow:none}
#le-ref .ref-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
#le-ref .ref-byline{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13px;line-height:18px;color:var(--slate);
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:24px 0 8px}
#le-ref .ref-byline a{color:var(--slate);font-weight:600}
#le-ref .ref-src{font-size:13px;line-height:18px;color:var(--slate)}

/* sections */
#le-ref .ref-sect{padding:24px 0;border-bottom:1px solid var(--line)}
#le-ref .ref-sect>:last-child{margin-bottom:0}

/* tables scroll inside their own container on a phone */
#le-ref .ref-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px}
#le-ref .ref-tbl-wrap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#le-ref .ref-tbl{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:22px}
#le-ref .ref-tbl th,#le-ref .ref-tbl td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--text)}
#le-ref .ref-tbl thead th{font-size:13px;font-weight:600;color:var(--slate)}
#le-ref .ref-tbl tbody th{font-weight:600;color:var(--ink)}

/* the five readings */
#le-ref .ref-readings{display:grid;gap:10px;margin:8px 0 16px}
#le-ref .ref-reading{border:1px solid var(--line);border-radius:4px;padding:12px 14px}
#le-ref .ref-reading b{display:block;color:var(--ink);font-weight:700}
#le-ref .ref-reading span{display:block;font-size:14px;line-height:21px;color:var(--steel)}

/* glossary */
#le-ref .ref-letters{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 8px}
#le-ref .ref-letters a{box-shadow:none;font-size:13px;font-weight:600;width:36px;height:36px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;color:var(--ink)}
#le-ref .ref-letters a:hover{border-color:var(--ink)}
#le-ref .ref-letter-h{font-size:13px;line-height:18px;font-weight:700;color:var(--slate);margin:32px 0 0}
#le-ref .ref-term{padding:24px 0;border-bottom:1px solid var(--line)}
#le-ref .ref-term p{margin-bottom:8px}
#le-ref .ref-term .ref-def{font-weight:600;color:var(--ink)}
#le-ref .ref-term .ref-rel{font-size:13px;line-height:18px;color:var(--slate);margin:0}
#le-ref .ref-term .ref-rel a{font-weight:600}

/* about */
#le-ref .ref-portrait{width:120px;height:120px;border-radius:50%;background:var(--mist);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:16px;color:var(--slate);
  text-align:center;margin-bottom:12px;object-fit:cover}

/* side box: the one red button on the page */
#le-ref .ref-aside{min-width:0}
#le-ref .ref-box{border:1px solid var(--line);border-radius:4px;padding:18px;background:var(--canvas);position:sticky;top:96px}
#le-ref .ref-box-title{font-size:15px;line-height:21px;font-weight:700;color:var(--ink);margin:0 0 8px}
#le-ref .ref-box p{font-size:14px;line-height:21px;color:var(--steel);margin-bottom:14px}
#le-ref .ref-btn{display:inline-block;font-size:14px;line-height:20px;font-weight:600;color:#fff;background:var(--action);
  border-radius:999px;padding:11px 18px;box-shadow:none;transition:background .15s ease}
#le-ref .ref-btn:hover{background:#8e1210;box-shadow:none}
#le-ref .ref-btn:active{transform:scale(.97)}

@media (max-width:1024px){
  #le-ref .ref-wrap{grid-template-columns:minmax(0,720px);justify-content:center}
  #le-ref .ref-box{position:static}
}
@media (max-width:767px){
  #le-ref .ref-wrap{padding:28px 20px 48px;gap:28px}
  #le-ref h1{font-size:30px;line-height:36px}
  #le-ref .ref-intro{font-size:17px;line-height:26px}
}
@media (prefers-reduced-motion:reduce){#le-ref .ref-btn{transition:none}}