/* ============================================
   CUSTOM PROPERTIES
   ============================================ */
:root {
  --bg: #F2EDBD;
  --home-card: #F2EDBD;
  --maroon: #6C2C25;
  --projects: #EB5E3A;
  --cases: #7CA2E0;
  --writing: #7CA2E0;
  --arrow: #a8c0e8;

  --text-dark: #2d2a26;
  --text-light: #F2EDBD;
  --text-muted: #5a564f;

  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  --card-radius: 12px;
  --tab-w: 52px; /* width of the left index tab strip */
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--bg);
}

/* ---- Film grain overlay ----
   mix-blend-mode won't work here because every position:fixed screen
   creates its own stacking context. Direct opacity overlay works correctly. */
body::after {
  content: '';
  position: fixed;
  inset: -100px; /* slight overscan so shifted grain never shows gaps */
  pointer-events: none;
  z-index: 9999; /* above everything including modals */
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 160px 160px;
  animation: grainShift 0.1s steps(1) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(  0px,   0px); }
  17%  { transform: translate(-15px,  10px); }
  33%  { transform: translate( 12px, -14px); }
  50%  { transform: translate( -8px,  16px); }
  67%  { transform: translate( 16px,   6px); }
  83%  { transform: translate(-10px, -12px); }
  100% { transform: translate(  0px,   0px); }
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; }
/* Cormorant reads best at 700 for display, 500 for sub-headings */
h2, h3 { font-weight: 500; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ============================================
   SCREEN SYSTEM
   ============================================ */
.screen {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
  z-index: 0;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* ============================================
   HOME SCREEN
   ============================================ */
#home {
  /* Subtle radial gradient gives the flat teal a lit-from-center depth */
  background:
    radial-gradient(ellipse at 30% 45%, color-mix(in srgb, var(--home-card) 85%, white) 0%, var(--home-card) 55%, color-mix(in srgb, var(--home-card) 80%, black) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-container {
  position: absolute;
  inset: 0;
}

.home-card {
  width: 100%;
  height: 100%;
  position: relative;
}

.home-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 6%;
  z-index: 20;
  /* Gradient fades to transparent on the right so the depth on the home bg shows through at the edge */
  background: linear-gradient(
    to right,
    var(--home-card) 0%,
    var(--home-card) 88%,
    transparent 100%
  );
}

.greeting { margin-bottom: 2rem; }

.greeting-line {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

.greeting-line:nth-child(1) { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.greeting-line:nth-child(2) { font-size: clamp(2rem, 4vw, 3.5rem); margin-top: 0.2rem; }
.greeting-line:nth-child(3) {
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  font-weight: 400;
  font-style: italic;
  margin-top: 1rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.profile-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  background: rgba(255,255,255,0.25);
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 2rem;
  overflow: hidden;
  /* Layered shadow gives the photo a raised-from-page feel */
  box-shadow:
    0 2px 4px rgba(0,0,0,0.08),
    0 8px 20px rgba(0,0,0,0.14),
    0 20px 40px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.3);
}

.profile-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--card-radius);
}

.contact-links { display: flex; gap: 2rem; }

.contact-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  padding: 0.4rem 0;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease;
  letter-spacing: 0.04em;
}

.contact-link:hover { border-bottom-color: var(--text-dark); }

/* ---- Home stacked folder tabs (bottom-right) ---- */
.section-tabs {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  pointer-events: none;
}

.tab {
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 12px 0 0 0;
  opacity: 0;
  pointer-events: none;
  /* Layered shadow: each page beneath casts a shadow upward */
  box-shadow:
    -2px -2px 6px rgba(0,0,0,0.06),
    -5px -5px 18px rgba(0,0,0,0.10),
    -10px -10px 40px rgba(0,0,0,0.09);
  /* Subtle top-left inner highlight to simulate a lit paper edge */
  outline: none;
  transition: box-shadow 0.3s ease;
}

