/* Fidelia Savini Domei - Portfolio Stylesheet */

@font-face {
  font-family: 'Vielotta';
  src: url('vielotta-font/Vielotta-PVwKg.otf') format('opentype'),
       url('vielotta-font/Vielotta-LVM3g.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: #f7f4e9;
  --text-main: #111111;
  --text-muted: #767676;
  --border-subtle: #d8d3c5;
  --header-bar: #e6e2d4;
  --accent-black: #000000;
  --text-soft: #7d786d;
  --text-body: #2b2924;
  --toy-red: #e2382c;
  --toy-yellow: #f6bf26;
  --toy-blue: #2c6fdb;
  --toy-green: #2f9e6b;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-primary: 'Vielotta', Georgia, -apple-system, BlinkMacSystemFont, "Segoe UI", serif;
  --font-display: 'Vielotta', Georgia, serif;
  --font-serif: 'Vielotta', Georgia, serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scrollbar-gutter: stable;
}

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-primary);
  overflow-x: hidden;
  user-select: none;
}

/* The window is the only scroller, so scroll position can be read and reset reliably */
html {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

/* Stage views (landing, projects) fill the screen; page views scroll normally */
body[data-view="home"],
body.is-modal-open {
  overflow: hidden;
}

body:not([data-view="projects"]) .scroll-proxy {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--text-main);
  outline-offset: 3px;
}

/* Scroll Height Proxy to enable native vertical scrollbar tracking */
.scroll-proxy {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 600vh;
  pointer-events: none;
  visibility: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #ece7da;
}
::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 5px;
  border: 2px solid #ece7da;
}
::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* =========================================
   HEADER & NAVIGATION
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 26px 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 200;
  pointer-events: auto;
}

.brand-title {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.05;
  color: var(--text-main);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.brand-title:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

/* On scrolling pages the header and footer sit on a soft fade so text never runs under them */
body[data-view-type="page"] .site-header {
  background: linear-gradient(to bottom, var(--bg-color) 72%, rgba(247, 244, 233, 0));
  padding-bottom: 34px;
  pointer-events: none;
}

body[data-view-type="page"] .site-header > * {
  pointer-events: auto;
}

body[data-view-type="page"] .site-footer {
  bottom: 0;
  padding: 26px 0 10px;
  background: linear-gradient(to top, var(--bg-color) 45%, rgba(247, 244, 233, 0));
}

body[data-view="home"] .brand-title {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  /* Morning dew glassmorphism */
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 10px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.12), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 12px 0 rgba(255, 255, 255, 0.25);
}

.icon-btn:active {
  transform: scale(0.96);
}

/* =========================================
   CENTER-BOTTOM GLASSMORPHIC NAVIGATION DOCK
   ========================================= */
.bottom-glass-dock {
  position: fixed;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 180;
  pointer-events: auto;
}

.dock-capsule {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Transparent tinted frosted glass */
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 9999px;
  padding: 6px 8px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.03), inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 0 18px rgba(255, 255, 255, 0.15);
  user-select: none;
}

/* Active Sliding Oval Pill Highlight */
.dock-active-pill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 8px;
  width: 92px;
  background: rgba(17, 17, 17, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  z-index: 1;
  pointer-events: none;
  transform: translateX(92px);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), width 0.25s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Tab Buttons */
.dock-tab-btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 92px;
  height: 60px;
  padding: 5px 0;
  border: none;
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  color: #6b665b;
  font-family: 'Vielotta', var(--font-primary), serif;
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.dock-tab-btn:focus-visible {
  outline-offset: -3px;
}

.dock-tab-btn:hover {
  color: var(--text-main);
}

.dock-tab-btn:active {
  transform: scale(0.95);
}

.dock-tab-btn.active {
  color: var(--text-main);
}

.dock-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dock-tab-btn.active .dock-tab-icon {
  transform: scale(1.06);
}

.dock-tab-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  font-family: 'Vielotta', var(--font-primary), serif;
  transition: font-weight 0.15s ease;
}

.dock-tab-btn.active .dock-tab-label {
  font-weight: 600;
}

/* =========================================
   3D STAGE & CAROUSEL VIEWPORT
   ========================================= */
