/* Plate 7, "Live in 14 days." A light plate: the v1 timeline set in the v2 type.
   Phone: heading, the 14-day arcade, the steps as an index, the studio photo, ownership.
   Desktop (>=900px): the arcade spans the page with leader lines down to the four steps, then photo | ownership.
   Without .is-live (no JS, reduced motion) every bar is filled and every step lit: the finished still. */
.days2{
  --paper:#EEE9DE;--paper-2:#E2DCCF;--ink:#0F1A1B;--ink-2:#3E4B4A;--ink-3:#5F6A68;
  --sea-deep:#0B4A47;--sea-lit:#0C8F86;--flame:#E2352B;--lagoon:#46E8D4;
  --gap:5px;--bar-h:176px;--dot:8px;
  padding:clamp(88px,12svh,128px) var(--g) clamp(96px,13svh,144px);
  background:var(--paper);color:var(--ink);overflow:clip;
}
.days2 ::selection{background:var(--sea-lit);color:var(--paper)}
.days2 :focus-visible{outline-color:var(--sea-lit)}
.d2-wrap{position:relative;max-width:1800px;margin:0 auto;container-type:inline-size}

.d2-h{font:300 clamp(48px,23cqi,104px)/.88 var(--didone);font-stretch:62.5%;letter-spacing:-.012em;margin-left:-.03em;text-wrap:balance}

/* ---- the strip: fourteen arches, one per day; the sea rises in each as the days pass ---- */
.d2-strip{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:0 var(--gap);margin-top:36px;counter-reset:d}
.d2-strip i{counter-increment:d;display:flex;flex-direction:column;align-items:stretch;gap:9px}
.d2-strip i::after{content:counter(d);font:400 11px/1 var(--mono);color:var(--ink-3);text-align:center;font-variant-numeric:tabular-nums;transition:color .4s}
.d2-strip i.m::after{font-weight:500;color:var(--ink)}
.d2-strip b{position:relative;height:var(--bar-h);border-radius:999px 999px 2px 2px;overflow:hidden;
  background:var(--paper-2);box-shadow:inset 0 0 0 1px rgba(15,26,27,.045)}
/* the water: deep at the floor, lit near the surface, a pale line where it meets the air */
.d2-strip b::before{content:"";position:absolute;inset:0;transform-origin:50% 100%;transition:transform .6s var(--ease);
  background:linear-gradient(0deg,var(--sea-deep) 8%,var(--sea-lit) 96%);box-shadow:inset 0 2px 0 rgba(255,255,255,.16)}
/* a milestone: a dot set where the arch springs, flame until the day is reached, then lagoon light */
.d2-strip .m b::after{content:"";position:absolute;left:50%;top:calc((100cqi - 13 * var(--gap)) / 28);width:var(--dot);height:var(--dot);
  margin:calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);border-radius:50%;
  background:var(--lagoon);box-shadow:0 0 0 3px rgba(70,232,212,.16),0 0 12px rgba(70,232,212,.6);
  transition:background-color .3s .3s,box-shadow .3s .3s}

.days2.is-live .d2-strip i:not(.on) b::before{transform:scaleY(0)}
.days2.is-live .d2-strip i.m:not(.on) b::after{background:var(--flame);box-shadow:0 0 0 3px rgba(226,53,43,.12);transition-delay:0s}
.days2.is-live .d2-strip i:not(.on)::after{color:#9AA19D}
.days2.is-live .d2-strip i.m:not(.on)::after{color:var(--ink-2)}

/* ---- the four steps ---- */
.d2-steps{margin:40px 0 0;padding:0;list-style:none;display:grid;gap:34px}
.d2-steps li{display:grid;grid-template-columns:82px minmax(0,1fr);column-gap:10px;align-content:start}
.d2-d{grid-row:span 2;display:flex;align-items:center;gap:9px;height:1.9em;font:500 14px/1 var(--mono);letter-spacing:.01em;color:var(--sea-deep);white-space:nowrap;transition:color .4s}
.d2-d::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sea-lit);transition:background-color .4s}
.d2-steps h3{font:400 32px/1.02 var(--didone);font-stretch:62.5%;letter-spacing:-.004em;text-wrap:balance;transition:color .4s}
.d2-steps p{margin-top:7px;font-size:19px;line-height:1.42;color:var(--ink-2);max-width:32ch;text-wrap:pretty;transition:color .4s}
/* not reached yet: quieter, still easy to read */
.days2.is-live .d2-steps li:not(.on) .d2-d{color:var(--ink-3)}
.days2.is-live .d2-steps li:not(.on) .d2-d::before{background:var(--flame)}
.days2.is-live .d2-steps li:not(.on) h3{color:#4C5856}
.days2.is-live .d2-steps li:not(.on) p{color:var(--ink-3)}

/* desktop leader lines, drawn by the module from each milestone to its step */
.d2-leads{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;fill:none;stroke-width:1;stroke-linejoin:round}
.d2-leads .bed{stroke:rgba(15,26,27,.2)}
.d2-leads .run{stroke:var(--sea-lit);stroke-width:1.5;stroke-dasharray:var(--len) var(--len);stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease)}
.days2.is-live .d2-leads .run:not(.on){stroke-dashoffset:var(--len)}

