/* SiR.dNA homepage — page-level styles on top of the system's bundle.css */
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); overflow: hidden; -webkit-font-smoothing: antialiased; }
#app { position: fixed; inset: 0; background: var(--ground); color: var(--ink); overflow: hidden; }
.screen { position: relative; }

/* Flow-based screens remain full-height but can scroll on short displays. */
.sd-slide { display: flex; flex-direction: column; justify-content: flex-end; min-height: calc(var(--tv-screen-height, 100vh) - var(--tv-dock-height, 0px)); height: auto; }
.sd-slide-content { position: relative; top: auto; bottom: auto; left: auto; right: auto; max-width: min(74%, calc(100% - var(--tv-control-gutter, 194px))); gap: var(--space-4); padding: 96px var(--space-16) var(--space-16); }
.sd-slide-tl { margin-bottom: auto; padding-top: 96px; }
.sd-slide-coord, .sd-slide-row { display: none; }
.hero .sd-slide-side { width: 52%; }
.hero .sd-slide-side img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero .sd-slide-side > .sd-trip { width: 100%; height: 100%; }
.look-photo > .sd-trip { position: absolute; inset: 0; }
.hero .sd-slide-content { max-width: 52%; }
.hero .sd-wm-hero .sd-wm-name { font-size: clamp(72px, 8.9vw, 128px); }
.hero .labels { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sd-body { max-width: 440px; }
.lede { font-size: 18px; line-height: 28px; }
.muted { color: var(--ink-muted); }
.meta { font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: .02em; }

/* the drop: three zoom tiles */
.wide .sd-slide-content { max-width: 100%; width: 100%; gap: var(--space-3); padding-right: var(--tv-control-gutter, 194px); }
.drop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); width: 100%; }
.drop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; height: calc(var(--tv-screen-height, 100vh) - 260px); min-height: 360px; }
.drop .sd-zoom { height: 100%; }
/* product slides */
.product .sd-slide-side { width: 58%; top: 0; align-items: stretch; }
.product .sd-slide-side > .sd-zoom { width: 100%; height: 100%; }
.product .sd-slide-content { max-width: 42%; }
.product .sd-display-md { font-size: clamp(44px, 5vw, 72px); overflow-wrap: anywhere; }
.product .sd-zoom-hint { top: var(--space-4); }

/* product grids */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: min(100%, 720px); }
.cards .sd-card-media { aspect-ratio: 4 / 4; }
.cards .sd-card-name { font-size: 18px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 520px); }
.tbd { position: absolute; right: var(--space-2); bottom: var(--space-2); color: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.sd-card-media img { object-fit: contain; padding: 12%; box-sizing: border-box; }

/* THE FIT slides */
.fit { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(var(--tv-screen-height, 100vh) - var(--tv-dock-height, 0px)); width: 100%; }
.fit-photo { position: relative; overflow: hidden; }
.fit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fit-photo.plain { background: #ffffff; }
.fit-photo.plain img { object-fit: contain; }
.fit-side { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); padding: 88px var(--tv-control-gutter, 194px) 48px var(--space-8); box-sizing: border-box; min-width: 0; }
.fit-side .sd-display-md, .look-side .sd-display-md { font-size: clamp(38px, 4.2vw, 66px); overflow-wrap: anywhere; }
.fit-side .sd-body { font-size: 14px; line-height: 20px; }
.fit-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-3); min-height: 0; }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--ground-raised); border: var(--stroke-hair) solid var(--line-muted); min-height: 0; }
.tile-out { border-style: dashed; border-color: var(--line); }
.tile-media { position: relative; flex: 1 1 0; min-height: 80px; max-height: 160px; overflow: hidden; }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tile-kind { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.tile-name { font-family: var(--font-display); font-size: 14px; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; }
.tile-price { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.tile .sd-btn { min-height: 40px; padding: var(--space-1) var(--space-3); font-size: 10px; }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }

/* lookbook (blanc) */
.look { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(var(--tv-screen-height, 100vh) - var(--tv-dock-height, 0px)); width: 100%; }
.look-photo { position: relative; overflow: hidden; }
.look-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.look-side { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4); padding: 96px var(--tv-control-gutter, 194px) var(--space-16) var(--space-12); box-sizing: border-box; min-width: 0; }

