/* ============================================================
   吉川健太 / メガネ社長®︎ - personal brand site.

   DESIGN NOTE. Committed single dark theme: the brief is "red and
   modern, like his Instagram", and the fight-world context earns
   the dark ground. Warm near-black (never pure #000), one red,
   no second accent anywhere. Display face is Dela Gothic One,
   a heavy Japanese grotesque that reads like event typography
   without imitating a fight poster; body is Zen Kaku Gothic New,
   the same body face the Puentech pipeline ships, so the two
   sites feel related without sharing a look. Numerals for the
   fight record run in IBM Plex Mono.

   Mobile first. Same header survival rules as the Puentech site:
   brand never wraps, language switch stays tappable, CTA shrinks
   before anything clips.
   ============================================================ */

:root {
  --ground: #131215;
  --panel: #1b191d;
  --panel-2: #232026;
  --ink: #f4f2f0;
  --muted: #a8a2a3;
  --line: #2e2b30;
  --red: #e63b2e;
  --red-deep: #b3271d;
  --red-ink: #ffffff;

  --font-display: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --font-body: "Zen Kaku Gothic New", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --nav-h: 64px;
  --wrap: 1120px;

  /* Aliases for the shared Kobe media layer (assets/media.css),
     which expects the pipeline's standard token names. */
  --bg: var(--ground);
  --bg-2: var(--panel);
  --text: var(--ink);
  --accent: var(--red);
  --accent-ink: var(--red-ink);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0425rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }

/* ---------- Header ---------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  min-height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(19, 18, 21, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { width: 100%; display: flex; align-items: center; gap: 0.75rem; }

.brand {
  font-family: var(--font-display);
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.brand .r { color: var(--red); }

.nav-links { display: none; }
@media (min-width: 960px) {
  .nav-links { display: flex; gap: 1.4rem; font-size: 0.92rem; }
  .nav-links a { color: var(--muted); text-decoration: none; }
  .nav-links a:hover { color: var(--ink); }
}

.langsw {
  margin-left: auto;
  display: flex; gap: 0.25rem;
  font-size: 0.82rem;
}
.langsw a {
  text-decoration: none; color: var(--muted);
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent; border-radius: 3px;
  white-space: nowrap;
}
.langsw a[aria-current] { color: var(--ink); border-color: var(--line); }
.langsw a:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.3rem;
  font-family: var(--font-body);
  font-size: 0.95rem; font-weight: 700;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: var(--red-ink); }
.btn-primary:hover { background: var(--red-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: none; }
.btn-ghost:hover { border-color: var(--muted); }
.nav .btn { padding: 0.45rem 0.85rem; font-size: 0.86rem; flex: 0 0 auto; }

/* ---------- Sections ---------- */

section { padding: clamp(3.4rem, 9vw, 6rem) 0; }
section + section { border-top: 1px solid var(--line); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }
h1 { font-size: clamp(2.1rem, 7.4vw, 3.9rem); line-height: 1.22; }
h2 { font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.35; margin-bottom: 1.4rem; }
h3 { font-size: 1.02rem; line-height: 1.5; }

.lead { font-size: clamp(1rem, 2.4vw, 1.14rem); color: var(--muted); max-width: 36em; }
.sec-head { max-width: 44em; margin-bottom: clamp(1.8rem, 5vw, 2.8rem); }
.sec-head p { color: var(--muted); margin-top: 0.9rem; }

/* ---------- Hero ----------
   Asymmetric split: statement left, portrait right. The one place
   the red is allowed to shout: the highlighted word in the H1. */

.hero { padding-top: clamp(2.6rem, 7vw, 4.5rem); }
.hero-grid { display: grid; gap: clamp(2.2rem, 5vw, 3.5rem); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.2fr 0.8fr; align-items: center; } }

.hero .who {
  font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.hero .who b { color: var(--ink); font-weight: 600; }
.hero h1 { margin-bottom: 1.3rem; }
.hero h1 .hit { color: var(--red); }
/* Latin headline runs longer than the Japanese one; smaller scale
   keeps it to its two authored lines on desktop. */
.hero .h1-en { font-size: clamp(1.7rem, 5.4vw, 2.9rem); }
.hero .lead { margin-bottom: 1.9rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.hero-ctas .btn { flex: 1 1 auto; min-width: 11rem; }
@media (min-width: 560px) { .hero-ctas .btn { flex: 0 0 auto; } }

/* Portrait slot. Real photograph pending: this frame is a labeled
   placeholder on purpose, never a stock image of somebody else. */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: 3px;
  background:
    linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 60%, #2a1614 100%);
  overflow: hidden;
}
.portrait::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 4px;
  background: var(--red);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait .ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem;
  color: var(--muted);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-align: center; padding: 1rem;
}
.portrait .ph .mark { font-family: var(--font-display); font-size: 2.2rem; color: var(--line); }

/* ---------- Record band ----------
   The fight record is the single most quotable fact, so it gets a
   full-width band of oversized mono numerals rather than a card. */

