:root{
  --deep:#3d2226;
  --deep-soft:#532e34;
  --deep-line: rgba(255,255,255,0.22);
  --deep-text:#f7f0ee;
  --deep-text-dim:#c9a8a6;
  --deep-accent:#d9a5a0;

  --ivory:#f7f3ee;
  --ecru:#efe6db;
  --paper-line: rgba(80,50,45,0.16);
  --ink:#2b2422;
  --ink-dim:#8a726d;

  --accent:#8a4a50;
  --accent-deep:#4a2a30;

  --font-display: "Shippori Mincho", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  font-family: var(--font-body);
  background: var(--deep);
}

.book{
  color: var(--ink);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}

.page{
  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.4rem, 8vw, 6.5rem) clamp(1.5rem, 6vw, 5rem);
  overflow: hidden;
}
.page.cover,
.page.deep.closing,
.page[data-idx="12"]{ min-height: 100vh; }

.page.deep{ background: var(--deep); color: var(--deep-text); }
.page.ivory{ background: var(--ivory); color: var(--ink); }
.page.ecru{ background: var(--ecru); color: var(--ink); }

.page-inner{
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
}
.page-inner.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: center;
}
.page-inner.split.reverse{ grid-template-columns: 1fr 1fr; }
.page-inner.split.reverse .split-media{ order: 2; }
.page-inner.split.reverse .split-text{ order: 1; }
@media (max-width: 860px){
  .page-inner.split,
  .page-inner.split.reverse{ grid-template-columns: 1fr; }
  .page-inner.split.reverse .split-media{ order: 0; }
  .page-inner.split.reverse .split-text{ order: 0; }
}

.eyebrow{
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s ease, transform .9s ease;
}
.page.deep .eyebrow{ color: var(--deep-accent); }

.headline{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-wrap: balance;
  margin: 0 0 2.1rem;
  max-width: 15ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease .08s, transform 1s ease .08s;
}

.rule{
  width: 3rem;
  height: 1px;
  background: var(--accent);
  margin: 0 0 2.3rem;
  opacity: 0;
  transition: opacity 1s ease .2s, width 1s ease .2s;
}
.page.deep .rule{ background: var(--deep-accent); }

.body-text{
  font-size: clamp(1.32rem, 1.6vw, 1.5rem);
  line-height: 1.95;
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease .18s, transform 1s ease .18s;
}
.page.deep .body-text{ color: var(--deep-text); font-weight: 400; }
.page.ivory .body-text,
.page.ecru .body-text{ color: var(--ink); }

.body-text p{ margin:0; }
.body-text strong{ color: inherit; font-weight: 700; }

.page.revealed .eyebrow,
.page.revealed .headline,
.page.revealed .rule,
.page.revealed .body-text{
  opacity: 1;
  transform: none;
}
.page.revealed .rule{ width: 4.6rem; }

.lines{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  margin: 0.4rem 0;
}
.lines span{ display:block; }

.traits{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-width: 34rem;
}
.traits li{
  position: relative;
  padding: 1.15rem 0 1.15rem 2.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  border-bottom: 1px solid var(--paper-line);
}
.traits li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1.2rem;
  font-family: var(--font-body);
  font-weight:800;
  font-size:1rem;
  color:var(--accent);
}
.page.deep .traits li{ border-bottom-color: var(--deep-line); }
.page.deep .traits li::before{ color:var(--deep-accent); }

.meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.6rem;
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--paper-line);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease .3s, transform 1s ease .3s;
}
.page.deep .meta-row{ border-top-color: var(--deep-line); }
.page.revealed .meta-row{ opacity:1; transform:none; }
.meta-item{ display:flex; flex-direction:column; gap:0.4rem; }
.meta-num{ font-family: var(--font-body); font-weight: 800; font-size: 1.7rem; letter-spacing:0.01em; color: var(--accent); }
.page.deep .meta-num{ color: var(--deep-accent); }
.meta-label{ font-size: 0.76rem; letter-spacing: 0.08em; color: var(--ink-dim); }
.page.deep .meta-label{ color: var(--deep-text-dim); }

