/* KUJISA discovery routes: image archive and practical online-kuji guide */

.discovery-page {
  --d-panel: #171110;
  --d-panel-2: #201715;
  --d-line: rgba(132, 79, 67, .48);
  --d-text: #f4e8d9;
  --d-muted: #ad9988;
  --d-dim: #76645a;
  --d-red: #bd493b;
  --d-red-deep: #6d211e;
  --d-gold: #c09a61;
}

.discovery-main {
  position: relative;
  z-index: 2;
  padding: clamp(46px, 6vw, 88px) 0 clamp(90px, 9vw, 140px);
}

.discovery-kicker {
  margin: 0 0 14px;
  color: var(--d-red);
  font: 700 11px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
}

.archive-intro {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, .72fr);
  align-items: end;
  gap: clamp(38px, 8vw, 120px);
  padding-bottom: clamp(42px, 5vw, 72px);
}

.archive-intro h1,
.guide-hero h1,
.guide-definition h2,
.guide-final h2 {
  margin: 0;
  color: var(--d-text);
  font: 900 clamp(42px, 6vw, 78px)/1.12 "Noto Serif KR", serif;
  letter-spacing: -.07em;
  word-break: keep-all;
}

.archive-intro h1 em,
.guide-hero h1 em {
  color: var(--d-red);
  font-style: normal;
}

.archive-intro-copy > p {
  margin: 0;
  color: var(--d-muted);
  font-size: 15px;
  line-height: 1.85;
  word-break: keep-all;
}

.archive-state-key {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--d-line);
}

.archive-state-key span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9a596;
  font-size: 12px;
  font-weight: 800;
}

.archive-state-key i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #806e63;
}

.archive-state-key .is-live i { background: #c65345; box-shadow: 0 0 14px rgba(198, 83, 69, .65); }
.archive-state-key .is-upcoming i { background: var(--d-gold); }
.archive-state-key .is-sold i { background: #6f6662; }

.archive-showcase {
  position: relative;
  padding: clamp(36px, 4vw, 58px) 0;
  overflow: hidden;
  border-block: 1px solid var(--d-line);
  background:
    linear-gradient(180deg, rgba(19, 13, 12, .96), rgba(12, 9, 8, .98)),
    url("/assets/kujisa-hero.webp") 50% 30% / cover no-repeat;
}

.archive-showcase::before,
.archive-showcase::after {
  position: absolute;
  z-index: 3;
  right: 0;
  left: 0;
  height: 90px;
  pointer-events: none;
  content: "";
}

.archive-showcase::before { top: 0; background: linear-gradient(#100c0b, transparent); }
.archive-showcase::after { bottom: 0; background: linear-gradient(transparent, #100c0b); }

.archive-showcase-head {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px !important;
}

.archive-showcase-head p {
  margin: 0 0 8px;
  color: var(--d-red);
  font: 700 10px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
}

.archive-showcase-head h2 {
  margin: 0;
  color: var(--d-text);
  font: 900 clamp(27px, 3vw, 42px)/1.2 "Noto Sans KR", sans-serif;
  letter-spacing: -.05em;
}

.archive-showcase-head > p {
  margin: 0 0 5px;
  color: var(--d-muted);
  font: 600 13px/1.5 "Noto Sans KR", sans-serif;
  letter-spacing: 0;
}

.archive-showcase-head strong { color: var(--d-text); font-size: 22px; }

.archive-wall {
  position: relative;
  z-index: 2;
  display: grid;
  height: 1080px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 4%, #000 96%, transparent);
}

.archive-column {
  min-width: 0;
  overflow: hidden;
}

.archive-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.archive-column.is-up .archive-track { animation: archiveWallUp var(--archive-speed, 56s) linear infinite; }
.archive-column.is-down .archive-track { animation: archiveWallDown var(--archive-speed, 62s) linear infinite; }
.archive-column:hover .archive-track,
.archive-column:focus-within .archive-track { animation-play-state: paused; }

.archive-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 14px;
}

.archive-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(117, 79, 70, .48);
  border-radius: 14px;
  background: #171110;
  color: var(--d-text);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24);
  transform: translateZ(0);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

a.archive-card:hover,
a.archive-card:focus-visible {
  border-color: rgba(190, 73, 59, .82);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .4);
  transform: translateY(-4px);
}

.archive-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #0c0908;
}

.archive-card-image::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  content: "";
  background: linear-gradient(transparent, rgba(14, 10, 9, .72));
  pointer-events: none;
}

.archive-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter .25s ease, transform .35s ease;
}

