/* ==========================================================================
   Spin Samurai Casino — frame-cool.css
   Globals: TYPO-06 dense, SPACE-04 airy, CONT-02 (site 1120), GEO-03 pill,
   MOTION-03 dynamic, BP-10, desktop-first. Dark dojo + neon lime accents.
   ========================================================================== */

/* --- Design tokens ---------------------------------------------------- */
:root {
  /* colors (post ±2% shift) */
  --color-primary: #ff3e64;
  --color-accent: #d9fd0d;
  --color-accent-pressed: #c0df00;
  --color-bg: #000000;
  --color-bg-elevated: #161616;
  --color-gradient-light: #353535;
  --color-gradient-mid: #272727;
  --color-text: #ffffff;
  --color-text-muted: #bdbdbd;
  --color-rg-banner: #dc2626;

  /* fonts */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;

  /* typography — TYPO-06 dense (desktop) */
  --fs-h1: 36px; --fs-h2: 26px; --fs-h3: 20px; --fs-h4: 17px;
  --fs-h5: 14px; --fs-h6: 12px; --fs-body: 14px; --fs-small: 12px; --fs-micro: 11px;
  --lh-tight: 1.15; --lh-normal: 1.45; --lh-loose: 1.6;
  --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.06em;
  --fw-regular: 400; --fw-medium: 500; --fw-bold: 700;

  /* spacing — SPACE-04 airy */
  --space-2xs: 6px; --space-xs: 14px; --space-sm: 20px; --space-md: 32px;
  --space-lg: 48px; --space-xl: 72px; --space-2xl: 112px; --space-3xl: 160px;

  /* container — CONT-02 */
  --container-site: 1120px;
  --container-readable: 630px;
  --container-padding-desktop: 40px;
  --container-padding-tablet: 24px;
  --container-padding-mobile: 16px;

  /* geometry — GEO-03 pill-heavy */
  --radius-xs: 2px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --radius-pill: 9999px; --radius-circle: 50%;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  --border-thin: 1px; --border-medium: 2px; --border-thick: 3px;

  /* motion — MOTION-03 */
  --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-height-desktop: 100px;
  --header-height-mobile: 72px;
}

/* --- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  padding-top: var(--header-height-desktop);
}
body[data-current="/"] { padding-top: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure { margin: 0; }
ul { list-style: none; padding: 0; }

/* --- a11y ------------------------------------------------------------- */
.skip-link {
  position: absolute; left: 8px; top: -200px; z-index: 200;
  background: var(--color-accent); color: var(--color-bg);
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: var(--fw-bold);
}
.skip-link:not(:focus) { top: -200px !important; }
.skip-link:focus { top: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --- shared inner width ---------------------------------------------- */
.navel-inner, .nunut-inner, .syme-inner, .pezaf-inner, .gikytob-inner,
.vukyku-inner, .tedobyg-inner, .mede-inner, .limivo-inner, .mamete-inner,
.lifere-inner, .galuk-inner, .kuse-inner, .pelig-inner, .fydi-inner,
.nizugok-inner {
  width: 100%;
  max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop));
  margin-inline: auto;
  padding-inline: var(--container-padding-desktop);
}

/* --- Header (HEAD-04 sticky/fixed transparent over hero) -------------- */
.navel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-height-desktop);
  background: var(--color-bg);
  display: flex; align-items: center;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.navel--over-hero { background: transparent; }
.navel.is-scrolled {
  background: rgba(0,0,0,0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
.navel-inner { display: flex; align-items: center; gap: var(--space-md); }
.navel-logo, .navel-logo-img { flex-shrink: 0; }
.navel-logo { display: inline-flex; align-items: center; }
.navel-logo-img { height: 88px; width: auto; }
.navel-nav { margin-left: auto; }
.navel-nav-list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-sm); }
.navel-nav-item--more { position: relative; }
.navel-link {
  display: inline-flex; align-items: center;
  color: var(--color-text); font-family: var(--font-body);
  font-size: var(--fs-h5); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); padding: var(--space-2xs) 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.navel-link:hover, .navel-link[aria-current="page"] { color: var(--color-accent); }
