/* Ilisaqsivik, 20x door: "The Atlas".
   The site is the place itself, surveyed the way Ilisaqsivik's own
   Knowledge Atlas surveys Clyde River: you arrive at the surface and
   descend. The page deepens in colour as you go down. Every part of
   the society is a named place, reached from one contents.
   All values are tokens. No amber path, no house signature. */

:root{
  /* the water column, sampled from their own brand colours (AUDIT.md) */
  --surface:#EAF4F2;     /* foam, the surface light */
  --pale:#DDEEEA;
  --sea:#65A7B4;
  --sea-bright:#6EC1E4;
  --deep:#0C2B33;
  --abyss:#050F14;
  --spruce:#002E29;
  --sage:#96BF9E;
  --sun:#F0A842;          /* the returning light, used once per page */
  --brick:#CB4438;       /* only for the one urgent line */
  --peach:#FFBC7D;
  --ink:#12262B;
  --ink-soft:#3D5A60;
  --foam:#EAF4F2;
  --foam-soft:#B9D2CC;
  --line-d:rgba(18,38,43,.22);
  --line-l:rgba(234,244,242,.26);

  --font-display:Georgia,"Times New Roman","Noto Sans Canadian Aboriginal","Euphemia UCAS",serif;
  --font-body:"Avenir Next","Segoe UI",system-ui,"Noto Sans Canadian Aboriginal","Euphemia UCAS",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Noto Sans Canadian Aboriginal",monospace;
  --fs-hero:clamp(2.3rem,7vw,4.2rem);
  --fs-h2:clamp(1.7rem,4vw,2.5rem);
  --fs-h3:1.2rem;
  --fs-body:1.02rem;
  --fs-small:.86rem;
  --fs-mono:.82rem;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --radius:6px;
  --width:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.62;font-variant-numeric:tabular-nums;background:var(--surface)}
img{max-width:100%;height:auto}
a{color:var(--spruce)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 var(--s2)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--s2)}
.wrap{max-width:var(--width);margin:0 auto;padding:0 var(--s3)}
.mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.lede{font-size:1.13rem;line-height:1.55}
.small{font-size:var(--fs-small)}

