/* ============================================
   Design in Seoul — Summer 2026
   Shared styles
   ============================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit";
  src: url("../assets/fonts/Favorit/Favorit-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Favorit Hangul";
  src: url("../assets/fonts/Favorit Hangul/FavoritHangul-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit Hangul";
  src: url("../assets/fonts/Favorit Hangul/FavoritHangul-Book.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit Hangul";
  src: url("../assets/fonts/Favorit Hangul/FavoritHangul-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit Hangul";
  src: url("../assets/fonts/Favorit Hangul/FavoritHangul-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Favorit Hangul";
  src: url("../assets/fonts/Favorit Hangul/FavoritHangul-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --color-green: #59a620;
  --color-orange: #fa9c69;
  --color-blue: #5d7ee4;
  --color-black: #231f20;
  --color-white: #ffffff;

  /* Program arc / field-guide cards (reference screenshot) */
  --color-arc-border: #f9ab7e;
  --color-arc-title: #f9ab7e;
  --color-arc-body: #5d7ab9;
  --color-tag-green: #66a841;
  --color-tag-blue: #5681e3;
  --color-tag-orange-pill: #fa9c69;

  /* Filled scallop "guide cards" (Schedule program arc).
     Override `--guide-card-color` globally or per-card to recolor the
     filled silhouette; assets/svg/card-border-{bold,mid,fine}.svg are
     used as CSS masks, so the fill comes from this background-color. */
  --guide-card-color: #eaf1ff;
  --guide-card-text: #5681e3;

  /* Practical Info hero strip (light violet) */
  --hero-bg-practical: #a392ff;

  /* General Etiquette panel (fill + type); border art is responsive SVGs. */
  --etiquette-frame-fill: #eaf1ff;
  --etiquette-frame-text: #2a4580;

  /* The design canvas is 1728px wide. Use a generous max-width and
     horizontal padding that scales down gracefully. */
  --page-max-width: 1728px;
  --page-gutter: clamp(24px, 9.2vw, 159px);

  --font-sans: "Favorit", "Favorit Hangul", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  /* Scaled type. Original design uses 39px heads / 28px body at 1728px.
     We downscale on narrower viewports via clamp. */
  --fs-nav: clamp(16px, 2.25vw, 39px);
  --fs-heading: clamp(24px, 2.25vw, 39px);
  --fs-body: clamp(16px, 1.65vw, 28px);
  --fs-footer: clamp(14px, 1.2vw, 18px);
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-blue);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.25;
}

a {
  color: inherit;
  text-decoration: none;
}

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

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

/* ---------- Top nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(16px, 1.8vw, 32px);
  background: var(--color-white);
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--color-blue);
  font-weight: 700;
  font-size: var(--fs-nav);
  line-height: 1;
  white-space: nowrap;
}

.brand__icon {
  /* Size to cap height of the wordmark so icon + text share one vertical center */
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transform: rotate(180deg);
  object-fit: contain;
}

