/* New life mockups — vertical, clickable stops (image / date / title) */

.life-chooser { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .life-chooser { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .life-chooser { grid-template-columns: 1fr 1fr; } }

.life-intro { padding: 1.5rem clamp(16px,4vw,46px); background: var(--paper); border-bottom: 3px solid var(--ink); }
.life-intro h1 { margin: 0 0 .5rem; text-transform: uppercase; font-size: clamp(1.8rem,4vw,2.8rem); }
.life-intro p { margin: 0; max-width: 50ch; color: var(--muted); }

/* ===== Artist Road ===== */
.road-wrap { position: relative; max-width: 920px; margin: 0 auto; padding: 2rem 1rem 4rem; }
.road-path {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 54px; margin-left: -27px;
  background:
    linear-gradient(180deg, var(--ink), #3a2a18 30%, #2a1c10 70%, var(--red));
  border-left: 4px solid var(--gold); border-right: 4px solid var(--gold);
  border-radius: 28px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 8px 0 0 rgba(183,43,36,.25);
}
.road-path::before {
  content: ""; position: absolute; left: 50%; top: 12px; bottom: 12px; width: 0;
  border-left: 3px dashed rgba(251,240,214,.75); transform: translateX(-50%);
}
.road-stop {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center;
  margin: 0 0 2.2rem; min-height: 160px;
}
.road-stop:nth-child(even) .road-card { grid-column: 2; }
.road-stop:nth-child(odd) .road-card { grid-column: 1; }
.road-pin {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; background: var(--gold); border: 4px solid var(--ink);
  box-shadow: 0 0 0 3px var(--red); z-index: 3;
}
.road-card {
  display: grid; grid-template-columns: 96px 1fr; gap: .75rem; align-items: center;
  padding: .7rem; text-decoration: none; color: inherit;
  background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--blue);
  transition: transform .2s ease;
}
.road-stop:nth-child(3n) .road-card { box-shadow: 7px 7px 0 var(--red); }
.road-stop:nth-child(4n) .road-card { box-shadow: 7px 7px 0 var(--violet); }
.road-card:hover { transform: translate(-3px,-3px); }
.road-card img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 2px solid var(--ink); }
.road-card .yr { font-family: Arial,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.road-card h3 { margin: .15rem 0; font-size: 1.05rem; line-height: 1.15; }
.road-card p { margin: 0; font-size: .85rem; color: var(--muted); }

/* ===== Vintage Album ===== */
.album-spread {
  max-width: 1100px; margin: 0 auto; padding: 1.5rem clamp(16px,4vw,46px) 3rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1.25rem;
  background: #c4a574;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 10px 10px;
}
.polaroid {
  background: #fffdf6; border: 1px solid #ddd; padding: .55rem .55rem 1.6rem;
  box-shadow: 5px 6px 0 rgba(0,0,0,.2); text-decoration: none; color: inherit;
  transform: rotate(var(--r,-1deg));
}
.polaroid:nth-child(3n) { --r: 2deg; }
.polaroid:nth-child(4n) { --r: -2.5deg; }
.polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #111; }
.album-spread--rich { background: #b8956a; gap: 1.5rem; padding-bottom: 4rem; }
.album-spread--rich .polaroid { padding: .65rem .65rem 1.8rem; box-shadow: 7px 8px 0 rgba(0,0,0,.28); }
.album-spread--rich .polaroid img { min-height: 180px; }
.museum-rooms--rich .museum-panel img { height: 180px; }
.museum-rooms--rich .museum-wall { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 1.15rem; }
.polaroid .stub {
  display: inline-block; margin-top: .45rem; padding: .15rem .4rem;
  border: 1px dashed var(--red); font-family: Arial,sans-serif; font-size: 10px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red);
}
.polaroid h3 { margin: .35rem 0 0; font-family: "Segoe Print","Comic Sans MS",cursive; font-size: 1rem; }
.polaroid .note { font-family: "Segoe Print","Comic Sans MS",cursive; font-size: .85rem; color: #444; margin: .2rem 0 0; }

/* ===== Object Evolution ===== */
.obj-rail { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.obj-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center;
  margin: 0 0 1rem; text-decoration: none; color: inherit;
  border: 3px solid var(--ink); background: var(--paper); padding: .75rem;
  box-shadow: 6px 6px 0 var(--gold);
}
.obj-row:hover { transform: translateX(4px); }
.obj-badge {
  aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  border: 3px solid var(--ink); background: var(--cream);
  font-family: Arial,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem;
}
.obj-row img { width: 88px; height: 88px; object-fit: contain; background: #fff; border: 2px solid var(--ink); float: right; margin-left: .75rem; }
.obj-row h3 { margin: 0 0 .25rem; }
.obj-row .yr { color: var(--blue); font-family: Arial,sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .1em; }

/* ===== Scrapbook ===== */
.scrap-grid {
  max-width: 1100px; margin: 0 auto; padding: 1.5rem clamp(16px,4vw,46px) 3rem;
  display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 1rem;
}
.scrap-card {
  border: 3px solid var(--ink); background: var(--cream); padding: .6rem;
  box-shadow: 6px 6px 0 var(--violet); text-decoration: none; color: inherit;
}
.scrap-card img { width: 100%; height: 150px; object-fit: contain; background: #fff; border: 2px solid var(--ink); }
.scrap-card summary, .scrap-card h3 { margin: .4rem 0 0; font-size: 1rem; }
.scrap-card .yr { font-family: Arial,sans-serif; font-size: 11px; font-weight: 800; color: var(--red); letter-spacing: .1em; }
.scrap-card details { margin-top: .4rem; font-size: .88rem; }
.scrap-card details[open] { background: rgba(255,255,255,.5); padding: .4rem; }

/* ===== Social Feed ===== */
.feed-shell { max-width: 640px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.feed-profile {
  border: 3px solid var(--ink); background: var(--paper); padding: 1rem; margin-bottom: 1rem;
  box-shadow: 8px 8px 0 var(--blue);
}
.feed-profile strong { display: block; font-size: 1.3rem; }
.feed-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: .75rem 0 1.25rem;
}
.feed-grid a { display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); }
.feed-grid img { width: 100%; height: 100%; object-fit: contain; background: #111; }
.feed-post {
  display: block; text-decoration: none; color: inherit;
  border: 3px solid var(--ink); background: #fff; margin: 0 0 .85rem; overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
}
.feed-post img { width: 100%; max-height: 320px; object-fit: contain; background: #111; border-bottom: 3px solid var(--ink); }
.feed-post .meta { padding: .75rem .9rem; }
.feed-post .yr { font-family: Arial,sans-serif; font-size: 11px; font-weight: 800; color: var(--muted); }
.feed-post h3 { margin: .2rem 0; font-size: 1.05rem; }

/* ===== Mini Museum ===== */
.museum-rooms { padding: 0 0 3rem; }
.museum-room {
  padding: 1.5rem clamp(16px,4vw,46px) 2rem; border-bottom: 4px solid var(--ink);
}
.museum-room h2 {
  margin: 0 0 1rem; text-transform: uppercase; letter-spacing: .06em;
  font-size: 1.4rem; color: var(--red);
}
.museum-wall {
  display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1rem;
}
.museum-panel {
  text-decoration: none; color: inherit;
  border: 3px solid var(--ink); background: #111; color: #fff; padding: .5rem;
  box-shadow: 6px 6px 0 var(--gold);
}
.museum-panel img { width: 100%; height: 140px; object-fit: contain; background: #000; display: block; }
.museum-panel .yr { display: block; margin-top: .4rem; font-family: Arial,sans-serif; font-size: 11px; color: var(--gold); letter-spacing: .1em; }
.museum-panel h3 { margin: .2rem 0 0; font-size: .95rem; color: #fff; }
.room-1940s,.room-1950s { background: #efe2c4; }
.room-1960s { background: radial-gradient(circle at 20% 20%,rgba(240,170,39,.3),transparent 20rem),var(--paper); }
.room-1970s { background: linear-gradient(135deg,rgba(183,43,36,.12),var(--paper)); }
.room-1980s,.room-1990s,.room-2000s { background: #e8f0f4; }
.room-2010s,.room-2020s { background: #1a1624; color: #f7f0df; }
.room-2010s h2,.room-2020s h2 { color: var(--gold); }

/* ===== Beautify Vertical ===== */
.beauty-spine { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 3rem; position: relative; }
.beauty-spine::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--ink);
}
.beauty-node {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 0 0 2rem; align-items: center;
}
.beauty-node::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--red); border: 3px solid var(--ink); z-index: 2;
}
.beauty-node:nth-child(odd) .beauty-card { grid-column: 1; }
.beauty-node:nth-child(even) .beauty-card { grid-column: 2; }
.beauty-node:nth-child(3n)::after { background: var(--blue); }
.beauty-node:nth-child(4n)::after { background: var(--gold); }
.beauty-card {
  display: grid; grid-template-columns: 80px 1fr; gap: .65rem; align-items: center;
  text-decoration: none; color: inherit; padding: .65rem;
  border: 2px solid var(--ink); background: var(--paper);
  box-shadow: 5px 5px 0 rgba(16,13,27,.2);
}
.beauty-card img { width: 80px; height: 80px; object-fit: contain; background: #fff; border: 2px solid var(--ink); }
.beauty-card .yr { font-family: Arial,sans-serif; font-weight: 800; font-size: 12px; color: var(--red); }
.beauty-card h3 { margin: .15rem 0 0; font-size: 1rem; }

/* ===== Serpentine Chevron (vertical zig-zag rows) ===== */
.serp-wrap { padding: 1.5rem clamp(16px,4vw,46px) 3rem; background: var(--paper); }
.serp-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1.5rem; position: relative;
}
.serp-row:nth-child(even) { direction: rtl; }
.serp-row:nth-child(even) > * { direction: ltr; }
.serp-row::after {
  content: "⤵"; position: absolute; right: .25rem; bottom: -1.3rem;
  font-size: 1.4rem; color: var(--red); font-weight: 800;
}
.serp-row:nth-child(even)::after { right: auto; left: .25rem; content: "⤵"; }
.serp-row:last-child::after { display: none; }
.serp-cell {
  position: relative; text-decoration: none; color: #fff; min-height: 150px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%);
  background: var(--c, var(--blue));
  display: grid; align-content: end; padding: .7rem .9rem .7rem 1.3rem;
  border: 2px solid var(--ink);
  transition: transform .15s ease;
}
.serp-cell:hover { transform: scale(1.03); z-index: 2; }
.serp-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .35; background: #111;
}
.serp-cell .copy { position: relative; z-index: 1; }
.serp-cell .yr { font-family: Arial,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.serp-cell h3 { margin: .15rem 0 0; font-size: .95rem; line-height: 1.1; text-shadow: 0 1px 2px #000; }

@media (max-width: 800px) {
  .road-stop, .beauty-node { grid-template-columns: 1fr; }
  .road-stop:nth-child(odd) .road-card,
  .road-stop:nth-child(even) .road-card,
  .beauty-node:nth-child(odd) .beauty-card,
  .beauty-node:nth-child(even) .beauty-card { grid-column: 1; }
  .road-path, .road-pin, .beauty-spine::before, .beauty-node::after { display: none; }
  .serp-row { grid-template-columns: 1fr 1fr; }
  .feed-grid { grid-template-columns: repeat(3,1fr); }
}