/* ==========================================================================
   Edna Pedraza — static site styles
   --------------------------------------------------------------------------
   1. Fonts           6. Home              11. 404 / not found
   2. Tokens          7. Project page      12. Utilities
   3. Base            8. About             13. Reduced motion
   4. Brand header    9. Contact
   5. Menu           10. Empty media frame
   Breakpoints (measured on the live Framer site):
     desktop >= 1400px · tablet 810–1399px · phone < 810px
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Static file; the weight range stops browsers from faking bold. */
@font-face {
  font-family: "Geist Pixel";
  src: url("../assets/fonts/GeistPixel-Square.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("../assets/fonts/roboto-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: "Roboto Mono";
  src: url("../assets/fonts/roboto-mono-latin-ext-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: "Inter";
  src: url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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";
  src: url("../assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* 2. Tokens ---------------------------------------------------------------- */
:root {
  /* palette */
  --c-purple: #551ee3;
  --c-purple-a50: rgb(85 30 227 / 0.5);
  --c-red: #d9443f;
  --c-pink: #f54edc;
  --c-pink-alt: #ed53e0;
  --c-cream: #fcfaf5;
  --c-cream-a20: rgb(252 250 245 / 0.2);
  --c-ink: #181818;
  --c-line: #222;
  --c-black: #000;
  --c-white: #fff;
  --c-error: #a3201b;
  --c-about-page: rgb(245 186 228);
  --c-about-body: rgb(246 214 221);
  --c-contact-page: rgb(186 255 190);
  --c-empty-fill: rgb(136 136 136 / 0.2);
  --c-empty-line: rgb(255 255 255 / 0.12);

  /* families */
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-pixel: "Geist Pixel", "Geist Mono", ui-monospace, monospace;
  --f-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-mono-geist: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-inter: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* type scale (desktop values; overridden per breakpoint) */
  --fs-display: 88px;      /* big header name */
  --fs-subtitle: 28px;     /* pixel role line */
  --fs-brand-sm: 30px;     /* small header name, prev/next titles */
  --fs-title: 120px;       /* project h1 */
  --lh-title: 1.2;
  --fs-row: 22px;          /* home rows */
  --fs-lede: 30px;         /* project description */
  --fs-credit: 17px;
  --fs-bio: 20px;
  --fs-small: 15px;        /* about footer, 404 copy, form button */
  --fs-label: 12px;        /* mono labels */
  --fs-menu: 17px;         /* always-visible menu */
  --fs-count: 450px;       /* 404 countdown */

  /* spacing */
  --gutter: 24px;
  --pill-top: 20px;
  --pill-right: 24px;
  --row-gap: 20px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.4s;
  --dur-slow: 0.6s;
}

@media (max-width: 1399.98px) {
  :root {
    --fs-display: 30px;
    --fs-subtitle: 24px;
    --fs-brand-sm: 24px;
    --fs-title: 103px;
    --lh-title: 1;
    --fs-small: 12px;
    --fs-count: 400px;
  }
}

@media (max-width: 809.98px) {
  :root {
    --gutter: 16px;
    --fs-subtitle: 19px;
    --fs-brand-sm: 19px;
    --fs-title: min(63px, 15.6vw);
    --fs-small: 13px;
    --fs-count: 200px;
    --pill-right: 16px;
  }
}

/* 3. Base ------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  font-family: var(--f-sans);
  color: var(--c-ink);
  background: var(--c-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border-radius: 100px;
  background: var(--c-cream);
  color: var(--c-ink);
  font: 500 var(--fs-label) / 1.2 var(--f-mono);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.mono-label {
  font: 500 var(--fs-label) / 1.2 var(--f-mono);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* 4. Brand header ------------------------------------------------------------
   The header is absolutely positioned and deliberately creates NO stacking
   context: the menu inside it uses mix-blend-mode and must blend with the
   whole page, exactly like the live site. */
.site-header {
  position: absolute;
  inset: 0 0 auto;
}

.brand {
  position: absolute;
  z-index: 3; /* above the home list, which otherwise covers it and eats clicks */
  top: 20px;
  left: var(--gutter);
  display: block;
  text-decoration: none;
}

.brand__name {
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-purple);
}

.brand__role {
  font-family: var(--f-pixel);
  font-weight: 400;
  font-size: var(--fs-subtitle);
  line-height: 0.5;
  letter-spacing: -0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-red);
}

/* About uses the big name without the role line. */
.brand--plain {
  top: 20px;
}

/* Project pages and 404 use a small cream name. */
.brand--small {
  top: 28px;
}

.brand--small .brand__name {
  font-size: var(--fs-brand-sm);
  color: var(--c-cream);
}

@media (max-width: 1399.98px) {
  .brand--plain {
    top: 28px;
  }

  .brand--small {
    top: 31px;
  }
}

@media (max-width: 809.98px) {
  .brand--small {
    top: 34px;
  }
}

/* 5. Menu -------------------------------------------------------------------
   Always visible, fixed top right; difference-blended like the live site's
   menu overlay (pink turns green/teal over yellow images). */
.site-menu {
  position: fixed;
  z-index: 4;
  top: var(--pill-top);
  right: var(--pill-right);
  mix-blend-mode: difference;
}

.site-menu__list {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  gap: 8px 24px;
  max-width: 52vw;
}

.site-menu__item {
  display: flex;
}

.site-menu__link {
  display: inline-flex;
  color: var(--c-pink);
  text-decoration: none;
  font: 500 var(--fs-menu) / 1.2 var(--f-mono);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

@media (max-width: 1399.98px) {
  :root {
    --fs-menu: 15px;
  }
}

.site-menu__link:hover,
.site-menu__link:focus-visible,
.site-menu__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-menu__link:focus-visible {
  outline-color: var(--c-pink);
}

/* Phones: no room beside the brand, so the menu becomes a bar pinned to the
   bottom of the screen, in the old menu pill's colours. */
@media (max-width: 809.98px) {
  body {
    padding-bottom: 76px;
  }

  .site-menu {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 12px 16px;
    border-radius: 24px;
    background: var(--c-purple-a50);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    mix-blend-mode: normal;
  }

  :root {
    --fs-menu: 14px;
  }

  .site-menu__list {
    justify-content: center;
    gap: 8px 16px;
    max-width: none;
  }

  .site-menu__link {
    color: var(--c-cream);
  }

  .site-menu__link:focus-visible {
    outline-color: var(--c-cream);
  }
}

/* 6. Home ------------------------------------------------------------------- */
.page-home {
  --pill-top: 47px;
  --pill-right: 24px;
}

/* Background: the first project's image, plus one layer per project that
   cross-fades in while its row is hovered or focused. */
.home-bg {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--c-black);
}

.home-bg__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.home-bg__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-bg__layer.is-base {
  opacity: 1;
  transition: none;
}

.home-bg__layer.is-active {
  opacity: 1;
  animation: bg-in var(--dur-slow) var(--ease-out);
}

@keyframes bg-in {
  from {
    opacity: 0.5;
  }
}

.home {
  position: relative;
}

/* Desktop / tablet list: 11 full-width rows, vertically centred below the
   header (measured: centre = 50vh + 40px, pitch 46px). */
.work-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--row-gap);
  min-height: 100vh;
  padding: 80px 0 0;
}