.stage-viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  z-index: 10;
  pointer-events: auto;
  cursor: grab;
  /* Vertical swipes scroll the page (and the ring); sideways swipes drag the ring */
  touch-action: pan-y;
}

.stage-viewport:active {
  cursor: grabbing;
}

/* Tilt Rig: Tilts and skews dynamically towards mouse pointer */
.tilt-rig {
  position: absolute;
  /* Sits slightly high: the dock takes more room than the header */
  top: calc(50% - 22px);
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* =========================================
   1. BIGGER MAIN DISPLAY (Glassmorphic Midground)
   ========================================= */
.main-center-display {
  position: absolute;
  top: -310px;
  left: -255px;
  width: 510px;
  height: 620px;
  /* Morning dew glass; no backdrop blur: only the flat page sits behind it, and it moves every frame */
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 14px 0 rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  /* Positioned behind the 3D ring for deep layered parallax */
  transform: translateZ(-60px);
  z-index: 10;
  overflow: visible;
  pointer-events: auto;
  cursor: default;
  transition: box-shadow 0.3s ease;
}

.main-header-bar {
  height: 42px;
  /* Morning dew glass header strip */
  background: rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: var(--text-main);
  z-index: 25;
}

.main-project-title {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 0.25s ease;
}

.view-case-btn {
  background: var(--accent-black);
  color: #ffffff;
  border: none;
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.view-case-btn:hover {
  background: #2b2b2b;
  transform: scale(1.03);
}

.view-case-btn:active {
  transform: scale(0.96);
}

.main-art-viewport {
  flex: 1;
  width: 100%;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.main-feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
}

/* =========================================
   2. 3D RING OF PROJECT CARDS (On top in foreground)
   ========================================= */
.carousel-ring {
  position: absolute;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
  /* Placed in front of the bigger display */
  z-index: 40;
  pointer-events: auto;
}

/* Individual Ring Cards Orbiting across foreground & sides */
.ring-card {
  position: absolute;
  top: -122px;
  left: -88px;
  width: 175px;
  height: 245px;
  background: #ffffff;
  box-shadow: 0 25px 65px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.3s ease, filter 0.3s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ring-card:hover {
  border-color: rgba(0, 0, 0, 0.4);
  filter: brightness(1.06);
}

.ring-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Active card at the front center: stands out in 3D right in front of the big card */
.ring-card.is-active-front {
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 35px 85px rgba(0, 0, 0, 0.28), 0 12px 30px rgba(0, 0, 0, 0.16);
}

/* How to move the carousel: sits under the display, clear of the dock (top set by app.js) */
.projects-hint {
  position: absolute;
  left: 50%;
  top: calc(100% - 150px);
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 40px);
  font-size: 14.5px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--text-soft);
  text-align: center;
  pointer-events: none;
}

.projects-hint-arrow {
  opacity: 0.7;
  animation: projects-hint-nudge-left 2.4s ease-in-out infinite;
}

.projects-hint-arrow:last-child {
  animation-name: projects-hint-nudge-right;
}

@keyframes projects-hint-nudge-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@keyframes projects-hint-nudge-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

/* =========================================
   FOOTER
   ========================================= */
.site-footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  pointer-events: none;
}

.copyright-text {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* =========================================
   CASE STUDY MODAL
   ========================================= */
.case-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(247, 244, 233, 0.97);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.35s;
}

.case-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-modal-card {
  width: 90%;
  max-width: 860px;
  max-height: 88vh;
  background: #ffffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.case-modal-overlay.is-open .case-modal-card {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: 20px 28px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.modal-close-btn {
  background: #f3f3f3;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.modal-close-btn:hover {
  background: #e2e2e2;
  transform: scale(1.05);
}

.modal-body {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  padding: 16px 20px;
  background: #f9f9f9;
  border-radius: 4px;
}

.meta-item-label {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meta-item-value {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
}

.modal-description {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
}

.modal-gallery-view {
  width: 100%;
  height: 480px;
  background: #f4f4f4;
  border-radius: 4px;
  overflow: hidden;
}

.modal-gallery-view img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .main-center-display {
    width: 380px;
    height: 480px;
    top: -240px;
    left: -190px;
  }
  .ring-card {
    width: 130px;
    height: 185px;
    top: -92px;
    left: -65px;
  }
}

