/* Naruto theme "village-gate" (docs/design-system.md "Naruto theme layer"): the Download page as the Hidden Leaf's
   village gate. A wooden lintel with a gate sign and two pillars frame the hero; each platform gets its own travel pass
   (parchment, a cloth header with the leaf plate, the download button and its facts); the Early Access card stays a
   separate, clearly labelled restricted pass below. The rest of the page: a parchment gate notice for the
   requirements, checkpoint cards with rods for the install steps, a wooden board for the first-launch note.
   Textures are CSS; the card art and logo are shown as they are. */
/* a wider metric fallback for the brush font (Shojumaru runs about 20 % wider than Arial Black), so brush titles take
   the same lines before and after the web font arrives (no layout shift); naruto.css's own fallback is narrower */
@font-face { font-family: "Shojumaru Fallback Wide"; src: local("Arial Black"), local("Arial Bold"), local("Arial"); size-adjust: 120%; ascent-override: 80%; descent-override: 22%; line-gap-override: 0%; }
body[data-theme="village-gate"] {
  --nk-brush: "Shojumaru", "Shojumaru Fallback Wide", var(--head);
  --theme-accent: #ff9330;
  --theme-accent-2: #ffd27a;
  --theme-chakra: #62b6ff;
  --theme-cloth: #182a50; --theme-cloth-hi: #24396a; --theme-cloth-lo: #101d3c;
  --theme-glow: rgba(255, 147, 48, 0.11); --theme-glow-2: rgba(98, 182, 255, 0.06);
  --theme-texture: var(--nk-leaf-url); --theme-texture-size: 180px; --theme-texture-opacity: 0.035;
  --theme-mark: var(--nk-leaf-url);
  --vg-pw: 20px;                      /* pillar width */
}
@media (max-width: 860px) { body[data-theme="village-gate"] { --vg-pw: 10px; } }

/* ---------- the gate: lintel with a sign, two pillars down the sides of the hero ---------- */
.vg-lintel-wrap { position: relative; z-index: 2; padding-top: var(--sp-5); }
.vg-lintel { position: relative; height: 42px; margin: 0 calc(-1 * (var(--vg-pw) + 6px)); border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 2px, transparent 2px 37px), linear-gradient(180deg, #7a4a24 0%, var(--nk-wood) 55%, var(--nk-wood-3) 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 220, 170, 0.25); }
.vg-lintel::before { content: ""; position: absolute; left: -12px; right: -12px; top: -12px; height: 14px; background: linear-gradient(180deg, #4a2c14, #2a170a);
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%); border-radius: 2px; }
.vg-sign { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 6px 14px; white-space: nowrap;
  background: var(--nk-parchment); color: var(--nk-ink); font: 400 0.875rem/1 var(--nk-brush); letter-spacing: 0.04em; border-radius: 2px;
  box-shadow: 0 0 0 3px var(--nk-wood-3), 0 6px 14px rgba(0, 0, 0, 0.5); }
.vg-sign svg { width: 22px; height: 22px; color: var(--nk-red); }
@media (max-width: 860px) { .vg-lintel-wrap { padding-top: var(--sp-4); } .vg-lintel { height: 36px; } .vg-sign { top: 4px; font-size: 0.8125rem; padding: 5px 12px; } }
[data-theme="village-gate"] .dl-hero .xhero-grid::before, [data-theme="village-gate"] .dl-hero .xhero-grid::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--vg-pw); pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0 2px, transparent 2px 23px), var(--nk-rod-v); box-shadow: 0 0 14px rgba(0, 0, 0, 0.6); }
[data-theme="village-gate"] .dl-hero .xhero-grid::before { left: calc(var(--gutter) - var(--vg-pw) - 4px); }
[data-theme="village-gate"] .dl-hero .xhero-grid::after { right: calc(var(--gutter) - var(--vg-pw) - 4px); }
[data-theme="village-gate"] .dl-hero .xhero-grid { background: radial-gradient(circle at 76% 42%, rgba(255, 190, 80, 0.10), transparent 58%); }
[data-theme="village-gate"] .dl-hero h1 { font-family: var(--nk-brush); font-weight: 400; letter-spacing: 0.01em; color: #fff3d6; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
[data-theme="village-gate"] .dl-hero h1 .grad-text { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--theme-accent); }
/* the site name on its own line, sized so each of the three lines fits in the brush font and in its fallback alike
   (the title never re-wraps when the font arrives) */
[data-theme="village-gate"] .dl-hero h1 .grad-text { display: block; }
@media (min-width: 861px) { [data-theme="village-gate"] .dl-hero h1 { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.12; } }
@media (max-width: 860px) { [data-theme="village-gate"] .dl-hero h1 { font-size: min(2.2rem, 6.6vw); line-height: 1.15; letter-spacing: 0; } }

