/* The landing page at / (FEATURES.md, "The landing page at /"): both
   languages, index.html and ko/index.html, share this and landing.js. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 500; font-display: swap; src: url(/about/fonts/newsreader.woff2) format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 500; font-display: swap; src: url(/about/fonts/newsreader-italic.woff2) format("woff2"); }
/* only the glyphs both pages use (scripts/landing-font.mjs): rerun it after changing the Korean copy */
@font-face { font-family: "Pretendard"; font-weight: 45 920; font-display: swap; src: url(/about/fonts/pretendard-landing.woff2) format("woff2-variations"); }
/* the serif headings in Korean: Nanum Myeongjo Regular, the weight of Newsreader 350, cut to their glyphs (scripts/korean-serif.py landing): rerun it after changing them */
@font-face { font-family: "Serif KR"; font-weight: 400; font-display: swap; src: url(/about/fonts/serif-ko-landing.woff2) format("woff2"); }

:root { --ink: #111114; --ink-2: #55555b; --ink-3: #8f8f95; --paper: #F4F1EC; --line: rgba(0,0,0,.08); --learn: #00A06A; --wrong: #D93B3B; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.serif { font-family: "Newsreader", Georgia, serif; font-weight: 350; letter-spacing: -0.025em; }
:lang(ko) body { word-break: keep-all; }
:lang(ko) .serif { font-family: "Serif KR", "Pretendard", system-ui, serif; font-weight: 400; letter-spacing: -0.03em; }
:lang(ko) .serif i { font-style: normal; }

nav { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 22px 32px; }
.mark { display: flex; gap: 9px; align-items: center; font-weight: 600; letter-spacing: -0.02em; }
.mark img { width: 26px; height: 26px; border-radius: 7px; }
.mark small { font-weight: 500; color: var(--ink-2); font-size: 14px; }
nav .r { display: flex; gap: 20px; align-items: center; font-size: 14px; }
.pill { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 20px; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; }
.pill.lg { height: 48px; padding: 0 24px; border-radius: 24px; font-size: 16px; }

/* the hero: a hazy Seoul evening, the headline, the phrases, the real app */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: max(170px, 22vh) 0 40px; }
.sky { position: absolute; inset: -40px; background: url(/about/photos/seoul-sunset.jpg) center 70%/cover; filter: blur(3px) saturate(.85); transform: scale(1.08); }
.sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(244,241,236,.92) 0%, rgba(244,241,236,.6) 30%, rgba(244,241,236,.05) 62%, rgba(244,241,236,0) 80%, rgba(244,241,236,.5) 92%, var(--paper) 100%); }
.grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero h1 { position: relative; margin: 0; text-align: center; font-size: clamp(46px, 6.6vw, 92px); line-height: 1.02; padding: 0 16px; }
.hero h1 i { font-style: italic; }
:lang(ko) .hero h1 { font-size: clamp(42px, 6vw, 80px); line-height: 1.12; }
:lang(ko) .hero h1 i { color: var(--ink-2); }

/* the headline's last word, retyped through a typo on a loop (landing.js):
   wrong in red with a drawn squiggle, then accepted in green, the app's colours */
