@charset "UTF-8";

/* ==================================================================
   dukekahanamoku.com, the hub.

   Palette, type and spacing follow gallery-site/assets/css/site.css,
   which follows DUKE-BRAND-CORE.md section 5. Two rules shaped it:

   1. No photograph of Duke may appear until it is cleared in writing,
      per image. So the design is type-led and carries itself on rhythm
      and space.

   2. The restraint rule: two brand colours plus one neutral per surface.
      Gold is painted four times only: the hero waterline, the footer
      tagline, the primary door border, and the button hover. The one
      that is text, the tagline, sits at 24px because gold on Duke Blue
      is 3.8:1 and clears only the large-text bar.

   Colour values are marked PROVISIONAL in the canon pending Kenneth
   Berger's confirmation of the blue. They are variables for that reason.
   ================================================================== */

:root {
  --duke-blue: #003b5c;
  --olympic-gold: #b08d57;
  --waikiki-sand: #dfd3c3;
  --surf-white: #edece6;
  --koa-brown: #4d3930;

  --rule: rgba(0, 59, 92, 0.22);
  --rule-link: rgba(0, 59, 92, 0.55);
  --rule-soft: rgba(0, 59, 92, 0.12);

  --bg: var(--surf-white);
  --ink: var(--duke-blue);
  --ink-quiet: #3d5a6b;

  --serif: "EB Garamond", "EBGaramond", Garamond, "Times New Roman", Times, serif;
  --sans: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --measure: 30rem;
  --wrap: 68rem;

  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --sect-y: clamp(3.75rem, 9vw, 7rem);
  --hero-y: clamp(4.5rem, 13vw, 10.5rem);
}

/* ------------------------------------------------------------------
   EB Garamond, self-hosted, same four files as gallery-site. Nothing is
   fetched from Google at runtime, which is what lets the CSP stay strict.
   Two subsets per face and both are needed: latin carries U+02BB, the
   ʻokina; latin-ext carries the kahakō, ā ē ī ō ū. Drop latin-ext and
   Waikīkī loses its marks while Hawaiʻi keeps the ʻokina, which is the
   worst failure because it looks deliberate.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/EBGaramond-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/EBGaramond-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/EBGaramond-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/EBGaramond-medium-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;               /* 16px floor, canon section 7 */
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-color: var(--rule-link); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: currentColor; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.wrap--reading { max-width: calc(var(--measure) + 2 * var(--pad-x)); }

.skip {
  position: absolute; left: -999px; top: 0;
  background: var(--duke-blue); color: var(--surf-white); padding: 0.5rem 1rem;
}
.skip:focus { left: 0; z-index: 10; }

/* masthead ---------------------------------------------------------- */

.masthead { border-bottom: 1px solid var(--rule); }
.masthead__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 1.1rem var(--pad-x);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  align-items: baseline; justify-content: space-between;
}
.lockup { text-decoration: none; display: inline-flex; flex-direction: column; gap: 0.1rem; }
.wordmark {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.45rem; letter-spacing: 0.01em;
}
.lockup__descriptor {
  font-size: 0.7rem; letter-spacing: 0.22em;
  color: var(--ink-quiet);
}
.nav ul { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-size: 0.95rem; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.25em; }

/* hero -------------------------------------------------------------- */

