/* OFF-SITE 場外 — follows the OFF-SITE design system (tokens below). */
:root{
  --ground:#000000; --ink:#ffffff; --ink-soft:#a8a59e; --rule:#2e2d2a; --accent:#7f8cff; --placeholder:#161616;
  color-scheme:dark;
  --serif:"Times Ten","Times New Roman",Tinos,Times,"Noto Serif TC",serif;
  --space-1:6px; --space-3:16px; --space-4:22px; --space-5:24px; --space-6:28px; --space-7:44px; --space-8:66px;
  --column:480px; --text:620px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:22px;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
.lnk:hover,.logo:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer}

/* header */
.top{max-width:var(--column);margin:0 auto;padding:var(--space-3) var(--space-5) 14px;text-align:center;border-bottom:1px solid var(--rule);position:relative;z-index:20}
.logo{display:inline-block;vertical-align:top}
.logo img{display:block;height:48px;width:auto;filter:invert(1)}
.top.floating{position:fixed;top:0;left:0;right:0;max-width:none;border:0;pointer-events:none}
.top.floating .logo{pointer-events:auto}

/* works list */
.col{max-width:var(--column);margin:0 auto;padding:var(--space-6) var(--space-5) 40px;position:relative;z-index:10}
.works{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:28px minmax(0,1fr) 64px;gap:var(--space-1);align-items:baseline}
.row:hover,.row:focus-visible{color:var(--accent)}
.yr{text-align:right}
.intro{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.intro p{margin:0}
.foot{margin-top:var(--space-8);display:flex;justify-content:space-between;align-items:baseline;padding-bottom:26px;border-bottom:1px solid var(--ink)}
.foot svg{display:inline-block;vertical-align:-1px;margin-left:5px}
.totop{margin:12px 0 0;text-align:center}
.phone-only{display:none}
.peek{position:fixed;z-index:5;pointer-events:none;display:none}
.peek img{display:block;width:100%;height:auto}

/* collage */
.p-collage{overflow:hidden;height:100vh;--ground:#ffffff;--ink:#000000;--ink-soft:#3d3b37;--rule:#d6d2ca;--accent:#2438e8;--placeholder:#ece9e3;color-scheme:light}
.p-collage .logo img{filter:none}
.collage{height:100vh;overflow:hidden}
.track{will-change:transform}
.wall{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:116%;margin-left:-8%}
.tile{display:block}
.p-collage .tile{mix-blend-mode:multiply}
.tile img{display:block;width:100%;height:auto}
.w4{width:33%}.w5{width:47%}.w6{width:53%}
.hoverlabel{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:40;white-space:nowrap;display:none}
@media (hover:hover) and (pointer:fine){.tile{cursor:none}}

/* project */
.p-project{overflow:hidden}
.project{position:relative;height:100vh;min-height:560px}
.top.proj{position:absolute;top:0;left:0;right:0;max-width:none;border:0;padding-top:14px;z-index:30}
.top.proj .logo img{height:32px}
.top.proj h1{margin:6px 0 0;font-weight:400;font-size:16px;line-height:22px}
.ui{transition:opacity .4s}
.p-project.idle .ui{opacity:0}
.p-project.idle:focus-within .ui{opacity:1}
.see{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:96px 0 76px}
.frame{margin:0;display:flex;flex-direction:column;align-items:center;width:min(56vw,960px)}
.frame.tall{width:min(40vw,560px)}
.frame img{display:block;width:100%;height:auto;max-height:68vh;object-fit:contain}
.frame figcaption{padding-top:8px;font-size:11px;line-height:11px;letter-spacing:.02em;text-align:center;min-height:19px}
.nophoto{width:100%;aspect-ratio:3/2;background:var(--placeholder);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ink-soft)}
.half{position:absolute;top:96px;bottom:70px;width:50%;z-index:10}
.half.prev{left:0}.half.next{right:0}
@media (hover:hover) and (pointer:fine){.half{cursor:none}}
.cursorlabel{position:fixed;transform:translate(-50%,-50%);pointer-events:none;z-index:40;display:none}
.read{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:96px 0}
.read[hidden],.see[hidden]{display:none}
.txt{max-width:var(--text);width:100%;padding:0 var(--space-5);display:flex;flex-direction:column;gap:var(--space-6)}
.lead{margin:0;font-size:20px;line-height:26.8px}
.txt dl{margin:0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:0 var(--space-3)}
.txt dd{margin:0}
.bar{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;align-items:baseline;gap:20px;z-index:30}
.toggle{padding:12px 4px}
.toggle:hover{color:var(--accent)}

/* floating foil letter */
.balloon{position:fixed;z-index:50;left:0;top:0;display:block;transform-origin:50% 40%;will-change:transform}
.balloon img{display:block;width:100%;height:100%}

@media (max-width:700px){
  .top{padding:var(--space-3) var(--space-3) 14px}
  .col{padding:var(--space-5) var(--space-3) 64px}
  .peek{display:none !important}
  .phone-only{display:inline}
  /* phone collage: absolute scatter, slots set in site.js (measured from softbaroque.com) */
  .wall.scatter{display:block;position:relative;width:100%;margin:0;padding:0;height:calc(var(--period) * 100vw)}
  .wall.scatter .tile{position:absolute;left:var(--x);top:calc(var(--y) * 100vw);width:var(--w);margin:0;transform:none !important;mix-blend-mode:normal}
  .wall.scatter .tile img{aspect-ratio:var(--ar);height:auto;object-fit:cover}
  .frame,.frame.tall{width:92vw}
  .p-project.idle .ui{opacity:1}
}
@media (hover:none){.p-project.idle .ui{opacity:1}}
@media (prefers-reduced-motion:reduce){.ui{transition:none}}