@import url("tokens.css?v=20260804-1");

/* Hallmark · macrostructure: Portfolio Grid · genre: playful · nav: N1 (wordmark + 3 tab links) · footer: Ft8 marquee
 * theme: custom · vibe: "日々草、やさしいピンク、若葉のグリーン、楽しい思い出" · paper: oklch(97% 0.012 350) · accent: oklch(50% 0.15 355)
 * display: Fraunces italic · body: Zen Maru Gothic · axes: light / italic-serif / chromatic-other (vinca-pink ~355)
 * F6 knobs: ratio=4/3, density=1-up rows, micro-action=View→ · C3 knobs: underline=solid, hover=thicken, arrow=→
 * motion: reveal-once (hero) · card hover-lift · footer marquee — 3 primitives
 */



/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.7;
  padding-inline: max(0px, env(safe-area-inset-left));
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

.wrap {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: clip; clip-path: inset(50%); white-space: nowrap;
}

/* --- nav · N1 --- */
.nav {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg) var(--space-md);
}
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__tabs { display: flex; gap: clamp(0.75rem, 3vw, 1.5rem); }
.nav__link {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  padding-bottom: var(--space-3xs);
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav__link:hover, .nav__link:active { color: var(--color-accent); }
.nav__link[aria-current="page"] { border-bottom-color: var(--color-accent); }

/* --- hero --- */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
  padding-block: var(--space-2xl) var(--space-3xl);
}
.hero__display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-display);
  line-height: 1.05;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero__flower { flex: none; width: clamp(56px, 9vw, 88px); height: auto; }
.hero__text { min-width: 0; }
.hero__tagline {
  margin: var(--space-lg) 0 0;
  font-size: clamp(0.8rem, 2.6vw, var(--text-md));
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--color-ink-2);
}
/* one orchestrated entrance, hero only */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* --- section heads --- */
.section { padding-block: var(--space-2xl); }
.section--tint {
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.section__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
}
.section__note { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* --- gallery cards (Top) --- */
.gallery { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); }
.gcard {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
}
a.gcard {
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.gcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-whisper); }
}
a.gcard:active { transform: translateY(0); }
.gcard__thumb {
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius-card) - 4px);
  background: var(--color-paper-2);
  display: grid;
  place-content: center;
  gap: var(--space-xs);
  justify-items: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.gcard__thumb svg { width: 40px; height: 40px; opacity: 0.8; }
.gcard__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
}
.gcard__desc { color: var(--color-ink-2); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.gcard__cta {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  white-space: nowrap;
}
a.gcard:hover .gcard__cta { text-decoration-thickness: 2px; }
.chip-soon {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-sm);
  white-space: nowrap;
}
@media (min-width: 40rem) {
  .gcard { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: center; gap: var(--space-lg); }
}

/* --- profile --- */
.profile {
  margin-top: var(--space-xl);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: clamp(1rem, 3vw, 2rem);
}
.profile__row {
  display: grid;
  grid-template-columns: minmax(0, 7em) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.profile__row + .profile__row { border-top: var(--rule-hair) solid var(--color-rule-2); }
.profile__row dt { color: var(--color-leaf); font-size: var(--text-sm); font-weight: 700; }
.profile__row dd.is-placeholder { color: var(--color-muted); }
.hist { display: flex; flex-direction: column; gap: var(--space-2xs); }
.hist span { display: block; line-height: 1.7; }
@media (max-width: 25rem) {
  .profile__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* --- works list (前職での実績 / 会社案内) --- */
.worklist { display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.workrow {
  display: grid;
  grid-template-columns: clamp(64px, 18vw, 96px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.5rem);
}
.workrow__thumb {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-paper-2);
  border: var(--rule-hair) dashed var(--color-rule);
  display: grid;
  place-content: center;
  color: var(--color-muted);
}
.workrow__thumb svg { width: 32px; height: 32px; opacity: 0.8; }
.workrow__thumb--img { border: 2px solid var(--color-accent-soft); background: none; overflow: hidden; display: block; }
.workrow__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.workrow__label {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: var(--space-md) var(--space-lg);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;
}
a.workrow {
  text-decoration: none;
  transition: transform var(--dur-short) var(--ease-out);
}
a.workrow .workrow__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
a.workrow .workrow__arrow { color: var(--color-accent); font-size: var(--text-sm); white-space: nowrap; text-decoration: underline; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) {
  a.workrow:hover { transform: translateY(-2px); }
  a.workrow:hover .workrow__label { box-shadow: var(--shadow-whisper); }
}
a.workrow:active { transform: translateY(0); }
.workrow__soon {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}
.workrow__role, .charcast__role {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-leaf);
  margin-bottom: var(--space-3xs);
}
.workrow__name, .charcast__name { display: block; font-size: var(--text-lg); font-weight: 700; line-height: 1.3; }
.workrow__desc, .charcast__desc {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-ink-2);
  line-height: 1.7;
}

/* --- character cast (キャラクターと吹き出しを左右交互に置く) --- */
.charcast { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.charcast__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}
.charcast__figure {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-paper-2);
  border: 2px solid var(--color-accent-soft);
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 1.75rem);
  overflow: hidden;
}
/* 画像自身の余白が少ないキャラは内側パディングなしで目一杯に置く */
.charcast__figure--fill { padding: 0; }
.charcast__figure img { width: 100%; height: 100%; object-fit: contain; }
.charcast__item--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4.5fr); }
.charcast__item--flip .charcast__figure { order: 2; }

