/* ============================================================
   the Wooden Boat Atlas — page furniture.
   Loads AFTER ../style.css and ../foundation.css and leans on
   both: tokens, header/footer chrome, .page-top furniture and
   the §17b two-column .content-area/.main-col/.sidebar layout
   all come from the shared sheets. This file carries only what
   is atlas-specific: the atlasbar, the entry-card slab, kv /
   works / flags / sources anatomy, tiles, timeline, glossary,
   search, and the sidebar nav card.

   Accent: the atlas keeps its historical --rust token name but
   the VALUE is the Foundation's Library register (--lib, the
   verdigris green shared with the Maritime Glossary) — see
   ggwbf.org/Site-Notes-v1.md rev 1.1. Dark mode follows
   foundation.css automatically because the reference is a
   custom property, not a literal.
   ============================================================ */

:root{
  /* aliases into the shared token set */
  --card:var(--paper-2);
  --ink-soft:var(--ink-2);
  --ink-faint:var(--ink-3);
  --line-soft:var(--line-faint);
  --serif:var(--f-text);
  --sans:var(--f-ui);
  --display:var(--f-display);
  --mono:var(--f-mono);
  /* atlas-only colours */
  --blue:#2F5F68;            /* structure — foundation verdigris */
  --blue-deep:#244850;
  --rust:var(--lib, #38766B);/* attention — Library green; name kept, value revalued */
  --gold:var(--brass);       /* glossary underlines */
}
[data-theme="dark"]{
  --blue:#8FB6BE;
  --blue-deep:#A9CBD2;
}

/* ---------------------------------------------------------- base */
body.atlas-page{font-size:1.0625rem}
body.atlas-page main#main{
  font-size:18px;
  font-family:var(--serif);
  line-height:1.62;
  padding-bottom:3rem;
  background-image:
    linear-gradient(rgba(47,95,104,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,95,104,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
[data-theme="dark"] body.atlas-page main#main{background-image:none}
main#main a{color:var(--blue);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--blue) 28%,transparent)}
main#main a:hover{color:var(--rust);border-bottom-color:var(--rust)}
main#main .link-arrow{border-bottom:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--rust);color:#fff;padding:.6em 1em;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;z-index:200}
.skip:focus{left:0}
main#main a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* ------------------------------------------------- atlasbar
   Slim project bar under the fixed site header: small brand,
   tag, and the search box. Full width, above the page-top. */
.atlasbar{margin-top:var(--header-h);border-bottom:1px solid var(--line);background:var(--card)}
.atlasbar-inner{max-width:var(--site-max);margin:0 auto;padding:12px var(--gutter) 10px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem}
.atlasbar a{text-decoration:none}
.atlasbar .brand-sm{font-family:var(--display);font-weight:480;font-size:1.25rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-deep);border:0}
.atlasbar .brand-sm:hover{color:var(--rust)}
.atlasbar .tag-sm{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
.atlasbar .searchbar{margin:0 0 0 auto;flex:0 1 22rem}

/* atlas pages carry the atlasbar, so the shared .page-top must
   not add header clearance a second time */
body.atlas-page .page-top{padding-top:clamp(2rem,5vh,3.4rem)}
body.atlas-page .page-top-inner > .page-lede:last-child{margin-bottom:2rem}
.atlas-crumb{margin:0}
.atlas-crumb a{color:inherit;text-decoration:none;border-bottom:0}
.atlas-crumb a:hover{color:var(--rust)}
.page-lede.atlas-sub{font-style:italic}
.page-lede.atlas-sub em{font-style:normal}

/* ----------------------------------------------------- search */
.searchbar{position:relative}
#q{width:100%;font-family:var(--serif);font-size:.95rem;padding:.5em .8em;
  background:var(--paper);border:1px solid var(--line);color:var(--ink)}
#q:focus{outline:0;border-color:var(--rust);box-shadow:0 0 0 2px color-mix(in srgb,var(--rust) 14%,transparent)}
#q::placeholder{color:var(--ink-faint)}
#results{position:absolute;z-index:140;left:0;right:0;top:calc(100% + 4px);background:var(--card);
  border:1px solid var(--line);box-shadow:0 6px 20px rgba(27,38,48,.14);max-height:60vh;overflow:auto}
#results a{text-decoration:none}
.r-item{display:block;padding:.5em .8em;border:0;border-bottom:1px solid var(--line-soft)}
.r-item:last-child{border-bottom:0}
.r-item:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
.r-kind{font-family:var(--sans);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rust);display:block}
.r-name{color:var(--blue-deep);font-size:1.02rem}
.r-sub{display:block;font-size:.82rem;color:var(--ink-soft);font-style:italic}
.r-none{padding:.7em .8em;color:var(--ink-faint);font-size:.9rem}

