/* Homepage concepts (/lab/home-1..3/). Ready-made answer on load; motion = reveal, count-up, hover highlight.
   Uses v2 tokens only (cream canvas, violet hero, sun sticker, pink book-off). Reduced motion = everything static. */
.lab-nav{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 var(--spacing-2xl);font-size:var(--text-sm);font-weight:700}
.lab-nav a{text-decoration:none;color:var(--color-text-tertiary);padding:6px 12px;border-radius:var(--radius-full)}
.lab-nav a[aria-current]{background:var(--ink);color:#fff}
.lab-nav a:last-child{margin-left:auto}
.lochint{background:var(--sun-100);border:1px solid var(--sun-200);color:var(--ink);border-radius:var(--radius-xl);padding:10px 14px;font-size:var(--text-sm);margin:0 0 var(--spacing-xl)}
.hc{--ease:cubic-bezier(.2,.8,.2,1)}
.hc mark{background:var(--color-sticker);color:var(--ink);padding:0 .22em;border-radius:.28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hc-countries{margin:var(--spacing-5xl) 0 0}
.hc-cal{margin-top:var(--spacing-4xl)}
.hc-cal .chip{cursor:default;transition:border-color .2s,transform .2s var(--ease)}
.hc-cal .chip:hover,.hc-cal .chip:focus-visible{border-color:var(--ink);transform:translateY(-1px)}
.hc .num{font-variant-numeric:tabular-nums}
.away{display:inline-block;font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--radius-full);background:var(--brand-50);color:var(--brand-800)}
.away:empty{display:none}
.away.past{background:var(--gray-100);color:var(--gray-600)}

/* mini week ribbon: the break as one bar, weekday letters above */
.rib{display:flex;gap:0;margin:var(--spacing-lg) 0 0;font-size:.75rem}
.rc{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:700;color:var(--gray-700);font-variant-numeric:tabular-nums;position:relative}
.rc em{font-style:normal;font-size:.625rem;font-weight:600;color:var(--gray-500);letter-spacing:.04em}
.rc.x{color:var(--gray-400)}
.rc{line-height:1.9em}
.rc.h,.rc.l{color:#fff}
.rc.h::before,.rc.l::before{content:"";position:absolute;z-index:-1;bottom:.15em;left:50%;width:min(1.6em,92%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:var(--color-day-holiday-solid)}
.rc.l::before{border-radius:28%;background:var(--color-day-leave)}
.rib{isolation:isolate}
.rc.in::after{content:"";position:absolute;z-index:-2;left:0;right:0;bottom:0;height:1.9em;background:var(--color-day-range)}
.rc.x+.rc.in::after{border-radius:999px 0 0 999px}.rc.in:has(+.rc.x)::after{border-radius:0 999px 999px 0}

/* ---------- Concept 1: ranked cards ---------- */
.c1-hero{padding-bottom:calc(var(--spacing-3xl) + 3rem)}
.c1-th{margin:var(--spacing-3xl) 0 0;font-size:var(--text-sm);line-height:1.43;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-200)!important}
.c1-h{font-size:clamp(2.25rem,6.2vw,4.5rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 var(--spacing-xl);max-width:14ch}
.c1-h .num{display:inline-block;min-width:2ch;color:var(--sun-200)}
.c1-hero .sub{font-size:var(--text-lg);max-width:40ch}
.c1-top{margin-top:-3rem;position:relative;padding:0 var(--spacing-2xl)}
.c1-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16.5rem),1fr));gap:var(--spacing-xl)}
.c1-card,.c1-long{position:relative;background:var(--color-bg-primary);border:1px solid var(--gray-200);border-radius:var(--radius-4xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .2s;outline-offset:3px}
.c1-card:hover,.c1-card:focus-visible,.c1-long:hover,.c1-long:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--gray-300)}
.c1-card .rank{position:absolute;top:var(--spacing-xl);right:var(--spacing-xl);font-size:var(--text-sm);font-weight:800;color:var(--gray-400);font-variant-numeric:tabular-nums}
.c1-card .deal,.c1-long .deal{font-size:var(--text-lg);line-height:1.3;color:var(--ink);margin:0 0 var(--spacing-xs);padding-right:2.2em;letter-spacing:-.01em}
.c1-card .nm{font-weight:700;color:var(--ink);margin:0 0 2px}
.c1-card .dt,.c1-long .dt{font-size:var(--text-sm);color:var(--color-text-tertiary);margin:0}
.c1-card .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:var(--spacing-lg) 0 0}
.c1-card .eff{font-size:var(--text-xs);font-weight:800;color:var(--pink-700)}
.c1-card.first{grid-column:1/-1;border:2px solid var(--ink);box-shadow:var(--shadow-offset);background:linear-gradient(135deg,#fff 55%,var(--brand-50))}
.c1-card.first:hover,.c1-card.first:focus-visible{box-shadow:0 8px 0 var(--ink)}
.c1-card.first .deal{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.025em}
.c1-card.first .rank{color:var(--ink);background:var(--color-sticker);padding:4px 10px;border-radius:var(--radius-full)}
.c1-card.first .rib{font-size:.9375rem;max-width:30rem}
.c1-long{margin-top:var(--spacing-xl);background:var(--ink);border-color:var(--ink);color:#fff}
.c1-long .label{color:var(--sun-200);margin:0 0 var(--spacing-md)}
.c1-long .deal,.c1-long .deal b{color:#fff}.c1-long .dt{color:var(--gray-300)}
.c1-long .rc{color:#fff}.c1-long .rc em{color:var(--gray-400)}.c1-long .rc.x{color:var(--gray-500)}
.c1-long .rc.in::after{background:rgba(255,255,255,.14)}
.c1-long .rib{max-width:34rem}

/* ---------- Concept 2: Wrapped-style story ---------- */
.story{position:relative;background:var(--color-bg-hero);color:#fff;border-radius:32px;padding:var(--spacing-3xl) var(--spacing-3xl) var(--spacing-4xl);overflow:hidden;isolation:isolate;
  background-image:radial-gradient(60% 80% at 100% 0%,rgba(236,72,153,.45),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(253,230,138,.28),transparent 60%)}
.s-bars{display:flex;gap:6px;margin:0 0 var(--spacing-3xl)}
.s-bars i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.28);overflow:hidden}
.s-bars b{display:block;height:100%;width:0;background:#fff;border-radius:inherit}
.s-bars i.done b{width:100%}
.s-bars i.now b{width:100%}
.story.play .s-bars i.now b{width:0;animation:s-fill var(--dur,5s) linear forwards}
.story.paused .s-bars i.now b{animation-play-state:paused}
@keyframes s-fill{to{width:100%}}
.slides{display:grid;grid-template-columns:minmax(0,1fr);min-height:min(62vh,30rem)}
.slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.slide>*{max-width:44rem}.slide{min-width:0;overflow-wrap:anywhere}.c3-hero h1,.c3-top>div{min-width:0}
.s-k{font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--sun-200);margin:0 0 var(--spacing-xl)}
.s-big{font-size:clamp(6rem,24vw,13rem);line-height:.85;font-weight:900;letter-spacing:-.06em;margin:0;color:#fff;font-variant-numeric:tabular-nums}
.s-line{font-size:clamp(1.5rem,4.2vw,2.75rem);line-height:1.1;font-weight:800;letter-spacing:-.03em;color:#fff;margin:var(--spacing-xl) 0}
.s-mid{font-size:clamp(2.25rem,7vw,4.75rem);line-height:1.02;font-weight:900;letter-spacing:-.045em;color:#fff;margin:0 0 var(--spacing-xl)}
.s-sub{font-size:var(--text-lg);color:rgba(255,255,255,.82);margin:0}
.slide .rib{font-size:1rem;max-width:30rem;margin-top:var(--spacing-2xl);color:#fff}
.slide .rc{color:#fff}.slide .rc em{color:rgba(255,255,255,.6)}.slide .rc.x{color:rgba(255,255,255,.4)}
.slide .rc.in::after{background:rgba(255,255,255,.18)}
.slide .rc.h::before{background:#fff}.slide .rc.h{color:var(--brand-700)}
.s-away .away{font-size:clamp(1.25rem,3vw,1.75rem);padding:8px 18px;margin-top:var(--spacing-2xl);background:var(--color-sticker);color:var(--ink)}
.slide .ywrap-mini{max-width:none;width:100%;margin-top:var(--spacing-xl);background:rgba(255,255,255,.08);padding:12px;border-radius:14px}
.slide .ywrap-mini .strip{height:64px}
.slide .ywrap-mini span,.slide .ywrap-mini b{color:rgba(255,255,255,.75)}
.slide .ywrap-mini .strip i:not(.h):not(.l):not(.b){background:rgba(255,255,255,.14)}.slide .ywrap-mini .strip .w{background:rgba(255,255,255,.24)}
.slide .ywrap-mini .strip .h{background:#fff}
.s-prev,.s-next{position:absolute;top:0;bottom:0;width:30%;border:0;background:none;cursor:pointer;z-index:2;padding:0}
.s-prev{left:0;cursor:w-resize}.s-next{right:0;cursor:e-resize}
.s-prev:focus-visible,.s-next:focus-visible{outline:3px solid var(--sun-200);outline-offset:-6px;border-radius:24px}
.s-pause{position:absolute;z-index:3;right:var(--spacing-xl);bottom:var(--spacing-xl);border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:var(--text-xs);font-weight:700;padding:6px 12px;border-radius:var(--radius-full);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.s-pause:hover{background:rgba(255,255,255,.2)}
.s-big span{display:inline-block}

/* ---------- Concept 3: editorial timeline ---------- */
.c3-hero{padding:var(--spacing-3xl) 0 0}
.c3-hero .kicker{color:var(--color-text-tertiary)!important}
.c3-hero h1{margin:0 0 var(--spacing-xl);line-height:.9;letter-spacing:-.055em;font-weight:900}
.c3-hero .yr{display:block;font-size:clamp(3.5rem,22vw,15rem);color:var(--brand-700);background:linear-gradient(180deg,var(--brand-600),var(--brand-800));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.c3-hero .yr2{display:block;font-size:clamp(2rem,6vw,4.5rem);color:var(--ink);letter-spacing:-.04em}
.c3-lead{font-size:clamp(1.125rem,2.2vw,1.5rem);color:var(--ink);max-width:36ch;line-height:1.35}
.c3-lead b{background:var(--color-sticker);padding:0 .25em;border-radius:.3em}
.c3-next{display:inline-flex;border-radius:var(--radius-3xl)!important;flex-wrap:wrap;gap:4px 12px;align-items:center;background:#fff;border:1px solid var(--gray-200);box-shadow:var(--shadow-sm);border-radius:var(--radius-full);padding:8px 10px 8px 16px;font-size:var(--text-sm);color:var(--color-text-secondary)}
.tl{display:none;position:relative;height:27rem;margin:var(--spacing-3xl) 0 0;--top:13rem}
.tl-line{position:absolute;left:0;right:0;top:var(--top);height:2px;background:var(--ink);border-radius:2px;transform-origin:left center}
.tl-m span{position:absolute;left:calc(var(--x)*100%);top:calc(var(--top) + 8px);font-size:var(--text-xs);font-weight:700;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;line-height:1;padding-left:5px;border-left:1px solid var(--gray-400)}
.tl-h{position:absolute;left:calc(var(--x)*100%);top:var(--top);width:12px;height:12px;margin:-5px 0 0 -6px;border-radius:50%;background:var(--color-day-holiday-solid);box-shadow:0 0 0 3px var(--color-bg-canvas);z-index:2;pointer-events:none}
.tl-b{position:absolute;left:calc(var(--x)*100%);top:calc(var(--top) - 4px);width:max(10px,calc(var(--w)*100%));height:10px;text-decoration:none;color:var(--ink);z-index:1;--o:1.1rem}
.tl-b.l1,.tl-b.l4{--o:4.6rem}.tl-b.l2,.tl-b.l5{--o:8.1rem}
.tl-b .bar{position:absolute;inset:0;border-radius:10px;background:var(--color-day-leave)}
.tl-b .tlab{position:absolute;left:0;width:max-content;max-width:15rem;font-size:var(--text-xs);line-height:1.3;background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:5px 10px;box-shadow:var(--shadow-xs);transition:transform .25s var(--ease),box-shadow .25s,border-color .2s}
.tl-b .tlab b{color:var(--pink-700);margin-right:2px;white-space:nowrap}.tl-b .tlab em{display:block;font-style:normal;color:var(--color-text-tertiary)}
.tl-b:hover .tlab,.tl-b:focus-visible .tlab{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--ink)}
.tl-b::before{content:"";position:absolute;left:4px;width:1px;background:var(--gray-400);height:var(--o)}
.tl-b.l0 .tlab,.tl-b.l1 .tlab,.tl-b.l2 .tlab{bottom:calc(100% + var(--o))}
.tl-b.l0::before,.tl-b.l1::before,.tl-b.l2::before{bottom:100%}
.tl-b.l3 .tlab,.tl-b.l4 .tlab,.tl-b.l5 .tlab{top:calc(100% + var(--o))}
.tl-b.l3::before,.tl-b.l4::before,.tl-b.l5::before{top:100%}
.tl-b.rt .tlab{left:auto;right:0}.tl-b.rt::before{left:auto;right:4px}
.tl .today{position:absolute;top:calc(var(--top) - 24px);height:48px;width:2px;background:var(--pink-500)}
.tv{list-style:none;margin:var(--spacing-3xl) 0 0;padding:0 0 0 22px;position:relative}
.tv::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--ink);border-radius:2px}
.tv-m{font-size:var(--text-sm);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);margin:var(--spacing-2xl) 0 var(--spacing-md)}
.tv-m:first-child{margin-top:0}
.tv-b{position:relative;background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-3xl);padding:var(--spacing-lg) var(--spacing-xl);margin:0 0 var(--spacing-md);box-shadow:var(--shadow-xs)}
.tv-b p{margin:0}.tv-b b{color:var(--pink-700)}
.tv-b .dot{position:absolute;left:-22px;top:1.1rem;width:12px;height:12px;border-radius:50%;background:var(--color-day-leave);box-shadow:0 0 0 3px var(--color-bg-canvas)}
.tv-b .rib{max-width:22rem}
@media (min-width:880px){.tl{display:block}.tv{display:none}}

/* ---------- motion (opt-out with reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .hc [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .8s var(--ease),box-shadow .35s var(--ease),border-color .2s;transition-delay:calc(var(--k,0)*70ms)}
  .js .hc [data-reveal].in{opacity:1;transform:none}
  .js .hc .c1-card[data-reveal].in:hover,.js .hc .c1-card[data-reveal].in:focus-visible{transform:translateY(-4px);transition-delay:0s}
  .js .hc .c1-long[data-reveal].in:hover{transform:translateY(-4px);transition-delay:0s}
  .js .hc .c1-h,.js .hc .c1-hero .sub,.js .hc .c3-hero h1,.js .hc .c3-lead,.js .hc .c3-next{animation:hc-up .9s var(--ease) both}
  .js .hc .c1-hero .sub,.js .hc .c3-lead{animation-delay:.12s}.js .hc .c3-next{animation-delay:.22s}
  .js .hc .rc.in{animation:hc-pop .5s var(--ease) both;animation-delay:calc(var(--k,0)*70ms + .25s)}
  .js .hc .c3-hero .yr{animation:hc-yr 1.1s var(--ease) both}
  .js .tl[data-reveal]{opacity:1;transform:none}
  .js .tl .tl-line{transform:scaleX(0);transition:transform 1.2s var(--ease)}
  .js .tl.in .tl-line{transform:none}
  .js .tl .tl-h,.js .tl .tl-m span{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--x)*1.1s)}
  .js .tl.in .tl-h,.js .tl.in .tl-m span{opacity:1}
  .js .tl .tl-b{opacity:0;transform:translateY(-8px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--x)*1.1s + .25s)}
  .js .tl.in .tl-b{opacity:1;transform:none}
  .js .hc .year.lit .days .h::before,.js .hc .year.lit .days .l::before{animation:hc-dot .45s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i)*60ms + .25s)}
}
@keyframes hc-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hc-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hc-yr{from{opacity:0;letter-spacing:-.02em;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes hc-dot{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}

@media (max-width:639px){
  .story{border-radius:24px;padding:var(--spacing-2xl) var(--spacing-xl) var(--spacing-4xl)}
  .slides{min-height:26rem}
  .c1-top{padding:0 var(--spacing-md)}
  .c1-card,.c1-long{padding:var(--spacing-xl)}
  .lab-nav a:last-child{margin-left:0}
}

.c3-top{display:grid;gap:var(--spacing-3xl)}
.c3-stats{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-lg);align-content:end}
.c3-stats .st{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-3xl);padding:var(--spacing-xl);box-shadow:var(--shadow-xs)}
.c3-stats .st:first-child{background:var(--color-bg-hero);border-color:var(--color-bg-hero)}
.c3-stats .st:first-child dt,.c3-stats .st:first-child .v,.c3-stats .st:first-child .muted{color:#fff}
.c3-stats dt{font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-tertiary)}
.c3-stats dd{margin:0}.c3-stats .v{display:block;font-size:clamp(2rem,4vw,3rem);line-height:1.1;font-weight:900;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.c3-stats .muted{display:block;overflow-wrap:anywhere}
@media (min-width:880px){.c3-top{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end}}
@media (prefers-reduced-motion:no-preference){.js .c3-stats .st{animation:hc-up .8s var(--ease) both;animation-delay:calc(var(--k)*90ms + .3s)}}
.c1-card .eff{background:none;padding:0}
@media (min-width:880px){
  .c1-card.first{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);grid-template-areas:"deal rib" "nm rib" "dt rib" "meta rib";column-gap:var(--spacing-4xl);align-items:start;padding:var(--spacing-3xl)}
  .c1-card.first .deal{grid-area:deal}.c1-card.first .nm{grid-area:nm}.c1-card.first .dt{grid-area:dt}.c1-card.first .meta{grid-area:meta}
  .c1-card.first .rib{grid-area:rib;align-self:center;margin:0;font-size:1.125rem;padding-right:2.5rem}
  .c3-hero .yr{font-size:clamp(5.5rem,13.5vw,12rem)}
}
.c1-card .deal b,.c1-long .deal b{white-space:nowrap}