/* sign-off */
.station-ident { position: relative; display: grid; place-items: center; width: 100%; min-height: calc(var(--tv-screen-height, 100vh) - var(--tv-dock-height, 0px)); box-sizing: border-box; padding: clamp(28px, 7vw, 96px) max(clamp(28px, 8vw, 128px), var(--tv-control-gutter, 194px)); overflow: hidden; background: #fff; }
.station-ident img { display: block; width: min(68vw, 720px); max-width: 100%; max-height: min(72vh, 720px); height: auto; object-fit: contain; }
.signoff { position: relative; display: flex; flex-direction: column; min-height: calc(var(--tv-screen-height, 100vh) - var(--tv-dock-height, 0px)); }
.signoff .sd-bars { flex: 1 1 auto; height: auto; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--tv-control-gutter, 194px) var(--space-6) var(--space-6); background: var(--ground); color: var(--ink); flex-wrap: wrap; }
.foot-links { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.foot-links a { color: var(--ink); text-decoration: none; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.foot-links a:hover { color: var(--accent); }

/* keyboard focus */
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (min-width: 768px) and (max-width: 1100px) {
  .sd-slide-content { padding-left: var(--space-8); padding-right: var(--space-8); }
  .sd-display-xl { font-size: 112px; }
  .sd-display-lg { font-size: 88px; }
  .fit-tiles { grid-template-columns: 1fr; grid-template-rows: none; }
  .tile { display: grid; grid-template-columns: 48px 1fr; gap: 6px 10px; }
  .tile-media { grid-row: 1 / 4; min-height: 60px; }
  .tile-foot { flex-wrap: wrap; }
  .tile .sd-tag { font-size: 8px; }
  .fit-side, .look-side { padding-left: 24px; }
}

/* mobile */
@media (max-width: 767px) {
  .station-ident { padding: 32px max(24px, env(safe-area-inset-right, 0px)) calc(var(--tv-dock-height, 0px) + 32px) max(24px, env(safe-area-inset-left, 0px)); }
  .station-ident img { width: min(72vw, 460px); max-height: 62vh; }
  .sd-slide-content { max-width: 100%; width: 100%; padding: 72px max(var(--space-4), env(safe-area-inset-right, 0px)) 28px max(var(--space-4), env(safe-area-inset-left, 0px)); gap: var(--space-3); }
  .sd-slide-tl { padding-top: 72px; }
  .sd-display-xl { font-size: clamp(52px, 14.5vw, 88px); }
  .sd-display-lg { font-size: clamp(48px, 13.5vw, 76px); }
  .sd-display-md { font-size: clamp(38px, 11vw, 56px); }
  .sd-jp-display { font-size: 28px; }
  .sd-hl-bleed { white-space: normal; }
  .hero .sd-slide-side { width: 100%; height: clamp(240px, 43vh, 440px); top: auto; bottom: auto; }
  .hero .sd-slide-content { max-width: 100%; padding-top: 24px; }
  .hero .sd-wm-hero .sd-wm-name { font-size: clamp(64px, 17vw, 104px); }
  .hero .sd-wm-hero .sd-wm-jp { font-size: 14px; }
  .sd-slide-side { position: relative; flex: none; width: 100%; height: clamp(240px, 43vh, 440px); top: auto; bottom: auto; }
  .sd-slide-side img { width: 70%; height: 90%; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards .sd-card { padding: var(--space-2); gap: var(--space-1); }
  .cards .sd-card-name { font-size: 13px; }
  .cards .sd-card-line, .cards .sd-card-sold { transform: scale(.8); transform-origin: top left; }
  .cards .sd-tag-jp { display: none; }
  .drop-head .meta { display: none; }
  .drop { grid-template-columns: 1fr 1fr; grid-template-rows: 1.1fr 1fr; height: calc(var(--tv-screen-height, 100vh) - var(--tv-dock-height, 0px) - 180px); min-height: 450px; gap: var(--space-2); }
  .drop .sd-zoom:first-child { grid-column: 1 / -1; }
  .drop .sd-zoom-name { font-size: 16px; }
  .drop .sd-zoom-hint { display: none; }
  .drop .sd-zoom:not(:first-child) .sd-tag, .drop .sd-zoom:not(:first-child) .sd-zoom-no { display: none; }
  .wide .sd-slide-content { top: auto; bottom: auto; padding: 72px var(--space-4) 28px; }
  .product .sd-slide-side { width: 100%; height: clamp(250px, 46vh, 440px); top: auto; }
  .product .sd-slide-content { max-width: 100%; padding-top: 24px; }
  .product .sd-display-md { font-size: clamp(38px, 11vw, 56px); }
  .product .sd-zoom-hint { top: var(--space-3); right: var(--space-3); }
  .fit { grid-template-columns: 1fr; grid-template-rows: clamp(220px, 32vh, 400px) auto; }
  .fit-photo.plain { margin-top: 0; }
  .fit-side { padding: 24px var(--space-4) 28px; justify-content: flex-start; gap: var(--space-2); }
  .fit-side .sd-display-md { font-size: 32px; }
  .fit-side .sd-hl-jp { display: none; }
  .fit-side .sd-body { display: none; }
  .fit-tiles { grid-template-columns: 1fr; gap: var(--space-2); }
  .tile { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: 'media kind foot' 'media name foot'; align-items: center; column-gap: var(--space-3); row-gap: 2px; padding: var(--space-2); }
  .tile-media { grid-area: media; aspect-ratio: 1 / 1; flex: none; min-height: 0; max-height: none; }
  .fit-tiles { grid-template-rows: auto; flex: none; }
  .tile-media .tbd { display: none; }
  .tile-kind { grid-area: kind; font-size: 9px; }
  .tile-name { grid-area: name; font-size: 12px; }
  .tile-foot { grid-area: foot; flex-direction: column; align-items: flex-end; gap: var(--space-1); margin: 0; }
  .tile .sd-btn { min-height: 40px; padding: 6px var(--space-2); font-size: 9px; }
  .look { grid-template-columns: 1fr; grid-template-rows: clamp(280px, 50vh, 480px) auto; }
  .look-side { padding: 24px var(--space-4) 28px; justify-content: flex-start; gap: var(--space-2); }
  .look-side .sd-display-md { font-size: 32px; }
  .look-side .sd-body { font-size: 14px; line-height: 20px; }
  .foot { padding: 24px var(--space-4); }
  .foot-links { gap: 16px 24px; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 32px; }
  .signoff .sd-bars { min-height: 260px; }
  .sd-stray-hide-mobile { display: none; }
}