/* Lou guides and FAQ. Same printed-form look as the landing page (Form LOU), tuned for long reading.
   Fonts are self-hosted copies of the app's (SIL Open Font License). No font service is contacted. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/guides/fonts/archivo-latin-wdth-normal.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url(/guides/fonts/courier-prime-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url(/guides/fonts/courier-prime-latin-700-normal.woff2) format('woff2')}

:root{
  --paper:#f6f4ec;--desk:#e2dfd3;--ink:#14161a;--ink2:#444b53;--shade:#dde5e5;
  --blue:#1d3aa6;--spruce:#1c5a62;--sun:#f4b82e;--poppy:#e8553e;--sky:#9ccbea;
  --press:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--desk);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;font-size:17px;line-height:1.6;overflow-x:clip}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:9}
.skip:focus{left:8px}

.stage{padding:20px 16px 64px}
.sheet{max-width:1000px;margin:0 auto;background:var(--paper);border-top:6px solid var(--ink);box-shadow:0 1px 0 #0002,0 40px 60px -40px #1b1b1a77}

/* ribbon + nav */
.ribbon{display:grid;grid-template-columns:3fr 2fr 2fr 1.4fr;height:10px}
.ribbon i:nth-child(1){background:var(--poppy)}.ribbon i:nth-child(2){background:var(--sun)}.ribbon i:nth-child(3){background:var(--spruce)}.ribbon i:nth-child(4){background:var(--sky)}
.topnav{display:flex;gap:22px;align-items:center;font-size:12px;font-stretch:80%;letter-spacing:.07em;text-transform:uppercase;padding:9px 18px;border-bottom:1px solid var(--ink)}
.topnav a{color:var(--ink);text-decoration:none}
.topnav a:hover{text-decoration:underline}
.topnav .lg{font-weight:900;font-size:20px;letter-spacing:-.01em;text-transform:none;font-stretch:100%;margin-right:auto}
.topnav .go-btn{background:var(--ink);color:var(--paper);padding:7px 14px;font-weight:800;font-stretch:90%;transition:transform 160ms var(--press),background 160ms}
.topnav .go-btn:hover{background:var(--spruce);text-decoration:none}
.topnav .go-btn:active{transform:scale(.97)}
.topnav [aria-current]{text-decoration:underline;text-decoration-thickness:2px}

/* header band */
.head{display:grid;grid-template-columns:190px 1fr 170px;border-bottom:3px solid var(--ink)}
.head>div{padding:16px 18px;min-width:0}
.head .l{background:var(--spruce);color:var(--paper);border-right:2px solid var(--ink)}
.head .fn{font-size:13px;font-stretch:75%;font-weight:600}
.head .fn b{display:block;font-size:42px;line-height:.95;font-weight:900;letter-spacing:-.02em;font-stretch:100%}
.head .m{position:relative;overflow:clip}
.head h1{margin:0;font-size:clamp(28px,4.4vw,46px);line-height:1.02;font-weight:900;letter-spacing:-.03em;font-stretch:86%;text-wrap:balance;position:relative}
.head .lede{margin:10px 0 0;font-size:17px;color:var(--ink2);max-width:58ch;position:relative}
.head .dot{position:absolute;border-radius:50%;mix-blend-mode:multiply;pointer-events:none}
.head .d1{width:130px;height:130px;background:var(--sky);right:-40px;top:-60px;opacity:.9}
.head .d2{width:70px;height:70px;border:3px solid var(--ink);right:16px;bottom:-30px}
.head .r{background:var(--sun);border-left:2px solid var(--ink);display:flex;flex-direction:column;justify-content:center}
.head .r small{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;font-stretch:80%}
.head .r b{font-size:22px;font-weight:900;line-height:1.1}

.crumbs{font-size:12.5px;padding:8px 18px;border-bottom:1px solid var(--ink);color:var(--ink2);font-stretch:92%}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--ink2)}
.crumbs a{color:var(--ink2)}

/* short answer */
.short{display:grid;grid-template-columns:52px 1fr;border-bottom:1px solid var(--ink);background:var(--shade)}
.short .n{background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:900;font-size:13px;letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;font-stretch:85%}
.short .b{padding:18px 22px}
.short p{margin:0 0 10px;max-width:68ch;font-size:18px}
.short p:last-child{margin-bottom:0}