/* ---------- travel passes: one per platform ---------- */
.vg-passes { display: grid; gap: 16px; margin: 0 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) and (max-width: 860px), (min-width: 1360px) { .vg-passes:has(> .vg-pass + .vg-pass) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vg-pass .btn-stack b { font-size: 1.05rem; white-space: nowrap; }
.vg-pass { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 0 16px 16px; border-radius: 3px; background: var(--nk-parchment); color: var(--nk-ink-2);
  box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.35), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(90, 53, 25, 0.22), inset 0 0 30px rgba(120, 70, 20, 0.22), 0 14px 26px -14px rgba(0, 0, 0, 0.85); }
/* the punched notches of a pass, left and right */
.vg-pass::before, .vg-pass::after { content: ""; position: absolute; top: 74px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.35); }
.vg-pass::before { left: -7px; }
.vg-pass::after { right: -7px; }
.vg-pass-h { display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0 -16px; padding: 10px 16px; border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 12px) 0 3px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 7px, transparent 7px 12px) 0 calc(100% - 3px) / 100% 1px no-repeat,
    linear-gradient(180deg, var(--theme-cloth-hi), var(--theme-cloth) 55%, var(--theme-cloth-lo)); }
.vg-pass-h .brand-plate { width: 40px; height: 32px; }
.vg-pass-h .brand-plate svg { width: 22px; height: 22px; }
.vg-pass-t { min-width: 0; }
.vg-pass-k { display: block; color: #a9bde6; font: 600 0.75rem/1.2 var(--head); letter-spacing: 0.14em; text-transform: uppercase; }
.vg-pass-h h2 { margin: 2px 0 0; color: #fff3d6; font: 400 1.15rem/1.15 var(--nk-brush); letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.vg-pass > .btn { width: 100%; justify-content: flex-start; }
[data-theme="village-gate"] .vg-pass .dl-facts { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px 18px; margin: 0; padding-top: 12px; border-top: 1px dashed rgba(90, 53, 25, 0.4); max-width: none; }
[data-theme="village-gate"] .vg-pass .dl-facts dt { color: var(--nk-ink-3); }
[data-theme="village-gate"] .vg-pass .dl-facts dd { color: var(--nk-ink); font-size: 1.1rem; white-space: normal; }
[data-theme="village-gate"] .vg-pass .sk { background: rgba(90, 53, 25, 0.16); }
[data-theme="village-gate"] .vg-pass.dl-ios { margin-top: 0; font-size: 0.9375rem; }
[data-theme="village-gate"] .vg-pass .dl-ios-line { color: var(--nk-ink-2); }
[data-theme="village-gate"] .vg-pass a:not(.btn) { color: var(--nk-red-ink); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="village-gate"] .vg-pass .dl-ios-gift { color: var(--nk-red-ink); }
[data-theme="village-gate"] .vg-pass .dl-ios-pre { border-color: rgba(168, 35, 27, 0.5); background: rgba(168, 35, 27, 0.07); color: var(--nk-ink-2); }
[data-theme="village-gate"] .vg-pass .dl-ios-pre b { color: var(--nk-red-ink); }
/* the pass for the phone the visitor is on gets a gold edge (community.js marks its button .is-hot) */
.vg-pass:has(.btn.is-hot) { box-shadow: inset 0 0 0 1px rgba(90, 53, 25, 0.35), inset 0 0 30px rgba(120, 70, 20, 0.22), 0 0 0 2px var(--gold), 0 14px 26px -14px rgba(0, 0, 0, 0.85); }
.vg-more { margin: 0 0 4px; }
@media (max-width: 860px) { .vg-more .btn { flex: 1 1 100%; } }

/* the key note: a paper slip pinned under the passes */
[data-theme="village-gate"] .key-note { border: 0; border-radius: 2px; background: var(--nk-parchment); color: var(--nk-ink-2);
  box-shadow: inset 4px 0 0 var(--nk-red), inset 0 0 22px rgba(120, 70, 20, 0.2), 0 8px 14px -8px rgba(0, 0, 0, 0.7); }
[data-theme="village-gate"] .key-note h3 { color: var(--nk-red-ink); }
[data-theme="village-gate"] .key-note p, [data-theme="village-gate"] .key-note li { color: var(--nk-ink-2); }
[data-theme="village-gate"] .key-note em { color: var(--nk-ink); }
[data-theme="village-gate"] .key-note .faint { color: var(--nk-ink-3); }

/* the Early Access card: a separate restricted pass in dark ink with red hazard edges and its own red label */
[data-theme="village-gate"] .ea-card { position: relative; margin-top: 22px; border: 0; border-radius: 3px; padding-top: 22px;
  background: linear-gradient(180deg, rgba(168, 35, 27, 0.16), transparent 60%), var(--surface);
  box-shadow: inset 0 0 0 1px rgba(224, 83, 60, 0.55), inset 0 0 0 6px transparent, inset 0 0 0 7px rgba(224, 83, 60, 0.25), 0 14px 26px -14px rgba(0, 0, 0, 0.85); }
[data-theme="village-gate"] .ea-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(135deg, var(--nk-red) 0 10px, #2b1d10 10px 20px); }
[data-theme="village-gate"] .ea-card > .eyebrow:first-child { background: var(--nk-red); color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.35); border-radius: 1px; }

/* ---------- the rest of the page ---------- */
/* requirements: a parchment gate notice */
[data-theme="village-gate"] .req-strip { border: 0; border-radius: 2px; background: var(--nk-parchment);
  box-shadow: inset 0 0 36px rgba(120, 70, 20, 0.25), inset 0 0 0 1px rgba(90, 53, 25, 0.35), 0 18px 34px -16px rgba(0, 0, 0, 0.85); }
[data-theme="village-gate"] .req-strip::before { content: ""; position: absolute; left: -9px; right: -9px; top: -7px; height: 14px; border-radius: 7px; background: var(--nk-rod); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }
[data-theme="village-gate"] .req + .req { border-color: rgba(90, 53, 25, 0.25); }
[data-theme="village-gate"] .req h3 { color: var(--nk-ink); }
[data-theme="village-gate"] .req p { color: var(--nk-ink-2); }
[data-theme="village-gate"] .req p.faint { color: var(--nk-ink-3); }
[data-theme="village-gate"] .req a { color: var(--nk-red-ink); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="village-gate"] .req-ico { background: rgba(90, 53, 25, 0.1); border-color: rgba(90, 53, 25, 0.35); color: var(--nk-red-ink); }
@media (max-width: 600px) { [data-theme="village-gate"] .req-strip::before { left: -6px; right: -6px; } }

/* install steps: checkpoint cards with a rod on top and the number in the brush font */
[data-theme="village-gate"] .isteps { gap: 22px 14px; padding-top: 7px; }
[data-theme="village-gate"] .istep { border-radius: 2px; }
[data-theme="village-gate"] .istep::before { content: ""; position: absolute; left: -6px; right: -6px; top: -7px; height: 12px; border-radius: 6px; background: var(--nk-rod); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45); }
[data-theme="village-gate"] .istep-n { font: 400 2.6rem/0.9 var(--nk-brush); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--theme-accent); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
[data-theme="village-gate"] .istep-hl { box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.55), var(--shadow-card); }
[data-theme="village-gate"] .istep:hover { transform: none; }
/* the first-launch callout: a wooden board */
[data-theme="village-gate"] .callout { border: 0; border-radius: 4px; background: var(--nk-wood-planks);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
[data-theme="village-gate"] .callout b { font: 400 1.2rem/1.2 var(--nk-brush); color: #fff3d6; letter-spacing: 0.01em; }
[data-theme="village-gate"] .callout p { color: #e8cfae; }
/* update / new phone cards: a stitched headband cloth along the top */
[data-theme="village-gate"] .keep-card { position: relative; overflow: hidden; padding-top: 30px; }
[data-theme="village-gate"] .keep-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 7px, transparent 7px 12px) 0 4px / 100% 1px no-repeat, linear-gradient(180deg, var(--theme-cloth-hi), var(--theme-cloth-lo)); }
/* the help card: wood */
[data-theme="village-gate"] .help-card { border: 0; background: var(--nk-wood-planks); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 4px #2a1708, inset 0 0 0 5px rgba(255, 210, 160, 0.12), var(--shadow-card); }
[data-theme="village-gate"] .help-card h3 { font: 400 1.2rem/1.2 var(--nk-brush); color: #fff3d6; }
[data-theme="village-gate"] .help-card p { color: #e8cfae; }
[data-theme="village-gate"] .acc summary { min-height: 52px; }
/* no layout shift: the art stays at the top of the gate when the copy column grows (live facts, the iPhone gift line) */
@media (min-width: 861px) { [data-theme="village-gate"] .dl-hero .xhero-grid { align-items: start; } }
/* the iPhone pass keeps the room for its build line and the time-limited gift line, so nothing moves when they show */
[data-theme="village-gate"] #dl-ios-btn .btn-stack small[hidden] { display: block; visibility: hidden; }
[data-theme="village-gate"] .vg-pass .dl-ios-gift[hidden] { display: block; visibility: hidden; }

/* iPhone update tips on the travel pass (2026-10-19) */
[data-theme="village-gate"] .vg-pass .dl-ios-tips { margin: 10px 0 0; padding: 0 0 0 18px; color: var(--nk-ink-2); font-size: 14px; line-height: 1.45; }
[data-theme="village-gate"] .vg-pass .dl-ios-tips li + li { margin-top: 4px; }
[data-theme="village-gate"] .vg-pass .dl-ios-tips b { color: var(--nk-ink, inherit); }