/* ============================================================
   products.css — 商品紹介 (Products) page-specific styles.
   Built entirely on tokens.css custom properties — no new
   colors, no new font families. Composition: a notebook page,
   12-col asymmetric grid, hemp product panels, the green ink
   line echoing the site signature at panel scale.
   ============================================================ */

/* ---- mobile nav toggle bars ---- */
.nav-toggle-bar{
  position:absolute;
  width:22px; height:1.5px;
  background: currentColor;
  transition: transform var(--dur-1) var(--ease-out-quart), opacity var(--dur-1);
}
.nav-toggle-bar:nth-child(1){ transform: translateY(-4px); }
.nav-toggle-bar:nth-child(2){ transform: translateY(4px); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(1){ transform: rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2){ transform: rotate(-45deg); }

.ink-path--fluid{ vector-effect: non-scaling-stroke; }
main{ position:relative; z-index:1; }

/* ============================================================
   HERO
   ============================================================ */
.hero-sec{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block: var(--space-7) var(--space-6);
  position:relative;
  overflow:hidden;
}
.hero-inner{
  position:relative;
  width:100%;
  align-items:end;
  row-gap: var(--space-4);
}
.hero-ghost{
  position:absolute;
  left:-1vw;
  bottom:-6vh;
  font-size: clamp(5rem, 25vw, 22rem);
  z-index:0;
}
.hero-head{
  grid-column:1 / 9;
  position:relative;
  z-index:2;
}
.hero-kicker{ margin-bottom: var(--space-2); }
.hero-title{
  font-size: clamp(2.7rem, 8.4vw, 5.6rem);
  line-height:1.02;
  text-align:left;
}
.ht-line{ display:block; }
.ht-line + .ht-line{ text-indent: 1.4em; }
/* keep split glyphs behaving as one word: split-chars are separate
   inline-blocks, so "palt" can't tighten across them — restore the
   intended fit with a small negative tracking so JP full-width chars
   (esp. the trailing 。) don't drift apart across the column. */
.hero-title .split-word{ white-space:nowrap; }
.hero-title .split-char{ letter-spacing:-0.05em; }
.hero-underline{
  display:block;
  width: min(48ch, 92%);
  height: 28px;
  margin-top: var(--space-2);
  overflow:visible;
}
.hero-sprout{
  width: clamp(38px, 5vw, 58px);
  height:auto;
  margin-top: var(--space-3);
}
.hero-body{
  grid-column: 8 / 13;
  align-self:end;
  font-size: var(--step-1);
  line-height:1.9;
  z-index:2;
}
.hero-vert{
  position:absolute;
  top: 0.4rem;
  right: 0;
  height: 9em;
  z-index:2;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.grid-sec{
  padding-block: var(--space-5) var(--space-7);
  position:relative;
}
.grid-head{
  position:relative;
  z-index:3;
  display:flex;
  align-items:flex-end;
  gap: var(--space-3);
  flex-wrap:wrap;
  margin-bottom: var(--space-5);
}
.grid-head-main{ display:flex; align-items:flex-end; gap: var(--space-3); }
.grid-sprout{ width: clamp(40px, 5vw, 58px); height:auto; flex:0 0 auto; }
.grid-title{ font-size: var(--step-2); }
.grid-marginalia{
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--color-muted);
  letter-spacing:.02em;
  line-height:1.6;
  margin-left:auto;
  text-align:right;
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.product{ position:relative; }
.product-panel{
  position:relative;
  height:100%;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2.8rem);
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  overflow:hidden;
  min-height: clamp(260px, 26vw, 380px);
}
.product--deep .product-panel{ background: var(--surface-deep); }

.prod-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--space-2);
}
.prod-idx{
  position:relative;
  width: clamp(52px, 6vw, 76px);
  aspect-ratio:1;
  flex:0 0 auto;
}
.prod-num{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  color: var(--color-fg);
}
.prod-circle{ position:absolute; inset:0; width:100%; height:100%; }
.mat-tag{
  font-family: var(--font-body);
  font-weight:500;
  font-size: var(--step--1);
  color: var(--color-accent);
  border:1px solid var(--accent-soft);
  border-radius:100px;
  padding: 0.2em 0.9em;
  white-space:nowrap;
  align-self:flex-start;
}
.prod-illus{ flex:1; display:grid; place-items:center; padding-block: var(--space-2); }
.art{ width: clamp(96px, 42%, 168px); height:auto; }
.art .ink-path{ stroke: var(--color-fg); }
.art .ink-path--thin{ stroke: color-mix(in srgb, var(--color-fg) 62%, transparent); }

.prod-info{ display:flex; flex-direction:column; gap: var(--space-1); }
.prod-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: var(--space-2);
  border-top:1px solid var(--hairline);
  padding-top: var(--space-2);
}
.prod-name{ font-size: var(--step-1); font-weight:700; line-height:1.3; }
.prod-price{ font-weight:700; font-size: var(--step-0); color: var(--color-accent); white-space:nowrap; }
.prod-desc{
  font-size: var(--step--1);
  line-height:1.85;
  color: color-mix(in srgb, var(--color-fg) 88%, transparent);
  max-width:36ch;
}