/* page tones: each place sits at its own depth */
body.descent{background:linear-gradient(180deg,var(--surface) 0%,var(--pale) 16%,var(--sea) 40%,#2E6B7A 60%,var(--deep) 82%,var(--abyss) 100%)}
body.band-sea{background:linear-gradient(180deg,var(--pale) 0%,#A9CBD2 55%,var(--sea) 130%)}
body.band-deep{background:linear-gradient(180deg,var(--deep) 0%,var(--abyss) 90%);color:var(--foam)}
body.band-spruce{background:linear-gradient(180deg,var(--spruce) 0%,var(--deep) 70%,var(--abyss) 120%);color:var(--foam)}
body.band-light{background:linear-gradient(180deg,var(--surface) 0%,var(--pale) 80%)}
body.band-deep a,body.band-spruce a{color:var(--sea-bright)}
body.band-deep h1,body.band-deep h2,body.band-deep h3,body.band-spruce h1,body.band-spruce h2,body.band-spruce h3{color:#fff}

/* ---------- the surface bar ---------- */
.surface-bar{position:relative;z-index:5}
.surface-bar-in{display:flex;align-items:center;gap:var(--s2);max-width:var(--width);margin:0 auto;padding:var(--s2) var(--s3)}
.surface-bar .mark{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;color:inherit}
.surface-bar .mark img{width:40px;height:40px}
.surface-bar .mark b{font-family:var(--font-mono);font-size:.95rem;letter-spacing:.14em}
.surface-bar .mark span{display:block;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.surface-bar .spacer{flex:1}
.surface-bar .depth{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.menu-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid currentColor;background:transparent;font:inherit;font-weight:700;color:inherit;cursor:pointer}
body.band-deep .surface-bar,body.band-spruce .surface-bar{color:var(--foam)}

/* the atlas, opened: every place, numbered */
.atlas{display:none;position:fixed;inset:0;z-index:40;background:var(--abyss);color:var(--foam);overflow:auto}
body.menu-open .atlas{display:block}
.atlas-in{max-width:var(--width);margin:0 auto;padding:var(--s4) var(--s3)}
.atlas .mono{color:var(--sea-bright)}
.atlas ol{list-style:none;margin:var(--s3) 0;padding:0}
.atlas li{border-top:1px solid var(--line-l)}
.atlas a{display:flex;align-items:baseline;gap:var(--s2);min-height:56px;padding:13px 2px;color:var(--foam);text-decoration:none}
.atlas a .no{font-family:var(--font-mono);color:var(--sun);font-size:var(--fs-mono)}
.atlas a b{font-family:var(--font-display);font-size:1.25rem;font-weight:600}
.atlas a span{opacity:.75;font-size:var(--fs-small)}
.atlas a:hover b{color:var(--sun)}
.atlas-close{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--foam);background:transparent;color:var(--foam);font:inherit;font-weight:700;cursor:pointer}

/* ---------- soundings: the places ---------- */
.place{padding:var(--s5) 0}
.place .sounding{display:flex;justify-content:space-between;gap:var(--s2);border-top:2px solid currentColor;padding-top:var(--s2);margin-bottom:var(--s3);font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase}
.place.deep{color:var(--foam)}
.place.deep a{color:var(--sea-bright)}
.place.deep h2,.place.deep h3{color:#fff}
.sun-line{width:64px;height:4px;background:var(--sun);border:0;margin:0 0 var(--s3)}
.hero h1{font-size:var(--fs-hero)}
.hero .iu-lede{line-height:1.9;max-width:60ch}
.plate{border:1px solid var(--line-d);background:rgba(255,255,255,.55);padding:var(--s2);margin-top:var(--s4)}
.plate img{width:100%;display:block}
.plate figcaption{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;padding-top:var(--s1);opacity:.8}
.fact-strip{border:2px solid var(--spruce);padding:var(--s2) var(--s3);margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);align-items:baseline;background:rgba(255,255,255,.5)}
.fact-strip .mono{color:var(--brick);font-weight:700}
.fact-strip b{font-size:1.05rem}

/* contents rows */
.contents{list-style:none;margin:0;padding:0}
.contents li{border-top:1px solid var(--line-d)}
.contents a{display:grid;grid-template-columns:52px 1fr auto;gap:var(--s2);align-items:baseline;min-height:56px;padding:13px 2px;text-decoration:none;color:var(--ink)}
.contents .no{font-family:var(--font-mono);color:var(--brick);font-size:var(--fs-mono)}
.contents b{font-family:var(--font-display);font-size:1.2rem;font-weight:600}
.contents span{font-size:var(--fs-small);color:var(--ink-soft)}
.contents .dep{font-family:var(--font-mono);font-size:var(--fs-mono);white-space:nowrap}
.contents a:hover b{color:var(--brick)}

/* the log: records in survey format */
.log{border-top:1px solid currentColor}
.log-row{display:grid;grid-template-columns:1.2fr .8fr .8fr .7fr;gap:6px var(--s3);padding:12px 2px;border-bottom:1px dashed;border-color:currentColor;font-size:.95rem}
.log-row b{font-weight:700}
.log-row .mono{text-transform:none;letter-spacing:.02em;font-size:.85rem}
.log-head{display:grid;grid-template-columns:1.2fr .8fr .8fr .7fr;gap:6px var(--s3);padding:8px 2px;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}

.figure-row{display:flex;flex-wrap:wrap;gap:var(--s4);padding:var(--s2) 0}
.figure b{font-family:var(--font-display);font-size:2.1rem;display:block;line-height:1}
.figure span{font-size:var(--fs-small);display:block;max-width:22ch;margin-top:6px;opacity:.85}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:12px 26px;border-radius:999px;background:var(--sun);color:var(--ink);text-decoration:none;font-weight:700;border:1.5px solid var(--sun)}
.btn:hover{background:var(--brick);border-color:var(--brick);color:#fff}
.btn.line{background:transparent;color:inherit;border-color:currentColor}
.btn.line:hover{background:var(--spruce);border-color:var(--spruce);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}

.floor{border-left:3px solid var(--sea);padding:4px 0 4px var(--s2);margin-bottom:var(--s3)}
.floor h3{margin-bottom:4px}
.floor .mono{color:var(--sea-bright)}
.panel{border:1px solid var(--line-l);border-radius:var(--radius);padding:var(--s3);margin:var(--s3) 0;background:rgba(255,255,255,.06)}
.panel.light{border-color:var(--line-d);background:rgba(255,255,255,.55)}
ul.tick{list-style:none;margin:0 0 var(--s3);padding:0}
ul.tick li{padding:9px 0 9px 24px;position:relative;border-bottom:1px dashed; border-color:currentColor}
ul.tick li::before{content:"";position:absolute;left:2px;top:17px;width:8px;height:8px;border-radius:50%;background:var(--sun)}
blockquote.duty{font-family:var(--font-display);font-size:1.22rem;line-height:1.5;margin:var(--s3) 0;padding-left:var(--s2);border-left:3px solid var(--sun)}
blockquote.duty span{display:block;font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:6px;opacity:.75}
.next-sounding{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);border-top:2px solid currentColor;margin-top:var(--s5);padding-top:var(--s2)}
.next-sounding a{display:inline-flex;align-items:center;min-height:48px;font-family:var(--font-display);font-size:1.15rem;text-decoration:none;font-weight:600}

/* signal rows (contact) */
.sig-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:56px;padding:12px 2px;border-bottom:1px dashed var(--line-l);text-decoration:none;color:var(--foam)}
.sig-row b{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sea-bright);font-weight:400}
.sig-row span{text-align:right}
div.sig-row{color:var(--foam)}
a.sig-row:hover span{color:var(--sun)}

/* colophon strip */
.colophon{border-top:1px solid var(--line-l);background:var(--abyss);color:var(--foam-soft)}
.colophon-in{max-width:var(--width);margin:0 auto;padding:var(--s3);font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:.06em;line-height:2}
.colophon .credit{color:#7E97A3}
.colophon a{color:var(--foam-soft)}

/* ---------- phone: the descent becomes the whole screen ---------- */
@media (max-width:760px){
  .place{padding:var(--s4) 0}
  .log-row,.log-head{grid-template-columns:1fr auto}
  .log-row .c-days,.log-head .c-days{display:none}
  .contents a{grid-template-columns:40px 1fr}
  .contents .dep{display:none}
  .surface-bar .depth{display:none}
  .next-sounding{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.contents a span:last-child{grid-column:2}
.contents .no{grid-row:1/3}
.contents .dep{grid-row:1/3;align-self:center}