/* =========================================================
   DEUCE ENTERTAINMENT — obys.agency-inspired
   ========================================================= */

:root{
  --white:#fafaf7;
  --black:#0a0a0a;
  --gray:#c9c9c9;
  --accent:#ff3b1c;          /* deep orange */
  --accent-2:#162b1b;
  --g:1rem;
  --m-x:1rem;
  --m-y:1rem;
  --c:calc((100vw - (var(--m-x)*2 + var(--g)*11))/12);
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","YuMincho",serif;
  --display:"Italiana","Shippori Mincho B1",serif;
  --gothic:"Zen Kaku Gothic Antique","Hiragino Sans","Yu Gothic",sans-serif;
  --mono:"JetBrains Mono","Menlo",monospace;
  --easeOut: cubic-bezier(.16,1,.3,1);
  --easeStrong: cubic-bezier(.77,0,.18,1);
}

html{
  font-size: clamp(13px, .694vw, 22px);
  -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;
  background: var(--white);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  background: var(--white);
  color: var(--black);
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: -.005em;
  overflow-x:hidden;
  cursor:none;
  overscroll-behavior:none;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, .big-line, .sv-row__title, .ar-row__name, .nw-row__title, .hero-claim__h{
  word-break: keep-all;
  line-break: strict;
}
@media (max-width: 820px){ body{ cursor:auto; font-size:15px; } html{ font-size:16px; } }
img,svg,video,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; font:inherit; cursor:none; }
ul,ol,li{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

/* Line reveal primitives (obys-pattern) */
.ln_{ overflow:hidden; display:block; line-height:inherit; }
.ln {
  position:relative;
  display:block;
  will-change:transform;
  transform:translateY(102%);
  transition: transform 1s var(--easeStrong);
}
.is-loading .ln{ transform: translateY(102%); }
.in .ln, .is-on .ln{ transform: translateY(0); }
span.ln, span.ln_{ display:block; }
.ln_ em, .ln em, .ln strong{ font-style:normal; }

/* Underline scaleX primitive (obys-pattern) */
.l{ overflow:hidden; width:100%; height:3px; position:relative; }
.l>div{
  border-bottom:1.34px solid currentColor;
  width:100%; height:1px;
  transform: translateX(-100.1%);
  transition: transform .8s var(--easeOut);
}
.is-on .l>div, a:hover .l>div{ transform: translateX(0); }

/* =========================================================
   GL canvas placeholder (kept transparent for now)
   ========================================================= */
#gl{
  position:fixed; pointer-events:none;
  width:100%; height:100%; top:0; left:0; z-index:1;
  opacity:0;
}

/* =========================================================
   Guide grid (12 columns) — obys debug grid
   ========================================================= */
#g_{
  position:fixed; z-index:9999;
  top:var(--m-y); bottom:var(--m-y);
  left:var(--m-x); right:var(--m-x);
  display:flex; pointer-events:none;
  opacity:0; transition: opacity .3s ease;
}
#g_.g_o{ opacity:.15; }
#g{
  display:flex; gap:var(--g);
  width:100%; height:100%;
}
#g div{
  background:rgba(255, 59, 28, .35);
  flex:1; height:100%;
}

/* =========================================================
   Grain
   ========================================================= */
.grain{
  position:fixed; inset:0;
  pointer-events:none; z-index:9998; opacity:.08;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
  mix-blend-mode:multiply;
}

/* =========================================================
   Custom cursor
   ========================================================= */
.cursor{
  position:fixed; top:0; left:0; width:14px; height:14px;
  /* white border + difference blend = visible on light bg (becomes black)
     and dark images (stays white) */
  border:1.4px solid #ffffff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:10000;
  transition:width .35s var(--easeOut), height .35s var(--easeOut),
             background-color .3s ease, border-color .3s ease;
  display:flex; align-items:center; justify-content:center;
  mix-blend-mode:difference;
  background:transparent;
}
.cursor__label{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.1em;
  color:var(--white);
  opacity:0; transform:scale(.7);
  transition:opacity .25s ease, transform .25s ease;
  text-transform:uppercase;
  white-space:nowrap;
}
.cursor.is-hover{
  width:84px; height:84px;
  background:var(--white);
  border-color:var(--white);
}
.cursor.is-hover .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-down{ transform:translate(-50%,-50%) scale(.8); }
@media (max-width: 820px){ .cursor{ display:none; } }

