@font-face {
  font-family: "League Gothic";
  src: url("fonts/LeagueGothic-Variable.ttf") format("truetype");
  font-weight: 400;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("fonts/PretendardVariable-1.3.9.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cream: #f0e9e0;
  --cream-deep: #e6dccf;
  --taupe: #8e7b69;
  --taupe-soft: #a3978b;
  --brick: #7a3023;
  --brick-deep: #632519;
  --ink: #241b15;
  --nav-h: 36px;
  --gutter: 16px;
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --lower: "League Gothic", "Arial Narrow", sans-serif;
  --text: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --swing: cubic-bezier(.7, 0, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Mobile-first: no grey tap box over links and buttons, and no double-tap zoom wait on them.
   Each control gives its own feedback (a page turns, a folder rises, a file opens). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; -webkit-tap-highlight-color: transparent; }
a, button, summary, [role="tab"] { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, figure { margin: 0; }

.shell { position: relative; max-width: 430px; margin: 0 auto; }
.hero {
  position: relative;
  /* Follow Safari's visible viewport as its browser bars expand or collapse. */
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.masthead {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(48px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  font: 13px/1 var(--display);
  letter-spacing: .14em;
  color: var(--taupe);
}
.masthead .wordmark { display: flex; align-items: center; min-height: 44px; }
.masthead .wordmark img { width: 114px; height: auto; filter: brightness(0) invert(1); }
.masthead.on-dark, .masthead.on-dark .wordmark { color: #fff; }

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: min(100%, 430px);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--cream);
  border-top: 1px solid rgba(142, 123, 105, .28);
}
.bottom-nav > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--taupe);
  transition: color .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav > a > span { font: 15px/1 var(--display); letter-spacing: .1em; }
.bottom-nav > a.is-current { color: var(--brick); }
/* One bar marks the current page; pager.js sets --nav-at, and once ready the bar slides
   to the chosen item with the same timing as the page transition. */
.bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: 2px;
  background: var(--brick);
  transform: translateX(calc(var(--nav-at, 0) * 100%));
}
.bottom-nav.is-ready::before { transition: transform .65s cubic-bezier(.7, 0, .2, 1); }

.skip {
  position: fixed;
  z-index: 40;
  top: calc(6px + env(safe-area-inset-top));
  right: max(4px, calc(50% - 215px + 4px));
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.pre-intro .skip, :is(.pre-intro, .is-intro) .skip { opacity: 1; pointer-events: auto; }
/* lowercase word sitting on a long arrow that runs past it */
.skip-label {
  padding-left: 1px;
  font: 400 18px/1 var(--lower);
  letter-spacing: .12em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
/* the arrow is a faint track that fills in solid over the length of the intro */
.skip-arrow {
  width: 46px;
  height: 7px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.skip-arrow .track { opacity: .35; }
.skip-arrow .fill { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-intro .skip-arrow .fill { animation: skip-fill var(--intro-ms, 4s) linear forwards; }
@keyframes skip-fill { to { stroke-dashoffset: 0; } }

/* design.co.kr-style lettering: every stroke of a letter is its own masked copy of the
   letter, revealed by a wipe along the stroke (--p) or a sweep round a bowl (--a).
   Pieces are set up by drawText in shared.js. */
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
.ch { position: relative; display: inline-block; letter-spacing: 0; }
.ch .base { visibility: hidden; }
.ch .q {
  position: absolute; left: 0; top: 0;
  --p: 100%;
  --a: 360deg;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: --p var(--dur) cubic-bezier(.55, 0, .25, 1) var(--del), --a var(--dur) cubic-bezier(.45, 0, .3, 1) var(--del);
}
:is(.pre-intro, .is-intro) [data-draw]:not(.on) .q { --p: 0%; --a: 0deg; }

/* intro bookkeeping: chrome waits, then fades in */
.pre-intro .hero > * { visibility: hidden; }
:is(.pre-intro, .is-intro) .masthead { opacity: 0; }
.masthead { transition: opacity .6s ease; }
:is(.pre-intro, .is-intro) .bottom-nav { transform: translate(-50%, 100%); }
.bottom-nav { transition: transform .7s var(--ease) .15s; }

/* reveal helpers toggled from the intro timeline */
.rise { transition: opacity .8s var(--ease), transform .8s var(--ease); }
:is(.pre-intro, .is-intro) .rise:not(.on) { opacity: 0; transform: translateY(16px); }
.from-left, .from-right { display: inline-block; transition: opacity .9s var(--ease), transform .9s var(--ease); }
:is(.pre-intro, .is-intro) .from-left:not(.on) { opacity: 0; transform: translateX(-36px); }
:is(.pre-intro, .is-intro) .from-right:not(.on) { opacity: 0; transform: translateX(36px); }

/* deck (Woodwall) */
.deck { position: relative; }
.card {
  --d: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--cw) * (1 - .13 * var(--d)));
  height: calc(var(--ch) * (1 + .16 * var(--d)));
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: var(--cream-deep);
  transition: width .75s var(--swing), height .75s var(--swing), opacity .5s ease;
}
.card img, .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
  transform: scale(var(--z, 1));
  transform-origin: var(--pos, 50% 30%);
}

/* bands (Objects) */
.bands { position: absolute; inset: 0; z-index: 0; }
.band {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--i) * 100% / var(--n));
  height: calc(100% / var(--n) + .5px);
  overflow: hidden;
}
.band:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  height: 1px;
  background: rgba(255, 255, 255, .38);
}
.layer {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--i) * -100%);
  height: calc(var(--n) * 100%);
  visibility: hidden;
  will-change: transform;
}
.layer img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }

/* grid (Paddington) */
.tile { position: relative; overflow: hidden; background: var(--brick-deep); }
.tile img { position: absolute; inset: 0; transition: opacity .9s ease; }
.tile { transition: clip-path .55s var(--ease), opacity .4s ease; }
:is(.pre-intro, .is-intro) .tile:not(.on) { clip-path: inset(50% 50% 50% 50%); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

@media (min-width: 1000px) {
  body { background: #e4d9cc; }
  .shell { max-width: 390px; box-shadow: 0 30px 80px rgba(60, 40, 25, .16); }
  .bottom-nav { width: 390px; }
  .skip { right: calc(50% - 195px + 4px); }
}

/* Phones use the whole display; keep the framed preview on desktop. */
@media (max-width: 600px), (hover: none) and (pointer: coarse) {
  .shell { max-width: none; }
  .bottom-nav { width: 100%; }
  .skip { right: max(4px, env(safe-area-inset-right)); }
}

/* cluster (Paddington): tiles pop with no easing; the view jumps in hard cuts */
.cluster { position: absolute; inset: 0; overflow: hidden; }
.stage { position: absolute; left: 0; top: 0; display: grid; transform-origin: 0 0; }
.ctile { display: flex; gap: 2px; padding: 1px; }
.ctile > span { flex: 1; min-width: 0; overflow: hidden; }
.ctile img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 30%);
  transform: scale(var(--z, 1)); transform-origin: var(--pos, 50% 30%);
}
:is(.pre-intro, .is-intro) .ctile:not(.on) { visibility: hidden; }/* title text: rises out of a soft blur while the tracking settles */
.pop {
  transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter 1s var(--ease), letter-spacing 1.4s var(--ease);
}
:is(.pre-intro, .is-intro) .pop:not(.on) { opacity: 0; transform: translateY(14px); filter: blur(8px); }
:is(.pre-intro, .is-intro) .pop.track:not(.on) { letter-spacing: .36em; }