/* Ilisaqsivik, Evolution door: "The Journey".
   Structure invented from the subject: the homepage is a life's path,
   six stations from before birth to the Elders and those who carry
   others. The path is the navigation. All values are tokens. */

:root{
  /* Fruit Chord, sampled from ilisaqsivik.ca global styles (see AUDIT.md) */
  --skin:#FAF2ED;        /* warm cream, the ground */
  --flesh:#FFBC7D;       /* peach */
  --seed:#002E29;        /* deep spruce */
  --stem:#96BF9E;        /* sage */
  --ripeness:#F0A842;    /* sun amber */
  --juice:#65A7B4;       /* sea blue */
  --juice-bright:#6EC1E4;
  --brick:#CB4438;       /* their red, used for the one urgent thing */
  --ink:#22332D;
  --ink-soft:#54645E;
  --paper:#FFFDF8;
  --line:#E7D8C9;
  --line-strong:#CDBBA6;

  /* type */
  --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;
  --fs-hero:clamp(2.1rem,6.2vw,3.6rem);
  --fs-h2:clamp(1.55rem,3.4vw,2.15rem);
  --fs-h3:1.22rem;
  --fs-lede:1.14rem;
  --fs-body:1.02rem;
  --fs-small:.88rem;
  --fs-record:.95rem;

  /* space and shape */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --radius:20px;
  --radius-sm:12px;
  --width:1140px;
  --path-w:3px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--skin);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.62;font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto}
a{color:var(--seed)}
a:hover{color:var(--brick)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--seed);line-height:1.18;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)}
.iu{font-family:var(--font-body)}
.small{font-size:var(--fs-small);color:var(--ink-soft)}
.lede{font-size:var(--fs-lede);line-height:1.55;color:var(--ink)}
.eyebrow{font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;color:var(--brick);font-weight:700;margin:0 0 var(--s1)}

/* ---------- masthead: a trailhead, not a nav bar ---------- */
.trailhead{border-bottom:1px solid var(--line);background:var(--skin)}
.trailhead-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);max-width:var(--width);margin:0 auto;padding:var(--s2) var(--s3)}
.trailhead .brand{display:flex;flex:0 0 auto;align-items:center;gap:12px;text-decoration:none;min-height:44px;padding-right:4px}
.trailhead .brand img{width:44px;height:44px}
.trailhead .brand b{font-family:var(--font-display);font-size:1.15rem;color:var(--seed);display:block;line-height:1.1}
.trailhead .brand span{font-size:var(--fs-small);color:var(--ink-soft);display:block}
.trailhead .spacer{flex:1}
.call-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1.5px solid var(--seed);border-radius:999px;text-decoration:none;font-weight:700;color:var(--seed);background:var(--paper)}
.call-chip:hover{background:var(--seed);color:var(--skin)}
.menu-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--paper);font:inherit;font-weight:700;color:var(--seed);cursor:pointer}
.menu-btn:hover{border-color:var(--seed)}

/* the full journey, opened: every station and room, one tap away */
.journey-menu{display:none;border-bottom:1px solid var(--line);background:var(--paper)}
body.menu-open .journey-menu{display:block}
.journey-menu-in{max-width:var(--width);margin:0 auto;padding:var(--s3)}
.journey-menu p{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.journey-menu ol{list-style:none;margin:0;padding:0;counter-reset:st}
.journey-menu li{border-top:1px solid var(--line)}
.journey-menu a{display:flex;align-items:baseline;gap:var(--s2);min-height:52px;padding:12px 4px;text-decoration:none;color:var(--ink)}
.journey-menu a b{font-family:var(--font-display);color:var(--seed);font-size:1.08rem}
.journey-menu a .iu{color:var(--brick);font-weight:700}
.journey-menu a:hover b{color:var(--brick)}

/* ---------- the opening: Inuktitut first ---------- */
.opening{padding:var(--s5) 0 var(--s4);position:relative;overflow:hidden}
.opening .sun{position:absolute;right:-30px;top:6px;width:190px;opacity:.9;pointer-events:none;z-index:0}
.opening .wrap{position:relative;z-index:1}
.opening .iu-word{font-size:var(--fs-small);letter-spacing:.14em;color:var(--brick);font-weight:700;text-transform:uppercase}
.opening h1{font-size:var(--fs-hero);max-width:16ch;margin-top:var(--s1)}
.opening .iu-lede{font-size:1.06rem;line-height:1.9;max-width:62ch;color:var(--ink)}
.opening .en-lede{max-width:62ch;color:var(--ink-soft);border-left:var(--path-w) solid var(--ripeness);padding-left:var(--s2)}
.opening .hero-art{margin-top:var(--s4);border-radius:var(--radius);background:var(--paper);padding:var(--s3);border:1px solid var(--line)}
.opening .hero-art img{width:100%}

/* ---------- the path: stations down a line ---------- */
.path{position:relative;padding:var(--s4) 0 var(--s5)}
.path::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:var(--path-w);margin-left:calc(var(--path-w) / -2);background:linear-gradient(var(--ripeness),var(--juice) 55%,var(--seed))}
.station{position:relative;width:calc(50% - 44px);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);margin-bottom:var(--s4)}
.station:nth-child(odd){margin-right:auto}
.station:nth-child(even){margin-left:auto}
.station::before{content:"";position:absolute;top:34px;width:44px;height:var(--path-w);background:var(--line-strong)}
.station:nth-child(odd)::before{right:-44px}
.station:nth-child(even)::before{left:-44px}
.station::after{content:"";position:absolute;top:26px;width:17px;height:17px;border-radius:50%;background:var(--skin);border:var(--path-w) solid var(--brick)}
.station:nth-child(odd)::after{right:-54px}
.station:nth-child(even)::after{left:-54px}
.station .st-no{font-size:var(--fs-small);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--juice);margin:0}
.station h3{margin-top:4px}
.station .what{color:var(--ink-soft)}
.station a.go{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;color:var(--brick)}
.station a.go:hover{text-decoration:underline}

