/* Time Objects top — Figma "top-v7" (Pc_EN / Pc_JA 1280, Sp_EN / Sp_JA 375).
   Scoped to .site.v7 so the other pages keep site.css.

   PC (≥768px): every Figma value N is written as calc(N * var(--u)), where --u is
   1px at 1280px. Below 1280 it shrinks with the viewport, so the 1280 layout scales
   down without reflowing. From 1280 to 2600 the side margins stay 60px and the
   layout (text included) grows with the viewport; above 2600 it stays centred.
   --t is the unit for small UI type and controls: 1px up to 1280, growing above.
   SP (≤767px): Figma Sp values in px on a fluid column (100% − 40px).

   Headline positions in Figma are cap-height trimmed. Roobert: ascent .95, descent
   .246, cap .70 (em) — the cap top sits ((lh − 1.196) / 2 + .25)em below the line box. */

html:has(.site.v7){background:#06050A;overflow-x:clip}
body:has(.site.v7){background:#06050A;color:#fff}

.site.v7{
  --u:calc(min(100vw, 1280px) / 1280);
  --t:max(1px, var(--u));
  --ink:#06050A;
  --ink-80:rgba(6,5,10,.8);
  --line-d:rgba(6,5,10,.2);
  --edge-d:rgba(6,5,10,.3);
  --edge-l:rgba(255,255,255,.3);
  --ease:cubic-bezier(.42,0,.58,1);
  --sans:'Roobert',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --didone:'Cormorant Garamond',Didot,'Bodoni 72','Times New Roman',serif;
  --stage:calc(1160 * var(--u));
  --side:calc((100% - var(--stage)) / 2);
  position:relative;
  width:100%;max-width:none;min-height:0;
  background:transparent;color:#fff;
  font-family:var(--sans);font-weight:400;
  font-synthesis:none;
}
/* ≥1280: 60px side margins kept, everything grows with the viewport up to 2600 */
@media (min-width:1280px){
  .site.v7{
    --u:calc((min(100vw, 2600px) - 120px) / 1160);
    --stage:min(calc(100% - 120px), 2480px);
  }
}
/* Japanese: Roobert for Latin, Gen Interface JP Display for kana/kanji.
   No phrase wrapping or opening-bracket trimming (site.css sets both for .site.ja) */
.site.v7.ja{
  --sans:'Roobert','Gen Interface JP Display','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
}
.site.v7.ja,.site.v7.ja *{word-break:normal;text-spacing-trim:space-all}
.site.v7 a{color:inherit;text-decoration:none}
.site.v7 img,.site.v7 video{display:block;max-width:none}
.site.v7 .sp-only{display:none}

/* —— aurora: fixed WebGL canvas behind the whole page (aurora.js; designer's staging build) —— */
.v7-aurora{
  position:fixed;inset:0;z-index:0;height:100vh;height:100dvh;overflow:hidden;pointer-events:none;
  background:#06050A;
}
.v7-aurora canvas{
  display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,rgba(0,0,0,.9) 40%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.15) 70%,transparent 60%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 28%,rgba(0,0,0,.9) 40%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.15) 70%,transparent 60%);
}
.v7-aurora.no-gl{background:#06050A url("img/v7/aurora.webp") center top / cover no-repeat}
.site.v7 > main,
.site.v7 > .v7-foot{position:relative;z-index:1}

/* —— buttons (Figma "btn": 36 high, r4, 1px edge at 30%, 10px SemiBold caps +5%) ——
   hover: the edge becomes opaque and the ▷ / → slides out to the right and back in */
.v7-btn{
  display:inline-flex;align-items:center;gap:calc(16 * var(--t));
  height:calc(36 * var(--t));padding:0 calc(15 * var(--t));box-sizing:border-box;
  border:1px solid var(--edge-l);border-radius:4px;background:transparent;color:#fff;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  font:600 calc(10 * var(--t))/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;transition:border-color .4s var(--ease);
}
.v7-btn img{width:calc(7 * var(--t));height:calc(7 * var(--t));flex:none}
.v7-btn:hover{border-color:#fff}
.v7-btn:hover img,.v7-news .item:hover .go img{animation:v7-slide .7s var(--ease)}
@keyframes v7-slide{
  0%{transform:translateX(0);opacity:1}
  45%{transform:translateX(160%);opacity:0}
  46%{transform:translateX(-160%);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
.v7-btn.dark{border-color:var(--edge-d);color:var(--ink)}
.v7-btn.dark img{filter:brightness(0)}
.v7-btn.dark:hover{border-color:var(--ink)}
/* hero: frosted grey, no edge, 34 high */
.v7-btn.glass{height:calc(34 * var(--t));border-color:transparent;background:rgba(109,109,109,.4)}
.v7-btn.glass img{width:calc(8 * var(--t));height:calc(9 * var(--t))}
.v7-btn.glass:hover{border-color:transparent}

/* ===================================================================== PC */

/* —— header (in the hero; scrolls with it): logo 60,30 · name 110,43 · nav 716,30 —— */
.site.v7 .top{
  position:absolute;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:auto;padding:calc(30 * var(--u)) var(--side) 0;
  background:none;border:0;color:#fff;
  font:500 max(12px, calc(10 * var(--u)))/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
}
.site.v7 .top.solid{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.site.v7 .top .l{display:none}
.site.v7 .top .brand{display:flex;align-items:center;gap:calc(10 * var(--u));min-height:0;color:#fff}
.site.v7 .top .brand img{width:calc(40 * var(--u));height:calc(40 * var(--u));min-width:32px;min-height:32px;filter:none}
.site.v7 .top .brand .name{width:calc(150 * var(--u));min-width:120px;height:auto;min-height:0}
.site.v7 .top .r{display:flex;align-items:center;gap:calc(18 * var(--u));margin-left:auto}
.site.v7 .top a.nv{
  display:inline-flex!important;align-items:center;min-height:calc(36 * var(--t));color:#fff;
  font:inherit;letter-spacing:inherit;text-decoration:none;
}
/* nav + footer links hover: split letters roll up one after another, a copy rising from below
   (home-v7.js splits them) */
.site.v7 .roll{display:inline-flex;vertical-align:top}
.site.v7 .roll .ch{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2em}
.site.v7 .roll .ch i{
  display:block;font-style:normal;text-shadow:0 1.2em 0 currentColor;
  transition:transform .6s var(--ease) calc(var(--i) * 35ms);
}
@media (hover:hover){.site.v7 a:hover > .roll .ch i{transform:translateY(-1.2em)}}
.site.v7 .lang-pill{
  display:inline-flex;align-items:center;gap:calc(3 * var(--t));margin-left:calc(12 * var(--u));
  padding:calc(6 * var(--t));border-radius:2px;background:rgba(109,109,109,.4);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
}
.site.v7 .lang-pill a{
  display:inline-flex;align-items:center;justify-content:center;height:calc(24 * var(--t));padding:0 calc(8 * var(--t));border-radius:2px;
  color:#fff;font:500 max(12px, calc(10 * var(--u)))/1 var(--sans);letter-spacing:0;text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.site.v7 .lang-pill a:hover{background:rgba(255,255,255,.18)}
.site.v7 .lang-pill a[aria-current="true"]{background:rgba(255,255,255,.8);color:var(--ink)}
.site.v7 .burger{display:none!important}

/* —— hero (1280×720): video, title 60,337 Bold 90/.9, lead 580, button 646 —— */
.v7-mv{
  position:relative;
  height:100vh;height:100svh;min-height:480px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--side) calc(40 * var(--u));box-sizing:border-box;
  background:#06050A;color:#fff;overflow:hidden;
  /* no z-index / isolation here: the title blends with the video (difference) */
}
.v7-mv .bg{position:absolute;inset:0;overflow:hidden}
.v7-mv .bg .zoom{position:absolute;inset:0}
.v7-mv .bg video,.v7-mv .bg img{width:100%;height:100%;object-fit:cover}
/* Vimeo background loop (cover); shown once it plays */
.v7-mv .bg iframe.vimeo{
  position:absolute;left:50%;top:50%;border:0;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  width:max(100%, 177.78svh);height:max(100%, 56.25vw);transform:translate(-50%,-50%);
}
.v7-mv .bg.portrait iframe.vimeo{width:max(100%, 56.25svh);height:max(100%, 177.78vw)}/* 9:16 cut on phones */
.v7-mv .bg.vimeo-on iframe.vimeo{opacity:1}
.v7-mv .bg.vimeo-on video{visibility:hidden;transition:visibility 0s .8s}/* stays under the fade-in */
/* intro: video + logo first, nav and copy follow after 1s */
 /* intro: the video plays from its first frame right away (no zoom-out) with only the logo on
    screen; then the title lines, lead and button rise out of their own line box one after
    another and the nav drops in */
.v7-mv-title span,.v7-mv .lead,.v7-mv .v7-btn{animation:v7-line .9s var(--ease) both}
.v7-mv-title .l1{animation-delay:1.05s}
.v7-mv-title .l2{animation-delay:1.13s}
.v7-mv-title .l3{animation-delay:1.21s}
.v7-mv .lead{animation-delay:1.3s}
.v7-mv .v7-btn{animation-delay:1.38s}
@keyframes v7-line{
  from{transform:translateY(100%);clip-path:inset(0 0 100% 0)}
  to{transform:none;clip-path:inset(-20% -10% -20% -10%)}
}
.site.v7 .top .r{animation:v7-drop .9s var(--ease) 1.05s both}
@keyframes v7-drop{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
.v7-mv-title{
  position:relative;margin:0 0 calc(9 * var(--u));
  font:700 calc(90 * var(--u))/.9 var(--sans);letter-spacing:0;color:#fff;
  mix-blend-mode:difference;
}
.v7-mv-title span{display:block;width:max-content}
.v7-mv .copy{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:calc(18 * var(--t))}
.v7-mv .lead{
  margin:0;max-width:calc(321 * var(--t));
  font:400 calc(12 * var(--t))/1.3 var(--sans);color:#fff;mix-blend-mode:difference;
}
.site.v7.ja .v7-mv .lead{max-width:calc(300 * var(--t))}

/* —— about (1280×396): portrait 60,90 80×85 → 160×170 when the section reaches mid-screen
   (home-v7.js adds .grown); quote 790,90 24/1.3 —— */
.v7-about{position:relative;color:#fff}
.v7-about .inner{
  position:relative;width:var(--stage);margin-inline:auto;
  padding:calc(90 * var(--u)) 0 calc(60 * var(--u));box-sizing:border-box;
}
.v7-about .portrait{
  position:absolute;left:0;top:calc(90 * var(--u));
  width:calc(80 * var(--u));height:calc(85 * var(--u));
  object-fit:cover;border-radius:4px;
  transition:width 1s var(--ease),height 1s var(--ease);
}
.v7-about .inner.grown .portrait{width:calc(160 * var(--u));height:calc(170 * var(--u))}
.v7-about .inner > div{margin-left:calc(730 * var(--u));width:calc(430 * var(--u))}
.site.v7 .v7-about .quote{
  margin:0;font:400 max(17px, calc(22 * var(--u)))/1.3 var(--sans);font-style:normal;color:#fff;
}
.v7-about .actions{margin-top:calc(24 * var(--u))}

/* —— chapter (1280×632): ONE / OBJECT / FIVE / EXPRESSIONS, Bold 90, cap tops 80·163·246·332 —— */
.v7-chapter{color:#fff}
.v7-chapter .stack{
  display:block;gap:0;/* beat site.css .stack (flex + 32px gap) */
  position:relative;width:var(--stage);margin-inline:auto;
  /* line-height 83 → cap top 10.2 below the line box: 80 − 10.2 */
  padding:calc(69.8 * var(--u)) 0 calc(60 * var(--u));box-sizing:border-box;
}
.site.v7 .v7-chapter .line{
  display:block;width:max-content;max-width:none;margin:0;
  font:700 calc(90 * var(--u))/calc(83 * var(--u)) var(--sans);letter-spacing:0;text-transform:uppercase;color:#fff;
}
.site.v7 .v7-chapter .line.one{margin-left:calc(312 * var(--u))}
.site.v7 .v7-chapter .line.object{margin-left:calc(372 * var(--u))}
.site.v7 .v7-chapter .five-row{position:relative}
.site.v7 .v7-chapter .line.five{margin-left:calc(252 * var(--u))}
.site.v7 .v7-chapter .line.expressions{margin:calc(3 * var(--u)) 0 0 calc(312 * var(--u))}
.site.v7 .v7-chapter .line .ex-split{display:none}
.site.v7 .v7-chapter .meta{
  position:absolute;left:calc(471 * var(--u));top:calc(20.4 * var(--u));
  display:flex;flex-direction:column;align-items:flex-start;gap:calc(5.4 * var(--u));
}
.site.v7 .v7-chapter .eyebrow{font:600 max(7px, calc(12 * var(--u)))/1 var(--sans);letter-spacing:0;color:#fff;white-space:pre}
.site.v7 .v7-chapter .chip{
  margin-left:calc(20 * var(--u));
  font:400 max(7px, calc(12 * var(--u)))/1.1 var(--sans);color:#fff;white-space:nowrap;
}
.site.v7 .v7-chapter .ja-sub{
  display:none;margin:calc(30 * var(--u)) 0 0 calc(365 * var(--u));width:calc(430 * var(--u));
  font:400 max(16px, calc(18 * var(--u)))/1.3 var(--sans);color:#fff;text-align:center;
}
.site.v7.ja .v7-chapter .ja-sub{display:block}
.site.v7 .v7-chapter .body{
  /* PC: centred 550 box with the Figma line breaks (x 365 at 1280 = centred on the page) */
  margin:calc(20 * var(--u)) auto 0;width:calc(550 * var(--u));min-width:min(100%, 480px);text-align:center;
  font:400 max(14px, calc(14 * var(--u)))/1.3 var(--sans);color:#fff;
}
.site.v7.ja .v7-chapter .body{margin-top:calc(30 * var(--u))}
/* site.css sets phrase wrapping and tracking on .site.ja .body — Figma uses plain wrapping */
.site.v7.ja .v7-chapter .body{word-break:normal;letter-spacing:0;text-wrap:wrap}

/* —— skull: full-screen and pinned; the grainient background zooms out from full-bleed
   to the Figma frame (20 inset, r8) as it arrives (--p from home-v7.js), then
   Time Objects slides up over it. Watch 300×476 in a 1240×680 frame (70% high) —— */
.v7-pin{position:relative}
.v7-skull{position:sticky;top:0;z-index:0;height:100vh;height:100svh;box-sizing:border-box;--p:1}
.v7-skull .frame{
  position:absolute;inset:0;overflow:hidden;
  clip-path:inset(calc(20 * var(--u) * var(--p)) round calc(8px * var(--p)));
  display:flex;align-items:center;justify-content:center;
}
.v7-skull .frame::before{
  content:"";position:absolute;inset:0;
  background:#100e16 url("img/v7/grainient.webp") center / cover no-repeat;
}
.v7-skull .frame video.grain{transform:scale(calc(1.2 - .2 * var(--p)));transform-origin:50% 50%}
.v7-skull .frame img{
  position:relative;height:calc(70% - 40 * var(--u) * .7);width:auto;
  filter:drop-shadow(2px 2px 4px rgba(0,0,0,.4));
  opacity:var(--p);/* fades in as the section arrives (sheet 2) */
}
.v7-pin > .v7-objects{position:relative;z-index:1}
/* grainient video injected by home-v7.js (cards + skull) */
.site.v7 video.grain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* —— time objects (white, 1280×1343) —— */
.v7-objects{
  background:#fff;color:var(--ink);
  padding:calc(70.3 * var(--u)) 0 calc(120 * var(--u));
}
.v7-objects .intro{
  width:var(--stage);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.site.v7 .v7-objects h2{
  margin:0;font:700 calc(90 * var(--u))/1 var(--sans);letter-spacing:-.02em;color:var(--ink);
}
/* "Skull Collection": outlined SVG from Figma (PC 124x11, SP 72x32 on two lines) */
.v7-objects .kicker{margin:calc(46.7 * var(--u)) 0 0;line-height:0}
.v7-objects .kicker img{display:block;height:auto}
.v7-objects .kicker .pc{width:calc(124 * var(--u));min-width:90px}
.v7-objects .kicker .sp{display:none;width:72px}
.v7-objects .intro > p:not(.kicker){
  margin:calc(19.2 * var(--u)) 0 0;max-width:calc(800 * var(--u));min-width:min(100%, 560px);
  font:400 max(14px, calc(14 * var(--u)))/1.3 var(--sans);color:var(--ink);
}
.v7-objects .intro .v7-btn{margin-top:calc(20 * var(--u))}
.v7-grid{
  display:grid;align-items:start;
  grid-template-columns:minmax(0,480fr) minmax(0,240fr) minmax(0,420fr);
  gap:calc(10 * var(--u));
  width:var(--stage);margin:calc(60 * var(--u)) auto 0;
}
.v7-card{display:flex;flex-direction:column;min-width:0;color:inherit}
.v7-card .thumb{
  position:relative;overflow:hidden;
  background:#100e16 url("img/v7/grainient.webp") center / cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.v7-card.large .thumb{aspect-ratio:480/600}
.v7-card.mid .thumb{aspect-ratio:240/300}
.v7-card.wide .thumb{aspect-ratio:420/525}
.v7-card .thumb img{
  position:relative;width:auto;height:66.67%;object-fit:contain;
  transition:transform 1s var(--ease);
}
.v7-card.wide .thumb img{height:61.9%}
@media (hover:hover){.v7-card:hover .thumb img{transform:scale(1.04)}}
.v7-card .meta{display:flex;flex-direction:column;align-items:flex-start}
.v7-card .name{
  margin:calc(12 * var(--t)) 0 0;display:flex;flex-direction:column;align-items:flex-start;
  font:500 calc(18 * var(--t))/1 var(--sans);color:var(--ink);
}
.v7-card .name span{display:block}
.v7-card .sku{margin:calc(8 * var(--t)) 0 0;font:400 calc(10 * var(--t))/1 var(--sans);color:var(--ink-80)}
.v7-tag{
  display:inline-flex;align-items:center;height:calc(24 * var(--t));margin-top:calc(8 * var(--t));padding:0 calc(8 * var(--t));box-sizing:border-box;
  border:1px solid var(--line-d);border-radius:2px;
  font:400 calc(10 * var(--t))/1 var(--sans);text-transform:uppercase;color:var(--ink);
}
.v7-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:3px calc(6 * var(--t));margin:calc(12 * var(--t)) 0 0;
  font:500 calc(14 * var(--t))/1 var(--sans);color:var(--ink);
}
.v7-price .tax{font:400 calc(10 * var(--t))/1 var(--sans);color:var(--ink-80)}

/* —— chronos (1280×1401): sticky video 60,90 300×169; title 640,90 Bold 70/.9; essay 790,309 18/1.5 —— */
.v7-chronos{color:#fff}
.v7-chronos .inner{
  display:grid;grid-template-columns:calc(300 * var(--u)) calc(280 * var(--u)) minmax(0,1fr);
  width:var(--stage);margin-inline:auto;padding:0 0 calc(120 * var(--u));
}
.v7-chronos .media{grid-column:1;grid-row:1;align-self:stretch}
.v7-chronos .media .pin{position:sticky;top:0;padding-top:calc(90 * var(--u))}
.v7-chronos .media video,.v7-chronos .media img{
  width:100%;aspect-ratio:300/169;height:auto;object-fit:cover;border-radius:4px;background:#000;
}
/* Vimeo loop over the poster (home-v7.js); shown once it plays */
.v7-chronos .vbox{position:relative;overflow:hidden;border-radius:4px}
.v7-chronos .vbox video{display:block}
/* (the box, 300×169, is a hair taller than the 16:9 video: an iframe the size of the box gets a
   thin bar at its top edge. The player is kept 16:9 and 2% larger, centred, so the box is
   covered and the edge is cut off) */
.v7-chronos .vbox iframe.vimeo{
  position:absolute;left:50%;top:50%;width:102%;height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);
  border:0;pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
}
.v7-chronos .vbox.vimeo-on iframe.vimeo{opacity:1}
.v7-chronos .copy{grid-column:3;grid-row:1;padding-top:calc(90 * var(--u))}
.site.v7 .v7-chronos h2{
  margin:0;font:700 calc(70 * var(--u))/.9 var(--sans);letter-spacing:0;color:#fff;
}
.site.v7 .v7-chronos h2 span{display:block;width:max-content}
.site.v7 .v7-chronos h2 .l2{margin-left:calc(45 * var(--u))}
.site.v7 .v7-chronos h2 .l3{margin-left:calc(91 * var(--u))}
.v7-chronos .sub{display:none}
.site.v7.ja .v7-chronos .sub{
  display:block;margin:calc(30 * var(--u)) 0 0 calc(150 * var(--u));
  font:500 max(15px, calc(16 * var(--u)))/1 var(--sans);color:#fff;
}
.v7-chronos .essay{
  display:flex;flex-direction:column;gap:1.5em;
  margin:calc(30 * var(--u)) 0 0 calc(150 * var(--u));width:calc(430 * var(--u));min-width:260px;
  font:400 max(15px, calc(16 * var(--u)))/1.5 var(--sans);color:#fff;
}
.v7-chronos .essay p{margin:0}

/* —— news (white, 1280×1090): title 60,90 Bold 70; rows from 220, 250 high —— */
.v7-news{background:#fff;color:var(--ink);padding-top:calc(90 * var(--u))}
/* the white news section ends on a fraction of a pixel and the white footer follows; the page
   behind is dark, so phones can show a hairline at the seam: the news background runs 2px on
   under the footer (the layout does not move) */
main > .v7-news:last-child{margin-bottom:-2px;padding-bottom:2px}
.v7-news .head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  width:var(--stage);margin-inline:auto;padding-bottom:calc(18 * var(--u));
}
.site.v7 .v7-news h2{margin:0;font:700 calc(70 * var(--u))/1 var(--sans);letter-spacing:0;color:var(--ink)}
.v7-news .head .v7-btn{margin-bottom:calc(9 * var(--u))}
.v7-news .more{display:none}
.v7-news .list{
  list-style:none;margin:0 auto;padding:0;width:var(--stage);
  border-top:1px solid var(--line-d);
}
.v7-news .item{
  position:relative;display:grid;align-items:start;
  /* title 0–300 · date/summary 390–690 · arrow 780 · thumb 960–1160 */
  grid-template-columns:minmax(0,300fr) minmax(0,90fr) minmax(0,300fr) minmax(0,90fr) 30px minmax(0,150fr) minmax(0,200fr);
  padding:calc(42 * var(--u)) 0;border-bottom:1px solid var(--line-d);
}
.v7-news .title{grid-column:1;grid-row:1;margin:0;font:600 calc(18 * var(--t))/1.2 var(--sans);color:var(--ink)}
/* the whole row is the link (the title link is stretched over it) */
.v7-news .title a::after{content:"";position:absolute;inset:0;z-index:1}
.v7-news .item:hover .title a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.v7-news .mid{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:calc(22 * var(--t))}
.v7-news time{display:block;margin-top:-2px;font:600 calc(12 * var(--t))/1 var(--sans);color:var(--ink)}
.v7-news .sum{margin:0;font:400 calc(14 * var(--t))/1.3 var(--sans);color:var(--ink)}
.v7-news .go{
  grid-column:5;grid-row:1;width:calc(30 * var(--t));height:calc(30 * var(--t));box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--edge-d);border-radius:4px;
  transition:border-color .4s var(--ease);
}
.v7-news .go img{width:calc(7 * var(--t));height:calc(7 * var(--t));filter:brightness(0)}
.v7-news .item:hover .go{border-color:var(--ink)}
.v7-news .thumb{
  grid-column:7;grid-row:1;width:100%;height:auto;aspect-ratio:200/250;object-fit:cover;border-radius:4px;background:var(--ink);
}
.v7-news .cms-loading,.v7-news .cms-empty{display:block}
.v7-news .cms-loading .title{font-size:14px;font-weight:400;color:rgba(6,5,10,.6)}
.v7-news .cms-loading .mid,.v7-news .cms-empty .sum{color:rgba(6,5,10,.6)}

/* —— footer (white, 1280×603) —— */
.site.v7 .v7-foot{
  background:#fff;color:var(--ink);margin:0;max-width:none;
  padding:calc(60 * var(--u)) 0 30px;
}
.v7-foot .cols{
  display:grid;align-items:start;
  /* (.flower is the first div, so the menus are div 2–4) flower 60 · menus 240 / 440 / 640 · newsletter 926–1220 */
  /* the gap before the newsletter (1fr, min 24) gives way first; menus keep 200 until it is used up */
  grid-template-columns:calc(120 * var(--u)) calc(60 * var(--t)) repeat(3, minmax(0, calc(200 * var(--t)))) minmax(24px, 1fr) minmax(240px, calc(294 * var(--t)));
  width:var(--stage);margin-inline:auto;
}
.v7-foot .flower{grid-column:1;position:relative;width:100%;height:auto;aspect-ratio:1}
/* petals spin once each time the flower comes into view (home-v7.js toggles .spin) */
.v7-foot .flower img{position:absolute;inset:0;width:100%;height:100%}
.v7-foot .flower.spin .petals{animation:v7-petals 2.4s var(--ease) both}
@keyframes v7-petals{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.v7-foot .col:nth-of-type(2){grid-column:3}
.v7-foot .col:nth-of-type(3){grid-column:4}
.v7-foot .col:nth-of-type(4){grid-column:5}
.v7-foot .col.nl{grid-column:7;min-width:0}
.v7-foot .col h3{margin:0 0 calc(12 * var(--t));font:700 max(12px, calc(10 * var(--u)))/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.v7-foot .col ul{list-style:none;margin:0;padding:0}
.v7-foot .col li{font:500 max(12px, calc(10 * var(--u)))/1.8 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.v7-foot .col a{text-decoration:none;text-underline-offset:.3em;text-decoration-thickness:1px}
.v7-foot .col:not(.nl) a{display:inline-block}
.site.v7 .v7-foot form{display:block;margin:0;padding:0}
.site.v7 .v7-foot .nl-row{display:flex;gap:calc(6 * var(--t));width:100%;max-width:calc(294 * var(--t))}
.site.v7 .v7-foot .nl-row > label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.site.v7 .v7-foot .nl-row input[type=email]{
  flex:1 1 auto;min-width:0;width:auto;height:calc(48 * var(--t));margin:0;padding:0 calc(16 * var(--t));box-sizing:border-box;
  border:1px solid var(--ink);border-radius:2px;background:#fff;box-shadow:none;outline:none;
  -webkit-appearance:none;appearance:none;
  font:400 max(12px, calc(10 * var(--u)))/1 var(--sans);letter-spacing:0;color:var(--ink);
}
.site.v7 .v7-foot .nl-row input[type=email]::placeholder{color:rgba(6,5,10,.4);opacity:1}
.site.v7 .v7-foot .nl-row input[type=email]:focus,
.site.v7 .v7-foot .nl-row input[type=email]:focus-visible{outline:none}
.site.v7 .v7-foot .nl-row button[type=submit]{
  flex:none;width:calc(48 * var(--t));height:calc(48 * var(--t));margin:0;padding:0;border:0;border-radius:2px;
  background:var(--ink);cursor:pointer;line-height:0;transition:opacity .3s var(--ease);
}
.site.v7 .v7-foot .nl-row button[type=submit]:hover{opacity:.82}
.site.v7 .v7-foot .nl-row button img{width:100%;height:100%}
.site.v7 .v7-foot .consent{
  display:flex;align-items:flex-start;gap:calc(12 * var(--t));margin-top:calc(15 * var(--t));max-width:calc(294 * var(--t));
  font:400 max(12px, calc(10 * var(--u)))/1.3 var(--sans);color:var(--ink);
}
.site.v7 .v7-foot .consent label{font:inherit;letter-spacing:0;text-transform:none;color:inherit;padding:0;cursor:pointer}
.site.v7 .v7-foot .consent input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:none;width:calc(22 * var(--t));height:calc(22 * var(--t));margin:0;
  border:1px solid var(--edge-d);border-radius:4px;background:#fff;cursor:pointer;
}
.site.v7 .v7-foot .consent input[type=checkbox]:checked{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.8 2.8L9 1' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center;
  border-color:var(--ink);
}
.site.v7 .v7-foot .consent a{display:inline;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;color:inherit;overflow-wrap:anywhere}
/* reCAPTCHA: Google's badge hidden; its notice is shown under the forms instead (as Google asks) */
.grecaptcha-badge{visibility:hidden!important}
.site.v7 .v7-foot .rc-note{
  margin:calc(10 * var(--t)) 0 0 calc(34 * var(--t));max-width:calc(260 * var(--t));
  font:400 max(10px, calc(9 * var(--u)))/1.4 var(--sans);letter-spacing:0;color:var(--ink);opacity:.55;
}
.site.v7 .v7-foot .rc-note a{display:inline;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;color:inherit}
.site.v7 .v7-foot form.done > .rc-note{display:none}
.site.v7 .v7-foot .status{margin:10px 0 0;font:400 12px/1.4 var(--sans);color:var(--ink)}
/* validation messages (site.js appends p.err to the field's row): wrap onto their own line
   under the e-mail field / the consent checkbox instead of sitting to the right */
/* row-gap 0: the rows' own gaps (6 / 12px) would otherwise stack on top of the message margin */
.site.v7 .v7-foot .nl-row,.site.v7 .v7-foot .consent{flex-wrap:wrap;row-gap:0}
.site.v7 .v7-foot .consent > label{flex:1 1 0;min-width:0}
.site.v7 .v7-foot .nl-row > .err,.site.v7 .v7-foot .consent > .err{
  flex:0 0 100%;order:9;margin:calc(6 * var(--t)) 0 0;padding:0;
  font:400 max(11px, calc(9 * var(--u)))/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--err);
}
.site.v7 .v7-foot .nl-row input[aria-invalid="true"],
.site.v7 .v7-foot .consent input[aria-invalid="true"]{border-color:var(--err)}
.site.v7 .v7-foot form.done > *:not(.status){display:none}
.site.v7 .v7-foot .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.v7-foot .wordmark{display:block;width:var(--stage);height:auto;margin:calc(216 * var(--u)) auto 0}
.v7-foot .copyline{
  width:var(--stage);margin:calc(30 * var(--u)) auto 0;
  font:400 max(10px, calc(8 * var(--u)))/1 var(--sans);letter-spacing:0;text-transform:uppercase;color:var(--ink);
}

@media (max-width:1100px){
  .site.v7.ja .v7-chronos .sub,.v7-chronos .essay{margin-left:0;width:auto;min-width:0}
}
/* ≤1023: SOCIAL moves under UTILITY so the newsletter keeps its place on the first row */
@media (max-width:1023px){
  .v7-foot .cols{grid-template-columns:calc(120 * var(--u)) 60px minmax(0,200px) minmax(0,200px) minmax(24px,1fr) minmax(240px,294px)}
  .v7-foot .col:nth-of-type(2){grid-column:3;grid-row:1 / span 2}
  .v7-foot .col:nth-of-type(3){grid-column:4;grid-row:1}
  .v7-foot .col:nth-of-type(4){grid-column:4;grid-row:2;margin-top:24px}
  .v7-foot .col.nl{grid-column:6;grid-row:1 / span 2}
  .v7-foot .flower{grid-row:1 / span 2}
}

/* —— "Watch full video": full-screen modal (native <dialog>, opened by home-v7.js) —— */
.v7-video{
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden;
}
.v7-video[open]{display:flex;align-items:center;justify-content:center;animation:v7-fade .35s var(--ease) both}
.v7-video::backdrop{background:#000}
.v7-video{--gap:clamp(12px, 1.8vw, 24px)}
/* the picture sits in a 16:9 box as large as the screen allows; everything around it is the
   dialog's black (the Vimeo player is sized to the box, so its grey letterbox never shows) */
.v7-video .stage{
  position:relative;width:min(100vw, calc(100dvh * 16 / 9));aspect-ratio:16 / 9;max-height:100dvh;background:#000;
  overflow:hidden;
}
.v7-video.portrait .stage{width:min(100vw, calc(100dvh * 9 / 16));aspect-ratio:9 / 16}/* 9:16 cut on phones */
.v7-video video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* (the box is often a fraction of a pixel off the video's shape, e.g. 390 × 693.3 on a phone: a
   player the size of the box shows a thin line above and below. It is kept 2% larger and centred,
   so the edges are cut off by the box) */
.v7-video iframe.vimeo{position:absolute;left:-1%;top:-1%;width:102%;height:102%;border:0;opacity:0;transition:opacity .4s var(--ease)}
.v7-video.vimeo-on iframe.vimeo{opacity:1}
.v7-video:has(iframe.vimeo) video{visibility:hidden}
/* close: inside the picture, the same gap from its top and right edges */
.v7-video .close{
  position:absolute;z-index:2;top:var(--gap);right:var(--gap);
  width:50px;height:50px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;
  background:rgba(6,5,10,.6);cursor:pointer;transition:transform .5s var(--ease),background-color .3s var(--ease);
}
.v7-video .close::before,.v7-video .close::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:1px;background:#fff;
  transform:translate(-50%,-50%) rotate(45deg);
}
.v7-video .close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.v7-video .close:hover{transform:rotate(90deg);background:#06050A}
.v7-video .close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:767px){.v7-video .close{width:40px;height:40px}}
@keyframes v7-fade{from{opacity:0}to{opacity:1}}
html.v7-modal-open{overflow:hidden}

/* ===================================================================== SP (≤767) */
@media (max-width:767px){
  .site.v7{
    /* Figma Sp 375: 20px gutters. --s scales the big type below 375 only */
    --s:min(1px, calc(100vw / 375));
    --t:1px;
    --stage:min(calc(100% - 40px), 600px);
    --side:calc((100% - var(--stage)) / 2);
  }
  .site.v7 .sp-only{display:block}
  .site.v7 .pc-br{display:none}

  /* header: logo 20,25 + name; only the round menu button stays fixed (20 from the top right) */
  .site.v7 .top{padding:25px var(--side) 0;align-items:flex-start}
  .site.v7 .top .brand{gap:10px;height:40px;min-height:0}
  /* the nav row's intro animation uses transform, which would make it the containing block
     of the fixed menu button: on phones only the button fades in (opacity only) */
  .site.v7 .top .r{animation:none}
  .site.v7 .burger{animation:v7-fade .9s var(--ease) 1.05s both}
  .site.v7 .top .brand img{width:40px;height:40px;min-width:0;min-height:0}
  .site.v7 .top .brand .name{width:150px;min-width:0}
  .site.v7 .top .r a.nv,.site.v7 .top .lang-pill{display:none!important}
  .site.v7 .burger{
    /* centre on the logo (25 + 40/2 = 20 + 50/2) and mirror its side margin */
    display:inline-flex!important;position:fixed;top:calc(20px + env(safe-area-inset-top,0px));
    right:calc((100vw - min(100vw - 40px, 600px)) / 2);z-index:60;
    width:50px;height:50px;padding:0;align-items:center;justify-content:center;
    /* superellipse (squircle) as in Figma; #06050A at 40% over a blur (sheet 2) */
    border:0;border-radius:0;color:#fff;
    clip-path:path('M50.0 25.0 L49.9 32.8 L49.8 36.0 L49.5 38.5 L49.0 40.5 L48.5 42.2 L47.8 43.6 L47.0 44.9 L46.0 46.0 L44.9 47.0 L43.6 47.8 L42.2 48.5 L40.5 49.0 L38.5 49.5 L36.0 49.8 L32.8 49.9 L25.0 50.0 L17.2 49.9 L14.0 49.8 L11.5 49.5 L9.5 49.0 L7.8 48.5 L6.4 47.8 L5.1 47.0 L4.0 46.0 L3.0 44.9 L2.2 43.6 L1.5 42.2 L1.0 40.5 L0.5 38.5 L0.2 36.0 L0.1 32.8 L0.0 25.0 L0.1 17.2 L0.2 14.0 L0.5 11.5 L1.0 9.5 L1.5 7.8 L2.2 6.4 L3.0 5.1 L4.0 4.0 L5.1 3.0 L6.4 2.2 L7.8 1.5 L9.5 1.0 L11.5 0.5 L14.0 0.2 L17.2 0.1 L25.0 0.0 L32.8 0.1 L36.0 0.2 L38.5 0.5 L40.5 1.0 L42.2 1.5 L43.6 2.2 L44.9 3.0 L46.0 4.0 L47.0 5.1 L47.8 6.4 L48.5 7.8 L49.0 9.5 L49.5 11.5 L49.8 14.0 L49.9 17.2Z');
    background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M49.50 25.00 L49.44 32.67 L49.26 35.82 L48.97 38.20 L48.55 40.16 L48.01 41.82 L47.34 43.26 L46.54 44.51 L45.60 45.60 L44.51 46.54 L43.26 47.34 L41.82 48.01 L40.16 48.55 L38.20 48.97 L35.82 49.26 L32.67 49.44 L25.00 49.50 L17.33 49.44 L14.18 49.26 L11.80 48.97 L9.84 48.55 L8.18 48.01 L6.74 47.34 L5.49 46.54 L4.40 45.60 L3.46 44.51 L2.66 43.26 L1.99 41.82 L1.45 40.16 L1.03 38.20 L0.74 35.82 L0.56 32.67 L0.50 25.00 L0.56 17.33 L0.74 14.18 L1.03 11.80 L1.45 9.84 L1.99 8.18 L2.66 6.74 L3.46 5.49 L4.40 4.40 L5.49 3.46 L6.74 2.66 L8.18 1.99 L9.84 1.45 L11.80 1.03 L14.18 0.74 L17.33 0.56 L25.00 0.50 L32.67 0.56 L35.82 0.74 L38.20 1.03 L40.16 1.45 L41.82 1.99 L43.26 2.66 L44.51 3.46 L45.60 4.40 L46.54 5.49 L47.34 6.74 L48.01 8.18 L48.55 9.84 L48.97 11.80 L49.26 14.18 L49.44 17.33Z' fill='none' stroke='%23ffffff' stroke-opacity='.1'/></svg>") center / 100% 100% no-repeat,rgba(6,5,10,.4);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  }
  .site.v7 .burger .mlabel{display:none}
  .site.v7 .burger .bars{width:13px;gap:4px}
  .site.v7 .burger i{height:1px;background:#fff}
  .site.v7 .burger:hover i:last-child{transform:none}

  /* hero 375×639: title 20,316 Bold 70/.9, lead 509, button 575 */
  .v7-mv{padding:0 var(--side) 30px}
  .v7-mv .bg video,.v7-mv .bg img{object-position:50% 50%}
  .v7-mv-title{margin-bottom:11px;font-size:calc(70 * var(--s))}
  .v7-mv .lead{max-width:321px}
  .site.v7.ja .v7-mv .lead{max-width:300px}

  /* about 375×373 */
  .v7-about .inner{padding:30px 0}
  .v7-about .portrait,.v7-about .inner.grown .portrait{position:static;width:80px;height:85px}
  .v7-about .inner > div{margin:30px 0 0;width:auto}
  .site.v7 .v7-about .quote{font-size:18px;max-width:335px}
  .v7-about .actions{margin-top:24px}

  /* chapter 375×623: Bold 70, pitch 64; ONE +30, OBJECT +60, FIVE 0, EXPRES/SIONS +60 */
  .v7-chapter .stack{padding:52.4px 0 30px}
  .site.v7 .v7-chapter .line{font-size:calc(70 * var(--s));line-height:calc(64 * var(--s))}
  .site.v7 .v7-chapter .line.one{margin-left:calc(30 * var(--s))}
  .site.v7 .v7-chapter .line.object{margin-left:calc(60 * var(--s))}
  .site.v7 .v7-chapter .line.five{margin-left:0}
  .site.v7 .v7-chapter .line.expressions{margin:0 0 0 calc(60 * var(--s))}
  .site.v7 .v7-chapter .line .ex-full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .site.v7 .v7-chapter .line .ex-split{display:block}
  .site.v7 .v7-chapter .line .ex-a,.site.v7 .v7-chapter .line .ex-b{display:block;position:relative}
  .site.v7 .v7-chapter .line .ex-b .rise-i{position:relative}
  /* "– SIONS": 20×4 dash, 12 before the S, on the cap middle */
  .site.v7 .v7-chapter .line .ex-b:not(.rise)::before,
  .site.v7 .v7-chapter .line .ex-b .rise-i::before{
    content:"";position:absolute;left:calc(-32 * var(--s));top:50%;
    width:calc(20 * var(--s));height:4px;margin-top:-2px;background:#fff;
  }
  .site.v7 .v7-chapter .meta{left:calc(167 * var(--s));top:calc(11.9 * var(--s));gap:calc(5 * var(--s))}
  .site.v7 .v7-chapter .eyebrow{font-size:11px}
  .site.v7 .v7-chapter .chip{margin-left:20px;font-size:11px}
  .site.v7 .v7-chapter .ja-sub{margin:22.6px 0 0;width:auto;max-width:335px;font-size:18px}
  .site.v7 .v7-chapter .body{margin:22.6px 0 0 60px;width:auto;min-width:0;max-width:220px;font-size:14px;text-align:left}
  /* desktop browsers narrowed below 768: keep the 335-wide phone composition centred
     instead of hugging the left of the wider column (real phones are unaffected) */
  @media (min-width:480px){.v7-chapter .stack{width:335px}}
  .site.v7.ja .v7-chapter .body{margin-top:30px}

  /* skull 375×639: frame 335×599 (20 inset), watch 240×381 */
  .v7-skull .frame{clip-path:inset(calc(20px * var(--p)) round calc(4px * var(--p)))}
  /* height-led (63.6%), but never wider than 72% of the frame (Figma 240/335): on tall narrow
     phones the watch is scaled down by width so it never runs into the frame edge.
     Cutout ratio 757/1200 → height cap = (100vw − 40px) × .72 × 1200 / 757 */
  .v7-skull .frame img{height:min(calc(63.6% - 25px), calc((100vw - 40px) * 1.141))}

  /* time objects 375×1531 */
  .v7-objects{padding:52.9px 0 90px}
  .v7-objects .intro{align-items:flex-start;text-align:left}
  .site.v7 .v7-objects h2{font-size:calc(70 * var(--s));line-height:.9}
  .site.v7 .v7-objects h2 .t1,.site.v7 .v7-objects h2 .t2{display:block}
  .site.v7 .v7-objects h2 .t2{margin:-4px 0 0 calc(60 * var(--s))}
  .v7-objects .kicker{margin-top:23px}
  .v7-objects .kicker .pc{display:none}
  .v7-objects .kicker .sp{display:block}
  .v7-objects .intro > p:not(.kicker){margin-top:20px;max-width:335px;min-width:0;font-size:14px}
  .v7-objects .intro .v7-btn{margin-top:18px}
  .v7-grid{
    grid-template-columns:minmax(0,140fr) minmax(0,180fr);gap:42px 15px;
    margin-top:60px;
  }
  .v7-card.large{grid-column:1 / -1}
  .v7-card.large .thumb{aspect-ratio:335/419}
  .v7-card.mid .thumb{aspect-ratio:140/175}
  .v7-card.wide .thumb{aspect-ratio:180/225}
  .v7-card .name{font-size:16px;margin-top:12px}
  .v7-card .v7-price{margin-top:15px}
  .v7-card.mid .v7-price,.v7-card.wide .v7-price{flex-direction:column;align-items:flex-start;gap:3px}

  /* chronos 375×1374: video 213,60 142×80; title 20,120 Bold 50; essay 20,300 16/1.5 */
  .v7-chronos .inner{display:block;position:relative;padding:120px 0 90px}
  .v7-chronos .media{position:absolute;top:60px;right:0;width:142px}
  .v7-chronos .media .pin{position:static;padding:0}
  .site.v7 .v7-chronos h2{font-size:calc(50 * var(--s));line-height:1}
  .site.v7 .v7-chronos h2 .l2,.site.v7 .v7-chronos h2 .l3{margin-left:0}
  .site.v7.ja .v7-chronos .sub{margin:30px 0 0;font-size:16px}
  .v7-chronos .copy{padding:0}
  .v7-chronos .essay{margin:30px 0 0;width:auto;min-width:0;max-width:305px;font-size:16px}
  .site.v7.ja .v7-chronos .essay{max-width:335px}

  /* news 375×1043: title 20,60 Bold 50; rows 30 apart; "View all" under the list */
  .v7-news{padding-top:60px}
  .v7-news .head{padding-bottom:30px}
  .site.v7 .v7-news h2{font-size:calc(50 * var(--s))}
  .v7-news .head .v7-btn{display:none}
  .v7-news .more{display:block;width:var(--stage);margin:30px auto 0}
  .v7-news .item{
    grid-template-columns:minmax(0,200px) minmax(0,1fr) 80px;
    grid-template-areas:"title title date" "sum . thumb" "go . thumb";
    gap:0;padding:30px 0;
  }
  .v7-news .title{grid-area:title;max-width:200px;font-size:16px}
  .v7-news .mid{display:contents}
  .v7-news time{grid-area:date;justify-self:end;margin:0 0 0 12px;font-size:10px;white-space:nowrap}
  .v7-news .sum{grid-area:sum;margin-top:18px;max-width:200px;font-size:12px}
  .v7-news .go{grid-area:go;align-self:end;margin-top:16px}
  .v7-news .thumb{grid-area:thumb;width:80px;margin-top:18px;align-self:start}
  .v7-news .cms-loading .mid,.v7-news .cms-empty .sum{display:block}

  /* footer 375×790: flower 160 centred, menus 20 / 190, newsletter 20,524, wordmark 703 */
  .site.v7 .v7-foot{padding:60px 0 30px}
  .v7-foot .cols{
    grid-template-columns:minmax(0,140fr) minmax(0,165fr);column-gap:30px;row-gap:0;
    grid-template-areas:"flower flower" "c1 c2" "c1 c3" "nl nl";
  }
  .v7-foot .flower{grid-area:flower;justify-self:center;width:160px;margin-bottom:60px}
  .v7-foot .col:nth-of-type(2){grid-area:c1}
  .v7-foot .col:nth-of-type(3){grid-area:c2}
  .v7-foot .col:nth-of-type(4){grid-area:c3;margin-top:24px}
  .v7-foot .col.nl{grid-area:nl;margin-top:30px;min-width:0}
  .v7-foot .col h3{margin-bottom:6px}
  /* e-mail field: iOS zooms into inputs under 16px, so the field is laid out at 4/3 size with
     16px text and scaled to 75% (looks like the 12px design) */
  .site.v7 .v7-foot .nl-row input[type=email]{
    flex:0 0 auto;width:calc((100% - 54px) * 4 / 3);height:64px;
    margin:0 calc((100% - 54px) / -3) -16px 0;padding:0 calc(16px * 4 / 3);
    border-width:calc(4px / 3);border-radius:calc(2px * 4 / 3);
    font-size:16px;transform:scale(.75);transform-origin:0 0;
  }
  .v7-foot .wordmark{margin-top:60px}
  .v7-foot .copyline{margin-top:18px;text-align:center}
}

/* very narrow phones */
@media (max-width:359px){
  .v7-mv .lead br{display:none}
  .site.v7 .v7-chapter .meta{position:static;margin:8px 0 6px}
  .v7-news .item{grid-template-columns:minmax(0,1fr) 72px;grid-template-areas:"title title" "date date" "sum thumb" "go thumb"}
  .v7-news time{justify-self:start;margin:10px 0 0}
  .v7-news .thumb{width:72px}
}

/* ===================================================================== phone menu
   Figma Sp_menu: a 335-wide board inset 20px from every edge (#06050A at 90%, 30px blur, r4)
   over the page; × at the menu button's place; flower logo 100x115 centred; five links at
   18px divided by 5% white rules; UTILITY / SOCIAL at 10px; copyright 8px at the bottom.
   site.js opens/closes it (.open / .closing, focus trap); the board fades in, links rise. */
.site.v7 .drawer.v7-menu .dscrim{background:transparent}
.site.v7 .drawer.v7-menu .panel{
  inset:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px));
  width:auto;padding:50px 20px 20px;box-sizing:border-box;border-radius:4px;
  background:rgba(6,5,10,.9);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  transform:none;opacity:0;transition:opacity .5s var(--ease);
  font-family:var(--sans);overflow-y:auto;overscroll-behavior:contain;
}
.site.v7 .drawer.v7-menu.open .panel{opacity:1}
.site.v7 .drawer.v7-menu .x{
  position:absolute;top:18px;right:18px;width:14px;height:14px;padding:0;margin:0;
  border-radius:0;background:transparent;box-sizing:content-box;border:0;
}
.site.v7 .drawer.v7-menu .x::before,.site.v7 .drawer.v7-menu .x::after{width:19.8px;height:1px;background:#fff}
.site.v7 .drawer.v7-menu .x::after{content:""}
/* bigger tap target around the 14px × */
.site.v7 .drawer.v7-menu .x{outline-offset:6px}
.site.v7 .drawer.v7-menu .x::selection{background:none}
.site.v7 .drawer.v7-menu .x{box-shadow:0 0 0 0 transparent}
.site.v7 .drawer.v7-menu .x:hover{transform:rotate(90deg)}
/* bottom row: copyright on the left, EN/JA on the right */
.site.v7 .drawer.v7-menu .mfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:30px}
.site.v7 .drawer.v7-menu .mlang{margin:0;flex:none}
.site.v7 .drawer.v7-menu .mlogo{display:flex;flex-direction:column;align-items:center;gap:6px;align-self:center;width:100px}
.site.v7 .drawer.v7-menu .mlogo img{width:100px;height:100px}
.site.v7 .drawer.v7-menu .mlogo .mname{width:99px;height:auto}
.site.v7 .drawer.v7-menu .dnav{margin:30px 0 0;padding:0}
.site.v7 .drawer.v7-menu .dnav li{border-bottom:1px solid rgba(255,255,255,.05)}
.site.v7 .drawer.v7-menu .dnav a{
  display:block;padding:12px 0 11px;/* 18 + 23 + 1px rule = Figma pitch 42 */
  font:500 18px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#fff;
}
.site.v7 .drawer.v7-menu .dnav li:first-child a{padding-top:0}
.site.v7 .drawer.v7-menu .dnav ul:hover a:not(:hover){color:#fff}
.site.v7 .drawer.v7-menu .msub{display:grid;grid-template-columns:150px 1fr;margin-top:30px}
.site.v7 .drawer.v7-menu .msub h3{margin:0 0 8px;font:700 10px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.site.v7 .drawer.v7-menu .msub ul{list-style:none;margin:0;padding:0}
.site.v7 .drawer.v7-menu .msub li{font:500 10px/1.8 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.site.v7 .drawer.v7-menu .msub a{color:#fff;text-decoration:none}
.site.v7 .drawer.v7-menu .dcopy{margin:0;font:400 8px/1 var(--sans);letter-spacing:0;color:#fff}
@media (prefers-reduced-motion:no-preference){
  .site.v7 .drawer.v7-menu .mlogo,.site.v7 .drawer.v7-menu .msub{opacity:0;transform:translateY(1rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .site.v7 .drawer.v7-menu.open .mlogo{opacity:1;transform:none;transition-delay:.1s}
  .site.v7 .drawer.v7-menu.open .msub{opacity:1;transform:none;transition-delay:.55s}
  /* EN / JA switch: rises together with the copyright beside it (same motion as .dcopy in site.css) */
  .site.v7 .drawer.v7-menu .mlang{opacity:0;transform:translateY(2rem);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .site.v7 .drawer.v7-menu.open .mlang{opacity:1;transform:none;transition-delay:.64s}
  .site.v7 .drawer.v7-menu.closing .mlang{opacity:0;transform:none;transition:opacity .3s var(--ease-io)}
}

/* ===================================================================== scroll reveals
   home-v7.js adds .rv to elements it watches and .is-in when they come into view;
   without JS (or with reduced motion) nothing is hidden. All 1s ease-in-out. */
/* headlines rise into their own line box (Figma: text +88 → 0 inside a clipping frame) */
.site.v7 .rise{clip-path:inset(-1em -1em 0 -1em)}
.site.v7 .rise-i{display:inline-block}
.site.v7 .rv .rise-i{transform:translateY(110%);transition:transform 1s var(--ease) var(--d,0s)}
.site.v7 .rv.is-in .rise-i{transform:none}
/* collection: a white plate over each picture runs off upwards, revealing it from the bottom */
.v7-card .thumb::after{content:"";position:absolute;inset:0;z-index:2;background:#fff;transform:scaleY(0);transform-origin:50% 0;pointer-events:none}
.v7-card.rv .thumb::after{transform:scaleY(1);transition:transform 1s var(--ease) var(--d,0s)}
.v7-card.rv.is-in .thumb::after{transform:scaleY(0)}
/* news: thumbnails scale up from their left edge (80×100 → 200×250 in the prototype) */
.v7-news .item.rv .thumb{transform:scale(.4);transform-origin:0 0;transition:transform 1s var(--ease)}
.v7-news .item.rv.is-in .thumb{transform:none}
/* body copy: home-v7.js splits it into its rendered lines; each line rises out of its own
   mask, 80ms apart (GSAP "responsive line splits" reference) */
/* the mask reaches .2em below the line box (padding, taken back by the margin) so descenders of
   tight headings (line-height 1: the j of "Objects") are not cut; the line starts 120% down so it
   is still hidden under that deeper mask */
.site.v7 .split .ln{display:block;clip-path:inset(-.3em -1em 0 -1em);padding-bottom:.2em;margin-bottom:-.2em}
.site.v7 .split .ln-i{display:block}
.site.v7 .rv.split .ln-i{transform:translateY(120%);transition:transform 1s var(--ease) var(--d,0s)}
.site.v7 .rv.split.is-in .ln-i{transform:none}

/* reduced motion: no intro, no zoom; home-v7.js keeps videos paused on their posters */
@media (prefers-reduced-motion:reduce){
  .v7-card .thumb img,.v7-btn,.v7-btn img,.v7-about .portrait,.site.v7 .roll .ch i{transition:none}
  .v7-foot .flower .petals,.v7-video[open],.v7-mv .bg .zoom,.site.v7 .top .r,.site.v7 .burger,.v7-mv-title span,.v7-mv .lead,.v7-mv .v7-btn,.v7-btn:hover img{animation:none!important}
}