/* SLP'edia: Reading Lamp design (day only).
   Palette rationale and sources: docs/design.md and docs/color-evidence.md.
   Fonts: DM Sans and Big Shoulders, self-hosted under the SIL Open Font License 1.1 (see assets/fonts/). */
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans/DMSans-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Big Shoulders";src:url("fonts/big-shoulders/BigShoulders-latin.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
/* Reading Room layout, Atomic Dawn family: 2.5px ink lines, 4px hard shadows, red only on the logo star and the New badge. */
:root{
  /* Reading Lamp: cream page and cards, butter yellow co-colour, navy accent. Note: --teal holds the navy accent (name kept from the Atomic Dawn base). */
  --bg:#faf3e0; --bg-m:#faf3e0;
  --paper:#fffaf0; --paper-2:#fffaf0; --card:#fffcf5; --ink:#1b1f3b; --muted:#4a4636; --line:#ebddc6; --edge:#1b1f3b;
  --red:#c8321e; --teal:#1f3a68; --teal-tint:#dde8f5; --mustard:#f4b82e; --blush:#f6d26b; --pink:#f6d26b; --hl:#f6d26b;
  --hero-fg:#1b1f3b; --lede:#4a4636; --wm:#1b1f3b; --foot:#1b1f3b;
  --ill-sky:linear-gradient(180deg,#fdf5dc 0%,#fbe7b3 70%,#f6d78e 100%); --ill-filter:none; --cloud:#fffaf0; --shelf-wood:#fff3e0; --lw:2.5px;
  --sh:4px 4px 0 var(--ink); --sh-teal:4px 4px 0 var(--ink); --hover-sh:#1f3a68;
  --c-tools:#f9dfa0; --c-technology:#d6ecea; --c-research:#f7dcc4; --c-guides:#fbe8b5;
  --tag-fg:#f6d26b; --cta:#1f3a68; --cta-fg:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.disp{font-family:"Big Shoulders","Arial Narrow",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:.95}

/* top bar: wordmark, plus one plainly labeled link on wider screens */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}
.wm{display:flex;align-items:center;gap:10px}
.wm .star{position:relative;width:42px;height:42px;display:grid;place-items:center}
.wm .star svg{position:absolute;inset:0;animation:spin 40s linear infinite}
.wm .star b{position:relative;font-family:"Big Shoulders","Arial Narrow",sans-serif;font-weight:800;font-size:17px;color:#fff;line-height:1}
.wm .t{font-family:"Big Shoulders","Arial Narrow",sans-serif;font-weight:800;font-size:27px;letter-spacing:.12em;line-height:1;color:var(--wm)}
.top-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:16px;color:var(--teal);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.top-link:hover{text-decoration-color:var(--hl)}

/* hero: centered headline and one short line */
.hero{max-width:900px;margin:0 auto;padding:30px 0 26px;text-align:center}
.hero h1{font-size:64px;color:var(--hero-fg);text-wrap:balance}
.lede{font-size:20px;line-height:1.45;color:var(--lede);max-width:32em;margin:16px auto 0;text-wrap:balance}

/* illustration (now in the Suggest card) */
.ill{border:var(--lw) solid var(--edge);border-radius:22px;overflow:hidden;background:var(--ill-sky)}
.ill svg{display:block;width:100%;height:auto}

/* search and filters, centered under the headline */
.controls{max-width:920px;margin:0 auto 40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.search{display:flex;align-items:center;gap:12px;width:100%;max-width:680px;min-height:62px;padding:0 8px 0 24px;border:var(--lw) solid var(--edge);border-radius:999px;background:var(--card);box-shadow:var(--sh)}
.search:focus-within{outline:3px solid rgba(31,58,104,.45);outline-offset:3px}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 19px "DM Sans",system-ui,sans-serif;color:var(--ink)}
.search input::placeholder{color:var(--muted);opacity:1}
.search .g{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#fff;flex:none}
.search .g svg{width:22px;height:22px}
.status{font-weight:700;font-size:15px;color:var(--muted);text-align:center;min-height:1.5em}
.filters{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.cats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.cat{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 10px 0 18px;border:var(--lw) solid var(--edge);border-radius:999px;background:var(--card);font-weight:700;font-size:17px;transition:background .2s}
.cat:hover{background:var(--paper)}
.cat[aria-pressed="true"]{background:var(--hl);color:#1b1f3b}
.topics{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.topics .lbl{font-weight:700;font-size:15px;color:var(--muted)}
.topic{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border:2px solid var(--line);border-radius:999px;background:var(--card);font-weight:600;font-size:15px;transition:border-color .2s,background .2s}
.topic:hover{border-color:var(--ink)}
.topic[aria-pressed="true"]{border-color:var(--edge);background:var(--hl);color:#1b1f3b}
.selects{display:none;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.sel{display:flex;flex-direction:column;gap:4px;min-width:0}
.sel span{font-size:14px;font-weight:700;color:var(--muted);padding-left:4px}
.sel select{-webkit-appearance:none;appearance:none;width:100%;min-height:50px;padding:0 38px 0 14px;border:var(--lw) solid var(--edge);border-radius:14px;color:var(--ink);font:600 16px "DM Sans",system-ui,sans-serif;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b1f3b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px 18px}

/* shelves */
.shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.shelves.solo{grid-template-columns:minmax(0,1fr)}
.shelf{min-width:0;border-radius:30px;padding:0 0 18px;transition:opacity .3s}
.shelf-h{display:flex;align-items:center;gap:14px;padding:18px 20px;margin-bottom:16px;border:var(--lw) solid var(--edge);border-radius:24px;background:var(--shelf-bg)}
.shelf-h .ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:var(--lw) solid var(--edge);flex:none}
.shelf-h .ic svg{width:24px;height:24px}
.shelf-h h2{font-size:34px}
.shelf-h p{font-size:15px;color:var(--muted);line-height:1.35;margin-top:3px}
.shelf-h .cnt{margin-left:auto;font-family:"Big Shoulders","Arial Narrow",sans-serif;font-weight:800;font-size:38px;line-height:1;opacity:.85}
.list{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.shelves.solo .list,.guides .list{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px 20px 16px;border:var(--lw) solid var(--edge);border-radius:22px;background:var(--card);box-shadow:var(--sh-teal);transition:transform .22s cubic-bezier(.3,1.6,.6,1),box-shadow .22s;animation:rise .45s both}
.card:hover{transform:translate(-2px,-4px) rotate(-.4deg);box-shadow:7px 8px 0 var(--teal)}
.card:hover{box-shadow:7px 8px 0 var(--hover-sh)}
.card h3{font-size:19px;line-height:1.25;font-weight:700;padding-right:34px}
.card .sum{font-size:16px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.new{position:absolute;top:-12px;left:18px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--red);color:#fff;border:2px solid #1b1f3b;border-radius:999px;padding:1px 10px}
.more{margin-top:16px;width:100%;min-height:52px;border:2px dashed var(--edge);border-radius:999px;background:var(--paper);font-weight:700;font-size:16px;transition:background .2s}
.more:hover{background:var(--shelf-bg);border-style:solid}
.empty{background:var(--paper);padding:26px 20px;border:2px dashed var(--muted);border-radius:22px;text-align:center;color:var(--muted);font-size:16px}
.guides{margin-top:34px}

/* suggest */
.suggest{display:grid;grid-template-columns:260px 1fr auto;gap:32px;align-items:center;margin:56px 0 0;padding:28px 34px;border:var(--lw) solid var(--edge);border-radius:32px;background:var(--card);box-shadow:var(--sh-teal)}
.suggest h2{font-size:40px}
.suggest p{margin-top:8px;color:var(--muted);font-size:18px;max-width:34em}
.suggest p.alt{margin-top:12px;font-size:16px}
.suggest p.alt a{color:var(--teal);font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 30px;border:3px solid #1b1f3b;border-radius:999px;background:var(--cta);color:var(--cta-fg);font-weight:700;font-size:19px;box-shadow:5px 5px 0 #1b1f3b;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn svg{width:24px;height:24px}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 #1b1f3b}
.btn:active{transform:translate(5px,5px);box-shadow:none}
footer{padding:40px 0 50px;text-align:center;color:var(--foot);font-size:15px;line-height:1.8}
footer a{text-decoration:underline;text-underline-offset:3px;font-weight:600}

:focus-visible{outline:3px solid rgba(14,110,115,.6);outline-offset:3px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-5px)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

.shelf-h .ic{background:var(--teal);color:#fff}
@media (max-width:1100px){
  .hero h1{font-size:58px}
  .shelves.solo .list,.guides .list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suggest{grid-template-columns:220px 1fr;}
  .suggest .btn{grid-column:1 / -1;justify-self:center}
}
@media (max-width:900px){
  .wrap{padding:0 18px}
  .shelves{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .filters{display:none}
  .selects{display:grid}
}
@media (max-width:560px){
  html{font-size:17px}
  .top{min-height:64px;justify-content:center}
  .top-link{display:none}
  .wm .t{font-size:23px}
  .hero{padding:8px 0 18px}
  .hero h1{font-size:40px}
  .lede{font-size:17px;margin-top:10px}
  .controls{gap:10px;margin-bottom:28px}
  .search{min-height:58px;padding-left:18px}
  .search input{font-size:17px}
  .shelves.solo .list,.guides .list{grid-template-columns:minmax(0,1fr)}
  .shelf-h h2{font-size:30px}
  .suggest{grid-template-columns:minmax(0,1fr);padding:22px 20px 24px;gap:16px;text-align:center}
  .suggest h2{font-size:32px}
  .suggest p{margin-left:auto;margin-right:auto}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.load-error{background:var(--paper);padding:26px 20px;border:2px dashed var(--muted);border-radius:22px;text-align:center;font-size:16px}
.nw{white-space:nowrap}

/* Hero art, variant A: the reading room, now talking. Speech bubbles rise from the books.
   A navy band runs behind the lower half of the drawing for contrast. */
.hero{padding-bottom:22px}
.hero-art{position:relative;max-width:640px;margin:0 auto 30px;padding:0 0 26px}
.hero-art::before{content:"";position:absolute;left:0;right:0;top:52%;bottom:0;background:#1f3a68;box-shadow:0 0 0 100vmax #1f3a68;clip-path:inset(0 -100vmax)}
.hero-art .ill{position:relative;border:3px solid var(--edge);border-radius:26px;box-shadow:7px 7px 0 #F6D26B}
.bub{animation:bob 4s ease-in-out infinite;transform-box:fill-box}
.bub.b2{animation-delay:-1.3s} .bub.b3{animation-delay:-2.6s}
/* the reading room now lives at the top, so the Suggest card drops its copy */
.suggest .ill{display:none}
.suggest{grid-template-columns:1fr auto}
@media (max-width:1100px){.suggest{grid-template-columns:1fr}}
@media (max-width:560px){
  .hero{padding-bottom:14px}
  .hero-art{margin-bottom:18px;padding-bottom:16px}
  .hero-art .ill{border-radius:20px;box-shadow:5px 5px 0 #F6D26B}
}

/* Hero fit: on laptop and desktop screens the logo, headline, line of text and the whole
   reading-room drawing share the first screen. Headline and spacing scale with screen height,
   and the drawing is capped to the height that is left, so its base and the navy band stay in view. */
@media (min-width:561px){
  :root{
    --top-h:clamp(56px,11vh,80px);
    --hero-pt:clamp(6px,2.5vh,30px);
    --h1-fs:clamp(36px,min(5.6vw,8vh),64px);
    --lede-fs:clamp(16px,2.9vh,20px);
    --lede-mt:clamp(6px,1.6vh,16px);
    --hero-pb:clamp(12px,2.6vh,22px);
    --art-pb:clamp(14px,3vh,26px);
    --screen-h:100vh;
  }
  @supports (height:100svh){
    :root{
      --top-h:clamp(56px,11svh,80px);
      --hero-pt:clamp(6px,2.5svh,30px);
      --h1-fs:clamp(36px,min(5.6vw,8svh),64px);
      --lede-fs:clamp(16px,2.9svh,20px);
      --lede-mt:clamp(6px,1.6svh,16px);
      --hero-pb:clamp(12px,2.6svh,22px);
      --art-pb:clamp(14px,3svh,26px);
      --screen-h:100svh;
    }
  }
  .top{min-height:var(--top-h)}
  .hero{padding:var(--hero-pt) 0 var(--hero-pb)}
  .hero h1{font-size:var(--h1-fs)}
  .lede{font-size:var(--lede-fs);margin-top:var(--lede-mt)}
  /* everything above the drawing: top bar, padding, two headline lines, two lines of text */
  .hero-art{
    --above:calc(var(--top-h) + var(--hero-pt) + var(--h1-fs) * 1.9 + var(--lede-mt) + var(--lede-fs) * 2.9 + var(--hero-pb));
    /* drawing is 600x280 plus a 3px border; leave a little room below the navy band */
    width:min(640px,100%,calc((var(--screen-h) - var(--above) - var(--art-pb) - 16px) * 600 / 280));
    min-width:min(420px,100%);
    max-width:none;
    padding-bottom:var(--art-pb);
  }
}

/* Simple cards, coloured by shelf: each card takes its shelf's soft tint, each header the full colour.
   Each shelf has one colour (--s) and a soft tint of it (--t). All are drawn from the Reading Lamp
   palette and the reading-room drawing: butter, teal, coral and a light navy.
   Ink text (#1b1f3b) on every --s and --t passes WCAG AA (lowest is 6.7:1). */
:root{
  --s-tools:#F6D26B;      --t-tools:#FCEFC4;
  --s-technology:#7CC4BE; --t-technology:#DCF0EE;
  --s-research:#F09A7E;   --t-research:#FBE1D7;
  --s-guides:#8FA9D1;     --t-guides:#E3EBF6;
}
.shelf-tools,.cat-tools{--s:var(--s-tools);--t:var(--t-tools)}
.shelf-technology,.cat-technology{--s:var(--s-technology);--t:var(--t-technology)}
.shelf-research,.cat-research{--s:var(--s-research);--t:var(--t-research)}
.shelf-guides,.cat-guides{--s:var(--s-guides);--t:var(--t-guides)}

/* filter buttons: a colour dot names the shelf; selected fills with that colour */
.cat{padding:0 18px;gap:10px}
.cat .dot{width:14px;height:14px;border-radius:50%;background:var(--s);border:2px solid var(--edge);flex:none}
.cat:hover{background:var(--t,var(--paper))}
.cat[aria-pressed="true"]{background:var(--s);color:#1b1f3b}
.cat[aria-pressed="true"] .dot{background:#fff}
.cat-all[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.topic[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
/* phone dropdowns take the chosen shelf's colour */
.sel select[data-shelf="tools"]{background-color:var(--s-tools)}
.sel select[data-shelf="technology"]{background-color:var(--s-technology)}
.sel select[data-shelf="research"]{background-color:var(--s-research)}
.sel select[data-shelf="guides"]{background-color:var(--s-guides)}
.sel select[data-on="1"]{background-color:var(--teal-tint)}
/* Clear filters: a plain text button, only shown when a shelf or topic is picked */
.clear{min-height:44px;padding:0 14px;font-weight:700;font-size:16px;color:var(--teal);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;border-radius:10px}
.clear:hover{background:var(--paper)}
.clear[hidden]{display:none}

/* shelf header: the shelf's full colour, with ink text for contrast */
.shelf-h{background:var(--s)}
.shelf-h p{color:var(--ink)}
.shelf-h .ic{background:var(--card);color:var(--ink)}

/* the card: title plus one line, the whole thing is the link */
.card{gap:4px;padding:14px 18px 14px 20px;border-radius:18px;background:var(--t);box-shadow:3px 3px 0 var(--ink);animation:none}
.card h3{font-size:18px;padding-right:0}
.card .sum{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ink);background:var(--card)}
.card:hover h3,.card:focus-visible h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.card:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.list{gap:12px}
.new{top:-11px}
.more{background:var(--t);border-color:var(--edge)}
.more:hover{background:var(--s)}

/* Newsletter: one filled navy button in the top bar, on every screen size */
.top-links{display:flex;align-items:center;gap:22px}
.nl{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:3px solid #1b1f3b;border-radius:999px;background:var(--teal);color:#fff;font-weight:700;font-size:17px;box-shadow:4px 4px 0 #1b1f3b;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.nl:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #1b1f3b}
.nl:active{transform:translate(4px,4px);box-shadow:none}
@media (max-width:560px){
  .top{justify-content:space-between}
  .nl{min-height:46px;padding:0 20px;font-size:16px}
}

/* Equal cards: every card is as tall as one with a three-line title and a one-line summary.
   Longer titles end in an ellipsis after three lines. Shelves share rows, so headers and cards line up. */
.card{min-height:127.75px} /* 2 x 14px padding + 2 x 2.5px border + 3 x 22.5px title + 4px gap + 23.25px summary */
.card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-height:calc(1.25em * 3)}
@supports (grid-template-rows:subgrid){
  .shelves{grid-template-rows:auto auto auto}
  .shelf{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-self:stretch}
}

/* GitHub: a small text link with the GitHub mark, styled like "Email a suggestion".
   Narrow screens keep the word visible and never get wider than the screen:
   561-660px stacks the two text links beside the Newsletter button; phones put GitHub on its own line under the button. */
.gh{gap:6px;white-space:nowrap}
.gh svg{flex:none;width:18px;height:18px}
@media (min-width:561px) and (max-width:660px){
  .top-links{display:grid;grid-template-columns:auto auto;gap:0 20px;align-items:center;justify-items:end}
  .top-links .top-link{grid-column:1;min-height:32px}
  .top-links .nl{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:560px){
  .top{padding:8px 0}
  .top-links{flex-direction:column-reverse;align-items:center;gap:2px}
  .top-link.gh{display:inline-flex;min-height:30px;font-size:15px;gap:5px;text-underline-offset:4px}
  .gh svg{width:16px;height:16px}
}