/* ============================================================
     POSTCARDS PROJECT — light / sunset theme
     Deliberately siloed from Moondog Mechanica's dark starfield
     theme and from the Hawaii shoebox project. No shared CSS.
     ============================================================ */

  :root {
    --sunset-coral: #ff8c6b;
    --sunset-gold:  #f0a94e;
    --sunset-rose:  #d4667a;
    --sunset-deep:  #6b3e52;
    --sunset-plum:  #4a2c40;
    --cream:        #fdf6ec;
    --cream-panel:  #fbe9d9;
    --ink:          #40302c;
    --ink-soft:     #7a6459;
    --line:         rgba(107,62,82,0.16);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'Lora', serif;
    line-height: 1.6;
  }

  h1, h2, h3 { font-family: 'Fraunces', serif; margin: 0; }

  /* ---------------- HERO ---------------- */

  .hero {
    position: relative;
    padding: 64px 24px 56px;
    text-align: center;
    background: linear-gradient(160deg, var(--sunset-plum) 0%, var(--sunset-rose) 45%, var(--sunset-gold) 100%);
    color: var(--cream);
    overflow: hidden;
  }

  .hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 90px;
    background: radial-gradient(ellipse at 50% 120%, rgba(253,246,236,0.5), transparent 70%);
  }

  .hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.2rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
  }

  .hero .tagline {
    margin-top: 10px;
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
    color: #ffe9d6;
    position: relative;
    z-index: 1;
  }

  /* ---------------- INTRO ---------------- */

  .intro {
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    text-align: center;
  }

  .intro p {
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin: 0 0 16px;
  }

  .intro p:last-child { margin-bottom: 0; }

  /* ---------------- SECTIONS ---------------- */

  .section {
    padding: 40px 0 8px;
    border-top: 1px solid var(--line);
  }

  .section-header {
    max-width: 680px;
    margin: 0 auto 26px;
    padding: 0 24px;
    text-align: center;
  }

  .section-header h2 {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--sunset-deep);
  }

  .section-header .sub {
    font-family: 'Caveat', cursive;
    font-size: 1.15rem;
    color: var(--sunset-rose);
    margin-top: 2px;
  }

  .section-header p {
    font-size: 0.95rem;
    color: var(--ink-soft);
    margin-top: 10px;
  }

  /* ---------------- FILMSTRIP ---------------- */

  .filmstrip-viewport {
    width: 100%;
    overflow: hidden;
    padding: 6px 0 34px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .filmstrip-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: scroll-strip linear infinite;
  }

  .filmstrip-track.static {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .filmstrip-viewport:hover .filmstrip-track {
    animation-play-state: paused;
  }

  @keyframes scroll-strip {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .card-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 190px;
    height: 130px;
    border-radius: 3px;
    cursor: pointer;
    background: #fff;
    padding: 8px 8px 22px;
    box-shadow: 0 8px 20px rgba(74,44,64,0.18);
    border: 1px solid rgba(255,255,255,0.6);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .card-thumb:hover {
    transform: translateY(-5px) rotate(var(--tilt, 0deg));
    box-shadow: 0 14px 26px rgba(74,44,64,0.26);
  }

  .card-thumb .thumb-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    display: block;
    object-fit: contain;
  }

  /* Thumbnails are a fixed box regardless of the source postcard's
     orientation. object-fit: contain shows the full image, letting
     vertical postcards letterbox against the card's white background
     instead of getting cropped — horizontal postcards still fill the
     box edge-to-edge since their proportions are close to the box's. */

  .card-thumb .corner-hint {
    position: absolute;
    top: 8px; right: 8px;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent rgba(253,246,236,0.9) transparent transparent;
    filter: drop-shadow(-1px 1px 1px rgba(0,0,0,0.25));
  }

  /* ---------------- CURATOR'S NOTES ---------------- */

  .curators-notes {
    max-width: 680px;
    margin: 20px auto 0;
    padding: 40px 24px 72px;
    border-top: 1px solid var(--line);
  }

  .curators-notes h2 {
    text-align: center;
    font-size: 1.5rem;
    color: var(--sunset-deep);
    margin-bottom: 6px;
  }

  .curators-notes .sub {
    display: block;
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 1.1rem;
    color: var(--sunset-rose);
    margin-bottom: 26px;
  }

  .curators-notes .note-block {
    background: var(--cream-panel);
    border-radius: 6px;
    padding: 22px 26px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(74,44,64,0.08);
  }

  .curators-notes .note-block h3 {
    font-size: 1.05rem;
    color: var(--sunset-deep);
    margin-bottom: 8px;
  }

  .curators-notes .note-block p {
    font-size: 0.96rem;
    color: var(--ink-soft);
    margin: 0;
  }

  .curators-notes .note-block p + p {
    margin-top: 12px;
  }

  .note-subhead {
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sunset-rose);
    margin: 18px 0 10px;
  }

  .note-term {
    font-weight: 600;
    color: var(--sunset-deep);
  }

  .finding-item {
    position: relative;
    padding-left: 16px;
    border-left: 2px solid var(--sunset-gold);
  }

  .finding-item + .finding-item {
    margin-top: 14px;
  }

  /* ---------------- MODAL ---------------- */

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(74,44,64,0.55);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
  }
  .modal-backdrop.open { display: flex; }

  .modal-close {
    position: absolute;
    top: 22px; right: 26px;
    background: rgba(253,246,236,0.9);
    border: none;
    color: var(--sunset-deep);
    font-family: 'Lora', serif;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
  }
  .modal-close:hover { background: #fff; }

  .modal-nav {
    background: rgba(253,246,236,0.85);
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    color: var(--sunset-deep);
    font-size: 1.5rem;
    cursor: pointer;
    flex: 0 0 auto;
  }
  .modal-nav:hover { background: #fff; }

  .modal-stage {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* ---- Orientation-flexible flip scene ----
     Postcards come in a mix of horizontal and vertical scans.
     Rather than force every card into one fixed box, .flip-scene
     sizes itself to whatever the front image's real aspect ratio
     is: an invisible "sizer" copy of the front image is laid out
     normally (shrink-to-fit, capped by max-width/max-height), and
     that determines the box size. The actual visible front/back
     faces are absolutely positioned on top, filling that box
     exactly — so a tall vertical card gets a tall narrow box, and
     a wide horizontal card gets a wide box, automatically. */

  .flip-scene {
    position: relative;
    display: inline-block;
    max-width: min(88vw, 640px);
    max-height: 78vh;
    perspective: 1800px;
  }

  .sizer-img {
    display: block;
    max-width: min(88vw, 640px);
    max-height: 78vh;
    width: auto;
    height: auto;
    visibility: hidden;
  }

  .flip-card {
    position: absolute;
    inset: 0;
    transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
    cursor: pointer;
  }
  .flip-card.flipped { transform: rotateY(180deg); }

  .face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(74,44,64,0.35);
    overflow: hidden;
    background: #fff;
  }

  .face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #fff;
  }

  .face.back { transform: rotateY(180deg); }

  .flip-affordance {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Lora', serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0.9;
  }

  .modal-caption {
    text-align: center;
    margin-top: 14px;
    font-family: 'Lora', serif;
    font-size: 1rem;
    color: #fdf6ec;
  }

  .modal-meta {
    text-align: center;
    margin-top: 4px;
    font-family: 'Lora', serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: #fdf6ec;
    opacity: 0.8;
  }

  @media (max-width: 640px) {
    .modal-nav { width: 36px; height: 36px; font-size: 1.2rem; }
  }
/* ---------- license / about ----------
   NOTE: this block originally referenced --gold, --paper, and
   --font-utility, none of which exist in this file's :root (they
   look carried over from another project's stylesheet). Mapped
   below onto this project's existing sunset tokens instead of
   defining new ones, and reusing Lora (already loaded for the rest
   of the page) rather than pulling in an extra font family. */

.curator-license {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 1rem;
  text-align: center;
}

.curator-license__label {
  font-family: 'Lora', serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sunset-gold);
  margin: 0 0 1rem;
}

.curator-license__block {
  background: var(--cream-panel);
  border: 1px solid var(--line);
  padding: 1.75rem;
  text-align: left;
}

.curator-license__block p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin: 0 0 0.75rem;
}
.curator-license__block p:last-of-type { margin-bottom: 0; }

.curator-license__credit {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;      /* keeps text vertically centered against the logo */
  justify-content: center;
  gap: 0.85rem;
  text-align: left;
}

.curator-license__logo {	
  height: 50px;              /* slightly smaller logo to match smaller text */
  width: auto;
  flex-shrink: 0;
}

.curator-license__credit-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  font-family: 'Lora', serif;
  font-size: 0.68rem;        /* smaller — was 0.78rem */
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.curator-license__credit-text a {
  color: var(--sunset-gold);
}

@media (max-width: 500px) {
  .curator-license__credit {
    flex-direction: column;
    text-align: center;
  }
}