.navel-more-toggle {
  background: transparent; border: 0; cursor: pointer;
  gap: var(--space-2xs); padding-inline: var(--space-2xs);
}
.navel-more-chevron { transition: transform var(--dur-fast) var(--ease-out); }
.navel-more-toggle[aria-expanded="true"] .navel-more-chevron { transform: rotate(180deg); }
.navel-more-menu {
  position: absolute; top: 100%; right: 0; margin: 0;
  padding: var(--space-xs) 0; min-width: 210px;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 110;
}
.navel-more-menu[hidden] { display: none; }
.navel-more-menu.is-open { display: block; }
.navel-more-link {
  display: block; padding: var(--space-xs) var(--space-md);
  color: var(--color-text); white-space: nowrap; font-size: var(--fs-small);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.navel-more-link:hover, .navel-more-link:focus { background: rgba(255,255,255,0.06); color: var(--color-accent); }
.navel-auth { flex-shrink: 0; }
.navel-auth-btn {
  display: inline-flex; align-items: center; white-space: nowrap; flex-shrink: 0;
  padding-inline: var(--space-lg); height: 42px;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide);
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-spring), color var(--dur-base);
}
.navel-auth-btn--login {
  background: transparent; border: 1px solid var(--color-text); color: var(--color-text);
}
.navel-auth-btn--login:hover { background: var(--color-text); color: var(--color-bg); }
.navel-toggle {
  display: none; margin-left: auto; flex-shrink: 0;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0;
}
.navel-toggle-bar { display: block; width: 26px; height: 2px; background: var(--color-text); margin-inline: auto; }
.navel-mobile { display: none; }
.navel-mobile.is-open { display: block; }

/* --- Breadcrumbs (BREAD-06 background bar) ---------------------------- */
.syme { width: 100%; background: var(--color-bg-elevated); }
.syme-inner { padding-block: var(--space-sm); }
.syme-list { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.syme-item { font-size: var(--fs-small); color: var(--color-text-muted); }
.syme-item a { color: var(--color-text-muted); transition: color var(--dur-fast); }
.syme-item a:hover { color: var(--color-accent); }
.syme-item[aria-current="page"] span { color: var(--color-text); }
.syme-sep { color: var(--color-text-muted); }

/* --- Page header (PHEAD-07 number + title) ---------------------------- */
.pezaf { padding-block: var(--space-lg); }
.pezaf-inner { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-lg); align-items: start; }
.pezaf-number {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 50px; line-height: 1; color: var(--color-accent);
}
.pezaf-title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--color-text);
}
.pezaf-description { margin-top: var(--space-sm); color: var(--color-text-muted); font-size: var(--fs-h5); line-height: var(--lh-normal); }

/* --- Hero (HERO-01 full-bleed cinematic) ------------------------------ */
.gikytob {
  position: relative; width: 100%;
  min-height: 100vh; display: flex; align-items: flex-end;
  overflow: hidden;
}
.gikytob-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; }
.gikytob-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.85)); }
.gikytob-inner { position: relative; z-index: 3; padding-block: var(--space-lg); }
.gikytob-title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(40px, 7vw, 68px); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); text-transform: uppercase;
  color: #fff; max-width: 760px;
}
.gikytob-subtitle { margin-top: var(--space-md); max-width: 580px; font-size: var(--fs-h5); line-height: var(--lh-normal); color: rgba(255,255,255,0.85); }
.gikytob-cta {
  display: inline-flex; align-items: center; margin-top: var(--space-lg);
  height: 56px; padding-inline: var(--space-xl);
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: var(--ls-wide);
  border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-spring), transform var(--dur-base), box-shadow var(--dur-base);
}
.gikytob-cta:hover { background: var(--color-accent-pressed); color: var(--color-bg); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* --- Prose (PROSE-04 drop-cap magazine) ------------------------------- */
.vukyku { padding-block: var(--space-lg); }
.vukyku-inner > h2 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--color-text); margin-top: var(--space-2xl); margin-bottom: var(--space-md);
}
.vukyku-inner > h2:first-child { margin-top: 0; }
.vukyku-inner > h3 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--color-text); margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.vukyku-inner > p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text); margin-bottom: var(--space-md); }
.vukyku-inner > h2 + p::first-letter {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 3.6em; float: left; line-height: 0.8;
  margin-right: 0.08em; margin-top: 0.05em; color: var(--color-accent);
}
.vukyku-inner a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.vukyku-inner a:hover { text-decoration-thickness: 2px; }
.vukyku-inner strong { color: var(--color-text); font-weight: var(--fw-bold); }