/* the weekly record: programs in their own published format */
.record{border-top:1px solid var(--line);margin-top:var(--s2)}
.record-row{display:grid;grid-template-columns:1fr auto;gap:4px var(--s3);padding:12px 2px;border-bottom:1px solid var(--line);font-size:var(--fs-record)}
.record-row b{color:var(--seed);font-weight:700}
.record-row .when{text-align:right;color:var(--ink);white-space:nowrap}
.record-row .where{grid-column:1 / -1;color:var(--ink-soft);font-size:var(--fs-small)}

/* ---------- rooms (the three pillars) ---------- */
.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);padding:var(--s4) 0 var(--s5)}
.room{border-radius:var(--radius);padding:var(--s3);color:var(--skin);position:relative;overflow:hidden}
.room h3{color:#fff}
.room .iu-name{font-weight:700;line-height:1.7;opacity:.92}
.room p{color:inherit}
.room a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700}
.room.wellness{background:var(--seed)}
.room.heritage{background:#31556B}
.room.enterprise{background:#7A4A21}
.room .motif{position:absolute;right:-14px;bottom:-14px;width:110px;opacity:.35;pointer-events:none}

.band{padding:var(--s5) 0}
.band.sea{background:linear-gradient(180deg,var(--skin),#EAF3F0)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
.split img{border-radius:var(--radius)}
.figure-row{display:flex;flex-wrap:wrap;gap:var(--s4);padding:var(--s3) 0}
.figure b{font-family:var(--font-display);font-size:2rem;color:var(--brick);display:block;line-height:1}
.figure span{font-size:var(--fs-small);color:var(--ink-soft);display:block;max-width:22ch;margin-top:6px}

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

.module{border-left:var(--path-w) solid var(--stem);padding:4px 0 4px var(--s2);margin-bottom:var(--s3)}
.module h3{margin-bottom:4px}
.callout{background:var(--paper);border:1px solid var(--line);border-left:6px solid var(--brick);border-radius:var(--radius-sm);padding:var(--s3);margin:var(--s3) 0}
.callout h3{margin-bottom:6px}
ul.tick{list-style:none;margin:0 0 var(--s3);padding:0}
ul.tick li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)}
ul.tick li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--ripeness)}
blockquote.duty{font-family:var(--font-display);font-size:1.25rem;line-height:1.5;color:var(--seed);border-left:var(--path-w) solid var(--brick);margin:var(--s3) 0;padding-left:var(--s2)}
blockquote.duty span{display:block;font-family:var(--font-body);font-size:var(--fs-small);color:var(--ink-soft);margin-top:6px}

/* contact: the directory, as rows that are all one tap */
.dir-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:56px;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.dir-row b{color:var(--seed)}
.dir-row span{text-align:right}
a.dir-row:hover b{color:var(--brick)}

/* ---------- colophon ---------- */
.colophon{background:var(--seed);color:#DDE8DF;margin-top:0}
.colophon-in{max-width:var(--width);margin:0 auto;padding:var(--s4) var(--s3) var(--s3)}
.colophon .tag{font-family:var(--font-display);font-size:1.3rem;color:#fff;margin:0}
.colophon .tagline{color:var(--flesh);margin:2px 0 var(--s3)}
.colophon-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s4)}
.colophon h4{color:#fff;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;margin:0 0 var(--s1)}
.colophon a{color:#DDE8DF;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.colophon a:hover{color:var(--flesh)}
.colophon p{color:#B9CCC0}
.colophon .credit{border-top:1px solid rgba(255,255,255,.22);margin-top:var(--s3);padding-top:var(--s2);font-size:var(--fs-small);color:#9FB8A8}

/* ---------- phone: the path turns vertical ---------- */
@media (max-width:760px){
  .opening{padding-top:var(--s4)}
  .opening .sun{width:96px;right:8px;top:4px}
  .path::before{left:10px;margin-left:0}
  .station{width:auto;margin-left:34px;margin-bottom:var(--s3)}
  .station:nth-child(even){margin-left:34px}
  .station::before{left:-24px;right:auto;width:24px}
  .station:nth-child(odd)::before{left:-24px;right:auto}
  .station::after{left:-42px;right:auto}
  .station:nth-child(odd)::after{left:-42px;right:auto}
  .rooms{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .record-row{grid-template-columns:1fr}
  .record-row .when{text-align:left}
  .colophon-grid{grid-template-columns:1fr}
  .trailhead .brand span{display:none}
  .call-chip{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@media (max-width:760px){
  .opening .iu-word{padding-right:108px}
}