/* ============ Archivo prototype 2 ============ */
/* Tokens — from Figma variables */
:root {
  --paper: #fcfcfc;
  --ink: #141414;
  --ink-inverted: #fcfcfc;
  --overlay: rgba(20, 20, 20, 0.08);

  --cover-amsterdam: #ff5c00;
  --cover-new-york: #ffd400;
  --cover-paris: #00c853;
  --city: var(--cover-amsterdam);

  --font-accent: "Basteleur", Georgia, serif;
  --font-heading: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hedvig Letters Serif", Georgia, serif;

  --gap: 8px;
  --radius-tile: 8px;
  --radius-band: 12px;
  --header-h: 76px;
}

/* The Figma file works in Display P3 — plain hex in the browser is sRGB,
   which mutes the city colors. On wide-gamut screens, serve the same
   channel values in P3 so the orange matches Figma's vividness. */
@supports (color: color(display-p3 1 0 0)) {
  :root {
    --cover-amsterdam: color(display-p3 1 0.3608 0);
    --cover-new-york: color(display-p3 1 0.8314 0);
    --cover-paris: color(display-p3 0 0.7843 0.3255);
  }
}

@font-face {
  font-family: "Basteleur";
  src: url("fonts/Basteleur-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("fonts/HedvigLettersSerif%5Bopsz%5D.ttf") format("truetype-variations");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
}
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* Type helpers */
.caption-accent {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-feature-settings: "ss01" 1;
}

/* ============ Header ============ */
/* Closed state on desktop/tablet is always 76px (24px block padding).
   Sticky + transform = slides out on scroll down, back on scroll up. */
.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 76px;
  padding: 24px 32px;
  background: var(--paper);
  transition: transform 0.3s ease;
}
body.city-page .header { background: var(--city); }
.header--hidden { transform: translateY(-100%); }
.header__link {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
}
.header__wordmark {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  inline-size: 200px;
  block-size: 38px;
}
.header__wordmark img { inline-size: 100%; block-size: 100%; }
.header__menu-btn { display: none; }

/* Article page header — a city-colored bar that scrolls away with the hero
   band, then sticks to the top once the band leaves the screen (is-stuck
   toggled from app.js). relative -> sticky keeps flow, so no layout jump. */
.header--article {
  position: relative;
  translate: none;
  background: var(--city);
  z-index: 30;
}
/* Once stuck, drop the orange bar — just the black nav elements float. */
.header--article.is-stuck {
  position: sticky;
  inset-block-start: 0;
  background: transparent;
  animation: article-drop 0.35s cubic-bezier(0.16, 0.84, 0.3, 1);
}
@keyframes article-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.header--article .header__home {
  position: static;
  inline-size: 95px;
  block-size: 24px;
}
.header--article .header__home img { inline-size: 100%; block-size: 100%; }
.header--article .header__city {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: -0.56px;
  white-space: nowrap;
}

/* While the menu is open the header background goes transparent (no color
   fade) so the white menu panel — which drops down behind the header at
   z-20 — shows through and slides over the city color. The white arrives
   through the drop movement, not an opacity transition. */
body.menu-open .header,
body.menu-open .header--article,
body.menu-open .header--article.is-stuck,
body.menu-closing .header,
body.menu-closing .header--article,
body.menu-closing .header--article.is-stuck {
  background: transparent;
}
/* Article pages have a white body, so give the transparent header a
   city-colored backing (kept during open AND close) for the white panel
   to slide over — matching the sweep the city page gets from its colored
   body. menu-closing keeps the header transparent while the panel travels
   through the top 76px, so the color is revealed by the panel's edge
   instead of snapping back the moment the menu starts closing. */
body.article-page.menu-open::before,
body.article-page.menu-closing::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--header-h);
  background: var(--city);
  z-index: 10;
}

/* ============ Menu overlay ============ */
/* Desktop/tablet: the paper panel drops down from behind the page header
   (z-index below it), so the header's own Cities / logo / About stay put
   while just the background + city pills slide in underneath. */
.menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding-block-start: var(--header-h);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.33, 0.02, 0.15, 1), visibility 0s linear 0.4s;
}
body.menu-open .menu {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.3, 1);
}
body.menu-open { overflow-anchor: none; }

/* The duplicate bar is only used by the full-screen mobile menu */
.menu__bar {
  display: none;
  position: relative;
  align-items: center;
  justify-content: space-between;
  block-size: 76px;
  padding: 24px 32px;
}
.menu__bar .header__wordmark { inline-size: 200px; block-size: 38px; }
.menu__close { inline-size: 24px; block-size: 24px; }
.menu__close img { inline-size: 100%; block-size: 100%; }

/* Sandwich <-> X morph (both header button and menu close button) */
.icon-toggle { position: relative; }
.icon-toggle img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  transition: opacity 0.25s ease, rotate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), scale 0.3s ease;
}
.icon-toggle .icon-toggle__x { opacity: 0; rotate: -90deg; scale: 0.5; }
body.menu-open .icon-toggle .icon-toggle__bars { opacity: 0; rotate: 90deg; scale: 0.5; }
body.menu-open .icon-toggle .icon-toggle__x { opacity: 1; rotate: 0deg; scale: 1; }