/* parts */
.part{display:flex;align-items:stretch;background:var(--ink);color:var(--paper)}
.part b{padding:6px 16px;font-size:14px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;font-stretch:90%;border-right:2px solid var(--ink);flex:none;display:flex;align-items:center}
.part h2{margin:0;padding:6px 14px;font-weight:800;font-size:16px;font-stretch:90%;line-height:1.3;display:flex;align-items:center}
.part.c1 b{background:var(--sun);color:var(--ink)}.part.c2 b{background:var(--poppy);color:var(--ink)}
.part.c3 b{background:var(--sky);color:var(--ink)}.part.c4 b{background:var(--paper);color:var(--ink)}
.sec .body{padding:22px 24px 10px;border-bottom:1px solid var(--ink)}
.sec .body>*{max-width:68ch}
.sec .body p,.sec .body li{color:var(--ink)}
.sec h3{font-size:20px;font-weight:900;font-stretch:90%;letter-spacing:-.01em;margin:22px 0 6px;line-height:1.2}
.sec h3:first-child{margin-top:0}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:6px}
strong{font-weight:800}
.note{font-size:14.5px;color:var(--ink2)}
code,.mono{font-family:'Courier Prime',monospace;font-weight:700;color:var(--blue)}

/* form lines: label + value */
.lines{border-top:1px solid var(--ink);margin:6px 0 20px;max-width:none!important}
.ln{display:grid;grid-template-columns:44px 1fr minmax(160px,34%);border-bottom:1px solid var(--ink);min-height:48px}
.ln>*{padding:10px 12px;min-width:0}
.ln .k{font-weight:900;border-right:1px solid var(--ink);text-align:center;font-stretch:90%;font-size:15px;display:grid;place-items:center;padding:6px}
.ln .d{font-size:15.5px;align-self:center;line-height:1.4}
.ln .d small{display:block;color:var(--ink2);font-size:13px}
.ln .v{border-left:1px solid var(--ink);background:var(--shade);font-family:'Courier Prime',monospace;font-weight:700;font-size:17px;color:var(--blue);display:flex;align-items:center;justify-content:flex-end;text-align:right;font-variant-numeric:tabular-nums;line-height:1.25}
.ln .v.t{font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);justify-content:flex-start;text-align:left;font-stretch:92%}
.lines .hd{display:grid;grid-template-columns:44px 1fr minmax(160px,34%);background:var(--ink);color:var(--paper);font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-stretch:85%}
.lines .hd>*{padding:5px 12px}

/* comparison table */
.tbl{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15px;max-width:none!important}
.tbl th,.tbl td{border:1px solid var(--ink);padding:8px 10px;text-align:left;vertical-align:top}
.tbl thead th{background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-stretch:88%}
.tbl tbody th{background:var(--shade);font-weight:800;font-stretch:92%}
.tblwrap{overflow-x:auto;max-width:none!important}

