/* ==========================================================================
   layout.css — Page-specific layout for the "FOR DEV :D" portfolio page
   Depends on base.css tokens. Responsive: left rail collapses into a
   hamburger menu on mobile; the main content stays a single column.
   ========================================================================== */

/* ---- Shell -------------------------------------------------------------- */
/* Guard against accidental horizontal overflow from rotated/absolute bits. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

.page {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  /* NOTE: no `overflow` here — `overflow: clip` would make it a containing
     block for the fixed `.edge-nav`, breaking its stickiness. Horizontal
     overflow is already guarded on html/body above. */
}

/* Rectangle 131 — the translucent "glass" panel forming the divide between the
   left sidebar and the right content. Figma: left 380 ≈ the seam, extends to the
   right edge. Glassmorphism built from: a light translucent fill, backdrop blur
   (where supported), a bright white edge + inner highlight, a soft drop shadow,
   and a `::before` sheen gradient that's strongest at the left seam (over the
   star) and fades right. Text sits above it; the star sits below. */
.glass {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 2;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 32px rgba(2, 6, 23, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 1px 0 1px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(5px);
  pointer-events: none;
}

/* Sheen — brightest at the left seam (over the star), fading to the right. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.05) 60%,
    transparent 100%
  );
  opacity: 0.8;
  pointer-events: none;
}

/* ==========================================================================
   Sidebar (left rail)
   ========================================================================== */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 48px;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* CMYK star logo — single exported image from Figma (Component 2).
   Positioned to straddle the sidebar/content seam so its right portion sits
   under the glass band, matching the design. Sits below the glass (z:2). */
.logo {
  position: relative;
  z-index: 1;
  width: 133px;
  height: 126px;
  margin-top: 28px;
  /* push right so the star's right portion crosses the seam (sidebar right
     edge) and sits under the glass panel, matching the design */
  margin-left: clamp(150px, 22vw, 295px);
}

.logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* slow, continuous 360° spin */
  animation: logo-spin 18s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes logo-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect users who prefer reduced motion — no spinning. */
@media (prefers-reduced-motion: reduce) {
  .logo img {
    animation: none;
  }
}

/* Name block, anchored toward the lower portion of the rail (first viewport) */
.identity {
  margin-top: auto;
  margin-bottom: 14vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 275px;
  color: var(--color-ink);
}

.identity__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-header-medium);
  line-height: 40px;
  margin: 0;
}

.identity__role {
  font-size: var(--fs-body-casual);
  line-height: 26px;
  margin: 0;
}

/* "HOME PAGE" vertical label + Line 137 — sticky on the left edge of the
   content area. Stays pinned to the viewport while the page scrolls (fixed).
   The line runs from the top of the viewport down, with the rotated "HOME PAGE"
   label near the bottom. Above the glass. */
.rail-home {
  position: fixed;
  top: 0;
  left: calc(var(--sidebar-w) + 40px);
  height: 100vh;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-bottom: clamp(80px, 14vh, 160px);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 24px;
  color: var(--color-ink-rail);
  white-space: nowrap;
  text-decoration: none;
}

/* Line 137 — full-height rule running down from the top. */
.rail-home__line {
  flex: 1 1 auto;
  width: 1px;
  background: var(--line-color);
}

/* The "HOME PAGE" text, rotated to read bottom-to-top, near the bottom. */
.rail-home__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.rail-home:hover {
  opacity: 0.7;
}

/* ==========================================================================
   Main content (right column, single column on all breakpoints)
   ========================================================================== */
.content {
  position: relative;
  z-index: 3;
  min-width: 0;
  /* extra right padding keeps content clear of the fixed edge-nav rail */
  padding: 60px clamp(64px, 8vw, 65px) 80px;
}

/* Right-edge vertical nav (COPY EMAIL / MY RESUME / LINKEDIN + line + scroll).
   Sticky on the right edge: stays pinned to the viewport while the page scrolls
   (fixed), mirroring the left HOME PAGE rail. Each label reads bottom-to-top. */