/* -------------------------------------------------- headings */
main#main h2.page{font-family:var(--display);font-size:2rem;margin:0 0 .2em;font-weight:420;
  letter-spacing:-.01em;color:var(--blue-deep)}
main#main p.page-sub{margin:0 0 1.8em;color:var(--ink-soft);font-style:italic}
main#main h3.group{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rust);margin:2.4em 0 .9em;padding-bottom:.5em;border-bottom:1px solid var(--line)}
main#main h3.group:first-child{margin-top:0}
main#main h3.group a{border-bottom:0;color:inherit}
main#main h4{font-family:var(--display);font-weight:460}

/* ---------------------------------------------- entry card slab */
.entry-card{
  background:var(--card);border:1px solid var(--line);
  box-shadow:2px 2px 0 rgba(27,38,48,.05);
  padding:26px 28px;margin:0 0 26px;position:relative}
.entry-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);opacity:.5}
.entry-card h3.name{margin:0;font-family:var(--display);font-size:1.6rem;font-weight:460;line-height:1.2;color:var(--blue-deep)}
.entry-card h3.name a{border:0;color:inherit}
.entry-card h3.name a:hover{color:var(--rust)}
.entry-card .sub{margin:.35rem 0 0;font-style:italic;color:var(--ink-soft);font-size:.98rem}
.entry-card .meta{margin:.7rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.entry-card .meta span+span:before{content:"·";margin:0 .55em;color:var(--line)}
.rule{height:1px;background:var(--line-soft);margin:18px 0}
.summary{margin:0;font-size:1.06rem}
.essay p{margin:0 0 1em}
.essay p:first-child:first-letter{
  float:left;font-size:3.1rem;line-height:.82;padding:.06em .1em 0 0;color:var(--rust)}

dl.kv{margin:0;display:grid;grid-template-columns:minmax(90px,180px) 1fr;gap:.35rem 1.2rem;font-size:.95rem}
dl.kv dt{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:.35em}
dl.kv dd{margin:0}

ul.works{list-style:none;margin:0;padding:0;font-size:.96rem}
ul.works li{padding:.3em 0;border-bottom:1px dotted var(--line-soft)}
ul.works li:last-child{border-bottom:0}
ul.works .yr{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--rust);
  display:inline-block;min-width:5.5em}
ul.works .nm{font-style:italic}
ul.works .nt{color:var(--ink-soft)}

.flags{background:color-mix(in srgb,var(--rust) 7%,transparent);border-left:3px solid var(--rust);padding:12px 16px;margin:18px 0 0}
.flags .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);display:block;margin-bottom:.4em}
.flags ul{margin:0;padding-left:1.1em;font-size:.92rem;color:var(--ink-soft)}
.flags li{margin:.3em 0}

.sources{margin:18px 0 0;font-size:.86rem}
.sources .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:.4em}
.sources ol{margin:0;padding-left:1.3em;color:var(--ink-soft)}
.sources li{margin:.25em 0}
.priv{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:.1em .35em;margin-left:.4em;white-space:nowrap}
.priv-note{display:block;font-size:.82rem;color:var(--ink-faint);font-style:italic}

/* the quiet licence-and-build line that closes every main column */
.foot-line{margin:2.6em 0 0;padding-top:1em;border-top:1px solid var(--line);
  font-size:.84rem;color:var(--ink-faint)}

