/* ==========================================================================
   Uljée c.s. — site styles
   Plain CSS, no build step. Values mirror the original design 1:1.
   ========================================================================== */

/* --- Fonts (self-hosted, no third-party requests) ------------------------ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-normal-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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-normal-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-normal-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-normal-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-italic-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;
}

/* --- Design tokens ------------------------------------------------------- */

:root {
  --navy: #030f37;

  --bg: #fafaf9;
  --bg-tinted: #f4f4f5;

  --ink: #18181b;
  --ink-soft: #27272a;
  --text: #52525c;
  --text-muted: #71717b;
  --text-faint: #9f9fa9;

  --hairline: rgb(9 9 11 / 0.05);
  --selection: #e4e4e7;

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --container: 80rem;
  --gutter: 1.5rem;
  --nav-height: 7rem;
  --ribbon-height: 6.5rem;
}

/* --- Reset --------------------------------------------------------------- */

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

body,
h1, h2, h4, p, blockquote, figure, address { margin: 0; }

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

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background-color: var(--selection); }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- Layout helpers ------------------------------------------------------ */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: 100%;
}

.section { padding-block: 6rem; }
.section--light { background-color: var(--bg); }
.section--tinted { background-color: var(--bg-tinted); }

/* Fills the viewport below the sticky header, so jumping to this section from
   the navigation does not already reveal the next one. */
.section--screenful { min-height: calc(100vh - var(--nav-height)); }

.measure-3xl { max-width: 48rem; }
.measure-4xl { max-width: 56rem; }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: var(--nav-height); }

/* --- Navigation ---------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--navy);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.site-nav__brand { display: block; }

.site-nav__brand img {
  height: 5.469rem;
  width: auto;
  object-fit: contain;
}

.site-nav__links { display: none; }

.site-nav__links a {
  color: rgb(255 255 255 / 0.8);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-nav__links a:hover,
.site-nav__links a:focus-visible { color: #fff; }

@media (min-width: 768px) {
  .site-nav__links {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
}

/* --- Hero ---------------------------------------------------------------- */

/* Narrow screens: the photograph fills the hero and the text lies over it.
   The frame is taller than it is wide there, so the whole picture fits and its
   own sky is the white field the title sits in. This is the rendering the
   client pointed at as the one that reads well, so it stays as it is. */
.hero {
  position: relative;
  height: 76vh;
  min-height: 560px;
  width: 100%;
  background-color: var(--bg);
}

.hero__figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* A veil over the sky only: enough to keep dark type readable where it
   crosses the clouds, gone well before the skyline. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.85) 0%,
    rgb(255 255 255 / 0.7) 30%,
    rgb(255 255 255 / 0.25) 55%,
    transparent 75%
  );
}

.hero__body {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 1.75rem var(--gutter) 0;
}

/* Shrink-to-fit and centred, matching the original hero. */
.hero__content {
  margin-inline: auto;
  max-width: var(--container);
}

/* The only line in the hero since the client had the strapline removed, so it
   carries no bottom margin. */
.hero__title {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
}

/* Wide screens: a white band at the top carries the text, the photograph sits
   underneath it. In a frame that is much wider than it is tall the picture is
   scaled to the width, so only a horizontal slice of it shows; anchoring that
   slice near the bottom edge keeps the water and the ships in view. The hero
   is exactly as tall as the space above the logo ribbon, so the ribbon is
   whole on the first screen. */
