@charset "UTF-8";

/* ==================================================================
   dukesurfboards.com.

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

   1. No photograph of Duke may appear anywhere, because the license
      covers his name and likeness and not a photographer's copyright
      in a specific negative, and no per-image clearance exists. The
      only photographs here are our own, of the boards.

   2. The restraint rule: two brand colours plus one neutral per
      surface. Gold is painted four times: the hero waterline, the
      button hover border, the button hover wash, and the footer
      tagline. 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, the same four files as hub-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);
}

/* 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); }

/* the three boards --------------------------------------------------
   Portrait plates, so the grid is built from the picture rather than
   from a column count: three across on a desk, two on a tablet, one on
   a phone, with no breakpoint doing the deciding. min() keeps the track
   narrower than the viewport at every width, which is what stops the
   page scrolling sideways on a small screen.
   ------------------------------------------------------------------ */

.boards__intro { max-width: var(--measure); margin: 0 0 2rem; }
.boards {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  align-items: start;
}
.board { margin: 0; }
.board__img {
  display: block; width: 100%; height: auto;
  background: var(--waikiki-sand);      /* the space the photograph will fill */
  border: 1px solid var(--rule-soft);
}
.board__caption {
  margin-top: 0.9rem;
  font-size: 0.95rem; line-height: 1.55;
  color: var(--ink-quiet);
}
.boards__note { margin-top: 2.5rem; max-width: 34rem; }

/* 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:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.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(min(16rem, 100%), 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__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; max-width: 46rem; margin-inline: auto; }

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

@media (max-width: 48rem) {
  .masthead__inner { flex-direction: column; align-items: flex-start; }
}