:root{
  --bg:#f4f3f1; --ink:#0d0d0d; --muted:#8a8a86; --line:rgba(0,0,0,0.16);
  --font:"Swiss 721 BT","Inter",-apple-system,BlinkMacSystemFont,"Swiss 721",Arial,sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{
  width:100%; background:var(--bg); color:var(--ink); font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  scrollbar-width:none; -ms-overflow-style:none;        /* hide scrollbar, keep scroll */
}
html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; width:0; height:0; }
body{ height:350vh; }                                   /* desktop scroll height drives rotation */
a{ color:inherit; text-decoration:none; }

.site-header{ position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:1.9em 2.4em; font-size:13px; letter-spacing:0.02em; }
.header-left{ display:flex; align-items:center; gap:3em; }
.header-right{ display:flex; align-items:center; gap:1.4em; }
.brand{ display:flex; align-items:center; }
.brand-logo{ height:52px; width:auto; display:block; }
.nav{ display:flex; gap:2.2em; font-weight:500; }
.nav a{ position:relative; opacity:0.62; transition:opacity .3s ease; }
.nav a.is-active, .nav a:hover{ opacity:1; }
.nav a.is-active::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--ink); }
.social-link{ display:flex; align-items:center; justify-content:center; color:var(--ink); opacity:0.75; transition:opacity .3s ease; }
.social-link:hover{ opacity:1; }

.corner{ position:fixed; bottom:2.2em; z-index:50; font-style:normal;
  font-family:var(--font); font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink);
  display:flex; flex-direction:column; gap:2px; line-height:1.4; }
.corner a{ transition:opacity .3s ease; }
.corner a:hover{ opacity:0.55; }
.corner--left{ left:2.4em; }
.corner--right{ right:2.4em; text-align:right; }
.corner--right span:last-child{ color:var(--muted); }

.scene{ position:fixed; inset:0; overflow:hidden; perspective:1600px; perspective-origin:50% 50%; }
.gallery{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; }

/* CARD = stable hitbox. IMPORTANT: NO backface-visibility:hidden (it would hide half the ring -> "C"/spiral). */
.item{ position:absolute; top:0; left:0; width:78px; height:60px; transform-style:preserve-3d; }
.item-card{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none;
  transition:box-shadow .4s ease; background:transparent; }
.item-card img, .item-card video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.92) brightness(0.99); }
.item-card.is-active{ box-shadow:0 6px 16px -10px rgba(0,0,0,0.35); }

.center{ position:absolute; top:43%; left:50%; transform:translate(-50%,-50%); width:min(880px,68vw);
  text-align:center; pointer-events:none; z-index:5; }
