/* =========================================================
   WHO AM I? — Persona Atlas
   共通レイアウト / Mobile first (375px base)
   ---------------------------------------------------------
   ・構造とレイアウトはここ（全ユーザー共通）
   ・見せ方（書体・余白・角丸・装飾・色の使い方）は themes.css
   ========================================================= */

/* =========================================================
   TOKENS
   --c1 / --c2 / --c3 … その人の色（人物ごとに差し替える）
   それ以外の --r-* / --f-* / --hl などは themes.css が上書き
   ========================================================= */
:root{
  /* 人物パレット */
  --c1:      #9FDFC8;   /* Mint Green */
  --c1-deep: #5CBF9E;
  --c1-pale: #E3F3EB;
  --c2:      #A6DEE0;   /* Aquamarine */
  --c2-deep: #3E959E;
  --c3:      #E79A94;   /* Sweet Pea */
  --cream:   #F8EEDC;   /* Strawberry Cheesecake */

  /* 紙とインク */
  --paper:   #FCFAF5;
  --paper-2: #F4F8F3;
  --paper-3: #E9F3ED;
  --ink:     #1E2C28;
  --ink-2:   #41514B;
  --ink-3:   #7E8D87;
  --line:    #E1EAE4;
  --line-2:  #C9DAD1;
  --band:    var(--paper-2);
  --dark-bg: #16241F;
  --dark-ink:#EAF4EE;

  /* プラットフォーム共通UI（白ベース／全ユーザー共通）
     個人ページの色（--c1…）とは切り離しておく */
  --ui-bg:    #FFFFFF;
  --ui-ink:   #17201D;
  --ui-muted: #6E7C77;
  --ui-line:  #E7EBE9;
  /* 十人十色のスペクトル */
  --rainbow: linear-gradient(90deg,
    #9FDFC8 0 12.5%, #A6DEE0 12.5% 25%, #B9D4F0 25% 37.5%, #D6CBEC 37.5% 50%,
    #F1D6C4 50% 62.5%, #F6ECD6 62.5% 75%, #E79A94 75% 87.5%, #C6E2B6 87.5% 100%);

  /* 書体（テーマで上書き） */
  /* 日本語書体のスタック（日本語標準を優先し、中国語フォントへの置換を防ぐ） */
  --f-jp-rounded: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --f-jp-gothic:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --f-jp-mincho:  "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-display: var(--f-jp-rounded);
  --f-body:    var(--f-jp-gothic);
  --f-accent:  "Zen Kurenaido", var(--f-jp-rounded);
  --f-latin:   "Cormorant Garamond", serif;
  --display-weight: 700;
  --display-track: .01em;
  --display-scale: 1.05;
  --display-lh: 1.5;
  --body-track: .02em;
  --body-lh: 1.95;
  --label-track: .2em;

  /* かたち・余白（テーマで上書き） */
  --r-card: 20px;
  --r-media: 10px;
  --r-chip: 7px;
  --r-swatch: 12px;
  --r-btn: 999px;
  --pad-card: 16px;
  --gap-item: 42px;
  --sec-pad: 74px;
  --card-rotate: -2deg;
  --card-shadow: 0 24px 48px -30px rgba(30,60,50,.42);
  --rule-weight: 1px;

  /* 装飾の強さ（テーマで上書き） */
  --grain: .30;
  --decor: .9;

  /* 色の使い方（テーマで上書き） */
  --hl: var(--c1);
  --accent-color: var(--c1-deep);
  --num-color: var(--c2-deep);
  --head-align: left;
  --card-bg: #FFFEFB;
  --card-border: 1px solid var(--line-2);

  /* イラストの見せ方（テーマで上書き） */
  --img-bg: var(--paper-3);
  --img-border: none;
  --img-radius: var(--r-media);
  --img-blend: multiply;
  --cat-zoom: 1;
  --cat-origin: 50% 50%;

  /* レイアウト */
  --w: min(100% - 44px, 470px);
}

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

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

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 15px;
  line-height: var(--body-lh);
  letter-spacing: var(--body-track);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

/* 紙の質感 ------------------------------------------------ */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.26'/></svg>");
}

