/* ==========================================================================
   NUR WHITE PORTFOLIO - CLEAN MINIMALIST, DUAL-PILLAR SHOWCASE STYLES
   Only custom component styles here — Tailwind CDN handles all utilities.
   ========================================================================== */

:root {
  /* Core Clean Palette */
  --bg-page: #fbfcfd;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: #ffffff;

  /* Text Colors */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  /* Borders & Shadows */
  --border-light: rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.04), 0 8px 10px -6px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 20px 40px -15px rgba(15, 23, 42, 0.07), 0 0 1px rgba(15, 23, 42, 0.1);
  --shadow-hover: 0 25px 50px -12px rgba(15, 23, 42, 0.1);

  /* Interactive Accent (single accent, used everywhere interaction is signalled) */
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.14);
  --accent-ink: #3730a3;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent);

  /* Scrollbar */
  --scroll-track: #eef1f5;
  --scroll-thumb: #c2cbd8;
  --scroll-thumb-hover: #94a3b8;

  /* Typography Stacks */
  /* Nur's own red, from the signature file she drew. */
  --nur-red: #E40016;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial: 'Newsreader', Georgia, serif;
}

/* Base */
html {
  scroll-behavior: smooth;
  color-scheme: light;
  /* Reserve the gutter so locking scroll for a dialog never shifts the page */
  scrollbar-gutter: stable;
}

/* Headings break where a typesetter would break them */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* The fixed header must not swallow the section you just jumped to */
:target { scroll-margin-top: 7rem; }
section[id] { scroll-margin-top: 7rem; }

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}

/* Numerals in counts, steps and data read as data, not as prose */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Font family helpers (extend Tailwind) */
.font-display { font-family: var(--font-display) !important; }
.font-editorial { font-family: var(--font-editorial) !important; }

/* ── Editorial Highlight ── */
.highlight-editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  color: #0f172a;
  letter-spacing: -0.01em;
  display: inline;
  text-decoration: underline;
  text-decoration-color: #cbd5e1;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.3s ease;
}
.highlight-editorial:hover {
  text-decoration-color: var(--accent);
}

/* ── Meta Label ── */
.meta-label {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ── Ambient Glow Orbs ── */
.ambient-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
.orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #e0e7ff 0%, rgba(224,231,255,0) 70%);
  top: -100px; left: -100px;
  animation: floatOrb 20s ease-in-out infinite alternate;
}
.orb-2 {
  width: 550px; height: 550px;
  background: radial-gradient(circle, #ffe4e6 0%, rgba(255,228,230,0) 70%);
  bottom: 5%; right: -150px;
  animation: floatOrb2 24s ease-in-out infinite alternate;
}
.orb-3 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #ccfbf1 0%, rgba(204,251,241,0) 70%);
  top: 40%; left: 20%;
  animation: floatOrb3 22s ease-in-out infinite alternate;
}
@keyframes floatOrb {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(80px,60px) scale(1.08); }
  100% { transform: translate(30px,100px) scale(0.96); }
}
@keyframes floatOrb2 {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(-80px,-70px) scale(1.1); }
  100% { transform: translate(-40px,-30px) scale(0.92); }
}
@keyframes floatOrb3 {
  0%   { transform: translate(0,0) scale(0.95); }
  50%  { transform: translate(-60px,40px) scale(1.05); }
  100% { transform: translate(60px,-40px) scale(1); }
}

/* ── Cursor Glow ── */
.cursor-glow {
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, rgba(99,102,241,0) 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%,-50%);
}

/* ── Glass Components ── */
.glass-nav {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 4px 20px -2px rgba(15,23,42,0.04);
}
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.glass-card:hover {
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-hover);
  border-color: rgba(15,23,42,0.15);
}
.glass-card-sm {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.06);
  box-shadow: var(--shadow-sm);
}
.glass-pill {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 1px 4px rgba(15,23,42,0.03);
}
.glass-button {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.12);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}
.glass-button:hover {
  background: #f8fafc;
  border-color: rgba(15,23,42,0.25);
  transform: translateY(-1px);
}
.glass-modal {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.1);
  box-shadow: 0 25px 60px -15px rgba(15,23,42,0.22);
  color: var(--text-primary);
}

