/* ===================================================================
   THE KOREAN IN ME: Letters layer (redesign review, 2026-10-07)
   Loaded after style.css on every generated page. Ink borders, square
   controls, letter frames, one dominant photograph per hero.
   Fonts stay Fraunces (display) and Inter (body).
   =================================================================== */


/* ====== 1. TOKENS ====== */
:root {
  --l-paper:        #FBF9F5;
  --l-paper-deep:   #F3EFE7;
  --l-card:         #FFFFFF;
  --l-ink:          #1C1A17;
  --l-ink-soft:     #45413B;
  --l-ink-muted:    #67625A;
  --l-rule:         #1C1A17;
  --l-rule-soft:    #CFC8BC;
  --l-coral:        #B83E55;   /* 5.4:1 on paper, used for text and fills */
  --l-coral-hover:  #9E3247;
  --l-coral-bright: #D7506A;   /* display accents only, never small text */
  --l-navy:         #1E3A5F;
  --l-navy-deep:    #152B47;
  --l-on-dark:      #FBF9F5;
  --l-on-dark-soft: #D6DCE6;
  --l-focus:        #1E3A5F;
  --l-scrim:        rgba(20, 18, 15, 0.86);

  --l-border:       2px;
  --l-border-thick: 3px;

  --l-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --l-font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --l-fs-eyebrow:   12px;
  --l-fs-small:     14px;
  --l-fs-body:      clamp(16px, 1.1vw, 18px);
  --l-fs-lede:      clamp(18px, 1.5vw, 21px);
  --l-fs-h3:        clamp(22px, 1.8vw, 28px);
  --l-fs-h2:        clamp(30px, 3.4vw, 48px);
  --l-fs-h1:        clamp(38px, 5vw, 72px);
  --l-fs-hero:      clamp(36px, 4.4vw, 64px);

  --l-sp-1: 8px;
  --l-sp-2: 16px;
  --l-sp-3: 24px;
  --l-sp-4: 32px;
  --l-sp-5: 48px;
  --l-sp-6: 72px;
  --l-sp-7: 112px;

  --l-max:        1240px;
  --l-max-read:   720px;
  --l-gutter:     clamp(20px, 4.4vw, 64px);
  --l-header-h:   clamp(84px, 9vw, 132px);
  --l-target:     44px;

  --l-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --l-dur:        360ms;
}


/* ====== 2. BASE OVERRIDES ====== */
body {
  background: var(--l-paper);
  color: var(--l-ink);
  font-family: var(--l-font-body);
  line-height: 1.65;
}

:focus-visible {
  outline: 3px solid var(--l-focus);
  outline-offset: 3px;
}

.l-skip {
  position: absolute;
  left: var(--l-sp-2);
  top: -100px;
  z-index: 200;
  padding: 12px 16px;
  background: var(--l-ink);
  color: var(--l-on-dark);
  font-weight: 600;
}

.l-skip:focus {
  top: var(--l-sp-2);
}

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

.l-wrap {
  width: 100%;
  max-width: var(--l-max);
  margin: 0 auto;
  padding-left: var(--l-gutter);
  padding-right: var(--l-gutter);
}

.l-wrap--read {
  max-width: calc(var(--l-max-read) + (2 * var(--l-gutter)));
}

/* Letter pages that end on a ruled list: room before the closing invite rule */
.l-wrap--letter {
  padding-bottom: var(--l-sp-6);
}


/* ====== 3. TYPOGRAPHY ====== */
.l-eyebrow {
  display: block;
  margin: 0 0 var(--l-sp-2);
  font-family: var(--l-font-body);
  font-size: var(--l-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-h1,
.l-h2,
.l-h3 {
  font-family: var(--l-font-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144;
  letter-spacing: -0.015em;
  color: var(--l-ink);
  text-wrap: balance;
}

.l-h1 {
  margin: 0 0 var(--l-sp-3);
  font-size: var(--l-fs-h1);
  line-height: 1.04;
}

.l-h2 {
  margin: 0 0 var(--l-sp-3);
  font-size: var(--l-fs-h2);
  line-height: 1.1;
}

.l-h3 {
  margin: 0 0 var(--l-sp-1);
  font-size: var(--l-fs-h3);
  line-height: 1.2;
}

.l-h1 em,
.l-h2 em {
  font-style: italic;
  color: var(--l-coral);
}

.l-lede {
  max-width: 62ch;
  margin: 0 0 var(--l-sp-3);
  font-size: var(--l-fs-lede);
  line-height: 1.6;
  color: var(--l-ink-soft);
  text-wrap: pretty;
}

.l-prose p,
.l-text {
  max-width: 66ch;
  font-size: var(--l-fs-body);
  line-height: 1.7;
  color: var(--l-ink-soft);
}

.l-small {
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-link {
  color: var(--l-navy);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  font-weight: 500;
}

.l-link:hover {
  color: var(--l-coral);
}

/* Instagram invitation under the home gallery */
.l-follow {
  margin-top: var(--l-sp-4);
}


/* ====== 4. BUTTONS (square) ====== */
.l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--l-sp-1);
  min-height: var(--l-target);
  min-width: 200px;
  padding: 12px 22px;
  border: var(--l-border) solid var(--l-coral);
  border-radius: 0;
  background: var(--l-coral);
  color: var(--l-on-dark);
  font-family: var(--l-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--l-dur) var(--l-ease), border-color var(--l-dur) var(--l-ease);
}

.l-btn:hover {
  background: var(--l-coral-hover);
  border-color: var(--l-coral-hover);
  color: var(--l-on-dark);
}

.l-btn--ghost {
  background: transparent;
  border-color: var(--l-ink);
  color: var(--l-ink);
}

.l-btn--ghost:hover {
  background: var(--l-ink);
  border-color: var(--l-ink);
  color: var(--l-on-dark);
}

.l-btn--on-dark {
  background: var(--l-on-dark);
  border-color: var(--l-on-dark);
  color: var(--l-navy-deep);
}

.l-btn--on-dark:hover {
  background: transparent;
  color: var(--l-on-dark);
}

.l-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-sp-2);
  align-items: center;
}

/* Legacy buttons inherit the square treatment */
.btn-primary,
.btn-secondary,
.btn-primary--large,
.btn-ghost,
.btn {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.btn-primary,
.btn-primary--large {
  background: var(--l-coral) !important;
  border: var(--l-border) solid var(--l-coral) !important;
  color: var(--l-on-dark) !important;
}

.btn-primary:hover,
.btn-primary--large:hover {
  background: var(--l-coral-hover) !important;
}

.btn-secondary {
  border: var(--l-border) solid var(--l-ink) !important;
  color: var(--l-ink) !important;
  background: transparent !important;
}


/* ====== 5. HEADER ====== */
.l-header {
  position: relative;
  z-index: 50;
  background: var(--l-paper);
  border-bottom: var(--l-border-thick) solid var(--l-rule);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-sp-3);
  min-height: var(--l-header-h);
}

.l-header__brand {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
}

.l-header__logo {
  display: block;
  width: auto;
  height: clamp(56px, 6.2vw, 88px);
}

.l-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--l-target);
  color: var(--l-ink);
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: var(--l-border) solid transparent;
}

.l-nav__link:hover,
.l-nav__link[aria-current="page"] {
  border-bottom-color: var(--l-coral);
}

.l-header__cta {
  min-width: 0;
}

.l-menu-toggle {
  display: none;
  align-items: center;
  gap: var(--l-sp-1);
  min-height: var(--l-target);
  padding: 8px 14px;
  border: var(--l-border) solid var(--l-ink);
  border-radius: 0;
  background: transparent;
  color: var(--l-ink);
  font: 500 15px/1 var(--l-font-body);
  cursor: pointer;
}

.l-menu-toggle__bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.l-menu-toggle__bars::before,
.l-menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}