img{ max-width: 100%; height: auto; }
a{ color: inherit; }
.sp{ display: none; }
.svgdefs{ position:absolute; width:0; height:0; overflow:hidden; }
.wrap{ width: var(--w); margin-inline: auto; }

.js [data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.js [data-reveal].is-in{ opacity: 1; transform: none; }

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--ui-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
/* 十人十色のライン（プラットフォームの目印） */
.topbar::before{
  content:"";
  display: block;
  height: 3px;
  background: var(--rainbow);
}
.topbar.is-stuck{ border-bottom-color: var(--line); }

.topbar__in{
  width: var(--w);
  margin-inline: auto;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.topbar__brand{
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  flex: none;
  white-space: nowrap;
}
.topbar__mark{ font-family: var(--f-latin); font-size: 13px; letter-spacing: .18em; }
.topbar__sub{
  font-family: var(--f-latin);
  font-size: 8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topbar__nav{
  display: flex;
  min-width: 0;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.topbar__nav::-webkit-scrollbar{ display: none; }
.topbar__nav a{
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.topbar__nav a:hover{ color: var(--accent-color); border-bottom-color: var(--hl); }
.topbar__nav a:first-child{ display: none; }

.topbar__progress{
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--c1), var(--c2));
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  padding: 30px 0 64px;
  overflow: hidden;
}
.hero__wash{
  position: absolute;
  left: -25%;
  right: -25%;
  top: -8%;
  height: 78%;
  pointer-events: none;
  opacity: var(--decor);
  background:
    radial-gradient(58% 52% at 76% 16%, color-mix(in srgb, var(--c1) 34%, transparent), transparent 70%),
    radial-gradient(52% 48% at 10% 66%, color-mix(in srgb, var(--c2) 28%, transparent), transparent 72%);
}
.hero__grid{ position: relative; }

.kicker{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  font-family: var(--f-latin);
  font-size: 11px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-3);
}
.kicker__line{ width: 26px; height: 1px; background: var(--accent-color); }

.hero__nameline{
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 16px;
}
.hero__nameline::before{
  content:"";
  position: absolute;
  top: 0; left: 0;
  width: 74%;
  height: var(--rule-weight);
  background: var(--line-2);
}
.hero__name{
  margin: 0;
  font-family: var(--f-latin);
  font-weight: 400;
  font-size: clamp(2.7rem, 13.6vw, 3.6rem);
  line-height: .98;
  letter-spacing: .05em;
}
.hero__no{
  font-family: var(--f-latin);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--num-color);
}

.hero__tag{
  margin: 20px 0 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(1.3rem * var(--display-scale));
  line-height: 1.7;
  letter-spacing: var(--display-track);
  background-image: linear-gradient(transparent 70%, var(--hl) 70%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline;
}
.hero__intro{
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: calc(var(--body-lh) + .1);
  color: var(--ink-2);
}
.hero__note{
  margin: 18px 0 0;
  padding-left: 13px;
  border-left: var(--rule-weight) solid var(--line-2);
  font-family: var(--f-accent);
  font-size: 13px;
  line-height: 1.95;
  color: var(--ink-2);
}
.hero__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 26px 0 0;
  font-family: var(--f-latin);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-3);
}
.hero__metaitem{ display: inline-flex; align-items: center; gap: 6px; }
.hero__metaitem--plain{ font-family: var(--f-body); letter-spacing: .1em; font-size: 11px; }
.dot{ width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot--mint{ background: var(--c1); }
.dot--aqua{ background: var(--c2); }
.dot--coral{ background: var(--c3); }

.hero__wind{
  display: block;
  width: min(100%, 210px);
  height: 36px;
  margin-top: 24px;
  color: var(--c2);
  opacity: var(--decor);
}
.spark{
  position: absolute;
  color: var(--c1-deep);
  opacity: var(--decor);
  pointer-events: none;
}
.spark--hero{ top: 34px; right: 2px; width: 22px; height: 22px; }
.spark--atlas{ top: 4px; right: 0; width: 18px; height: 18px; color: var(--c2-deep); }
.spark--cta{ top: 20px; right: 20px; width: 20px; height: 20px; color: var(--c1); }

/* --- Persona card ------------------------------------------------ */
.stage{
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stage__blob{
  position: absolute;
  top: 6%;
  left: 50%;
  width: 84%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
  opacity: var(--decor);
  background: radial-gradient(circle at 42% 36%,
    color-mix(in srgb, var(--c1) 55%, transparent),
    color-mix(in srgb, var(--c2) 22%, transparent) 62%,
    transparent 74%);
  pointer-events: none;
}
.pcard{
  position: relative;
  width: min(100%, 300px);
  margin: 0;
  padding: var(--pad-card);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--r-card);
  box-shadow: var(--card-shadow);
  transform: rotate(var(--card-rotate));
  transition: transform .6s cubic-bezier(.2,.8,.2,1), background-color .35s ease;
}
.pcard:hover{ transform: rotate(calc(var(--card-rotate) / 2)) translateY(-3px); }
.pcard__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
}
.pcard__brand{
  font-family: var(--f-latin);
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pcard__no{
  font-family: var(--f-latin);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--num-color);
}
.pcard__fig{
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--img-bg);
  border: var(--img-border);
  border-radius: var(--img-radius);
}
.pcard__fig img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: var(--img-blend);
  transform: scale(var(--cat-zoom));
  transform-origin: var(--cat-origin);
  /* 画像側でトリミング済みなので、ここでは拡大しない */
  --cat-zoom: 1;
  --cat-origin: 50% 50%;
}
.pcard__sprig{
  position: absolute;
  right: -4px;
  bottom: -10px;
  width: 48px;
  height: 66px;
  color: var(--c1-deep);
  opacity: calc(var(--decor) * .95);
  transform: rotate(10deg);
}
.pcard__body{
  padding: 16px 4px 14px;
  text-align: center;
  border-bottom: var(--rule-weight) solid var(--line);
}
.pcard__name{
  margin: 0;
  font-family: var(--f-latin);
  font-size: 26px;
  letter-spacing: .16em;
  line-height: 1.2;
}
.pcard__tag{
  margin: 8px 0 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-2);
}
.pcard__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 11px;
}
.chips{ display: inline-flex; gap: 5px; }
.chip{
  width: 13px; height: 13px;
  border-radius: var(--r-chip);
  display: inline-block;
  border: 1px solid rgba(30,44,40,.08);
}
.chip--mint{ background: var(--c1); }
.chip--aqua{ background: var(--c2); }
.chip--paper{ background: var(--cream); }
.pcard__motif{
  font-family: var(--f-latin);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stage__caption{
  margin: 16px 0 0;
  font-family: var(--f-accent);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.scrollcue{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 46px auto 0;
  width: max-content;
  text-decoration: none;
  color: var(--ink-3);
  font-family: var(--f-latin);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.scrollcue svg{ width: 12px; height: 40px; animation: cue 2.6s ease-in-out infinite; }
@keyframes cue{
  0%,100%{ transform: translateY(0); opacity: .55; }
  50%{ transform: translateY(6px); opacity: 1; }
}

/* =========================================================
   SECTION LABEL
   ========================================================= */
.sec-label{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--f-latin);
  font-size: 11px;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-3);
}
.sec-label span{ color: var(--num-color); letter-spacing: .1em; }
.sec-label::after{
  content:"";
  flex: 1;
  height: var(--rule-weight);
  background: var(--line);
}
.sec-label--light{ color: color-mix(in srgb, var(--dark-ink) 55%, transparent); }
.sec-label--light span{ color: var(--c1); }
.sec-label--light::after{ background: color-mix(in srgb, var(--dark-ink) 16%, transparent); }

/* =========================================================
   01 / WHO AM I?
   ========================================================= */
.what{
  position: relative;
  background: var(--band);
  padding: 0 0 calc(var(--sec-pad) - 6px);
  margin-top: 40px;
}
.what__divider{
  display: block;
  width: 100%;
  height: 22px;
  color: var(--line-2);
  opacity: var(--decor);
  margin-bottom: 34px;
}
.what__lead{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.6rem, 7.6vw, 2.15rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  text-align: var(--head-align);
}
.what__lead em{
  font-style: normal;
  background-image: linear-gradient(transparent 58%, var(--hl) 58%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.what__ul{
  display: block;
  width: 7.6em;
  height: 10px;
  color: var(--accent-color);
  margin-top: 4px;
}
.what__copy p{
  margin: 26px 0 0;
  font-size: 13.5px;
  line-height: calc(var(--body-lh) + .15);
  color: var(--ink-2);
}
.what__concept{
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.8;
  color: var(--ink);
  padding-left: 15px;
  border-left: 2px solid var(--accent-color);
  margin-top: 28px;
}
.what__small{
  font-family: var(--f-accent);
  font-size: 12.5px;
  color: var(--ink-3);
}
.what__fig{ margin: 34px 0 0; }
.what__fig img{ width: 100%; display: block; }
.what__fig figcaption{
  margin-top: 8px;
  text-align: right;
  font-family: var(--f-latin);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.what__steps{
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  border-top: var(--rule-weight) solid var(--line-2);
}
.what__steps li{
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 8px;
  padding: 15px 0;
  border-bottom: var(--rule-weight) solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-2);
}
.what__steps .num{ font-family: var(--f-latin); font-size: 13px; color: var(--num-color); }
.what__steps .txt{ margin: 0; }
.what__steps strong{
  display: block;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: var(--display-weight);
  color: var(--ink);
}

/* =========================================================
   02 / PERSONA ATLAS
   ========================================================= */
.atlas{ padding: var(--sec-pad) 0 20px; }
.atlas__title{
  position: relative;
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.38rem, 6.6vw, 1.75rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  text-align: var(--head-align);
}
.atlas__intro{
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.atlas__list{ margin-top: 44px; }

.pa{ position: relative; margin: 0 0 var(--gap-item); }
.pa__no{
  display: block;
  font-family: var(--f-latin);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--num-color);
}
.pa__q{
  margin: 7px 0 3px;
  font-family: var(--f-accent);
  font-size: 13px;
  color: var(--ink-3);
}
.pa__a{ margin: 0; display: flex; flex-direction: column; gap: 3px; }
.pa__en{
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(1.58rem * var(--display-scale));
  line-height: 1.16;
  letter-spacing: var(--display-track);
}
.pa__jp{ font-size: 11.5px; letter-spacing: .16em; color: var(--ink-3); }
.pa__keys{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 14px 0 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--ink-2);
}
.pa__keys li::before{ content: "·"; margin-right: 6px; color: var(--accent-color); }
.pa__media{
  overflow: hidden;
  background: var(--img-bg);
  border: var(--img-border);
  border-radius: var(--img-radius);
}
.pa__media img{
  width: 100%;
  display: block;
  mix-blend-mode: var(--img-blend);
}

/* 01 — lead */
.pa--lead .pa__media img{
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(var(--cat-zoom));
  transform-origin: var(--cat-origin);
  --cat-zoom: 1;
  --cat-origin: 50% 50%;
}
.pa--lead .pa__body{ margin-top: 20px; }
.pa--lead .pa__en{ font-size: calc(2.15rem * var(--display-scale)); }

/* 02 — colour swatch */
.pa--color .pa__swatch{
  position: relative;
  height: 150px;
  border-radius: var(--r-swatch);
  background: var(--c1);
  overflow: hidden;
}
.pa--color .pa__swatch::after{
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 22% 18%, rgba(255,255,255,.5), rgba(255,255,255,0) 68%);
}
.swatch__hex{
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-family: var(--f-latin);
  font-size: 11px;
  letter-spacing: .2em;
  color: rgba(30,44,40,.5);
}
.swatch__scale{
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  border-radius: var(--r-chip);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.45);
}
.swatch__scale i{ display: block; width: 26px; height: 12px; }
.pa--color .pa__body{ margin-top: 20px; }