/* --- media figures ---------------------------------------------------- */
.media-figure { width: 100%; max-width: calc(var(--container-site) + 2 * var(--container-padding-desktop)); margin-inline: auto; padding-inline: var(--container-padding-desktop); padding-block: var(--space-lg); }
.media-figure-img { width: 100%; height: auto; border-radius: var(--radius-lg); }

/* --- Items grid (GRID-01 bordered cards) ------------------------------ */
.tedobyg { padding-block: var(--space-lg); }
.tedobyg-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--color-text); margin-bottom: var(--space-lg); }
.tedobyg-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.tedobyg-item {
  padding: var(--space-lg); background: rgba(255,62,100,0.05);
  border: 1px solid rgba(189,189,189,0.15); border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base);
}
.tedobyg-item:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.tedobyg-item-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--color-text); margin-bottom: var(--space-sm); }
.tedobyg-item-text { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); }

/* --- Data table (TABLE-05 compact dense) ------------------------------ */
.mede { padding-block: var(--space-lg); }
.mede-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--color-text); margin-bottom: var(--space-md); }
.mede-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-md); }
.mede-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.mede-table th {
  background: var(--color-bg-elevated); padding: var(--space-sm);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-weight: var(--fw-bold); color: var(--color-text); text-align: left;
}
.mede-table td { padding: var(--space-xs) var(--space-sm); font-size: var(--fs-small); color: var(--color-text-muted); border-bottom: 1px solid rgba(255,255,255,0.06); }
.mede-table tbody tr:last-child td { border-bottom: 0; }

/* --- Reviews (REV-10 minimal underlined list) ------------------------- */
.limivo { padding-block: var(--space-lg); }
.limivo-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--color-text); margin-bottom: var(--space-md); }
.limivo-item { padding-block: var(--space-md); border-bottom: 1px dotted rgba(255,255,255,0.2); }
.limivo-header { font-size: var(--fs-body); }
.limivo-author { font-weight: var(--fw-medium); color: var(--color-text); }
.limivo-rating { color: var(--color-text-muted); }
.limivo-text { margin-top: var(--space-2xs); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }

/* --- FAQ (FAQ-05 native details) -------------------------------------- */
.mamete { padding-block: var(--space-lg); }
.mamete-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); color: var(--color-text); margin-bottom: var(--space-md); }
.mamete-item { padding-block: var(--space-md); border-bottom: 1px solid rgba(255,255,255,0.1); }
.mamete-question {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
  font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--color-text);
  cursor: pointer; list-style: none;
}
.mamete-question::-webkit-details-marker { display: none; }
.mamete-question:hover { color: var(--color-accent); }
.mamete-question::after {
  content: ""; flex-shrink: 0; width: 10px; height: 10px;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out);
}
.mamete-item[open] .mamete-question::after { transform: rotate(225deg); }
.mamete-answer { padding-top: var(--space-sm); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }

/* --- CTA (CTA-10 magazine pull-quote) --------------------------------- */
.lifere { padding-block: var(--space-lg); text-align: center; }
.lifere-statement {
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-bold);
  font-size: clamp(28px, 4vw, 46px); line-height: var(--lh-tight);
  max-width: 900px; margin-inline: auto; color: var(--color-text); position: relative;
}
.lifere-statement::before { content: "\201C"; display: block; font-size: 2.2em; line-height: 0.5; color: var(--color-accent); margin-bottom: 0.1em; }
.lifere-sub { max-width: 580px; margin: var(--space-md) auto 0; font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }
.lifere-link {
  display: inline-block; margin-top: var(--space-lg);
  font-size: var(--fs-h5); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--dur-fast);
}
.lifere-link:hover { color: var(--color-accent-pressed); }

/* --- Author byline (BYLINE-05 horizontal band) ------------------------ */
.galuk { background: var(--color-primary); padding-block: var(--space-lg); }
.galuk-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); }
.galuk-author-info { display: flex; align-items: center; gap: var(--space-md); }
.galuk-portrait {
  width: 56px; height: 56px; border-radius: var(--radius-circle);
  object-fit: cover; object-position: center 20%;
  background: var(--color-primary); border: 2px solid var(--color-primary);
  box-sizing: content-box; flex-shrink: 0;
}
.galuk-name { font-weight: var(--fw-bold); }
.galuk-name a { color: #0a0a0a; }
.galuk-role { font-size: var(--fs-small); color: #1a1a1a; }
.galuk-cta {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: #0a0a0a; color: var(--color-accent);
  border-radius: var(--radius-pill); font-weight: var(--fw-bold);
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide);
  transition: background var(--dur-base), color var(--dur-base);
}
.galuk-cta:hover { background: #1a1a1a; color: var(--color-accent-pressed); }

/* --- Author card (AUTH-05) -------------------------------------------- */
.kuse { padding-block: var(--space-lg); }
.kuse-card { display: flex; flex-direction: row; gap: var(--space-lg); background: var(--color-bg-elevated); border-radius: var(--radius-lg); padding: var(--space-lg); }
.kuse-portrait {
  width: 128px; height: 128px; flex-shrink: 0; border-radius: var(--radius-circle);
  object-fit: cover; object-position: center 20%;
  background: var(--color-bg-elevated); border: 3px solid var(--color-bg-elevated);
  box-sizing: content-box;
}
.kuse-body { display: flex; flex-direction: column; gap: var(--space-2xs); }
.kuse-job-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-accent); }
.kuse-name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--color-text); }
.kuse-bio { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); margin-top: var(--space-2xs); }
.kuse-expertise { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.kuse-expertise-item {
  padding: 4px 12px; background: rgba(217,253,13,0.1);
  border: 1px solid rgba(217,253,13,0.3); border-radius: var(--radius-pill);
  font-size: var(--fs-micro); color: var(--color-accent);
}

/* --- Legal (LEGAL-07 magazine editorial) ------------------------------ */
.pelig { padding-block: var(--space-lg); }
.pelig-eyebrow { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); }
.pelig-intro { margin-top: var(--space-sm); font-family: var(--font-display); font-style: italic; font-size: var(--fs-h4); line-height: var(--lh-normal); color: var(--color-text); }
.pelig-updated { margin-top: var(--space-sm); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-muted); }
.pelig-section { margin-top: var(--space-xl); }
.pelig-heading { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--color-text); }
.pelig-divider { width: 80px; height: 2px; border: 0; background: var(--color-accent); margin: var(--space-md) 0; }
.pelig-section p { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.pelig-contacts { margin-top: var(--space-xl); background: var(--color-bg-elevated); padding: var(--space-lg); border-radius: var(--radius-md); }
.pelig-contacts-heading { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--color-text); margin-bottom: var(--space-sm); }
.pelig-contacts ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.pelig-contacts li { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text-muted); }
.pelig-contacts a { color: var(--color-accent); }
.pelig-disclaimer { margin-top: var(--space-xl); padding: var(--space-md); background: rgba(220,38,38,0.1); border-left: 3px solid var(--color-rg-banner); border-radius: var(--radius-xs); font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); }