/* Add a faint inset highlight on the top-left corner of each tab (paper edge) */
.tab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px 0 0 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}

.tab.visible  { pointer-events: auto; }

.tab.settled  { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.tab.settled:hover {
  transform: scale(1.012) translate(-2px, -2px);
  box-shadow:
    -4px -4px 10px rgba(0,0,0,0.10),
    -10px -10px 32px rgba(0,0,0,0.16),
    -18px -18px 56px rgba(0,0,0,0.14);
}

.tab:hover .tab-preview { opacity: 1; transform: translateY(0); }

#tab-about   { background: var(--maroon);                                       z-index: 4; }
#tab-projects{ background: var(--projects);                                      z-index: 3; }
#tab-cases   { background: var(--cases);                                         z-index: 2; }
#tab-writing { background: color-mix(in srgb, var(--writing) 65%, #0d1a2e);     z-index: 1; }

/* Visual Design tab is now blue — butter labels apply via the global rule */

/* All tab labels are white — no per-tab color override needed */

.tab-label {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: rgba(242, 237, 189, 0.95); /* butter */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.tab-preview {
  position: absolute;
  top: 1.75rem;
  left: 3.25rem;
  right: 1.75rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: rgba(242, 237, 189, 0.88); /* butter */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.32s ease, transform 0.32s ease;
  pointer-events: none;
}

/* Thin decorative rule above the preview text */
.tab-preview::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 1px;
  background: rgba(242, 237, 189, 0.4);
  margin-bottom: 0.7rem;
}

/* ============================================
   SUBPAGE LAYOUT — full-screen with left index tabs
   ============================================ */
.page-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ---- Left index tab spine ---- */
.page-nav {
  width: var(--tab-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2rem 0 2rem;
  gap: 6px;
  z-index: 10;
  /* Multi-layer shadow so the spine reads as physically raised off the page */
  box-shadow:
    2px 0 4px rgba(0,0,0,0.10),
    4px 0 16px rgba(0,0,0,0.12),
    8px 0 32px rgba(0,0,0,0.07);
}

/* Each section gives its nav a matching background — overridden below with gradients */

/* ---- Individual index tab button ---- */
.page-tab {
  position: relative;
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg); /* text reads bottom-to-top */
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 237, 189, 0.88); /* butter */
  white-space: nowrap;
  padding: 0.75rem 0;
  border-radius: 0 6px 6px 0;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  opacity: 0.68;
  cursor: pointer;
  box-shadow:
    2px 0 6px rgba(0,0,0,0.18),
    inset -1px 0 0 rgba(255,255,255,0.18),
    inset 1px 0 0 rgba(0,0,0,0.08);
}

.page-tab:hover {
  opacity: 1;
  transform: rotate(180deg) translateX(-2px);
  box-shadow:
    4px 0 12px rgba(0,0,0,0.28),
    inset -1px 0 0 rgba(255,255,255,0.25),
    inset 1px 0 0 rgba(0,0,0,0.06);
}

/* Active tab: full opacity, no shadow — merges flush with content area */
.page-tab.is-active {
  opacity: 1;
  border-radius: 0;
  box-shadow: none;
  cursor: default;
  transform: rotate(180deg);
  color: var(--text-dark);
}

/* Tab background colors — labels are all white via .page-tab */
.ptab-home     { background: var(--home-card); color: var(--text-dark); }
.ptab-about    { background: var(--maroon);    }
.ptab-projects { background: var(--projects);  }
.ptab-cases    { background: var(--cases); } /* blue — butter label via .page-tab */
.ptab-writing  { background: color-mix(in srgb, var(--writing) 65%, #0d1a2e); }

/* Active tab merges with the neutral content background */
#about    .page-tab.is-active,
#projects .page-tab.is-active,
#cases    .page-tab.is-active,
#writing  .page-tab.is-active {
  background: var(--text-light);
  color: var(--text-dark);
  letter-spacing: 0.18em;
}


/* ---- Full-width page content ---- */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 3.5rem 5rem;
  /* Inset shadow from the spine gives the content area depth, as if it sits in a slight well */
  box-shadow: inset 6px 0 24px rgba(0,0,0,0.05), inset 0 2px 8px rgba(0,0,0,0.03);
}

