/* ────────────────────────────────────────────
   C·Tr · Page Swipe (overlay transition)
   全画面オーバーレイ + 巨大ページ名が横切る遷移
   Pure CSS + JS、外部依存ゼロ
   ──────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:where(html,body){line-break:strict;word-break:normal;overflow-wrap:break-word}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

:root{
  --bg:#f4f3ee;
  --ink:#0a0a0a;
  --muted:#6a6a6a;
  --line:#d8d6cc;
  --paper:#fff;
  --hi:#ff2d55;
  --alt:#0066ff;
  --font:'DM Sans','Noto Sans JP',sans-serif;
  --mono:'JetBrains Mono',monospace;

  /* ── Component variables ── */
  --sw-dur:620ms;
  --sw-ease:cubic-bezier(.76,0,.24,1);
  --sw-overlay-bg:#0a0a0a;
  --sw-label:#fff;
  --sw-stage-h:min(78vh,640px);
}

html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.65;min-height:100vh}
a{color:inherit;text-decoration:none}

/* ─── HEADER ─── */
header.site{
  position:sticky;top:0;z-index:50;background:var(--bg);
  padding:1rem clamp(1.2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--ink);
}
.back{font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;display:inline-flex;align-items:center;gap:.6em}
.back .arrow{transition:transform .25s}
.back:hover .arrow{transform:translateX(-.3em)}
.cell-marker{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;color:var(--hi)}

/* ────────────────────────────────────────────
   COMPONENT: .swipe
   ──────────────────────────────────────────── */
.swipe{
  position:relative;
  max-width:1200px;margin:clamp(1.5rem,4vw,3rem) auto 0;
  padding:0 clamp(1.2rem,4vw,3rem);
}

/* nav */
.sw-nav{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  margin-bottom:1.2rem;
}
.sw-brand{font-weight:700;font-size:1.05rem;letter-spacing:.22em}
.sw-nav-links{display:flex;flex-wrap:wrap;gap:.5rem}
.sw-link{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.15em;
  padding:.5em 1em;background:var(--paper);border:1px solid var(--ink);color:var(--ink);cursor:pointer;
  transition:background .2s,color .2s;
}
.sw-link:hover{background:var(--bg)}
.sw-link.is-current{background:var(--ink);color:#fff}
.sw-hint{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--muted);margin-bottom:.8rem}

