/* 浑 · HÚN — step-through ordering. Standalone artifact (not the portfolio site
   design system). Warm candlelit identity, Fraunces display, distinct from
   MERIDIAN's cold palette. */
:root {
  --void: #17100b;
  --bg: #1b130d;
  --cream: #ece3d4;
  --cream-dim: rgba(236, 227, 212, 0.62);
  --cream-faint: rgba(236, 227, 212, 0.34);
  --amber: #d3a05a;
  --wine: #8a3b3f;
  --line: rgba(236, 227, 212, 0.15);
  --serif: "Fraunces", "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--void); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* chrome */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 18px 26px; }
.mark { font-family: var(--serif); font-weight: 500; letter-spacing: 0.16em; font-size: 16px; color: var(--cream); }
.lang { background: none; border: 1px solid var(--line); color: var(--cream-dim); font: 500 11px/1 var(--sans); letter-spacing: 0.14em; padding: 8px 12px; cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.lang:hover { color: var(--cream); border-color: var(--cream-faint); }

.stage { min-height: 100dvh; display: grid; }
.screen { position: relative; min-height: 100dvh; display: grid; place-items: center; animation: screenIn 0.5s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }
.screen__in { position: relative; z-index: 2; width: min(92vw, 1120px); padding: 96px 0 120px; }

.bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.scrim { position: absolute; inset: 0; }
.scrim--full { background: radial-gradient(120% 90% at 50% 45%, rgba(23,16,11,.35), rgba(23,16,11,.86)), linear-gradient(to bottom, rgba(23,16,11,.35), rgba(23,16,11,.7)); }

/* ---------- open ---------- */
.open__in { text-align: center; }
.open__title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vw, 92px); line-height: 1.04; color: #f6efe2; text-wrap: balance; }
.open__body { margin: 0.6em 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2.2vw, 24px); color: var(--cream-dim); }
.btn { margin-top: 2.4em; background: none; border: 1px solid var(--amber); color: var(--amber); font: 500 13px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; padding: 15px 26px; cursor: pointer; transition: background 0.3s, color 0.3s; }
.btn:hover { background: var(--amber); color: var(--void); }

/* ---------- step ---------- */
.screen--step { background: var(--bg); }
.step__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.kicker { font: 500 12px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-faint); }
.link { background: none; border: none; color: var(--cream-dim); font: 500 12px/1 var(--sans); letter-spacing: 0.1em; cursor: pointer; padding: 4px; transition: color 0.3s; }
.link:hover { color: var(--cream); }
.step__title { margin: 0.5em 0 1.1em; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.4vw, 54px); line-height: 1.1; color: #f6efe2; text-wrap: balance; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { display: flex; flex-direction: column; text-align: left; background: #221812; border: 1px solid var(--line); color: var(--cream); cursor: pointer; padding: 0; overflow: hidden; transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.card:hover { transform: translateY(-4px); border-color: var(--cream-faint); box-shadow: 0 18px 40px rgba(0,0,0,0.4); }
.card--on { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.card__img { display: block; width: 100%; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: #17100b; }
.card__body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.card__name { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; color: #f6efe2; }
.card__note { font: 400 13px/1.5 var(--sans); color: var(--cream-dim); }

/* ---------- end ---------- */
.screen--end { background: var(--bg); }
.end__in { text-align: center; max-width: 720px; margin: 0 auto; }
.end__title { margin: 0.4em 0 0.9em; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.12; color: #f6efe2; text-wrap: balance; }
.table { list-style: none; margin: 0 auto 1.6em; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; max-width: 460px; }
.row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.row__img { width: 56px; height: 40px; flex: none; background-size: cover; background-position: center; background-color: #17100b; }
.row__txt { display: flex; flex-direction: column; gap: 2px; }
.row__step { font: 500 10px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint); }
.row__name { font-family: var(--serif); font-size: 18px; color: #f6efe2; }
.end__body { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2vw, 22px); color: var(--cream-dim); }
.end__foot { margin-top: 2em; display: flex; align-items: center; justify-content: center; gap: 18px; }
.end__note { font: 500 11px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint); }

/* ---------- tray ---------- */
.tray { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 14px 26px; background: linear-gradient(to top, rgba(23,16,11,0.95), rgba(23,16,11,0)); }
.tray__count { font: 500 11px/1 var(--sans); letter-spacing: 0.18em; color: var(--cream-faint); flex: none; }
.tray__dots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 11px/1.4 var(--sans); letter-spacing: 0.06em; color: var(--cream-faint); }
.dot { color: var(--cream-faint); }
.dot--done { color: var(--cream-dim); }
.dot--cur { color: var(--amber); }
.sep { opacity: 0.4; }

/* ---------- responsive ---------- */
@media (max-width: 780px) {
  .cards { grid-template-columns: 1fr; gap: 12px; }
  .card { flex-direction: row; }
  .card__img { width: 40%; aspect-ratio: 4 / 3; flex: none; }
  .card__body { justify-content: center; }
  .screen__in { padding: 84px 0 110px; }
  .mark { font-size: 14px; }
}

/* ---------- embedded (case-page iframe): tighten so it fits, no scroll ---------- */
body.embedded .stage, body.embedded .screen { min-height: 0; }
body.embedded { overflow: hidden; height: 100dvh; }
body.embedded .screen { height: 100dvh; overflow: hidden; }
body.embedded .screen__in { padding: 70px 0 84px; }
body.embedded .topbar { padding: 12px 20px; }
body.embedded .tray { padding: 10px 20px; }