/* Shell for the book pages: nav, breadcrumbs, footer, buttons.
   Tokens mirror the application in index.html so the two look like one site. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root{
  --ground:#F3F6F4; --paper:#FFFFFF; --rule:#D8E2DD; --rule-2:#EAF0EC;
  --ink:#16211F; --ink2:#576660; --ink3:#879189;
  --accent:#17627A; --accent-2:#0F4D61; --accent-soft:#E1EFF3;
  --shadow:0 1px 2px rgba(22,33,31,.05), 0 8px 24px -12px rgba(22,33,31,.14);
  --r:12px; --r-s:8px;
  --sans:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --disp:'Fraunces','Iowan Old Style',Georgia,serif;
  --serif:'Source Serif 4','Iowan Old Style',Georgia,serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ground:#0F1513; --paper:#17201D; --rule:#2A3733; --rule-2:#212C29;
  --ink:#E9EFEB; --ink2:#A4B1AA; --ink3:#7A867F;
  --accent:#5AB6D0; --accent-2:#8AD0E3; --accent-soft:#12303A;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{color:var(--accent);text-decoration-thickness:.07em;text-underline-offset:.18em}
a:hover{color:var(--accent-2)}
.wrap{max-width:46rem;margin:0 auto;padding:0 1rem}

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--paper);padding:.6rem 1rem;border-radius:var(--r-s);box-shadow:var(--shadow)}

.nav{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:5}
.nav-in{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.1rem;padding-top:.7rem;padding-bottom:.7rem}
.nav a{color:var(--ink2);text-decoration:none;font-size:.94rem;font-weight:500;padding:.2rem 0}
.nav a:hover{color:var(--accent)}
.nav .brand{font-family:var(--disp);font-weight:700;font-size:1.12rem;color:var(--ink);margin-right:.5rem}

.crumbs{background:var(--paper);border-bottom:1px solid var(--rule-2);font-size:.86rem;color:var(--ink3)}
.crumbs .wrap{padding-top:.5rem;padding-bottom:.5rem}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs .sep{margin:0 .45rem;color:var(--ink3)}

main{padding:2rem 0 3rem}

.btn{display:inline-block;padding:.5rem .95rem;border-radius:var(--r-s);border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:500}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-g{background:var(--accent-soft);border-color:transparent;color:var(--accent-2)}
.cta{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.4rem 0}

footer{border-top:1px solid var(--rule);background:var(--paper);padding:1.4rem 0;margin-top:3rem}
.fine{color:var(--ink3);font-size:.85rem;margin:0}
.fine a{color:var(--ink2)}

/* Shared public navigation: grouped destinations, a consistent route home. */
:root{--ground:#f8f6f0;--paper:#fffefb;--ink:#253d32;--ink2:#5c655c;--accent:#245c4f;--accent-2:#173e35;--rule:#dedfd3;--rule-2:#eae9df}
html{scroll-behavior:smooth;scroll-padding-top:110px}
:focus-visible{outline:3px solid #ac622c;outline-offset:5px}
.nav{background:#f8f6f0;color:#253d32;border-color:#dedfd3}
.nav-in.wrap{max-width:1280px;padding:20px 40px;gap:28px;flex-wrap:nowrap;min-height:88px}
.nav .brand{display:flex;align-items:center;gap:9px;font-size:24px;white-space:nowrap;letter-spacing:-1px;color:#253d32;margin-right:auto}
.brand-mark{color:#245c4f;font:32px Georgia,serif;letter-spacing:0}.brand-dot{color:#b26539;margin-left:-9px}
.site-links{display:flex;align-items:center;gap:28px}.site-links>a,.nav-group summary{font:500 13px var(--sans);color:#253d32;cursor:pointer;white-space:nowrap;text-decoration:none}
.nav-group{position:relative}.nav-group summary{list-style:none;padding:10px 0}.nav-group summary::-webkit-details-marker{display:none}.nav-group summary:after{content:'⌄';margin-left:7px;color:#657467}
.nav-menu{position:absolute;top:42px;left:-18px;width:290px;background:#fffefb;padding:12px;border:1px solid #dedfd3;border-radius:8px;box-shadow:0 16px 35px #253d3220;z-index:20}
.nav-menu a{display:block;padding:10px 12px;color:#253d32;border-radius:4px}.nav-menu a:hover{background:#edf0e5}.nav-menu span{display:block;font-size:11px;font-weight:400;color:#647062;margin-top:3px}
.nav a.nav-workspace{font-size:12px;border:1px solid #bcc4b6;border-radius:5px;padding:10px 15px;white-space:nowrap;color:#253d32}.nav-workspace span{margin-left:12px}
@media(max-width:950px){.nav-in.wrap{padding:16px 24px;gap:16px;flex-wrap:wrap}.site-links{order:3;width:100%;justify-content:space-between;gap:12px}.nav-menu{left:0}.nav-group:nth-of-type(2) .nav-menu{left:auto;right:0}.nav .brand{font-size:22px}}
@media(max-width:480px){.nav-in.wrap{padding:12px 18px;gap:8px}.site-links>a,.nav-group summary{font-size:11px}.nav a.nav-workspace{font-size:11px;padding:8px}.site-links{gap:8px}.nav-menu{width:260px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
@media print{.nav,.skip{display:none}}
@media(max-width:480px){.nav .brand{font-size:20px;gap:6px}.brand-mark{font-size:25px}.brand-dot{margin-left:-6px}}
@media(max-width:380px){.site-links{gap:4px}.site-links>a,.nav-group summary{font-size:10px}.nav-group summary:after{margin-left:3px}}

/* A row of headline numbers under a heading: how many units, how many
   lessons, how many hours. Written for the book pages and now also used by
   the scope and sequence pages, so it lives here rather than in read.css
   where only one of the two could reach it. */
.facts{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.5rem 0 2rem;padding:1rem 0;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.facts div{display:flex;flex-direction:column}
.facts b{font-family:var(--disp);font-size:1.5rem;line-height:1.1;color:var(--accent)}
.facts span{font-size:.8rem;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}

/* The address on every printed page.

   Paper is a first-class channel here -- lessons, worksheets, transcripts and
   the knowledge map all get printed and handed around -- and a printed page
   with no address on it cannot bring anyone back. position:fixed is what
   makes a browser repeat it on every sheet rather than once at the end, and
   @page reserves the room for it.

   bottom:0 rather than a few millimetres up, which took measuring a real PDF
   to get right. A fixed element in paged media is positioned against the
   content area, not the paper, so bottom:6mm put the footer *above* the last
   line of text and the content carried on underneath it. At bottom:0 it sits
   on the content area's edge, inside the margin @page reserved, and across a
   four-page worksheet no page has content below it.

   The domain is checked against site.config.json by tests/print-footer.py,
   so this cannot quietly disagree with the canonical URLs. */
@media print{
  body::after{content:"aldenhouse.org"; position:fixed; left:0; right:0; bottom:0;
    text-align:center; font:9.5pt/1 system-ui,-apple-system,sans-serif;
    letter-spacing:.04em; color:#6b736b}
  @page{margin-bottom:18mm}
}