/* =========================================================
   Preloader
   ========================================================= */
#preloader, #preloader-bg{
  position:fixed; width:100%; height:100%; top:0; left:0;
}
#preloader{ z-index:9996; overflow:hidden; pointer-events:all; }
#preloader-bg{
  background-color: var(--black);
  transform-origin: bottom;
  transition: transform 1.1s var(--easeStrong);
}
.is-done #preloader-bg{ transform: scaleY(0); }

#preloader-prg{
  position:absolute;
  right: var(--m-x); top: 50%;
  z-index:1; color: var(--white);
  mix-blend-mode: difference;
  transform:translateY(-50%);
  font-family: var(--display);
  font-size: clamp(80px, 14vw, 180px);
  font-weight: 400;
  letter-spacing:-.04em; line-height:1;
}
#preloader-prg .dim{ opacity:.4; font-size:.5em; vertical-align: super; }

#preloader-words{
  position:absolute;
  left: var(--m-x); bottom: var(--m-y);
  color: var(--white); mix-blend-mode: difference;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing:-.01em;
}

#prg{
  position:fixed; overflow:hidden; z-index:9999;
  width:100%; height:2px; top:0; left:0;
}
#prgFill{
  background-color: var(--black);
  width:100%; height:100%;
  transform: translateX(-101%);
  will-change: transform;
}
.is-done #prgFill{ transform: translateX(0); }

#preloader.is-gone{ display:none; }

/* =========================================================
   Logo (centered, splits on scroll)
   ========================================================= */
/* Logo — positioned top-left (obys-style) */
#logo{
  position:fixed;
  top: var(--m-y);
  left: var(--m-x);
  z-index:9999;
  mix-blend-mode: difference;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing:.02em; font-weight:400;
  display:flex; gap:.35em;
  pointer-events:auto;
  white-space:nowrap;
  align-items: baseline;
}
#logo > span{
  display:inline-block;
  transition: letter-spacing .6s var(--easeOut), opacity .5s ease;
}
#logo #logo-r{ font-size: .82em; opacity:.85; }
#logo:hover #logo-l{ letter-spacing:.16em; }
#logo:hover #logo-r{ opacity:1; letter-spacing:.12em; }

/* Hide redundant header-title (logo now lives top-left) */
#header-title{ display:none !important; }
/* Keep header right-side as-is, but adjust justify since left side is empty */
#header{ justify-content: flex-end; }

/* =========================================================
   Header
   ========================================================= */
#header{
  position:fixed;
  top: var(--m-y);
  left: var(--m-x); right: var(--m-x);
  display:flex; justify-content:space-between;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events:none;
  z-index: 9997;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.06em;
  text-transform: uppercase;
}
#header-title{
  max-width: calc(var(--c) * 2 + var(--g) * 2);
  pointer-events:all; overflow:hidden;
  font-family: var(--gothic);
  font-size: 12px;
  letter-spacing:.02em;
  text-transform:none;
}
#header-title em{ font-style:normal; opacity:.8; }
#header-right{
  display:flex; align-items: flex-start;
  gap: var(--g);
}
#header-right > *{ width: calc(var(--c) * 2); pointer-events:all; }
#header-menu{ display:flex; gap:.6rem; flex-wrap:wrap; }
#header-menu > a{
  position:relative; display:inline-block;
  height: 1.2lh; line-height:1;
}
#header-menu > a > span{ position:relative; display:inline-block; }
#header-menu > a > span > .l{
  position:absolute; left:0; bottom:-3px; width:100%;
}
#header-time em{ font-style:normal; }
#header-contact{ text-align:right; pointer-events:all; cursor:none; display:block; }
#header-contact > span{ position:relative; display:inline-block; }
#header-contact > span > .l{ position:absolute; left:0; bottom:-3px; width:100%; }
@media (max-width:820px){
  #header-time, #header-menu{ display:none; }
  #header-right{ flex-direction:row; gap:.6rem; }
  #header-right > *{ width:auto; }
}

/* =========================================================
   HERO — three-mode work showcase (column / rotated / grid)
   ========================================================= */
.hero{
  position:relative;
  width:100%; height:100svh;
  overflow:hidden;
}
#ho-wo{
  position:absolute; inset:0;
  width:100%; height:100svh;
}

/* shared layer */
.ho-wo-s_{
  position:absolute; inset:0;
  width:100%; height:100svh;
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition: opacity .55s var(--easeOut), visibility 0s .55s;
}
.ho-wo-s_.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .55s var(--easeOut), visibility 0s 0s;
}