.l-menu-toggle__bars::before { top: -6px; }
.l-menu-toggle__bars::after  { top: 6px; }

.l-menu {
  border-top: var(--l-border) solid var(--l-rule);
  background: var(--l-paper);
}

.l-menu[hidden] {
  display: none;
}

.l-menu__list {
  margin: 0;
  padding: var(--l-sp-2) 0;
  list-style: none;
}

.l-menu__list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--l-rule-soft);
  color: var(--l-ink);
  font-family: var(--l-font-display);
  font-size: 24px;
  text-decoration: none;
}

.l-menu__sub a {
  font-family: var(--l-font-body);
  font-size: 16px;
  padding-left: var(--l-sp-2);
  min-height: var(--l-target);
}

.l-menu__contact {
  display: grid;
  gap: var(--l-sp-1);
  padding: var(--l-sp-2) 0 var(--l-sp-4);
  font-size: var(--l-fs-small);
  color: var(--l-ink-soft);
}

.l-menu__contact a {
  color: var(--l-navy);
}

@media (max-width: 960px) {
  .l-nav,
  .l-header__cta {
    display: none;
  }
  .l-menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 380px) {
  .l-header__logo {
    height: 52px;
  }
}

/* Retire legacy floating chrome that the new header replaces */
.announcement,
.scroll-progress,
.site-nav,
.mobile-menu,
.mobile-bar,
.quick-contact,
.back-to-top {
  display: none !important;
}

body {
  padding-bottom: 0 !important;
}


/* ====== 6. BREADCRUMB ====== */
.breadcrumb {
  max-width: var(--l-max);
  margin: 0 auto;
  padding: var(--l-sp-3) var(--l-gutter) 0;
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
  background: transparent;
  border: 0;
}

.breadcrumb a {
  color: var(--l-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb a:hover {
  color: var(--l-coral);
  text-decoration: underline;
}

.breadcrumb__sep {
  margin: 0 6px;
}


/* ====== 7. SECTIONS AND RULES ====== */
.l-section {
  padding: var(--l-sp-6) 0;
}

.l-section--tight {
  padding: var(--l-sp-5) 0;
}

.l-section__head {
  border-top: var(--l-border) solid var(--l-rule);
  padding-top: var(--l-sp-2);
  margin-bottom: var(--l-sp-4);
}

.l-section__label {
  display: block;
  margin-bottom: var(--l-sp-3);
  font-size: var(--l-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--l-border) solid var(--l-rule);
}

.l-page-head {
  padding: var(--l-sp-4) 0 var(--l-sp-5);
}

.l-page-head .l-lede {
  margin-bottom: var(--l-sp-2);
}

.l-subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-subjects li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--l-ink-muted);
}

.l-subjects a {
  color: var(--l-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ====== 8. GRID HELPERS ====== */
.l-grid {
  display: grid;
  gap: var(--l-sp-4);
}

.l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l-grid--lead { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.l-grid--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: var(--l-sp-6); }

@media (max-width: 1080px) {
  .l-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .l-grid--2,
  .l-grid--3,
  .l-grid--lead,
  .l-grid--split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--l-sp-4);
  }
}

@media (max-width: 520px) {
  .l-grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* ====== 9. FRAMES (letter, post, corner) ====== */
.l-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--l-card);
  border: var(--l-border) solid var(--l-rule);
  color: var(--l-ink);
}

.l-frame__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--l-sp-2);
  padding: 12px 18px;
  border-bottom: var(--l-border) solid var(--l-rule);
  font-size: var(--l-fs-small);
}

.l-frame__num {
  color: var(--l-coral);
  font-variant-numeric: tabular-nums;
}

.l-frame__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(14px, 2vw, 24px);
}

.l-frame__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--l-paper-deep);
}

.l-frame__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l-frame__media--portrait { aspect-ratio: 4 / 5; }
.l-frame__media--square   { aspect-ratio: 1 / 1; }
.l-frame__media--wide     { aspect-ratio: 4 / 3; }
.l-frame__media--tall     { aspect-ratio: 3 / 4; }

.l-frame__caption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--l-sp-2);
  margin-top: var(--l-sp-3);
}

.l-frame__caption-text {
  flex: 1 1 auto;
  padding-bottom: 8px;
  border-bottom: var(--l-border) solid var(--l-rule);
  font-family: var(--l-font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
}

.l-frame__caption-text a {
  color: inherit;
  text-decoration: none;
}

.l-frame__caption-text a:hover {
  color: var(--l-coral);
}

.l-frame__note {
  margin-top: var(--l-sp-1);
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-stamp {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

/* Post: simpler, caption without underline */
.l-frame--post .l-frame__caption-text {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Corner: thin navy and coral corner accents inside the border */
.l-frame--corner .l-frame__body {
  position: relative;
}

.l-frame--corner .l-frame__body::before,
.l-frame--corner .l-frame__body::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
}

.l-frame--corner .l-frame__body::before {
  top: 10px;
  left: 10px;
  border-top: var(--l-border) solid var(--l-navy);
  border-left: var(--l-border) solid var(--l-navy);
}

.l-frame--corner .l-frame__body::after {
  right: 10px;
  bottom: 10px;
  border-right: var(--l-border) solid var(--l-navy);
  border-bottom: var(--l-border) solid var(--l-coral);
}

/* Text-led letter: used where no cleared original photograph exists */
.l-letter {
  display: flex;
  flex-direction: column;
  gap: var(--l-sp-2);
  padding: clamp(20px, 3vw, 40px);
  background: var(--l-paper-deep);
  border-top: var(--l-border) solid var(--l-rule);
  min-height: 100%;
}

.l-letter__salutation {
  margin: 0;
  color: var(--l-ink);
  font-family: var(--l-font-display);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.15;
  font-weight: 350;
}

.l-letter p {
  margin: 0;
  max-width: 52ch;
  color: var(--l-ink-soft);
}


/* ====== 10. ZOOMABLE IMAGES AND LIGHTBOX ====== */
.l-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.l-zoom__hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  background: var(--l-card);
  border: var(--l-border) solid var(--l-rule);
  font-size: 13px;
  color: var(--l-ink);
  opacity: 0;
  transition: opacity var(--l-dur) var(--l-ease);
}

.l-zoom:hover .l-zoom__hint,
.l-zoom:focus-visible .l-zoom__hint {
  opacity: 1;
}

.l-lightbox {
  width: min(1100px, 94vw);
  max-height: 94vh;
  padding: 0;
  border: var(--l-border) solid var(--l-rule);
  border-radius: 0;
  background: var(--l-card);
  color: var(--l-ink);
}

.l-lightbox::backdrop {
  background: var(--l-scrim);
}

.l-lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--l-sp-2);
  padding: 10px 14px;
  border-bottom: var(--l-border) solid var(--l-rule);
}

.l-lightbox__count {
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-lightbox__controls {
  display: flex;
  gap: var(--l-sp-1);
}

.l-lightbox__btn {
  min-width: var(--l-target);
  min-height: var(--l-target);
  padding: 6px 12px;
  border: var(--l-border) solid var(--l-ink);
  border-radius: 0;
  background: var(--l-card);
  color: var(--l-ink);
  font: 500 15px/1 var(--l-font-body);
  cursor: pointer;
}

.l-lightbox__btn:hover {
  background: var(--l-ink);
  color: var(--l-on-dark);
}

.l-lightbox__btn[hidden] {
  display: none;
}

.l-lightbox__figure {
  margin: 0;
  padding: var(--l-sp-2);
}

.l-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 160px);
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 180ms linear;
}

.l-lightbox__img.is-swapping {
  opacity: 0;
}

.l-lightbox__caption {
  margin-top: var(--l-sp-2);
  font-family: var(--l-font-display);
  font-size: 20px;
  text-align: center;
}


