/* LAPSE — fictional running shoe. Concrete, sunlight, one signal orange. Type is condensed italic, data is mono. */
:root { --grey: #c9c9c4; --wall: #d4d4cf; --floor: #b9b9b3; --signal: #ff4a1c; --ink: #111; --paper: #efeee9; --pad: clamp(16px, 2.4vw, 36px);
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif; --jp: "M PLUS 1", "Hiragino Sans", sans-serif; --mono-f: "JetBrains Mono", ui-monospace, monospace; color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--grey); color: var(--ink); font-family: var(--jp); -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
ul, ol { list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; } img { display: block; max-width: 100%; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; } .skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.mono { font-family: var(--mono-f); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.disp { font-family: var(--cond); font-style: italic; font-weight: 900; line-height: .84; letter-spacing: -.015em; text-transform: uppercase; }
html[lang="ja"] .disp { font-family: var(--jp); font-style: normal; font-weight: 900; transform: skewX(-9deg); transform-origin: 0 100%; line-height: 1.04; letter-spacing: -.03em; text-transform: none; }
.ln { display: block; }

.bar { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: baseline; gap: 30px; padding: 18px var(--pad); }
.logo { font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 30px; text-decoration: none; letter-spacing: -.01em; }
.bar nav ul { display: flex; gap: 22px; } .bar nav a { font-family: var(--mono-f); font-size: 12px; text-transform: uppercase; text-decoration: none; padding: 5px 0; display: inline-block; }
.lang { margin-left: auto; text-decoration: none; padding: 5px 0; } .bag { opacity: .75; }
.bar.inv { color: var(--paper); background: linear-gradient(rgba(17,17,17,.55), rgba(17,17,17,0)); } .bar.inv.solid { background: rgba(17,17,17,.94); }
.menu-btn { display: none; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--signal); color: var(--ink); display: grid; align-content: center; gap: 4px; padding: 24px; }
.sheet[hidden] { display: none; }
.sheet a { font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 64px; text-transform: uppercase; text-decoration: none; display: block; line-height: 1; }
html[lang="ja"] .sheet a { font-family: var(--jp); font-style: normal; font-size: 44px; line-height: 1.2; }
.sheet-close { justify-self: start; margin-top: 18px; background: var(--ink); color: var(--paper); border: 0; padding: 12px 22px; font-family: var(--mono-f); cursor: pointer; }
.pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* 1 hero: live long exposure */
.hero { height: 210svh; }
.studio { position: absolute; inset: 0; background:
  radial-gradient(120% 70% at 70% 30%, #e3e3de 0%, rgba(227,227,222,0) 60%),
  linear-gradient(#cfcfca 0 64%, #bcbcb6 64% 100%); }
.studio::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#expo, #strobe, #exit { position: absolute; inset: 0; width: 100%; height: 100%; }
.word { position: absolute; left: 2.2vw; bottom: 2svh; font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 30vw; line-height: .78; letter-spacing: -.02em; z-index: 3; }
.word .w { position: relative; display: block; }
.word .trail { position: absolute; left: 0; top: 0; }
.word .trail span { position: absolute; left: 0; top: 0; color: var(--signal); white-space: nowrap; }
.shutter { position: absolute; left: var(--pad); top: 76px; z-index: 4; }
.speed { font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 58px; line-height: .9; margin: 4px 0 10px; }
.dial { display: flex; gap: 6px; }
.dial button { font-family: var(--mono-f); font-size: 12px; background: rgba(239,238,233,.6); border: 1px solid rgba(17,17,17,.35); padding: 8px 10px; cursor: pointer; min-height: 36px; }
.dial button[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.hint { margin-top: 10px; font-size: 11px; opacity: .75; text-transform: none; }
.model { position: absolute; right: var(--pad); top: 76px; text-align: right; z-index: 4; } .model b { display: block; font-size: 22px; font-weight: 500; }

/* 2 heel: orange field wipes in from the left (the trail's colour) */
.heel { height: 200svh; }
.heel .pin { background: var(--grey); }
.field { position: absolute; inset: 0 auto 0 0; width: 54vw; background: var(--signal); padding: 15svh var(--pad) 0; clip-path: inset(0 calc(100% - var(--w, 0%)) 0 0); z-index: 2; }
.field h2 { font-size: 13.5vw; } html[lang="ja"] .field h2 { font-size: 7.6vw; }
.field .p { max-width: 30em; margin-top: 5svh; font-size: 15px; line-height: 1.8; font-weight: 800; }
.spec { position: absolute; left: var(--pad); bottom: 7svh; display: flex; gap: 48px; }
.spec dt { font-family: var(--mono-f); font-size: 11px; text-transform: uppercase; order: 2; }
.spec div { display: flex; flex-direction: column-reverse; }
.spec b { font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 84px; line-height: .9; } .spec small { font-family: var(--mono-f); font-size: 13px; margin-left: 4px; }
.heelphoto { position: absolute; right: 0; top: 0; width: 46vw; height: 100%; }
.heelphoto img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--hz, 1.12)); }

/* 3 stride: chronophotograph */
.stride { height: 260svh; }
.stride .pin { background: #e4e3de; }
.stride .pin::before { content: ""; position: absolute; left: 0; right: 0; top: 70%; height: 1px; background: rgba(17,17,17,.35); }
.st-copy { position: absolute; left: var(--pad); top: 13svh; max-width: 40vw; z-index: 2; }
.st-copy h2 { font-size: 7.4vw; } html[lang="ja"] .st-copy h2 { font-size: 5vw; }
.st-copy p { margin-top: 3svh; font-size: 15px; line-height: 1.8; max-width: 26em; }
.phases { position: absolute; left: var(--pad); right: var(--pad); bottom: 6svh; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); z-index: 2; }
.phases li { padding-top: 10px; opacity: .35; transition: opacity .2s; } .phases li.on { opacity: 1; } .phases b { display: block; font-size: 15px; color: var(--signal); }
.clock { position: absolute; right: var(--pad); top: 13svh; font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 15vw; line-height: .8; color: var(--signal); text-transform: none; letter-spacing: -.02em; z-index: 1; }

/* 4 material */
.mat { height: 180svh; }
.macro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--mz, 1)); transform-origin: 30% 60%; }
.ruler { position: absolute; left: 0; right: 0; top: 55%; height: 1px; background: rgba(255,255,255,.85); transform-origin: 0 50%; transform: scaleX(var(--rw, 0)); }
.ruler span { position: absolute; left: var(--x); top: 10px; font-family: var(--mono-f); font-size: 12px; color: #fff; white-space: nowrap; background: rgba(17,17,17,.78); padding: 5px 8px; line-height: 1; }
.ruler span::before { content: ""; position: absolute; left: 0; top: -18px; width: 1px; height: 18px; background: #fff; }
.ruler span::after { content: attr(data-x); }
.mat-copy { position: absolute; left: var(--pad); bottom: 8svh; color: #fff; z-index: 2; max-width: 34em; }
.mat-copy::before { content: ""; position: absolute; inset: -30svh -100vw -10svh -10vw; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.66) 70%); z-index: -1; }
.mat-copy h2 { font-size: 10vw; } html[lang="ja"] .mat-copy h2 { font-size: 6.4vw; }
.mat-copy p { margin-top: 2svh; font-size: 15px; line-height: 1.8; }

/* 5 fit + exit */
.fit { position: relative; background: var(--ink); color: var(--paper); padding: 16svh var(--pad) 0; overflow: hidden; }
.fit h2 { font-size: 11vw; color: var(--paper); } html[lang="ja"] .fit h2 { font-size: 7vw; }
.fit > .mono { margin-top: 6svh; }
.sizes { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin-top: 12px; max-width: 980px; }
.sizes button { background: none; border: 1px solid rgba(239,238,233,.4); color: var(--paper); padding: 14px 0; font-family: var(--mono-f); font-size: 14px; cursor: pointer; min-height: 44px; }
.sizes button[aria-checked="true"] { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.cta { margin-top: 24px; background: var(--paper); color: var(--ink); border: 0; padding: 20px 30px; font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 30px; text-transform: uppercase; cursor: pointer; min-height: 48px; }
html[lang="ja"] .cta { font-family: var(--jp); font-style: normal; font-size: 20px; }
.cta-note { margin-top: 12px; min-height: 1.6em; text-transform: none; }
#exit { position: relative; display: block; height: 42svh; margin-top: 4svh; }
.end { position: absolute; left: var(--pad); bottom: 4svh; font-size: 8vw; color: var(--signal); }
html[lang="ja"] .end { font-size: 5.6vw; }
.foot { background: var(--ink); color: #bdbdb8; border-top: 1px solid #333; padding: 40px var(--pad) 52px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.8; }
.flogo { font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 54px; color: var(--paper); line-height: 1; }

@media (max-width: 760px) {
  .bar { padding: 12px 16px; gap: 0; } .bar nav, .lang, .bag { display: none; }
  .menu-btn { display: block; margin-left: auto; background: none; border: 0; padding: 10px 0 10px 12px; min-height: 44px; cursor: pointer; }
  .word { font-size: 40vw; bottom: 10svh; }
  .shutter { top: 64px; left: 16px; right: 16px; } .speed { font-size: 46px; } .dial button { flex: 1; padding: 10px 0; font-size: 11px; }
  .model { top: auto; bottom: 3svh; right: 16px; } .model b { font-size: 16px; }
  .field { width: 100%; height: 58%; padding-top: 70px; } .field h2 { font-size: 22vw; } html[lang="ja"] .field h2 { font-size: 13vw; }
  .field .p { display: none; } .spec { bottom: 3svh; gap: 22px; } .spec b { font-size: 46px; }
  .heelphoto { width: 100%; height: 42%; top: auto; bottom: 0; }
  .st-copy { max-width: none; right: 16px; top: 64px; } .st-copy h2 { font-size: 13vw; } html[lang="ja"] .st-copy h2 { font-size: 9vw; } .st-copy p { font-size: 13.5px; }
  .clock { top: auto; bottom: 18svh; font-size: 24vw; }
  .phases { grid-template-columns: repeat(2, 1fr); row-gap: 6px; } .phases b { font-size: 13px; }
  .mat-copy h2 { font-size: 17vw; } html[lang="ja"] .mat-copy h2 { font-size: 11vw; } .mat-copy p { font-size: 13.5px; } .mat-copy { right: var(--pad); }
  .ruler span { font-size: 10px; }
  .fit h2 { font-size: 17vw; } html[lang="ja"] .fit h2 { font-size: 11vw; }
  .sizes { grid-template-columns: repeat(4, 1fr); } .cta { width: 100%; }
  .end { font-size: 13vw; } html[lang="ja"] .end { font-size: 9vw; }
}
@media (prefers-reduced-motion: reduce) { .hero, .heel, .stride, .mat { height: auto; } .pin { position: relative; } }

/* ===== v2 additions ===== */
.snd { background: none; border: 1px solid currentColor; color: inherit; padding: 6px 9px; cursor: pointer; min-height: 30px; }
.snd[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bar.inv .snd[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
/* stride: time readouts */
.stride { height: 420svh; }
.stride .pin::before { top: 74%; }
.meters { position: absolute; right: var(--pad); top: calc(13svh + 15vw * .82 + 20px); z-index: 2; display: grid; gap: 6px; text-align: right; }
.meters p { display: flex; gap: 14px; justify-content: flex-end; align-items: baseline; } .meters b { font-size: 20px; min-width: 6.5ch; font-variant-numeric: tabular-nums; }
.tl { position: relative; width: min(340px, 28vw); height: 22px; margin-left: auto; border-bottom: 1px solid var(--ink); }
.tl i { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--ink); } .tl i.big { height: 14px; }
.tl .ph { position: absolute; bottom: -3px; width: 7px; height: 7px; margin-left: -3px; background: var(--signal); border-radius: 50%; }
/* material: press the foam */
#squash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; cursor: pointer; touch-action: pan-y; }
.mat.gl .macro { visibility: hidden; }
.press { margin-top: 2svh; text-transform: none; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.step { background: rgba(239,238,233,.12); color: #fff; border: 1px solid rgba(255,255,255,.7); padding: 9px 14px; font-family: var(--mono-f); font-size: 12px; text-transform: uppercase; cursor: pointer; min-height: 40px; }
.mat-copy { pointer-events: none; } .mat-copy .step { pointer-events: auto; }
/* fit: size → real length, nothing to buy */
.len { margin-top: 26px; display: flex; gap: 14px; align-items: baseline; } .len b { font-family: var(--cond); font-style: italic; font-weight: 900; font-size: 40px; color: var(--signal); text-transform: none; letter-spacing: 0; }
.fit-note { margin-top: 10px; font-size: 14px; line-height: 1.7; max-width: 40em; color: #d6d6d0; }
#exit { height: 46svh; }
@media (max-width: 760px) {
  .snd { margin-left: auto; padding: 6px 8px; font-size: 10px; } .menu-btn { margin-left: 8px; }
  .meters { top: auto; bottom: calc(6svh + 76px); right: 16px; } .meters b { font-size: 16px; } .tl { width: 44vw; }
  .stride .pin::before { top: 62%; }
  .len b { font-size: 32px; }
}
@media (max-width: 760px) {
  .clock { top: auto; bottom: calc(6svh + 150px); font-size: 16vw; right: 16px; }
  .meters { bottom: calc(6svh + 72px); gap: 2px; } .meters p { gap: 8px; font-size: 10px; } .meters b { font-size: 14px; } .tl { display: none; }
}
@media (max-width: 760px) { .clock { bottom: calc(6svh + 196px); font-size: 14vw; } .meters { bottom: calc(6svh + 150px); } .stride .pin::before { top: 58%; } }
/* warped time axis: the stride's slow motion is visible as tick spacing */
.axis { position: absolute; left: var(--pad); right: var(--pad); bottom: calc(6svh + 64px); height: 26px; border-bottom: 2px solid var(--ink); z-index: 2; }
.axis i { position: absolute; bottom: 0; width: 1px; height: 8px; background: var(--ink); }
.axis i.big { height: 18px; width: 2px; }
.axis i.big::after { content: attr(data-ms); position: absolute; left: 4px; top: -4px; font-family: var(--mono-f); font-size: 10px; color: var(--ink); opacity: .7; }
.axis .ph { position: absolute; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--signal); border-radius: 50%; }
.phases { display: block; height: 64px; border-top: 0; }
.phases li { position: absolute; top: 4px; transform: translateX(-1px); border-left: 2px solid var(--signal); padding: 0 0 0 8px; }
@media (max-width: 760px) { .axis { bottom: calc(6svh + 70px); } .axis i.big::after { display: none; } 
  .phases { height: 70px; } .phases li { font-size: 10px; } .phases li:nth-child(even) { top: 36px; } }

/* ===================== FINAL (v3 direction): one studio, one rendered step ===================== */
.hero .pin { background: #b6b6b0; }
#expo { z-index: 1; } .hero .word { z-index: 3; } .hero .shutter, .hero .model { z-index: 4; }
.hero .shutter .hint { max-width: 26em; }
/* stride = v3 proof */
.stride { height: 520svh; }
.stride .pin { background: #b6b6b0; } .stride .pin::before { display: none; }
#seq, #fitcv { position: absolute; inset: 0; width: 100%; height: 100%; }
.stride .copy { position: absolute; left: var(--pad); top: 11svh; max-width: 30em; z-index: 2; }
.stride .copy h2 { font-size: min(7vw, 13svh); } html[lang="ja"] .stride .copy h2 { font-size: min(5vw, 9.5svh); }
.stride .copy p { margin-top: 2.4svh; font-size: 15px; line-height: 1.8; max-width: 26em; font-weight: 500; }
.play { margin-top: 2.4svh; border: 1.5px solid var(--ink); padding: 10px 14px; min-height: 40px; background: rgba(239,238,233,.35); cursor: pointer; }
.play:hover { background: var(--ink); color: var(--paper); }
.stride .clock { position: absolute; right: var(--pad); top: 10svh; bottom: auto; font-family: var(--cond); font-style: italic; font-weight: 900; font-size: min(12vw, 22svh); line-height: .8; color: var(--signal); font-variant-numeric: tabular-nums; text-transform: none; z-index: 2; }
.stride .meters { position: absolute; right: var(--pad); top: calc(10svh + min(12vw, 22svh) * .82 + 14px); bottom: auto; display: grid; gap: 4px; text-align: right; z-index: 2; }
.stride .phases { position: absolute; left: var(--pad); right: var(--pad); bottom: 4svh; height: 54px; z-index: 2; display: block; border-top: 0; }
.stride .phases li { position: absolute; top: 0; border-left: 2px solid var(--signal); padding: 0 0 0 8px; opacity: .45; max-width: 22%; }
.stride .phases li.on { opacity: 1; } .stride .phases b { display: block; color: var(--signal); font-size: 12px; } .stride .phases span { text-transform: none; font-size: 11px; display: block; }
.stride .axis { bottom: calc(4svh + 60px); height: 20px; z-index: 2; }
/* fit: back in the studio */
.fit { position: relative; height: 100svh; min-height: 640px; padding: 0; background: #b6b6b0; color: var(--ink); overflow: hidden; }
.fit-copy { position: absolute; left: var(--pad); top: 12svh; z-index: 2; max-width: 34em; }
.fit h2 { font-size: min(7vw, 13svh); color: var(--ink); } html[lang="ja"] .fit h2 { font-size: min(5vw, 9.5svh); }
.fit-copy > p:not(.mono):not(.fit-note) { margin-top: 2svh; font-size: 15px; line-height: 1.8; font-weight: 500; }
.fit-copy .mono { margin-top: 3svh; }
.fit .sizes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 10px; max-width: 520px; }
.fit .sizes button { border: 1px solid rgba(17,17,17,.4); color: var(--ink); background: rgba(239,238,233,.35); }
.fit .sizes button[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fit .len b { color: var(--signal); }
.fit .fit-note { color: #333; font-size: 13px; }
/* closing: one real-speed stride out of the studio */
.closing { position: relative; height: 100svh; min-height: 560px; background: #b6b6b0; overflow: hidden; }
#exit { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.closing .end { position: absolute; left: var(--pad); top: 14svh; bottom: auto; z-index: 2; font-size: min(9vw, 17svh); color: var(--signal); }
html[lang="ja"] .closing .end { font-size: min(6.4vw, 12svh); }
.again { position: absolute; left: var(--pad); top: calc(14svh + min(9vw, 17svh) * 1.05 + 18px); z-index: 2; border: 1.5px solid var(--ink); padding: 10px 14px; min-height: 40px; background: rgba(239,238,233,.35); cursor: pointer; }
@media (max-width: 760px) {
  .stride .copy { top: 64px; right: var(--pad); } .stride .copy h2 { font-size: 13vw; } html[lang="ja"] .stride .copy h2 { font-size: 9vw; } .stride .copy p { font-size: 13px; }
  .stride .clock { top: auto; bottom: calc(4svh + 150px); font-size: 15vw; } .stride .meters { top: auto; bottom: calc(4svh + 100px); } .stride .meters b { font-size: 14px; }
  .stride .phases li span { display: none; } .stride .phases li { max-width: none; font-size: 10px; } .stride .phases b { font-size: 10px; } .stride .phases li:nth-child(even) { top: 24px; }
  .fit-copy { top: 64px; right: var(--pad); } .fit h2 { font-size: 13vw; } html[lang="ja"] .fit h2 { font-size: 9vw; }
  .fit .sizes { grid-template-columns: repeat(4, 1fr); }
  .closing .end { font-size: 13vw; top: 12svh; } html[lang="ja"] .closing .end { font-size: 9vw; } .again { top: calc(12svh + 15vw + 20px); }
}
@media (prefers-reduced-motion: reduce) { .stride { height: 100svh; } .stride .pin { position: relative; } }
@media (max-width: 760px) { .again { top: calc(12svh + 30vw); } html[lang="ja"] .again { top: calc(12svh + 14vw); } }

/* publication: fictional-brand label + about block (2026-10-11) */
.concept-tag { font-family: var(--mono-f); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.about { background: var(--paper); color: var(--ink); padding: 56px var(--pad) 44px; display: grid; gap: 10px; font-size: 14px; line-height: 1.85; border-top: 1px solid rgba(17,17,17,.12); }
.about h2 { font-family: var(--mono-f); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 500; } .about h2::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--signal); margin-right: 10px; vertical-align: 1px; }
.about p { max-width: 44em; }
@media (max-width: 760px) { .concept-tag { position: absolute; left: 16px; top: 47px; font-size: 10px; } .hero .shutter { top: 80px; } }