@media (min-width: 768px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height) - var(--ribbon-height) - 0.5rem);
    min-height: 24rem;
    background-color: #fff;
    overflow: hidden;
  }

  /* Still a flex row, so the shrink-to-fit block keeps the centred position
     the hero has always had. */
  .hero__body {
    position: static;
    height: auto;
    flex: 0 0 auto;
    padding: clamp(1rem, 4vh, 2.5rem) var(--gutter) clamp(0.75rem, 3vh, 1.75rem);
  }

  .hero__figure {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Natural proportions, pinned below the frame so the crop is taken off the
     sky and not off the water. */
  .hero__image {
    inset: auto auto -4.5vw 0;
    width: 100%;
    height: auto;
    /* On a frame taller than the picture is, fall back to filling it and
       cropping left and right, so no strip of background shows through. */
    min-height: calc(100% + 4.5vw);
    object-fit: cover;
    object-position: 50% 100%;
  }

  /* Dissolves the seam between the white band and the grey-white sky at the
     top of the photograph. */
  .hero__scrim {
    inset: 0 0 auto 0;
    height: clamp(5rem, 20vh, 11rem);
    background-image: linear-gradient(
      to bottom,
      #fff 0%,
      rgb(255 255 255 / 0.92) 25%,
      rgb(255 255 255 / 0.55) 55%,
      transparent 100%
    );
  }

  /* Bound to the window height as well, so the text keeps its place above the
     skyline on a shallow window instead of pushing the picture out of frame. */
  .hero__title { font-size: min(3.75rem, 7.5vh); }
}

@media (min-width: 1024px) {
  .hero__title { font-size: min(4.5rem, 7.5vh); }
}

/* --- Membership / testimonial logos -------------------------------------- */

.badges {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.badges__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 4rem;
  row-gap: 1.5rem;
}

.badges__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.badges__label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text-muted);
}

.badges__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
}

.badges__logos a { display: block; }

.badges__logos img {
  height: 3.5rem;
  width: auto;
  object-fit: contain;
}

/* Wide screens: a fixed height, because the hero above subtracts exactly this
   from the window to keep the whole ribbon on the first screen. */
@media (min-width: 768px) {
  .badges {
    display: flex;
    align-items: center;
    height: var(--ribbon-height);
    padding-block: 0;
  }
}

/* --- Headings and body copy ---------------------------------------------- */

.heading {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 2.5rem;
  color: var(--ink);
}

.heading--medium { font-weight: 500; margin-bottom: 2rem; }
.heading--bold { font-weight: 700; margin-bottom: 2.5rem; }
.heading--gap-lg { margin-bottom: 3rem; }

.section__lead {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2.5rem;
}

.prose {
  color: var(--text);
  line-height: 1.625;
  text-wrap: pretty;
}

.prose > * + * { margin-top: 1.5rem; }

.prose strong {
  font-weight: 500;
  color: var(--ink);
}

/* --- Our people ---------------------------------------------------------- */

.people > * + * { margin-top: 5rem; }

.person {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* A fixed ratio keeps every portrait the same size, whatever the text does. */
.person__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  outline: 1px solid rgb(0 0 0 / 0.05);
  outline-offset: -1px;
}

@media (min-width: 1024px) {
  .person {
    flex-direction: row;
    align-items: flex-start;
    gap: 4rem;
  }

  /* Roughly as tall as the copy beside it, and the same for both people:
     a quarter of the row at the fixed 4:5 ratio. */
  .person__portrait {
    width: 24%;
    max-width: 20rem;
    flex: none;
  }

  .person__text { width: 76%; }
}

/* --- Testimonials -------------------------------------------------------- */

.quotes > * + * { margin-top: 3rem; }

.quotes blockquote p {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--text);
  margin-bottom: 1rem;
  text-wrap: pretty;
}

.quotes blockquote footer {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--ink);
}

/* --- Footer / contact ---------------------------------------------------- */

.site-footer {
  background-color: var(--bg);
  padding-top: 4rem;
  padding-bottom: 2rem;
}

.site-footer__grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 3rem;
}

.site-footer__photo {
  width: 100%;
  height: auto;
  outline: 1px solid rgb(0 0 0 / 0.05);
  outline-offset: -1px;
}

/* Two columns of short entries, with the two running sentences spanning both
   so each of them fits on one line. Keeps the whole chapter on one screen. */
.site-footer__details {
  display: grid;
  gap: 1.5rem 3rem;
}

.site-footer__details--wide { grid-column: 1 / -1; }

.site-footer h4 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 0.375rem;
}

.site-footer address,
.site-footer__details p,
.site-footer__details a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--text);
  font-style: normal;
}

.site-footer__details a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__bar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 1px solid var(--hairline);
  padding-top: 2rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--text-faint);
}

@media (min-width: 768px) {
  .site-footer__bar {
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (min-width: 640px) {
  .site-footer__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }
}