/* ====== 11. NUMBERED ROWS ====== */
.l-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--l-border) solid var(--l-rule);
}

.l-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--l-sp-3);
  align-items: baseline;
  padding: var(--l-sp-3) 0;
  border-bottom: 1px solid var(--l-rule-soft);
}

.l-row__num {
  color: var(--l-coral);
  font-size: var(--l-fs-small);
  font-variant-numeric: tabular-nums;
}

.l-row__title {
  margin: 0;
  font-family: var(--l-font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 350;
  line-height: 1.25;
}

.l-row__title a {
  color: inherit;
  text-decoration: none;
}

.l-row__title a:hover {
  color: var(--l-coral);
  text-decoration: underline;
}

.l-row__text {
  margin: 0;
  color: var(--l-ink-soft);
}

.l-row__text a {
  color: var(--l-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.l-rows--links .l-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

.l-row__go {
  color: var(--l-navy);
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .l-row,
  .l-rows--links .l-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--l-sp-1) var(--l-sp-2);
  }
  .l-rows--links .l-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .l-row__text,
  .l-row__go {
    grid-column: 2;
  }
  .l-rows--links .l-row__text,
  .l-rows--links .l-row__go {
    grid-column: 1;
  }
}


/* ====== 12. HOME HERO ====== */
/* The source photograph is portrait (about 5:8) and the garment fills its
   lower two thirds. Above 1000px the photograph takes a tall 4:5 column on
   the right, so the face, jeogori and chima all stay in frame, and the copy
   sits on paper beside it instead of over the subject. Below 1000px the
   copy moves under the photograph. */
.l-hero {
  position: relative;
  border-bottom: var(--l-border-thick) solid var(--l-rule);
}

.l-hero__media {
  position: relative;
  height: clamp(640px, 84vh, 1000px);
  overflow: hidden;
  background: var(--l-paper-deep);
}

.l-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.l-hero__panel {
  position: absolute;
  left: var(--l-gutter);
  bottom: clamp(28px, 4vw, 56px);
  width: min(540px, calc(100% - (2 * var(--l-gutter))));
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--l-paper);
  border: var(--l-border-thick) solid var(--l-rule);
}

.l-hero__title {
  margin: 0 0 var(--l-sp-3);
  font-family: var(--l-font-display);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 350;
  font-variation-settings: "opsz" 144;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--l-ink);
}

.l-hero .l-btn {
  min-width: 0;
}

.l-hero__credit {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 13px;
  color: var(--l-ink-muted);
}

@media (min-width: 1001px) {
  .l-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .l-hero__media {
    grid-column: 2;
    grid-row: 1;
    height: clamp(620px, 84vh, 980px);
    aspect-ratio: 4 / 5;
    border-left: var(--l-border-thick) solid var(--l-rule);
  }
  .l-hero__media img {
    object-position: 50% 30%;
  }
  .l-hero__panel {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: min(620px, calc(100% - (2 * var(--l-gutter))));
    /* Left edge lines up with the header logo and the page content */
    margin: var(--l-sp-5) var(--l-gutter) var(--l-sp-5) calc(max(0px, (100vw - var(--l-max)) / 2) + var(--l-gutter));
  }
}

@media (max-width: 1000px) {
  .l-hero__media {
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .l-hero__panel {
    position: static;
    width: auto;
    margin: 0;
    border-width: 0;
    border-top: var(--l-border-thick) solid var(--l-rule);
    padding: var(--l-sp-4) var(--l-gutter);
  }
}

@media (max-width: 640px) {
  .l-hero__media {
    aspect-ratio: 4 / 5;
  }
  .l-hero .l-btn {
    flex: 1 1 100%;
  }
}


/* ====== 13. PATHS (equal Celebrations and Hanbok) ====== */
.l-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: var(--l-border) solid var(--l-rule);
}

.l-path {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--l-sp-3) var(--l-gutter);
  color: var(--l-ink);
  text-decoration: none;
}

.l-path + .l-path {
  border-left: var(--l-border) solid var(--l-rule);
}

.l-path__label {
  font-family: var(--l-font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
}

.l-path__text {
  color: var(--l-ink-soft);
}

.l-path:hover .l-path__label {
  color: var(--l-coral);
  text-decoration: underline;
  text-underline-offset: 6px;
}

@media (max-width: 640px) {
  .l-paths {
    grid-template-columns: minmax(0, 1fr);
  }
  .l-path + .l-path {
    border-left: 0;
    border-top: var(--l-border) solid var(--l-rule);
  }
}


/* ====== 14. OCCASION STRIP ====== */
.l-occasions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--l-sp-3);
  margin-top: var(--l-sp-4);
}

.l-occasion {
  display: block;
  padding-top: var(--l-sp-2);
  border-top: var(--l-border) solid var(--l-rule);
  color: var(--l-ink);
  text-decoration: none;
}

.l-occasion__name {
  display: block;
  font-family: var(--l-font-display);
  font-size: 22px;
}

.l-occasion__what {
  display: block;
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-occasion:hover .l-occasion__name {
  color: var(--l-coral);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .l-occasions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ====== 15. INVITATION BANDS ====== */
.l-invite {
  padding: var(--l-sp-5) 0;
  border-top: var(--l-border) solid var(--l-rule);
}

.l-invite__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-sp-3);
}

.l-invite__title {
  margin: 0;
  font-family: var(--l-font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 350;
  line-height: 1.1;
}

.l-invite__sign {
  font-family: var(--l-font-display);
  font-size: 19px;
  color: var(--l-ink-soft);
}

.l-band {
  padding: var(--l-sp-6) 0;
  background: var(--l-navy);
  color: var(--l-on-dark);
}

.l-band .l-invite__title {
  color: var(--l-on-dark);
}

.l-band p {
  color: var(--l-on-dark-soft);
}


/* ====== 16. TESTIMONIALS ====== */
.l-quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--l-sp-3);
}

.l-quote {
  margin: 0;
  padding: var(--l-sp-3);
  border: var(--l-border) solid var(--l-rule);
  background: var(--l-card);
}

.l-quote blockquote {
  margin: 0 0 var(--l-sp-2);
  font-family: var(--l-font-display);
  font-size: 19px;
  line-height: 1.45;
}

.l-quote figcaption {
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

@media (max-width: 860px) {
  .l-quotes {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ====== 17. COLLECTION ====== */
.l-cat-browse {
  margin: 0 0 var(--l-sp-5);
}

.l-cat-browse .l-section__label {
  display: block;
  margin: 0 0 var(--l-sp-2);
}

.l-cat-browse .l-cat-nav {
  margin-bottom: 0;
}

/* The results section takes focus after a category is chosen; the moved view is the cue */
#cat-all:focus {
  outline: none;
}

.l-cat-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-sp-1);
  margin: 0 0 var(--l-sp-4);
  padding: 0;
  list-style: none;
}

.l-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--l-target);
  padding: 8px 16px;
  border: var(--l-border) solid var(--l-ink);
  border-radius: 0;
  background: var(--l-card);
  color: var(--l-ink);
  font: 500 15px/1.1 var(--l-font-body);
  text-decoration: none;
  cursor: pointer;
}

.l-chip:hover {
  border-color: var(--l-coral);
  color: var(--l-coral);
}

.l-chip[aria-pressed="true"],
.l-chip[aria-current="true"] {
  background: var(--l-coral);
  border-color: var(--l-coral);
  color: var(--l-on-dark);
}

.l-chip__count {
  margin-left: 6px;
  font-size: 13px;
}

.l-cat {
  scroll-margin-top: var(--l-sp-3);
}

.l-cat[hidden] {
  display: none;
}

.l-cat + .l-cat {
  margin-top: var(--l-sp-6);
}