/* 03 — side */
.pa--side{
  display: grid;
  grid-template-columns: 1fr 104px;
  gap: 16px;
  align-items: center;
}
.pa--side .pa__media img{ aspect-ratio: 3 / 4; object-fit: cover; }

/* 04 — bleed */
.pa--bleed{ margin-bottom: calc(var(--gap-item) + 4px); }
.pa--bleed .pa__media{
  width: calc(100% + 44px);
  margin-left: -22px;
  border-top: var(--rule-weight) solid var(--line);
  border-bottom: var(--rule-weight) solid var(--line);
  border-radius: 0;
}
.pa--bleed .pa__media img{
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 86%;
  transform: scale(1.5);
  transform-origin: 50% 66%;
}
.pa--bleed .pa__body{ margin-top: 20px; }

/* 05 — wide */
.pa--wide .pa__media img{ aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 74%; }
.pa--wide .pa__body{
  margin-top: 20px;
  padding-top: 18px;
  border-top: var(--rule-weight) solid var(--line-2);
}

/* 06 / 07 — duo */
.pa-duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: calc(var(--gap-item) + 2px);
}
.pa--half{ margin: 0; display: flex; flex-direction: column; }
.pa--half .pa__media img{ aspect-ratio: 1 / 1; object-fit: cover; }
.pa--half .pa__body{ margin-top: 15px; }
.pa--half .pa__en{ font-size: calc(1.02rem * var(--display-scale)); line-height: 1.25; }
.pa--half .pa__jp{ font-size: 10.5px; letter-spacing: .1em; }
.pa--half .pa__keys{ font-size: 10.5px; gap: 4px 8px; margin-top: 11px; }
.pa--half .pa__q{ font-size: 12px; }