.menu__cities {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  flex-wrap: wrap;
}
.menu-pill {
  display: inline-block;
  background: var(--overlay);
  border-radius: 8px;
  padding: 5px 12px 7px;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  white-space: nowrap;
}
.menu-pill--soon { opacity: 0.3; cursor: default; }

/* Items fade in gently as the panel drops (--i set per item in app.js).
   On close they stay visible and ride the panel straight back up — the
   opacity only resets after the slide finishes, so there's no fade-out. */
.menu__cities > *,
.menu__secondary > * {
  opacity: 0;
  transition: opacity 0s linear 0.4s;
}
body.menu-open .menu__cities > *,
body.menu-open .menu__secondary > * {
  opacity: 1;
  transition: opacity 0.3s ease;
  transition-delay: calc(180ms + var(--i, 0) * 40ms);
}
.menu-pill--soon { opacity: 0; }
body.menu-open .menu-pill--soon { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__cities > *, .menu__secondary > *, .header { transition: none; }
}

.menu__secondary { display: none; }

/* ============ Feed ============ */
.feed {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding-inline: var(--gap);
  position: relative;
  z-index: 1;
}
.feed__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-block-end: 20px;
}

/* Feature tile */
.tile { display: flex; flex-direction: column; gap: 12px; }
.tile__media {
  position: relative;
  aspect-ratio: 424 / 530;
  border-radius: var(--radius-tile);
  overflow: hidden;
}
.tile__media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.tile__media--illu { background: rgba(0, 0, 0, 0.1); }
.tile__media--illu .tile__illu {
  position: absolute;
  inset-block: 12.5%;
  inset-inline: 9%;
  inline-size: 82%;
  block-size: 75%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.tile__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 28px;
  line-height: 32px;
  letter-spacing: -0.28px;
  padding-inline-end: 16px;
}

/* Pills */
.pills {
  position: absolute;
  inset-inline-start: 8px;
  inset-block-start: 8px;
  display: flex;
  z-index: 2;
}
.pills--center { position: static; justify-content: center; }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--ink);
}
.pill--city { background: var(--city); }
.pill--format { background: var(--paper); }

/* Superfeature XL tile */
.super {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  block-size: 680px;
  padding: 36px 40px;
  border-radius: var(--radius-tile);
  overflow: hidden;
  text-align: center;
  color: var(--ink-inverted);
}
.super__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.super__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.super__scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.4); }
.super__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.super__title {
  max-inline-size: 512px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -1.2px;
}
.super__title .accent {
  font-family: var(--font-accent);
  font-size: 54px;
  line-height: 62px;
  letter-spacing: -1.08px;
}
.super__title .sans {
  font-size: 60px;
  line-height: 62px;
}
.super__sub {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 32px;
}
/* Home feed superfeature: white text, city pill + paper format pill.
   City guide + article superfeatures (--tinted): city-colored text,
   single format pill in city color. */
.super--tinted { color: var(--city); }
.super--tinted .pill { background: var(--city); }

/* ============ City page ============ */
body.city-page { background: var(--city); }
.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 120px 24px;
  text-align: center;
}
.cover__city {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 120px;
  line-height: 124px;
  letter-spacing: -3.6px;
}
.cover__lead {
  font-size: 24px;
  line-height: 32px;
  max-inline-size: 680px;
}
body.city-page .feed { background: var(--city); }
body.city-page .footer { position: relative; z-index: 1; background: var(--city); }

/* ============ Article pages ============ */
.band {
  background: var(--city);
  padding-inline: var(--gap);
  padding-block-end: var(--gap);
}
/* Superfeature cover is full-bleed and square (no padding, no radius) */
.band:not(.band--feature) { padding: 0; }
.band:not(.band--feature) .super { border-radius: 0; }
.band--feature {
  padding-block-start: 40px;
  padding-block-end: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.band__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.band__title {
  max-inline-size: 512px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -1.2px;
  color: var(--ink);
}
.band__title .accent {
  font-family: var(--font-accent);
  font-size: 54px;
  line-height: 62px;
  letter-spacing: -1.08px;
}
.band__title .sans { font-size: 60px; line-height: 62px; }
.band__photo {
  inline-size: 512px;
  max-inline-size: 100%;
  block-size: 640px;
  overflow: hidden;
}
.band__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.band__lead { font-size: 24px; line-height: 32px; color: var(--ink); }

.article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px var(--gap);
}
.article p {
  inline-size: 680px;
  max-inline-size: 100%;
}
.article p .lede-accent {
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
}
.article figure {
  padding-block: 24px;
  inline-size: 100%;
}
.article figure.article__img--body { inline-size: 680px; max-inline-size: 100%; }
.article figure img {
  inline-size: 100%;
  aspect-ratio: 1776 / 1184;
  object-fit: cover;
}