.brand__name {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.site-header__end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-blue);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover {
  opacity: 0.75;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.nav-toggle__bar {
  display: block;
  width: 30px;
  height: 4px;
  background: currentColor;
  border-radius: 1px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 24px);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav a {
  font-weight: 700;
  font-size: var(--fs-nav);
  color: var(--color-blue);
  padding: 8px 6px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.site-nav a:hover {
 color:#59a620
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.15em;
}

@media (max-width: 767px) {
  .site-header {
    flex-wrap: nowrap;
    align-items: center;
    padding: 9px clamp(16px, 1.8vw, 32px);
  }

  .brand {
    gap: 0.3em;
    font-size: 27px;
  }

  .site-header__end {
    position: relative;
    flex: 0 0 auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    max-width: none;
    /* padding: 8px 0; */
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    justify-content: flex-start;
    background: var(--color-white);
    border-top: 1px solid color-mix(in srgb, var(--color-blue) 14%, transparent);
    box-shadow: 0 8px 18px rgba(35, 31, 32, 0.08);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    font-size: 27px;
    line-height: 1.1;
    padding: 8px 20px;
  }
}

/* ---------- Hero banner ---------- */
.hero {
  position: relative;
  background: var(--color-orange);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Aspect ratio from Figma: 1728 × 642 ≈ 2.69:1 */
  aspect-ratio: 1728 / 642;
  min-height: 280px;
}

/* Sub-page hero backdrops (home keeps default peach). Title stays the default
   blue / green — it sits on the white morph shape, not on the colored band. */
.hero--schedule {
  background: var(--color-green);
}

.hero--field-guide {
  background: var(--color-blue);
}

.hero--practical {
  background: var(--hero-bg-practical);
}

.hero__shape {
  position: absolute;
  /* Inset the shape so a band of the orange backdrop is always visible
     around it. Uses `clamp` so the padding scales with viewport size
     without disappearing on narrow screens or ballooning on wide ones. */
  inset: clamp(10px, 2.2%, 28px);
  margin-top: 1.5%;
  width: auto;
  height: auto;
  pointer-events: none;
  z-index: 0;
  display: block;
}

.hero-morph-path {
  fill: var(--color-white);
  shape-rendering: geometricPrecision;
}

@media (prefers-reduced-motion: reduce) {
  .hero-morph-path {
    transition: none;
  }
}

.hero__title {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  color: var(--hero-primary-line, var(--color-blue));
  font-weight: 700;
  font-size: clamp(28px, 3.1vw, 54px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding: 0 16px;
}

.hero__title > span {
  display: block;
  margin: 0.08em 0;
}

.hero__title .hangul {
  font-family: "Favorit Hangul", var(--font-sans);
  font-weight: 700;
  color: var(--hero-korean-line, var(--color-green));
}

/* Mobile: square “poster” hero — same animation as IG Seoul Trip reference */
@media (max-width: 767px) {
  .hero {
    /* Lock to a true square at every viewport below the break. Capping via
       `max-width` (not `max-height`) lets `aspect-ratio: 1 / 1` stay
       authoritative; a `max-height` would override it near the 767px edge
       and squash the hero into a wide rectangle. */
    aspect-ratio: 1 / 1;
    width: 100%;
    /* max-width: 520px; */
    min-height: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__shape {
    top: clamp(20px, 6vw, 44px);
    left: clamp(20px, 6vw, 44px);
    right: clamp(20px, 6vw, 44px);
    bottom: clamp(20px, 6vw, 44px);
    width: calc(100% - 2 * clamp(20px, 6vw, 44px));
    height: calc(100% - 2 * clamp(20px, 6vw, 44px));
    margin-top: 0;
  }

  .hero-morph-path {
    fill: var(--color-white);
  }

  .hero__title {
    letter-spacing: -0.045em;
    line-height: 0.88;
    font-size: clamp(22px, 6.2vw, 40px);
    max-width: min(460px, 92vw);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__title > span {
    margin: 0.06em 0;
  }

  .hero__title .hangul {
    margin: 0.28em 0;
  }
}

/* ---------- Generic page section ---------- */
.section {
  padding: clamp(32px, 3vw, 56px) var(--page-gutter);
}

.section--loose {
  padding-top: clamp(28px, 3.5vw, 64px);
  padding-bottom: clamp(28px, 3.5vw, 64px);
}

.section__heading {
  display: inline-block;
  margin: 0 0 clamp(20px, 2vw, 32px);
  padding: 10px 10px 10px 0;
  color: var(--color-green);
  font-weight: 700;
  font-size: var(--fs-heading);
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.15em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.section__heading--orange {
  color: var(--color-orange);
}

.section__heading--blue {
  color: var(--color-blue);
}

/* ---------- Two-column body text ---------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(24px, 3vw, 51px);
  color: var(--color-blue);
  font-size: var(--fs-body);
  line-height: 1.3;
}

.two-col p {
  margin: 0 0 1em 0;
}

.two-col p:last-child {
  margin-bottom: 0;
}

.practical-info-columns {
  align-items: start;
}

/* Scalloped pill button — masked silhouette filled with a CSS color so the
   shape (assets/svg/button-shape.svg) stays crisp at any size and the fill
   color can change on hover. */
.scallop-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Aspect ratio mirrors the source SVG (491.465 × 98.293 ≈ 5:1) so the
     scalloped silhouette never stretches or squashes. Use `min-height` on
     short layouts so a tiny viewport still has a tappable height. */
  aspect-ratio: 491.465 / 98.293;
  min-height: clamp(64px, 9vw, 120px);
  margin: 0;
  padding: 0 clamp(24px, 3vw, 48px);
  text-align: center;
  text-decoration: none;
  color: var(--color-white);
  background-color: var(--color-blue);
  -webkit-mask-image: url(../assets/svg/button-shape.svg);
  mask-image: url(../assets/svg/button-shape.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.scallop-button:hover,
.scallop-button:focus-visible {
  background-color: var(--color-green);
}

.scallop-button:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 4px;
}

.scallop-button__label {
  color: var(--color-white);
  font-weight: 700;
  /* Scales with viewport so the label keeps presence as the button widens. */
  font-size: clamp(18px, 2.2vw, 38px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* ---------- Decorative divider (pixel-pattern border strip) ---------- */
.divider {
  padding: clamp(16px, 2vw, 32px) var(--page-gutter);
}

/* When a divider sits inside a .content-page (which already supplies the
   page-gutter), drop the horizontal padding so it doesn't double up. */
.content-page > .divider {
  padding-left: 0;
  padding-right: 0;
  margin: clamp(20px, 2.5vw, 40px) 0;
}

.divider picture,
.divider img {
  display: block;
  width: 100%;
}

.divider img {
  height: auto;
  /* Lock aspect ratio to the source so the decorative pattern never
     distorts — the divider scales proportionally with viewport width.
     Desktop SVG: 676.876 × 17.181. */
  aspect-ratio: 676.876 / 17.181;
}

@media (max-width: 767px) {
  .divider img {
    /* Mobile SVG: 453.575 × 22.338 — slightly chunkier so the
       pattern stays legible at narrow viewports. */
    aspect-ratio: 453.575 / 22.338;
  }
}

/* Color modifier — paints the divider strip via a CSS mask of the same SVG
   so we can override the source orange with any --color- token. The inner
   <picture>/<img> is hidden; the strip is rendered as a sized div. */
.divider--blue {
  display: block;
  width: 100%;
  background-color: var(--color-blue);
  -webkit-mask-image: url(../assets/svg/border.svg);
  mask-image: url(../assets/svg/border.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  aspect-ratio: 676.876 / 17.181;
  /* aspect-ratio drives height; nuke the wrapping padding from .divider so
     the strip sits flush and we control rhythm via margin instead. */
  padding: 0;
  margin: clamp(20px, 2.5vw, 40px) 0;
}

.divider--blue picture,
.divider--blue img {
  display: none;
}

@media (max-width: 767px) {
  .divider--blue {
    -webkit-mask-image: url(../assets/svg/border-mobile.svg);
    mask-image: url(../assets/svg/border-mobile.svg);
    aspect-ratio: 453.575 / 22.338;
  }
}

/* ---------- Objectives layout ---------- */
.objectives {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 3vw, 41px);
  align-items: start;
}

.objectives__shape {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 800px;
  aspect-ratio: 810 / 667;
  justify-self: start;
  -webkit-mask-image: url(../assets/svg/objectives-shape.svg);
  mask-image: url(../assets/svg/objectives-shape.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Fallback while JS / image swap is loading. */
  background-color: var(--color-green);
}

.objectives__shape-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.objectives__shape-image[data-active] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .objectives__shape-image {
    transition: none;
  }
}

.objectives__list {
  color: var(--color-green);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.3;
  padding-left: 1.4em;
}

.objectives__list li {
  list-style: disc;
  margin-bottom: .8em;
}

.objectives__list li:last-child {
  margin-bottom: 0;
}

/* ---------- Footer band ---------- */
.site-footer {
  background: var(--color-green);
  margin-top: clamp(32px, 5vw, 80px);
  padding: clamp(32px, 4vw, 48px) var(--page-gutter);
  color: var(--color-white);
  font-size: var(--fs-footer);
  line-height: 1.45;
}

.site-footer__info {
  display: flex;
  flex-direction: column;
  /* gap: clamp(2px, 0.4vw, 6px); */
  margin: 0;
  font-style: normal;
}

.site-footer__info p {
  margin: 0;
  font-weight: 400;
}

.site-footer__info p:first-child {
  font-weight: 700;
}

/* ---------- Generic content page ---------- */
.content-page {
  padding: clamp(32px, 3vw, 56px) var(--page-gutter) clamp(48px, 5vw, 96px);
  color: var(--color-blue);
  font-size: var(--fs-body);
  line-height: 1.35;
}

.content-page h2 {
  margin: clamp(28px, 3vw, 48px) 0 clamp(12px, 1vw, 20px);
  color: var(--hero-bg-practical);
  font-weight: 700;
  font-size: clamp(22px, 1.9vw, 32px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.content-page h3 {
  margin: clamp(20px, 2vw, 32px) 0 8px;
  color: var(--color-orange);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 26px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.content-page h4 {
  margin: clamp(14px, 1.2vw, 20px) 0 6px;
  color: var(--color-blue);
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 20px);
  letter-spacing: 0.02em;
}

.content-page p {
  margin: 0 0 1em 0;
}

.week-list {
  list-style: none;
  margin: 0 0 clamp(20px, 2vw, 32px);
  padding: 0;
  color: var(--color-blue);
  display: grid;
  gap: clamp(8px, 0.8vw, 14px);
  max-width: 68ch;
}

.week-list li {
  position: relative;
  padding-left: 1.2em;
  margin-left: .8em;
  font-size: 26px;
}

.week-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-orange);
  font-weight: 700;
}

/* Subtle wiggle used by Field Guide architectural site links. */
@keyframes logo-shake {
  0%,
  100% {
    -webkit-transform: rotate(2.5deg);
    transform: rotate(2.5deg);
  }

  25% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(-2.5deg);
    transform: rotate(-2.5deg);
  }

  75% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@media (max-width: 767px) {
  .week-list li {
    margin-left: 0em;
    font-size: 19px;
  }
}

.week-list--architectural-links a {
  display: inline-block;
  color: var(--color-green);
  text-decoration: none;
  transform-origin: center center;
  transition: color 0.2s ease;
}

.week-list--architectural-links a:visited {
  color: var(--color-green);
}

.week-list--korean-foods .food-hangul {
  display: block;
  margin-top: -0.12em;
  margin-bottom: 0.6em;
  font-size: 0.84em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-blue);
}

.week-list--architectural-sites .site-name,
.week-list--architectural-sites .site-architect {
  display: block;
}

.week-list--architectural-sites .site-architect {
  margin-top: -0.12em;
  margin-bottom: 0.6em;
  font-size: 0.84em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-blue);
}

.week-list--architectural-links li {
  padding-left: 0;
  margin-left: 0;
  text-align: center;
}

.week-list--architectural-links li::before {
  content: none;
}

.week-list--architectural-links a:hover,
.week-list--architectural-links a:focus-visible {
  color: var(--color-orange);
  /* animation: logo-shake 0.5s ease-in-out infinite; */
}

@media (prefers-reduced-motion: reduce) {
  .week-list--architectural-links a:hover,
  .week-list--architectural-links a:focus-visible {
    animation: none;
  }
}

/* Long Instagram-style handles in field guide */
.field-guide__handles li {
  word-break: break-word;
}

/* General Etiquette — 9-slice border-image so the scallop frame adjusts to
   any content height. Each viewport size swaps in a wider source SVG so the
   horizontal scallop count better matches the layout. Slice values are SVG
   user units (corner cap geometry: 102 tall × 117 wide in all three files). */
.content-page h3.etiquette-heading {
  margin-bottom: 0.35em;
  color: var(--color-orange);
}

.etiquette-frame {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: clamp(16px, 2.5vw, 32px) 0 clamp(24px, 2.5vw, 40px);
  /* Border thickness controls how big the rendered scallops are, and also
     reserves layout space so siblings don't get overlapped. Inner content
     is then pulled into the border zone via negative margins below. */
  border-style: solid;
  border-color: transparent;
  border-width: clamp(64px, 9vw, 132px) clamp(72px, 10vw, 150px);
  border-image-source: url(../assets/svg/etiquette-frame-mobile.svg);
  border-image-slice: 102 117 102 117 fill;
  border-image-width: 1;
  border-image-repeat: stretch;
  border-image-outset: 0;
}

@media (min-width: 768px) {
  .etiquette-frame {
    border-image-source: url(../assets/svg/etiquette-frame-tablet.svg);
  }
}

@media (min-width: 1200px) {
  .etiquette-frame {
    border-image-source: url(../assets/svg/etiquette-frame-desktop.svg);
  }
}

.etiquette-frame__inner {
  position: relative;
  z-index: 1;
  /* Negative margin pulls content into the scalloped border zone so text
     hugs the inner scallop tips; only the outer ~20–40px of border is
     visually reserved for the curve depth itself. */
  margin: clamp(-100px, -7vw, -44px) clamp(-110px, -7.5vw, -50px);
  padding: clamp(8px, 1vw, 16px) clamp(12px, 1.4vw, 20px);
  color: var(--etiquette-frame-text);
}

.etiquette-frame__inner strong {
  color: inherit;
}

.week-list--etiquette {
  display: block;
  max-width: none;
  margin: 0;
  color: var(--color-blue);
  column-count: 2;
  column-gap: clamp(16px, 2.5vw, 36px);
  column-fill: balance;
}

.week-list--etiquette li {
  margin-bottom: clamp(8px, 0.8vw, 12px);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.week-list--etiquette li::before {
  color: var(--color-orange);
}

.week-list--etiquette li:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .week-list--etiquette {
    column-count: 1;
    column-gap: 0;
  }
}

/* Schedule grid */
.schedule {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: clamp(16px, 1.6vw, 28px) clamp(24px, 3vw, 56px);
  margin: clamp(20px, 2vw, 32px) 0;
}

.schedule .day {
  color: var(--color-orange);
  font-weight: 700;
  white-space: nowrap;
}

.schedule .activity {
  color: var(--color-blue);
}

/* Info grid (two-column facts list) */
.info-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: clamp(14px, 1.4vw, 24px) clamp(20px, 2.6vw, 48px);
  margin: clamp(16px, 2vw, 28px) 0;
}

.info-grid dt {
  color: var(--color-green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.info-grid dd {
  margin: 0;
  color: var(--color-blue);
}

/* Cards for field guide entries + Schedule Program Arc */
.guide-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(20px, 2vw, 32px) 0;
}

/* Four-up row on wide screens when content is exactly four arc cards */
.guide-list--arc {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .guide-list--arc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .guide-list--arc {
    grid-template-columns: 1fr;
  }
}

/* Five week cards (Schedule): two columns until very wide — wider cards
   keep long week copy inside the masked square without overlapping rows. */
.guide-list--arc-weeks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1600px) {
  .guide-list--arc-weeks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .guide-list--arc-weeks {
    grid-template-columns: 1fr;
  }
}

.program-arc-summary {
  margin: -4px 0 clamp(20px, 2vw, 32px);
  max-width: 56ch;
  color: var(--color-blue);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.guide-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  container-type: inline-size;
  gap: clamp(8px, 1vw, 14px);
  /* Square cards so the scalloped SVG masks never distort. The mask
     paints into a ::before pseudo-element, sized to fill this box.
     `min-height: 0` on the card (grid item) stops min-content height from
     blowing past `aspect-ratio` so rows no longer overlap. */
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  /* Padding sits inside the scalloped silhouette so both the tag (now
     in-flow) and the list copy stay inside the frame. */
  padding: clamp(24px, 2.6vw, 40px) clamp(24px, 2.6vw, 38px)
    clamp(20px, 2.2vw, 32px);
  background: transparent;
  border: none;
  border-radius: 0;
}

/* Filled, masked silhouette is painted underneath the card content.
   `--guide-card-color` (or per-card override) drives the fill; the SVG
   acts only as a scalloped mask, so the variable threads straight
   through with no JS needed. */
.guide-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--guide-card-color);
  -webkit-mask-image: url(../assets/svg/card-border-bold.svg);
  mask-image: url(../assets/svg/card-border-bold.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
}

/* Border style modifiers — pick the scallop density per card. Each can
   also override `--guide-card-color` for variant fill colors. */
.guide-card--border-mid::before {
  -webkit-mask-image: url(../assets/svg/card-border-mid.svg);
  mask-image: url(../assets/svg/card-border-mid.svg);
}

.guide-card--border-fine::before {
  -webkit-mask-image: url(../assets/svg/card-border-fine.svg);
  mask-image: url(../assets/svg/card-border-fine.svg);
}

/* Google Doc CTA card: solid color silhouette with a centered link.
   Color comes from --guide-card-color so the existing mask paints the
   whole shape — same plumbing as the other cards, just remapped to the
   darker tag-blue and the white CTA text. */
.guide-card--google-doc {
  --guide-card-color: var(--color-tag-blue);
  --guide-card-text: var(--color-white);
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.guide-card--google-doc:hover,
.guide-card--google-doc:focus-visible {
  --guide-card-color: var(--color-green);
}

.guide-card--google-doc:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 4px;
}

.guide-card__cta {
  position: relative;
  z-index: 1;
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 clamp(16px, 2vw, 32px);
  max-width: 16ch;
}

/* All real children sit above the masked silhouette. */
.guide-card > * {
  position: relative;
  z-index: 1;
}

/* Tag pill sits inline at the top of the card so it stays inside the
   scalloped silhouette regardless of border variant. */
.guide-card .tag {
  position: relative;
  z-index: 2;
  margin: 0;
  flex: 0 0 auto;
  /* Long category labels (e.g. "Art & Design Book Stores") wrap inside
     the pill instead of overflowing the card width. */
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.guide-card h3 {
  margin: 0 0 12px;
  color: var(--guide-card-text);
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guide-card p {
  margin: 0;
  color: var(--guide-card-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.45;
}

.guide-card .week-list {
  flex: 1 1 auto;
  margin: 0;
  max-width: none;
  width: 100%;
  color: var(--guide-card-text);
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 16px);
  line-height: 1.32;
  gap: clamp(4px, 0.55vw, 9px);
  min-height: 0;
  /* Scrollable list with a fade indicator at the bottom edge to hint
     that more content is below — fade lifts when scrolled to bottom. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: clamp(4px, 0.6vw, 10px);
  padding-bottom: clamp(8px, 1vw, 16px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 28px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - 28px),
    transparent 100%
  );
  scrollbar-width: thin;
  scrollbar-color: var(--guide-card-text) transparent;
}

.guide-card .week-list::-webkit-scrollbar {
  width: 6px;
}

.guide-card .week-list::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--guide-card-text) 55%, transparent);
  border-radius: 999px;
}

.guide-card .week-list::-webkit-scrollbar-track {
  background: transparent;
}

.guide-card .week-list li::before {
  color: var(--guide-card-text);
}

/* Tag pill */
.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-tag-green);
  color: var(--color-white);
  font-size: clamp(11px, 0.95vw, 14px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tag--orange {
  background: var(--color-tag-orange-pill);
}

.tag--blue {
  background: var(--color-tag-blue);
}