/* alive-claude-v3.2 · home page (desktop). Loaded only on index.html, after style.css and v3.css.
   Brand and product sections keep the paper ground; the season layer (cover, card) takes the season colour. */

html[data-letter="01"]{--s-base:#dfe3e4;--pal:#b63d29}
html[data-letter="02"]{--s-base:#e5e7d9;--pal:#5f8a6f}
html[data-letter="03"]{--s-base:#d9e4e2;--pal:#4f7f9c}

/* ── 1 hero: one line under the title; the promise moves to the close ── */
.v32 .hero .promise{margin-top:30px}

/* ── 2 season cover ───────────────────────────────────────────────── */
.sc{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:max(760px,100vh);
  padding:12vh var(--col) 10vh;background:var(--s-base)}
.sc-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sc-bg img{width:100%;height:100%;object-fit:cover;opacity:.62;filter:saturate(.55) contrast(.84) brightness(1.05);mix-blend-mode:multiply;
  transform:scale(1.04);animation:air 36s ease-in-out infinite alternate}
@keyframes air{to{transform:scale(1.1) translateX(-1.2%)}}
@media (prefers-reduced-motion:reduce){.sc-bg img{animation:none}}
.sc-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--s-base) 0%,color-mix(in srgb,var(--s-base) 93%,transparent) 40%,
    color-mix(in srgb,var(--s-base) 45%,transparent) 60%,transparent 84%)}
.sc.r .sc-bg::after{background:linear-gradient(270deg,var(--s-base) 0%,color-mix(in srgb,var(--s-base) 93%,transparent) 40%,
    color-mix(in srgb,var(--s-base) 45%,transparent) 60%,transparent 84%)}
.sc-bg::before{content:"";position:absolute;inset:auto 0 0 0;height:16%;z-index:1;
  background:linear-gradient(0deg,var(--paper2),transparent)}

.sc-in{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.82fr);gap:8vw;align-items:center}
.sc.r .sc-in{grid-template-columns:minmax(0,.82fr) minmax(0,1.1fr)}
.sc.r .sc-tx{order:2}
.sc.r .sc-fig{order:1}

.sc-eb{display:flex;align-items:center;gap:12px;color:var(--pal)}
.sc-eb i{width:9px;height:9px;border-radius:50%;background:var(--pal);display:inline-block}
.sc-date{margin-top:18px;font-family:"Sentient",serif;font-weight:300;font-size:18px;letter-spacing:.005em;color:var(--ink2)}
.sc h2{margin-top:30px;font-size:clamp(58px,5.7vw,108px);line-height:.95;letter-spacing:-.03em}
.sc h2 em{color:color-mix(in srgb,var(--pal) 80%,#24160f)}
.sc-obs{margin-top:34px;max-width:31em;font-family:"Sentient",serif;font-weight:300;font-size:clamp(19px,1.42vw,23px);line-height:1.52;color:var(--ink2)}

.sc-pcs{display:flex;align-items:center;gap:44px;max-width:640px;margin-top:42px;padding-top:26px;border-top:1px solid rgba(29,25,21,.16)}
.sc-lead{display:flex;align-items:center;gap:16px}
.sc-lead img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 14px 28px rgba(20,22,26,.28);transition:transform .5s}
.sc-lead:hover img{transform:translateY(-3px)}
.sc-lead>span{display:flex;flex-direction:column;gap:5px}
.sc-lead .mono{font-size:9.5px;color:var(--mute)}
.sc-lead b{font-family:"NotoSerifSCsub",serif;font-weight:400;font-size:19px;letter-spacing:.14em}
.sc-lead small{font-family:"Sentient",serif;font-weight:300;font-size:15px;color:var(--ink2)}
.sc-lead em{font-style:normal;font-size:12px;color:var(--mute)}
.sc-co{display:flex;flex-direction:column;gap:10px}
.sc-co .mono{font-size:9.5px;color:var(--mute)}
.sc-co>div{display:flex}
.sc-co a+a{margin-left:-10px}
.sc-co img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--s-base);box-shadow:0 10px 20px rgba(20,22,26,.22);transition:transform .4s}
.sc-co a:hover img{transform:translateY(-3px)}
.sc-cta{display:flex;align-items:center;gap:28px;margin-top:40px}