.edge-nav {
  position: fixed;
  top: 60px;
  right: 28px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.edge-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-label);
  line-height: 24px;
  color: var(--color-grey-medium);
  white-space: nowrap;
  transition: color 0.15s ease;
}

.edge-nav__item:hover {
  color: var(--color-black);
}

.edge-nav__star {
  flex: none;
  align-self: center;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 11px;
  height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096.85%2097.03'%3E%3Cpath%20d='M20.93%2096.71c-1.5.96-3.41-.37-3.03-2.11l7.03-32.14c.15-.7-.08-1.42-.6-1.9L.65%2038.85c-1.28-1.17-.56-3.31%201.17-3.47l31.08-2.85c.75-.07%201.39-.55%201.67-1.25L46.57%201.26c.67-1.68%203.04-1.68%203.71%200l12%2030.02c.28.7.93%201.18%201.68%201.25l31.08%202.85c1.73.16%202.45%202.3%201.17%203.47L72.53%2060.56c-.53.48-.76%201.2-.6%201.9l7.03%2032.14c.38%201.74-1.53%203.07-3.03%202.11L49.5%2079.86c-.66-.42-1.5-.42-2.15%200L20.93%2096.71Z'%20fill='%235a6b84'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.edge-nav__item:hover .edge-nav__star {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2096.85%2097.03'%3E%3Cpath%20d='M20.93%2096.71c-1.5.96-3.41-.37-3.03-2.11l7.03-32.14c.15-.7-.08-1.42-.6-1.9L.65%2038.85c-1.28-1.17-.56-3.31%201.17-3.47l31.08-2.85c.75-.07%201.39-.55%201.67-1.25L46.57%201.26c.67-1.68%203.04-1.68%203.71%200l12%2030.02c.28.7.93%201.18%201.68%201.25l31.08%202.85c1.73.16%202.45%202.3%201.17%203.47L72.53%2060.56c-.53.48-.76%201.2-.6%201.9l7.03%2032.14c.38%201.74-1.53%203.07-3.03%202.11L49.5%2079.86c-.66-.42-1.5-.42-2.15%200L20.93%2096.71Z'%20fill='%23000000'/%3E%3C/svg%3E");
}

/* Vertical divider beneath the link group (Figma "Line 139") */
.edge-nav__line {
  width: 1px;
  height: 120px;
  background: var(--line-color);
  margin: 6px 0;
}

/* "← SCROLL TO SEE MORE" / "BACK TO TOP ↑" toggle, reads bottom-to-top below
   the line. It's a real button (reset to look like the other labels); JS swaps
   its text + behavior once the page is scrolled. */
.edge-nav__scroll {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: 1;
  color: var(--color-grey-medium);
  white-space: nowrap;
  transition: color 0.15s ease;
}

/* Arrow — rendered upright (horizontal-tb) then rotated so it points along the
   vertical column and stays centered, independent of the label glyph metrics. */
.edge-nav__scroll-arrow {
  display: block;
  writing-mode: horizontal-tb;
  text-align: center;
  line-height: 1;
}

/* When scrolled (BACK TO TOP), move the arrow to the opposite end so it sits
   on top of the label rather than below it. */
.edge-nav__scroll[data-scrolled="true"] .edge-nav__scroll-arrow {
  order: 2;
}

.edge-nav__scroll:hover {
  color: var(--color-black);
}

/* Intro block */
.intro {
  max-width: 740px;
  margin-left: clamp(0px, 6vw, 78px);
  padding-top: 320px;
}

.intro__hi {
  font-size: var(--fs-body-casual);
  line-height: 26px;
  margin: 0 0 18px;
}

.intro__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display-medium);
  line-height: 52px;
  margin: 0;
  color: var(--color-black);
}

.intro__headline .light {
  color: var(--color-black);
}

.intro__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-small);
  line-height: 40px;
  margin: 24px 0 0;
  color: var(--color-black);
}