/* All subpages: neutral content, color lives in spine + headings only */
#about    { background: var(--text-light); }
#projects { background: var(--text-light); }
#cases    { background: var(--text-light); }
#writing  { background: var(--text-light); }

/* Spine background — vertical gradient gives it a curved/physical feel */
#about    .page-nav {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--maroon)   95%, black) 0%,
    color-mix(in srgb, var(--maroon)   90%, black) 50%,
    color-mix(in srgb, var(--maroon)   70%, black) 100%);
}
#projects .page-nav {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--projects) 85%, black) 0%,
    color-mix(in srgb, var(--projects) 75%, black) 50%,
    color-mix(in srgb, var(--projects) 55%, black) 100%);
}
#cases    .page-nav {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--cases)    85%, black) 0%,
    color-mix(in srgb, var(--cases)    75%, black) 50%,
    color-mix(in srgb, var(--cases)    55%, black) 100%);
}
#writing  .page-nav {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--writing)  90%, black) 0%,
    color-mix(in srgb, var(--writing)  80%, black) 50%,
    color-mix(in srgb, var(--writing)  60%, black) 100%);
}

/* Headings use section accent color */
#about    .page-content h1 { color: var(--maroon); }
#projects .page-content h1 { color: color-mix(in srgb, var(--projects) 60%, black); }
#cases    .page-content h1 { color: color-mix(in srgb, var(--cases)    50%, black); }
#writing  .page-content h1 { color: color-mix(in srgb, var(--writing)  70%, black); }

/* Shared heading */
.page-content h1 {
  font-size: clamp(2.2rem, 4vw, 4rem);
  margin-bottom: 2rem;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ============================================
   ABOUT ME — content inside page-content
   ============================================ */
.bio-text {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 80ch;
  color: var(--text-dark);
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  max-width: 900px;
}

.photo-grid .photo-cell {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: rgba(0,0,0,0.06);
  position: relative;
}

.photo-grid .photo-cell.wide {
  grid-column: 1 / -1;
  aspect-ratio: 16/7;
}

.photo-grid .photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.photo-grid .photo-cell:hover img {
  transform: scale(1.03);
}

.photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 100%);
  color: #fff;
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.35;
  pointer-events: none;
}

.photo-placeholder,
.map-placeholder {
  background: rgba(0,0,0,0.06);
  border-radius: 10px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.95rem;
}

.map-placeholder { min-height: 260px; max-width: 900px; }

/* ============================================
   UX RESEARCH — content inside page-content
   ============================================ */
/* Three-up grid for UX Projects landing view */
.projects-three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .projects-three-up {
    grid-template-columns: 1fr;
  }
}

.project-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.10);
  transition: padding-left 0.2s ease, border-color 0.2s ease;
}

.projects-three-up .project-item {
  border-bottom: none;
  padding: 0;
}

.project-item:hover {
  padding-left: 0.75rem;
  border-bottom-color: rgba(0,0,0,0.20);
}

/* Clickable project items (have a case study) */
.project-item--clickable {
  cursor: pointer;
}

.project-item--clickable:hover {
  padding-left: 0.75rem;
}

.project-meta-row {
  margin-bottom: 0.35rem;
}

.project-year {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.project-hook {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

.project-read-more {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--projects) 55%, black);
  display: inline-block;
  transition: letter-spacing 0.2s ease;
}

.project-item--clickable:hover .project-read-more {
  letter-spacing: 0.12em;
}

/* Optional image thumbnail strip inside a project-item card */
.project-thumb-strip {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 0.9rem;
  background: color-mix(in srgb, var(--projects) 20%, var(--text-light));
}