/* 08 — food */
.pa--food{
  background: var(--cream);
  border-radius: var(--r-card);
  padding: 22px 20px 0;
  overflow: hidden;
}
.pa--food .pa__en{ font-size: calc(1.38rem * var(--display-scale)); }
.pa--food .pa__media{ margin: 18px -20px 0; border-radius: 0; background: transparent; }
.pa--food .pa__media img{ aspect-ratio: 4 / 3; object-fit: cover; }

/* =========================================================
   03 / WHY THESE?
   ========================================================= */
.why{
  background: var(--band);
  padding: 0 0 var(--sec-pad);
  margin-top: 56px;
}
.why__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.38rem, 6.6vw, 1.75rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  text-align: var(--head-align);
}
.why__intro{ margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }
.why__list{ list-style: none; margin: 34px 0 0; padding: 0; }
.why__item{ padding: 22px 0; border-top: var(--rule-weight) solid var(--line-2); }
.why__item:last-child{ border-bottom: var(--rule-weight) solid var(--line-2); }
.why__head{ display: flex; align-items: baseline; gap: 10px; }
.why__no{ font-family: var(--f-latin); font-size: 12px; letter-spacing: .18em; color: var(--num-color); }
.why__head h3{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(1.06rem * var(--display-scale));
  letter-spacing: var(--display-track);
}
.why__item p{ margin: 11px 0 0; font-size: 13px; line-height: calc(var(--body-lh) + .15); color: var(--ink-2); }