/* Phones: the projects stage does not scroll; the ring is swiped sideways instead (see app.js) */
@media (max-width: 767px) {
  body[data-view="projects"] {
    overflow: hidden;
  }

  body[data-view="projects"] .scroll-proxy {
    display: none;
  }

  .stage-viewport {
    touch-action: none;
  }
}

/* =========================================
   SEAMLESS VIEW TRANSITIONS
   ========================================= */
.views-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.projects-view-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  /* Fade and scale only: animating filter: blur() on a full-screen layer repaints every frame */
  transition: opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.projects-view-layer.is-hidden {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0.32s;
}

.page-view-layer {
  position: relative;
  width: 100%;
  min-height: 100vh;
  z-index: 50;
  display: none;
  outline: none;
  user-select: text;
}

.page-view-layer.is-visible {
  display: block;
  animation: pageEnter 0.5s var(--ease-out) both;
}

/* The outgoing page is lifted out of the flow while it fades */
.page-view-layer.is-leaving {
  position: fixed;
  left: 0;
  z-index: 40;
  pointer-events: none;
  animation: pageLeave 0.32s var(--ease-out) both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(22px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pageLeave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(18px) scale(0.99); }
}

/* =========================================
   CONTACT PAGE STYLES
   ========================================= */
.contact-page {
  overflow-y: auto !important;
  user-select: auto;
}

.contact-page-container,
.page-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 120px 32px 150px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: relative;
  z-index: 10;
}

/* Hero Section */
.contact-hero-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-headline {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-main);
  max-width: 880px;
}

/* Toy red, matching the contact heart on the landing page (About and Experience use their blue) */
.contact-headline .headline-emphasis {
  position: relative;
  /* Own stacking context, so the cat can hide behind the letters but stay above the page */
  isolation: isolate;
  font-style: italic;
  font-weight: 400;
  color: var(--toy-red);
  border-bottom: 2px solid rgba(226, 56, 44, 0.35);
  padding-bottom: 2px;
  cursor: pointer;
  display: inline-block;
  transition: border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.contact-headline .headline-emphasis:hover,
.contact-headline .headline-emphasis.is-near {
  border-bottom-color: var(--toy-red);
}

/* The cat and its bubble rise above the phrase. The margin makes room on whichever line the
   phrase lands (first line on desktop, second on phones) and keeps it clear of the header fade */
.contact-headline .headline-emphasis {
  margin-top: 0.9em;
}

/* =========================================
   PEEKING CAT ("breaks the norm")
   Built by assets/peek-cat.js
   ========================================= */
.norm-cat-perch {
  position: relative;
}

/* Clip box: its bottom edge sits at the top of the lowercase letters, so the cat rises from behind them */
.norm-cat {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.42em);
  width: 1.6em;
  height: 1.2em;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.norm-cat svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateY(40%);
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: norm-cat-bob 5.5s ease-in-out infinite;
}

.headline-emphasis.is-near .norm-cat svg {
  transform: translateY(0);
  animation: none;
}

@keyframes norm-cat-bob {
  0%, 62%, 100% { transform: translateY(40%); }
  72%, 88% { transform: translateY(28%); }
}

/* Blink, now and then */
.norm-cat-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: norm-cat-blink 4.8s infinite;
}

@keyframes norm-cat-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96.5% { transform: scaleY(0.1); }
}

.norm-cat-ear-right {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  animation: norm-cat-twitch 7s ease-in-out infinite;
}

@keyframes norm-cat-twitch {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(12deg); }
  94% { transform: rotate(-4deg); }
  96% { transform: rotate(8deg); }
}

.norm-cat-pupils {
  transition: transform 0.18s ease-out;
}