.work-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 2px 26px;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 400;
  font-size: var(--fs-row);
  line-height: 22px;
}

.work-row__title {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  transition: color var(--dur-fast) ease;
}

/* The hover band: a cream strip, difference-blended over the image so it
   reads as an inverted slice of the photograph. Grows from the centre. */
.work-row__band {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--c-cream);
  mix-blend-mode: difference;
  pointer-events: none;
  transition: top 0.22s var(--ease-out), height 0.22s var(--ease-out);
}

.work-row:hover .work-row__band,
.work-row:focus-visible .work-row__band {
  top: 0;
  height: 100%;
}

.work-row:hover .work-row__title,
.work-row:focus-visible .work-row__title {
  color: var(--c-white);
}

.work-row:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: -2px;
}

/* Hatched overlay used when a project has no image (see section 10). */
.home-bg__layer--empty {
  background-color: var(--c-empty-fill);
}

/* Phone grid (hidden on desktop / tablet). */
.work-grid {
  display: none;
}

@media (min-width: 1400px) and (max-height: 700px) {
  .work-list {
    justify-content: flex-start;
    padding: 190px 0 48px;
  }
}

@media (max-width: 809.98px) {
  .home-bg {
    position: absolute;
  }

  .home-bg__layer:not(.is-base) {
    display: none;
  }

  .work-list {
    display: none;
  }

  .work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
    padding: 116px 16px 100px;
  }

  .work-card__link {
    display: block;
    text-decoration: none;
  }

  .work-card__title {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--c-cream);
    font-weight: 480;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .work-card__media {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
  }

  .work-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .work-card__link:hover img,
  .work-card__link:focus-visible img {
    transform: scale(1.04);
  }

  .work-card__link:focus-visible {
    outline-color: var(--c-cream);
  }
}