/* =========================================================
   04 / ABOUT
   ========================================================= */
.about{ padding: var(--sec-pad) 0; }
.about__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.42rem, 6.9vw, 1.85rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  text-align: var(--head-align);
}
.about__text{
  position: relative;
  z-index: 0;
  margin-top: 26px;
  padding: 26px 20px;
}
.about__text::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c1-pale);
  border-radius: var(--r-card);
  transform: rotate(calc(var(--card-rotate) * .45));
  opacity: var(--decor);
}
.about__text p{
  margin: 0 0 1.5em;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: calc(var(--body-lh) + .3);
  letter-spacing: var(--body-track);
}
.about__text p:last-child{ margin-bottom: 0; }
.about__sign{
  margin: 30px 0 0;
  font-family: var(--f-latin);
  font-style: italic;
  font-weight: 300;
  font-size: 2.15rem;
  letter-spacing: .06em;
  line-height: 1.2;
}
.about__sig-note{ margin: 6px 0 0; font-size: 11px; color: var(--ink-3); }
.about__now{ margin-top: 46px; padding-top: 22px; border-top: var(--rule-weight) solid var(--line-2); }
.about__nowlabel{ margin: 0 0 6px; font-size: 11.5px; letter-spacing: .12em; color: var(--accent-color); }
.about__now ul{ list-style: none; margin: 0; padding: 0; }
.about__now li{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--line-2);
  font-size: 13px;
}
.about__now li em{
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.6;
}
.about__nowfoot{ margin: 14px 0 0; font-family: var(--f-accent); font-size: 12px; color: var(--ink-3); }