a.archive-card:hover img,
a.archive-card:focus-visible img { transform: scale(1.035); }

.archive-card.is-sold .archive-card-image img {
  filter: grayscale(1) saturate(.15) brightness(.58);
}

.archive-card.is-sold::after {
  position: absolute;
  top: 16px;
  right: -32px;
  z-index: 3;
  width: 130px;
  padding: 7px 0;
  content: "SOLD OUT";
  border-block: 1px solid rgba(231, 128, 116, .58);
  background: rgba(113, 31, 28, .9);
  color: #f5d8d3;
  font: 800 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(42deg);
}

.archive-status {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(12, 9, 8, .78);
  color: #eadbcc;
  font: 800 10px/1 "Noto Sans KR", sans-serif;
  backdrop-filter: blur(8px);
}

.archive-card.is-live .archive-status { background: rgba(159, 50, 43, .92); color: #fff; }
.archive-card.is-upcoming .archive-status { background: rgba(106, 82, 55, .92); color: #f5dfb6; }

.archive-card-copy {
  min-height: 91px;
  padding: 13px 14px 15px;
}

.archive-card-copy h3 {
  display: -webkit-box;
  min-height: 2.8em;
  margin: 0;
  overflow: hidden;
  color: #f0e4d5;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.025em;
  word-break: keep-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.archive-card-jp {
  display: block !important;
  margin: 4px 0 0 !important;
  overflow: hidden;
  color: #97826f !important;
  font: 500 10.5px/1.4 "Noto Sans KR", sans-serif !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-card-copy p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 9px 0 0;
  color: #8f7c6d;
  font: 600 10px/1.4 "IBM Plex Mono", monospace;
}

.archive-card-copy p b { color: #c8ad8c; font-weight: 600; }

.archive-empty,
.archive-noscript {
  position: relative;
  z-index: 5;
  min-height: 260px;
  place-content: center;
  text-align: center;
}

.archive-empty:not([hidden]) { display: grid; }
.archive-empty p,
.archive-noscript p { margin: 0 0 15px; color: var(--d-muted); font-size: 16px; }
.archive-empty a,
.archive-noscript a { color: #e07161; font-weight: 800; }

.archive-source-note {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(320px, 1.1fr) auto;
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  margin-top: clamp(54px, 7vw, 100px) !important;
  padding: clamp(28px, 3vw, 42px);
  border: 1px solid var(--d-line);
  border-radius: 14px;
  background: linear-gradient(115deg, rgba(169, 54, 45, .12), transparent 40%), var(--d-panel);
}

.archive-source-note > div p {
  margin: 0 0 7px;
  color: var(--d-red);
  font: 700 10px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .15em;
}

.archive-source-note h2 {
  margin: 0;
  color: var(--d-text);
  font-size: 22px;
  line-height: 1.45;
  letter-spacing: -.04em;
}

.archive-source-note > p {
  margin: 0;
  color: var(--d-muted);
  font-size: 13px;
  line-height: 1.8;
}

.archive-source-note > a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 18px;
  border: 1px solid #6f3d35;
  border-radius: 7px;
  color: #ead9c7;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

@keyframes archiveWallUp {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@keyframes archiveWallDown {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

/* Guide */
.guide-landing {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.guide-hero {
  position: relative;
  min-height: 550px;
  overflow: hidden;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: #0b0807;
}

.guide-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(10, 7, 7, .94) 0%, rgba(10, 7, 7, .77) 42%, rgba(10, 7, 7, .15) 78%),
    linear-gradient(0deg, rgba(10, 7, 7, .64), transparent 45%);
}

.guide-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.75) saturate(.86) contrast(1.08);
}

.guide-hero-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(28px, 5vw, 70px);
  width: min(520px, 57%);
  transform: translateY(-50%);
}

.guide-hero-copy > p:not(.discovery-kicker) {
  max-width: 480px;
  margin: 24px 0 0;
  color: #c0ac9a;
  font-size: 15px;
  line-height: 1.85;
  word-break: keep-all;
}

.guide-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 30px;
}

.guide-hero-actions a,
.guide-quick-cta {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #734037;
  border-radius: 7px;
  color: #f0dfce;
  background: rgba(21, 15, 14, .76);
  font-size: 13px;
  font-weight: 900;
}

.guide-hero-actions a:first-child {
  border-color: #b64a3d;
  background: #a5372e;
  color: #fff;
}

.guide-quick {
  display: flex;
  min-height: 550px;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(167, 52, 45, .1), transparent 35%), var(--d-panel);
}

.guide-quick > div > p {
  margin: 0 0 8px;
  color: var(--d-red);
  font: 700 10px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .15em;
}

.guide-quick h2 {
  margin: 0;
  color: var(--d-text);
  font-size: 25px;
  letter-spacing: -.04em;
}

.guide-quick nav {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--d-line);
}