/* Lou box */
.lou{display:grid;grid-template-columns:52px 1fr;border:2px solid var(--ink);margin:6px 0 22px;background:#fff;box-shadow:5px 5px 0 var(--sun);max-width:68ch}
.lou .n{background:var(--spruce);color:var(--paper);display:grid;place-items:center;font-weight:900;font-size:22px}
.lou .b{padding:14px 18px}
.lou .b h3{margin:0 0 6px!important;font-size:17px}
.lou .b p:last-child,.lou .b ul:last-child{margin-bottom:0}
.warn{border-left:10px solid var(--poppy);background:#fbe9e4;padding:12px 16px;margin:6px 0 20px}
.warn p:last-child{margin-bottom:0}

/* faq */
.toc{padding:16px 24px;border-bottom:1px solid var(--ink);font-size:15px}
.toc ol{margin:0;columns:2;column-gap:32px}
.toc li{break-inside:avoid}
.faq{border-bottom:1px solid var(--ink);padding:18px 24px 8px}
.faq h3{margin:0 0 6px;font-size:19px;font-weight:900;font-stretch:90%;line-height:1.25;max-width:60ch}
.faq p,.faq ul{max-width:68ch}

/* guide index cards */
.cards{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
.card{display:grid;grid-template-columns:52px 1fr;border-bottom:1px solid var(--ink);text-decoration:none;color:var(--ink);min-height:96px}
.card:nth-child(odd){border-right:1px solid var(--ink)}
.card .k{display:grid;place-items:center;font-weight:900;border-right:1px solid var(--ink);font-size:14px;font-stretch:88%}
.card:nth-child(4n+1) .k{background:var(--sun)}.card:nth-child(4n+2) .k{background:var(--sky)}.card:nth-child(4n+3) .k{background:var(--poppy)}.card:nth-child(4n+4) .k{background:var(--shade)}
.card .b{padding:14px 16px}
.card b{color:var(--ink);display:block;font-size:19px;font-weight:900;font-stretch:90%;line-height:1.2;margin-bottom:4px}
.card span{font-size:14.5px;color:var(--ink2);display:block}
.card:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.card.wide{grid-column:1/-1;border-right:0}
.card.wide .k{background:var(--spruce)!important;color:var(--paper)}

/* sources + related */
.src{font-size:14.5px}
.src li{color:var(--ink2)}
.related{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 18px}
.related a{display:inline-block;border:1.5px solid var(--ink);padding:5px 10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;font-stretch:92%}
.related a:hover{background:var(--sun)}

/* call to action */
.final{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:26px 24px;background:var(--ink);color:var(--paper)}
.final .tl{font-size:clamp(22px,3.2vw,36px);font-weight:900;font-stretch:86%;letter-spacing:-.02em;line-height:1.05}
.final .tl span{display:block;color:var(--sun)}
.final p{margin:8px 0 0;font-size:14px;color:#d6d8db;max-width:52ch}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;background:var(--sun);color:var(--ink);padding:18px 20px 18px 24px;font-weight:900;font-size:clamp(17px,2.2vw,22px);line-height:1.1;font-stretch:92%;text-decoration:none;box-shadow:6px 6px 0 var(--poppy);transition:transform 180ms var(--press),box-shadow 180ms var(--press)}
.cta i{flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--sun);display:grid;place-items:center;font-style:normal;font-size:20px}
@media(hover:hover) and (pointer:fine){.cta:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--poppy)}}
.cta:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--poppy)}

.foot{padding:14px 20px;font-size:12.5px;color:var(--ink2);display:flex;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;border-top:3px solid var(--ink);font-stretch:92%}
.foot p{margin:0;max-width:70ch}
.foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot a{color:var(--ink2)}

@media(max-width:820px){
  body{font-size:16.5px}
  .head{grid-template-columns:1fr}
  .head .l,.head .r{border:0;border-bottom:2px solid var(--ink)}
  .head .l{display:flex;align-items:center;gap:12px}.head .fn b{display:inline;font-size:28px;margin:0 6px}
  .head .r{flex-direction:row;align-items:baseline;gap:10px;order:3;border-bottom:0;border-top:2px solid var(--ink)}
  .ln,.lines .hd{grid-template-columns:40px 1fr}
  .ln .v{grid-column:1/-1;border-left:0;border-top:1px solid var(--ink);justify-content:flex-start;text-align:left}
  .lines .hd>*:last-child{display:none}
  .ln:has(.v:not(.t)){grid-template-columns:40px 1fr auto}
  .ln:has(.v:not(.t)) .v{grid-column:auto;border-top:0;border-left:1px solid var(--ink);justify-content:flex-end}
  .cards{grid-template-columns:1fr}.card:nth-child(odd){border-right:0}
  .toc ol{columns:1}
  .final{grid-template-columns:1fr}
  .topnav{gap:14px}
  .topnav a.opt{display:none}
  .short .b,.sec .body,.faq,.toc{padding-left:16px;padding-right:16px}
  .short{grid-template-columns:36px 1fr}
}
@media print{
  body{background:#fff}.stage{padding:0}.sheet{box-shadow:none}
  .topnav,.final,.ribbon{display:none}
  a{color:var(--ink)}
}