.hero { padding-block: var(--hero-y) var(--sect-y); }
.eyebrow {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-quiet); margin: 0 0 1rem;
}
.hero__headline, .section__head {
  font-family: var(--serif); font-weight: 400; line-height: 1.12;
  margin: 0 0 1.25rem; text-wrap: balance;
}
.hero__headline { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
.section__head { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.hero__sub { font-size: 1.1rem; max-width: var(--measure); color: var(--ink-quiet); margin: 1.25rem 0 0; }

.waterline { display: block; color: var(--rule-link); }
.waterline--hero { color: var(--olympic-gold); }
.waterline--footer { margin-inline: auto; }

/* sections ---------------------------------------------------------- */

.section { padding-block: var(--sect-y); border-top: 1px solid var(--rule-soft); }
.section .waterline { margin-bottom: 1.5rem; }
.prose p { max-width: var(--measure); margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.note { color: var(--ink-quiet); font-size: 0.92rem; max-width: var(--measure); }
.more { margin-top: 1.5rem; }
.handoff { max-width: var(--measure); margin: 0 0 1.5rem; }
.contact-line { font-size: 1.15rem; margin-top: 1.25rem; }

/* the doors --------------------------------------------------------- */

.doors__intro { max-width: var(--measure); margin: 0 0 2rem; }
.doors {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.door {
  display: flex; flex-direction: column; gap: 0.4rem;
  border: 1px solid var(--rule); padding: 1.5rem;
  text-decoration: none; background: var(--bg);
}
.door:hover { background: rgba(0, 59, 92, 0.05); }
.door--primary { border: 2px solid var(--olympic-gold); }
.door__heading { font-family: var(--serif); font-size: 1.4rem; }
.door__domain { font-size: 0.85rem; letter-spacing: 0.06em; color: var(--ink-quiet); }
.door__text { margin-top: 0.4rem; }
.door__cta { margin-top: auto; padding-top: 1rem; text-decoration: underline; text-underline-offset: 0.2em; }

/* partners roster --------------------------------------------------- */

.roster { list-style: none; margin: 1.5rem 0; padding: 0; max-width: var(--measure); }
.roster__item {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.6rem 0; border-bottom: 1px solid var(--rule-soft);
}
.roster__name { font-family: var(--serif); font-size: 1.1rem; }
.roster__category { color: var(--ink-quiet); font-size: 0.92rem; }

/* press fact sheet -------------------------------------------------- */

.factsheet { margin: 1.5rem 0 0; }
.factrow {
  padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft);
}
.factrow__label {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-quiet);
}
.factrow__value { margin: 0.15rem 0 0; font-family: var(--serif); font-size: 1.08rem; }

/* cta --------------------------------------------------------------- */

.cta {
  display: inline-block; margin-top: 1.5rem;
  border: 1px solid var(--ink); padding: 0.7rem 1.4rem;
  text-decoration: none; font-size: 1rem;
}
.cta:hover { border-color: var(--olympic-gold); background: rgba(176, 141, 87, 0.12); }
.cta__ext { margin-left: 0.35em; }

/* footer ------------------------------------------------------------ */

.footer { border-top: 1px solid var(--rule); margin-top: var(--sect-y); background: var(--duke-blue); color: var(--surf-white); }
.footer a { color: inherit; text-decoration-color: rgba(237, 236, 230, 0.55); }
.footer__inner {
  max-width: var(--wrap); margin-inline: auto; padding: 3rem var(--pad-x) 1rem;
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.footer__head {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: normal; margin: 0 0 0.75rem; color: var(--waikiki-sand);
}
.footer__line { margin: 0 0 0.6rem; max-width: var(--measure); }
.footer__base { text-align: center; padding: 2rem var(--pad-x) 2.5rem; }
.footer__base .waterline { margin-bottom: 1.25rem; }
.footer__nav { list-style: none; display: flex; gap: 1.5rem; justify-content: center; margin: 0 0 2rem; padding: 0; }
.footer__tagline {
  font-family: var(--serif); font-size: 1.5rem;   /* 24px, the large-text bar */
  color: var(--olympic-gold); margin: 0 0 0.2rem;
}
.footer__attrib { font-size: 0.85rem; color: var(--waikiki-sand); margin: 0 0 1.5rem; }
.footer__fine { font-size: 0.85rem; color: var(--waikiki-sand); margin: 0; }

/* small screens ----------------------------------------------------- */

@media (max-width: 48rem) {
  .masthead__inner { flex-direction: column; align-items: flex-start; }
  .nav ul { flex-wrap: wrap; gap: 1rem 1.25rem; }
}