/* cristinedit */

@font-face {
  font-family: "Atkinson";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/ahn-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(fonts/ahn-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* the room with the lamp on: dark drape, lit field */
  --night: #13282B;
  --night-2: #1B3438;
  --field: #EDF1EF;
  --ink: #13282B;
  --ink-2: #4A6164;
  --ivory: #F1F3EE;
  --mist: #9DB0AF;
  --rule: #CBD6D3;
  --rule-dark: rgb(241 243 238 / 0.14);

  /* the three lights */
  --care: #6E8BFF;
  --code: #3ECF8E;
  --commerce: #FF6A50;

  --font: "Atkinson", "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  --step-0: clamp(1.0625rem, 1rem + 0.22vw, 1.1875rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --step-3: clamp(2rem, 1.3rem + 2.8vw, 3.6rem);
  --step-4: clamp(1.7rem, 1.1rem + 2.5vw, 3.3rem);
  --step-5: clamp(2.6rem, 1.15rem + 5.4vw, 6.3rem);

  --gutter: clamp(20px, 5vw, 64px);
  --sheet: clamp(20px, 3vw, 36px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  font-optical-sizing: auto;
}

h1, h2, h3, p, dl, dd, ol { margin: 0; padding: 0; }
ol { list-style: none; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p, dd { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--code); color: var(--night); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

/* language: English by default, Korean only when switched at the foot of the page */
html[data-lang="en"] [lang="ko"]:not(html):not(.lang-switch),
html[data-lang="ko"] [lang="en"]:not(html):not(.lang-switch) { display: none !important; }
html[data-lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }

.nw { white-space: nowrap; }
.frame { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ivory); color: var(--night); padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* the lit field behind the whole page */
#field {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100lvh; display: block;
}
html.no-webgl #field { display: none; }
html.no-webgl body { background: var(--night) url(poster.jpg) no-repeat 50% 50% / cover fixed; }
@media (max-width: 720px) { html.no-webgl body { background-position: 80% 20%; } }

main { position: relative; z-index: 1; }

/* masthead */
.masthead {
  position: absolute; z-index: 3; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 3vw, 32px) var(--gutter);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 650; font-size: 1.125rem; letter-spacing: -0.01em;
}
.wordmark .mark { width: 30px; height: 30px; }
.wordmark .mark g { isolation: isolate; }
.wordmark .mark circle { mix-blend-mode: screen; }
.nav { display: flex; gap: clamp(18px, 2.4vw, 32px); font-size: 0.9375rem; }
.nav a { text-decoration: none; color: var(--mist); transition: color .2s ease; }
.nav a:hover { color: var(--ivory); }

/* hero */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  padding-block: 128px clamp(56px, 10vh, 112px);
}
.hero-copy { position: relative; }
.hero h1 {
  font-size: var(--step-5); font-weight: 300; line-height: 1.0; letter-spacing: -0.032em;
  max-width: 12.5ch;
}
html[data-lang="ko"] .hero h1 { font-weight: 500; letter-spacing: -0.04em; line-height: 1.12; max-width: 11ch; font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.4rem); }
.lede { margin-top: clamp(22px, 2.6vw, 34px); max-width: 29em; color: var(--mist); font-size: var(--step-1); line-height: 1.5; }
.actions { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  border-radius: 999px; background: var(--ivory); color: var(--night);
  font-weight: 650; text-decoration: none; transition: background-color .2s ease;
}
.button:hover { background: #fff; }
.quiet-link { color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; text-decoration-color: rgb(241 243 238 / .4); transition: text-decoration-color .2s ease; }
.quiet-link:hover { text-decoration-color: currentColor; }

/* one orchestrated moment: the lamp comes on, the words come up with it */
@media (prefers-reduced-motion: no-preference) {
  .js .masthead, .js .hero-copy > * { opacity: 0; transform: translateY(12px); transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); }
  .js .masthead { transform: none; }
  .js.lit .masthead, .js.lit .hero-copy > * { opacity: 1; transform: none; }
  .js.lit .hero-copy > :nth-child(1) { transition-delay: .45s; }
  .js.lit .hero-copy > :nth-child(2) { transition-delay: .75s; }
  .js.lit .hero-copy > :nth-child(3) { transition-delay: 1.0s; }
  .js.lit .masthead { transition-delay: 1.2s; }
}

/* a fixed shade on the reading side of the scene */
.veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(19 40 43 / 0.84) 0%, rgb(19 40 43 / 0.55) 36%, rgb(19 40 43 / 0) 60%);
}

.panel { position: relative; }

/* approach: the lamp */
.statement-section { min-height: 130svh; display: grid; align-items: center; padding-block: 20svh; }
.statement {
  font-size: var(--step-4); font-weight: 330; line-height: 1.22; letter-spacing: -0.018em;
  max-width: 22ch;
}
html[data-lang="ko"] .statement { font-weight: 450; line-height: 1.45; letter-spacing: -0.03em; max-width: 19ch; }
.statement .w { color: color-mix(in oklab, var(--ivory) 24%, var(--night)); transition: color .6s ease; }
.statement .w.on { color: var(--ivory); }
.bottleneck { margin-top: clamp(28px, 4vw, 48px); max-width: 30em; color: var(--mist); font-size: var(--step-1); line-height: 1.5; }