/* ── Pillar Showcase Switcher ── */
.pillar-switcher {
  background: rgba(255,255,255,0.95);
}
.pillar-tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}
.pillar-tab-btn:hover {
  color: var(--text-primary);
}
.pillar-tab-btn.active {
  background: #0f172a;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15,23,42,0.15);
}
.pillar-tab-btn.active i {
  color: #ffffff !important;
}
.pillar-tab-btn.active .pillar-badge {
  background: rgba(255,255,255,0.2);
  color: #ffffff;
}
.pillar-badge {
  background: rgba(15,23,42,0.08);
  color: var(--text-secondary);
}

/* ── Buttons ── */
.btn-primary {
  background: #0f172a;
  color: #ffffff;
  border: none;
  font-family: var(--font-display);
  box-shadow: 0 4px 14px rgba(15,23,42,0.15);
  transition: all 0.25s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-primary:hover {
  background: #1e293b;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15,23,42,0.22);
}
.btn-glass {
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.12);
  color: var(--text-primary);
  font-family: var(--font-display);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-glass:hover {
  background: #f1f5f9;
  border-color: rgba(15,23,42,0.25);
  transform: translateY(-1px);
}

/* ── Skill Tags ── */
.skill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
  transition: all 0.2s ease;
}
.skill-tag:hover {
  background: #f8fafc;
  border-color: rgba(15,23,42,0.25);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* ── Modal Backdrop ── */
.modal-backdrop {
  background-color: rgba(15,23,42,0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.3s ease;
}

/* ── Toast ── */
.toast-container {
  animation: slideInToast 0.4s ease-out;
}
@keyframes slideInToast {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Art Card Hover ── */
.art-card {
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
}
.art-card:hover {
  transform: translateY(-6px);
}

/* ── Showcase view transition ── */
.showcase-view {
  animation: fadeInView 0.35s ease-out;
}
@keyframes fadeInView {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Filter button active state ── */
.filter-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}

/* ── Space-Y helper (used in JS-generated modal content) ── */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-2\.5 > * + * { margin-top: 0.625rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid var(--scroll-track);
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
html { scrollbar-color: var(--scroll-thumb) var(--scroll-track); scrollbar-width: thin; }

/* ── Nav link highlight on hover ── */
.nav-link {
  transition: all 0.2s ease;
}

/* ── Selection ── */
::selection {
  background: #0f172a;
  color: #ffffff;
}

/* ==========================================================================
   FOCUS — keyboard users get the same care as pointer users.
   Browser defaults belong to no design system; these are drawn from the palette.
   ========================================================================== */
:where(a, button, input, textarea, select, [tabindex]):focus {
  outline: none;
}
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 10px;
  position: relative;
  z-index: 2;
}
/* Elements that already own a radius keep it under the ring */
.btn-primary:focus-visible,
.btn-glass:focus-visible,
.glass-button:focus-visible,
.pillar-tab-btn:focus-visible,
.filter-btn:focus-visible { border-radius: 0.75rem; }
.nav-link:focus-visible,
.skill-tag:focus-visible { border-radius: 999px; }
.glass-card:focus-visible,
.art-card:focus-visible,
.project-card:focus-visible { border-radius: 1.5rem; }
.brand-logo:focus-visible { border-radius: 0.85rem; }

/* Cards that act as buttons should say so to the keyboard, and look it */
.card-interactive { cursor: pointer; }
.card-interactive:focus-visible { box-shadow: var(--focus-ring), var(--shadow-hover); }

/* Skip link — the first stop on every keyboard journey */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--text-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
  transition: top 0.2s ease;
}
.skip-link:focus-visible {
  top: 1rem;
  box-shadow: var(--focus-ring), var(--shadow-lg);
}

/* ── Editorial highlight: keyboard/hover parity ── */
.highlight-editorial { text-decoration-skip-ink: none; }

/* ==========================================================================
   PROCESS SEQUENCE — five stages read as one path, not five equal cards.
   The order carries meaning, so the numerals are ordinals, not decoration.
   ========================================================================== */
.process-track { position: relative; }
@media (min-width: 768px) {
  .process-track::before {
    content: "";
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(15,23,42,0.14) 12%, rgba(15,23,42,0.14) 88%, transparent);
    z-index: 0;
  }
}
.process-step { position: relative; z-index: 1; }
.process-step .step-ordinal {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid rgba(15,23,42,0.1);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.process-step:hover .step-ordinal {
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 14px var(--accent-soft);
}
.process-step .step-meta {
  color: var(--text-muted);
}

/* ── Project board imagery: presentation boards are shown whole, never cropped mid-title ── */
.project-board {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ==========================================================================
   MOTION — one authored moment. Respect the user's stated preference.
   ========================================================================== */
.cursor-glow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor-glow { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor-glow { display: none !important; }
  .ambient-glow { animation: none !important; }
  .showcase-view { animation: none !important; }
  .toast-container { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover,
  .btn-glass:hover,
  .glass-button:hover,
  .skill-tag:hover,
  .art-card:hover { transform: none !important; }
  .group:hover img,
  img { transform: none !important; }
}

/* ==========================================================================
   CASE STUDY DIAGRAMS
   A journey map holds five columns of real text. Squeezed into a phone it
   becomes illegible, so below the width where it can be read it scrolls
   inside its own frame instead of shrinking.
   ========================================================================== */
.diagram-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border-radius: 12px;
}
.diagram-scroll > svg {
  min-width: 660px;
  display: block;
}
@media (min-width: 720px) {
  .diagram-scroll > svg { min-width: 0; }
}
/* The scroll affordance has to be visible, or nobody discovers the rest. */
.diagram-scroll::-webkit-scrollbar { height: 8px; }
.diagram-scroll::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 999px; }
.diagram-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 999px; border: 2px solid var(--scroll-track); }

.diagram-hint {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
}
@media (min-width: 720px) { .diagram-hint { display: none; } }

/* Banners are less dense than the phase diagrams, so they need less room
   before they become readable — but they still must not shrink past it. */
.banner-scroll > svg { min-width: 560px; display: block; }
@media (min-width: 620px) { .banner-scroll > svg { min-width: 0; } }

.project-banner {
  /* The banner's own field, so the capped width blends instead of showing a seam. */
  background: #f8fafc;
}
.project-banner > svg {
  display: block;
  width: 100%;
  height: auto;
  /* Drawn at 800 wide. Past ~900 the lettering scales up past its intended
     weight and the card starts reading as a hero, so the upscale is capped. */
  max-width: 900px;
  margin-inline: auto;
}

/* ── Real screen exports ──────────────────────────────────────────────────
   Phone frames are tall; a plain grid would stretch them. Fixed track width
   keeps every screen at the same scale however many there are. */
.screen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 480px) {
  .screen-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ─── Art gallery ──────────────────────────────────────────────────────────
   The pieces run from 6:5 landscape through square to 7:9 tall. A uniform
   grid with object-cover would crop every one of them, which is the one thing
   a gallery may not do, so the columns absorb the difference instead. */
.art-masonry {
  column-count: 1;
  column-gap: 1.75rem;
}
@media (min-width: 640px)  { .art-masonry { column-count: 2; } }
@media (min-width: 1024px) { .art-masonry { column-count: 3; } }

.art-tile {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin: 0 0 1.75rem;
  cursor: pointer;
}

.art-tile-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.9);
  line-height: 0;
}
.art-tile-frame img {
  display: block;
  width: 100%;
  height: auto;              /* the whole piece, never a crop */
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.art-tile:hover .art-tile-frame img { transform: scale(1.04); }

.art-tile-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.28);
  opacity: 0;
  transition: opacity .25s ease;
}
.art-tile:hover .art-tile-veil,
.art-tile:focus-visible .art-tile-veil { opacity: 1; }
.art-tile-cue {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #0f172a;
  background: rgba(255, 255, 255, .95);
  padding: .375rem .875rem;
  border-radius: 999px;
  line-height: 1.4;
}