.center-line-bold{ font-size:clamp(36px,4.6vw,64px); font-weight:700; line-height:1.08; letter-spacing:-0.02em; }
.center-line-regular{ margin-top:0.5em; font-size:clamp(15px,1.6vw,19px); font-weight:400; line-height:1.4; color:var(--muted); }
.center-default,.center-project{ transition:opacity .55s ease; }
.center-project{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; }
.center.show-project .center-default{ opacity:0; }
.center.show-project .center-project{ opacity:1; }
.preview-img{ position:relative; width:min(820px,64vw,calc(var(--ring-radius, 400px) * 1.5)); aspect-ratio:16/9; flex-shrink:0; overflow:hidden; background:#e7e6e3; }
.preview-img img, .preview-img video{ width:100%; height:100%; object-fit:cover; }
.preview-caption{ position:relative; margin-top:1em; padding:0.5em 1.4em; font-size:clamp(15px,1.6vw,19px);
  letter-spacing:-0.005em; border-radius:999px; }
.preview-caption::before{ content:""; position:absolute; inset:0; border-radius:inherit;
  background:rgba(244,243,241,0.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:-1; }
.preview-title{ font-weight:700; }
.preview-sep{ color:var(--muted); }
.preview-cat{ font-weight:400; color:var(--muted); }

.labels{ position:absolute; inset:0; pointer-events:none; }
.label{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; font-size:14px; font-weight:500;
  letter-spacing:0.01em; pointer-events:none; opacity:0.85; }
.label .ul{ border-bottom:1px solid var(--ink); padding-bottom:2px; }

.mobile-preview{ display:none; }
.mobile-ring-hitbox{ display:none; }
.mobile-marquee{ display:none; }

@media (max-width:768px){
  body{ height:auto; }
  .custom-cursor{ display:none !important; }
  .site-header{ padding:1.15em 1em; align-items:center; }
  .nav{ display:none; }
  .brand-logo{ height:38px; }

  .mobile-preview{ display:block; position:static; margin-top:5.6em; padding:0 1.1em; pointer-events:auto; }
  .mp-caption{ font-size:16px; letter-spacing:-0.005em; margin-bottom:14px; }
  .mp-title{ font-weight:700; }
  .mp-sep{ color:var(--muted); }
  .mp-cat{ font-weight:400; color:var(--muted); }
  .mp-img{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; background:#e7e6e3; }
  .mp-img img, .mp-img video{ width:100%; height:100%; object-fit:cover; display:block; }
  .sound-toggle{ position:absolute; right:12px; bottom:12px; z-index:2; width:40px; height:40px;
    background:rgba(13,13,13,0.55); color:#fff; border:none; border-radius:999px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; }
  .sound-toggle .icon-unmuted{ display:none; }
  .sound-toggle.is-unmuted .icon-muted{ display:none; }
  .sound-toggle.is-unmuted .icon-unmuted{ display:block; }

  /* The ring becomes a flat, horizontally-draggable strip instead of the
     circular illusion -- on a narrow phone the circle was mostly off-screen
     to the right, showing only a half-open vertical sliver on the left.
     Normal document flow now (not a fixed full-viewport layer), so the page
     is only as tall as its real content, leaving room for the footer. */
  .scene{ position:relative; inset:auto; height:auto; overflow:visible; perspective:none; }
  .center, .labels{ display:none; }
  /* Exactly two cards wide (2*132 + 14 gap -- keep in sync with
     MOBILE_VISIBLE_W in script.js), centered under the preview above, so
     precisely two whole cards ever show -- never a peeked-at third. */
  .gallery{ position:relative; top:auto; left:auto; width:278px; margin:0 auto; height:190px; overflow:hidden; }
  .mobile-ring-hitbox{ display:block; position:absolute; inset:0; z-index:5; touch-action:pan-y; pointer-events:auto; }
  .item{ width:132px; height:96px; }
  .item-card{ border-radius:3px; }
  /* Decorative only -- a quiet hint that the strip scrolls, not a control. */
  .strip-arrow{ display:block; position:absolute; top:50%; transform:translateY(-50%);
    color:var(--ink); opacity:0.38; pointer-events:none; z-index:1; }
  .strip-arrow--left{ left:0; }
  .strip-arrow--right{ right:0; }

  .mobile-marquee{ display:block; overflow:hidden; margin-top:0.6em; margin-bottom:1.8em; padding:0.9em 0; white-space:nowrap; }
  .mm-track{ display:inline-flex; align-items:center; width:max-content; animation:mm-scroll 22s linear infinite; }
  .mm-sep{ display:inline-block; font-size:12.5px; font-weight:500; letter-spacing:0.02em; color:var(--muted); }
  .mm-item{ display:inline-block; font-family:inherit; font-size:12.5px; font-weight:500; letter-spacing:0.02em;
    color:var(--muted); background:none; border:none; padding:0.4em 0; margin:-0.4em 0; cursor:pointer; }
  .mm-item.is-active{ color:var(--ink); font-weight:700; }
  @media (prefers-reduced-motion:reduce){ .mm-track{ animation:none; } }

  .mobile-footer{ display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start;
    padding:1.2em 1.4em 3em; margin-top:0; border-top:1px solid var(--line); }
  .mobile-footer .corner{ position:static; font-size:11.5px; }
}

@keyframes mm-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.custom-cursor{ display:none; }
@media (pointer:fine) and (hover:hover){
  body{ cursor:none; }                                  /* dot replaces the OS cursor */
  .custom-cursor{ display:block; position:fixed; top:0; left:0; width:13px; height:13px;
    border-radius:999px; background:#000; pointer-events:none; z-index:99999; will-change:transform; transition:opacity .3s ease; }
  .custom-cursor.is-hidden{ opacity:0; }
}

body:not(.page-ready) .scene{ opacity:0; }              /* hide ring until fully built+painted */

.loading-screen{ position:fixed; inset:0; z-index:999999; background:var(--bg);
  display:flex; align-items:center; justify-content:center; cursor:default; }
.loading-screen.is-hidden{ pointer-events:none; }
.loading-inner{ text-align:center; opacity:0; animation:load-in .8s ease forwards; }
.loading-brand{ font-weight:600; font-size:20px; letter-spacing:0.06em; }
.loading-text{ margin-top:1.1em; font-size:11px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); animation:load-pulse 1.8s ease-in-out infinite; }
.loading-bar{ width:120px; height:1px; margin:1.6em auto 0; background:rgba(0,0,0,0.12); overflow:hidden; }
.loading-bar span{ display:block; width:100%; height:100%; background:var(--ink); transform:scaleX(0);
  transform-origin:left center; animation:load-bar 1.4s ease-in-out forwards; }
@keyframes load-in{ to{ opacity:1; } }
@keyframes load-pulse{ 0%,100%{ opacity:0.45; } 50%{ opacity:1; } }
@keyframes load-bar{ to{ transform:scaleX(1); } }
@media (max-width:768px){ .loading-screen{ height:100svh; } }