/* stage + pages */
.sw-stage{
  position:relative;height:var(--sw-stage-h);
  border:1px solid var(--ink);overflow:hidden;
  touch-action:pan-y;        /* 縦スクロールは許可、横ジェスチャはスワイプ用に確保 */
}
.sw-page{
  position:absolute;inset:0;
  display:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem;
  padding:clamp(2rem,6vw,5rem);
}
.sw-page.is-active{display:flex}
.sw-page--a{background:var(--bg);color:var(--ink)}
.sw-page--b{background:var(--ink);color:#fff}
.sw-page--c{background:var(--hi);color:#fff}
.sw-page--d{background:var(--alt);color:#fff}
.sw-no{font-family:var(--mono);font-size:.82rem;letter-spacing:.28em;opacity:.7}
.sw-page h1{font-weight:700;font-size:clamp(2.4rem,8.5vw,5.6rem);line-height:.98;letter-spacing:-.02em}
.sw-page .sw-h{font-weight:700;font-size:clamp(2rem,6vw,3.6rem);line-height:1;letter-spacing:-.01em}
.sw-page p{font-size:clamp(.95rem,1.4vw,1.1rem);max-width:34em;opacity:.9;line-height:1.8}
.sw-meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;opacity:.65 !important;margin-top:.4rem}

/* WORK: project index */
.sw-list{list-style:none;width:min(100%,640px);margin-top:.4rem}
.sw-list li{
  display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-top:1px solid currentColor;
}
.sw-list li:last-child{border-bottom:1px solid currentColor}
.sw-li-name{font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700;letter-spacing:.01em}
.sw-li-role{font-size:.84rem;opacity:.8}
.sw-li-year{font-family:var(--mono);font-size:.8rem;opacity:.7}

/* STUDIO: service tags */
.sw-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.sw-tags li{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;
  padding:.4em .9em;border:1px solid currentColor;
}

/* CONTACT: cta */
.sw-cta{
  display:inline-block;margin-top:.4rem;
  font-weight:700;font-size:clamp(1.3rem,3.5vw,2.2rem);letter-spacing:.01em;
  border-bottom:2px solid currentColor;padding-bottom:.1em;
}

/* overlay */
.sw-overlay{
  position:absolute;inset:0;z-index:20;
  background:var(--sw-overlay-bg);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transform:translateX(100%);              /* 既定は右に退避 */
  transition:transform var(--sw-dur) var(--sw-ease);
  pointer-events:none;
}
.sw-overlay.is-cover{transform:translateX(0)}
.sw-overlay.is-exit{transform:translateX(-100%)}
.sw-overlay.no-tr{transition:none}

.sw-label{
  font-weight:700;font-size:clamp(3rem,14vw,10rem);line-height:1;letter-spacing:-.03em;
  color:var(--sw-label);white-space:nowrap;
  transform:translateX(28%);               /* パネルより速く流す視差 */
  transition:transform var(--sw-dur) var(--sw-ease);
}
.sw-overlay.is-cover .sw-label{transform:translateX(0)}
.sw-overlay.is-exit .sw-label{transform:translateX(-28%)}

/* 逆方向（前へ戻る）：オーバーレイは左から入り右へ抜ける（鏡像） */
.sw-overlay.from-left{transform:translateX(-100%)}
.sw-overlay.from-left.is-cover{transform:translateX(0)}
.sw-overlay.from-left.is-exit{transform:translateX(100%)}
.sw-overlay.from-left .sw-label{transform:translateX(-28%)}
.sw-overlay.from-left.is-cover .sw-label{transform:translateX(0)}
.sw-overlay.from-left.is-exit .sw-label{transform:translateX(28%)}
/* END COMPONENT */


/* ─── NOTES ─── */
main section{max-width:1100px;margin:0 auto;padding:clamp(3rem,5vw,4.5rem) clamp(1.5rem,4vw,3rem)}
.shou{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--ink);margin-bottom:2.5rem}
.shou h2{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;letter-spacing:.04em}
.shou .no{font-family:var(--mono);font-size:.78rem;letter-spacing:.25em;color:var(--muted)}
.frame{
  font-size:.92rem;line-height:1.9;color:var(--muted);max-width:46em;
  margin:-1rem 0 2rem;padding:1rem 1.2rem;border-left:3px solid var(--hi);background:var(--paper);
}
.notes-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:3rem}
@media(min-width:780px){.notes-grid{grid-template-columns:repeat(3,1fr)}}
.note{position:relative;background:var(--paper);border:1px solid var(--ink);padding:1.5rem 1.4rem 1.4rem}
.note-no{position:absolute;top:1rem;right:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--muted)}
.note h3{font-size:1.02rem;font-weight:700;margin-bottom:.7rem;letter-spacing:.02em}
.note p{font-size:.86rem;color:var(--muted);line-height:1.8}
.note code,.var span code{font-family:var(--mono);font-size:.85em;background:var(--bg);padding:.1em .35em;border:1px solid var(--line)}
.sub-h{font-size:1rem;font-weight:700;letter-spacing:.04em;margin:2rem 0 1rem;padding-bottom:.7rem;border-bottom:1px dashed var(--ink)}
.vars{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--ink);background:var(--paper)}
.var{display:grid;grid-template-columns:minmax(9rem,auto) 1fr auto;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);align-items:center}
.var:last-child{border-bottom:none}
.var code{font-family:var(--mono);font-size:.82rem;color:var(--hi);font-weight:500}
.var span{font-size:.85rem;color:var(--muted);line-height:1.5}
.var em{font-family:var(--mono);font-size:.78rem;font-style:normal;color:var(--ink);background:var(--bg);padding:.15em .55em;border:1px solid var(--line);white-space:nowrap}
@media(max-width:680px){.var{grid-template-columns:1fr;gap:.3rem;padding:.9rem 1rem}.var em{justify-self:start}}

/* ─── FOOTER ─── */
footer{
  padding:2rem clamp(1.2rem,4vw,3rem) 1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--muted);
  border-top:1px solid var(--ink);
}
footer a{color:var(--ink)}

/* Reduced motion: スワイプ無しで即切替（JS が overlay をスキップ） */
@media (prefers-reduced-motion: reduce){
  .sw-overlay,.sw-label{transition:none}
}