/* =========================================================
   05 / SKILLS
   ========================================================= */
.skills{ background: var(--band); padding: calc(var(--sec-pad) - 4px) 0 var(--sec-pad); }
.skills__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.38rem, 6.6vw, 1.75rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  text-align: var(--head-align);
}
.skills__intro{ margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }
.skills__grid{ margin-top: 34px; }
.skill{ padding: 24px 0; border-top: var(--rule-weight) solid var(--line-2); }
.skill h3{ display: flex; align-items: baseline; gap: 10px; margin: 0; }
.skill__k{
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(1.3rem * var(--display-scale));
  letter-spacing: .04em;
}
.skill small{
  font-family: var(--f-latin);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.skill__desc{ margin: 9px 0 0; font-size: 12.5px; color: var(--ink-2); }
.skill__items{ margin: 11px 0 0; font-size: 13px; line-height: 1.9; letter-spacing: .04em; }
.skills__foot{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 0;
  font-family: var(--f-accent);
  font-size: 12.5px;
  color: var(--ink-3);
}
.skills__sprig{ width: 24px; height: 34px; flex: none; color: var(--accent-color); }

/* =========================================================
   06 / PROJECTS
   ========================================================= */
.works{ padding: var(--sec-pad) 0 calc(var(--sec-pad) - 14px); }
.works__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.38rem, 6.6vw, 1.75rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  text-align: var(--head-align);
}
.works__list{ margin-top: 36px; }

.work{
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 14px;
  align-items: start;
  padding: 26px 0;
  border-top: var(--rule-weight) solid var(--line);
}
.work--feature{ display: block; padding-top: 0; border-top: none; }
.work__media{
  overflow: hidden;
  background: var(--img-bg);
  border: var(--img-border);
  border-radius: var(--img-radius);
}
.work__media img{
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  mix-blend-mode: var(--img-blend);
}
.work--feature .work__media img{ aspect-ratio: 4 / 3; }
.work--feature .work__body{ margin-top: 20px; }

.work__meta{ display: flex; align-items: center; gap: 12px; }
.work__no{ font-family: var(--f-latin); font-size: 11px; letter-spacing: .2em; color: var(--num-color); }
.work__state{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.work__state::before{
  content:"";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-color);
}
.work__title{
  margin: 9px 0 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(1.16rem * var(--display-scale));
  line-height: 1.5;
  letter-spacing: var(--display-track);
}
.work__title span{
  display: block;
  font-family: var(--f-latin);
  font-weight: 400;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 2px;
}
.work__body p{ margin: 11px 0 0; font-size: 12.5px; line-height: 1.95; color: var(--ink-2); }

/* =========================================================
   07 / LINKS  (dark)
   ========================================================= */