/* Tile shared */
#ho-wo .r{
  display:block;
  background:#1c1c1c;
  background-size:cover; background-position:center;
  flex-shrink:0;
  position:relative;
  filter: grayscale(.15) contrast(1.05);
  transition: filter .5s ease, transform .8s var(--easeOut);
  cursor:none;
}
#ho-wo .r:hover{ filter:none; transform: scale(1.03); z-index:2; }
#ho-wo .r::after{
  content:""; position:absolute; inset:0;
  background: rgba(10,10,10,.16);
  transition: background .35s ease;
}
#ho-wo .r:hover::after{ background: rgba(10,10,10,0); }

/* ============ MODE 0 — vertical column ============ */
#ho-wo-0 > .ho-wo-s{
  position:absolute; inset:0;
  display:flex; justify-content:center;
  overflow:hidden;
}
.ho-wo-col{
  display:flex; flex-direction:column; align-items:center;
  gap:.5rem;
  will-change:transform;
}

/* Title list — left, multi-line, active centered */
#ho-wo-0-ti{
  position:absolute; top:50%;
  left: var(--g);
  width: calc(var(--c) * 2 + var(--g) * 1);
  height: 25.25rem;
  overflow:hidden;
  line-height: 1.2;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight:500; letter-spacing:-.02em;
  z-index: 4;
  pointer-events:none;
}
#ho-wo-0-ti > div{
  display:flex; flex-direction:column; align-items:flex-start;
  will-change:transform;
  transition: transform .9s var(--easeOut);
}
#ho-wo-0-ti a{ display:block; opacity:.18; transition: opacity .5s ease; }
#ho-wo-0-ti a.is-active{ opacity:1; }

/* Meta bar — right of title, single line */
#ho-wo-0-me_{
  position:absolute; top:50%;
  left: calc(var(--c) * 2 + var(--g) * 3);
  width: calc(var(--c) * 9 + var(--g) * 8);
  overflow:hidden; pointer-events:none;
  height: 1lh; line-height: 1.2;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  z-index: 4;
}
#ho-wo-0-me_ #ho-wo-0-me{
  position:absolute; inset:0; will-change:transform;
}
#ho-wo-0-me_ #ho-wo-0-me > div{
  position:absolute; display:flex; opacity:0;
  top:50%; left:0; width:100%;
  transform: translateY(-50%);
  transition: opacity .4s ease;
}
#ho-wo-0-me_ #ho-wo-0-me > div.is-on{ opacity:1; }
#ho-wo-0-me_ #ho-wo-0-me > div > span:first-child{ width: calc(var(--c) * 5 + var(--g) * 5); }
#ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(2){ width: calc(var(--c) * 3 + var(--g) * 2); }
#ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(3){ width: var(--c); text-align:right; margin-left:auto; }

/* ============ MODE 1 — rotated horizontal ============ */
#ho-wo-1 > .ho-wo-s{
  position:absolute; inset:0;
  overflow:hidden;
}
.ho-wo-row{
  position:absolute;
  display:flex; align-items:center; gap:.5rem;
  top:50%; left:0;
  transform: translateY(-50%);
  will-change:transform;
}
#ho-wo-1 .ho-wo-row .r{
  transform: rotate(-90deg);
}
#ho-wo-1-ti{
  position:absolute; bottom:0; right: var(--g);
  width: calc(var(--c) * 3 + var(--g) * 2);
  height: 24.5rem;
  clip-path: inset(0 0 2.5% 0);
  overflow:hidden;
  z-index:4;
  pointer-events:none;
  font-family: var(--serif);
  font-size: 1.5rem; line-height: 1.2; font-weight:500; letter-spacing:-.02em;
}
#ho-wo-1-ti > div{
  display:flex; flex-direction:column; justify-content:flex-end;
  width:100%; height:max-content;
  will-change:transform;
  transition: transform .9s var(--easeOut);
  text-align:right;
}
#ho-wo-1-ti a{ display:block; white-space:nowrap; opacity:.18; transition:opacity .4s ease; }
#ho-wo-1-ti a.is-active{ opacity:1; }
#ho-wo-1-me_{
  position:absolute; bottom: var(--g); right: var(--g);
  width: calc(var(--c) * 6 + var(--g) * 5);
  pointer-events:none; height: 24.5rem;
  z-index:3;
}
#ho-wo-1-me_ #ho-wo-1-me{
  position:absolute; overflow:hidden;
  width:100%; height: 1.1lh;
  bottom:0; left:0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing:.08em; text-transform:uppercase;
}
#ho-wo-1-me_ #ho-wo-1-me > div{
  position:absolute; inset:0;
}
#ho-wo-1-me_ #ho-wo-1-me > div > div{
  position:absolute; inset:0;
  display:flex; justify-content:space-between; opacity:0;
  transition: opacity .35s ease;
}
#ho-wo-1-me_ #ho-wo-1-me > div > div.is-on{ opacity:1; }
#ho-wo-1-me_ .l{ position:absolute; bottom:0; left:0; width:100%; }
#ho-wo-1-me_ .l > div{ border-color: var(--gray); }