.sc-fig{position:relative;justify-self:center;width:min(100%,560px)}
.sc-ph{overflow:hidden;background:#0b0a09;box-shadow:0 50px 90px -30px rgba(18,22,26,.55)}
.sc-ph.light{background:#efe8dc}
.sc-ph img{width:100%;height:100%;object-fit:cover}
.sc-fig .pm-cover{position:absolute;left:-58px;top:-50px;z-index:3;width:138px;height:138px;color:var(--pal)}
.sc.r .sc-fig .pm-cover{left:auto;right:-58px}
.sc-fig figcaption{display:inline-block;margin-top:14px;padding:6px 10px;background:color-mix(in srgb,var(--s-base) 86%,transparent);color:var(--ink2);font-size:10px;letter-spacing:.12em}
.sc-fig figcaption .zh{font-size:12px;letter-spacing:.1em;text-transform:none}
.sc-credit{position:absolute;z-index:2;right:var(--col);bottom:3.4vh;font-size:9px;letter-spacing:.12em;text-transform:none;color:rgba(29,25,21,.5)}

/* ── 3 sixteen pieces: one gallery row, drifting ───────────────────── */
.gallery .sec-head{margin-bottom:8vh}
.gal{position:relative;margin:0 calc(var(--col) * -1)}
.gal-track{--rowh:clamp(360px,31vw,520px);display:flex;overflow-x:auto;overflow-y:hidden;padding:18px 0 6px var(--col);
  scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3.5%,#000 94%,transparent)}
.gal-track::-webkit-scrollbar{display:none}
.gal-track.drag{cursor:grabbing}
.gal-track img{-webkit-user-drag:none;user-select:none}
.gc{flex:none;width:calc(var(--rowh) * var(--ar));margin-right:clamp(24px,2.3vw,38px)}
.gc>a{display:block;color:inherit;outline:none}
.gc-frame{position:relative;display:block;height:var(--rowh);overflow:hidden;background:#0b0a09;
  box-shadow:0 22px 40px -18px rgba(40,26,14,.42);transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .8s cubic-bezier(.2,.7,.2,1)}
.gc-frame.light{background:#efe8dc}
.gc-frame>img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.gc-alt{position:absolute;inset:0;z-index:1;clip-path:circle(0 at var(--x,50%) var(--y,50%));
  transition:clip-path .9s cubic-bezier(.65,0,.2,1)}
.gc-alt img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.gc-chip{position:absolute;left:14px;bottom:14px;z-index:2;padding:6px 10px 5px;background:rgba(251,247,239,.94);color:var(--ink);
  font-size:9.5px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.gc-frame.on,.gc>a:focus-visible .gc-frame{transform:translateY(-8px);box-shadow:0 44px 70px -26px rgba(40,26,14,.55)}
.gc-frame.on>img{transform:scale(1.03)}
.gc-frame.on .gc-alt,.gc>a:focus-visible .gc-alt{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.gc-frame.on .gc-alt img,.gc>a:focus-visible .gc-alt img{transform:scale(1)}
.gc-frame.on .gc-chip,.gc>a:focus-visible .gc-chip{opacity:1;transform:none;transition-delay:.25s}
.gc>a:focus-visible .gc-frame{outline:2px solid var(--ink);outline-offset:4px}
.gc-info{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:5px;padding-top:18px}
.gc-info .mono{width:100%;font-size:10px;color:var(--mute)}
.gc-info b{font-family:"NotoSerifSCsub",serif;font-weight:400;font-size:17px;letter-spacing:.14em}
.gc-info b.col-name{font-family:"Sentient",serif;font-weight:300;font-size:18px;letter-spacing:-.005em;line-height:1.25}
.gc-info small{font-family:"Sentient",serif;font-weight:300;font-size:15px;color:var(--ink2)}
.gc-info em{width:100%;font-style:normal;font-size:12.5px;line-height:1.45;color:var(--mute)}
.gc-go{font-style:normal;font-size:14px;color:var(--ink);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s}
.gc>a:hover .gc-go,.gc>a:focus-visible .gc-go{opacity:1;transform:none}
.gc-end{--ar:.74}
.gc-end-in{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;height:var(--rowh);padding:34px 30px;background:var(--night);color:var(--nink);
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gc-end-in .mono{color:var(--nmute)}
.gc-end-in b{font-family:"Sentient",serif;font-weight:300;font-size:clamp(26px,2.2vw,34px);line-height:1.12;letter-spacing:-.015em}
.gc-end-in b em{color:#f0bfae}
.gc-end-in .lnk{align-self:flex-start;border-color:rgba(236,228,214,.45)}
.gc-end>a:hover .gc-end-in{transform:translateY(-8px)}
.gal-foot{display:flex;align-items:center;gap:28px;margin:34px var(--col) 0}
.gal-count{flex:none;min-width:64px;color:var(--mute);font-size:10.5px}
.gal-count b{font-weight:400;color:var(--ink)}
.gal-bar{position:relative;flex:1;height:1px;background:rgba(29,25,21,.16)}
.gal-bar i{position:absolute;left:0;top:-1px;width:16%;height:3px;background:var(--ink)}
.gal-btns{display:flex;align-items:center;gap:10px}
.gal-arrow{width:46px;height:46px;border:1px solid rgba(29,25,21,.22);border-radius:50%;background:transparent;font-size:15px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.gal-arrow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gal-play{height:46px;padding:0 18px;border:1px solid rgba(29,25,21,.22);border-radius:999px;background:transparent;cursor:pointer;font-size:9.5px;color:var(--mute);
  transition:border-color .3s,color .3s}
.gal-play:hover{border-color:var(--ink);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .gc-alt{clip-path:none;opacity:0;transition:opacity .3s}
  .gc-frame.on .gc-alt,.gc>a:focus-visible .gc-alt{clip-path:none;opacity:1}
  .gc-frame,.gc-frame>img,.gc-alt img{transition:none}
  .gal-play{display:none}
}

/* ── 4 two ways: the halves share one row structure, each with one season panel ── */
.v32 .ways-grid{grid-template-rows:repeat(7,auto);row-gap:0}
.v32 .way{display:grid;grid-row:span 7;grid-template-rows:subgrid}
.v32 .way .wt{display:contents}
.w-now{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:24px;max-width:560px;margin-top:30px;
  padding:18px 24px 18px 18px;background:var(--s-base);transition:background .35s}
.w-now::after{content:"→";font-size:15px;opacity:.45;transition:opacity .35s,transform .35s}
.w-now:hover{background:color-mix(in srgb,var(--s-base) 82%,var(--pal))}
.w-now:hover::after{opacity:1;transform:translateX(4px)}
.wn-v{display:grid;place-items:center;width:96px;height:96px}
.wn-pc img{width:96px;height:96px;border-radius:50%;object-fit:cover;box-shadow:0 12px 24px rgba(40,26,14,.25)}
.wn-card{position:relative;width:82px;height:100px;padding:10px 9px;background:var(--card);transform:rotate(-3deg);
  box-shadow:0 12px 24px rgba(40,26,14,.2);display:flex;align-items:flex-end;justify-self:center}
.wn-card .pm-wn{position:absolute;right:-16px;top:-14px;width:50px;height:50px;color:var(--pal)}
.wn-card i{font-family:"Sentient",serif;font-weight:300;font-size:11.5px;line-height:1.2;color:var(--ink)}
.wn-tx{display:flex;flex-direction:column;gap:6px}
.wn-tx .mono{color:var(--pal);font-size:9.5px}
.wn-tx b{font-family:"Sentient",serif;font-weight:300;font-size:22px;line-height:1.15;letter-spacing:-.005em}
.wn-tx em{font-style:normal;font-size:13.5px;line-height:1.45;color:var(--ink2)}

/* ── 6 further ────────────────────────────────────────────────────── */
.v32 .further{padding:12vh var(--col) 12vh}

/* ── 7 close: promise, the year, the next letter ──────────────────── */
.v32 .close-in{grid-template-columns:minmax(0,1.15fr) 300px minmax(300px,1fr);gap:5vw;align-items:center}
.v32 .close .q{font-size:clamp(38px,3.5vw,60px)}
.cl-r{display:contents}
.cl-ring{display:block;width:300px}
.cl-ring .yr{width:300px}
.close .yr-base{stroke:rgba(236,228,214,.22)}
.close .yr-tick{stroke:var(--nink);opacity:.35}
.close .yr-m,.close .yr-d,.close .yr-cs,.close .yr-mo{fill:var(--nmute)}
.close .yr-arc{stroke:var(--nink);opacity:.22}
.close .yr-dot{fill:var(--night);stroke:var(--nink)}
.close .yr-zh,.close .yr-c{fill:var(--nink)}
.close .yr-zh{font-size:19px}.close .yr-d{font-size:10px}.close .yr-cs{font-size:10.5px}.close .yr-cn{font-size:10.5px}
.close .yr-cn{fill:#f0bfae}

/* narrow screens: not designed yet; keep the page readable */
@media (max-width:900px){
  .sc{padding:12vh 22px;min-height:0}
  .sc-in,.sc.r .sc-in{grid-template-columns:1fr;gap:48px}
  .sc.r .sc-tx{order:0}
  .sc-fig .pm-cover,.sc.r .sc-fig .pm-cover{right:-8px;left:auto;top:-40px;width:96px;height:96px}
  .sc-pcs{flex-wrap:wrap;gap:24px}
  .gal-track{--rowh:clamp(260px,62vw,340px)}
  .v32 .ways-grid{grid-template-rows:none}.v32 .way{grid-row:auto;display:block}.v32 .way .wt{display:block}
  .v32 .close-in{grid-template-columns:1fr}
  .cl-ring,.cl-ring .yr{width:240px}
}