/*
Purpose    The hub: two doors as giant thin words low on a paper stage, a taper rule between them, the wordmark at the top and as texture.
Boundary   Colours, type, weights, gaps and motion are design tokens (--nk-*). Lengths left are layout: 8vw margins, vw clamps, icon 16, rule 2.
Invariant  Under default-src 'self': no inline style or script, no data URI, no remote font. One 2px rule at a time, one star on screen.
Note       Gaze order: 1 the doors (the one job: pick a door), 2 the eyebrow with the page name, 3 the foot line.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The release files name the face "Pretendard Variable"; the token stack names "Pretendard". */
body {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Pretendard Variable", var(--nk-text-body-family);
  font-size: var(--nk-text-body-size);
  font-weight: var(--nk-text-body-weight);
  line-height: var(--nk-text-body-leading);
  color: var(--nk-fg-default);
  background: var(--nk-bg-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

.head,
.main,
.foot {
  position: relative;
  z-index: 1;
  padding-inline: 8vw;
}

.head {
  padding-top: var(--nk-gap-block);
}

/* The wordmark at its screen minimum. The test holds this width to the design token. */
.logo {
  display: block;
  width: 160px;
  height: auto;
}

.logo .word {
  fill: var(--nk-fg-default);
}

.logo .star {
  fill: var(--nk-border-soft);
}

/* Girlish: the logo star twinkles once on arrival, by opacity only. */
.head .logo .star {
  animation: twinkle var(--nk-motion-scene-reveal-duration) var(--nk-motion-scene-reveal-ease) 1 both;
}

@keyframes twinkle {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* A stage label: the Latin word in the label weight, the Korean word in the light body weight. */
.title {
  margin-bottom: var(--nk-gap-cell);
  font-size: var(--nk-text-label-size);
  font-weight: var(--nk-text-body-weight);
  letter-spacing: var(--nk-text-label-tracking);
  line-height: var(--nk-text-label-leading);
  color: var(--nk-fg-muted);
}

.title [lang="en"] {
  font-weight: var(--nk-text-label-weight);
}

.doors {
  display: flex;
  flex-direction: column;
}

.door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: var(--nk-gap-row) var(--nk-gap-block);
  padding-block: var(--nk-gap-row);
  outline: none;
}

.door:focus-visible {
  outline: 2px solid var(--nk-action-focus-ring);
  outline-offset: 4px;
}

@supports not selector(:focus-visible) {
  .door:focus {
    outline: 2px solid var(--nk-action-focus-ring);
    outline-offset: 4px;
  }
}

/* The stage weight of a Korean display word is extralight; the stage section role carries it. The test holds that. */
.door-name {
  position: relative;
  grid-row: span 2;
  padding-bottom: var(--nk-gap-inline);
  font-size: min(var(--nk-text-display-size), 10vw);
  font-weight: var(--nk-text-section-weight);
  letter-spacing: var(--nk-text-display-tracking);
  line-height: var(--nk-text-display-leading);
  white-space: nowrap;
}

/* Woman Power: the one 2px rule, under the door being pointed at. */
.door-name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--nk-border-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nk-motion-wipe-duration) var(--nk-motion-wipe-ease);
}

.door:hover .door-name::after,
.door:focus-visible .door-name::after {
  transform: scaleX(1);
}

/* With the mouse on one door and the keyboard on the other, only the hovered one keeps its rule. */
.doors:has(.door:hover) .door:not(:hover) .door-name::after {
  transform: scaleX(0);
}

.door-note {
  justify-self: end;
  color: var(--nk-fg-muted);
  text-align: right;
  text-wrap: balance;
}

.door-go {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: var(--nk-gap-row);
  font-size: var(--nk-text-meta-size);
  font-weight: var(--nk-text-meta-weight);
  letter-spacing: var(--nk-text-meta-tracking);
}

.door-go svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--nk-motion-tap-duration) var(--nk-motion-tap-ease);
}

.door:hover .door-go svg,
.door:focus-visible .door-go svg {
  transform: translateX(4px);
}

/* Feminine: a taper rule between the doors, one pixel at the start and nothing at the end. */
.taper {
  display: block;
  height: 1px;
  margin-block: var(--nk-gap-row);
  background: var(--nk-border-soft);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Kitsch: the wordmark 130 to 200 percent of the page, cut at the lower right. The star and its tail start at 58
   percent of the mark's width, so at least 42 percent of it sits past the right edge: one star on screen.
   The layer clips it to the page, so the part outside never widens or lengthens the document. */
.mark-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.mark {
  position: absolute;
  right: -56vw;
  bottom: -4vw;
  width: 130vw;
  height: auto;
}

.mark .word,
.mark .star {
  fill: var(--nk-bg-hover);
}

.foot {
  padding-block: var(--nk-gap-block);
  font-size: var(--nk-text-meta-size);
  letter-spacing: var(--nk-text-meta-tracking);
  color: var(--nk-fg-muted);
  text-align: right;
}

[data-media="phone"] .head {
  padding-top: var(--nk-gap-section);
}

[data-media="phone"] .title {
  margin-bottom: var(--nk-gap-section);
}

[data-media="phone"] .door {
  grid-template-columns: minmax(0, 1fr);
}

[data-media="phone"] .door-name {
  grid-row: auto;
  justify-self: start;
  font-size: min(var(--nk-text-display-size), 13vw);
}

[data-media="phone"] .door-note {
  justify-self: start;
  text-align: left;
}

[data-media="phone"] .mark {
  right: -86vw;
  bottom: 6vw;
  width: 200vw;
}

[data-media="phone"] .foot {
  padding-block: var(--nk-gap-section);
}

@media (prefers-reduced-motion: reduce) {
  .head .logo .star {
    animation: none;
  }

  .door-name::after,
  .door-go svg {
    transition: none;
  }
}