.guide-quick nav a {
  display: grid;
  min-height: 70px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--d-line);
  color: #d9c7b5;
}

.guide-quick nav span {
  color: #a4483e;
  font: 700 10px/1 "IBM Plex Mono", monospace;
}

.guide-quick nav b { font-size: 14px; }
.guide-quick nav i { color: #846f60; font-style: normal; }
.guide-quick-cta { margin-top: auto; gap: 30px; }

.guide-definition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr);
  min-height: 530px;
  margin-top: clamp(54px, 7vw, 100px) !important;
  overflow: hidden;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: var(--d-panel);
}

.guide-definition-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
}

.guide-definition h2 { font-size: clamp(36px, 4.5vw, 58px); }

.guide-definition-copy > p:not(.discovery-kicker) {
  margin: 24px 0 0;
  color: var(--d-muted);
  font-size: 15px;
  line-height: 1.9;
  word-break: keep-all;
}

.guide-definition dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 28px 0 0;
}

.guide-definition dl div {
  padding: 18px;
  border: 1px solid #48302b;
  border-radius: 10px;
  background: #110d0c;
}

.guide-definition dt {
  margin-bottom: 8px;
  color: #ebd9c6;
  font-size: 14px;
  font-weight: 900;
}

.guide-definition dd {
  margin: 0;
  color: #948173;
  font-size: 12px;
  line-height: 1.7;
}

.guide-definition-copy > a {
  align-self: flex-start;
  margin-top: 22px;
  color: #c55d50;
  font-size: 12px;
  font-weight: 800;
}

.guide-definition-media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.guide-definition-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, #171110 0%, transparent 36%), linear-gradient(0deg, rgba(13, 9, 8, .55), transparent 45%);
}

.guide-definition-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.76) saturate(.84);
}

.guide-definition-media span {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 20px;
  color: rgba(245, 224, 202, .65);
  font: 800 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
}

.guide-process {
  margin-top: clamp(60px, 8vw, 110px) !important;
}

.guide-process > header {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, .7fr);
  column-gap: clamp(40px, 8vw, 120px);
  align-items: end;
  margin-bottom: 30px;
}

.guide-process > header .discovery-kicker { grid-column: 1 / -1; }
.guide-process > header h2 {
  margin: 0;
  color: var(--d-text);
  font-size: clamp(30px, 4vw, 50px);
  letter-spacing: -.06em;
}

.guide-process > header > p:last-child {
  margin: 0;
  color: var(--d-muted);
  font-size: 14px;
  line-height: 1.75;
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--d-line);
  list-style: none;
}

.guide-steps li {
  min-height: 260px;
  padding: 28px;
  border-right: 1px solid var(--d-line);
  background: linear-gradient(145deg, rgba(161, 51, 43, .08), transparent 42%), rgba(23, 17, 16, .74);
}

.guide-steps li:last-child { border-right: 0; }

.guide-steps > li > span {
  display: inline-flex;
  color: var(--d-red);
  font: 700 11px/1 "IBM Plex Mono", monospace;
}

.guide-steps > li > div {
  margin-top: 70px;
}

.guide-steps b {
  color: var(--d-text);
  font-size: 20px;
  letter-spacing: -.04em;
}

.guide-steps p {
  margin: 12px 0 0;
  color: var(--d-muted);
  font-size: 13px;
  line-height: 1.75;
}

.guide-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: clamp(60px, 8vw, 110px) !important;
}

.guide-feature {
  position: relative;
  display: grid;
  min-height: 460px;
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: var(--d-panel);
}

.guide-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.52) saturate(.76) contrast(1.08);
}

.guide-feature::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(13, 9, 8, .98) 0%, rgba(13, 9, 8, .68) 46%, rgba(13, 9, 8, .08) 88%);
}

.guide-feature > div {
  position: relative;
  z-index: 2;
  padding: clamp(26px, 4vw, 48px);
}

.guide-feature > div > p:first-child {
  margin: 0 0 9px;
  color: var(--d-red);
  font: 700 10px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .16em;
}