/* "press me" bubble, beside the cat's head */
.norm-cat-label {
  position: absolute;
  right: calc(50% + 0.82em);
  bottom: calc(100% - 0.2em);
  padding: 6px 13px 7px;
  border-radius: 9999px;
  background: var(--text-main);
  color: var(--bg-color);
  font-family: var(--font-primary);
  font-size: 13.5px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  transform-origin: 100% 100%;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Tail pointing at the cat */
.norm-cat-label::after {
  content: '';
  position: absolute;
  right: -4px;
  bottom: 7px;
  border-width: 5px 0 5px 7px;
  border-style: solid;
  border-color: transparent transparent transparent var(--text-main);
}

.headline-emphasis.is-near .norm-cat-label {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.12s;
}

/* Touch screens have no "near": the cat peeks a little higher and asks to be tapped */
@media (hover: none) {
  .norm-cat svg {
    animation-name: norm-cat-bob-touch;
  }

  @keyframes norm-cat-bob-touch {
    0%, 55%, 100% { transform: translateY(34%); }
    68%, 85% { transform: translateY(10%); }
  }

  .norm-cat-label {
    opacity: 1;
    transform: none;
  }
}

/* Whole-site vignette that closes in around the phrase as the pointer approaches */
.norm-vignette {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s linear;
  background: radial-gradient(
    ellipse var(--vig-rx, 420px) var(--vig-ry, 220px) at var(--vig-x, 50%) var(--vig-y, 30%),
    rgba(24, 18, 10, 0) 0%,
    rgba(24, 18, 10, 0) 48%,
    rgba(24, 18, 10, 0.26) 72%,
    rgba(24, 18, 10, 0.58) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .norm-cat svg,
  .norm-cat-eye,
  .norm-cat-ear-right {
    animation: none;
  }
}

.contact-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.contact-response-tag {
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 14.5px;
  color: #7d786d;
  letter-spacing: 0.02em;
}

.availability-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(216, 211, 197, 0.7);
  border-radius: 9999px;
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--text-main);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7);
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

/* Main Two-Column Hero Grid: Message Composer + Artwork */
.contact-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

/* Message Composer (Replacing static email while keeping minimalism) */
.minimal-message-composer {
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 32px 30px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

.composer-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.composer-title {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-main);
}

.composer-note {
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: #8c8577;
  letter-spacing: 0.02em;
}

.composer-note.is-error {
  color: #b3261e;
}

.composer-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.composer-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.composer-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.composer-label {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: 13px;
  color: #7d786d;
  letter-spacing: 0.02em;
}

.composer-input,
.composer-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(216, 211, 197, 0.7);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 15px;
  color: var(--text-main);
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.24s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}

.composer-textarea {
  resize: vertical;
  min-height: 105px;
  line-height: 1.55;
}

/* Hover: Tactile Pop & Morning Dew Glassmorphic Depth */
.composer-input:hover,
.composer-textarea:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(17, 17, 17, 0.4);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08),
              0 3px 8px rgba(0, 0, 0, 0.04),
              inset 0 1px 2px rgba(255, 255, 255, 0.95);
}

/* Focus: Elevated Active State */
.composer-input:focus,
.composer-textarea:focus {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.96);
  border-color: #111111;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12),
              0 0 0 3px rgba(17, 17, 17, 0.08),
              inset 0 1px 2px #ffffff;
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

.composer-submit-btn {
  background: var(--accent-black);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 11px 26px;
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.composer-submit-btn:hover {
  background: #2a2a2a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.composer-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.composer-status-banner {
  display: none;
  padding: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(216, 211, 197, 0.7);
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
  animation: fadeIn 0.3s ease;
}

.composer-status-banner.is-active {
  display: block;
}

.status-check-icon {
  font-size: 20px;
  margin-bottom: 8px;
}

.status-title {
  font-size: 19px;
  font-weight: 500;
  margin-bottom: 6px;
}

.status-text {
  color: #6d685d;
  font-size: 14.5px;
  line-height: 1.6;
}

.status-reset-btn {
  margin-top: 14px;
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  color: var(--text-main);
  font-family: inherit;
  font-size: 13.5px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sculpture Artwork Card (Pure minimal artwork, no surprise badge) */
.contact-sculpture-card {
  position: relative;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-sculpture-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.contact-sculpture-card img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-sculpture-card:hover img {
  transform: scale(1.02);
}

/* =========================================
   LASER CAT SURPRISE PLAYGROUND OVERLAY
   ========================================= */
.designer-surprise-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: rgba(247, 244, 233, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  user-select: none;
  cursor: none; /* Laser pointer replaces system cursor */
}

.designer-surprise-overlay.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

#surpriseCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.surprise-ui-header {
  position: absolute;
  top: 24px;
  left: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;
  pointer-events: auto;
}

.surprise-badge {
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 8px 18px;
  border-radius: 9999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.surprise-close-btn {
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 9px 22px;
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 14px;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.surprise-close-btn:hover {
  background: #000000;
  transform: scale(1.05);
}

.surprise-hero-message {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  pointer-events: none;
  animation: floatSubtle 4s ease-in-out infinite alternate;
}

.surprise-tagline {
  font-family: 'Vielotta', var(--font-serif), Georgia, serif;
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 400;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
  text-shadow: 0 4px 30px rgba(255, 255, 255, 0.9);
}

.surprise-hint {
  font-family: 'Vielotta', var(--font-primary), serif;
  font-size: 14.5px;
  color: #5c574c;
  margin-top: 12px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.55);
  display: inline-block;
  padding: 6px 18px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

@keyframes floatSubtle {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-10px); }
}

/* Contact Page Responsive Adjustments */
@media (max-width: 860px) {
  .contact-hero-grid {
    grid-template-columns: 1fr;
  }
  .composer-row {
    grid-template-columns: 1fr;
  }
  .contact-page-container,
  .page-container {
    padding: 96px 20px 150px;
    gap: 28px;
  }
}

/* =========================================
   LANDING PAGE: 3D SHAPE SORTER
   ========================================= */
.home-view-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: opacity 0.42s var(--ease-out),
              transform 0.42s var(--ease-out);
  will-change: opacity, transform;
}

.home-view-layer.is-hidden {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-out),
              transform 0.32s var(--ease-out),
              visibility 0s linear 0.32s;
}

