.g-hero { position: relative; padding: calc(var(--nav-h) + 70px) 0 50px; background: linear-gradient(180deg, var(--paper-2), var(--paper)); }
.g-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.g-hero h1, .a-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
.g-hero h1 em, .layers h2 em { color: var(--cran); font-weight: 500; }
.lead { font-size: 1.12rem; color: var(--ink-2); }

.season-switch { position: relative; display: grid; gap: 6px; background: #fffaf0; padding: 6px; border-radius: 22px; box-shadow: var(--shadow); }
.season-switch button { position: relative; z-index: 1; border: 0; background: none; text-align: left; padding: 12px 16px; border-radius: 16px; transition: color .3s; }
.season-switch b { display: block; font-family: var(--serif); font-size: 1.35rem; }
.season-switch small { color: var(--muted); font-weight: 600; }
.season-switch button.on { color: #fff; }
.season-switch button.on small { color: rgba(255,255,255,.8); }
.season-pill { position: absolute; left: 6px; right: 6px; border-radius: 16px; background: linear-gradient(120deg, var(--cran), #7d0a1d); box-shadow: 0 10px 24px -10px var(--cran-glow); transition: top .5s cubic-bezier(.3,1.3,.4,1), height .5s; }

/* dress-up */
.dress { padding: 30px 0 100px; }
.dress-grid { display: grid; grid-template-columns: 250px 1fr 340px; gap: 30px; align-items: center; }
.item-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item-list li button { width: 100%; display: flex; gap: 12px; align-items: center; border: 0; background: none; padding: 9px 12px; border-radius: 14px; text-align: left; font-weight: 700; color: var(--ink-2); transition: .25s; }
.item-list li button .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-size: 1rem; transition: .3s; flex: none; }
.item-list li button:hover, .item-list li button.on { background: #fffaf0; color: var(--ink); box-shadow: 0 8px 20px -12px rgba(0,0,0,.3); }
.item-list li button.on .ic { background: var(--cran); color: #fff; transform: scale(1.1) rotate(-8deg); }
.item-list li.off { opacity: .35; }

.figure-stage { position: relative; aspect-ratio: 400 / 780; max-height: 82vh; margin-inline: auto; width: 100%; max-width: 440px; }
.stage-glow { position: absolute; inset: 8% -10% 4%; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(201,160,74,.35), transparent 65%); filter: blur(10px); }
#hikerBox, #hikerBox svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hiker .part { cursor: pointer; transition: opacity .35s, filter .35s, transform .45s cubic-bezier(.2,1.4,.4,1); transform-box: fill-box; transform-origin: center; }
.hiker.focus .part:not(.on), .hiker.focus .head, .hiker.focus .ground, .hiker.focus .part-follow:not(.on) { opacity: .28; filter: grayscale(.85); }
.hiker .part.on { filter: drop-shadow(0 0 10px rgba(255,210,120,.9)) drop-shadow(0 0 2px #fff); transform: scale(1.03); }
.hiker .net { transition: opacity .6s, transform .6s; }
.hiker .quilt { opacity: 0; transition: opacity .6s; }
.s-late .hiker .quilt, .s-spring .hiker .quilt { opacity: 1; }
.s-late .hiker .net { opacity: 0 !important; transform: translateY(-20px); pointer-events: none; }
.s-late .hiker { --jk: #6a4a2c; --jk2: #4c331d; --gl: #5b6d3f; }
.s-spring .hiker { --jk: #3d5568; --jk2: #2b3d4b; --gl: #c8102e; }
.s-spring .hiker .net { opacity: 0 !important; pointer-events: none; }

.hotspots { position: absolute; inset: 0; pointer-events: none; }
.hs { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 0; pointer-events: auto; box-shadow: 0 0 0 4px rgba(200,16,46,.85), 0 6px 14px rgba(0,0,0,.35); transition: transform .3s, opacity .3s; }
.hs::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cran-2); animation: hsping 2s infinite; }
.hs:hover, .hs.on { transform: scale(1.3); background: var(--cran); }
.hs.hide { opacity: 0; pointer-events: none; }
@keyframes hsping { from { transform: scale(1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

.thermo { position: absolute; top: 2%; left: -2%; width: 14px; height: 140px; border-radius: 8px; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--paper-3); }
.thermo span { position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 5px; background: linear-gradient(var(--cran-2), var(--cran)); transition: height 1s cubic-bezier(.3,1.3,.4,1); height: 60%; }
.thermo i { position: absolute; left: 50%; bottom: -14px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--cran); box-shadow: 0 0 0 3px #fffaf0; }

.item-card { background: #fffaf0; border-radius: 24px; padding: 26px 24px; box-shadow: var(--shadow); min-height: 380px; position: relative; overflow: hidden; }
.item-card::before { content: ''; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(200,16,46,.12), transparent 70%); }
.item-card .big-ic { font-size: 2.6rem; line-height: 1; }
.item-card h3 { font-size: 2.1rem; margin: 10px 0 4px; }
.item-card .why { font-family: var(--hand); font-size: 1.45rem; color: var(--cran); line-height: 1.15; margin-bottom: 12px; }
.item-card ul { padding-left: 18px; margin: 10px 0; }
.item-card li { margin-bottom: 5px; font-size: .95rem; }
.item-card .no { color: var(--muted); font-size: .9rem; border-top: 1px dashed var(--paper-3); padding-top: 10px; margin-top: 12px; }
.item-card .no b { color: var(--cran); }
.item-card .tag { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); }
.item-card .tag.must { background: var(--cran); color: #fff; }

@media (max-width: 1080px) {
  .dress-grid { grid-template-columns: 1fr 1fr; }
  .item-list { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); order: 3; }
}
@media (max-width: 760px) {
  .g-hero-in { grid-template-columns: 1fr; }
  .dress-grid { grid-template-columns: 1fr; }
  .figure-stage { max-height: 70vh; max-width: 340px; }
}

/* layers */
.layers { position: relative; padding: 100px 0; background: var(--paper-2); }
.layers > * { position: relative; z-index: 1; }
.layer-stack { display: grid; gap: 14px; margin-top: 40px; perspective: 1200px; }
.layer { display: flex; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 22px; color: #fff; transform-origin: left center; transition: transform .5s cubic-bezier(.2,1.3,.3,1); }
.layer:hover { transform: translateX(14px) rotateY(-6deg); }
.layer b { font-family: var(--serif); font-size: 3.4rem; line-height: 1; opacity: .5; }
.layer h4 { font-size: 1.7rem; margin: 0 0 4px; }
.layer p { margin: 0; opacity: .92; }
.l1 { background: linear-gradient(110deg, #c9a04a, #a77b2b); }
.l2 { background: linear-gradient(110deg, #8a6a3a, #5f4520); margin-left: 4%; }
.l3 { background: linear-gradient(110deg, #566d3a, #2f3d20); margin-left: 8%; }

/* pack */
.pack { padding: 100px 0; }
.pack-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.progress { position: relative; width: 120px; height: 120px; }
.progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress circle { fill: none; stroke-width: 10; }
.progress .bg { stroke: var(--paper-2); }
.progress .fg { stroke: var(--cran); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .6s cubic-bezier(.3,1.2,.4,1); }
.progress > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.progress b { font-family: var(--serif); font-size: 2.4rem; line-height: 1; color: var(--cran); }
.progress small { font-weight: 700; color: var(--muted); }
.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 34px; }
.pack-col { background: #fffaf0; border-radius: 22px; padding: 22px; box-shadow: var(--shadow); }
.pack-col h4 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.pack-col h4 i { font-style: normal; font-size: .75rem; font-family: var(--sans); font-weight: 800; color: #fff; background: var(--c, var(--cran)); padding: 3px 9px; border-radius: 999px; letter-spacing: .05em; }
.chk { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; cursor: pointer; border-radius: 10px; transition: background .2s; }
.chk:hover { background: var(--paper); }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk .box { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper-3); display: grid; place-items: center; transition: .3s cubic-bezier(.2,1.6,.4,1); margin-top: 1px; }
.chk .box::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a98, #c8102e 55%, #5c0614); transform: scale(0); transition: transform .35s cubic-bezier(.2,1.8,.4,1); }
.chk input:checked + .box { border-color: var(--cran); }
.chk input:checked + .box::after { transform: scale(1.4); }
.chk input:focus-visible + .box { box-shadow: 0 0 0 4px rgba(229,56,79,.25); }
.chk span.t { font-weight: 600; }
.chk span.t small { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; }
.chk input:checked ~ .t { text-decoration: line-through; text-decoration-color: var(--cran); color: var(--muted); }
.pack-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.pack-actions .btn-ghost { color: var(--ink); }

/* rules */
.rules { position: relative; padding: 100px 0 120px; background: var(--paper-2); }
.rules > * { position: relative; z-index: 1; }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.rule { perspective: 1000px; height: 210px; }
.rule-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.3,.4,1); }
.rule:hover .rule-in, .rule:focus-within .rule-in, .rule.flip .rule-in { transform: rotateY(180deg); }
.rule .front, .rule .back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 22px; padding: 24px; }
.rule .front { background: var(--bog-2); color: #f6efdd; display: flex; flex-direction: column; justify-content: space-between; background-image: radial-gradient(circle at 85% 20%, rgba(200,16,46,.45), transparent 40%); }
.rule .front span { font-family: var(--serif); font-size: 3rem; color: var(--cran-2); line-height: 1; }
.rule .front h4 { font-size: 2rem; margin: 0; }
.rule .back { background: #fffaf0; transform: rotateY(180deg); display: flex; align-items: center; font-size: 1rem; color: var(--ink-2); box-shadow: var(--shadow); }
@media (max-width: 860px) { .rule-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .rule-grid { grid-template-columns: 1fr; } }

@media print {
  .nav, .footer, .g-hero, .dress, .layers, .rules, .pack-actions, .progress { display: none !important; }
  .pack { padding: 0; } .pack-col { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .chk .box { border-color: #000; }
}