/* 7. Project page ---------------------------------------------------------- */
.page-project {
  background: var(--project-bg, var(--c-ink));
}

.project {
  padding-top: 120px;
}

.project__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin: 0 var(--gutter);
}

.tag--pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--project-pill, var(--c-ink));
  color: var(--c-white);
  white-space: nowrap;
}

.tag--plain {
  color: var(--c-ink);
}

.project__title {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 var(--gutter);
  color: var(--c-purple);
  font-weight: 800;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

@media (min-width: 1148px) {
  .project__title {
    padding: 0;
  }
}

.project__rule {
  height: 1px;
  margin: 32px var(--gutter) 8px;
  border: 0;
  background: var(--c-cream);
  opacity: 0.2;
}

.project__hero {
  margin: 0 var(--gutter);
  aspect-ratio: 1392 / 824;
  overflow: hidden;
}

.project__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin: 75px var(--gutter) 0;
}

.project__lede {
  max-width: 841px;
  color: var(--c-black);
  font-family: var(--f-inter);
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: 1.4;
  letter-spacing: -0.04em;
}

.project__lede strong {
  font-weight: 700;
}

.project__credits {
  display: grid;
  gap: 20px;
  flex: none;
  width: 350px;
  color: var(--c-purple);
  font-weight: 500;
  font-size: var(--fs-credit);
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.project__gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  margin: 63px var(--gutter) 0;
}

.project__gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.project-footer {
  margin: 123px var(--gutter) 0;
  padding: 11px 0 60px;
  border-top: 1px solid var(--c-cream-a20);
}

.pager__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pager__item--next {
  grid-column: 2;
}

.pager__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
}

.pager__item--next .pager__link {
  align-items: flex-end;
  text-align: right;
}

.pager__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--c-pink);
}

.pager__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-cream);
  opacity: 0.8;
}

.pager__title {
  color: var(--c-cream);
  font-weight: 800;
  font-size: var(--fs-brand-sm);
  line-height: 1.2;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition: color var(--dur-fast) ease;
}

.pager__link:hover .pager__title,
.pager__link:focus-visible .pager__title {
  color: var(--c-purple);
}

@media (max-width: 1399.98px) {
  .project__body {
    flex-direction: column;
    gap: 46px;
  }

  .project__lede {
    max-width: none;
  }

  .project__credits {
    width: auto;
  }
}

@media (max-width: 809.98px) {
  .tag--plain {
    display: none;
  }

  .project__hero {
    aspect-ratio: 358 / 523;
  }

  .project__gallery {
    margin-top: 64px;
  }

  .project-footer {
    margin-top: 122px;
  }
}

/* 8. About ----------------------------------------------------------------- */
html:has(.page-about) {
  background: var(--c-about-body);
}

.page-about {
  --pill-top: 47px;
  background: var(--c-about-page);
}

.about {
  padding: 186px 24px 0;
}

.about__bio p {
  max-width: 1352px;
  margin-bottom: 20px;
  font-family: var(--f-mono-geist);
  font-weight: 500;
  font-size: var(--fs-bio);
  line-height: 1.3;
  letter-spacing: -0.04em;
}

.about__bio strong {
  font-weight: 800;
}

.masonry {
  columns: 5;
  column-gap: 20px;
  margin-top: 108px;
}

.masonry__item {
  margin-bottom: 20px;
  break-inside: avoid;
}

.masonry__item img {
  width: 100%;
  height: auto;
}

.about-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 174px 24px 80px;
}

.about-footer__label {
  margin-bottom: 24px;
  font-weight: 500;
  white-space: pre;
}

.about-footer__list {
  display: grid;
  gap: 10px;
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: -0.04em;
}

@media (max-width: 1399.98px) {
  .page-about {
    --pill-top: 20px;
  }

  .masonry {
    columns: 4;
  }

  .about-footer__list {
    gap: 10.5px;
  }
}

@media (max-width: 809.98px) {
  .masonry {
    columns: 3;
    column-gap: 10px;
    margin-top: 120px;
  }

  .masonry__item {
    margin-bottom: 10px;
  }

  .about-footer {
    flex-direction: column;
    gap: 38px;
    padding-top: 125px;
  }

  .about-footer__list {
    gap: 10px;
    font-size: 13px;
  }
}

/* 9. Contact ---------------------------------------------------------------
   A full-height section below the project list on the home page; its solid
   background covers the fixed project image as it scrolls up. Intro on the
   left, form on the right; stacked on phones. */