/* Leaving through a slot: the camera falls into the hole */
.home-view-layer.is-hidden.is-diving {
  transform: scale(2.6);
  transition: opacity 0.4s ease-in 0.08s,
              transform 0.5s cubic-bezier(0.5, 0, 0.9, 0.5),
              visibility 0s linear 0.5s;
}

.home-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.home-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -92%);
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(104px, 27vw, 430px);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--text-main);
  pointer-events: none;
}

.home-role {
  position: absolute;
  top: 34px;
  left: 42px;
  z-index: 3;
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--text-main);
  pointer-events: none;
}

.home-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: block;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.home-stage.is-3d .home-canvas {
  opacity: 1;
}

.home-piece-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.home-stage.is-3d .home-piece-labels,
.home-stage.is-static .home-piece-labels {
  opacity: 1;
}

.home-piece-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 13px 6px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 9999px;
  background: rgba(247, 244, 233, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-main);
  font-family: var(--font-primary);
  font-size: 15px;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.25s ease;
}

.home-piece-label:hover,
.home-piece-label.is-hot {
  background: var(--text-main);
  border-color: var(--text-main);
  color: #ffffff;
}

.home-piece-label.is-away {
  opacity: 0;
  pointer-events: none;
}

.home-stage.is-3d .home-piece-label .shape-glyph {
  display: none;
}

/* Without WebGL the shapes become a plain row of links */
.home-stage.is-static .home-canvas {
  display: none;
}

.home-stage.is-static .home-piece-labels {
  inset: auto;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 26px;
  width: min(92vw, 640px);
}

.home-stage.is-static .home-piece-label {
  position: static;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 14px;
  border-radius: 14px;
}

.home-hint {
  position: absolute;
  left: 50%;
  bottom: 138px;
  transform: translateX(-50%);
  z-index: 3;
  width: max-content;
  max-width: calc(100vw - 40px);
  font-size: 14.5px;
  letter-spacing: 0.03em;
  color: var(--text-soft);
  text-align: center;
  pointer-events: none;
  transition: color 0.25s ease;
}

.home-hint.is-alert {
  color: var(--text-main);
}

/* =========================================
   SHARED PAGE ELEMENTS (About, Experience, Contact)
   ========================================= */
.page-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-statement {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-main);
  max-width: 880px;
  text-wrap: balance;
}

.statement-em {
  font-style: italic;
}

.block-title {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.page-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 8px;
}

.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 9999px;
  background: var(--accent-black);
  color: #ffffff;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s var(--ease-out), box-shadow 0.2s ease;
}

.pill-btn:hover {
  background: #2a2a2a;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.text-link {
  color: var(--text-main);
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.35);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}

.text-link:hover {
  text-decoration-color: var(--text-main);
}

/* =========================================
   ABOUT PAGE
   ========================================= */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
  margin-top: 12px;
}