/* ============ MODE 2 — static grid ============ */
#ho-wo-2{ overflow:auto; }
#ho-wo-2 > .ho-wo-s{
  position:absolute; width:100%; top:0; left:0;
}
.ho-wo-grid{
  position:relative;
  padding: calc(var(--g) * 3) var(--g);
  display:grid;
  grid-template-columns: repeat(12, var(--c));
  gap: 4rem var(--g);
}
.ho-wo-2-li{
  position:relative;
  grid-row: var(--gr); grid-column: var(--gc);
  opacity:0; transform: translateY(40px);
  transition: opacity .8s var(--easeOut), transform 1s var(--easeOut);
  background: #1c1c1c;
  background-size:cover; background-position:center;
  filter: grayscale(.15) contrast(1.05);
}
.ho-wo-2-li.is-in{ opacity:1; transform:none; }
.ho-wo-2-li::before{
  content:""; position:absolute; inset:0;
  background: rgba(10,10,10,.16);
  transition: background .35s ease;
}
.ho-wo-2-li:hover::before{ background: rgba(10,10,10,0); }
.ho-wo-2-li:hover{ filter:none; }
.ho-wo-2-ti{
  position:absolute; left:0; right:0; bottom:0;
  text-align:center; overflow:hidden;
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 92px);
  line-height: 1; padding: .2em 0;
  letter-spacing:-.02em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events:none;
  transform: translateY(50%);
}
.ho-wo-2-ti > div{
  transform: translateY(110%);
  transition: transform 1s var(--easeOut);
  will-change: transform;
}
.ho-wo-2-li.is-in .ho-wo-2-ti > div{ transform: translateY(0); }
.ho-wo-2-me{
  position:fixed; top:50%; left: var(--g); right: var(--g);
  display:flex; gap: var(--g);
  transform: translateY(-50%);
  pointer-events:none;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  z-index: 5;
  color: var(--gray);
  opacity: 0; transition: opacity .5s ease;
}
#ho-wo-2.is-active .ho-wo-2-me{ opacity:1; }
.ho-wo-2-me > div{ overflow:hidden; }
.ho-wo-2-me > div:first-child{ width: calc(var(--c) * 2 + var(--g) * 1); }
.ho-wo-2-me > div:nth-child(2){ width: calc(var(--c) * 2 + var(--g) * 1); }
.ho-wo-2-me > div:nth-child(3){ margin-left: calc(var(--c) * 5 + var(--g) * 5); }
.ho-wo-2-me > div:nth-child(4){ margin-left:auto; text-align:right; }

/* ============ Mode switcher ============ */
#ho-wo-mo{
  position:absolute; left: var(--g); bottom: var(--g);
  z-index:5;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  display:flex; gap: 1rem;
  pointer-events:auto;
}
#ho-wo-mo > a{
  position:relative; display:inline-block;
  cursor:none;
  padding-bottom: 2px;
  color: var(--gray);
  transition: color .35s ease;
}
#ho-wo-mo > a:hover{ color: var(--black); }
#ho-wo-mo > a.is-on{ color: var(--black); }
#ho-wo-mo > a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--easeOut);
}
#ho-wo-mo > a:hover::after,
#ho-wo-mo > a.is-on::after{ transform: scaleX(1); transform-origin: left; }

/* ============ Copyright bottom-right ============ */
#ho-cp{
  position:absolute; bottom: var(--g); right: var(--g);
  font-family: var(--mono); font-size:11px; letter-spacing:.08em;
  color: var(--gray);
  z-index:5;
}