/* ---- the studio and what you own ---- */
.d2-grid{margin-top:76px}
.d2-studio{margin:0;padding:10px 10px 0;background:var(--paper-2)}
.d2-studio img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#cfc6b4}
.d2-studio figcaption{padding:11px 2px 12px;font:italic 400 17px/1.3 var(--garamond);color:var(--ink-2)}
.d2-own{margin-top:52px}
.d2-own p:first-child{font:300 38px/1.04 var(--didone);font-stretch:62.5%;letter-spacing:-.006em;max-width:15ch;text-wrap:balance}
.d2-own p+p{margin-top:24px;font-size:19px;line-height:1.45;color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.d2-own a{color:var(--sea-deep);font-weight:500;text-decoration:underline;text-decoration-color:var(--sea-lit);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:text-decoration-thickness .25s,color .25s}
.d2-own a:hover{color:var(--ink);text-decoration-thickness:3px}
/* the display line's link: the wordmark's move, the linked words turn italic, in sea green on a hairline */
.d2-own .d2-asc{font-style:italic;font-weight:inherit;color:var(--sea-deep);text-decoration:underline;text-decoration-color:rgba(12,143,134,.55);
  text-decoration-thickness:max(1px,.025em);text-underline-offset:.1em;transition:color .3s var(--ease),text-decoration-color .3s var(--ease)}
.d2-own .d2-asc:hover,.d2-own .d2-asc:focus-visible{color:var(--sea-lit);text-decoration-color:var(--sea-lit)}

/* ---- the date it goes live if they start now ---- */
.d2-by{margin-top:72px;padding-top:34px;border-top:1px solid rgba(15,26,27,.2)}
.d2-by p{font:300 46px/1 var(--didone);font-stretch:62.5%;letter-spacing:-.008em;text-wrap:balance}
.d2-by span{display:block;margin-bottom:12px;font:italic 400 21px/1.3 var(--garamond);letter-spacing:0;color:var(--ink-2)}
.d2-by b{font-weight:inherit}
.d2-by a{display:flex;align-items:center;justify-content:center;min-height:58px;margin-top:30px;padding:0 28px;background:var(--ink);color:var(--paper);font:600 20px/1 var(--garamond);text-decoration:none;transition:background-color .25s}
.d2-by a:hover{background:var(--sea-deep)}
html:not(.js) .d2-by{display:none}

@media (min-width:900px){
  .days2{--gap:clamp(6px,.5vw,10px);--bar-h:clamp(170px,26svh,300px);--dot:12px;padding-top:clamp(104px,13svh,150px)}
  .d2-h{font-size:clamp(88px,min(8.4cqi,17svh),176px);line-height:.88}
  .d2-strip{margin-top:clamp(32px,4.4svh,52px)}
  .d2-strip i{gap:12px}
  .d2-strip i::after{font-size:13px}
  .d2-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,56px);margin-top:clamp(56px,7svh,76px)}
  .d2-steps li{grid-template-columns:1fr}
  .d2-d{grid-row:auto;height:auto;margin-bottom:14px;font-size:14px}
  .d2-steps h3{font-size:clamp(32px,2.35vw,46px)}
  .d2-steps p{margin-top:10px;font-size:clamp(19px,1.1vw,21px);max-width:30ch}

  .d2-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,6.4vw,128px);align-items:end;margin-top:clamp(110px,15svh,170px)}
  .d2-studio{padding:clamp(12px,1vw,18px) clamp(12px,1vw,18px) 0}
  .d2-studio figcaption{padding:14px 2px 16px;font-size:18px}
  .d2-own{margin:0 0 clamp(52px,7svh,80px)}
  .d2-own p:first-child{font-size:clamp(44px,3.4vw,66px);max-width:17ch}
  .d2-own p+p{margin-top:30px;font-size:clamp(19px,1.15vw,22px);max-width:34ch}

  .d2-by{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-top:clamp(64px,9svh,110px);padding-top:clamp(40px,5.5svh,64px)}
  .d2-by p{font-size:clamp(60px,min(5.6vw,12svh),120px)}
  .d2-by span{margin-bottom:16px;font-size:clamp(22px,1.4vw,28px)}
  .d2-by a{flex:none;margin:0 0 .3em;min-height:64px;padding:0 34px;font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .days2 *,.days2 *::before,.days2 *::after{transition:none!important}
}