.core { display: inline-block; text-align: left; white-space: nowrap; transition: color .6s; }
.core .w { padding-bottom: .1em; }
.core.bad { color: var(--wrong); transition: none; }
.core.bad .w { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath d='M0 3 Q3 0 6 3 T12 3' fill='none' stroke='%23D93B3B' stroke-opacity='.8' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100% / .16em .08em; }
.core.ok { color: var(--learn); transition: none; }
.core .caret { display: inline-block; position: relative; width: 0; }
.core .caret[hidden] { display: none; }
.core .caret::after { content: ""; position: absolute; left: .04em; bottom: -.1em; width: .055em; height: .9em; background: var(--learn); border-radius: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* real answers from the stories, drifting past as frosted glass */
.phr { position: relative; height: 128px; width: min(760px, 100%); margin: 40px 0 34px; }
.rows { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.rows .r { display: flex; gap: 12px; width: max-content; animation: drift 46s linear infinite; }
.rows .r:nth-child(2) { animation-direction: reverse; animation-duration: 54s; }
@keyframes drift { to { transform: translateX(-50%); } }
.bub { display: inline-block; white-space: nowrap; padding: 8px 14px; border-radius: 22px 22px 22px 7px; font-size: 17px; font-weight: 500; letter-spacing: -0.015em; background: rgba(255,255,255,.42); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 6px 22px rgba(90,50,10,.07); color: rgba(17,17,20,.88); }
.bub small { font-size: 12px; font-weight: 400; color: rgba(17,17,20,.45); margin-left: 8px; }
.copy { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.after { display: flex; flex-direction: column; align-items: center; padding: 34px 20px 10px; }
.after .go { margin-bottom: 20px; gap: 6px; }

/* the phone: an iPhone-shaped frame around a chat with Lena that plays by
   itself (landing.js), drawn here rather than embedded; tapping it opens the
   app. Designed at 393×820 and zoomed to fit narrow screens. */
.phone { position: relative; display: block; margin-top: 60px; width: 393px; height: 820px; border-radius: 62px; padding: 12px; background: linear-gradient(145deg, #2b2b2f, #0d0d0f 40%, #1c1c1f); box-shadow: 0 60px 120px -40px rgba(20,10,0,.55), 0 0 0 1px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,255,255,.12); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.phone:hover { transform: translateY(-4px); }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 51px; overflow: hidden; background: #fff; display: flex; flex-direction: column; color: #0B0B0D; }
.status { flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 40px; font: 600 16px/1 -apple-system, system-ui, sans-serif; letter-spacing: -0.02em; }
.island { position: absolute; top: 11px; left: 50%; width: 120px; height: 35px; margin-left: -60px; background: #000; border-radius: 20px; }
.status svg { display: block; }

.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 15.5px; line-height: 1.35; letter-spacing: -0.015em; transition: opacity .6s; }
.chat.fade { opacity: 0; }
.chat .head { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 18px 12px; border-bottom: 1px solid #EFEFF2; }
.chat .back { color: #0B0B0D; margin-right: 4px; }
.chat .head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.chat .head b { display: block; font-size: 16px; font-weight: 600; }
.chat .head b span { font-size: 13px; }
.chat .head small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #6B6B70; }
.chat .head small i { width: 7px; height: 7px; border-radius: 50%; background: var(--learn); }

/* the thread fills from the bottom; each row unfolds (grid rows 0fr → 1fr)
   so the ones above glide up instead of jumping */
.feed { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 10px; -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
.feed .day { align-self: center; margin: 10px 0 8px; font-size: 11.5px; font-weight: 500; color: #A3A3A8; }
.row, .fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.row > div, .fold > div { min-height: 0; overflow: hidden; }
.row.on, html:not(.js) .row:not(.typing) { grid-template-rows: 1fr; }
/* spacing lives on the bubbles, not the row, so a folded row is truly 0 tall */
.row > div { display: flex; }
.row > div > * { margin-top: 3px; }
.row.first > div > * { margin-top: 10px; }
.row p { position: relative; margin: 0; max-width: 78%; padding: 9px 14px; border-radius: 20px; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.row.in > div { justify-content: flex-start; }
.row.in p { background: #EDEDF0; transform-origin: 0 100%; }
.row.in:not(.first) p, .row.pic + .row p { border-top-left-radius: 6px; }
.row.in:not(.last) p { border-bottom-left-radius: 6px; }
.row .tl { display: block; margin-top: 2px; font-size: 12px; color: #8A8A90; }
.row.pic img { display: block; width: 176px; height: 220px; object-fit: cover; border-radius: 6px 20px 20px 6px; opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 0 100%; transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.row.out > div { justify-content: flex-end; }
.row.out p { margin: 12px 0 18px; }
.row.out p { background: #0B0B0D; color: #fff; transform-origin: 100% 100%; }
.row.out .chunk { color: #5BE3A8; }
.row .react { position: absolute; left: -12px; bottom: -14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); font-size: 15px; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.row .react.on { transform: none; }
.row.typing p { display: flex; gap: 4px; padding: 13px 14px; background: #EDEDF0; }
.row.typing i { width: 7px; height: 7px; border-radius: 50%; background: #A3A3A8; animation: dot 1.2s infinite; }
.row.typing i:nth-child(2) { animation-delay: .15s; }
.row.typing i:nth-child(3) { animation-delay: .3s; }
.row.on p, .row.on.pic img { opacity: 1; transform: none; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* the bottom: a quiet field while she types, then what to say in Korean,
   then the sentence with its blank and the keyboard */
.dock { flex: none; background: #F7F7F9; border-top: 1px solid #EFEFF2; }
.chat[data-scene=wait] .idle, .chat[data-scene=sent] .idle, .chat[data-scene=pick] .intents,
.chat[data-scene=type] .compose, .chat[data-scene=type] .kbd, .chat.nudged .nudge, html:not(.js) .chat .idle { grid-template-rows: 1fr; }
.dock .field { display: flex; align-items: center; justify-content: space-between; margin: 10px 14px 30px; height: 40px; padding: 0 5px 0 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px #E6E6EA; color: #A3A3A8; }
.send { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #D4D4D9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 12V2M2.5 6.5 7 2l4.5 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; transition: background-color .3s, transform .2s; }
.intents .pad { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 30px; }
.intents .ask { font-size: 12.5px; font-weight: 500; color: #6B6B70; padding-left: 4px; }
.chip { display: block; padding: 11px 15px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #E6E6EA, 0 1px 2px rgba(0,0,0,.04); font-size: 15px; font-weight: 500; transition: background .25s, color .25s, transform .2s; }
.chip small { display: block; font-size: 12px; font-weight: 400; color: #8A8A90; }
.chip.tap { background: #0B0B0D; color: #fff; transform: scale(.98); }
.chip.tap small { color: rgba(255,255,255,.6); }
.nudge p { margin: 10px 14px 0; padding: 9px 13px; border-radius: 14px; background: #FDECF2; color: #C0396B; font-size: 13px; }
.compose .card { position: relative; margin: 10px 14px; padding: 12px 52px 13px 15px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px #E6E6EA, 0 1px 2px rgba(0,0,0,.04); }
.compose .ko { font-size: 12.5px; color: #6B6B70; }
.compose .ko b { color: var(--learn); font-weight: 600; }
.compose .en { margin-top: 3px; font-size: 18px; font-weight: 500; }
.blank { display: inline-block; min-width: 92px; padding: 0 3px; border-bottom: 2px solid #D4D4D9; transition: color .25s, border-color .25s, background-color .25s; border-radius: 4px 4px 0 0; }
.blank .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: var(--learn); border-radius: 1px; animation: blink 1s steps(1) infinite; }
.blank.bad { color: var(--wrong); border-color: var(--wrong); }
.blank.ok { color: var(--learn); border-color: var(--learn); background: #E6F6EF; }
.blank.ok .caret { display: none; }
.compose .send { position: absolute; right: 10px; bottom: 10px; }
.chat.ready .compose .send { background-color: #0B0B0D; }
.chat.pressed .compose .send { transform: scale(.88); }

.keys { padding: 6px 3px 26px; background: #D5D7DD; display: flex; flex-direction: column; gap: 10px; }
.keys .kr { display: flex; justify-content: center; gap: 6px; padding: 0 3px; }
.keys span { flex: 1; max-width: 32px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.28); font: 400 19px/1 -apple-system, system-ui, sans-serif; transition: background .12s, transform .12s; }
.keys span.wide { max-width: 44px; flex: 1.4; background: #ABB0BA; font-size: 15px; }
.keys span.space { max-width: none; flex: 5; font-size: 15px; }
.keys span.down { background: #B9BCC4; transform: translateY(1px); }
.keys span.wide.down { background: #fff; }
.after .caption { margin: 0 0 16px; font: italic 19px/1.4 "Newsreader", serif; color: var(--ink-2); text-align: center; }
:lang(ko) .after .caption { font: 500 17px/1.5 "Pretendard", system-ui, sans-serif; }

/* a few friends, each in a place; hover or tap the photo and it's them */
.places { max-width: 1180px; margin: 0 auto; padding: 130px 28px 30px; }
.places > h2, .truth h2, .quiet h2 { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.05; margin: 0 0 14px; }
.places > h2 { max-width: 14em; }
.places > h2 i, .truth h2 i, .quiet h2 i { color: var(--ink-2); }
:lang(ko) .places > h2, :lang(ko) .truth h2, :lang(ko) .quiet h2 { font-size: clamp(32px, 3.8vw, 50px); line-height: 1.2; }
.places > p { color: var(--ink-2); font-size: 18px; margin: 0 0 56px; max-width: 32em; }
.place { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 560px; border-radius: 28px; overflow: hidden; margin-bottom: 24px; color: #fff; }
.place:nth-child(even) { direction: rtl; }
.place:nth-child(even) > * { direction: ltr; }
.place .shot { position: relative; overflow: hidden; cursor: pointer; }
.place .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.place .shot img.face { opacity: 0; transform: scale(1.04); }
.place .shot:hover img.face, .place.flip .shot img.face { opacity: 1; transform: none; }
.place .shot .who-tag { position: absolute; left: 18px; bottom: 18px; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; opacity: 0; transition: opacity .4s; }
.place .shot:hover .who-tag, .place.flip .shot .who-tag { opacity: 1; }
.place .side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 36px; }
.place .side::before { content: ""; position: absolute; inset: -60px; background: var(--bg) center/cover; filter: blur(40px) saturate(1.2) brightness(.66); transform: scale(1.2); }
.place .side > * { position: relative; }
.place .where { font-size: 13px; letter-spacing: .02em; opacity: .85; }
.place h3 { margin: 6px 0 0; font: 350 54px/1 "Newsreader", serif; letter-spacing: -0.03em; }
.place h3 i { font-style: italic; opacity: .8; }
.place .bio { margin: 10px 0 0; font-size: 15px; opacity: .85; max-width: 22em; }
.stack { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.stack .b { background: rgba(255,255,255,.94); color: #111; padding: 9px 14px; border-radius: 20px 20px 20px 6px; font-size: 16px; max-width: 88%; transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); }
.stack .b:nth-child(2) { transition-delay: .5s; }
.stack .b .tl { display: block; font-size: 12px; color: #8a8a90; margin-top: 2px; }
.js .place:not(.seen) .b { opacity: 0; transform: translateY(10px); }

.more { display: flex; align-items: center; gap: 28px; justify-content: space-between; flex-wrap: wrap; padding: 34px 36px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.more .faces { display: flex; }
.more .faces img, .more .faces span { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; margin-left: -12px; }
.more .faces img { object-fit: cover; }
.more .faces img:first-child { margin-left: 0; }
.more .faces span { background: var(--paper); display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.more p { margin: 0; font-size: 18px; color: var(--ink-2); flex: 1; min-width: 16em; }
.more p b { color: var(--ink); font-weight: 600; }

.truth { max-width: 1180px; margin: 0 auto; padding: 110px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.truth h2 { margin: 0; }
.qa { display: grid; gap: 26px; }
.qa div { border-top: 1px solid var(--line); padding-top: 18px; }
.qa b { display: block; font-size: 17px; margin-bottom: 6px; font-weight: 600; }
.qa p { margin: 0; color: var(--ink-2); font-size: 16.5px; }

.quiet { max-width: 760px; margin: 0 auto; padding: 60px 28px 120px; text-align: center; }
.quiet h2 { margin: 0 0 22px; }
.quiet p { color: var(--ink-2); font-size: 18px; margin: 0 auto 30px; max-width: 30em; }
footer { max-width: 1180px; margin: 0 auto; padding: 26px 28px 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); }

/* The staged hero (html.staged, set in the head unless motion is reduced; landing.js
   moves it). The hero is pinned for most of a screen: the headline, the phrases
   and a notification from Lena. A little scroll (or a tap) opens the notification
   into the phone on its own clock, and the chat then plays by itself, whatever
   the scroll does. Wide screens
   (.wide) dim the photo and number the three steps either side of the phone;
   narrow ones put them in one line above it. Without it the hero is the
   headline, the phrases and the finished chat. */
.note, .steps { display: none; }
.staged .track { position: relative; height: 180vh; }
.staged .hero { position: sticky; top: 0; height: 100vh; height: 100dvh; padding: 0; justify-content: center; overflow: clip; } /* clip: hidden can still be scrolled, and focusing the phone did */
.staged .sky { background-position: center 30%; }
.staged .sky::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #1a120c; opacity: calc(var(--e, 0) * .45); }
.staged .copy { padding-bottom: 120px; transform-origin: 50% 50%; will-change: transform, opacity; }
.staged .hero > .phone { position: absolute; left: 0; top: 0; margin: 0; transform-origin: 0 0; z-index: 2; visibility: hidden; will-change: transform, clip-path; }
.staged .hero > .phone:hover { transform: none; }

.staged .note { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 13px 16px 13px 13px; border: 0; border-radius: 24px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 18px 50px -18px rgba(60,30,0,.35), inset 0 0 0 1px rgba(255,255,255,.5); cursor: pointer; text-align: left; font: 15px/1.3 "Pretendard", system-ui, sans-serif; color: #111; opacity: 0; transform: translateY(-14px) scale(.98); }
.staged .note.arrive { opacity: 1; transform: none; transition: opacity .5s, transform .7s cubic-bezier(.2,1.4,.4,1); }
.note .ic { position: relative; flex: none; width: 44px; height: 44px; }
.note .ic img:first-child { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.note .ic img:last-child { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 6px; box-shadow: 0 0 0 2px #fff; }
.note .tx { flex: 1; min-width: 0; }
.note .top { display: flex; justify-content: space-between; gap: 8px; }
.note b { font-weight: 600; }
.note time { font-size: 13px; color: rgba(17,17,20,.5); }
.note .msg { display: block; color: rgba(17,17,20,.85); }

/* the steps, each with a bar that fills while it plays (--f) */
.staged .steps { display: flex; position: absolute; z-index: 3; left: 12px; right: 12px; top: var(--top, 20px); margin: 0; padding: 0; list-style: none; pointer-events: none; justify-content: center; flex-wrap: wrap; gap: 0 .32em; font: 350 27px/1.15 "Newsreader", serif; letter-spacing: -0.02em; white-space: nowrap; }
.steps em, .steps small { display: none; }
.steps b { font-weight: inherit; padding-bottom: 6px; color: rgba(17,17,20,.22); transition: color .35s; background: linear-gradient(var(--learn), var(--learn)) 0 100% / calc(var(--f, 0) * 100%) 2px no-repeat, linear-gradient(rgba(17,17,20,.12), rgba(17,17,20,.12)) 0 100% / 100% 2px no-repeat; }
.steps b::after { content: "."; }
.steps i { font-style: italic; transition: color .35s; }
.steps .done b { color: rgba(17,17,20,.45); }
.steps .on b { color: var(--ink); }
.steps .on i { color: var(--learn); }
.staged:lang(ko) .steps { font: 600 17px/1.4 "Pretendard", system-ui, sans-serif; letter-spacing: 0; }
:lang(ko) .steps i { font-style: normal; }
.staged .wide .steps { display: block; inset: 0; }
.wide .steps li { position: absolute; width: 260px; color: #fff; opacity: .4; transform: translateY(-50%); transition: opacity .5s; }
.wide .steps li.on { opacity: 1; }
.wide .steps li.l { text-align: right; }
.wide .steps b, .wide .steps .on b, .wide .steps .done b { display: inline-block; color: #fff; font-size: 34px; line-height: 1.1; text-shadow: 0 2px 18px rgba(0,0,0,.35); background: linear-gradient(#fff, #fff) 0 100% / calc(var(--f, 0) * 100%) 2px no-repeat, linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)) 0 100% / 100% 2px no-repeat; }
:lang(ko) .wide .steps b { font: 600 28px/1.2 "Pretendard", system-ui, sans-serif; letter-spacing: -0.01em; }
.wide .steps b::after { content: none; }
.wide .steps .on i { color: #fff; }
.wide .steps small { display: block; margin-top: 8px; font: 15px/1.4 "Pretendard", system-ui, sans-serif; opacity: .85; white-space: normal; letter-spacing: 0; }
.wide .steps em { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; margin-bottom: 10px; font: normal 600 13px/1 "Pretendard", system-ui, sans-serif; letter-spacing: 0; background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wide .steps li.l em { margin-left: auto; }
.wide .steps li.on em { background: #fff; color: #111; }

@media (max-width: 860px) {
  .place { grid-template-columns: 1fr; height: auto; }
  .place .shot { height: 440px; }
  .place .side { min-height: 330px; gap: 30px; }
  .place:nth-child(even) { direction: ltr; }
  .truth { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 520px) {
  nav { padding: 16px 18px; }
  .mark small { display: none; }
  .hero { padding-top: 132px; }
  .phr { height: 120px; margin: 30px 0 26px; }
  .place .side { padding: 28px; }
  .place h3 { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .rows .r { animation: none; }
  .phone:hover { transform: none; }
}