/* ============ #fix description (top-right) ============ */
#fix{
  position:absolute;
  top: 5rem;
  right: calc(var(--c) * 1 + var(--g) * 3);
  width: calc(var(--c) * 2 + var(--g));
  z-index: 9997;
  font-family: var(--gothic);
  font-size: 13px; line-height: 1.5;
  pointer-events:auto;
}
#fix-de{
  margin-bottom: 1.3rem;
}
#fix-de .ln_{ display:block; }
#fix-co{ font-size: 12px; color: var(--gray); }
#fix-co em{ font-style:normal; color: var(--black); }
#fix-co-em{ position:relative; display:inline-block; cursor:none; }
#fix-co-em .l{
  position:absolute; left:0; bottom:-2px; width:100%;
}
#fix-co-em .l > div{ transform: translateX(0); }
#fix-co-em:hover .l > div{ transform: translateX(101%); }

@media (max-width:820px){
  #fix{ display:none; }
  #ho-wo-0-ti{ left:.5rem; width:60vw; font-size:1.3rem; height:18rem; }
  #ho-wo-0-me_{ left:.5rem; width:calc(100vw - 1rem); top: auto; bottom: 5rem; transform:none; }
  #ho-wo-0-me_ #ho-wo-0-me > div > span:first-child{ width:60%; }
  #ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(2){ width:30%; }
  #ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(3){ width:10%; }
}

/* =========================================================
   ABOUT
   ========================================================= */
section{ position:relative; }
.ab{
  padding: 8rem var(--g) 5rem;
}
#ab-co-ma{
  position:relative;
  padding-block-start: 5rem;
  padding-inline: var(--g) 0;
  letter-spacing: -.03em;
  font-size: clamp(40px, 4.4vw, 84px);
  line-height: 1.18;
  font-family: var(--serif);
  font-weight: 500;
}
#ab-co-ma > div:first-child{
  width: calc(var(--c) * 9 + var(--g) * 8);
}
#ab-co-ma .ln_{ margin-block-start: -.4rem; margin-block-end: -.4rem; padding-block: .3rem; }
#ab-co-ma u{
  text-decoration: underline; text-underline-offset: .15em;
  cursor:none; transition: color .3s;
  color: var(--accent);
}
#ab-co-ma u:hover{ color: var(--gray); }

.big-line em{
  font-style:normal; color: var(--accent);
}