/* --- Contact form (FORM-04) ------------------------------------------- */
.fydi { padding-block: var(--space-lg); }
.fydi-intro { max-width: 640px; font-size: var(--fs-h5); line-height: var(--lh-normal); color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.fydi-success { display: none; padding: var(--space-md); background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); border-radius: var(--radius-md); color: var(--color-text); margin-bottom: var(--space-md); }
.fydi-success.is-visible { display: block; }
.fydi-form { display: flex; flex-direction: column; gap: var(--space-md); max-width: 640px; }
.fydi-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.fydi-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text); }
.fydi-input, .fydi-textarea {
  padding: var(--space-sm) var(--space-md); font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--color-text); background: var(--color-bg-elevated);
  border: var(--border-thin) solid rgba(255,255,255,0.14); border-radius: var(--radius-md);
}
.fydi-input { height: 48px; }
.fydi-textarea { resize: vertical; min-height: 120px; }
.fydi-input:focus, .fydi-textarea:focus { outline: none; border-color: var(--color-accent); }
.fydi-submit {
  align-self: flex-start; height: 48px; padding-inline: var(--space-xl);
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--dur-base) var(--ease-spring);
}
.fydi-submit:hover { background: var(--color-accent-pressed); color: var(--color-bg); }

/* --- Error 404 (ERR-02 split editorial) ------------------------------- */
.nizugok { padding-block: var(--space-lg); }
.nizugok-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
.nizugok-left { display: flex; flex-direction: column; gap: var(--space-md); }
.nizugok-title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--color-text); }
.nizugok-text { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-muted); }
.nizugok-button {
  align-self: flex-start; height: 52px; display: inline-flex; align-items: center;
  padding-inline: var(--space-xl); background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-wide); border-radius: var(--radius-pill);
  transition: background var(--dur-base) var(--ease-spring);
}
.nizugok-button:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.nizugok-figure {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(120px, 22vw, 260px); line-height: var(--lh-tight); text-align: center;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* --- Footer (FOOT-09 wide single strip) ------------------------------- */
.nunut { width: 100%; background: var(--color-primary); padding-block: var(--space-md); }
.nunut-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.nunut-logo { flex-shrink: 0; display: inline-flex; }
.nunut-logo-img { height: 36px; width: auto; }
.nunut-main-nav .nunut-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.nunut-legal-nav .nunut-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.nunut-main-nav .nunut-nav-link { font-size: var(--fs-small); letter-spacing: var(--ls-wide); }
.nunut-legal-nav .nunut-nav-link { font-size: var(--fs-micro); letter-spacing: var(--ls-wide); }
.nunut-nav-link { color: #0a0a0a; transition: color var(--dur-fast); }
.nunut-nav-link:hover { color: #0a0a0a; text-decoration: underline; text-underline-offset: 3px; }
.nunut-copyright { font-size: var(--fs-micro); color: #1a1a1a; }

/* ==========================================================================
   Responsive — BP-10, desktop-first (max-width)
   ========================================================================== */
@media (max-width: 1135px) {
  .tedobyg-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 831px) {
  :root {
    --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 18px; --fs-h4: 16px;
    --fs-h5: 13px; --fs-h6: 11px; --fs-micro: 10px;
  }
  body { padding-top: var(--header-height-mobile); }
  .navel { height: var(--header-height-mobile); }
  .navel-logo-img { height: 60px; }
  .navel-nav, .navel-auth { display: none; }
  .navel-toggle { display: flex; }
  .navel-mobile {
    position: fixed; top: var(--header-height-mobile); left: 0; right: 0; bottom: 0; z-index: 49;
    background: var(--color-bg); padding: var(--space-lg) var(--container-padding-mobile);
    overflow-y: auto;
  }
  .navel-mobile.is-open { display: block; }
  .navel-mobile-list { display: flex; flex-direction: column; gap: var(--space-xs); }
  .navel-mobile-link { display: block; padding: var(--space-sm) 0; font-size: var(--fs-h4); font-weight: var(--fw-medium); color: var(--color-text); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .navel-mobile-link[aria-current="page"] { color: var(--color-accent); }

  .navel-inner, .nunut-inner, .syme-inner, .pezaf-inner, .gikytob-inner,
  .vukyku-inner, .tedobyg-inner, .mede-inner, .limivo-inner, .mamete-inner,
  .lifere-inner, .galuk-inner, .kuse-inner, .pelig-inner, .fydi-inner,
  .nizugok-inner, .media-figure { padding-inline: var(--container-padding-mobile); }

  .pezaf { padding-block: var(--space-lg); }
  .pezaf-inner { grid-template-columns: 1fr; gap: var(--space-sm); }
  .pezaf-number { font-size: 34px; }
  .tedobyg-list { grid-template-columns: 1fr; }
  .tedobyg, .mamete, .limivo, .kuse { padding-block: var(--space-lg); }
  .lifere { padding-block: var(--space-lg); }
  .nizugok { padding-block: var(--space-lg); }
  .nizugok-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .nizugok-figure { order: -1; }
  .galuk-inner { flex-direction: column; align-items: stretch; text-align: left; }
  .galuk-cta { align-self: flex-start; }
  .kuse-card { flex-direction: column; align-items: flex-start; }
  .gikytob { min-height: 88vh; }
  .gikytob-cta { width: 100%; justify-content: center; height: 52px; }
  .nunut-inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}
@media (max-width: 487px) {
  .navel-inner, .nunut-inner, .syme-inner, .pezaf-inner, .gikytob-inner,
  .vukyku-inner, .tedobyg-inner, .mede-inner, .limivo-inner, .mamete-inner,
  .lifere-inner, .galuk-inner, .kuse-inner, .pelig-inner, .fydi-inner,
  .nizugok-inner, .media-figure { padding-inline: var(--container-padding-mobile); }
}

/* --- Cookie banner (COOK-01 bottom floating pill) --------------------- */
.pafux {
  position: fixed; inset-block-end: var(--space-md); inset-inline: var(--space-md);
  max-width: 720px; margin-inline: auto; z-index: 90; display: none;
  align-items: center; flex-wrap: wrap; gap: var(--space-md);
  background: var(--color-bg-elevated); border: var(--border-thin) solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md); padding: var(--space-md); box-shadow: var(--shadow-md);
}
.pafux.is-visible { display: flex; }
.pafux-message { flex: 1 1 280px; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--color-text-muted); }
.pafux-actions { display: flex; gap: var(--space-sm); }
.pafux-button {
  height: 40px; padding-inline: var(--space-md); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide);
  cursor: pointer; border: 0;
  transition: background var(--dur-base), color var(--dur-base);
}
.pafux-button--accept { background: var(--color-accent); color: var(--color-bg); }
.pafux-button--accept:hover { background: var(--color-accent-pressed); color: var(--color-bg); }
.pafux-button--decline { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--color-text); }
.pafux-button--decline:hover { background: rgba(255,255,255,0.06); color: var(--color-text); }
@media (max-width: 720px) {
  .pafux { padding: 12px 14px !important; gap: 8px !important; font-size: 13px !important; line-height: 1.35 !important; }
  .pafux-actions { width: 100%; }
  .pafux-button { flex: 1 1 auto; height: 36px !important; padding: 8px 14px !important; font-size: 12px !important; }
}

/* --- structural / orphan-safe helpers --- */
.main { display: block; }
.navel-nav-item { display: inline-flex; align-items: center; }
.pezaf-head { display: block; }
.mamete-list { list-style: none; }
.galuk-text { display: flex; flex-direction: column; gap: 2px; }

[class*='-fig'] img, [class*='-media'] img, main figure img, article figure img { width: 100% !important; max-height: 58vh !important; object-fit: cover; object-position: center; }