.index{
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  right: clamp(1.5rem, 6vw, 5rem);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.page.deep .index{ color: var(--deep-text-dim); }

/* Cover */
.cover{
  position: relative;
  background:
    linear-gradient(115deg, rgba(61,34,38,0.94) 0%, rgba(61,34,38,0.86) 38%, rgba(90,48,50,0.55) 100%),
    radial-gradient(ellipse at 18% 8%, rgba(233,178,140,0.28), transparent 50%),
    url("images/interior.jpg") center 32% / cover no-repeat,
    var(--deep);
  text-align: left;
}
.cover .cover-inner{ max-width: 68rem; margin: 0 auto; width:100%; }
.cover .kicker{
  font-size: 0.78rem;
  letter-spacing: 0.38em;
  color: var(--deep-accent);
  text-transform: uppercase;
  margin: 0 0 2.2rem;
}
.cover h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6.6vw, 4.6rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
  max-width: 13ch;
  color: var(--deep-text);
}
.cover .role-line{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--deep-text);
  letter-spacing: 0.04em;
  margin: 0 0 2rem;
}
.cover .sub{
  font-size: clamp(0.96rem, 1.3vw, 1.06rem);
  color: var(--deep-text-dim);
  line-height: 2;
  max-width: 30rem;
  margin: 0 0 2.6rem;
}
.fact-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 1.1rem;
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--deep-text);
  margin: 0 0 3rem;
  padding: 1.3rem 1.6rem;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--deep-line);
  border-radius: 3px;
  max-width: 46rem;
}
.fact-line .sep{ color: var(--deep-accent); font-weight:400; }
.cover-foot{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 44rem;
  font-size: 0.8rem;
  color: var(--deep-text-dim);
  letter-spacing: 0.03em;
}
.cover-foot b{ color: var(--deep-accent); font-weight: 600; }

/* Photo plates */
.media{
  border: 1px solid var(--paper-line);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease .3s, transform 1s ease .3s;
}
.page.deep .media{ border-color: var(--deep-line); }
.page.revealed .media{ opacity: 1; transform: none; }
.media img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.media.portrait{ aspect-ratio: 4 / 5; }
.media.wide{ aspect-ratio: 16 / 11; }

.split-media figcaption{
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}
.page.deep .split-media figcaption{ color: var(--deep-text-dim); }

/* Full-bleed photo moment */
.page.full-bleed{ padding-left:0; padding-right:0; }
.full-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease .2s, transform 1s ease .2s;
}
.page.revealed .full-media{ opacity:1; transform:none; }
.full-media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.full-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(43,36,34,0.72) 0%, rgba(43,36,34,0.05) 45%);
}
.full-media .full-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(1.6rem,4vw,3rem) clamp(1.5rem,6vw,5rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem,2.2vw,1.6rem);
  color: #fff;
  letter-spacing: 0.03em;
  max-width: 40rem;
}
.full-bleed .page-inner{ padding: clamp(2.6rem,5vw,4.2rem) clamp(1.5rem,6vw,5rem) 0; }

/* Closing / signature */
.closing .headline{ max-width: 16ch; }
.signature-row{
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s ease .4s, transform 1s ease .4s;
}
.page.revealed .signature-row{ opacity:1; transform:none; }
.signature-photo{
  width: 6rem;
  height: 8.4rem;
  object-fit: cover;
  border: 1px solid var(--deep-line);
  border-radius: 4px;
  flex-shrink: 0;
}
.signature-text{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
}
.signature-text .name{ font-size: 1.25rem; letter-spacing: 0.06em; }
.signature-text .role{ font-size: 0.8rem; color: var(--deep-text-dim); letter-spacing: 0.08em; }

/* Apply section */
.apply-form{
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 30rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease .26s, transform 1s ease .26s;
}
.page.revealed .apply-form{ opacity:1; transform:none; }
.apply-form label{ display:flex; flex-direction:column; gap:0.5rem; font-size:0.83rem; color: var(--ink-dim); letter-spacing:0.02em; }
.apply-form label em{ font-style: normal; color: var(--accent); margin-left: 0.5rem; font-size: 0.72rem; }
.apply-form input,
.apply-form textarea{
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  padding: 0.75rem 0.9rem;
  resize: vertical;
}
.apply-form input:focus,
.apply-form textarea:focus{
  outline: none;
  border-color: var(--accent);
}
.apply-form button{
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--accent-deep);
  border: none;
  border-radius: 3px;
  padding: 0.95rem 2.6rem;
  cursor: pointer;
  transition: background .25s ease;
}
.apply-form button:hover{ background: var(--deep); }