.guide-feature h2 {
  margin: 0;
  color: var(--d-text);
  font-size: clamp(27px, 3vw, 38px);
  letter-spacing: -.05em;
}

.guide-feature ul {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.guide-feature li,
.guide-feature > div > p:not(:first-child) {
  position: relative;
  margin: 0;
  padding-left: 15px;
  color: #c3b09e;
  font-size: 13px;
  line-height: 1.75;
}

.guide-feature li::before {
  position: absolute;
  top: .7em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  content: "";
  background: #b64a3d;
}

.guide-feature > div > a {
  display: inline-flex;
  margin-top: 24px;
  color: #d86455;
  font-size: 13px;
  font-weight: 900;
}

.guide-feature-refund,
.guide-feature-damage {
  min-height: 330px;
}

.guide-feature-refund {
  background:
    linear-gradient(135deg, rgba(161, 51, 43, .14), transparent 48%),
    url("/assets/kujisa-hero.webp") 73% 28% / cover no-repeat;
}

.guide-feature-damage {
  background:
    linear-gradient(135deg, rgba(82, 57, 48, .2), transparent 48%),
    url("/assets/banners/kujisa-night-market.webp") 68% 44% / cover no-repeat;
}

.guide-feature-refund::after,
.guide-feature-damage::after { background: rgba(15, 10, 9, .86); backdrop-filter: blur(1px); }

.guide-faq {
  display: grid;
  grid-template-columns: minmax(250px, .55fr) minmax(0, 1fr);
  gap: clamp(35px, 7vw, 100px);
  margin-top: clamp(60px, 8vw, 110px) !important;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: var(--d-panel);
}

.guide-faq h2 {
  margin: 0;
  color: var(--d-text);
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -.05em;
}

.guide-faq details { border-bottom: 1px solid var(--d-line); }
.guide-faq details:first-child { border-top: 1px solid var(--d-line); }

.guide-faq summary {
  position: relative;
  padding: 22px 36px 22px 0;
  color: #e7d7c7;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  content: "+";
  color: #b95246;
  font: 500 24px/1 sans-serif;
  transform: translateY(-50%);
}

.guide-faq details[open] summary::after { content: "−"; }
.guide-faq details p { margin: -3px 0 0; padding: 0 34px 22px 0; color: var(--d-muted); font-size: 13px; line-height: 1.8; }

.guide-final {
  display: grid;
  grid-template-columns: 1fr .8fr;
  align-items: end;
  gap: clamp(40px, 8vw, 120px);
  margin-top: clamp(60px, 8vw, 110px) !important;
  padding: clamp(36px, 5vw, 68px);
  border: 1px solid #704239;
  border-radius: 18px;
  background:
    linear-gradient(105deg, rgba(125, 35, 31, .34), transparent 55%),
    #1b1211;
}

.guide-final h2 { font-size: clamp(34px, 4.5vw, 58px); }
.guide-final > div:last-child > p { margin: 0; color: var(--d-muted); font-size: 14px; line-height: 1.8; }
.guide-final > div:last-child > a {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 24px;
  padding: 0 20px;
  border-radius: 7px;
  background: #ac3d33;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

@media (max-width: 1100px) {
  .archive-wall {
    height: 930px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guide-landing { grid-template-columns: minmax(0, 2.2fr) minmax(250px, .8fr); }
  .guide-hero-copy { width: min(560px, 65%); }
  .guide-steps { grid-template-columns: 1fr 1fr; }
  .guide-steps li:nth-child(2) { border-right: 0; }
  .guide-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--d-line); }
}

@media (max-width: 900px) {
  .discovery-main { padding-top: 28px; }
  .archive-intro { grid-template-columns: 1fr; gap: 24px; }
  .archive-intro h1 { font-size: clamp(38px, 9vw, 58px); }
  .archive-source-note { grid-template-columns: 1fr; gap: 20px; }
  .archive-source-note > a { justify-self: start; }

  .guide-landing { grid-template-columns: 1fr; }
  .guide-hero { min-height: 420px; }
  .guide-hero-copy { width: min(560px, 72%); }
  .guide-hero h1 { font-size: clamp(38px, 9vw, 58px); }
  .guide-quick { min-height: 0; }
  .guide-quick nav { grid-template-columns: 1fr 1fr; }
  .guide-quick nav a:nth-child(odd) { border-right: 1px solid var(--d-line); }
  .guide-quick-cta { margin-top: 22px; align-self: flex-start; }
  .guide-definition { grid-template-columns: 1fr; }
  .guide-definition-media { min-height: 330px; order: -1; }
  .guide-definition-media::after { background: linear-gradient(0deg, #171110 0%, transparent 48%); }
  .guide-process > header { grid-template-columns: 1fr; gap: 14px; }
  .guide-feature-grid { grid-template-columns: 1fr; }
  .guide-faq { grid-template-columns: 1fr; gap: 25px; }
  .guide-final { grid-template-columns: 1fr; gap: 25px; }
}

@media (max-width: 620px) {
  .discovery-main {
    padding-top: 22px;
    padding-bottom: 100px;
  }

  .archive-intro { padding-bottom: 32px; }
  .archive-intro h1 { font-size: clamp(34px, 10vw, 46px); }
  .archive-intro h1 br { display: none; }
  .archive-intro-copy > p { font-size: 13px; line-height: 1.75; }
  .archive-state-key { gap: 13px; }
  .archive-showcase { padding-block: 28px; }
  .archive-showcase-head { margin-bottom: 18px !important; }
  .archive-showcase-head > p { font-size: 11px; }
  .archive-showcase-head strong { font-size: 18px; }

  .archive-wall {
    height: 760px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .archive-group { gap: 9px; padding-bottom: 9px; }
  .archive-card { border-radius: 10px; }
  .archive-card-copy { min-height: 82px; padding: 10px 10px 12px; }
  .archive-card-copy h3 { font-size: 11px; }
  .archive-card-copy p { font-size: 9px; }
  .archive-status { top: 7px; left: 7px; min-height: 23px; padding-inline: 7px; font-size: 9px; }
  .archive-source-note { padding: 22px; }
  .archive-source-note h2 { font-size: 19px; }

  .guide-hero { min-height: 360px; border-radius: 12px; }
  .guide-hero::after { background: linear-gradient(90deg, rgba(10, 7, 7, .92), rgba(10, 7, 7, .45) 78%, rgba(10, 7, 7, .12)); }
  .guide-hero-copy { left: 20px; width: calc(100% - 40px); }
  .guide-hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .guide-hero-copy > p:not(.discovery-kicker) { max-width: 88%; margin-top: 16px; font-size: 12px; line-height: 1.7; }
  .guide-hero-actions { margin-top: 20px; }
  .guide-hero-actions a { min-height: 42px; padding-inline: 13px; font-size: 11px; }
  .guide-quick { padding: 20px; border-radius: 12px; }
  .guide-quick nav { grid-template-columns: 1fr; }
  .guide-quick nav a:nth-child(odd) { border-right: 0; }
  .guide-quick nav a { min-height: 58px; }
  .guide-definition { margin-top: 42px !important; border-radius: 12px; }
  .guide-definition-media { min-height: 230px; }
  .guide-definition-copy { padding: 24px 20px; }
  .guide-definition h2 { font-size: 34px; }
  .guide-definition-copy > p:not(.discovery-kicker) { margin-top: 17px; font-size: 13px; line-height: 1.75; }
  .guide-definition dl { grid-template-columns: 1fr; margin-top: 20px; }
  .guide-process { margin-top: 48px !important; }
  .guide-process > header h2 { font-size: 30px; }
  .guide-steps { grid-template-columns: 1fr 1fr; }
  .guide-steps li { min-height: 220px; padding: 18px 15px; }
  .guide-steps > li > div { margin-top: 45px; }
  .guide-steps b { font-size: 15px; }
  .guide-steps p { font-size: 11px; line-height: 1.65; }
  .guide-feature-grid { margin-top: 48px !important; gap: 12px; }
  .guide-feature { min-height: 390px; border-radius: 12px; }
  .guide-feature-refund,
  .guide-feature-damage { min-height: 300px; }
  .guide-feature > div { padding: 24px 20px; }
  .guide-feature h2 { font-size: 26px; }
  .guide-feature li,
  .guide-feature > div > p:not(:first-child) { font-size: 12px; }
  .guide-faq { margin-top: 48px !important; padding: 22px 18px; border-radius: 12px; }
  .guide-faq h2 { font-size: 29px; }
  .guide-faq summary { font-size: 13px; }
  .guide-final { margin-top: 48px !important; padding: 25px 20px; border-radius: 12px; }
  .guide-final h2 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-wall {
    height: auto;
    overflow: visible;
    mask-image: none;
  }

  .archive-column { overflow: visible; }
  .archive-track { animation: none !important; transform: none !important; }
  .archive-group[aria-hidden="true"] { display: none; }
  .archive-card,
  .archive-card img { transition: none !important; }
}