.links{
  position: relative;
  background: var(--dark-bg);
  color: var(--dark-ink);
  padding: calc(var(--sec-pad) - 4px) 0 var(--sec-pad);
  overflow: hidden;
}
.links::before{
  content:"";
  position: absolute;
  top: -20%;
  right: -30%;
  width: 80%;
  aspect-ratio: 1 / 1;
  opacity: var(--decor);
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--c1) 16%, transparent), transparent 68%);
  pointer-events: none;
}
.links__title{
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(clamp(1.42rem, 6.7vw, 1.8rem) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-track);
  color: color-mix(in srgb, var(--dark-ink) 96%, white);
  text-align: var(--head-align);
}
.links__list{ list-style: none; margin: 32px 0 0; padding: 0; }
.links__list li:last-child a{
  border-bottom: var(--rule-weight) solid color-mix(in srgb, var(--dark-ink) 14%, transparent);
}
.links__list a{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 16px 2px;
  border-top: var(--rule-weight) solid color-mix(in srgb, var(--dark-ink) 14%, transparent);
  text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.links__list a:hover{ transform: translateX(5px); }
.links__name{ font-size: 15px; letter-spacing: .06em; }
.links__note{ font-size: 11px; color: color-mix(in srgb, var(--dark-ink) 50%, transparent); }
.links__arrow{
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 20px;
  height: 20px;
  color: var(--c1);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.links__list a:hover .links__arrow{ transform: translateX(4px); }
.links__placeholder{
  margin: 14px 0 0;
  font-size: 10.5px;
  color: color-mix(in srgb, var(--dark-ink) 40%, transparent);
}

.cta{
  position: relative;
  margin: 46px 0 0;
  padding: 26px 20px 28px;
  border: 1px solid color-mix(in srgb, var(--c1) 32%, transparent);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 10%, transparent), transparent 62%);
}
.cta__label{
  margin: 0;
  font-family: var(--f-latin);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c1);
}
.cta__title{
  margin: 12px 0 0;
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-size: calc(1.32rem * var(--display-scale));
  line-height: var(--display-lh);
  color: color-mix(in srgb, var(--dark-ink) 96%, white);
}
.cta__text{
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.95;
  color: color-mix(in srgb, var(--dark-ink) 62%, transparent);
}
.cta__btn{
  display: inline-block;
  margin-top: 20px;
  padding: 8px 20px;
  border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent);
  border-radius: var(--r-btn);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--c1);
  opacity: .85;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  position: relative;
  background: var(--ui-bg);
  color: var(--ui-muted);
  padding: 42px 0 50px;
  font-size: 11.5px;
}
.foot::before{
  content:"";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
}
.foot__in{ display: flex; flex-direction: column; gap: 3px; }
.foot__brand{
  margin: 0;
  font-family: var(--f-latin);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--ui-ink);
}
.foot__brand span{ font-size: 10px; letter-spacing: .22em; color: var(--ui-muted); }
.foot__no{ margin: 6px 0 0; font-family: var(--f-latin); font-size: 12px; letter-spacing: .16em; color: var(--ui-ink); }
.foot__note{ margin: 14px 0 0; font-size: 11px; line-height: 1.8; }
.foot__copy{ margin: 18px 0 0; font-family: var(--f-latin); font-size: 10px; letter-spacing: .18em; }