/* ============ Footer ============ */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 48px 24px;
}
.footer--band {
  background: var(--city);
}
.footer__wordmark { inline-size: 100%; }
.footer__wordmark img { inline-size: 100%; block-size: auto; }
/* Full wordmark SVG has no intrinsic size (preserveAspectRatio="none") */
.footer__wordmark img.footer__wordmark-full { aspect-ratio: 1159 / 222.541; }
.footer__wordmark img.footer__wordmark-a { display: none; aspect-ratio: 1159 / 1165.1; }
.footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  inline-size: 100%;
  text-align: center;
}
.footer__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.footer__copy {
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 20px;
}

/* ============ Tablet ============ */
@media (max-width: 1024px) {
  .feed__row { grid-template-columns: repeat(2, 1fr); }
  .super__title .accent { font-size: 44px; line-height: 50px; }
  .super__title .sans { font-size: 48px; line-height: 50px; }
  .band__title .accent { font-size: 44px; line-height: 50px; }
  .band__title .sans { font-size: 48px; line-height: 50px; }
  .cover__city { font-size: 88px; line-height: 92px; letter-spacing: -2.6px; }
}

/* ============ Mobile ============ */
@media (max-width: 640px) {
  :root { --header-h: 72px; }
  /* Minimal header: wordmark + three-dot handle only */
  .header { block-size: 72px; padding: 24px; justify-content: flex-end; }
  .header__link { display: none; }
  .header__wordmark { inline-size: 116px; block-size: 22px; }
  .header__menu-btn {
    display: block;
    inline-size: 24px;
    block-size: 24px;
  }
  .header__menu-btn img { inline-size: 100%; block-size: 100%; }
  /* Article header: city name centered + handle on the right */
  .header--article { block-size: 72px; }
  .header--article .header__home { display: none; }
  .header--article .header__city {
    font-size: 26px;
    line-height: 32px;
    letter-spacing: -0.26px;
  }
  .header--article .header__menu-btn { margin-inline-start: auto; }

  /* Mobile keeps the earlier full-screen menu: fades in over everything,
     with its own bar and a staggered item cascade (no drop-down panel). */
  .menu {
    inset: 0;
    z-index: 40;
    padding-block-start: 0;
    overflow-y: auto;
    transform: none;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  body.menu-open .menu { transform: none; opacity: 1; transition: opacity 0.25s ease; }
  /* Open-state bar per Figma 365-908: 72px, 24px padding, close at the end,
     Archivo wordmark (126x24) centered */
  .menu__bar { display: flex; block-size: 72px; padding: 24px; justify-content: flex-end; }
  .menu__bar .header__wordmark { inline-size: 126px; block-size: 24px; }

  /* City name <-> Archivo flip: both sit centered at the same vertical
     spot in their 72px bars, so on open the wordmark rolls in from the
     top while the city name rolls out below it, and the reverse on close. */
  .menu__bar .header__wordmark {
    transform: perspective(600px) rotateX(-90deg);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
  }
  body.menu-open .menu__bar .header__wordmark {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
    transition-delay: 120ms;
  }
  body.article-page .header--article .header__city {
    transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
    transition-delay: 150ms;
  }
  body.article-page.menu-open .header--article .header__city {
    transform: perspective(600px) rotateX(90deg);
    opacity: 0;
    transition-delay: 0ms;
  }
  .menu__cities {
    flex-direction: column;
    gap: 16px;
    padding: 40px 24px;
  }
  /* Restore the item cascade on mobile */
  .menu__cities > *,
  .menu__secondary > * {
    translate: 0 14px;
    transition: opacity 0.3s ease, translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  body.menu-open .menu__cities > *,
  body.menu-open .menu__secondary > * {
    translate: 0 0;
    transition: opacity 0.3s ease, translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: calc(60ms + var(--i, 0) * 45ms);
  }
  .menu-pill {
    background: none;
    padding: 0;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.8px;
  }
  .menu__secondary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding-block: 24px 48px;
    font-size: 18px;
  }

  /* Stacked tiles get the same 28px spacing as between rows (20px card
     padding + 8px feed gap), per mobile mockups */
  .feed__row { grid-template-columns: 1fr; row-gap: 28px; }
  .super { block-size: 600px; padding: 32px 24px; }
  .super__title .accent { font-size: 34px; line-height: 40px; letter-spacing: -0.68px; }
  .super__title .sans { font-size: 38px; line-height: 40px; letter-spacing: -0.76px; }
  .super__sub { font-size: 18px; line-height: 28px; }
  .tile__title { font-size: 24px; line-height: 28px; }

  .cover { padding: 120px 16px; gap: 16px; }
  .cover__city { font-size: 48px; line-height: 54px; letter-spacing: -1.44px; }
  .cover__lead { font-size: 18px; line-height: 28px; }

  /* Big 'a' letter logo instead of the full wordmark */
  .footer__wordmark img.footer__wordmark-full { display: none; }
  .footer__wordmark img.footer__wordmark-a { display: block; }

  .band--feature { padding-block-start: 24px; padding-block-end: 48px; gap: 24px; }
  .band__title .accent { font-size: 34px; line-height: 40px; }
  .band__title .sans { font-size: 38px; line-height: 40px; }
  .band__photo { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 5; }
  .band__lead { font-size: 18px; line-height: 28px; }
}