.project-thumb-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 0.4s ease;
}

.project-item--clickable:hover .project-thumb-strip img {
  transform: scale(1.03);
}

.project-item-body {
  /* wrapper for text content below the thumb strip — no extra styles needed */
}

/* ---- Project Case Study Modal ---- */
.project-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 8, 0.55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 2.5vh 3vw;
  overflow-y: auto;
}

.project-modal.open { opacity: 1; visibility: visible; }

.project-modal-content {
  background: var(--text-light);
  border-radius: var(--card-radius);
  padding: 3.5rem 5rem;
  max-width: min(1100px, 100%);
  width: 100%;
  position: relative;
  transform: translateY(24px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  margin: auto;
}

.project-modal.open .project-modal-content { transform: translateY(0); }

.project-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: 1.75rem;
  color: var(--text-muted);
  transition: color 0.2s;
  line-height: 1;
}

.project-modal-close:hover { color: var(--text-dark); }

.project-modal-context {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.project-modal-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.4rem;
  line-height: 1.15;
}

.project-modal-tags {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Case study sections inside modal */
.case-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

.case-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.case-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--projects) 55%, black);
  margin-bottom: 0.75rem;
}

.case-section p,
.case-section ol,
.case-section ul {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-dark);
}

.case-section p + p { margin-top: 0.75rem; }

.case-section ol,
.case-section ul {
  padding-left: 1.4rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.case-section li { margin-bottom: 0.35rem; }

.case-section strong { font-weight: 600; }
.case-section em { font-style: italic; }

.case-section blockquote {
  margin: 1.25rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid color-mix(in srgb, var(--projects) 55%, black);
  background: rgba(0,0,0,0.03);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--text-dark);
}

.case-section blockquote cite {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-style: normal;
  font-family: var(--font-body);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Gaps section gets a slightly different visual treatment */
.case-section--gaps .case-label {
  color: var(--text-muted);
}

.case-section--gaps li {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.case-section--gaps strong {
  color: var(--text-dark);
}

/* Each section's hover accent comes from its section color */
#projects .project-item {
  border-left: 3px solid transparent;
  padding-left: 1rem;
  transition: border-left-color 0.2s ease, padding-left 0.2s ease, border-bottom-color 0.2s ease;
}
#projects .project-item:hover {
  border-left-color: color-mix(in srgb, var(--projects) 70%, black);
  padding-left: 1.5rem;
}

#cases .project-item {
  border-left: 3px solid transparent;
  padding-left: 1rem;
  transition: border-left-color 0.2s ease, padding-left 0.2s ease, border-bottom-color 0.2s ease;
}
#cases .project-item:hover {
  border-left-color: color-mix(in srgb, var(--cases) 60%, black);
  padding-left: 1.5rem;
}

.project-item:last-child { border-bottom: none; }

.project-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  color: var(--text-dark);
}

.project-tags {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.project-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-dark);
}

/* ============================================
   VISUAL DESIGN — masonry-style gallery
   ============================================ */
.design-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  grid-auto-rows: auto;
}

.design-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
}

.design-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.07);
}

/* Wide card spans two columns */
.design-card--wide {
  grid-column: span 2;
}

/* The image/thumbnail area */
.design-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--cases) 18%, var(--text-light));
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.design-card--wide .design-thumb {
  aspect-ratio: 4 / 3;
}

.design-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
  padding: 0.5rem;
  box-sizing: border-box;
}

.design-card:hover .design-thumb img {
  transform: scale(1.03);
}

/* Caption row below image */
.design-card-info {
  padding: 0.9rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.design-title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.3;
}