.art-tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem .125rem 0;
}

/* Nur's own sentence, under the picture in both places it appears.
   Set in the editorial serif while everything around it is sans: this is the
   one line on the page written in her voice rather than the site's, and the
   reader should be able to tell before reading a word of it. No quote marks —
   it is her own site, not a quotation from somewhere else. */
/* The hero card cycles through all ten paintings, and their sentences differ in
   length. Reserving two lines keeps the "See this piece" row and the arrows from
   jumping every time the card advances. Nothing is clamped — a sentence that
   needs a third line gets one rather than being cut off mid-thought. */
.hero-art-voice {
  font-family: var(--font-editorial);
  font-size: 11.5px;
  line-height: 1.42;
  color: var(--text-secondary);
  min-height: 2.84em;
}

.art-tile-voice {
  font-family: var(--font-editorial);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-top: .3rem;
}

.art-voice {
  font-family: var(--font-editorial);
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  line-height: 1.45;
  color: var(--text-primary);
  text-wrap: balance;
  margin: 0;
  padding: .125rem .125rem .25rem;
  max-width: 52ch;
}

.art-tile:focus-visible {
  outline: var(--focus-ring, 2px solid #4f46e5);
  outline-offset: 4px;
  border-radius: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .art-tile-frame img { transition: none; }
  .art-tile:hover .art-tile-frame img { transform: none; }
}

/* Lightbox stage — the big image, with previous/next sitting over the
   letterbox bands the contained image leaves on either side. The gallery
   wraps, so there is never a dead end: the last piece steps to the first. */
.art-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #0f172a;
  box-shadow: 0 4px 6px -1px rgba(2, 6, 23, .1), 0 2px 4px -2px rgba(2, 6, 23, .1);
}
.art-stage img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: contain;      /* the whole piece, never a crop */
}