/* -------------------------------------------------- index tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:0 0 8px}
.tile{background:var(--card);border:1px solid var(--line);padding:14px 16px}
.tile:hover{border-color:var(--rust)}
.tile a{border:0;font-size:1.06rem;color:var(--blue-deep)}
.tile a:hover{color:var(--rust)}
.tile .t-sub{font-size:.84rem;color:var(--ink-soft);font-style:italic;margin-top:.15em;line-height:1.4}
.tile .t-meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.4em}

/* ----------------------------------------------------- timeline */
.era{margin:0 0 34px;border-left:3px solid var(--line);padding-left:22px;position:relative}
.era:before{content:"";position:absolute;left:-8px;top:.55em;width:13px;height:13px;
  background:var(--rust);border:2px solid var(--paper);border-radius:50%}
.era h3{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:460;color:var(--blue-deep)}
.era .span{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:.2em 0 .8em}
ul.markers{list-style:none;margin:.9em 0 0;padding:0;font-size:.94rem}
ul.markers li{padding:.22em 0 .22em 1.1em;position:relative;color:var(--ink-soft)}
ul.markers li:before{content:"—";position:absolute;left:0;color:var(--line)}
.era .pop{margin:1em 0 0;font-size:.9rem;color:var(--ink-soft)}
.era .pop .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:.3em}

.tlchart{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--line);margin:0 0 .6em}
.tl-era{fill:var(--blue);opacity:.30}
.tlchart a:hover .tl-era{opacity:.62}
.tl-lab{font-family:var(--sans);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;fill:var(--blue-deep)}
.tl-yr{font-family:var(--mono);font-size:9px;letter-spacing:.12em;fill:var(--ink-faint)}
.tl-bar{fill:var(--rust);opacity:.55}
.tl-key{font-size:.82rem;color:var(--ink-faint);margin:0 0 2em;font-style:italic}

.erabar{font-size:.92rem;line-height:2}
.erabar .ct{font-family:var(--mono);font-size:.6rem;color:var(--ink-faint);vertical-align:.35em;margin-left:.15em}
.eranav{margin:2.4em 0 0;padding-top:1em;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1em;font-family:var(--sans);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase}
.eranav a{border:0}

/* ----------------------------------------------------- glossary */
.gloss dt{font-size:1.05rem;color:var(--blue-deep);margin-top:1.1em}
.gloss dd{margin:.2em 0 0;color:var(--ink-soft)}
.gloss .gnote{display:block;font-size:.88rem;color:var(--ink-faint);margin-top:.2em}
.lvl{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--blue);
  border:1px solid var(--line);padding:.1em .3em;margin-left:.5em;vertical-align:.15em;white-space:nowrap}
pre.code{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:.78rem;line-height:1.5;color:var(--ink-soft)}

/* glossary terms auto-linked in prose */
a.lex{border-bottom:1px dotted var(--gold) !important;color:inherit !important}
a.lex:hover{color:var(--rust) !important;border-bottom-color:var(--rust) !important}

/* filter chips */
.filters{background:var(--card);border:1px solid var(--line);padding:14px 16px;margin:0 0 22px}
.filters .row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0 0 .5rem}
.filters .row:last-child{margin-bottom:0}
.filters .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);min-width:4.5em}
.chip{font-family:var(--sans);font-size:.66rem;letter-spacing:.06em;padding:.25em .6em;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);cursor:pointer}
.chip:hover{border-color:var(--rust);color:var(--rust)}
.chip.on{background:var(--rust);border-color:var(--rust);color:var(--paper)}
#gq{flex:1;min-width:150px;font-family:var(--serif);font-size:.9rem;padding:.3em .6em;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
#gcount{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ------------------------------------------------ archives page */
.arch-group{margin:0 0 8px}
.arch{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  padding:18px 22px;margin:0 0 14px}
.arch h4{margin:0;font-size:1.2rem;color:var(--blue-deep)}
.arch h4 a{border:0;color:inherit}
.arch h4 a:hover{color:var(--rust)}
.arch .host{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:.3em 0 .7em}
.arch p{margin:0 0 .7em;font-size:.98rem}
.arch .acc{font-size:.88rem;color:var(--ink-soft);border-top:1px dotted var(--line-soft);padding-top:.6em}
.arch .acc b{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:400}
.arch ul.use{margin:.5em 0 0;padding-left:1.1em;font-size:.9rem;color:var(--ink-soft)}

