@charset "utf-8";
/* =========================================================
   SCARRED赤 — base : tokens / reset / typography / footer
   ========================================================= */

:root{
  /* palette — 素材から抽出 */
  --c-black:   #0b0605;
  --c-ink:     #160d0c;
  --c-ink-2:   #241815;
  --c-red:     #d21c1a;
  --c-red-dim: #8e1210;
  --c-gold:    #c09a61;
  --c-gold-lt: #dcc296;
  --c-text:    #ece5df;
  --c-muted:   rgba(236,229,223,.60);
  --c-faint:   rgba(236,229,223,.14);

  /* type */
  --f-ja: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-en: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --wrap: 1240px;
  --gut: clamp(1.25rem, 5vw, 6rem);
  --sec-y: clamp(5rem, 13vw, 11rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--c-black);
  color:var(--c-text);
  font-family:var(--f-ja);
  font-weight:400;
  font-size:clamp(.875rem, .78rem + .32vw, 1rem);
  line-height:2.15;
  letter-spacing:.06em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,dl,dd,figure{ margin:0; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--c-red); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  padding:.75rem 1.25rem; background:var(--c-red); color:#fff;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:1px solid var(--c-gold);
  outline-offset:3px;
}

/* ---------- layout helpers ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.section{
  position:relative;
  padding-block:var(--sec-y);
  /* hidden だと内部の position:sticky が効かなくなるため clip を使う */
  overflow:clip;
}

/* ---------- section label ---------- */
.label{
  display:flex;
  align-items:baseline;
  gap:clamp(.75rem,2vw,1.5rem);
  margin-bottom:clamp(2rem,5vw,3.5rem);
}
.label--center{ justify-content:center; }

.label__en{
  font-family:var(--f-en);
  font-weight:300;
  font-size:clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  letter-spacing:.34em;
  line-height:1;
  text-indent:.34em;
  color:var(--c-text);
}
.label__ja{
  position:relative;
  padding-left:clamp(.9rem,2.4vw,1.75rem);
  font-size:clamp(.7rem,.62rem + .3vw,.85rem);
  letter-spacing:.22em;
  color:var(--c-gold);
  white-space:nowrap;
}
.label__ja::before{
  content:"";
  position:absolute; left:0; top:.72em;
  width:clamp(.5rem,1.4vw,1rem); height:1px;
  background:var(--c-gold);
}

/* ---------- prose ---------- */
.prose p{ margin-bottom:1.9em; }
.prose p:last-child{ margin-bottom:0; }

.prose--ja{ line-height:2.3; }

.prose--en{
  font-family:var(--f-en);
  font-weight:300;
  font-size:.82em;
  line-height:2.2;
  letter-spacing:.12em;
  color:var(--c-muted);
}

.pull{
  font-size:clamp(1.05rem, .9rem + .8vw, 1.6rem);
  line-height:1.9;
  letter-spacing:.14em;
  color:var(--c-gold-lt);
  margin-block:2.4em !important;
}
.pull::before{ content:"「"; }
.pull::after{ content:"」"; }

.rule{
  height:1px; border:0;
  background:linear-gradient(90deg,var(--c-gold),transparent);
  margin-block:clamp(3rem,7vw,5rem);
}

/* ---------- button ---------- */
.btn{
  --btn-bg:var(--c-red);
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  min-width:min(20rem,100%);
  padding:1.15em 2.5em;
  background:var(--btn-bg);
  border:1px solid var(--btn-bg);
  border-radius:0;
  color:#fff;
  font-family:var(--f-en);
  font-weight:400;
  font-size:.9rem;
  letter-spacing:.2em;
  cursor:pointer;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn span{ position:relative; z-index:1; font-family:var(--f-ja); }
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--c-black);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:scaleX(1); transform-origin:left; }
.btn:hover,.btn:focus-visible{ color:var(--c-gold-lt); border-color:var(--c-gold); }

.btn--ghost{
  --btn-bg:transparent;
  border-color:var(--c-faint);
  color:var(--c-muted);
  min-width:min(12rem,100%);
}
.btn--ghost::before{ background:rgba(236,229,223,.06); }

/* ---------- reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(2.25rem);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- footer ---------- */
.site-footer{
  position:relative;
  padding:clamp(3.5rem,8vw,6rem) var(--gut) clamp(2.5rem,5vw,3.5rem);
  text-align:center;
  background:var(--c-ink);
  border-top:1px solid var(--c-faint);
}
.site-footer__logo{
  width:clamp(5rem,11vw,7rem);
  margin:0 auto 2.25rem;
}

.site-footer__note{
  font-size:.7rem;
  line-height:2;
  letter-spacing:.14em;
  color:var(--c-muted);
  margin-bottom:1.75rem;
}
.site-footer__copy{
  font-family:var(--f-en);
  font-weight:300;
  font-size:.66rem;
  letter-spacing:.24em;
  color:rgba(236,229,223,.4);
}