.l-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--l-sp-2);
  margin-bottom: var(--l-sp-3);
  padding-top: var(--l-sp-2);
  border-top: var(--l-border) solid var(--l-rule);
}

.l-cat__intro {
  margin: 0 0 var(--l-sp-3);
  max-width: 66ch;
  color: var(--l-ink-soft);
}

.l-pieces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--l-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1080px) {
  .l-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .l-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--l-sp-2); }
}

.l-piece .l-frame__body {
  padding: 12px;
}

.l-piece .l-frame__caption {
  margin-top: 12px;
}

.l-piece .l-frame__caption-text {
  font-size: 18px;
  border-bottom-width: 1px;
}

.l-piece__ref {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--l-ink-muted);
  font-variant-numeric: tabular-nums;
}

.l-piece__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.l-piece .l-frame__media img {
  transition: transform 700ms var(--l-ease);
}

.l-piece:hover .l-frame__media img {
  transform: scale(1.025);
}


/* ====== 18. PRODUCT DETAIL ====== */
.l-product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--l-sp-6);
  align-items: start;
}

.l-product__info .l-h1 {
  font-size: clamp(34px, 3.8vw, 56px);
}

.l-product__ref {
  margin: 0 0 var(--l-sp-3);
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
  font-variant-numeric: tabular-nums;
}

.l-product__note {
  margin: var(--l-sp-2) 0 var(--l-sp-4);
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--l-sp-1);
  margin: var(--l-sp-2) 0 0;
  padding: 0;
  list-style: none;
}

.l-thumbs .l-zoom {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--l-border) solid var(--l-rule-soft);
}

.l-thumbs .l-zoom:hover,
.l-thumbs .l-zoom:focus-visible {
  border-color: var(--l-ink);
}

.l-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .l-product {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--l-sp-4);
  }
}


/* ====== 19. DISCLOSURES (FAQ rows, product details, contents) ====== */
.l-disclosure {
  border-bottom: 1px solid var(--l-rule-soft);
}

.l-disclosure:first-of-type {
  border-top: var(--l-border) solid var(--l-rule);
}

.l-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-sp-2);
  min-height: 56px;
  padding: 14px 0;
  font-family: var(--l-font-display);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

.l-disclosure > summary::-webkit-details-marker {
  display: none;
}

.l-disclosure > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--l-font-body);
  font-size: 22px;
  color: var(--l-coral);
}

.l-disclosure[open] > summary::after {
  content: "\2212";
}

.l-disclosure__body {
  padding: 0 0 var(--l-sp-3);
  color: var(--l-ink-soft);
}

.l-disclosure__body p {
  max-width: 66ch;
  margin: 0 0 var(--l-sp-2);
}

.l-disclosure--small > summary {
  min-height: var(--l-target);
  font-family: var(--l-font-body);
  font-size: 16px;
  font-weight: 500;
}


/* ====== 20. ARTICLE READING LAYOUT ====== */
.l-article-head {
  padding: var(--l-sp-4) 0 var(--l-sp-4);
}

.l-article-head .l-h1 {
  max-width: 20ch;
}

.l-byline {
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-article {
  display: grid;
  grid-template-columns: 220px minmax(0, var(--l-max-read));
  gap: var(--l-sp-6);
  align-items: start;
  padding-bottom: var(--l-sp-6);
}

.l-article--no-toc {
  grid-template-columns: minmax(0, var(--l-max-read));
  justify-content: center;
}

.l-toc {
  position: sticky;
  top: var(--l-sp-3);
  font-size: 15px;
}

.l-toc__title {
  margin: 0 0 var(--l-sp-2);
  font-size: var(--l-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.l-toc a {
  color: var(--l-navy);
  text-decoration: none;
}

.l-toc a:hover {
  text-decoration: underline;
}

.l-toc-mobile {
  display: none;
  margin-bottom: var(--l-sp-3);
}

@media (max-width: 960px) {
  .l-article {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .l-toc {
    display: none;
  }
  .l-toc-mobile {
    display: block;
  }
}

.l-body {
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.75;
  color: var(--l-ink);
}

.l-body > * {
  max-width: var(--l-max-read);
}

.l-body h2 {
  margin: var(--l-sp-5) 0 var(--l-sp-2);
  font-family: var(--l-font-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 350;
  line-height: 1.2;
  scroll-margin-top: var(--l-sp-3);
}

.l-body h3 {
  margin: var(--l-sp-4) 0 var(--l-sp-1);
  font-family: var(--l-font-display);
  font-size: clamp(21px, 1.7vw, 25px);
  font-weight: 400;
  line-height: 1.3;
  scroll-margin-top: var(--l-sp-3);
}

.l-body p,
.l-body li {
  color: var(--l-ink-soft);
}

.l-body a {
  color: var(--l-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.l-body img {
  max-width: 100%;
  height: auto;
  border: var(--l-border) solid var(--l-rule);
}

.l-body blockquote {
  margin: var(--l-sp-4) 0;
  padding: var(--l-sp-1) 0 var(--l-sp-1) var(--l-sp-3);
  border-left: var(--l-border-thick) solid var(--l-coral);
  font-family: var(--l-font-display);
  font-size: 22px;
  color: var(--l-ink);
}

.l-body table {
  width: 100%;
  margin-bottom: var(--l-sp-3);
  border-collapse: collapse;
  font-size: 16px;
}

.l-body th,
.l-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--l-rule-soft);
  text-align: left;
  vertical-align: top;
}

.l-body thead th {
  border-bottom: var(--l-border) solid var(--l-rule);
}

.l-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--l-sp-3);
}

@media (max-width: 860px) {
  .l-related {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ====== 21. JOURNAL INDEX ====== */
.l-story-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  gap: var(--l-sp-3);
  align-items: baseline;
  padding: var(--l-sp-3) 0;
  border-bottom: 1px solid var(--l-rule-soft);
}

.l-story-row__kicker {
  font-size: var(--l-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-story-row__title {
  margin: 0;
  font-family: var(--l-font-display);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 350;
  line-height: 1.25;
}

.l-story-row__title a {
  color: var(--l-ink);
  text-decoration: none;
}

.l-story-row__title a:hover {
  color: var(--l-coral);
  text-decoration: underline;
}

.l-story-row__excerpt {
  margin: 6px 0 0;
  color: var(--l-ink-soft);
  font-size: 16px;
}

.l-story-row__go {
  color: var(--l-navy);
  font-weight: 500;
}

@media (max-width: 720px) {
  .l-story-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

.l-pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-sp-1);
  margin: var(--l-sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.l-pager > li > a,
.l-pager > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--l-target);
  min-height: var(--l-target);
  padding: 6px 12px;
  border: var(--l-border) solid var(--l-ink);
  color: var(--l-ink);
  text-decoration: none;
}

.l-pager [aria-current="page"] {
  background: var(--l-ink);
  color: var(--l-on-dark);
}

.l-pager a:hover {
  border-color: var(--l-coral);
  color: var(--l-coral);
}


/* ====== 22. FRIENDS LETTER FORM ====== */
/* Source order is introduction, letter, other ways. Desktop puts the other
   ways under the introduction; phones keep source order so the letter comes
   straight after a short introduction. */
.l-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--l-sp-6);
  align-items: start;
  padding: var(--l-sp-4) 0 var(--l-sp-6);
}

.l-contact__side {
  grid-column: 1;
  grid-row: 1;
}

.l-contact > .l-note {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.l-contact__other {
  grid-column: 1;
  grid-row: 2;
}

.l-contact__side .l-h1 {
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1;
}

.l-contact__aside {
  margin-top: var(--l-sp-6);
}

.l-contact__other {
  margin-top: var(--l-sp-5);
  padding-top: var(--l-sp-3);
  border-top: var(--l-border) solid var(--l-rule);
}

.l-contact__other a {
  display: block;
  margin-top: 6px;
  color: var(--l-navy);
  font-size: 20px;
}

@media (max-width: 900px) {
  .l-contact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--l-sp-3);
    padding-top: var(--l-sp-2);
  }
  .l-contact__side,
  .l-contact > .l-note,
  .l-contact__other {
    grid-column: 1;
    grid-row: auto;
  }
  .l-contact__side .l-lede {
    margin-bottom: 0;
  }
  .l-contact__aside {
    margin-top: var(--l-sp-2);
  }
  .l-contact__aside .l-text {
    margin-bottom: 0;
  }
  .l-contact__other {
    margin-top: var(--l-sp-3);
  }
}

.l-note {
  padding: clamp(20px, 4vw, 48px);
  border: var(--l-border) solid var(--l-rule);
  background: var(--l-card);
}

.l-note__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--l-sp-2);
  padding-bottom: var(--l-sp-3);
  border-bottom: var(--l-border-thick) solid var(--l-rule);
}