.art-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .38);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.art-nav:hover { background: #fff; transform: translateY(-50%) scale(1.07); }
.art-nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.art-nav-prev { left: .625rem; }
.art-nav-next { right: .625rem; }
@media (min-width: 640px) {
  .art-nav-prev { left: 1.25rem; }
  .art-nav-next { right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .art-nav { transition: none; }
}

/* The header portrait, in the footprint the NW monogram used to hold. The
   border keeps a light photograph from dissolving into the glass nav, and the
   background holds the square before the image paints so the bar cannot jump. */
.brand-avatar {
  border: 1px solid rgba(15, 23, 42, .1);
  background: #e2e8f0;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
.brand-logo:hover .brand-avatar {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(2, 6, 23, .18);
}

@media (prefers-reduced-motion: reduce) {
  .brand-avatar { transition: none; }
  .brand-logo:hover .brand-avatar { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Interactive prototype — Wedding in Houston
   ═══════════════════════════════════════════════════════════════════════════
   A phone-sized working walkthrough embedded in the case study. The palette is
   the project's own (--wed-*), kept local so it cannot leak into the portfolio
   chrome around it: inside the frame the reader is looking at the product, not
   at this site.

   Accessibility carried in the CSS rather than bolted on: every control clears
   44px, focus is always visible, and availability states pair their colour with
   a word in the markup so the calendar survives being read in greyscale. */

.proto-shell { --wed: #9d5c63; --wed-deep: #7a444b; --wed-wash: #f6edee;
  --p-ink: #241b1d; --p-body: #5c4f52; --p-mut: #8a7b7e; --p-line: #e7dcde;
  --p-surf: #fff; --p-wash: #faf6f6; --p-good: #2f6b4f; --p-warn: #9a5b2a;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 1.5rem 1rem; background: var(--p-wash);
}

.proto-phone {
  width: 100%; max-width: 360px; height: 640px;
  background: var(--p-surf); border: 1px solid var(--p-line);
  border-radius: 28px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -18px rgba(36, 27, 29, .28);
}
.proto-bar { padding: .625rem 0 .25rem; display: flex; justify-content: center; flex: none; }
.proto-bar span { width: 92px; height: 5px; border-radius: 3px; background: var(--p-line); }
.proto-screen { flex: 1; overflow-y: auto; padding: .25rem 1.125rem 1.5rem;
  font-family: var(--font-body); color: var(--p-ink); -webkit-overflow-scrolling: touch; }

.proto-live { font-size: 11px; color: var(--p-mut); min-height: 1em; margin: 0; }

/* Type */
.proto-h1 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  line-height: 1.15; margin: .25rem 0 .125rem; letter-spacing: -.02em; }
.proto-h1:focus-visible { outline: 2px solid var(--wed); outline-offset: 3px; border-radius: 4px; }
.proto-h2 { font-family: var(--font-display); font-weight: 700; font-size: .8125rem;
  margin: 1.25rem 0 .5rem; letter-spacing: -.01em; }
.proto-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--wed-deep); margin: 0; }
.proto-sub { font-size: 12px; color: var(--p-mut); margin: 0 0 .5rem; }
.proto-blurb { font-size: 12.5px; line-height: 1.5; color: var(--p-body); margin: 0 0 .75rem; }
.proto-count { font-size: 11px; color: var(--p-mut); margin: .625rem 0 .5rem; }
.proto-foot { font-size: 11px; color: var(--p-mut); line-height: 1.45; margin: .625rem 0 0; }

.proto-top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; padding-top: .5rem; }

/* Controls — nothing below 44px in either direction */
.proto-guests, .proto-back, .proto-chip, .proto-slot, .proto-day,
.proto-cta, .proto-ghost, .proto-venue {
  font-family: inherit; cursor: pointer; border: 1px solid var(--p-line);
  background: var(--p-surf); color: var(--p-ink); min-height: 44px;
}
.proto-shell :is(button):focus-visible { outline: 2px solid var(--wed); outline-offset: 2px; }
.proto-shell :is(button)[disabled] { opacity: .45; cursor: not-allowed; }

.proto-guests { border-radius: 999px; padding: 0 .875rem; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; align-self: center; }
.proto-back { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600;
  color: var(--wed-deep); display: inline-flex; align-items: center; gap: .375rem; }

.proto-chips { display: flex; gap: .375rem; overflow-x: auto; padding: .625rem 0 .25rem;
  scrollbar-width: none; }
.proto-chips::-webkit-scrollbar { display: none; }
.proto-chip { border-radius: 999px; padding: 0 .8125rem; font-size: 12px; font-weight: 600;
  white-space: nowrap; color: var(--p-body); }
.proto-chip.is-on { background: var(--wed); border-color: var(--wed); color: #fff; }

/* Venue card — the price is on the card, which is the whole argument */
.proto-list { display: flex; flex-direction: column; gap: .625rem; }
.proto-venue { display: flex; gap: .75rem; text-align: left; border-radius: 14px;
  padding: .625rem; align-items: stretch; width: 100%; }
.proto-venue:hover { border-color: var(--wed); }
.proto-thumb { width: 64px; border-radius: 10px; flex: none; }
.proto-venue-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; flex: 1; }
.proto-venue-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.proto-venue-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; }
.proto-venue-area { font-size: 11px; color: var(--p-mut); }
.proto-from { font-family: var(--font-display); font-weight: 800; font-size: 13.5px;
  color: var(--wed-deep); white-space: nowrap; display: flex; align-items: baseline; gap: .25rem; }
.proto-from small { font-size: 9px; font-weight: 600; color: var(--p-mut); text-transform: uppercase;
  letter-spacing: .05em; }
.proto-facts { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .25rem; }
.proto-fact { font-size: 10px; font-weight: 600; color: var(--p-body); background: var(--p-wash);
  border-radius: 5px; padding: .1875rem .375rem; }
.proto-fact.is-tight { color: var(--p-warn); background: #fbf1e8; }
.proto-empty { font-size: 12px; color: var(--p-mut); padding: 1.5rem 0; text-align: center; }

.proto-hero { display: block; height: 132px; border-radius: 14px; margin: .625rem 0 .75rem; }

.proto-warn { font-size: 11.5px; line-height: 1.45; color: var(--p-warn); background: #fbf1e8;
  border-radius: 8px; padding: .5rem .625rem; margin: 0 0 .75rem; }

/* Price breakdown */
.proto-price, .proto-summary { border: 1px solid var(--p-line); border-radius: 14px;
  padding: .875rem; background: var(--p-surf); }
.proto-summary { margin-top: 1rem; }
.proto-price .proto-h2 { margin-top: 0; }
.proto-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--p-line); font-size: 12.5px; }
.proto-row:last-child { border-bottom: 0; }
.proto-row span { color: var(--p-body); display: flex; flex-direction: column; }
.proto-row small { font-size: 10.5px; color: var(--p-mut); margin-top: .0625rem; }
.proto-row b { font-family: var(--font-display); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.proto-total { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  background: var(--wed-wash); border-radius: 10px; padding: .625rem .75rem; margin-top: .5rem;
  font-size: 12.5px; }
.proto-total span { display: flex; flex-direction: column; color: var(--wed-deep); font-weight: 600; }
.proto-total small { font-size: 10.5px; font-weight: 500; opacity: .8; }
.proto-total b { font-family: var(--font-display); font-weight: 800; color: var(--wed-deep);
  white-space: nowrap; font-variant-numeric: tabular-nums; }

.proto-incl { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .875rem; }
.proto-incl h5 { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--p-mut); margin: 0 0 .3125rem; }
.proto-incl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.proto-incl li { font-size: 11px; line-height: 1.35; color: var(--p-body); padding-left: .75rem;
  position: relative; }
.proto-incl li::before { content: '+'; position: absolute; left: 0; color: var(--p-good); font-weight: 700; }
.proto-incl .is-out li::before { content: '–'; color: var(--p-mut); }

/* Calendar. The word next to each number is not decoration: it is what makes
   the state readable without colour. */