.alt-contact{
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: var(--ink-dim);
}
.ig-btn-row{ display:flex; flex-wrap:wrap; gap:0.8rem; }
.ig-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(45deg,#f9a04a,#e94e8a 45%,#8a3ab9 85%);
  padding: 0.75rem 1.4rem;
  border-radius: 100vw;
  width: max-content;
}
.ig-btn:hover{ filter: brightness(1.05); }
.ig-btn .ig-icon{ font-size: 1.05rem; line-height:1; }

.colophon{
  padding: 3.2rem clamp(1.5rem, 6vw, 5rem) 3.8rem;
  background: var(--deep);
  color: var(--deep-text-dim);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  border-top: 1px solid var(--deep-line);
}

/* Issue list (card grid) */
.issue-list{
  list-style:none;
  margin:0.8rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:0.7rem;
  max-width:38rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease .22s, transform 1s ease .22s;
}
.page.revealed .issue-list{ opacity:1; transform:none; }
.issue-list li{
  position:relative;
  padding:0.9rem 1rem 0.9rem 1.7rem;
  font-size:0.94rem;
  line-height:1.7;
  background: rgba(138,74,80,0.05);
  border-left: 2px solid var(--accent);
}
.issue-list li::before{ content:"—"; position:absolute; left:0.65rem; color:var(--accent); }
.page.deep .issue-list li{ background: rgba(217,165,160,0.06); }
.page.deep .issue-list li::before{ color:var(--deep-accent); }

/* Pillar cards (4 core duties, at-a-glance) */
.pillar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1px;
  margin: 1.6rem 0 2.2rem;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
  max-width: 42rem;
}
.pillar-card{
  background: var(--ivory);
  padding: 1.5rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.page.ecru .pillar-card{ background: var(--ecru); }
.pillar-card .p-num{ font-family:var(--font-body); font-weight:800; font-size:1.1rem; color:var(--accent); }
.pillar-card .p-title{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.pillar-card .p-note{ font-size:0.82rem; color:var(--ink-dim); line-height:1.6; }

/* Duty checklist (card grid) */
.duty-list{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:0.7rem;
  max-width:42rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease .22s, transform 1s ease .22s;
}
.page.revealed .duty-list{ opacity:1; transform:none; }
.duty-list li{
  position:relative;
  padding:0.9rem 1.1rem 0.9rem 1.7rem;
  font-size:0.98rem;
  line-height:1.65;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
}
.duty-list li::before{ content:"・"; position:absolute; left:0.6rem; color:var(--accent); font-weight:700; }

/* Callout box */
.callout{
  margin-top:1.8rem;
  padding:1.2rem 1.6rem;
  border-left:2px solid var(--accent);
  background:rgba(138,74,80,0.06);
  font-size:1.02rem;
  font-weight:500;
  line-height:1.85;
  max-width:36rem;
}
.page.deep .callout{ background:rgba(217,165,160,0.08); border-left-color:var(--deep-accent); }

/* Timeline */
.timeline{
  display:flex;
  flex-direction:column;
  gap:1.7rem;
  max-width:40rem;
  margin-top:0.6rem;
}
.timeline-step{
  display:flex;
  gap:1.5rem;
  border-left:1px solid var(--paper-line);
  padding-left:1.5rem;
}
.page.deep .timeline-step{ border-left-color:var(--deep-line); }
.timeline-step .t-label{
  flex-shrink:0;
  width:6.6rem;
  font-family:var(--font-display);
  font-size:0.98rem;
  color:var(--accent);
}
.page.deep .timeline-step .t-label{ color:var(--deep-accent); }
.timeline-step ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.5rem; font-size:0.88rem; }

/* Store grid */
.store-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));
  gap:1px;
  max-width:44rem;
  margin-top:1rem;
  background: var(--paper-line);
  border: 1px solid var(--paper-line);
}
.store-card{
  background: var(--ivory);
  padding:1.1rem 1.3rem;
}
.page.ecru .store-card{ background: var(--ecru); }
.store-card .s-name{ font-family:var(--font-display); font-size:1rem; display:block; margin-bottom:0.35rem; }
.store-card .s-note{ font-size:0.76rem; color:var(--ink-dim); }