.design-tags {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* Remove project-item accent rule for cases since we no longer use it */
#cases .project-item { border-left: none; padding-left: 1rem; }

/* ---- Taiwan postcard project card ---- */
.design-card--project {
  cursor: pointer;
}

/* ---- Postcard carousel (inside project modal) ---- */
.postcard-carousel {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  user-select: none;
}

.carousel-slides {
  width: 100%;
}

.carousel-slide {
  display: none;
  margin: 0;
}

.carousel-slide.active {
  display: block;
}

/* Portrait images: constrain height, center horizontally */
.carousel-slide img {
  display: block;
  max-height: 62vh;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Landscape images: fill full width, let height follow */
.slide-landscape img {
  width: 100%;
  max-height: none;
  height: auto;
}

.carousel-slide figcaption {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  padding: 0.5rem 0 0.75rem;
  text-align: center;
  width: 100%;
}

/* Prev / Next buttons */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(44, 44, 44, 0.55);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 1.1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
  z-index: 2;
}

.carousel-btn:hover {
  background: rgba(44, 44, 44, 0.8);
  transform: translateY(-50%) scale(1.08);
}

.carousel-prev { left: 0.75rem; }
.carousel-next { right: 0.75rem; }

/* Dot indicators */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.4rem 0 0.6rem;
}

.carousel-counter {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  padding: 0.4rem 0 0.6rem;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(44,44,44,0.2);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}

.carousel-dot.active {
  background: var(--maroon);
  transform: scale(1.25);
}

/* Scrollable full-width illustration (no height cap — lets modal scroll) */
.scroll-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

/* ============================================
   WRITING & POETRY — gallery inside page-content
   ============================================ */
.writing-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.poem-card {
  background: rgba(255,255,255,0.85);
  border-radius: var(--card-radius);
  padding: 2.25rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-height: 220px;
  display: flex;
  flex-direction: column;
}

.poem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}

.poem-title { font-size: 1.3rem; margin-bottom: 0.6rem; color: var(--text-dark); }

.poem-excerpt {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  font-style: italic;
}

.poem-full { display: none; }

/* Poem Modal */
.poem-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 2rem;
}

.poem-modal.open { opacity: 1; visibility: visible; }

/* Shell: holds border-radius and clips the scrollbar flush to the curve */
.poem-modal-shell {
  border-radius: 18px;
  overflow: hidden;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);
}

.poem-modal.open .poem-modal-shell { transform: translateY(0); }

/* Content: scrolls inside the clipped shell */
.poem-modal-content {
  background: var(--text-light);
  padding: 3rem;
  overflow-y: auto;
  max-height: 80vh;
  position: relative;
  scrollbar-width: none; /* Firefox: always hidden */
}

/* Chrome/Safari: hidden by default, visible while scrolling */
.poem-modal-content::-webkit-scrollbar {
  width: 5px;
}
.poem-modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.poem-modal-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 0.3s;
}
.poem-modal-content.is-scrolling::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
}
.poem-modal-content.is-scrolling {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}

.poem-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.75rem;
  color: var(--text-muted);
  transition: color 0.2s;
}

.poem-modal-close:hover { color: var(--text-dark); }
.poem-modal-title { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--text-dark); }
.poem-modal-body  { font-size: 1.05rem; line-height: 1.8; color: var(--text-dark); }

.poem-modal-body pre {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0;
}

/* ============================================
   JOURNEY MAP
   ============================================ */

.journey-section {
  margin-top: 2.5rem;
  max-width: 900px;
}

.journey-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

#journey-map {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1rem;
  z-index: 1;
  position: relative;
}

/* Keep Leaflet's internals below the site modals */
.leaflet-pane,
.leaflet-control-container { z-index: 1 !important; }

.journey-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  min-height: 84px;
}

.journey-photo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}

#journey-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.journey-no-photo {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 0 0.4rem;
}

.journey-year-disp {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--maroon);
  display: block;
  line-height: 1.1;
}

.journey-city-disp {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  margin-top: 0.15rem;
}

.journey-note-disp {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Slider */
.journey-slider-wrap { position: relative; }

.journey-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  display: block;
}

.journey-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--maroon);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}

.journey-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.journey-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--maroon);
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 5px rgba(0,0,0,0.25);
}