@media (max-width: 34rem) {
  .charcast__item,
  .charcast__item--flip { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .charcast__item--flip .charcast__figure { order: 0; }
  .charcast__figure { max-width: 14rem; margin-inline: auto; }
}

/* --- 見開き (会社案内) --- */
.spread { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.spread__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
}
.spread__figure {
  aspect-ratio: 1.414;
  border: var(--rule-hair) dashed var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  display: grid;
  place-items: center;
  position: relative;
  color: var(--color-muted);
  font-size: var(--text-xs);
  overflow: hidden;
}
/* 見開きのノド */
.spread__figure::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  border-left: var(--rule-hair) dashed var(--color-rule);
}
/* 4ページ分の項目は見開きを2枚縦に並べる */
.spread__figures { display: grid; gap: var(--space-sm); min-width: 0; }
/* 画像が入る枠は準備中の破線とノドをやめて実線で囲う */
.spread__figure--img { border: 2px solid var(--color-accent-soft); background: none; }
.spread__figure--img::after { display: none; }
.spread__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spread__page { display: block; font-size: var(--text-sm); line-height: 1.7; }
.spread__page + .spread__page { margin-top: var(--space-sm); }
.spread__num { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--color-leaf); }

/* --- 吹き出し (キャラクター紹介・見開き解説で共用) --- */
.balloon {
  position: relative;
  border: 2px solid var(--color-accent-soft);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  padding: var(--space-md) var(--space-lg);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* 尾: 枠色の三角の上に背景色の三角を重ねて縁取りを作る */
.balloon::before,
.balloon::after {
  content: "";
  position: absolute;
  top: 42%;
  border: 12px solid transparent;
}
.balloon::before { left: -24px; border-right-color: var(--color-accent-soft); }
.balloon::after  { left: -21px; border-right-color: var(--color-paper); }

/* 図が右にあるときは尾を右向きにする */
.charcast__item--flip .balloon::before,
.charcast__item--flip .balloon::after { left: auto; border-right-color: transparent; }
.charcast__item--flip .balloon::before { right: -24px; border-left-color: var(--color-accent-soft); }
.charcast__item--flip .balloon::after  { right: -21px; border-left-color: var(--color-paper); }

@media (max-width: 34rem) {
  .spread__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .balloon::before,
  .balloon::after { display: none; }
}

/* --- attention box --- */
.attention {
  margin-top: var(--space-2xl);
  border: 2px solid var(--color-accent-soft);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  padding: var(--space-lg);
}
.attention__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-accent);
}
.attention__body { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }

/* --- breadcrumb-ish back link · C3 --- */
.backlink {
  display: inline-block;
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.backlink:hover, .backlink:active { color: var(--color-accent); text-decoration-thickness: 2px; }

/* --- page hero (subpages) --- */
.page-head { padding-block: var(--space-xl) var(--space-lg); }
.page-head__eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-leaf);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2xs);
}
.page-head__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}
.page-head__catch {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.5vw + 0.5rem, 3rem);
  font-style: italic;
  line-height: 1.25;
  margin-top: var(--space-lg);
  overflow-wrap: anywhere;
  min-width: 0;
}
.page-head__catch em { font-style: italic; color: var(--color-accent); }
.page-head__lede { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 36em; }

/* --- footer · Ft8 --- */
.foot { margin-top: var(--space-3xl); border-top: 2px solid var(--color-accent-soft); overflow: clip; }
.foot__meta {
  padding-block: var(--space-lg) var(--space-xl);
  font-size: var(--text-xs);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
}

/* --- guarded media (前職の実績まわり) --- */
.guarded { user-select: none; -webkit-user-select: none; }

/* --- vinca flower (Tier B hand-built SVG) --- */
.vinca__petal { fill: var(--color-accent-soft); }
.vinca__heart { fill: var(--color-accent); }
.vinca__eye   { fill: var(--color-pollen); }
.vinca__leaf  { fill: var(--color-paper-leaf); stroke: var(--color-leaf); stroke-width: 1; }

/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  a.gcard, a.workrow { transition: none; }
}


/* --- lightbox · guarded media の拡大表示 --- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  background: oklch(26% 0.018 350 / 0.9);
  opacity: 0;
  transition: opacity var(--dur-short) var(--ease-out);
}
.lightbox[data-open] { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: 0 24px 60px -20px oklch(20% 0.02 350 / 0.7);
}
.lightbox__caption {
  flex: 0 0 auto;
  margin: 0;
  max-width: 40em;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-paper);
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--color-accent-soft);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.lightbox__btn:hover { background: var(--color-accent-soft); transform: scale(1.08); }
.lightbox__btn[hidden] { display: none; }
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__prev  { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.08); }

@media (max-width: 640px) {
  .lightbox__prev { left: var(--space-xs); }
  .lightbox__next { right: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .lightbox__btn { transition: none; }
  .lightbox__btn:hover { transform: none; }
  .lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%); }
}