.ab-meta{
  display:grid;
  grid-template-columns: var(--c) calc(var(--c) * 6 + var(--g) * 5) 1fr;
  gap: var(--g);
  padding-top: 6rem;
  border-top: 1px solid rgba(10,10,10,.16);
  margin-top: 6rem;
}
.ab-meta__col p{
  font-size: 1.1rem; line-height: 1.7;
  max-width: 42ch;
}
.ab-meta__col em{ font-style:normal; font-family: var(--display); letter-spacing:.04em; }
.ab-meta__col--list dl{ display:flex; flex-direction:column; gap:.6rem; }
.ab-meta__col--list dl > div{
  display:flex; justify-content:space-between;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(10,10,10,.16);
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
}
.ab-meta__col--list dt{ color: var(--gray); }
.ab-meta__col--list dd{ font-family: var(--display); font-size: 13px; }
.micro{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gray);
  display:inline-block;
}
@media (max-width: 820px){
  .ab-meta{ grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   Big marquee
   ========================================================= */
.mq{
  padding: 1.5rem 0;
  border-top: 1px solid rgba(10,10,10,.16);
  border-bottom: 1px solid rgba(10,10,10,.16);
  overflow:hidden; white-space:nowrap;
}
.mq__track{
  display:inline-flex; gap: 3rem;
  animation: ticker 28s linear infinite;
  will-change: transform;
}
.mq h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(60px, 12vw, 200px);
  letter-spacing: -.04em; line-height:1;
  display:inline-block;
}
.mq h3.outline{
  -webkit-text-stroke: 1px var(--black);
  color: transparent;
}

/* =========================================================
   SERVICES
   ========================================================= */
.sv{ padding: 7rem var(--g) 5rem; }
.sv-head{
  display:flex; justify-content:space-between;
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 1.4rem;
  margin-bottom: 4rem;
}

.sv-list{ border-top: 1px solid rgba(10,10,10,.16); }
.sv-row{
  position:relative;
  display:grid;
  grid-template-columns: 4rem 1.4fr 1fr 1.6fr 3rem;
  gap: var(--g);
  align-items: center;
  padding: 2.2rem var(--g);
  border-bottom: 1px solid rgba(10,10,10,.16);
  overflow:hidden; isolation:isolate;
  cursor:none;
  transition: color .35s ease;
}
.sv-row__num{ font-family: var(--mono); font-size: 11px; letter-spacing:.12em; color: var(--gray); }
.sv-row__title{
  font-family: var(--serif); font-weight: 500; line-height:1;
  font-size: clamp(36px, 4.6vw, 78px);
  letter-spacing: -.02em;
}
.sv-row__title .ln{ transition: transform 1s var(--easeOut); }
.sv-row:hover .sv-row__title .ln{ transform: translateX(1rem); }
.sv-row__cat{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  color: var(--gray);
}
.sv-row__desc{
  font-size: .96rem; line-height: 1.6;
  color: rgba(10,10,10,.7);
  max-width: 38ch;
}
.sv-row__arrow{
  display:flex; align-items:center; justify-content:flex-end;
  transition: transform .4s ease;
}
.sv-row__arrow svg{ width: 26px; height: 26px; }
.sv-row__hover{
  position:absolute; inset:0; z-index:-1;
  background-position:center; background-size:cover;
  background-image: var(--img);
  filter: grayscale(.2) contrast(1.05) brightness(.7);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .65s var(--easeStrong);
}
.sv-row:hover{ color: #fff; }
.sv-row:hover .sv-row__hover{ transform: scaleY(1); transform-origin: top; }
.sv-row:hover .sv-row__num,
.sv-row:hover .sv-row__cat,
.sv-row:hover .sv-row__desc{ color: rgba(255,255,255,.8); }
.sv-row:hover .sv-row__arrow{ transform: translate(8px,-6px); }
@media (max-width: 820px){
  .sv-row{ grid-template-columns: 1fr; gap:.6rem; padding: 1.6rem var(--g); }
  .sv-row__arrow{ display:none; }
}

/* =========================================================
   ARTISTS
   ========================================================= */
.ar{ padding: 7rem var(--g) 5rem; position:relative; }
.ar-claim{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 110px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 2rem 0 5rem;
}
.ar-list{ border-top: 1px solid rgba(10,10,10,.16); }
.ar-list li + li{ }

.ar-row{
  position:relative;
  display:grid;
  grid-template-columns: 4rem 1.5fr 1fr 0.6fr;
  gap: var(--g);
  align-items: baseline;
  padding: 1.8rem var(--g);
  border-bottom: 1px solid rgba(10,10,10,.16);
  overflow:hidden;
  transition: padding .5s var(--easeOut), color .3s;
}
.ar-row__num{ font-family: var(--mono); font-size: 11px; color: var(--gray); letter-spacing:.12em; }
.ar-row__name{
  font-family: var(--serif);
  font-weight: 500; line-height:1;
  font-size: clamp(34px, 4.4vw, 72px);
  letter-spacing: -.02em;
}
.ar-row__name .ln{ transition: transform 1s var(--easeOut); }
.ar-row:hover .ar-row__name .ln{ transform: translateX(1.5rem); }
.ar-row__role{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--gray);
}
.ar-row__year{
  font-family: var(--display); font-size: 14px;
  letter-spacing: .04em; color: var(--gray); text-align: right;
}
.ar-row__line{
  position:absolute; left:0; bottom:0; width:100%;
}
.ar-row__line .l{ width:100%; }
.ar-row:hover{ padding-left: calc(var(--g) + 1.4rem); }
@media (max-width: 820px){
  .ar-row{ grid-template-columns: 3rem 1fr 4rem; }
  .ar-row__role{ display:none; }
}

/* hover image follow */
.hover-image{
  position:fixed;
  pointer-events:none;
  width: 22rem; height: 28rem;
  z-index: 90;
  top:0; left:0;
  transform: translate(-50%, -50%) scale(.92);
  opacity:0;
  transition: opacity .35s ease, transform .55s var(--easeOut);
  overflow:hidden;
  clip-path: inset(0 0 0 0);
}
.hover-image.is-show{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.hover-image__inner{
  width:100%; height:100%;
  background-size:cover; background-position:center;
  background-color:#222;
  filter: contrast(1.05) saturate(.92);
  transform: scale(1.08);
  transition: transform 1s var(--easeOut);
}
.hover-image.is-show .hover-image__inner{ transform: scale(1); }
@media (max-width:820px){ .hover-image{ display:none; } }

/* =========================================================
   NEWS
   ========================================================= */
.nw{ padding: 7rem var(--g) 5rem; }
.nw-list{ border-top: 1px solid rgba(10,10,10,.16); }
.nw-row{
  position:relative;
  display:grid;
  grid-template-columns: 8rem 6rem 1fr 2.2rem;
  gap: var(--g);
  align-items: baseline;
  padding: 1.6rem var(--g);
  border-bottom: 1px solid rgba(10,10,10,.16);
  cursor:none;
  overflow:hidden;
  transition: padding .4s var(--easeOut);
}
.nw-row:hover{ padding-left: calc(var(--g) + 1.4rem); }
.nw-row__date{ font-family: var(--mono); font-size: 13px; letter-spacing:.04em; }
.nw-row__cat{
  font-family: var(--mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase;
  color: #fff; background: var(--accent); padding: 4px 8px; align-self: center; justify-self:start;
}
.nw-row__title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.4;
}
.nw-row__title .ln{ transition: transform 1s var(--easeOut); }
.nw-row:hover .nw-row__title .ln{ transform: translateX(.7rem); }
.nw-row__arrow{ font-size: 1.2rem; justify-self:end; transition: transform .35s ease; }
.nw-row:hover .nw-row__arrow{ transform: translateX(10px); }
@media (max-width: 820px){
  .nw-row{ grid-template-columns: 1fr; gap: .4rem; }
  .nw-row__arrow{ display:none; }
}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.ct{ padding: 7rem var(--g) 0; }
.ct-lead{ display:flex; flex-direction:column; gap: 1.6rem; }
.ct-lead .micro{
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 1.4rem; display:block; width:100%;
}
.ct-lead .big-line{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(48px, 6vw, 110px);
  line-height: 1.1; letter-spacing: -.03em;
  margin-top: 1rem;
}

.cta-circle{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width: clamp(220px, 28vw, 380px);
  height: clamp(220px, 28vw, 380px);
  margin: 5rem auto;
  border-radius:50%;
  isolation:isolate;
  cursor:none;
}
.cta-circle__bg{
  position:absolute; inset:0; border-radius:50%;
  background: var(--black);
  transform: scale(.94);
  transition: transform .55s var(--easeStrong), background .35s ease;
}
.cta-circle:hover .cta-circle__bg{ transform: scale(1); background: var(--accent); }
.cta-circle__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width: 5rem; height: 5rem;
  border:1px solid #fff; border-radius:50%;
  color:#fff;
}
.cta-circle__inner svg{ width: 1.6rem; height: 1.6rem; transition: transform .45s var(--easeOut); }
.cta-circle:hover .cta-circle__inner svg{ transform: translateX(.4rem) rotate(-45deg); }
.cta-circle__label{
  position:absolute; inset:0; z-index:2;
  animation: spin-slow 18s linear infinite;
}
.cta-circle__label svg{ width:100%; height:100%; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }

.ct-grid{
  margin-top: 4rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 3.5rem;
}
.ct-grid p{ font-size: 13px; line-height: 1.7; color: rgba(10,10,10,.65); }
.ct-grid .micro{ display:block; margin-bottom: .6rem; }
.link-line{
  position:relative; display:inline-block;
  padding-bottom: 4px;
}
.link-line .l{ position:absolute; left:0; bottom:0; width:100%; }
.socials{ display:flex; flex-direction:column; gap: .4rem; font-size: 13px; }
@media (max-width:820px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
}

/* footer */
.ft{ margin-top: 6rem; }
.ft-mega{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(120px, 26vw, 460px);
  line-height: .85;
  letter-spacing: -.04em;
  text-align:center;
  -webkit-text-stroke: 1.2px var(--black);
  color: transparent;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  overflow:hidden;
}
.ft-mega .ln_{ display:block; }
.ft-mega .ln{ transition: transform 1.4s var(--easeStrong); }
.ft-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.4rem var(--g);
  border-top: 1px solid rgba(10,10,10,.16);
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.1em; text-transform: uppercase;
  color: var(--gray);
  flex-wrap: wrap; gap: .8rem;
}
@media (max-width: 820px){
  .sv, .ar, .nw, .ct, .ab{ padding-left: 1rem; padding-right: 1rem; }
  .ft-bottom{ flex-direction: column; align-items:flex-start; }
}