.proto-key { list-style: none; display: flex; gap: .75rem; margin: 0 0 .5rem; padding: 0; }
.proto-key li { display: flex; align-items: center; gap: .3125rem; font-size: 10px; color: var(--p-mut); }
.proto-key i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.k-open { background: var(--p-good); } .k-few { background: var(--p-warn); } .k-booked { background: var(--p-line); }

/* Five columns because May 2026 has five Saturdays — the grid is the month,
   not a layout convenience. */
.proto-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3125rem; }
.proto-day { border-radius: 10px; padding: .375rem .25rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .0625rem; }
.proto-day-n { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.proto-day-s { font-size: 9px; font-weight: 600; }
.proto-day.is-open .proto-day-s { color: var(--p-good); }
.proto-day.is-few .proto-day-s { color: var(--p-warn); }
.proto-day.is-booked { background: var(--p-wash); }
.proto-day.is-booked .proto-day-s { color: var(--p-mut); }
.proto-day.is-on { background: var(--wed); border-color: var(--wed); }
.proto-day.is-on .proto-day-n, .proto-day.is-on .proto-day-s { color: #fff; }

.proto-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.proto-slot { border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.proto-slot.is-on { background: var(--wed); border-color: var(--wed); color: #fff; }

.proto-cta { width: 100%; margin-top: 1rem; border-radius: 12px; background: var(--wed);
  border-color: var(--wed); color: #fff; font-size: 13px; font-weight: 700; }
.proto-ghost { width: 100%; margin-top: .75rem; border-radius: 12px; font-size: 12.5px;
  font-weight: 600; color: var(--p-body); }

.proto-done { text-align: center; padding-top: 2.5rem; }
.proto-done .proto-summary { text-align: left; }
.proto-tick { display: inline-flex; align-items: center; justify-content: center; width: 52px;
  height: 52px; border-radius: 50%; background: var(--wed-wash); color: var(--wed-deep);
  font-size: 24px; margin-bottom: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .proto-shell * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Artwork lightbox — pinned action bar

   The modal that holds this is `.glass-modal`, which scrolls and carries its own
   padding (p-6, rising to p-10 at Tailwind's sm breakpoint). A sticky element
   inside it stops at that padding rather than at the modal's edge, leaving a gap
   with content sliding past underneath. So the bar bleeds outward by exactly the
   padding it sits in and pays it back as its own — negative margins and a
   matching `bottom`, per breakpoint. Change the modal's padding and these have
   to change with it.
   --------------------------------------------------------------------------- */
.art-cta-bar {
  position: sticky;
  bottom: -1.5rem;                       /* cancels the modal's p-6 */
  margin: 1.5rem -1.5rem -1.5rem;
  padding: 0.875rem 1.5rem 1.25rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--border-soft, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 20;
}

/* On a phone the primary action takes the full width and the two secondary ones
   share the row beneath it — three side by side would each be too narrow to read
   their own label. */
.art-cta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.art-cta-actions > :first-child { grid-column: 1 / -1; }
.art-cta-actions > a { min-height: 44px; }

@media (min-width: 640px) {
  .art-cta-bar {
    bottom: -2.5rem;                     /* cancels the modal's sm:p-10 */
    margin: 2rem -2.5rem -2.5rem;
    padding: 1rem 2.5rem 1.5rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
  }
  .art-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.625rem;
  }
  .art-cta-actions > :first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .art-cta-bar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}

/* ---------------------------------------------------------------------------
   Nur's signature, as a mark

   The same mark she puts in the corner of the paintings. Drawn as a CSS mask
   rather than an <img> so a single file serves both pages: the shape comes from
   the SVG, the colour from `background-color`. Red here, chalk on /art/ where
   the ground is near-black — an <img> would have needed two files and they would
   have drifted.

   It is decorative. Her name sits in text right beside it, so the mark is
   aria-hidden and a screen reader says "Nur White" once, not twice.
   --------------------------------------------------------------------------- */
.nur-mark {
  display: block;
  flex-shrink: 0;
  /* viewBox is 3284 × 2045, so the box has to keep that ratio or the hand
     changes shape. */
  width: 68px;
  height: 42px;
  background-color: var(--nur-red);
  -webkit-mask: url("assets/images/nur-signature.d232f3ac.svg") no-repeat center / contain;
  mask: url("assets/images/nur-signature.d232f3ac.svg") no-repeat center / contain;
  transition: background-color .18s ease;
}
.brand-logo:hover .nur-mark { background-color: #b0000f; }