.l-note__brand {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.l-note__from {
  margin: 4px 0 0;
  font-family: var(--l-font-display);
  font-size: 19px;
}

.l-note__stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px 6px;
  border: var(--l-border) solid var(--l-navy);
  font-size: 12px;
  color: var(--l-navy);
}

.l-note__stamp img {
  width: 56px;
  height: 56px;
}

.l-note__dear,
.l-note__thanks {
  margin: var(--l-sp-4) 0 var(--l-sp-3);
  color: var(--l-ink);
  font-family: var(--l-font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 350;
  line-height: 1.05;
}

.l-note__thanks {
  font-size: clamp(28px, 3vw, 40px);
}

.l-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--l-sp-4);
}

.l-field[hidden] {
  display: none;
}

.l-field label,
.l-field legend,
.l-label {
  padding: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--l-ink);
}

.l-field__hint {
  font-size: var(--l-fs-small);
  color: var(--l-ink-muted);
}

.l-input,
.l-textarea,
.l-select {
  width: 100%;
  min-height: var(--l-target);
  padding: 10px 2px;
  border: 0;
  border-bottom: var(--l-border) solid var(--l-ink);
  border-radius: 0;
  background: transparent;
  color: var(--l-ink);
  font: 400 17px/1.5 var(--l-font-body);
}

.l-select {
  padding: 10px 8px;
  border: var(--l-border) solid var(--l-ink);
  background: var(--l-card);
}

.l-textarea {
  min-height: 200px;
  padding: 6px 2px;
  resize: vertical;
  line-height: 40px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--l-rule-soft) 39px, var(--l-rule-soft) 40px);
  background-attachment: local;
  border-bottom: 0;
}

.l-textarea--short {
  min-height: 84px;
}

.l-input::placeholder,
.l-textarea::placeholder {
  color: var(--l-ink-muted);
}

.l-input:focus,
.l-textarea:focus,
.l-select:focus {
  outline: 3px solid var(--l-focus);
  outline-offset: 2px;
}

.l-input[aria-invalid="true"],
.l-textarea[aria-invalid="true"],
.l-select[aria-invalid="true"] {
  border-color: var(--l-coral);
}

.l-field__error {
  font-size: 15px;
  font-weight: 500;
  color: var(--l-coral);
}

.l-field__error:empty {
  display: none;
}

.l-choice {
  margin: 0 0 var(--l-sp-4);
  padding: 0;
  border: 0;
}

.l-choice legend {
  margin-bottom: var(--l-sp-1);
}

.l-choice__opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--l-sp-2);
}

.l-choice__opt {
  position: relative;
}

.l-choice__opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.l-choice__opt span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 16px;
  border: var(--l-border) solid var(--l-ink);
  background: var(--l-card);
  color: var(--l-ink);
  font-size: 17px;
}

.l-choice__opt span::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: var(--l-border) solid currentColor;
}

.l-choice__opt input:checked + span {
  background: var(--l-coral);
  border-color: var(--l-coral);
  color: var(--l-on-dark);
}

.l-choice__opt input:checked + span::before {
  background: currentColor;
  box-shadow: inset 0 0 0 2px var(--l-coral);
}

.l-choice__opt input:focus-visible + span {
  outline: 3px solid var(--l-focus);
  outline-offset: 3px;
}

.l-checks {
  display: grid;
  gap: 4px;
}

.l-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--l-target);
  font-size: 16px;
}

.l-check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--l-coral);
}

.l-note__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--l-sp-4);
}

@media (max-width: 640px) {
  .l-choice__opts,
  .l-note__pair {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--l-sp-1);
  }
  .l-note__pair {
    gap: 0;
  }
}

.l-note__details {
  margin: 0 0 var(--l-sp-4);
  border: var(--l-border) solid var(--l-rule-soft);
}

.l-note__details > summary {
  min-height: var(--l-target);
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-weight: 500;
  cursor: pointer;
}

.l-note__details-body {
  padding: var(--l-sp-2) 16px 0;
}

.l-note__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--l-sp-3);
  margin-top: var(--l-sp-4);
}

.l-note__send .l-btn {
  min-width: min(100%, 320px);
}

.l-note__other {
  font-size: 16px;
  color: var(--l-ink-soft);
}

.l-form-summary {
  margin: 0 0 var(--l-sp-4);
  padding: var(--l-sp-2) var(--l-sp-3);
  border: var(--l-border) solid var(--l-coral);
  background: var(--l-card);
}

.l-form-summary[hidden] {
  display: none;
}

.l-form-summary h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
  color: var(--l-coral);
}

.l-form-summary ul {
  margin: 0;
  padding-left: 20px;
}

.l-form-summary a {
  color: var(--l-ink);
}

.l-form-status {
  margin-top: var(--l-sp-3);
}

.l-form-status[hidden] {
  display: none;
}

.l-form-status--error {
  padding: var(--l-sp-2) var(--l-sp-3);
  border: var(--l-border) solid var(--l-coral);
}

.l-form-status--success {
  padding: var(--l-sp-3);
  border: var(--l-border) solid var(--l-navy);
}

.l-form-status--success h2 {
  margin: 0 0 6px;
  font-family: var(--l-font-display);
  font-size: 28px;
  font-weight: 350;
}

.l-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ====== 23. FOOTER ====== */
.l-footer {
  padding: var(--l-sp-6) 0 var(--l-sp-3);
  background: var(--l-paper);
  border-top: var(--l-border-thick) solid var(--l-rule);
  color: var(--l-ink);
}

.l-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--l-sp-4);
}

.l-footer__logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.l-footer__line {
  margin: var(--l-sp-2) 0 0;
  color: var(--l-ink-soft);
  font-size: 15px;
}

.l-footer__label {
  display: block;
  margin-bottom: var(--l-sp-2);
  font-size: var(--l-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--l-ink);
  font-size: 15px;
  text-decoration: none;
}

.l-footer__list a:hover {
  color: var(--l-coral);
  text-decoration: underline;
}

.l-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-sp-1) var(--l-sp-3);
  margin-top: var(--l-sp-5);
  padding-top: var(--l-sp-2);
  border-top: 1px solid var(--l-rule-soft);
  font-size: 14px;
  color: var(--l-ink-muted);
}

.l-footer__base a {
  color: var(--l-ink-soft);
}

@media (max-width: 1000px) {
  .l-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .l-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .l-footer__list a {
    min-height: var(--l-target);
  }
}

/* Retire the legacy dark footer */
.site-footer {
  display: none !important;
}


/* ====== 24. LEGACY CONTENT HARMONISATION ====== */
/* Long-form ceremony, guide and recipe bodies keep their source markup.
   These rules bring their cards, panels and images into the letter system. */
main img {
  border-radius: 0 !important;
}