/* =========================================================
   Obys-style hero lock: only mode 0 (vertical column),
   wheel-driven, sections below are not reachable until
   user clicks a tile or menu link.
   ========================================================= */

/* Hide other hero modes & the mode switcher */
#ho-wo-1, #ho-wo-2, #ho-wo-mo{ display:none !important; }

/* Lock state */
body.is-hero-locked{
  overflow:hidden;
  height:100svh;
}
/* Hide everything below hero while locked (so it's truly invisible) */
body.is-hero-locked main > section:not(.hero){
  visibility:hidden;
  pointer-events:none;
}

/* Tiles get cursor + smooth interactivity */
#ho-wo-0 .r{
  cursor:none;
  transition: transform .8s var(--easeOut), filter .5s ease;
}
#ho-wo-0 .r:hover{
  transform: scale(1.04);
  filter: brightness(1.1) contrast(1.05);
}

/* Visual hint that hero is locked: subtle scroll indicator */
.scroll-hint{
  position:fixed;
  left:50%; bottom: 1.4rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  z-index: 8000;
  pointer-events:none;
  display:flex; align-items:center; gap:.6rem;
  mix-blend-mode: difference; color: #fff;
  opacity: 0;
  transition: opacity .6s ease .3s;
}
.is-ready .scroll-hint{ opacity:.85; }
body:not(.is-hero-locked) .scroll-hint{ opacity:0 !important; transition: opacity .25s ease; }
.scroll-hint__line{
  display:inline-block;
  width: 28px; height:1px;
  background: currentColor;
  position:relative; overflow:hidden;
}
.scroll-hint__line::after{
  content:""; position:absolute; inset:0;
  background: var(--white);
  transform: translateX(-101%);
  animation: hintLine 1.8s linear infinite;
}
@keyframes hintLine{
  0%{ transform: translateX(-101%); }
  60%, 100%{ transform: translateX(101%); }
}

