/* ------------------------------------------------------------------
     Arvu Capital — built to ACI v1.0 / ACPS.
     Colour: Paper #F7F6F3 ground, Navy #1F3864 structural, Blue #0035AD
     reserved for what a reader is meant to act on. Neutral ramp is Navy
     mixed into Paper. Type: Inter. Scale base 16, ratio phi^(1/3).
     Spacing: Fibonacci. Measure: 66 characters, never more.
     ------------------------------------------------------------------ */

  :root {
    /* identity */
    --navy:        #1F3864;
    --action:      #0035AD;

    /* neutral ramp — Navy into Paper */
    --n000:        #F7F6F3;
    --n100:        #F1F0EF;
    --n200:        #EBEBEB;
    --n300:        #E1E2E4;
    --n400:        #CFD2D8;
    --n500:        #B9C0CA;
    --n600:        #A4ADBC;
    --n700:        #8390A6;
    --n800:        #617290;
    --n900:        #3F5479;

    /* semantic */
    --canvas:      var(--n000);
    --text:        var(--navy);
    --text-2:      var(--n800);
    --rule:        var(--n300);
    --rule-strong: var(--n400);
    --link:        var(--action);
    --band:        var(--navy);
    --on-band:     var(--n000);
    --on-band-2:   var(--n600);
    --band-rule:   var(--n900);

    /* type scale: 16 x phi^(1/3) */
    --t-2: 12px; --t-1: 14px; --t0: 16px; --t1: 19px;
    --t2: 22px;  --t3: 26px;  --t4: 30px; --t6: 42px;

    /* leading */
    --lh-prose: 1.618;
    --lh-ui:    1.272;
    --lh-disp:  1.128;

    /* spacing — Fibonacci */
    --s3: 5px; --s4: 8px; --s5: 13px; --s6: 21px;
    --s7: 34px; --s8: 55px; --s9: 89px; --s10: 144px;

    --measure: 66ch;
    --page: 1360px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      /* ACPS dark scheme: Navy carried toward black */
      --canvas:      #101C32;   /* surface.canvas   */
      --text:        #F7F6F3;   /* Paper, not white */
      --text-2:      #A4ADBC;
      --rule:        #192D50;   /* surface.raised   */
      --rule-strong: #1F3864;   /* surface.overlay  */
      --link:        #889FD4;   /* Blue + 55% Paper */
      --band:        #142542;   /* surface.default  */
      --on-band:     #F7F6F3;
      --on-band-2:   #A4ADBC;
      --band-rule:   #192D50;
      --navy:        #F7F6F3;
    }
  }
  :root[data-theme="dark"] {
    /* ACPS dark scheme: Navy carried toward black */
    --canvas:    #101C32;   /* surface.canvas   */
    --text:      #F7F6F3;   /* Paper, not white */
    --text-2:    #A4ADBC;
    --rule:      #192D50;   /* surface.raised   */
    --rule-strong: #1F3864;   /* surface.overlay  */
    --link:      #889FD4;   /* Blue + 55% Paper */
    --band:      #142542;   /* surface.default  */
    --on-band:     #F7F6F3;
    --on-band-2:   #A4ADBC;
    --band-rule:   #192D50;
    --navy:      #F7F6F3;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: var(--t0);
    line-height: var(--lh-prose);
    font-weight: 400;
    font-feature-settings: "tnum" 1, "zero" 1, "cv05" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: 2px;
  }

  .wrap {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--s6);
  }
  @media (min-width: 840px)  { .wrap { padding: 0 var(--s8); } }
  @media (min-width: 1360px) { .wrap { padding: 0 var(--s10); } }

  /* ---------- page furniture ---------- */
  header.site {
    border-bottom: 1px solid var(--rule);
    background: var(--canvas);
  }
  header.site .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    padding-top: var(--s6);
    padding-bottom: var(--s5);
    flex-wrap: wrap;
  }
  .mark { display: inline-flex; line-height: 0; }
  .mark img { height: 56px; width: auto; }
  @media (max-width: 640px) {
    /* a compact masthead on a phone, so the photographs keep the screen */
    header.site .wrap { gap: var(--s5); padding-top: var(--s5); padding-bottom: var(--s4); }
    .mark img { height: 32px; }
  }

  nav.primary {
    display: flex;
    gap: var(--s6);
    flex-wrap: wrap;
    font-size: var(--t-1);
    line-height: var(--lh-ui);
  }
  @media (max-width: 640px) {
    nav.primary { gap: var(--s5); font-size: var(--t-2); width: 100%; }
  }
  nav.primary a {
    color: var(--text-2);
    text-decoration: none;
    padding-bottom: var(--s3);
    border-bottom: 2px solid transparent;
  }
  nav.primary a:hover { color: var(--text); }
  nav.primary a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: var(--navy);
  }


  /* ---------- home: one whole plate, the identity in a Paper box in the sky ---------- */
  .page.is-plates { padding: 0; }
  .plates { background: var(--canvas); }
  .plate {
    position: relative;
    isolation: isolate;
    margin: 0;
    display: block;
    width: 100%;                  /* the photograph at its own size, edge to edge */
  }
  .plate > img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 0;
  }
  @media (max-width: 640px) {
    /* a phone is taller than the frame: let the picture stand, keep the cape */
    .plate > img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; }
    .plate-media { object-position: 50% 70%; }
  }

  /* the line alone, set on Paper, placed in the clouds — its left edge on the
     masthead's, because it sits in the same .wrap as the mark above it */
  .statement-layer {
    position: absolute;
    z-index: 2;
    top: 3%;
    left: 0;
    right: 0;
    margin: 0;
    pointer-events: none;
  }
  .statement {
    display: inline-block;
    margin: 0;
    max-width: none;
    background: var(--canvas);   /* Paper — Blue reads on it; it would not on the sky */
    padding: var(--s5) var(--s6);
    white-space: nowrap;
    color: var(--action);
    line-height: var(--lh-disp);
    font-weight: 400;
    letter-spacing: -0.012em;
    font-size: var(--t0);          /* 16px — the line in the clouds */
  }
  @media (max-width: 640px) {
    .statement-layer { top: 3%; }
    .statement { padding: var(--s5) var(--s6); max-width: 100%; white-space: normal; font-size: var(--t-1); }
  }

  /* ---------- the picture is alive ----------
     The plate is a still photograph with a seamless thirty-second loop laid over
     it: the clouds drift and the water breathes, the land does not move. The
     still is what shows if the loop cannot play, or if the reader has asked the
     system for reduced motion. */
  .plate-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .plate-media { display: none; }
  }

  /* ---------- the inner pages: the Nordkapp photograph behind everything ----------
     The same picture as the opening page, filling the window and held still while
     the Paper panel scrolls over it. A phone cannot hold a background still, so
     there the picture simply covers the page. */
  .page--sky {
    background-image: url("../assets/nordkapp-v9.jpg");
    background-size: cover;
    background-position: center 65%;
    background-attachment: fixed;
    background-color: #5a6378;
    min-height: calc(100vh - 170px);
    padding-top: var(--s8);
    padding-bottom: var(--s9);
  }
  @media (max-width: 840px) {
    .page--sky { background-attachment: scroll; background-position: center top; }
  }
  .skypanel {
    background: var(--canvas);      /* Paper — the clouds stay visible around it */
    padding: var(--s7);
    max-width: 78ch;
  }
  .skypanel h1 { max-width: 24ch; }
  .skypanel p { max-width: 62ch; }
  .skypanel blockquote { margin-bottom: 0; }
  .skypanel .reviewed { margin-top: var(--s8); }
  @media (max-width: 640px) { .skypanel { padding: var(--s6); } }

  /* a compound's hyphen: Inter sets it wide, so it is drawn in closer and it never
     breaks the word across lines */
  .hy { margin: 0 -0.07em; }

  /* ---------- the picture's caption: a bearing in the corner, the place on a click ----------
     Bottom right of the opening page's photograph. Closed, it is only the
     latitude of the cape, set small on Paper; opened, it says where the picture was
     taken and why that matters here. Native <details>: no script, keyboard and
     screen-reader friendly. */
  .page--sky { position: relative; }
  .caption-layer { position: absolute; z-index: 2; inset: 0; margin: 0; pointer-events: none; }
  .caption-layer .caption { pointer-events: auto; }
  .caption-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--s6);
    display: flex;
    justify-content: flex-end;   /* the page's own right edge, under the menu */
  }
  .caption {
    max-width: 50ch;
    background: var(--canvas);
    color: var(--text);
    font-size: var(--t-2);          /* 12px — the floor */
    line-height: var(--lh-ui);
  }
  .caption summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--s5);
    padding: var(--s4) var(--s5);
    font-feature-settings: "tnum" 1, "zero" 1;
    letter-spacing: 0.02em;
    color: var(--text);
    user-select: none;
  }
  .caption summary::-webkit-details-marker { display: none; }
  .caption-coord { white-space: nowrap; }
  .caption-hint { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
  .caption summary:hover .caption-hint { text-decoration-thickness: 2px; }
  .caption[open] .caption-hint { display: none; }
  .caption[open] summary { padding-bottom: 0; }
  .caption p {
    margin: var(--s4) 0 0;
    padding: 0 var(--s5);
    max-width: none;
    font-size: var(--t-1);
    line-height: var(--lh-prose);
  }
  .caption p:last-child { padding-bottom: var(--s5); }
  .caption summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

  .links { list-style: none; margin: var(--s5) 0 0; padding: 0; }
  .links li { margin: 0 0 var(--s3); }


  /* ---------- pages ---------- */
  main { display: block; }
  .page { display: none; padding: var(--s8) 0 var(--s9); }
  .page.is-active { display: block; }
  @media (min-width: 840px) { .page { padding-top: var(--s9); } }

  .col { max-width: var(--measure); }

  h1 {
    font-size: var(--t6);
    line-height: var(--lh-disp);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--navy);
    margin: 0 0 var(--s6);
    max-width: 22ch;
    text-wrap: balance;
  }
  @media (max-width: 520px) { h1 { font-size: var(--t4); } }

  h2 {
    font-size: var(--t3);
    line-height: var(--lh-disp);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--navy);
    margin: var(--s8) 0 var(--s5);
    max-width: 28ch;
    text-wrap: balance;
  }
  h3 {
    font-size: var(--t1);
    line-height: var(--lh-ui);
    font-weight: 600;
    color: var(--navy);
    margin: var(--s7) 0 var(--s4);
  }

  p { margin: 0 0 var(--s5); max-width: var(--measure); }
  .lead { font-size: var(--t1); line-height: var(--lh-prose); max-width: 60ch; }
  strong { font-weight: 600; }

  .eyebrow {
    font-size: var(--t-2);
    line-height: var(--lh-ui);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 0 0 var(--s5);
  }

  /* definition list — terms doing work */
  dl.terms { margin: var(--s6) 0 0; max-width: var(--measure); }
  dl.terms > div {
    border-top: 1px solid var(--rule);
    padding: var(--s5) 0;
  }
  dl.terms dt {
    font-weight: 600;
    color: var(--navy);
    margin-bottom: var(--s3);
  }
  dl.terms dd { margin: 0; }
  dl.terms .gloss {
    font-weight: 400;
    font-size: var(--t-1);
    color: var(--text-2);
    margin-left: var(--s3);
  }

  /* numbered principles — a real sequence, so numbered */
  ol.principles {
    margin: var(--s6) 0 0;
    padding: 0;
    list-style: none;
    counter-reset: p;
    max-width: var(--measure);
  }
  ol.principles li {
    counter-increment: p;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: var(--s5);
    border-top: 1px solid var(--rule);
    padding: var(--s5) 0;
  }
  ol.principles li::before {
    content: counter(p, decimal-leading-zero);
    font-size: var(--t-1);
    color: var(--text-2);
    line-height: var(--lh-prose);
  }
  ol.principles b { display: block; font-weight: 600; color: var(--navy); }

  ul.plain { margin: var(--s5) 0; padding-left: var(--s6); max-width: var(--measure); }
  ul.plain li { margin-bottom: var(--s4); }

  /* index of pages on the front */
  .index { margin-top: var(--s8); border-top: 1px solid var(--rule); max-width: var(--measure); }
  .index a.row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s5);
    align-items: baseline;
    padding: var(--s5) 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: var(--text);
  }
  .index a.row:hover .t { text-decoration: underline; text-underline-offset: 2px; }
  .index .t { font-weight: 600; color: var(--navy); }
  .index .d { color: var(--text-2); font-size: var(--t-1); line-height: var(--lh-ui); }
  .index .go { color: var(--link); font-size: var(--t-1); }

  /* pull quote — the institution's own line */
  blockquote {
    margin: var(--s7) 0;
    padding-left: var(--s6);
    border-left: 2px solid var(--navy);
    max-width: 58ch;
    font-size: var(--t1);
    line-height: var(--lh-prose);
    font-weight: 500;
    color: var(--navy);
  }
  blockquote p { margin: 0; }

  /* the two founders */
  .people2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--s7);
    margin: var(--s6) 0 0;
    max-width: var(--measure);
  }
  .people2 > div { border-top: 1px solid var(--rule); padding-top: var(--s6); }
  .people2 img {
    display: block;
    width: 181px;               /* 112 x phi — one step up the same ratio */
    height: 181px;
    object-fit: cover;
    margin-bottom: var(--s6);
  }
  .people2 h3 { margin: 0 0 2px; }
  .people2 .role {
    font-size: var(--t-1);
    line-height: var(--lh-ui);
    color: var(--text-2);
    margin-bottom: var(--s5);
  }
  .people2 p { font-size: var(--t-1); line-height: 1.5; }

  .holding { border-top: 1px solid var(--rule); padding-top: var(--s6); max-width: var(--measure); }
  .holding img { display: block; width: 190px; height: auto; margin-bottom: var(--s6); }
  .holding h2 { margin-top: 0; }

  .facts {
    margin: var(--s7) 0 0;
    max-width: none;
    width: 100%;
  }
  .col > .facts { width: auto; margin-right: calc(-1 * (78ch - var(--measure) - 2 * var(--s7))); }
  .facts > div {
    display: grid;
    grid-template-columns: 13em 1fr;   /* wide enough for the longest label */
    gap: var(--s7);
    border-top: 1px solid var(--rule);
    padding: var(--s6) 0;
    align-items: baseline;
  }
  .facts dt { color: var(--text-2); font-size: var(--t-1); line-height: var(--lh-prose); }
  .facts dd { margin: 0; }
  @media (max-width: 520px) {
    .facts > div { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s5) 0; }
  }

  .tbd {
    border-bottom: 1px dotted var(--n700);
    color: var(--text-2);
  }
  .note {
    font-size: var(--t-1);
    line-height: var(--lh-prose);
    color: var(--text-2);
    max-width: var(--measure);
  }

  .reviewed {
    margin-top: var(--s9);
    padding-top: var(--s5);
    border-top: 1px solid var(--rule);
    font-size: var(--t-2);
    line-height: var(--lh-ui);
    color: var(--text-2);
    max-width: var(--measure);
  }

  footer.site {
    background: var(--band);
    color: var(--on-band-2);
    border-top: 1px solid var(--band-rule);
  }
  footer.site .wrap {
    display: flex;
    justify-content: space-between;
    gap: var(--s6);
    flex-wrap: wrap;
    padding-top: var(--s7);
    padding-bottom: var(--s7);
    font-size: var(--t-1);
    line-height: var(--lh-ui);
  }
  footer.site .name { color: var(--on-band); }
  footer.site a { color: var(--on-band); }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }