/**
 * Creating page — manila portfolio folders.
 *
 * The page reads as a stack of file-folder dividers. Each category tab is
 * a kraft-paper manila tab; the active panel is the open folder body.
 * Each project inside reads like a cream paper sheet inserted in the folder,
 * with hero images styled as polaroids glued in.
 *
 * Mirrors the in-world container metaphor used elsewhere on the site
 * (bookshelf for reading, red velvet for watching, cork for book quotes,
 * marquee for movie quotes, editorial for writing).
 */

:root {
  --serif: "Newsreader", Georgia, "Iowan Old Style", "Source Serif 4", serif;
  /* Paper / manila palette */
  --paper: #f4ead4;
  --paper-edge: #d9c79a;
  --paper-text: #3a2c1a;
  --paper-text-soft: #6e5536;
  /* Kraft folder palette */
  --kraft-folder: #c5a878;
  --kraft-folder-deep: #ad8e58;
  --kraft-tab: #d6b48a;
  --kraft-tab-active: #e3c69d;
  --kraft-edge: #8b6f43;
  --accent-warm: #8b3a1a;
}

/* ============================================
   Folder Tabs — manila tabs at the top of the folder
   ============================================ */
.folder-tabs {
  display: flex;
  gap: 4px;
  padding: 0 var(--space-4);
  position: relative;
  z-index: 1;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}

.folder-tab {
  position: relative;
  top: 1px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--kraft-edge);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: rgba(244, 234, 212, 0.7);
  font-family: var(--font-primary);
  font-size: var(--font-base);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all var(--transition-fast);
  /* Inactive tabs are darker than the active/panel surface — like a
     folder tucked behind another. Inset top shadow deepens the
     recessed feel. Lighter cream text keeps legibility on the
     darker background. */
  background-image: linear-gradient(180deg, #9d825a 0%, #856a45 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

.folder-tab:hover {
  color: rgba(244, 234, 212, 0.95);
  /* Hover lifts toward the active color to telegraph clickability —
     "click and this tab will come forward". */
  background-image: linear-gradient(180deg, #b39368 0%, #9c7e54 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.folder-tab.active {
  /* Solid #c5a878 to match the panel's top color exactly. The panel
     still uses its kraft gradient; at their meeting point both
     surfaces render #c5a878 → no seam. (Trying to share the gradient
     between elements doesn't work because each samples its own pixel
     range; the tab's bottom row would land a few RGB units past the
     panel's top row.) */
  color: var(--paper-text);
  font-weight: 600;
  z-index: 2;
  background-image: none;
  background-color: #c5a878;
  box-shadow: none;
}

.folder-tab i {
  margin-right: var(--space-2);
  color: var(--paper-text-soft);
}

.folder-tab-add {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  background-image: none;
  color: var(--paper-text-soft);
  border-style: dashed;
  text-transform: none;
}
.folder-tab-add i { margin-right: 0; color: inherit; }
.folder-tab-add:hover {
  background: rgba(214, 180, 138, 0.4);
  background-image: none;
  color: var(--accent-warm);
  border-color: var(--accent-warm);
}

/* ============================================
   Folder Panel — the body of the open folder
   ============================================ */
.folder-panel {
  display: none;
  padding: var(--space-8) var(--space-6);
  position: relative;
  z-index: 0;
  background-color: var(--kraft-folder);
  /* Just the kraft gradient — no cross-hatch. Patterns reset at each
     element's boundary, which made the seam between the active tab and
     the panel visible even when the colors matched. */
  background-image: linear-gradient(180deg, #c5a878 0px, #b89866 700px);
  border: 1px solid var(--kraft-edge);
  border-radius: 0 6px 6px 6px;
  /* Outer drop shadow only. Any inset shadow with 0 offset — even at
     low opacity — darkens every edge inward, including the top edge
     where it meets the active tab, which makes a visible seam. */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.folder-panel.active {
  display: block;
}

.category-description {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--font-md);
  color: var(--paper-text);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
  margin: 0 0 var(--space-6) 0;
  max-width: 70ch;
}

/* ============================================
   Project Sheets — paper inserts inside the folder
   ============================================ */
.creating-section {
  position: relative;
  background: var(--paper);
  color: var(--paper-text);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  font-family: var(--serif);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.22);
}

.creating-section:last-child { margin-bottom: 0; }

.creating-section h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--font-2xl);
  color: var(--paper-text);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.creating-section h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-xl);
  color: var(--paper-text);
  margin: var(--space-5) 0 var(--space-3) 0;
}

.creating-section > p,
.section-content p {
  font-family: var(--serif);
  font-size: var(--font-base);
  line-height: 1.65;
  color: var(--paper-text);
  margin: 0 0 var(--space-3) 0;
}
.creating-section > p:last-child,
.section-content p:last-child {
  margin-bottom: 0;
}

.creating-section a {
  color: var(--accent-warm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.creating-section a:hover {
  color: #6b2a10;
}

/* Banner hero — for non-split layouts that still have a hero_image.
   Sits above the title, centered, with a thin polaroid frame. */
.section-image-banner {
  margin: 0 auto var(--space-5);
  text-align: center;
}
.section-image-banner img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  object-fit: contain;
  background: #fff;
  padding: 8px 8px 18px;
  border: 1px solid var(--paper-edge);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 6px 14px rgba(0, 0, 0, 0.22);
  cursor: zoom-in;
  transition: transform var(--transition-fast);
}
.section-image-banner img:hover {
  transform: rotate(-0.4deg) translateY(-2px);
}
#panel-development .section-image-banner img {
  max-height: 170px;
}

/* Development-tab images are not zoomable — match the cursor so the
   affordance doesn't lie. (Zoom click handler is also scoped to skip
   #panel-development in JS.) */
#panel-development .section-image img,
#panel-development .section-image-banner img,
#panel-development .image-container img {
  cursor: default;
}

/* Transparent images (.png / .svg / .webp): drop the polaroid card and
   use filter: drop-shadow so the shadow follows the alpha channel —
   logos and other transparent shapes float against the cream paper
   instead of sitting on a white rectangle. */
.section-image-banner img[src$=".png" i],
.section-image-banner img[src$=".svg" i],
.section-image-banner img[src$=".webp" i],
.section-image-banner img[src*=".png?" i],
.section-image-banner img[src*=".svg?" i],
.creating-section-split .section-image img[src$=".png" i],
.creating-section-split .section-image img[src$=".svg" i],
.creating-section-split .section-image img[src$=".webp" i],
.creating-section-split .section-image img[src*=".png?" i],
.creating-section-split .section-image img[src*=".svg?" i],
.image-container img[src$=".png" i],
.image-container img[src$=".svg" i],
.image-container img[src$=".webp" i],
.image-container img[src*=".png?" i],
.image-container img[src*=".svg?" i] {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
}

/* SVG-specific fallback: some desktop browsers compute width: 0 on
   <img src=*.svg> when the SVG lacks intrinsic dimensions or when
   width: auto is in play. Explicit min-height + width: auto ensures
   the SVG always renders at a sensible size. */
.section-image-banner img[src$=".svg" i],
.creating-section-split .section-image img[src$=".svg" i],
.image-container img[src$=".svg" i] {
  width: auto;
  height: auto;
  min-height: 120px;
  min-width: 120px;
}

/* SVGs are usually 1:1 logos — boost their max-height in the dev tab
   so a square logo isn't visually smaller than a wider rectangular
   hero image at the same height cap. */
#panel-development .section-image-banner img[src$=".svg" i] {
  min-height: 100px;
  min-width: 100px;
  max-height: 220px;
}
#panel-development .creating-section-split .section-image img[src$=".svg" i] {
  max-height: 260px;
}

/* Split layout — image floats left, text wraps; image styled as a polaroid */
.creating-section-split .section-image {
  float: left;
  margin: 0 var(--space-6) var(--space-4) 0;
  max-width: 35%;
}
.creating-section-split .section-image img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  background: #fff;
  padding: 8px 8px 24px;
  border: 1px solid var(--paper-edge);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 6px 14px rgba(0, 0, 0, 0.22);
  cursor: zoom-in;
  transition: transform var(--transition-fast);
}
.creating-section-split .section-image img:hover {
  transform: rotate(-0.5deg) scale(1.02);
}

@media (max-width: 900px) {
  .creating-section-split .section-image {
    float: none;
    max-width: 100%;
    margin: 0 0 var(--space-4) 0;
    text-align: center;
  }
  .creating-section-split .section-image img { max-height: 300px; }
}

/* Development tab: smaller images than art — software project shots
   benefit less from the larger polaroid treatment. */
#panel-development .creating-section-split .section-image {
  max-width: 22%;
}
#panel-development .creating-section-split .section-image img {
  max-height: 220px;
}
#panel-development .image-container img {
  max-height: 170px;
}
@media (max-width: 900px) {
  #panel-development .creating-section-split .section-image {
    max-width: 100%;
  }
  #panel-development .creating-section-split .section-image img {
    max-height: 200px;
  }
}

/* ============================================
   Tech stack — typewriter footer note
   ============================================ */
/* Meta row: tech stack on the left, action buttons locked to the right
   on the same line. The row itself does not wrap — long tech stacks
   wrap their text inside .tech-stack-content while buttons stay put. */
.project-meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(58, 44, 26, 0.12);
}

/* Tech stack — inline small monospace, no bordered block.
   min-width: 0 lets the flex item shrink past its content size so
   long stacks wrap to multiple lines instead of pushing the buttons. */
.tech-stack {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--paper-text-soft);
}
.tech-stack-label {
  flex-shrink: 0;
  font-family: var(--font-primary);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-text);
  padding: 2px 8px;
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  line-height: 1.5;
}
.tech-stack-content {
  min-width: 0;
  word-break: break-word;
}

/* Buttons stay locked to the right of the row at full size */
.project-meta-row .project-links {
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

/* Below the wood-section's natural breakpoint, give up the same-line
   constraint and stack the meta row vertically — it gets too cramped. */
@media (max-width: 640px) {
  .project-meta-row {
    flex-wrap: wrap;
  }
  .project-meta-row .project-links {
    margin-left: 0;
  }
}

/* ============================================
   Project links — paper-style buttons
   ============================================ */
.project-links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.creating-section .btn-primary {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: var(--paper);
  /* No shadow on cream paper — the global .btn-primary shadow tints
     the cream below into a visible khaki band. The button reads
     fine flat against the paper. */
  box-shadow: none;
}
.creating-section .btn-primary:hover {
  background: #6b2a10;
  border-color: #6b2a10;
  box-shadow: none;
  transform: none;
}
.creating-section .btn-secondary {
  background: transparent;
  border: 1px solid var(--paper-edge);
  color: var(--paper-text);
  box-shadow: none;
}
.creating-section .btn-secondary:hover {
  background: rgba(58, 44, 26, 0.06);
  border-color: var(--accent-warm);
  color: var(--accent-warm);
  box-shadow: none;
  transform: none;
}

/* ============================================
   Inline image gallery (Books on Tape style)
   ============================================ */
.image-container {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.image-container img {
  flex: 1;
  max-height: 280px;
  width: auto;
  object-fit: contain;
  background: #fff;
  padding: 6px 6px 18px;
  border: 1px solid var(--paper-edge);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 6px 14px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition-base);
}
.image-container img:hover {
  transform: rotate(-0.4deg) translateY(-2px);
}
@media (max-width: 768px) {
  .image-container { flex-direction: column; }
}

/* ============================================
   Sub-section header (Lunacy intro inside Generative Art)
   ============================================ */
.section-header {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 var(--space-4);
}
.section-header h3 {
  margin-top: 0;
}
.section-header p {
  font-family: var(--serif);
  font-size: var(--font-base);
  color: var(--paper-text);
  line-height: 1.65;
  margin: 0;
}

/* ============================================
   Status badges
   ============================================ */
.status-badge {
  display: inline-block;
  padding: 2px 9px 1px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: var(--space-3);
  vertical-align: middle;
  line-height: 1.5;
}
.status-development {
  background: rgba(139, 58, 26, 0.14);
  color: var(--accent-warm);
  border: 1px solid rgba(139, 58, 26, 0.3);
}
.status-archived {
  background: rgba(110, 85, 54, 0.14);
  color: var(--paper-text-soft);
  border: 1px solid rgba(110, 85, 54, 0.3);
}
.status-hidden {
  background: rgba(110, 85, 54, 0.1);
  color: var(--paper-text-soft);
  border: 1px solid rgba(110, 85, 54, 0.25);
  font-style: italic;
}

/* ============================================
   Related-project cards — small paperclips at the foot of a sheet
   ============================================ */
.related-projects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(58, 44, 26, 0.18);
}
.related-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--font-sm);
  color: var(--paper-text-soft);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.related-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  text-decoration: none;
  transition: all var(--transition-fast);
  max-width: 320px;
  font-family: var(--serif);
}
.related-card:hover {
  background: rgba(139, 58, 26, 0.06);
  border-color: var(--accent-warm);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
.related-card img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.related-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.related-card-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--paper-text);
  font-size: var(--font-sm);
  line-height: 1.2;
}
.related-card-category {
  font-size: var(--font-xs);
  color: var(--paper-text-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.related-card-note {
  font-size: var(--font-xs);
  color: var(--paper-text-soft);
  font-style: italic;
}

/* ============================================
   Admin controls (per-project + bottom panel)
   ============================================ */
.modal-overlay { display: none; }

.project-admin-bar {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-bottom: var(--space-2);
  grid-column: 1 / -1;
}
.project-admin-bar .btn-icon-sm {
  background: transparent;
  border: 1px solid var(--paper-edge);
  color: var(--paper-text-soft);
  width: 28px;
  height: 28px;
  border-radius: 2px;
  cursor: pointer;
  font-size: var(--font-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  padding: 0;
}
.project-admin-bar .btn-edit:hover {
  background: rgba(139, 58, 26, 0.08);
  border-color: var(--accent-warm);
  color: var(--accent-warm);
}
.project-admin-bar .btn-toggle-vis:hover {
  background: rgba(110, 85, 54, 0.08);
  border-color: var(--paper-text);
  color: var(--paper-text);
}
.project-admin-bar .btn-delete:hover {
  background: rgba(139, 58, 26, 0.12);
  border-color: var(--accent-warm);
  color: var(--accent-warm);
}

.project-hidden {
  opacity: 0.55;
  border-style: dashed;
}

.admin-panel-controls {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px dashed rgba(58, 44, 26, 0.3);
  display: flex;
  gap: var(--space-3);
}
.admin-panel-controls .btn-primary {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: var(--paper);
}
.admin-panel-controls .btn-primary:hover {
  background: #6b2a10;
  border-color: #6b2a10;
}

/* ============================================
   Generative-art interactive (Lunacy)
   ============================================ */
#artist-selection { margin-top: var(--space-4); }

#artist-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.artist-option {
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  cursor: pointer;
  color: var(--paper-text);
  font-family: var(--serif);
  font-size: var(--font-sm);
  font-style: italic;
  transition: all var(--transition-fast);
}
.artist-option:hover {
  background: rgba(139, 58, 26, 0.08);
  border-color: var(--accent-warm);
  color: var(--accent-warm);
}

#selected-artists {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.selected-artist {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--accent-warm);
  color: var(--paper);
  border-radius: 2px;
  font-family: var(--serif);
  font-size: var(--font-sm);
  font-style: italic;
}
.selected-artist .remove {
  cursor: pointer;
  font-weight: 700;
  font-style: normal;
}
.selected-artist .remove:hover { color: var(--paper-edge); }

/* Artist-grid display (sample images) — polaroid grid */
#selected-artists-display {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  justify-content: center;
}
.artist {
  background: #fff;
  border: 1px solid var(--paper-edge);
  padding: 8px 8px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all var(--transition-base);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.22);
  width: auto;
  max-width: max-content;
}
.artist:hover {
  transform: rotate(-0.6deg) translateY(-3px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.25),
    0 12px 24px rgba(0, 0, 0, 0.3);
}
.artist-image-container { width: auto; overflow: hidden; }
.artist img {
  width: auto;
  height: 280px;
  object-fit: contain;
  background: #fafafa;
  display: block;
}
.artist-info {
  padding: var(--space-2) var(--space-2) 0;
  width: 100%;
  text-align: center;
  font-family: var(--serif);
}
.artist-name {
  margin: 0 0 2px 0;
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--paper-text);
}
.piece-name {
  margin: 0;
  font-size: var(--font-xs);
  color: var(--paper-text-soft);
  font-style: italic;
}

/* Generated image — polaroid with typewriter caption */
.generated-image {
  text-align: center;
  margin: var(--space-5) auto;
  max-width: 720px;
  background: #fff;
  border: 1px solid var(--paper-edge);
  padding: 12px 12px 18px;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-base);
}
.generated-image:hover {
  transform: rotate(-0.3deg);
}
.generated-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto var(--space-3);
  border: 1px solid #eee;
}
.combined-info { text-align: left; padding: 0 var(--space-2); }
.model-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--font-base);
  color: var(--paper-text);
  margin: 0 0 var(--space-1) 0;
}
.prompt-text {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: var(--font-xs);
  color: var(--paper-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* ============================================
   Admin modal (Add/Edit Project) — paper-themed
   ============================================ */
#projectModal.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 3000;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
#projectModal.modal-overlay.active { display: flex; }

#projectModal .modal {
  background: var(--paper);
  color: var(--paper-text);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  font-family: var(--serif);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 14px 32px rgba(0, 0, 0, 0.45);
}
#projectModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--paper-edge);
}
#projectModal .modal-header h3 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-xl);
  color: var(--paper-text);
}
#projectModal .modal-close {
  background: none;
  border: none;
  font-size: var(--font-2xl);
  color: var(--paper-text-soft);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--transition-fast);
}
#projectModal .modal-close:hover { color: var(--accent-warm); }
#projectModal .modal-body { padding: var(--space-5); }
#projectModal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--paper-edge);
}

#projectModal label {
  font-family: var(--font-primary);
  color: var(--paper-text);
  font-size: var(--font-sm);
  font-weight: 500;
}

#projectModal .form-input,
#projectModal .form-textarea,
#projectModal select,
#projectModal input[type="text"],
#projectModal input[type="url"],
#projectModal textarea {
  background: rgba(255, 255, 255, 0.55);
  color: var(--paper-text);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-primary);
}
#projectModal .form-input:focus,
#projectModal .form-textarea:focus,
#projectModal select:focus,
#projectModal textarea:focus {
  outline: none;
  border-color: var(--accent-warm);
  box-shadow: 0 0 0 3px rgba(139, 58, 26, 0.12);
}

#projectModal .btn-primary {
  background: var(--accent-warm);
  border-color: var(--accent-warm);
  color: var(--paper);
}
#projectModal .btn-primary:hover {
  background: #6b2a10;
  border-color: #6b2a10;
}
#projectModal .btn-secondary {
  background: transparent;
  border: 1px solid var(--paper-edge);
  color: var(--paper-text);
}
#projectModal .btn-secondary:hover {
  background: rgba(58, 44, 26, 0.06);
}

#projectModal .relation-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  margin-bottom: var(--space-2);
}
#projectModal .relation-title {
  font-weight: 500;
  font-size: var(--font-sm);
  color: var(--paper-text);
}
#projectModal .relation-note {
  font-size: var(--font-xs);
  color: var(--paper-text-soft);
  font-style: italic;
  flex: 1;
}

/* ============================================
   Image-zoom overlay — kept dark since it's a fullscreen viewer
   ============================================ */
.image-zoom-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: none;
  cursor: grab;
  overflow: hidden;
}
.image-zoom-overlay.active { display: block; }
.image-zoom-overlay.grabbing { cursor: grabbing; }
.image-zoom-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: none;
}
.image-zoom-container img {
  max-width: none;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.image-zoom-controls {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-3);
  z-index: 1001;
}
/* Zoom-view controls: kept barely-visible so the image owns all visual
   focus. Low-opacity neutral chrome that brightens to full visibility
   on hover/focus. */
.image-zoom-controls { opacity: 0.35; transition: opacity var(--transition-fast); }
.image-zoom-controls:hover { opacity: 1; }

.zoom-btn,
.zoom-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-3);
  border-radius: 2px;
  cursor: pointer;
  font-size: var(--font-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.zoom-close {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  font-size: var(--font-2xl);
  z-index: 1001;
  /* Standalone (not inside .image-zoom-controls) — fade independently */
  opacity: 0.35;
  transition: opacity var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast);
}
.zoom-close:hover, .zoom-close:focus-visible { opacity: 1; }

.zoom-btn:hover,
.zoom-close:hover,
.zoom-btn:focus-visible,
.zoom-close:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  outline: none;
}

.zoom-hint {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  padding: var(--space-2) var(--space-4);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--font-sm);
  z-index: 1001;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* ============================================
   Hero / vision (legacy fallback) — paper sheet
   ============================================ */
.creating-hero {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  font-family: var(--serif);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 18px rgba(0, 0, 0, 0.22);
}
.hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--font-4xl);
  color: var(--paper-text);
  margin: 0 0 var(--space-6) 0;
}
.hero-content { max-width: 800px; margin: 0 auto; }
.vision-text,
.mission-text {
  font-family: var(--serif);
  font-size: var(--font-lg);
  line-height: 1.65;
  color: var(--paper-text);
  margin: 0 0 var(--space-4) 0;
}
.mission-text { margin-bottom: 0; }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .folder-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--space-2);
    flex-wrap: nowrap;
  }
  .folder-tabs::-webkit-scrollbar { display: none; }
  .folder-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-sm);
  }
  .folder-panel {
    padding: var(--space-5) var(--space-4);
    border-radius: 0 6px 6px 6px;
  }
  .creating-section {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }
  .creating-hero {
    padding: var(--space-6) var(--space-4);
  }
  .hero-title { font-size: var(--font-3xl); }
  .vision-text,
  .mission-text { font-size: var(--font-base); }
  .related-projects {
    flex-direction: column;
    align-items: flex-start;
  }
  .related-card { max-width: 100%; width: 100%; }
}