.record { background: var(--panel); }
.record-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .record-grid { grid-template-columns: repeat(3, 1fr); } }
.record-grid > div { background: var(--panel); padding: 1.7rem 1.4rem 1.5rem; }
.record-grid b {
  display: block;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.record-grid .win b { color: var(--red); }
.record-grid span { display: block; margin-top: 0.55rem; font-size: 0.9rem; color: var(--muted); }
.record .note { margin-top: 1.6rem; max-width: 44em; color: var(--muted); font-size: 0.97rem; }

/* ---------- Story ---------- */

.story { display: grid; gap: 1.6rem; max-width: 44em; }
.story p { color: var(--ink); }
.story p.q { color: var(--muted); }

.about-grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.15fr 0.85fr; } }
.about-grid figure { margin: 0; }
.about-grid figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; }

/* ---------- Content photographs ----------
   The staredown gets a cinematic full-width band inside the record
   section; the backstage shot sits under the feature panel. Both are
   fixed-ratio crops so nothing reflows when the image lands. */

.record-photo { margin: 0 0 1.7rem; }
.record-photo img {
  width: 100%; aspect-ratio: 21 / 10;
  object-fit: cover; object-position: 50% 32%;
  border: 1px solid var(--line); border-radius: 3px;
  display: block;
}

.media-photo { margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; }
.media-photo img {
  width: 100%; aspect-ratio: 2 / 1;
  object-fit: cover; object-position: 30% 30%;
  border: 1px solid var(--line); border-radius: 3px;
  display: block;
}

/* Story strip gutters: match this site's wrap padding so the strip
   bleeds exactly to the edge without creating page overflow. */
.wrap .m-stories {
  padding: 0.25rem clamp(1.1rem, 4vw, 2.5rem) 1rem;
  margin: 0 calc(-1 * clamp(1.1rem, 4vw, 2.5rem));
}

/* Instagram cards inherit the dark panel; give the strip a little
   room above the card grid. */
#instagram .m-ig { margin-top: clamp(1.2rem, 3vw, 2rem); }

/* media.css sizes the story ring and the figure frame but leaves
   both usable as inline spans, which discards their boxes (the ring
   stretched, the gallery collapsed to 12px). Block restores them. */
.m-story-ring { display: block; }
.m-figure { display: block; }

/* Fallback link media.js appends under a loaded embed, so the card
   never becomes a dead box if Instagram's iframe fails to grow. */
.m-ig-card .m-ig-open { margin: 0.4rem 0.9rem 0.9rem; }

/* ---------- Media appearances ----------
   Two rails, TV and YouTube, as plain divided lists. The one loud
   panel below them carries the レペゼンの虎 result. */

.media-rails { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); }
@media (min-width: 780px) { .media-rails { grid-template-columns: 1fr 1fr; } }
.rail h3 { margin-bottom: 0.9rem; color: var(--muted); font-size: 0.92rem; }
.rail ul { list-style: none; }
.rail li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
}
.rail li b { font-weight: 700; }
.rail li span { color: var(--muted); font-size: 0.86rem; white-space: nowrap; }

.feature-panel {
  margin-top: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--red-deep);
  border-left: 4px solid var(--red);
  border-radius: 3px;
  background: linear-gradient(120deg, rgba(230, 59, 46, 0.10), rgba(230, 59, 46, 0.02));
  padding: clamp(1.4rem, 4vw, 2.2rem);
  display: grid; gap: 0.6rem;
}
.feature-panel .amount {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  line-height: 1.2;
}
.feature-panel .amount em { font-style: normal; color: var(--red); }
.feature-panel p { color: var(--muted); max-width: 40em; font-size: 0.97rem; }

/* ---------- Business ---------- */

.biz-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
@media (min-width: 720px) { .biz-grid { grid-template-columns: repeat(2, 1fr); } }
.biz-grid article { background: var(--panel); padding: 1.5rem 1.4rem; }
.biz-grid h3 { margin-bottom: 0.5rem; }
.biz-grid p { font-size: 0.95rem; color: var(--muted); }

.biz-foot { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; align-items: baseline; }
.biz-foot .co { font-size: 0.95rem; color: var(--muted); }
.biz-foot a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Contact ---------- */

.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-list { list-style: none; display: grid; gap: 0.2rem; }
.contact-list li { padding: 0.9rem 0; border-top: 1px solid var(--line); }
.contact-list .label {
  display: block; font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.25rem;
}
.contact-list a {
  color: var(--red); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.contact-list .si { width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.16em; color: var(--red); flex: none; }

/* ---------- Footer ---------- */

footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; }
.note { margin-top: 1.3rem; font-size: 0.8rem; max-width: 62ch; }

/* ---------- Reveal motion ----------
   Scroll reveal via IntersectionObserver (assets/motion.js).
   Hidden state exists only once motion.js has stamped html.js,
   so content is never invisible without JS; collapses to static
   under reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
  html.js .rv.in { opacity: 1; transform: none; }
}

/* ---------- Compact phone header ---------- */

@media (max-width: 430px) {
  .nav .wrap { gap: 0.45rem; }
  .nav .btn { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
  .brand { font-size: 0.88rem; }
  .langsw a { padding: 0.3rem 0.4rem; }
}