main [class*="card"],
main [class*="panel"],
main [class*="callout"] {
  border-radius: 0 !important;
  box-shadow: none !important;
}

main input,
main textarea,
main select {
  border-radius: 0 !important;
}

main details > summary {
  cursor: pointer;
}


/* ====== 25. REVEALS (optional, never gate content) ====== */
/* letters.js marks only below-the-fold blocks as pending, so nothing
   already on screen disappears and content stays visible without JS. */
.l-reveal.is-pending {
  opacity: 0;
  transform: translateY(10px);
}

.l-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--l-ease), transform 520ms var(--l-ease);
}

@media (prefers-reduced-motion: reduce) {
  .l-reveal.is-pending,
  .l-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .l-piece .l-frame__media img,
  .l-lightbox__img,
  .l-zoom__hint {
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

@media print {
  .l-header,
  .l-footer,
  .l-band,
  .l-invite {
    display: none;
  }
}


/* ====== 27. PRESERVED LONG-FORM CONTENT (.l-legacy) ====== */
/* Ceremony and guide bodies keep their source markup and component styles.
   These scoped rules align them to the letter grid: same container, ink
   headings, square ink-bordered cards, ruled section openings. */
.l-rows--contents .l-row {
  grid-template-columns: 48px minmax(0, 1fr);
}

.l-legacy .section,
.l-legacy section {
  background: transparent !important;
  color: var(--l-ink);
  padding-top: var(--l-sp-6) !important;
  padding-bottom: var(--l-sp-6) !important;
}

.l-legacy .section-inner,
.l-legacy .section-inner--narrow {
  max-width: var(--l-max) !important;
  margin: 0 auto;
  padding-left: var(--l-gutter) !important;
  padding-right: var(--l-gutter) !important;
}

.l-legacy .section-inner::before {
  content: "";
  display: block;
  margin-bottom: var(--l-sp-2);
  border-top: var(--l-border) solid var(--l-rule);
}

.l-legacy h2 {
  font-family: var(--l-font-display);
  font-weight: 350 !important;
  font-size: var(--l-fs-h2) !important;
  color: var(--l-ink) !important;
  letter-spacing: -0.015em;
}

.l-legacy h2 em,
.l-legacy h3 em {
  color: var(--l-coral) !important;
}

.l-legacy h3,
.l-legacy h4 {
  color: var(--l-ink) !important;
}

.l-legacy .eyebrow,
.l-legacy .paebaek-eyebrow {
  color: var(--l-coral) !important;
  letter-spacing: 0.08em !important;
  font-weight: 600;
}

.l-legacy .lead {
  color: var(--l-ink-soft) !important;
  font-style: normal !important;
}

.l-legacy p,
.l-legacy li {
  color: var(--l-ink-soft);
}

.l-legacy [class*="__card"],
.l-legacy .paebaek-offering,
.l-legacy .paebaek-pillar,
.l-legacy .paebaek-clothing__col,
.l-legacy .paebaek-misc__card,
.l-legacy .paebaek-etym {
  background: var(--l-card) !important;
  border: var(--l-border) solid var(--l-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Pillar cards: inner spacing, and headings aligned across a row even when a
   card has no year or label above its heading (hwangap "Today") */
.l-legacy .paebaek-pillar {
  padding: var(--l-sp-3);
}

/* Hanja boxes and comparison cards: keep text off the border */
.l-legacy .paebaek-etym,
.l-legacy .paebaek-clothing__col {
  padding: clamp(16px, 2vw, 24px);
}

@media (min-width: 781px) {
  .l-legacy .paebaek-pillars {
    grid-template-rows: auto auto 1fr;
    row-gap: 0;
  }

  .l-legacy .paebaek-pillar {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .l-legacy .paebaek-pillar > .paebaek-pillar__ko {
    grid-row: 1;
  }

  .l-legacy .paebaek-pillar > h3 {
    grid-row: 2;
  }

  .l-legacy .paebaek-pillar > h3 ~ p {
    grid-row: 3;
  }
}

.l-legacy .paebaek-step {
  border-color: var(--l-rule-soft) !important;
}

.l-legacy .paebaek-faq details {
  border-bottom: 1px solid var(--l-rule-soft);
}

.l-legacy .paebaek-faq summary {
  min-height: 56px;
  font-family: var(--l-font-display);
  color: var(--l-ink);
}

.l-legacy a:not([class]) {
  color: var(--l-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.l-legacy .paebaek-scroll-hint {
  color: var(--l-ink-muted) !important;
}


/* Preserved dark call-to-action bands become paper letters, so they never
   stack against the shared navy closing band. */
.l-legacy .section--charcoal,
.l-legacy .section--indigo,
.l-legacy .final-cta {
  background: var(--l-card) !important;
  border-top: var(--l-border) solid var(--l-rule);
  border-bottom: var(--l-border) solid var(--l-rule);
}

.l-legacy .section--charcoal h2,
.l-legacy .section--charcoal h3,
.l-legacy .section--charcoal .lead,
.l-legacy .section--charcoal p,
.l-legacy .section--indigo h2,
.l-legacy .section--indigo p {
  color: var(--l-ink) !important;
}

.l-legacy .section--charcoal .section-inner::before {
  display: none;
}

.l-legacy .btn-primary--on-dark,
.l-legacy .btn-primary--inverse {
  background: var(--l-coral) !important;
  color: var(--l-on-dark) !important;
}

/* Empty legacy placeholders are never shown publicly */
.l-legacy .placeholder,
.l-legacy .editorial__image:has(.placeholder) {
  display: none !important;
}

.l-legacy .page-hero--bleed {
  min-height: 0 !important;
  color: var(--l-ink) !important;
}

.l-legacy .page-hero--bleed h1,
.l-legacy .page-hero--bleed p {
  color: var(--l-ink) !important;
}

/* Legacy bleed heroes: no gradient scrim, ink text on paper */
.l-legacy .page-hero--bleed {
  background: transparent !important;
}

.l-legacy .page-hero--bleed::after {
  display: none !important;
}

.l-legacy .page-hero--bleed .eyebrow {
  color: var(--l-coral) !important;
}

/* Legacy related cards become simple posts: photo (if any) over ink text */
.l-legacy .related-card {
  display: flex !important;
  flex-direction: column;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  background: var(--l-card) !important;
  border: var(--l-border) solid var(--l-rule) !important;
  color: var(--l-ink) !important;
}

.l-legacy .related-card::after,
.l-legacy .recipe-card__placeholder {
  display: none !important;
}

.l-legacy .related-card > img {
  position: static !important;
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.l-legacy .related-card__body {
  position: static !important;
  padding: var(--l-sp-2) var(--l-sp-3) var(--l-sp-3) !important;
}

.l-legacy .related-card__body h3,
.l-legacy .related-card__body .related-card__cta {
  color: var(--l-ink) !important;
}

.l-legacy .related-card__body .related-card__cta {
  color: var(--l-navy) !important;
  text-decoration: underline;
}

/* Legacy coral text links and small captions meet AA on paper */
.l-legacy .btn-link,
.l-legacy a[class*="__link"],
.l-legacy a[class*="-link"] {
  color: var(--l-coral) !important;
}

.l-legacy .paebaek-etym__hanja-sub {
  color: var(--l-ink-muted) !important;
}

/* ====== 26. UTILITIES ====== */
.l-mt {
  margin-top: var(--l-sp-4);
}

.l-mt-lg {
  margin-top: var(--l-sp-6);
}

.l-row__title,
.l-invite__title,
.l-story-row__title,
.l-path__label,
.l-occasion__name {
  color: var(--l-ink);
}

.l-band .l-invite__title {
  color: var(--l-on-dark);
}

.l-rows--stack .l-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.l-rows--stack .l-row__text {
  grid-column: 1;
}


/* ===================================================================
   28. KOREAN DETAILS AND THE PHOTOGRAPH-LED HOME (review 2026-10-08)
   One cohesive set of three motifs, all drawn for this brand:
   - maehwa (plum blossom) sprig: celebration letters and the hero panel
   - bojagi patchwork strip: the celebrations band and the footer edge
   - changsal (window lattice): corners on featured offerings, a faint
     field behind the closer-look plates
   Frame family: restrained letter frame for practical information,
   blossom frame for celebration letters, lattice corners for featured
   offerings, and one unframed full-width photograph.
   =================================================================== */
:root {
  --l-plum:        #E9A3B0;   /* blossom fill, decorative only */
  --l-jade:        #4F6F63;   /* 5.6:1 on paper; hangul labels, small accents */
  --l-ochre:       #C9973A;   /* decorative only */
  --l-bojagi:      url("/images/motifs/bojagi.svg");
  --l-lattice:     url("/images/motifs/changsal.svg");
  --l-hero-h:      calc(100vh - var(--l-header-h) - var(--l-border-thick));
}

@supports (height: 100svh) {
  :root { --l-hero-h: calc(100svh - var(--l-header-h) - var(--l-border-thick)); }
}

/* ---------- Header: Celebrations list (hover or keyboard focus) ---------- */
.l-nav__item--sub {
  position: relative;
}

.l-nav__caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.l-nav__sub {
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 60;
  min-width: 330px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--l-paper);
  border: var(--l-border) solid var(--l-rule);
  border-top: 6px solid transparent;
  border-image: none;
  box-shadow: 0 18px 40px rgba(28, 26, 23, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms var(--l-ease), transform 160ms var(--l-ease), visibility 0s linear 160ms;
}

.l-nav__sub::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -6px;
  height: 6px;
  background: var(--l-bojagi) left center / 240px 6px repeat-x;
}

.l-nav__item--sub:hover .l-nav__sub,
.l-nav__item--sub:focus-within .l-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.l-nav__sub a {
  display: flex;
  align-items: center;
  min-height: var(--l-target);
  padding: 4px 20px;
  color: var(--l-ink);
  font-size: 16px;
  text-decoration: none;
}

.l-nav__sub a:hover,
.l-nav__sub a:focus-visible {
  background: var(--l-paper-deep);
  color: var(--l-coral);
}

.l-nav__all {
  margin-top: 6px;
  border-top: 1px solid var(--l-rule-soft);
  padding-top: 6px;
}

.l-nav__all a {
  color: var(--l-navy);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.l-menu__list .l-menu__sub {
  margin: 0 0 var(--l-sp-1);
  padding: 0;
  list-style: none;
}

/* ---------- Full-screen hero ---------- */
.l-hero.l-hero--full {
  position: relative;
  display: block;
  height: var(--l-hero-h);
  min-height: 540px;
  max-height: 1180px;
  overflow: hidden;
  background: var(--l-paper-deep);
}

.l-hero--full .l-hero__media {
  position: absolute;
  inset: 0;
  height: auto;
  aspect-ratio: auto;
  border: 0;
}

.l-hero--full .l-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Face, collar and jeogori stay in frame; the bright wall on the left takes the copy */
  object-position: 56% 14%;
}

.l-hero--full .l-hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-bottom: clamp(28px, 7vh, 80px);
  pointer-events: none;
}

.l-hero--full .l-hero__panel {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(700px, 100%);
  margin: 0;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--l-paper);
  border: var(--l-border-thick) solid var(--l-rule);
  pointer-events: auto;
}

.l-hero--full .l-hero__title {
  font-size: clamp(32px, 3.1vw, 46px);
}

.l-hero--full .l-blossom {
  position: absolute;
  top: -46px;
  right: -26px;
  width: 132px;
  height: auto;
}

@media (max-width: 1000px) {
  .l-hero.l-hero--full {
    min-height: 560px;
  }
  .l-hero--full .l-hero__media img {
    object-position: 64% 0%;
  }
  .l-hero--full .l-hero__panel {
    width: 100%;
    border-width: var(--l-border-thick);
    border-top: var(--l-border-thick) solid var(--l-rule);
    padding: 20px 20px 22px;
  }
  .l-hero--full .l-hero__inner {
    padding-bottom: 16px;
  }
}

@media (max-width: 640px) {
  .l-hero--full .l-hero__title {
    font-size: clamp(28px, 8vw, 36px);
    margin-bottom: 16px;
  }
  .l-hero--full .l-eyebrow {
    margin-bottom: 8px;
  }
  .l-hero--full .l-actions {
    gap: 8px;
  }
  .l-hero--full .l-btn {
    min-height: 46px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .l-hero--full .l-blossom {
    width: 92px;
    top: -34px;
    right: -6px;
  }
}

/* Short landscape screens: keep the photograph, let the page scroll */
@media (max-height: 560px) and (orientation: landscape) {
  .l-hero.l-hero--full { height: auto; min-height: 520px; }
  /* height: 100% cannot resolve against min-height, so pin the inner box to it */
  .l-hero--full .l-hero__inner { height: auto; min-height: 520px; }
}

/* ---------- Celebrations band (photo-led, featured) ---------- */
.l-offers {
  position: relative;
  background: var(--l-paper-deep);
  padding-top: calc(var(--l-sp-6) + 14px);
}

.l-offers::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: var(--l-bojagi) left top / 480px 14px repeat-x;
}

.l-offers .l-section__head {
  max-width: 900px;
}

.l-offers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--l-sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-offer {
  display: flex;
}

.l-offer--lead {
  grid-column: span 2;
}

.l-offer__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--l-card);
  border: var(--l-border) solid var(--l-rule);
  color: var(--l-ink);
  text-decoration: none;
  transition: transform var(--l-dur) var(--l-ease), box-shadow var(--l-dur) var(--l-ease);
}

.l-offer__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(28, 26, 23, 0.10);
}

.l-offer__card:focus-visible {
  outline-offset: 4px;
}

.l-offer__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--l-paper-deep);
  border-bottom: var(--l-border) solid var(--l-rule);
}