/* the three practices: the sphere takes each colour in turn */
.chapter { position: relative; min-height: 190svh; padding-block: 18svh 22svh; display: grid; }
.chapter.commerce { --c: var(--commerce); --step: 1; }
.chapter.code { --c: var(--code); --step: 2; }
.chapter.care { --c: var(--care); --step: 3; }
.chapter-copy {
  position: sticky; top: max(12svh, calc(50svh - 18rem));
  max-width: 35rem;
}
.kicker { display: flex; align-items: center; gap: 14px; color: var(--c); font-weight: 650; font-size: 1rem; letter-spacing: 0.01em; }
.trio { display: inline-flex; gap: 6px; }
.trio i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgb(241 243 238 / 0.35); }
.commerce .trio i:nth-child(1), .code .trio i:nth-child(2), .care .trio i:nth-child(3) {
  background: var(--c); border-color: var(--c); box-shadow: 0 0 12px var(--c);
}
.chapter h2 {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: var(--step-3); font-weight: 300; line-height: 1.04; letter-spacing: -0.028em;
  max-width: 15ch;
}
html[data-lang="ko"] .chapter h2 { font-weight: 500; line-height: 1.22; letter-spacing: -0.04em; max-width: 9.5em; }
.chapter .body { margin-top: clamp(20px, 2.6vw, 30px); color: #C3D0CE; max-width: 33em; }
.chapter .status {
  margin-top: clamp(22px, 3vw, 34px); display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; font-weight: 650; color: var(--ivory);
}
.chapter .status::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--c); }

/* vision */
.vision { min-height: 150svh; display: grid; align-items: center; padding-block: 22svh; }
.vision h2 { font-size: var(--step-5); font-weight: 300; line-height: 1.0; letter-spacing: -0.034em; max-width: 9.5ch; }
html[data-lang="ko"] .vision h2 { font-weight: 500; line-height: 1.14; letter-spacing: -0.045em; font-size: clamp(2.3rem, 1.1rem + 4.4vw, 5.2rem); max-width: 9ch; }
.vision p { margin-top: clamp(24px, 3vw, 36px); color: var(--mist); font-size: var(--step-1); line-height: 1.5; max-width: 28em; }

/* founder */
.founder { min-height: 130svh; display: grid; align-items: center; padding-block: 18svh; }
.founder h2 { font-size: var(--step-3); font-weight: 300; line-height: 1.04; letter-spacing: -0.028em; }
html[data-lang="ko"] .founder h2 { font-weight: 500; letter-spacing: -0.04em; line-height: 1.2; }
.founder-lede { margin-top: 18px; color: var(--mist); font-size: var(--step-1); line-height: 1.5; max-width: 26em; }
.identity { margin-top: clamp(32px, 4vw, 52px); display: grid; gap: clamp(22px, 3vw, 32px); max-width: 36rem; }
.identity > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 20px; align-items: baseline; }
.identity .hcp { --c: var(--care); }
.identity .ai { --c: var(--code); }
.identity dt { font-weight: 650; display: flex; align-items: center; gap: 10px; color: var(--ivory); }
.identity dt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.identity dd { color: #C3D0CE; }

/* closing: the lamp again, seen from above */
.closing {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: clamp(120px, 18vh, 200px);
}
.closing-copy { position: relative; align-self: end; padding-bottom: clamp(56px, 9vh, 104px); }
.closing h2 { font-size: var(--step-5); font-weight: 300; line-height: 1.0; letter-spacing: -0.034em; max-width: 9ch; }
html[data-lang="ko"] .closing h2 { font-weight: 500; letter-spacing: -0.045em; line-height: 1.12; }
.closing-copy p { margin-top: 22px; color: var(--mist); max-width: 26em; }
.mail {
  display: inline-block; margin-top: clamp(28px, 4vw, 48px);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ivory); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  text-decoration-color: rgb(241 243 238 / .35); transition: text-decoration-color .2s ease;
}
.mail:hover { text-decoration-color: currentColor; }

.footer {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px;
  padding-block: 22px clamp(22px, 4vh, 36px);
  border-top: 1px solid var(--rule-dark);
  font-size: 0.875rem; color: var(--mist);
}
.footer .name-note { flex: 1 1 auto; }
.lang-switch {
  font: inherit; font-size: 0.75rem; color: var(--mist); opacity: .75;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgb(157 176 175 / .4);
}
.lang-switch:hover { opacity: 1; color: var(--ivory); }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }

/* phones: the scene sits in the top of the screen, words come up over a soft glass panel */
@media (max-width: 720px) {
  .nav a:not(:last-child) { display: none; }
  .veil { background: linear-gradient(0deg, rgb(19 40 43 / 0.92) 0%, rgb(19 40 43 / 0.7) 42%, rgb(19 40 43 / 0) 62%); }
  .statement-section, .vision, .founder { min-height: 0; display: block; padding-block: 70svh 12svh; }
  .chapter { min-height: 0; padding-block: 72svh 10svh; }
  .chapter-copy { position: relative; top: auto; }
  .statement-section .panel, .chapter .panel, .vision .panel, .founder .panel {
    margin-inline: -14px; padding: 24px 22px 26px; border-radius: 22px;
    background: rgb(19 40 43 / 0.62);
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  }
  .identity > div { grid-template-columns: 1fr; gap: 6px; }
  .footer { flex-direction: column; gap: 6px; }
}