.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-content: center;
  align-items: start;
  column-gap: 80px;
  min-height: 100vh;
  padding: 160px var(--gutter) 96px;
  background: var(--c-contact-page);
}

.contact__title {
  color: var(--c-purple);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.contact__taglines {
  display: grid;
  gap: 4px;
  margin-top: 28px;
  color: var(--c-pink-alt);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.contact__links {
  display: grid;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  font: 500 var(--fs-menu) / 1.2 var(--f-mono);
  letter-spacing: -0.02em;
}

.contact__links a {
  color: var(--c-purple);
  text-underline-offset: 3px;
}

.field {
  margin-bottom: 24px;
}

.field__label {
  display: block;
  margin-bottom: 8px;
  color: var(--c-purple);
}

.field__control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 2px solid var(--c-purple);
  border-radius: 0;
  background: rgb(255 255 255 / 0.45);
  color: var(--c-ink);
  font: 400 16px / 24px var(--f-sans);
  letter-spacing: -0.02em;
}

.field__control::placeholder {
  color: #7a7a7a;
  opacity: 1;
}

.field__control:focus {
  outline: none;
  background: rgb(255 255 255 / 0.8);
}

.field__control:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 2px;
}

textarea.field__control {
  height: 160px;
  min-height: 96px;
  resize: vertical;
}

.field__control[aria-invalid="true"] {
  border-bottom-color: var(--c-error);
}

.field__error {
  margin-top: 6px;
  color: var(--c-error);
}

.field__error:empty {
  display: none;
}

.contact-form__submit {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 16px 24px;
  border: 0;
  border-radius: 100px;
  background: var(--c-purple);
  color: var(--c-cream);
  font: 500 var(--fs-menu) / 1.2 var(--f-mono);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease;
}

.contact-form__submit:hover {
  background: var(--c-pink);
}

.contact-form__submit:focus-visible {
  outline: 2px solid var(--c-purple);
  outline-offset: 3px;
}

.contact-form__status {
  margin-top: 16px;
  color: var(--c-purple);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.contact-form__status:empty {
  display: none;
}

@media (max-width: 1399.98px) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: 48px;
  }

  .contact__title {
    font-size: 56px;
  }

  .contact__taglines {
    font-size: 18px;
  }
}

@media (max-width: 809.98px) {
  .contact {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
    align-content: start;
    padding: 72px var(--gutter) 48px;
  }

  .contact__title {
    font-size: 40px;
  }

  .contact__taglines {
    margin-top: 16px;
    font-size: 16px;
  }

  .contact__links {
    margin-top: 24px;
  }
}

/* 10. Empty media frame ----------------------------------------------------
   The live Coca-Cola page has no hero; its frame shows the editor's empty
   placeholder (grey wash + fine diagonal hatching). Reproduced in CSS. */
.is-empty {
  background-color: var(--c-empty-fill);
  background-image: repeating-linear-gradient(-45deg, var(--c-empty-line) 0 1px, transparent 1px 14px);
}

/* 11. 404 / not found ------------------------------------------------------ */
.page-404 {
  background: var(--c-black);
}

.not-found {
  min-height: 100vh;
  padding: 150px 24px 48px;
  color: var(--c-cream);
}

.not-found__intro {
  padding: 0 100px;
}

.not-found__code {
  margin-bottom: 24px;
  color: var(--c-pink);
}

.not-found__copy {
  font-size: var(--fs-small);
  line-height: 1.2;
  letter-spacing: -0.04em;
}

.not-found__copy + .not-found__copy {
  margin-top: 10px;
}

.not-found__copy a {
  text-underline-offset: 3px;
}

.not-found__countdown {
  margin-top: 96px;
  text-align: right;
}

.not-found__redirect {
  color: var(--c-pink);
}

.not-found__count {
  margin-top: 16px;
  padding-right: 0.04em;
  font-weight: 400;
  font-size: var(--fs-count);
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1399.98px) {
  .not-found__intro {
    padding: 0 60px;
  }

  .not-found__copy + .not-found__copy {
    margin-top: 11px;
  }

  .not-found__countdown {
    margin-top: 20px;
  }
}

@media (max-width: 809.98px) {
  .not-found__intro {
    padding: 0;
  }

  .not-found__countdown {
    margin-top: calc(28vh - 8px);
  }

  .not-found__count {
    margin-top: 18px;
    padding-right: 0.02em;
  }

  .not-found__copy + .not-found__copy {
    margin-top: 10px;
  }
}

/* 12. Utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.noscript-note {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: 220px 24px 40px;
  color: var(--c-cream);
  font-size: 15px;
  line-height: 1.4;
}

/* 13. Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}