/* ---------------------------------------------------------------------- */
/* Page shell                                                              */
/* ---------------------------------------------------------------------- */

.page {
  min-height: 100vh;
}

/* Paints just the notch/status-bar strip orange. A fixed-position element
   reliably extends under the safe area in Safari (unlike relying on the
   browser's own — inconsistent — chrome-color-matching heuristics), so
   this is a small dedicated layer rather than trying to stretch the hero
   itself up into that region.

   env(safe-area-inset-top) measured 0px on an actual notched iPhone in
   Safari's bottom-URL-bar UI (confirmed via on-device debug output), even
   though the status bar visibly reserves space — so it can't be trusted
   here. Falls back to a fixed 60px, sized for Dynamic Island/notch
   phones. On older/non-notched phones this just repaints over the hero's
   own (identical) orange, so it's harmless there too. */
.notch-fill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(env(safe-area-inset-top, 0px), 60px);
  background: var(--color-brand-orange);
  z-index: 1;
}

@media (min-width: 640px) {
  /* The frame becomes a floating centered card here, so a full-width
     fixed strip at the true screen edge would sit outside it. */
  .notch-fill {
    display: none;
  }
}

.page__frame {
  max-width: var(--page-max-width);
  margin-inline: auto;
  background: var(--color-surface-0);
  min-height: 100vh;
  /* The Figma frame stacks every top-level block (hero, each link button,
     the portfolio card) in one auto-layout column with a 4px gap and no
     side padding — sections run edge-to-edge. */
  display: flex;
  flex-direction: column;
  gap: 4px;

  /* ---- Proportional scale ----
     The Figma frame is a fixed 375px-wide mockup. Every size below that
     came out of it (padding, gaps, font-sizes, icon dimensions) is
     expressed as `calc(<figma-px> * var(--px))`, where --px is 1/375th
     of this frame's own current width. That makes the whole card scale
     like a single image — proportions stay identical whether the frame
     renders at 320px or 460px — instead of individual font-sizes/gaps
     breaking their ratio to each other as the viewport changes.
     container-type must live here so descendants below can resolve cqw
     against *this* element's width, not the viewport's. */
  container-type: inline-size;
  --px: calc(100cqw / 375);
}

/* Beyond mobile width, let the frame read as a centered "card" rather than
   a stretched layout. This is a minimal holding pattern only — see the
   dedicated desktop layout plan for the real PC design. */
@media (min-width: 640px) {
  .page__frame {
    min-height: auto;
    margin-block: var(--space-8);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(255, 255, 255, 0.08);
  }

  /* The frame floats away from the real screen edge here, so it should
     never reserve room for a device notch it isn't actually touching. */
  .hero {
    padding-top: calc(126 * var(--px));
  }
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
  background: var(--color-brand-orange);
  color: var(--color-ink-900);
  /* Square top corners so orange runs flush to the screen's top edge on
     mobile (no rounded-corner sliver of the black page background) — the
     desktop "card" media query clips this back to rounded via the
     page__frame's own overflow:hidden. */
  border-radius: 0 0 calc(16 * var(--px)) calc(16 * var(--px));
  min-height: calc(400 * var(--px));
  box-sizing: border-box;
  /* Figma node 3:26: every child sits at left:12px; Subtitle top:126px;
     the tag row ends 12px above the frame's bottom edge. */
  padding: calc(126 * var(--px) + env(safe-area-inset-top, 0px)) calc(12 * var(--px)) calc(12 * var(--px));
}

.hero__tag {
  display: block;
  color: var(--color-ink-900);
  font-size: calc(12 * var(--px));
  font-weight: 400;
  line-height: calc(16 * var(--px));
  /* gap to the line stack below (Subtitle bottom → Frame136 top = 16px) */
  margin-bottom: calc(16 * var(--px));
}

/* The 5-line greeting (Figma node 13:4681, "Frame 136"): one flex column,
   6px gap between every line, every line 23.04px/27.648px regardless of
   weight — only individual spans go semibold. */
.hero__lines {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--px));
  /* Title block bottom → tag row top = 46px in Figma. */
  margin-bottom: calc(46 * var(--px));
}

.hero__line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--line-gap, 0) * var(--px));
  font-size: calc(23.04 * var(--px));
  line-height: calc(27.648 * var(--px));
}

.hero__line-text {
  font-weight: 400;
}