/* -------------------------------------------------- home / landing */
.intro{border:1px solid var(--line);border-left:4px solid var(--rust);background:var(--card);
  padding:26px 28px;margin:0 0 30px}
.intro p{margin:0 0 .9em}
.intro p:last-child{margin-bottom:0}
.statline{display:flex;flex-wrap:wrap;gap:1.6rem;margin:26px 0 0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.statline b{display:block;font-family:var(--serif);font-size:1.9rem;letter-spacing:0;
  text-transform:none;color:var(--blue-deep);font-weight:400}
.ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:0 0 8px}
.way{display:block;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--rust);
  padding:16px 18px}
.way:hover{border-color:var(--rust)}
.way b{display:block;font-weight:400;font-size:1.2rem;color:var(--blue-deep)}
.way span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:.3em;line-height:1.45}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:8px}
.estrip{display:block;background:var(--card);border:1px solid var(--line);padding:10px 12px}
.estrip:hover{border-color:var(--rust)}
.estrip b{display:block;font-weight:400;font-size:.98rem;color:var(--blue-deep)}
.estrip span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.25em}
.homefoot{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  margin-top:2em;padding-top:1em;border-top:1px solid var(--line)}

/* ------------------------------------------- sidebar furniture
   Cards use the shared .sidebar-inner/.sidebar-heading. These
   rules dress the atlas-specific contents of those cards. */
.sidebar .rel{margin:.55em 0;font-size:.9rem}
.sidebar .rel .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);display:block;margin-bottom:.15em}
.sidebar .rel a{color:var(--blue);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--blue) 28%,transparent)}
.sidebar .rel a:hover{color:var(--rust);border-bottom-color:var(--rust)}
.cite-text{font-size:.88rem}
.cite-url{font-family:var(--mono);font-size:.74rem;word-break:break-all;color:var(--ink-soft);margin:.5em 0}

/* the "In the Atlas" nav card */
.atlas-nav .grp{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin:1.1em 0 .3em}
.atlas-nav .sidebar-heading+.grp{margin-top:0}
.atlas-nav ul{list-style:none;margin:0;padding:0}
.atlas-nav li{margin:0}
.atlas-nav a{display:block;padding:.34em 0;border-bottom:1px solid var(--line-soft);text-decoration:none;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft)}
.atlas-nav li:last-child a{border-bottom:0}
.atlas-nav a:hover{color:var(--rust)}
.atlas-nav a.on{color:var(--rust);border-bottom-color:var(--rust)}
.atlas-letters{display:flex;flex-wrap:wrap;gap:.15rem .55rem;font-family:var(--mono);font-size:.78rem}
.atlas-letters a{text-decoration:none;color:var(--blue);border-bottom:0;padding:.1em .15em}
.atlas-letters a:hover{color:var(--rust)}

/* ≤1179px the shared .content-area collapses to one column and
   the sidebar stacks below the main column. The nav card then
   reads as a compact wrapping link strip, not a tall list. */
@media (max-width:1179px){
  .atlas-nav ul{display:flex;flex-wrap:wrap;gap:.25rem .9rem}
  .atlas-nav a,.atlas-nav li:last-child a{border-bottom:1px solid var(--line-soft);padding:.15em 0}
  .atlas-nav a.on{border-bottom-color:var(--rust)}
  .atlas-nav .grp{margin:.8em 0 .25em}
  .atlasbar .searchbar{flex:1 1 100%;margin-left:0}
}
@media (max-width:640px){
  body.atlas-page main#main{font-size:17px}
  .entry-card{padding:20px 18px}
  dl.kv{grid-template-columns:1fr;gap:.1rem}
  dl.kv dd{margin:0 0 .6em}
}