@charset "UTF-8";

/* ==================================================================
   dukeprints.com.

   Type, spacing and palette follow DUKE/hub-site, which follows
   gallery-site, which follows DUKE-BRAND-CORE.md section 5. Three
   rules shaped this one:

   1. NO PHOTOGRAPH OF DUKE APPEARS HERE. Not one frame is cleared, and
      clearance is per image and in writing. So the page carries itself
      on type, rule and space, and it has to look finished that way
      rather than look like a gallery whose pictures failed to load.
      That is why there is no placeholder box anywhere in this file.

   2. The paper tone. This page is about prints, so the ground is a
      warmer, closer-to-paper version of Surf White, and the reading
      column sits on a hairline like a plate on a mount.

   3. The restraint rule: two brand colours plus one neutral per
      surface. Gold is painted four times only: the hero waterline, the
      panel rule, the button hover border, and the footer tagline. The
      one that is text 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;

  /* The paper ground, a half-step warmer than Surf White. */
  --paper: #f2efe7;
  --paper-deep: #e9e4d8;

  --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(--paper);
  --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: 32rem;
  --wrap: 62rem;

  --pad-x: clamp(1.25rem, 5vw, 3rem);
  --sect-y: clamp(3.5rem, 8vw, 6.5rem);
  --hero-y: clamp(4.5rem, 14vw, 11rem);
}

/* ------------------------------------------------------------------
   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.65;
  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.5rem 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);
}
.masthead__note {
  margin: 0; font-size: 0.8rem; letter-spacing: 0.1em; 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, 6vw, 3.6rem); max-width: 18ch; }
.section__head { font-size: clamp(1.55rem, 3.4vw, 2.1rem); }
.hero__sub {
  font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.35rem);
  max-width: var(--measure); color: var(--ink-quiet); margin: 1.5rem 0 0;
}

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

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

/* Sections are separated by space and one hairline, and nothing else.
   On a page with no pictures the rhythm has to do the work a picture
   would otherwise do, so the section padding is deliberately larger
   than hub-site's and the measure deliberately narrower. */
.section { padding-block: var(--sect-y); border-top: 1px solid var(--rule-soft); }
.section .waterline { margin-bottom: 1.6rem; }
.prose p { max-width: var(--measure); margin: 0 0 1.2rem; }
.prose p:last-child { margin-bottom: 0; }

.handoff { max-width: var(--measure); margin: 2rem 0 0; }
.note { color: var(--ink-quiet); font-size: 0.92rem; max-width: var(--measure); }

/* the image panel --------------------------------------------------- */

/* This is what stands where photographs would stand. It is a panel of
   type on the deeper paper tone, not an empty frame: nothing here
   should read as a picture that failed to arrive. When clearance lands,
   .plates below replaces it and this rule set stays put for the next
   uncleared thing. */
.section--panel { border-top: 1px solid var(--rule-soft); }
.panel {
  background: var(--paper-deep);
  border-left: 3px solid var(--olympic-gold);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.panel .eyebrow { margin-bottom: 0.75rem; }
.panel__note {
  font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.5; margin: 0; max-width: var(--measure);
}

/* the plates, for the day clearance arrives ------------------------- */

/* Unused while content/home.json says images.cleared is false. Kept here
   so that clearing an image is a content edit and not a redesign. The
   album's landscape frames are wide bands rather than plates, so the
   grid is single-column and full measure: they read as a horizon across
   the column. */
.plates { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.plate { margin: 0; }
.plate__img { display: block; width: 100%; height: auto; background: var(--paper-deep); }
.plate__caption {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem;
  justify-content: space-between; padding-top: 0.75rem;
  border-top: 1px solid var(--rule-soft); margin-top: 0.75rem;
}
.plate__title { font-family: var(--serif); font-size: 1.05rem; }
.plate__credit { color: var(--ink-quiet); font-size: 0.85rem; }

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

.hero__link { text-underline-offset: 0.22em; }

.cta {
  display: inline-block; margin-top: 2rem;
  border: 1px solid var(--ink); padding: 0.8rem 1.6rem;
  text-decoration: none; font-size: 1rem; letter-spacing: 0.02em;
}
.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__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; }
  .masthead__note { order: -1; }
  .hero__headline { max-width: none; }
}

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