/* Condition definition table */
.cond-table{ display:flex; flex-direction:column; max-width:40rem; margin:0.6rem 0 0; border-top:1px solid var(--paper-line); }
.page.deep .cond-table{ border-top-color:var(--deep-line); }
.cond-row{ display:flex; gap:2rem; padding:1.05rem 0; border-bottom:1px solid var(--paper-line); }
.page.deep .cond-row{ border-bottom-color:var(--deep-line); }
.cond-row dt{ flex-shrink:0; width:7.6rem; font-size:0.78rem; letter-spacing:0.04em; color:var(--ink-dim); }
.page.deep .cond-row dt{ color:var(--deep-text-dim); }
.cond-row dd{ margin:0; font-size:0.9rem; line-height:1.9; }

/* Store growth dots */
.growth-dots{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.55rem;
  margin: 1.6rem 0 0.4rem;
}
.growth-dots .dot{
  width: 1.4rem; height:1.4rem;
  border-radius:50%;
  border:1.5px solid var(--accent);
}
.growth-dots .dot.filled{ background:var(--accent); }
.growth-dots .arrow{ margin:0 0.6rem; color:var(--ink-dim); font-size:1.1rem; }
.growth-dots .g-label{ margin-left:0.8rem; font-size:0.86rem; color:var(--ink-dim); letter-spacing:0.02em; }

/* Career chips */
.career-chips{ display:flex; flex-wrap:wrap; gap:0.6rem; max-width:44rem; margin-top:1rem; }
.chip{ font-size:0.9rem; font-weight:600; padding:0.6rem 1.2rem; border:1px solid var(--accent); color:var(--accent); border-radius:2px; }

/* Big stat numbers (incentive) */
.stat-row{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  margin: 2.8rem 0 3rem;
  background: var(--deep-line);
  border: 1px solid var(--deep-line);
}
.stat-item{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  background: var(--deep);
  padding: 2.4rem 2rem;
}
.stat-item.hero{
  grid-column: 1 / -1;
  background: var(--deep-soft);
  padding: 2.8rem 2.2rem;
}
.stat-num{ font-family:var(--font-body); font-weight:800; font-size:clamp(3rem,7vw,4.6rem); color:var(--deep-accent); line-height:1.05; letter-spacing:0.01em; }
.stat-item.hero .stat-num{ font-size:clamp(3.8rem,9vw,6.2rem); color:#fff; }
.stat-label{ font-size:0.92rem; font-weight:600; letter-spacing:0.03em; line-height:1.6; color:var(--deep-text-dim); }
.stat-item.hero .stat-label{ font-size:1.06rem; color:var(--deep-text); }
@media (max-width: 640px){
  .stat-row{ grid-template-columns:1fr; }
}

/* Dual CTA (apply section) */
.cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin: 2.2rem 0 0.4rem; max-width:44rem; }
.cta-card{ flex:1 1 15rem; border:1px solid var(--paper-line); border-radius:3px; padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.5rem; }
.cta-card .c-label{ font-size:0.74rem; letter-spacing:0.1em; color:var(--ink-dim); }
.cta-card .c-title{ font-family:var(--font-display); font-size:1.08rem; }
.cta-card .c-btn{ margin-top:0.4rem; font-size:0.82rem; font-weight:600; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); width:max-content; }

@media (max-width: 640px){
  .page{ min-height: auto; padding: 4.2rem 1.4rem; }
  .index{ display:none; }
  .timeline-step{ flex-direction:column; gap:0.6rem; }
  .timeline-step .t-label{ width:auto; }
  .cond-row{ flex-direction:column; gap:0.4rem; }
  .cond-row dt{ width:auto; }
  .fact-line{ flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .fact-line .sep{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .eyebrow, .headline, .rule, .body-text, .meta-row, .signature-row, .apply-form, .issue-list, .duty-list, .media{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}