/* =========================================================
   Subpage layout (about / services / artists / news)
   ========================================================= */
main.subpage{
  padding-top: 6rem;     /* below the fixed header */
}

/* Page hero (per-section title block) */
.page-hero{
  position:relative;
  padding: 8rem var(--g) 6rem;
  border-bottom: 1px solid rgba(10,10,10,.16);
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.page-hero__num{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--gray);
}
.page-hero__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 11vw, 200px);
  line-height: .95;
  letter-spacing: -.04em;
  margin: 0;
}
.page-hero__title .line--en{
  font-family: var(--display);
  font-style: italic;
  color: var(--gray);
  font-size: .55em;
  letter-spacing: -.02em;
  margin-top: .4rem;
}
.page-hero__title .line--en i{
  font-style: italic; color: var(--accent);
}
.page-hero__lead{
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(10,10,10,.7);
}

/* Highlight active menu link in header */
#header-menu a.is-active > span > .l > div{
  transform: translateX(0);
  transform-origin: left;
}
#header-menu a.is-active{ font-weight: 500; }

/* Subpage footer */
.subpage-ft{
  margin-top: 6rem;
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 2rem;
}
.subpage-ft__nav{
  display:flex; justify-content: space-between; align-items: flex-end;
  padding: 2rem var(--g) 4rem;
  border-bottom: 1px solid rgba(10,10,10,.16);
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: -.02em;
  line-height: 1.1;
  gap: 2rem;
  flex-wrap: wrap;
}
.subpage-ft__nav a{
  display: inline-block;
  position: relative;
}
.subpage-ft__nav .micro{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray);
  margin-bottom: .6rem;
  text-transform: uppercase;
}
.subpage-ft .ft-bottom{
  display:flex;
  justify-content: space-between;
  padding: 1.4rem var(--g);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  flex-wrap: wrap; gap: .8rem;
}

/* On subpages we don't want hero-locked behavior to bleed in */
body[data-page]:not([data-page="home"]) .scroll-hint{ display: none; }

@media (max-width:820px){
  .page-hero{ padding: 6rem 1rem 3rem; }
  .subpage-ft__nav{ padding: 2rem 1rem 3rem; }
}

/* =========================================================
   Hide header menu — navigation is provided by hero tiles
   and subpage Next/Back links. Keeps logo area clean.
   ========================================================= */
#header-menu{ display:none !important; }

/* Ensure header-right cluster sticks to the RIGHT now that title is hidden */
#header{ justify-content: flex-end !important; }
#header-right{ flex: 0 0 auto; }
#header-right > *{ width: auto !important; }
#header-time, #header-contact_{ text-align: right; }