/* River Notes Aotearoa — tannin and greywacke. Hand-written for this site. */
:root {
  --awa-ink: #33291d;
  --awa-accent: #5b7a99;
  --awa-hair: #c8bfae;
  --awa-page: #f4f1ea;
  --awa-moss: #6d7a4f;
  --awa-soft: #6b5f50;
  --awa-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --awa-serif: Georgia, Charter, "Bitstream Charter", "Times New Roman", serif;
  --awa-measure: 46rem;
}

.awa-body, .awa-body * , .awa-body *::before, .awa-body *::after { box-sizing: border-box; }

html { background: var(--awa-page); color: var(--awa-ink); }

.awa-body {
  margin: 0;
  font: 1.0625rem/1.65 var(--awa-sans);
  display: grid;
  grid-template-columns: minmax(1rem, 1fr) minmax(0, var(--awa-measure)) minmax(1rem, 1fr);
  grid-template-areas:
    ". mast ."
    ". menu ."
    ". main ."
    ". foot .";
  min-height: 100vh;
  grid-template-rows: auto auto 1fr auto;
}

.awa-skip { position: absolute; left: -999px; }
.awa-skip:focus { left: 1rem; top: 1rem; background: var(--awa-page); padding: .4rem .7rem; border: 1px solid var(--awa-ink); }

a { color: var(--awa-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--awa-ink); }

/* masthead */
.awa-mast { grid-area: mast; padding: 2.2rem 0 .4rem; }
.awa-mark {
  font: 600 .74rem/1 var(--awa-sans);
  letter-spacing: .08em;
  color: var(--awa-soft);
  text-decoration: none;
}
.awa-title { margin: .45rem 0 0; font: 400 2.05rem/1.15 var(--awa-serif); }
.awa-title a { color: var(--awa-ink); text-decoration: none; }
.awa-strap { margin: .25rem 0 0; font-variant: small-caps; letter-spacing: .04em; color: var(--awa-soft); }
.awa-waterline { display: block; width: 100%; height: 14px; margin-top: 1rem; }
.awa-waterline path { fill: none; stroke: var(--awa-accent); stroke-width: 1.4; }

/* menu */
.awa-menu { grid-area: menu; border-bottom: 1px solid var(--awa-hair); }
.awa-menu ul { list-style: none; margin: 0; padding: .55rem 0 .7rem; display: grid; grid-auto-flow: column; justify-content: start; gap: .3rem 1.3rem; }
.awa-menu a { color: var(--awa-ink); text-decoration: none; font-size: .95rem; }
.awa-menu a[aria-current="page"] { color: var(--awa-accent); border-bottom: 2px solid var(--awa-accent); }
@media (max-width: 40rem) {
  .awa-menu ul { grid-auto-flow: row; grid-template-columns: repeat(2, max-content); }
}

/* main */
.awa-main { grid-area: main; padding: 2rem 0 3rem; }
.awa-h1 { font: 400 2.1rem/1.2 var(--awa-serif); margin: 0 0 .5rem; }
.awa-h2, .awa-prose h2 { font: 400 1.45rem/1.3 var(--awa-serif); margin: 2.2rem 0 .5rem; }
.awa-prose h3 { font: 600 1.05rem/1.4 var(--awa-sans); margin: 1.6rem 0 .3rem; }
.awa-dek { font-size: 1.14rem; color: var(--awa-soft); margin: 0 0 1.4rem; }
.awa-kicker { margin: 0 0 .4rem; font-variant: small-caps; letter-spacing: .06em; }
.awa-kicker a { text-decoration: none; }
.awa-prose { max-width: 42rem; }
.awa-prose li { margin: .25rem 0; }
.awa-prose blockquote { margin: 1.2rem 0; padding: 0 0 0 1rem; border-left: 3px solid var(--awa-hair); color: var(--awa-soft); }
.awa-prose table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1.2rem 0; }
.awa-prose th, .awa-prose td { border-bottom: 1px solid var(--awa-hair); text-align: left; padding: .4rem .5rem .4rem 0; vertical-align: top; }

/* catchment card */
.awa-catchment {
  margin: 0 0 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "a b c d";
  border-top: 1px solid var(--awa-hair);
  border-bottom: 1px solid var(--awa-hair);
}
.awa-catchment div { padding: .55rem .6rem .6rem 0; }
.awa-catchment dt { font: .72rem/1.2 var(--awa-sans); font-variant: small-caps; text-transform: lowercase; letter-spacing: .08em; color: var(--awa-soft); }
.awa-catchment dd { margin: .15rem 0 0; font-size: .93rem; }
@media (max-width: 40rem) {
  .awa-catchment { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "c d"; }
}

/* safety box: the only place moss appears */
.awa-safety, .awa-prose .awa-pull {
  border: 2px solid var(--awa-moss);
  border-radius: 0;
  padding: .9rem 1.1rem;
  margin: 1.8rem 0;
  max-width: 42rem;
}
.awa-safety-label { margin: 0 0 .3rem; font-variant: small-caps; letter-spacing: .06em; font-weight: 600; }
.awa-safety p:last-child, .awa-pull p:last-child { margin-bottom: 0; }

