/* ==========================================================================
   Seagulls typeface — blog post
   Layout follows the Figma draft (Drafting / Page 23 / Desktop - 1): grey page,
   Seagulls headings, body copy in the typeface's own blue, a 724px reading
   column, media slots.
   Chrome (nav, footer, cursor, tokens) comes from the site's shared stylesheets.
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */
@font-face {
  font-family: 'Seagulls';
  src: url('../fonts/seagulls/Seagulls.woff2?v=2') format('woff2'),
       url('../downloads/Seagulls.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Seagull Letters';
  src: url('../fonts/seagulls/SeagullLetters-Regular.woff2') format('woff2'),
       url('../downloads/SeagullLetters-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Seagull Birds';
  src: url('../fonts/seagulls/SeagullBirds-Regular.woff2') format('woff2'),
       url('../downloads/SeagullBirds-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* Seagulls is a COLR/CPAL colour font. Its own palette is the only source of
   colour here: index 0 = letters (#F01496), index 1 = birds (#1446E6). The
   overrides below never repaint the face in a single colour — they only fade
   one layer out in steps, for the tester and the scroll interaction. */
@font-palette-values --sg-full   { font-family: 'Seagulls'; base-palette: 0; }
@font-palette-values --sg-bird-1 { font-family: 'Seagulls'; override-colors: 1 rgba(20, 70, 230, 0.82); }
@font-palette-values --sg-bird-2 { font-family: 'Seagulls'; override-colors: 1 rgba(20, 70, 230, 0.62); }
@font-palette-values --sg-bird-3 { font-family: 'Seagulls'; override-colors: 1 rgba(20, 70, 230, 0.44); }
@font-palette-values --sg-bird-4 { font-family: 'Seagulls'; override-colors: 1 rgba(20, 70, 230, 0.27); }
@font-palette-values --sg-bird-5 { font-family: 'Seagulls'; override-colors: 1 rgba(20, 70, 230, 0.12); }
@font-palette-values --sg-bird-6 { font-family: 'Seagulls'; override-colors: 1 rgba(20, 70, 230, 0); }
@font-palette-values --sg-letter-1 { font-family: 'Seagulls'; override-colors: 0 rgba(240, 20, 150, 0.82); }
@font-palette-values --sg-letter-2 { font-family: 'Seagulls'; override-colors: 0 rgba(240, 20, 150, 0.62); }
@font-palette-values --sg-letter-3 { font-family: 'Seagulls'; override-colors: 0 rgba(240, 20, 150, 0.44); }
@font-palette-values --sg-letter-4 { font-family: 'Seagulls'; override-colors: 0 rgba(240, 20, 150, 0.27); }
@font-palette-values --sg-letter-5 { font-family: 'Seagulls'; override-colors: 0 rgba(240, 20, 150, 0.12); }
@font-palette-values --sg-letter-6 { font-family: 'Seagulls'; override-colors: 0 rgba(240, 20, 150, 0); }
/* Placeholder text in the tester is site chrome, not a specimen, so it greys out. */
@font-palette-values --sg-placeholder {
  font-family: 'Seagulls';
  override-colors: 0 rgba(0, 0, 0, 0.22), 1 rgba(0, 0, 0, 0.22);
}

/* ---------- Page -------------------------------------------------------- */
:root {
  /* Both text colours are lifted straight out of the colour font's palette:
     the bird layer's blue (CPAL 1) and the letter layer's pink (CPAL 0). */
  --sg-blue: #1446E6;
  --sg-pink: #F01496;
  --sg-column: 724px;
  --sg-wide: 1180px;
  /* 278px is the largest size that still keeps the eight-letter hero on one
     line inside the 1400px content column — above it the last S drops. */
  --sg-display: clamp(64px, 19.5vw, 278px);
}

.sg-body {
  margin: 0;
  background: var(--page-bg, #EFEFEF);
  color: var(--sg-blue);
  font-family: 'NaN Rage Soft VF', var(--default-font-family, sans-serif);
  overflow-x: hidden;
}

.sg-body .cf-page-nav {
  background: var(--page-bg, #EFEFEF);
}

.sg-nav-meta {
  font-size: 13px;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.02em;
}

.sg-post {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 20px 40px;
}

/* ---------- Type -------------------------------------------------------- */
.sg-display {
  margin: 0;
  font-family: 'Seagulls', 'NaN Rage Soft VF', var(--default-font-family, sans-serif);
  font-palette: --sg-full;
  font-weight: 400;
  font-size: var(--sg-display);
  line-height: 0.78;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--sg-blue);
  overflow-wrap: normal;
  position: relative;
}

.sg-display--hero {
  margin-top: 8px;
  white-space: nowrap;
}

.sg-date {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  color: #000;
}

.sg-date time {
  font-style: inherit;
}

.sg-display--section {
  margin: clamp(56px, 8vw, 120px) 0 clamp(36px, 5vw, 72px);
}

/* Letters stay one COLR run so kerning (LL in SEAGULLS) never opens.
   Birds are copies of that same word, clipped to one glyph and faded. */
.sg-letters-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.sg-letters-base {
  font-palette: --sg-bird-6;
}

.sg-letters-birds {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.sg-letter {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-palette: --sg-letter-6;
  letter-spacing: inherit;
  white-space: pre-wrap;
  line-height: inherit;
  text-align: inherit;
  pointer-events: none;
  transition: opacity 320ms linear;
}

.sg-letter[data-birds="1"] { opacity: 0.82; }
.sg-letter[data-birds="2"] { opacity: 0.62; }
.sg-letter[data-birds="3"] { opacity: 0.44; }
.sg-letter[data-birds="4"] { opacity: 0.27; }
.sg-letter[data-birds="5"] { opacity: 0.12; }
.sg-letter[data-birds="6"] { opacity: 0; }

.sg-copy {
  max-width: var(--sg-column);
  margin: 0 auto;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.29;
  text-align: justify;
  hyphens: auto;
  color: var(--sg-blue);
}

.sg-copy p {
  margin: 0 0 1.29em;
}

.sg-copy p:last-child {
  margin-bottom: 0;
}

.sg-copy--after-tester {
  margin-top: clamp(40px, 6vw, 88px);
}

.sg-copy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 2px;
  transition: background-color 160ms ease;
}

.sg-copy a:hover {
  background: var(--blue-note, #CDEBFF);
}

/* ---------- Media ------------------------------------------------------- */
.sg-media {
  margin: clamp(32px, 5vw, 64px) auto;
  padding: 0;
}

.sg-media--hero {
  max-width: var(--sg-wide);
  margin-top: clamp(20px, 3vw, 40px);
}

.sg-media--portrait {
  max-width: 553px;
}

/* Native file is 1080×1920 (9:16). Keep the frame that tall so the
   stacked specimen (SOFT / FLY / HIGH / FAR / …) is not cropped. */
.sg-media--story {
  max-width: min(757px, 100%);
}

.sg-frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 2px;
  background: var(--year-tab-bg, #E8E8E8); /* shows while a lazy image or poster loads */
}

.sg-media--hero .sg-frame     { aspect-ratio: 1180 / 649; }
.sg-media--portrait .sg-frame { aspect-ratio: 553 / 650; }
.sg-media--story .sg-frame {
  aspect-ratio: 9 / 16;
  border: none;
  background: transparent;
  mix-blend-mode: darken;
}

.sg-frame > video,
.sg-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Same treatment as the folder thumbnails on the home page: mono by default,
     colour once you hover. The draft frames this slot as luminosity-only. */
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

@media (hover: none) {
  .sg-frame > video,
  .sg-frame > img {
    filter: none;
  }
}

.sg-frame:hover > video,
.sg-frame:hover > img,
.sg-frame:focus-within > video,
.sg-frame:focus-within > img {
  filter: none;
}

.sg-media--story .sg-frame > video {
  filter: none;
  object-fit: contain;
}

/* Book spread + the initial that started it, overlapping like the draft */
.sg-media--pair {
  position: relative;
  max-width: var(--sg-wide);
  aspect-ratio: 1180 / 740;
}

.sg-media--pair .sg-frame {
  position: absolute;
}

.sg-media--pair .sg-frame--book {
  left: 6%;
  top: 0;
  width: 47%;
  aspect-ratio: 553 / 650;
}

.sg-media--pair .sg-frame--initial {
  left: 39%;
  top: 12%;
  width: 62.5%;
  aspect-ratio: 739 / 476;
  z-index: 1;
}

.sg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sg-caption {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #000;
  text-align: center;
}

/* ---------- Font tester ------------------------------------------------- */
.sg-tester {
  max-width: var(--sg-wide);
  margin: 0 auto;
}

.sg-stage {
  position: relative;
  border: 1px solid #000;
  border-radius: 2px;
  background: #FFFFFF;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 3vw, 40px);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: text;
}

.sg-stage-text {
  width: 100%;
  margin: 0;
  outline: none;
  font-family: 'Seagulls', 'NaN Rage Soft VF', var(--default-font-family, sans-serif);
  font-palette: --sg-full;
  font-weight: 400;
  font-size: var(--sg-stage-size, 150px);
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--sg-blue);
  caret-color: #000;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-user-modify: read-write-plaintext-only;
}

.sg-stage-text:empty::before {
  content: attr(data-placeholder);
  color: rgba(0, 0, 0, 0.25);
  font-palette: --sg-placeholder;
}

/* Hover-mix states set by seagulls-post.js */
.sg-stage-text[data-mix="full"]     { font-palette: --sg-full; }
.sg-stage-text[data-mix="bird-1"]   { font-palette: --sg-bird-1; }
.sg-stage-text[data-mix="bird-2"]   { font-palette: --sg-bird-2; }
.sg-stage-text[data-mix="bird-3"]   { font-palette: --sg-bird-3; }
.sg-stage-text[data-mix="bird-4"]   { font-palette: --sg-bird-4; }
.sg-stage-text[data-mix="bird-5"]   { font-palette: --sg-bird-5; }
.sg-stage-text[data-mix="bird-6"]   { font-palette: --sg-bird-6; }
.sg-stage-text[data-mix="letter-1"] { font-palette: --sg-letter-1; }
.sg-stage-text[data-mix="letter-2"] { font-palette: --sg-letter-2; }
.sg-stage-text[data-mix="letter-3"] { font-palette: --sg-letter-3; }
.sg-stage-text[data-mix="letter-4"] { font-palette: --sg-letter-4; }
.sg-stage-text[data-mix="letter-5"] { font-palette: --sg-letter-5; }
.sg-stage-text[data-mix="letter-6"] { font-palette: --sg-letter-6; }

/* Edge hints inside the stage */
.sg-stage-hint {
  position: absolute;
  bottom: 12px;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 160ms ease;
}

.sg-stage-hint--left  { left: 14px; }
.sg-stage-hint--right { right: 14px; text-align: right; }
.sg-stage:hover .sg-stage-hint { opacity: 0.9; }

.sg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 14px;
}

.sg-chips {
  display: flex;
  gap: 8px;
}

.sg-chip {
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #000;
  border-radius: 2px;
  background: var(--yellow-note, #FFFBCC);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #000;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.sg-chip:hover { background: var(--yellow-note-dark, #F5F1A8); }
.sg-chip:active { transform: scale(0.97); }
.sg-chip[aria-pressed="true"] { background: var(--blue-note, #CDEBFF); }
.sg-chip:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.sg-size {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: #000;
}

.sg-size input[type="range"] {
  width: 160px;
  accent-color: #000;
  cursor: pointer;
}

.sg-size output {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sg-tester-note {
  max-width: var(--sg-column);
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  text-align: center;
}

/* ---------- Download ---------------------------------------------------- */
.sg-download-wrap {
  text-align: center;
  margin-top: clamp(36px, 5vw, 72px);
}

/* Sized so the eight letters always stay on one line: the word measures about
   5.3em, so 9vw leaves room inside the page padding at every width. */
.sg-download {
  display: inline-block;
  text-decoration: none;
  font-size: clamp(40px, 9vw, 132px);
  white-space: nowrap;
  transition: transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.sg-download:hover {
  transform: scale(1.02);
}

.sg-download:focus-visible {
  outline: 2px solid #000;
  outline-offset: 6px;
}

.sg-download:active {
  transform: scale(0.98);
}

.sg-files {
  list-style: none;
  margin: 28px auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sg-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #000;
  border-radius: 2px;
  background: var(--yellow-note, #FFFBCC);
  font-size: 13px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.sg-file small {
  font-weight: 400;
  opacity: 0.65;
}

.sg-file:hover { background: var(--yellow-note-dark, #F5F1A8); }
.sg-file:active { transform: scale(0.97); }
.sg-file:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.sg-license {
  max-width: var(--sg-column);
  margin: 20px auto 0;
  font-size: 14px;
  line-height: 1.4;
  color: #000;
  text-align: center;
}

/* ---------- Footer (mirrors the home page) ------------------------------ */
.sg-body .site-footer {
  margin-top: clamp(56px, 8vw, 120px);
}

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 900px) {
  .sg-post {
    padding: 32px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px));
  }

  .sg-media--pair {
    aspect-ratio: auto;
    display: grid;
    gap: 12px;
  }

  .sg-media--pair .sg-frame {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .sg-chips {
    flex-wrap: wrap;
  }

  .sg-size {
    margin-left: 0;
    width: 100%;
  }

  .sg-size input[type="range"] {
    flex: 1;
    min-width: 0;
    width: auto;
  }
}

@media (max-width: 768px) {
  :root {
    /* Keep single words on one line at phone widths: the widest heading is 10 glyphs */
    --sg-display: min(11.5vw, 76px);
  }

  .sg-post {
    padding: 28px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  }

  .sg-display {
    line-height: 0.85;
  }

  .sg-stage {
    min-height: 220px;
    --sg-stage-size: 72px;
  }

  .sg-stage-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sg-frame > video,
  .sg-frame > img,
  .sg-chip,
  .sg-file,
  .sg-download,
  .sg-letter {
    transition: none;
  }

  .sg-download:hover {
    transform: none;
  }
}