.l-offer--lead .l-offer__media {
  aspect-ratio: 6 / 5;
}

.l-offer__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  transition: transform 900ms var(--l-ease);
}

.l-offer__card:hover .l-offer__media img {
  transform: scale(1.03);
}

.l-offer__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 2px;
  padding: 16px 18px 18px;
}

.l-offer--lead .l-offer__body {
  padding: 20px 24px 22px;
}

.l-offer__ko {
  font-family: "Noto Serif KR", var(--l-font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--l-jade);
}

.l-offer__name {
  margin: 0;
  font-family: var(--l-font-display);
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.12;
}

.l-offer--lead .l-offer__name {
  font-size: clamp(28px, 2.6vw, 38px);
}

.l-offer__what {
  font-size: var(--l-fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-offer__line {
  margin-top: 8px;
  color: var(--l-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.l-offer--lead .l-offer__line {
  font-size: var(--l-fs-body);
  max-width: 44ch;
}

.l-offer__go {
  margin-top: auto;
  padding-top: 12px;
  color: var(--l-navy);
  font-weight: 600;
  font-size: 15px;
}

.l-offer__card:hover .l-offer__go,
.l-offer__card:hover .l-offer__name {
  color: var(--l-coral);
}

/* Featured offerings: lattice corners sit on the frame, never on the photograph */
.l-offer--lead .l-offer__card::before,
.l-offer--lead .l-offer__card::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 40px;
  background: url("/images/motifs/changsal-corner.svg") center / contain no-repeat;
  pointer-events: none;
}

.l-offer--lead .l-offer__card::before {
  top: -9px;
  left: -9px;
}

.l-offer--lead .l-offer__card::after {
  right: -9px;
  bottom: -9px;
  transform: rotate(180deg);
}

@media (max-width: 1000px) {
  .l-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .l-offers__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--l-sp-2);
  }
  .l-offer--lead { grid-column: auto; }
  .l-offer--lead .l-offer__media { aspect-ratio: 5 / 4; }
  /* Smaller occasions become compact rows: photograph left, words right */
  .l-offer:not(.l-offer--lead) .l-offer__card {
    flex-direction: row;
  }
  .l-offer:not(.l-offer--lead) .l-offer__media {
    flex: 0 0 34%;
    aspect-ratio: auto;
    min-height: 168px;
    border-bottom: 0;
    border-right: var(--l-border) solid var(--l-rule);
  }
  .l-offer:not(.l-offer--lead) .l-offer__body {
    padding: 12px 14px;
  }
  .l-offer:not(.l-offer--lead) .l-offer__line {
    font-size: 14px;
    margin-top: 4px;
  }
  .l-offer:not(.l-offer--lead) .l-offer__go {
    padding-top: 6px;
  }
}

/* ---------- Unframed full-width photograph ---------- */
.l-bleed {
  margin: 0;
  background: var(--l-paper);
}

.l-bleed img {
  display: block;
  width: 100%;
  height: clamp(320px, 52vh, 560px);
  object-fit: cover;
  object-position: 50% 30%;
}

.l-bleed__cap {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 13px;
  color: var(--l-ink-muted);
}

@media (max-width: 700px) {
  .l-bleed img {
    height: 72vw;
    min-height: 300px;
    object-position: 46% 44%;
  }
}

/* ---------- Lattice field and unframed plates (closer look) ---------- */
.l-section--lattice {
  background-color: var(--l-paper);
  background-image: var(--l-lattice);
  background-size: 32px 32px;
  border-top: var(--l-border) solid var(--l-rule);
  border-bottom: var(--l-border) solid var(--l-rule);
}

.l-section--lattice .l-section__head {
  border-top: 0;
  padding-top: 0;
}

.l-section--lattice .l-section__head,
.l-section--lattice .l-follow {
  display: table;
  padding: 14px 18px;
  background: var(--l-paper);
}

.l-plate {
  margin: 0;
}

.l-plate .l-frame__media {
  aspect-ratio: 4 / 5;
  border: var(--l-border) solid var(--l-rule);
  outline: 8px solid var(--l-paper);
}

.l-plate figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 22px;
  padding: 10px 14px;
  background: var(--l-paper);
}