.hero__line-text--bold {
  font-weight: 600;
}

.hero__icon {
  display: block;
  flex: none;
}

.hero__icon--handWave {
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
}

.hero__icon--star {
  width: calc(36.864 * var(--px));
  height: calc(27.3873 * var(--px));
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--px));
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: calc(2 * var(--px)) calc(10 * var(--px));
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--color-pill-border);
  color: var(--color-pill-text);
  font-size: calc(10 * var(--px));
  font-weight: 400;
  line-height: calc(16 * var(--px));
  white-space: nowrap;
}

.tag-pill[data-active="true"] {
  background: var(--color-pill-active-bg);
  border-color: var(--color-pill-active-bg);
  color: var(--color-pill-active-text);
  font-weight: 400;
}

/* ---------------------------------------------------------------------- */
/* Link list                                                               */
/* ---------------------------------------------------------------------- */

.link-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.link-button {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--px));
  padding: calc(12 * var(--px));
  border-radius: calc(16 * var(--px));
  background: var(--color-surface-cream);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.link-button:hover {
  background: var(--color-surface-cream-hover);
}

.link-button:active {
  transform: scale(0.98);
}

/* Figma "Avatar-Icon": a 32×56 black capsule, not a 32×32 circle — glyph
   on top, a hairline divider, then a monogram letter underneath. */
.icon-chip {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--px));
  width: calc(32 * var(--px));
  height: calc(56 * var(--px));
  border-radius: var(--radius-pill);
  background: var(--color-chip-bg);
}

.icon-chip__glyph {
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
}

/* Hand-drawn (no Figma source), sits slightly bolder than the exported
   glyphs at the same box size — sized down 2px, ratio preserved. */
.icon-chip__glyph--kakao {
  width: calc(18 * var(--px));
  height: auto;
}

.icon-chip__divider {
  width: calc(20 * var(--px));
  height: 1px;
  background: var(--color-chip-icon);
}

.icon-chip__letter {
  font-size: calc(10 * var(--px));
  line-height: calc(16 * var(--px));
  color: var(--color-chip-icon);
}

.link-button__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--px));
}

.link-button__title {
  font-size: calc(16 * var(--px));
  line-height: calc(18 * var(--px));
  font-weight: 700;
  color: var(--color-ink-900);
}

.link-button__subtitle {
  font-size: calc(12 * var(--px));
  line-height: calc(16 * var(--px));
  color: var(--color-ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figma "CTA-Arrow" is a fully self-contained 32px badge (circle + arrow
   already drawn into the SVG) — just size the image, no extra chip CSS. */
.icon-chip--arrow {
  flex: none;
  display: block;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
}

/* ---------------------------------------------------------------------- */
/* Portfolio teaser                                                        */
/* ---------------------------------------------------------------------- */

.portfolio__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
  border-radius: calc(16 * var(--px));
  background: var(--color-surface-dark);
  padding: calc(12 * var(--px));
}

.portfolio__label {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: calc(4 * var(--px)) calc(10 * var(--px));
  border-radius: var(--radius-pill);
  background: var(--color-surface-cream);
  color: var(--color-ink-900);
  font-size: calc(10 * var(--px));
  font-weight: 400;
  line-height: calc(16 * var(--px));
}

.portfolio__slot {
  position: relative;
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  /* Matches the studio's exported case-study frames (1404 x 688). */
  aspect-ratio: 1404 / 688;
}

/* The next image is inserted behind the current one (see render.js) so
   only the outgoing image needs to animate — it fades out to reveal the
   already-fully-visible image underneath, instead of fading to empty and
   then popping the next one in. */
.portfolio__slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio__slot img.is-leaving {
  transition: opacity 0.6s ease;
  opacity: 0;
}

.portfolio__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__slot img.is-leaving {
    transition: none;
    opacity: 0;
  }
}

.portfolio__badges {
  position: absolute;
  /* Figma: bottom-[11px] right-[11px] inside the 12px-padded image slot,
     so 11 + 12 = 23px from the card's own edge. */
  right: calc(23 * var(--px));
  bottom: calc(23 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(6 * var(--px));
}

/* Self-contained 32px SVG exported from Figma (background + icon glyph
   already drawn in) — just size the image. */
.portfolio__external {
  display: block;
  width: calc(32 * var(--px));
  height: calc(32 * var(--px));
}