.journey-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding: 0 2px;
}

.journey-tick {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.15s;
  user-select: none;
}

.journey-tick:hover { color: var(--maroon); }
.journey-tick.active { color: var(--maroon); font-weight: 600; }

/* Custom map pin */
.journey-pin {
  width: 14px;
  height: 14px;
  background: var(--maroon);
  border-radius: 50%;
  border: 2.5px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .home-left { width: 40%; padding: 6% 5%; }
  .profile-photo { max-width: 180px; }
  .page-content { padding: 2.5rem 3rem; }
}

@media (max-width: 768px) {
  .home-left { width: 50%; padding: 6% 5%; }

  .greeting-line:nth-child(1) { font-size: 2.2rem; }
  .greeting-line:nth-child(2) { font-size: 1.9rem; }
  .greeting-line:nth-child(3) { font-size: 0.95rem; }

  .profile-photo { max-width: 160px; }
  .tab-preview { font-size: 1rem; }
  .writing-gallery { grid-template-columns: repeat(2, 1fr); }
  .page-content { padding: 2rem 2rem; }

  .design-gallery { grid-template-columns: 1fr; }
  .design-card--wide { grid-column: 1; }
}

/* ---- Top nav: spine moves to top when viewport is narrow ---- */
@media (max-width: 640px) {
  /* Stack layout vertically */
  .page-layout {
    flex-direction: column;
  }

  /* Nav becomes a horizontal top bar */
  .page-nav {
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0;
    gap: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.14), 0 4px 20px rgba(0,0,0,0.08);
  }

  /* Gradient goes left-to-right instead of top-to-bottom */
  #about    .page-nav {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--maroon)   95%, black) 0%,
      color-mix(in srgb, var(--maroon)   75%, black) 100%);
  }
  #projects .page-nav {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--projects) 85%, black) 0%,
      color-mix(in srgb, var(--projects) 60%, black) 100%);
  }
  #cases    .page-nav {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--cases)    85%, black) 0%,
      color-mix(in srgb, var(--cases)    60%, black) 100%);
  }
  #writing  .page-nav {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--writing)  90%, black) 0%,
      color-mix(in srgb, var(--writing)  65%, black) 100%);
  }

  /* Each tab becomes a horizontal equal-width button */
  .page-tab {
    flex: 1;
    min-height: 40px;
    writing-mode: horizontal-tb;
    transform: none !important; /* kill the 180deg rotation */
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    padding: 0 0.25rem;
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid rgba(255,255,255,0.12);
  }

  .page-tab:last-child { border-right: none; }

  /* Active tab: bottom border instead of merging flush */
  #about    .page-tab.is-active,
  #projects .page-tab.is-active,
  #cases    .page-tab.is-active,
  #writing  .page-tab.is-active {
    background: rgba(255,255,255,0.18);
    color: white;
    border-bottom: 2px solid rgba(255,255,255,0.8);
    letter-spacing: 0.18em;
  }

  /* Content fills remaining height */
  .page-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem 1.5rem;
    box-shadow: none;
  }
}

@media (max-width: 480px) {
  .home-left {
    width: 100%;
    height: auto;
    position: relative;
    padding: 5% 5% 2%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .greeting { width: 100%; margin-bottom: 0.5rem; }
  .greeting-line:nth-child(1) { font-size: 1.8rem; }
  .greeting-line:nth-child(2) { font-size: 1.5rem; }
  .greeting-line:nth-child(3) { font-size: 0.85rem; }
  .profile-photo { max-width: 80px; aspect-ratio: 1; margin-bottom: 0.5rem; }
  .contact-links { width: 100%; gap: 1rem; }
  .contact-link  { font-size: 0.85rem; }
  .tab-preview   { display: none; }

  .writing-gallery { grid-template-columns: 1fr; }
  .page-tab { font-size: 0.6rem; letter-spacing: 0.1em; }
}