/* "And I'm good with" + skill tag cluster — sits on the right half of the
   content, right-aligned, wrapping cleanly within the content padding. */
/* Skills cluster — one wrapping group. "And I'm good with" is just the first
   item (plain text, no pill); the skill tags follow it and wrap together. When
   an item doesn't fit it flows to the next row, sitting under the items above. */
.skills {
  margin-top: 120px;
  margin-left: auto;
  width: min(100%, 620px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 14px;
}

.skills__label {
  font-size: var(--fs-body-casual);
  line-height: 26px;
  white-space: nowrap;
}

/* The tags are siblings in the same flow — no inner wrapper. */
.skills__tags {
  display: contents;
}

/* ==========================================================================
   404 block (photo + copy + buttons)
   ========================================================================== */
.notfound {
  margin-left: clamp(0px, 6vw, 78px);
  margin-top: 160px;
  display: grid;
  grid-template-columns: 264px minmax(0, 529px);
  gap: 48px;
  align-items: start;
}

.notfound__photo {
  width: 264px;
  height: 360px;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.notfound__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notfound__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-header-medium);
  line-height: 40px;
  margin: 0;
  color: var(--color-ink);
}

.notfound__body {
  font-size: var(--fs-body-casual);
  line-height: 26px;
  margin: 16px 0 0;
  color: var(--color-ink);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 40px 0 0;
}

.notfound__caption {
  font-size: var(--fs-body-casual);
  line-height: 26px;
  margin: 40px 0 0;
  color: var(--color-ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.footer__line {
  height: 1px;
  width: clamp(60px, 22vw, 314px);
  background: var(--line-color);
}

.footer__text {
  font-size: var(--fs-label);
  line-height: 24px;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ==========================================================================
   Top bar (mobile only): logo + hamburger
   ========================================================================== */
.topbar {
  display: none;
}

.hamburger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
  }

  /* Top bar replaces the rail. Fixed so the menu / close button is always
     reachable, even when the drawer is open after scrolling down. */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-grey-super-light);
  }

  /* Push page content clear of the fixed top bar */
  .page {
    padding-top: 86px;
  }

  .topbar .logo {
    width: 56px;
    height: 54px;
    margin: 0;
  }

  /* Sidebar becomes a slide-down drawer driven by [data-open] */
  .sidebar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 20;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    background: var(--color-white);
    padding: 116px 28px 40px;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.12);
  }
  .sidebar[data-open="true"] {
    transform: translateY(0);
  }

  .logo {
    margin-top: 0;
    margin-left: 0;
  }
  /* The drawer doesn't need its own big star: the top bar already shows one. */
  .sidebar .logo {
    display: none;
  }
  .identity {
    margin: 0;
  }
  .rail-home {
    display: none;
  }

  /* Glass band is a desktop seam effect; hide it in the single-column layout */
  .glass {
    display: none;
  }

  /* Content: single column, no side rails */
  .content {
    padding: 28px 20px 60px;
  }
  .edge-nav {
    display: none;
  }

  .intro {
    margin-left: 0;
    padding-top: 24px;
    max-width: none;
  }
  .intro__headline {
    font-size: 34px;
    line-height: 42px;
  }
  .intro__sub {
    font-size: 24px;
    line-height: 32px;
  }

  .skills {
    margin-left: 0;
    margin-top: 48px;
    width: 100%;
    justify-content: flex-start;
  }

  /* Single column: stack text first, then the Halo photo at the very bottom
     so it sits right under the "here's a photo of my pup" caption. */
  .notfound {
    margin-left: 0;
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: flex-start;
  }
  .notfound__text {
    order: 1;
  }
  .notfound__photo {
    order: 2;
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 264 / 360;
  }

  .footer {
    margin-top: 72px;
  }
  .footer__line {
    width: clamp(24px, 12vw, 120px);
  }
  .footer__text {
    font-size: 13px;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .intro__headline {
    font-size: 28px;
    line-height: 36px;
  }
  .notfound__actions {
    gap: 14px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}