/* figures */
.awa-fig { margin: 1.8rem 0; }
.awa-fig svg { display: block; width: 100%; height: auto; background: #fbf9f4; border: 1px solid var(--awa-hair); }
.awa-fig figcaption { font-size: .88rem; color: var(--awa-soft); margin-top: .45rem; }
.awa-fig .ln { fill: none; stroke: var(--awa-ink); stroke-width: 1.5; }
.awa-fig .wt { fill: var(--awa-accent); fill-opacity: .28; stroke: var(--awa-accent); stroke-width: 1.2; }
.awa-fig .ac { fill: none; stroke: var(--awa-accent); stroke-width: 2; }
.awa-fig .gd { fill: none; stroke: var(--awa-hair); stroke-width: 1; stroke-dasharray: 4 4; }
.awa-fig .gr { fill: #d9d1c0; stroke: var(--awa-ink); stroke-width: 1; }
.awa-fig .pt { fill: var(--awa-ink); }
.awa-fig text { font: 13px var(--awa-sans); fill: var(--awa-ink); }
.awa-fig text.sm { font-size: 11px; fill: var(--awa-soft); }

/* homepage river line */
.awa-home-intro { margin-bottom: 1.6rem; }
.awa-line { list-style: none; margin: 0 0 2.5rem; padding: 0; position: relative; }
.awa-line::before {
  content: "";
  position: absolute;
  left: 4.35rem;
  top: .4rem;
  bottom: .4rem;
  width: 3px;
  background: var(--awa-accent);
}
.awa-station {
  display: grid;
  grid-template-columns: 3.6rem 1.5rem minmax(0, 1fr);
  grid-template-areas: "km dot body";
  padding: .35rem 0 1.25rem;
}
.awa-station::before {
  content: "";
  grid-area: dot;
  justify-self: center;
  width: 11px;
  height: 11px;
  margin-top: .45rem;
  border: 2px solid var(--awa-accent);
  background: var(--awa-page);
  position: relative;
  left: -1px;
}
.awa-km { grid-area: km; font: .78rem/1.9 var(--awa-sans); font-variant: small-caps; letter-spacing: .06em; color: var(--awa-soft); text-align: right; padding-right: .5rem; }
.awa-station-body { grid-area: body; }
.awa-station-title { font: 400 1.3rem/1.3 var(--awa-serif); color: var(--awa-ink); text-decoration: none; }
.awa-station-title:hover { color: var(--awa-accent); }
.awa-station-dek { margin: .2rem 0 .3rem; }
.awa-station-meta { margin: 0; font-size: .85rem; color: var(--awa-soft); }

.awa-hubs-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: "r s f";
  gap: 1.2rem;
  border-top: 1px solid var(--awa-hair);
  padding-top: .6rem;
}
.awa-hubcell .awa-h2 { margin-top: .8rem; font-size: 1.2rem; }
.awa-hubcell p { margin: 0; font-size: .95rem; color: var(--awa-soft); }
@media (max-width: 40rem) {
  .awa-hubs-row { grid-template-columns: 1fr; grid-template-areas: "r" "s" "f"; }
}

/* hub stacks */
.awa-stack { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.awa-stack li { padding: .8rem 0; border-bottom: 1px solid var(--awa-hair); display: grid; gap: .15rem; }
.awa-stack-link { font: 400 1.2rem/1.3 var(--awa-serif); color: var(--awa-ink); text-decoration: none; }
.awa-stack-link:hover { color: var(--awa-accent); }
.awa-stack-dek { font-size: .95rem; color: var(--awa-soft); }
.awa-tag {
  justify-self: start;
  display: inline-block;
  font: .72rem/1.5 var(--awa-sans);
  letter-spacing: .05em;
  padding: 0 .55rem;
  border: 1px solid var(--awa-accent);
  border-radius: 999px;
  color: var(--awa-accent);
}
.awa-empty { color: var(--awa-soft); }

.awa-further { margin-top: 2.6rem; border-top: 1px solid var(--awa-hair); max-width: 42rem; }
.awa-further-label { font-variant: small-caps; letter-spacing: .06em; color: var(--awa-soft); margin: .8rem 0 .2rem; }
.awa-further ul { margin: 0; padding-left: 1.1rem; }

.awa-archline-full { border-left: 3px solid var(--awa-accent); padding-left: 1rem; font-style: italic; }

/* footer */
.awa-foot { grid-area: foot; border-top: 1px solid var(--awa-hair); padding: 1.3rem 0 2.4rem; font-size: .86rem; color: var(--awa-soft); }
.awa-foot p { margin: 0 0 .6rem; max-width: 42rem; }
.awa-footsmall { font-size: .8rem; }