/* 十人十色 */
.foot__dots{ display: flex; gap: 5px; margin: 16px 0 0; }
.foot__dots i{ width: 12px; height: 12px; border-radius: 3px; }
.foot__dots i:nth-child(1){ background: #9FDFC8; }
.foot__dots i:nth-child(2){ background: #A6DEE0; }
.foot__dots i:nth-child(3){ background: #B9D4F0; }
.foot__dots i:nth-child(4){ background: #D6CBEC; }
.foot__dots i:nth-child(5){ background: #F1D6C4; }
.foot__dots i:nth-child(6){ background: #F6ECD6; }
.foot__dots i:nth-child(7){ background: #E79A94; }
.foot__dots i:nth-child(8){ background: #C6E2B6; }
.foot__ten{
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ui-ink);
}

/* =========================================================
   THEME SWITCHER（プロトタイプ用。本番では外す）
   ========================================================= */
.themebar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.themebar[hidden]{ display: none; }
.themebar__in{
  width: var(--w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  overflow-x: auto;
  scrollbar-width: none;
}
.themebar__in::-webkit-scrollbar{ display: none; }
.themebar__label{
  flex: none;
  font-family: var(--f-latin);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.themebar__btn{
  flex: none;
  appearance: none;
  background: none;
  border: none;
  padding: 3px 0;
  font-family: var(--f-latin);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.themebar__btn:hover{ color: var(--ink); }
.themebar__btn[aria-pressed="true"]{ color: var(--ink); border-bottom-color: var(--accent-color); }
.themebar__close{
  flex: none;
  margin-left: auto;
  appearance: none;
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 4px;
}
.themebar__toggle{
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 70;
  appearance: none;
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: var(--r-btn);
  padding: 6px 12px;
  font-family: var(--f-latin);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
}
.themebar__toggle[hidden]{ display: none; }

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 880px){
  :root{ --w: min(100% - 100px, 1060px); }
  body{ font-size: 15.5px; }

  .topbar__in{ height: 60px; }
  .topbar__nav{ font-size: 11.5px; gap: 22px; }
  .topbar__nav a:first-child{ display: block; }
  .sp{ display: inline; }

  .hero{ padding: 54px 0 92px; }
  .hero__grid{
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 60px;
    align-items: center;
  }
  .hero__name{ font-size: clamp(3.4rem, 5vw, 4.2rem); }
  .hero__tag{ font-size: calc(1.44rem * var(--display-scale)); }
  .stage{ margin-top: 0; }
  .pcard{ width: 320px; }
  .stage__blob{ width: 92%; }
  .scrollcue{ margin-top: 62px; }
  .spark--hero{ top: 44px; right: -6px; width: 26px; height: 26px; }

  .what__grid{
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center;
  }
  .what__fig{ margin-top: 26px; }
  .what__steps{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 34px;
    border-top: none;
    margin-top: 54px;
  }
  .what__steps li{
    border-bottom: none;
    border-top: var(--rule-weight) solid var(--line-2);
    padding: 18px 0 0;
  }

  .atlas__list{ max-width: 800px; margin-inline: auto; }
  .atlas__list > .pa:nth-child(even){ margin-left: 5.5%; }
  .atlas__list > .pa:nth-child(odd){ margin-right: 5.5%; }
  .pa--lead .pa__en{ font-size: calc(2.7rem * var(--display-scale)); }
  .pa--bleed .pa__media{ width: 100%; margin-left: 0; border-radius: var(--r-media); }
  .pa--side{ grid-template-columns: 1fr 150px; gap: 26px; }
  .pa--color .pa__swatch{ height: 190px; }
  .pa--food{ padding: 28px 30px 0; }
  .pa--food .pa__media{ margin: 22px -30px 0; }
  .pa--half .pa__en{ font-size: calc(1.18rem * var(--display-scale)); }

  .why__list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 54px;
    border-bottom: var(--rule-weight) solid var(--line-2);
  }
  .why__item:last-child{ border-bottom: none; }

  .about__grid{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 64px;
    align-items: start;
  }
  .about__now{ margin-top: 0; }

  .skills__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 40px;
  }
  .skill{ padding: 26px 0 0; }
  .skill__items{ font-size: 12.5px; }

  .works__list{ max-width: 860px; margin-inline: auto; }
  .work{ grid-template-columns: 1fr 120px; gap: 28px; padding: 30px 0; }
  .work--feature{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-bottom: 40px;
  }
  .work--feature .work__body{ margin-top: 0; }
  .work__title{ font-size: calc(1.22rem * var(--display-scale)); }

  .links__list{ max-width: 660px; }
  .cta{ max-width: 660px; padding: 30px 28px 32px; }
}

@media (min-width: 1180px){
  .hero__name{ font-size: 4.4rem; }
}

/* motion preferences ------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .js [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .scrollcue svg{ animation: none; }
}

/* print --------------------------------------------------------- */
@media print{
  body::after, .topbar, .scrollcue, .themebar, .themebar__toggle{ display: none; }
  .links, .foot{ background: #fff; color: var(--ink); }
}

/* テーマバー表示中は、その分だけ下に余白をとる */
body.has-themebar .foot{ padding-bottom: calc(50px + 48px + env(safe-area-inset-bottom)); }