.about-aside {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-visual-card {
  aspect-ratio: 5 / 6;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.about-visual-card img,
.about-composition {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
}

.about-visual-card img {
  object-fit: cover;
}

.about-composition {
  background: #fbf9f1;
}

.fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 0;
  border-top: 1px solid var(--border-subtle);
}

.fact-row:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.fact-row dt {
  flex: none;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

.fact-row dd {
  font-size: 15.5px;
  text-align: right;
  color: var(--text-main);
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.about-bio {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 58ch;
}

.about-bio p {
  font-size: 18.5px;
  line-height: 1.65;
  color: var(--text-body);
}

.practice-list {
  list-style: none;
}

.practice-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--border-subtle);
}

.practice-row:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.practice-title {
  font-size: 17.5px;
  color: var(--text-main);
}

.practice-detail {
  font-size: 15.5px;
  line-height: 1.5;
  color: #5f5b51;
}

.toolkit-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}

.toolkit-list li {
  padding: 6px 14px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--text-body);
}

/* =========================================
   EXPERIENCE PAGE
   ========================================= */
.role-list {
  list-style: none;
  margin-top: 12px;
}

.role-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  padding: 30px 0 32px;
  border-top: 1px solid var(--border-subtle);
}

.role-row:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.role-period {
  position: relative;
  padding-top: 5px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

.role-row.is-current .role-period {
  color: var(--text-main);
}

.role-row.is-current .role-period::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--toy-green);
  vertical-align: 1px;
}

.role-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--text-main);
}

.role-company {
  font-size: 15.5px;
  letter-spacing: 0.02em;
  color: #5f5b51;
}

.role-location::before {
  content: '·';
  margin: 0 8px;
}

.role-summary {
  margin-top: 6px;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
}

.role-highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 60ch;
}

.role-highlights li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: #5f5b51;
}

.role-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 11px;
  height: 1px;
  background: #9a9485;
}

.ledger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  margin-top: 12px;
}

.ledger-list {
  list-style: none;
}

.ledger-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid var(--border-subtle);
}

.ledger-row:last-child {
  border-bottom: 1px solid var(--border-subtle);
}

.ledger-period {
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

.ledger-main {
  font-size: 16.5px;
  color: var(--text-main);
}

.ledger-sub {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  color: #5f5b51;
}

/* =========================================
   RESPONSIVE: NEW SECTIONS & DOCK
   ========================================= */
@media (max-width: 860px) {
  .site-header {
    padding: 22px 20px;
  }

  .home-role {
    top: 30px;
    left: 20px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-visual-card {
    aspect-ratio: auto;
    height: clamp(220px, 46vw, 340px);
  }

  .role-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 0 26px;
  }

  .ledger-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .practice-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 600px) {
  .site-header {
    padding: 18px 20px;
  }

  .brand-title {
    font-size: 22px;
    white-space: nowrap;
  }

  .home-role {
    top: 27px;
    left: 20px;
    font-size: 15.5px;
  }

  .bottom-glass-dock {
    bottom: 38px;
  }

  .dock-capsule {
    padding: 5px 6px;
  }

  .dock-tab-btn {
    width: 66px;
    height: 56px;
  }

  .dock-tab-label {
    font-size: 11.5px;
    letter-spacing: 0.01em;
  }

  .dock-tab-icon,
  .dock-tab-icon svg {
    width: 22px;
    height: 22px;
  }

  .home-hint {
    bottom: 112px;
    font-size: 13.5px;
  }

  .projects-hint {
    font-size: 13.5px;
    gap: 8px;
  }

  .home-piece-label {
    font-size: 13.5px;
    padding: 4px 11px 5px;
  }

  .about-bio p {
    font-size: 17px;
  }
}

@media (max-width: 360px) {
  .dock-tab-btn {
    width: 60px;
  }
}

/* Portrait screens: the wordmark sits above the cube instead of behind it */
@media (max-aspect-ratio: 95 / 100) {
  .home-wordmark {
    top: 18%;
    transform: translate(-50%, -50%);
    font-size: clamp(88px, 29vw, 240px);
  }
}

/* Short screens: keep the hint clear of the dock */
@media (max-height: 560px) {
  .home-hint,
  .projects-hint {
    display: none;
  }
}

/* =========================================
   REDUCED MOTION
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}