/* asymmetric desktop placement (12-col) */
.product--1{ grid-column:1 / 7; grid-row:1 / 3; }
.product--2{ grid-column:7 / 13; grid-row:1 / 2; }
.product--3{ grid-column:7 / 13; grid-row:2 / 3; }
.product--4{ grid-column:1 / 8; grid-row:3 / 4; }
.product--5{ grid-column:8 / 13; grid-row:3 / 4; }

/* ============================================================
   PURCHASE
   ============================================================ */
.purchase-sec{ padding-block: var(--space-5); }
.purchase-band{ padding-block: var(--space-6); position:relative; }
.purchase-inner{ align-items:center; row-gap: var(--space-4); }
.purchase-head{ grid-column:1 / 7; }
.purchase-title{ font-size: var(--step-2); margin-top: var(--space-2); }
.purchase-body{
  grid-column: 7 / 13;
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
  align-items:flex-start;
}
.purchase-body p{ font-size: var(--step-0); }
.btn-arrow{ width:20px; height:20px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  position:relative;
  padding-block: var(--space-6) var(--space-4);
  margin-top: var(--space-6);
  overflow:hidden;
}
.footer-marquee{
  border-block:1px solid var(--hairline);
  padding-block: var(--space-3);
  margin-bottom: var(--space-6);
}
.footer-marquee span{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(1.6rem, 4vw, 3rem);
  letter-spacing:.02em;
}
.footer-marquee .mq-sep{ color: var(--color-accent); font-weight:700; }
.footer-kick{ margin-bottom: var(--space-3); }
.footer-logo-wrap{ position:relative; display:inline-block; max-width:100%; }
.footer-logo{
  font-family: var(--font-display);
  font-weight:900;
  font-size: clamp(2.6rem, 13vw, 11.5rem);
  line-height:.92;
  letter-spacing:-0.01em;
  color: var(--color-fg);
}
.footer-ink{
  position:absolute;
  left:0;
  bottom:-0.06em;
  width:100%;
  height:0.34em;
  overflow:visible;
}
.footer-cols{ margin-top: var(--space-5); row-gap: var(--space-4); }
.footer-nav{
  grid-column:1 / 6;
  display:flex;
  flex-direction:column;
  gap: var(--space-1);
}
.footer-nav a{
  font-family: var(--font-display);
  font-weight:700;
  font-size: var(--step-1);
  width:max-content;
  padding-block:0.15em;
}
.footer-nav a[aria-current="page"]{ color: var(--color-accent); }
.footer-contact{ grid-column: 7 / 13; display:flex; flex-direction:column; gap: var(--space-2); }
.footer-brand-jp{ font-family: var(--font-display); font-weight:700; font-size: var(--step-0); }
.footer-tag{ color: var(--color-accent); }
.footer-addr{ font-style:normal; color: var(--color-muted); line-height:2; }
.footer-addr a{ color: var(--color-fg); }
.footer-base{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top:1px solid var(--hairline);
  display:flex;
  justify-content:space-between;
  gap: var(--space-2);
  flex-wrap:wrap;
  font-size: var(--step--1);
  color: var(--color-muted);
}

/* ============================================================
   RESPONSIVE — every breakpoint a designed state
   ============================================================ */
@media (min-width:1025px){
  /* let the first tall panel rise into the heading band (10% overlap) */
  .product--1{ margin-top: calc(-1 * var(--space-4)); }
}

@media (max-width:1024px){
  .product-grid{ grid-auto-rows:auto; }
  .product--1,.product--2,.product--3,.product--4{ grid-column: span 6; grid-row:auto; }
  .product--5{ grid-column:1 / -1; grid-row:auto; }
  .footer-nav{ grid-column:1 / 5; }
  .footer-contact{ grid-column:6 / 13; }
}

@media (max-width:720px){
  .hero-inner{ align-items:start; }
  .hero-head, .hero-body{ grid-column:1 / -1; }
  .hero-body{ margin-top: var(--space-2); }
  .hero-vert{ position:static; height:auto; margin-top: var(--space-3); }
  .hero-ghost{ font-size: clamp(3.4rem, 30vw, 8rem); left:-2vw; bottom:auto; top: 8vh; }
  .ht-line + .ht-line{ text-indent: 0.8em; }

  .grid-head{ margin-bottom: var(--space-4); }
  .grid-marginalia{ margin-left:0; width:100%; text-align:left; }
  .product-grid{ grid-template-columns:1fr; }
  .product{ grid-column:1 / -1 !important; grid-row:auto !important; }
  .product-panel{ min-height: 300px; }
  .prod-desc{ max-width:none; }

  .purchase-head, .purchase-body{ grid-column:1 / -1; }
  .footer-nav, .footer-contact{ grid-column:1 / -1; }
}

@media (max-width:480px){
  .btn{ width:100%; justify-content:center; }
}