/* ============================================================
   ARITSU — house system
   Two branches: Conceptual Haven (branding) · Tsudio (photography)
   ============================================================ */

:root {
  /* paper */
  --paper:      #FBFAF8;
  --paper-rule: #DFDEDC;
  --paper-ink:  #111114;
  --paper-mid:  #68696B;

  /* the five-step near-black, stepped evenly in perceptual lightness */
  --ink-50:  #0D0D10;   /* ground     */
  --ink-100: #161619;   /* surface    */
  --ink-200: #1F1F22;   /* hover      */
  --ink-300: #2B2B2E;   /* rule       */
  --ink-400: #424245;   /* raised     */

  --txt-hi:  #F5F5F5;
  --txt-mid: #ABABAB;
  --txt-lo:  #7A7A7A;

  --accent:  #EC9D53;

  --grotesk: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Bodoni Moda", Didot, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --gut: clamp(20px, 3.6vw, 52px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }

h1, h2, h3, h4 { margin: 0; font-size: inherit; font-weight: inherit; }

html { background: var(--ink-50); }        /* set before any paint, kills the white flash */
html.is-paper { background: var(--paper); }

body {
  margin: 0;
  font-family: var(--grotesk);
  background: var(--ink-50);
  color: var(--txt-hi);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

::selection { background: var(--accent); color: var(--ink-50); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- type helpers ---------- */
.mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.serif { font-family: var(--serif); font-weight: 400; }

.display {
  font-variation-settings: "wdth" 100, "wght" 640;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: balance;
}

.body-copy { font-size: 16px; line-height: 1.68; color: var(--txt-mid); text-wrap: pretty; }

/* ---------- film grain, whisper level ---------- */
.grain::after {
  content: "";
  position: absolute; inset: 0; z-index: 8;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 168px;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ---------- shared chrome on the dark sites ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gut);
  background: color-mix(in oklab, var(--ink-50) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-200);
}
.site-head .brand {
  font-size: 15px;
  font-variation-settings: "wdth" 118, "wght" 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.site-nav { display: flex; gap: clamp(16px, 2.4vw, 34px); align-items: center; }
.site-nav a { color: var(--txt-mid); transition: color 0.3s var(--ease-out); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--txt-hi); }
.site-nav .wormhole { color: var(--txt-lo); }

.site-foot a, .strip a { color: inherit; transition: color 0.3s var(--ease-out); }
.site-foot a:hover, .strip a:hover { color: var(--accent); }

.site-foot {
  border-top: 1px solid var(--ink-200);
  padding: 34px var(--gut);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  color: var(--txt-lo);
}

/* ---------- image frames ---------- */
.shot {
  position: relative;
  background: var(--ink-100);
  box-shadow: inset 0 0 0 1px var(--ink-300);
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* clip-path reveal on entry, motion strictly additive */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: scale(1.05);
    transition: opacity 0.8s var(--ease-out), clip-path 0.9s var(--ease-io), transform 1.2s var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .reveal.in { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* ---------- marquee, one per site, slow ---------- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--ink-200); padding: 30px 0; }
.marquee-track { display: inline-flex; will-change: transform; animation: marquee 56s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-size: clamp(44px, 6.4vw, 92px);
  font-variation-settings: "wdth" 100, "wght" 560;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #26262B;
  padding-right: 0.35em;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- the one accent-bearing link ---------- */
.rule-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink-300);
  transition: border-color 0.35s var(--ease-out);
}
.rule-link:hover { border-color: var(--accent); }

/* ---------- cross-document view transition ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}