.l-plate__label {
  font-size: var(--l-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--l-coral);
}

.l-plate figcaption a {
  font-family: var(--l-font-display);
  font-size: 20px;
  color: var(--l-ink);
  text-decoration: none;
}

.l-plate figcaption a:hover {
  color: var(--l-coral);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .l-section--lattice .l-grid--3 { gap: var(--l-sp-5); }
}

/* ---------- Blossom frame (celebration letters only) ---------- */
.l-frame--blossom {
  overflow: visible;
}

.l-frame--blossom > .l-frame__body > .l-blossom,
.l-frame--blossom .l-frame__body > .l-blossom {
  position: absolute;
  top: -70px;
  right: -20px;
  z-index: 2;
  width: 120px;
  height: auto;
  pointer-events: none;
}

.l-frame--blossom .l-frame__body {
  position: relative;
}

.l-frame--blossom .l-letter {
  border-top-color: var(--l-coral);
}

@media (max-width: 640px) {
  .l-frame--blossom .l-frame__body > .l-blossom {
    width: 96px;
    top: -30px;
    right: -6px;
  }
}

/* ---------- Footer edge ---------- */
.l-band {
  position: relative;
}

.l-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--l-bojagi) left top / 480px 8px repeat-x;
}

@media (prefers-reduced-motion: reduce) {
  .l-offer__card,
  .l-offer__media img,
  .l-nav__sub {
    transition: none;
  }
  .l-offer__card:hover,
  .l-offer__card:hover .l-offer__media img {
    transform: none;
  }
}

.l-frame--blossom .l-frame__num { visibility: hidden; }

/* ---------- Photo library upgrade (2026-10-08) ---------- */
.l-hero--full .l-hero__media picture { display: block; width: 100%; height: 100%; }
/* Landscape master: subject sits right of center, the stone wall on the left takes the copy */
.l-hero--full .l-hero__media img { object-position: 62% 40%; }
@media (max-width: 760px) {
  .l-hero--full .l-hero__media img { object-position: 50% 30%; }
}
.l-bleed img { height: clamp(380px, 72vh, 820px); object-position: 50% 55%; }
.l-bleed--alley img { object-position: 50% 62%; }
@media (max-width: 700px) {
  .l-bleed img { height: 92vw; min-height: 320px; object-position: 46% 55%; }
}
.l-plate__title { font-family: var(--l-font-display); font-size: 20px; color: var(--l-ink); }

@media (min-width: 1001px) { .l-hero--full .l-hero__panel { width: min(640px, 100%); } }

/* ---------- Hero slideshow (2026-10-08) ---------- */
.l-hero--full .l-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms var(--l-ease); }
.l-hero--full .l-hero__slide.is-active { opacity: 1; }
.l-hero--full .l-hero__slide picture { display: block; width: 100%; height: 100%; }
.l-hero--full .l-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos); }
.l-hero--full .l-hero__slide.is-active img { animation: l-drift 9s ease-out both; }
@keyframes l-drift { from { transform: scale(1.04); } to { transform: scale(1); } }
@media (max-width: 760px) { .l-hero--full .l-hero__slide img { object-position: var(--mpos); } }
.l-hero__controls { position: absolute; right: var(--l-gutter); top: 18px; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; background: rgba(251, 249, 245, 0.92); border: var(--l-border) solid var(--l-rule); }
.l-hero__dot { width: 8px; height: 8px; border: 1.5px solid var(--l-ink); border-radius: 50%; }
.l-hero__dot.is-active { background: var(--l-coral); border-color: var(--l-coral); }
.l-hero__pause { min-height: 32px; padding: 4px 10px; border: 0; background: transparent; color: var(--l-ink); font: 500 13px/1 var(--l-font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.l-hero__pause:focus-visible { outline: 3px solid var(--l-focus); }
@media (max-width: 760px) { .l-hero__controls { top: 12px; right: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .l-hero--full .l-hero__slide { transition: none; }
  .l-hero--full .l-hero__slide.is-active img { animation: none; }
}

/* ---------- Video clips (2026-10-08) ---------- */
.l-clip { margin: 0; }
.l-clip__frame { position: relative; overflow: hidden; background: var(--l-paper-deep); }
.l-clip__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.l-clip--banner .l-clip__frame { aspect-ratio: 21 / 9; max-height: 78vh; }
.l-clip--banner .l-clip__video { object-position: 50% 55%; }
.l-clip--portrait .l-clip__frame { aspect-ratio: 4 / 5; border: var(--l-border) solid var(--l-rule); outline: 8px solid var(--l-paper); }
.l-clip__cap { padding-top: 12px; padding-bottom: 12px; font-size: 13px; color: var(--l-ink-muted); }
.l-clip__toggle { position: absolute; right: 12px; bottom: 12px; min-height: 36px; padding: 6px 12px;
  border: var(--l-border) solid var(--l-rule); background: rgba(251, 249, 245, 0.92); color: var(--l-ink);
  font: 500 13px/1 var(--l-font-body); cursor: pointer; }
.l-clip__toggle:focus-visible { outline: 3px solid var(--l-focus); outline-offset: 2px; }
@media (max-width: 700px) {
  .l-clip--banner .l-clip__frame { aspect-ratio: 4 / 3; }
}

.l-wrap + .l-clip--banner, .l-page-head + .l-clip--banner { margin-top: var(--l-sp-5); }
.l-clip--banner + .l-section { padding-top: var(--l-sp-5); }