html,body{margin:0;padding:0}/* ===== 00-tokens.css ===== */
:root {
  --fa-base: #000000;
  --fa-panel: rgba(0,0,0,.60);
  --fa-text: #e2e2e2;
  --fa-muted: #8fa3b5;
  --fa-gold: #ffd400;
  --fa-red: #ff2d2d;
  --fa-cyan: #00e5ff;
  --fa-green: #38ff5a;
  --fa-magenta: #ff4fd8;

  --fa-serif: "Times New Roman", Times, serif;
  --fa-sans: Arial, Helvetica, sans-serif;
  --fa-mono: ui-monospace, Menlo, monospace;

  --fa-max: 940px;
  --fa-bevel: #999;
}

/* ===== 01-base.css ===== */
/* Scoped to .fa-sect/.fa-panel deliberately, NOT to .fa-page: this stylesheet
   is pasted into a hosting platform alongside its own CSS and its own chrome
   (cart, menu, checkout), which we do not control and must never reach. Every
   section template we own wraps its output in .fa-sect, so scoping the reset
   and the reduced-motion override there reaches only our own content subtree.
   Without this reset, content-box sizing makes .fa-input and friends overflow
   their ridged panel (worst at 375px). */
.fa-sect *, .fa-sect *::before, .fa-sect *::after,
.fa-panel *, .fa-panel *::before, .fa-panel *::after { box-sizing: border-box; }

.fa-page {
  background: var(--fa-base) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><rect width='140' height='140' fill='%23000'/><g fill='%23eef2ff' opacity='.46'><circle cx='14' cy='20' r='1.45'/><circle cx='70' cy='8' r='1'/><circle cx='112' cy='30' r='1.65'/><circle cx='38' cy='50' r='1.2'/><circle cx='97' cy='64' r='.95'/><circle cx='19' cy='82' r='1.5'/><circle cx='131' cy='92' r='1.1'/><circle cx='58' cy='106' r='1.35'/><circle cx='83' cy='127' r='1.1'/><circle cx='33' cy='134' r='.95'/><circle cx='120' cy='115' r='.8'/><circle cx='7' cy='60' r='.8'/><circle cx='50' cy='75' r='.8'/><circle cx='104' cy='7' r='.8'/><circle cx='88' cy='44' r='.7'/><circle cx='64' cy='60' r='.6'/><circle cx='26' cy='108' r='.7'/><circle cx='136' cy='55' r='.7'/></g><g fill='%23aebfe8' opacity='.4'><circle cx='45' cy='27' r='1.15'/><circle cx='125' cy='72' r='1.05'/><circle cx='75' cy='90' r='.95'/><circle cx='9' cy='120' r='.95'/></g><g stroke='%23dde5ff' stroke-width='.8' opacity='.22'><path d='M14 15.5v9M9.5 20h9'/><path d='M112 25v10M107 30h10'/><path d='M19 77v10M14 82h10'/></g></svg>") repeat;
  color: var(--fa-text);
  font-family: var(--fa-serif);
  font-size: 14px;
  line-height: 1.5;
}

/* .fa-sect is the real content-column scope: every section template we own
   wraps its own output in it, so it carries the panel treatment without any
   knowledge of platform markup and without DOM surgery from JS. Consecutive
   sections stack with no vertical margin and no top/bottom border, so they
   read as one continuous panel; only the side ridge borders show, and they
   line up because every section shares the same centred max-width. .fa-panel
   is kept as an identical alias for the preview shell and any platform
   wrapper that supplies one directly.

   display:flow-root is load-bearing, not decoration. With no top padding and no
   top border, the first child's top margin collapses out through the wrapper
   and becomes space *between* sections — outside the bordered box — which
   breaks the side borders into visible segments. A flow root contains the
   margin so consecutive sections meet flush and the ridge runs unbroken down
   the page. */
.fa-panel, .fa-sect {
  display: flow-root;
  background: var(--fa-panel);
  max-width: var(--fa-max);
  margin: 0 auto;
  padding: 0 18px 16px;
  border-left: 2px ridge #2e2e2e;
  border-right: 2px ridge #2e2e2e;
}

/* Close the column at the foot of the page. Sections carry no top or bottom
   border so they read as one continuous panel, which leaves the side ridges
   ending in mid-air at the bottom; the last section supplies the closing edge.

   :last-of-type rather than :last-child — the page's final child is the script
   tag, so :last-child would never match. */
.fa-sect--end,
.fa-page > .fa-sect:last-of-type,
.fa-page > .fa-panel:last-of-type {
  border-bottom: 2px ridge #2e2e2e;
  padding-bottom: 20px;
}

@media (max-width: 640px) {
  .fa-panel, .fa-sect { margin: 0 6px; padding: 0 9px 14px; }
}

.fa-page a { color: var(--fa-cyan); }
/* Buttons are anchors, and `.fa-page a` (0,1,1) outranks `.fa-btn` (0,1,0), so
   the generic link colour won and painted cyan text on a light grey bevel —
   close to unreadable. Restated here at equal specificity to win on order. */
.fa-page a.fa-btn, .fa-page a.fa-tab { color: #000; }
.fa-page img { max-width: 100%; height: auto; }

/* Visitors who have asked their OS for less movement get every effect in a
   static state — visible, but not animating. Scoped to our own content
   subtree (.fa-sect/.fa-panel), not .fa-page, so it cannot reach platform
   chrome we do not control. */
@media (prefers-reduced-motion: reduce) {
  .fa-sect *, .fa-sect *::before, .fa-sect *::after,
  .fa-panel *, .fa-panel *::before, .fa-panel *::after {
    animation: none !important;
    transition: none !important;
  }
  .fa-marquee__text { transform: none !important; padding-left: 8px; }
  .fa-sparkle { opacity: .9 !important; transform: scale(.85) rotate(20deg) !important; }
}

/* ===== 02-chrome.css ===== */
/* The sparkle definitions. An <svg> is display:inline by default, so even at
   width=0 height=0 it generates a line box — which opened a strip inside the
   panel above the title bar and left the side borders running past it.

   Taken out of flow rather than display:none, which can break <use> references
   into a hidden root in some browsers. */
.fa-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Rainbow divider */
.fa-rule {
  height: 5px; margin: 10px 0; border: 0;
  background: linear-gradient(90deg, var(--fa-red), var(--fa-gold), #fff, var(--fa-cyan), var(--fa-red));
}

/* Marquee — CSS animation, not the deprecated element */
.fa-marquee {
  overflow: hidden; background: #0a0a12;
  border: 3px ridge var(--fa-gold); margin: 9px 0;
}
.fa-marquee__text {
  display: inline-block; white-space: nowrap; padding: 6px 0;
  color: var(--fa-green); font-weight: bold; font-size: 13px;
  animation: fa-marquee 19s linear infinite;
}
@keyframes fa-marquee { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

/* Bevel button */
.fa-btn {
  display: inline-block; border: 3px outset var(--fa-bevel); background: #c9c9c9;
  color: #000; font: bold 11px var(--fa-sans); padding: 6px 13px;
  text-decoration: none; cursor: pointer;
}
.fa-btn:active { border-style: inset; }
.fa-btn--block { display: block; padding: 7px 4px; text-align: center; }

/* Section heading */
.fa-secthead {
  text-align: center; margin: 16px 0 10px; color: var(--fa-gold);
  font: bold 16px var(--fa-sans); text-shadow: 2px 2px 0 #7a0000;
}

/* Footer badges */
.fa-badge {
  display: inline-block; border: 2px outset #888; background: #1a1a1a;
  padding: 3px 8px; margin: 3px; font: 9px var(--fa-sans);
  color: #ddd; letter-spacing: .05em;
}

/* The XML button. Orange because that is the colour it was — the 80x15 badge
   was near-universal on weblogs of this period, and it is the one piece of
   furniture here that still does exactly what it always did. */
.fa-rss {
  background: #f60;
  border-color: #ffa76b #a83f00 #a83f00 #ffa76b;
  color: #fff;
  font-weight: bold;
  letter-spacing: .12em;
  text-decoration: none;
}

.fa-rss:hover, .fa-rss:focus { border-style: inset; background: #ff8534; color: #fff; }

/* Cosmetic counter */
.fa-counter {
  font-family: var(--fa-mono); background: #000; border: 2px inset #444;
  color: var(--fa-green); padding: 2px 7px; letter-spacing: .2em;
}

/* Inventory status stamps */
.fa-stamp {
  display: inline-block; font: bold 10px var(--fa-sans); letter-spacing: .1em;
  padding: 3px 8px; border: 2px outset; text-transform: uppercase;
}
.fa-stamp--us   { background: #0b3d17; color: var(--fa-green);   border-color: #2c8a45; }
.fa-stamp--jp   { background: #3d3400; color: var(--fa-gold);    border-color: #8a7a2c; }
.fa-stamp--sold { background: #3d0b0b; color: #ff5a5a;           border-color: #8a2c2c; }

/* Blinking NEW badge */
.fa-new {
  position: absolute; top: -10px; right: -10px; background: var(--fa-red); color: #fff;
  font: bold 9px var(--fa-sans); padding: 2px 6px; border: 2px outset #ff8a8a;
  animation: fa-blink 1.1s steps(2) infinite;
}
@keyframes fa-blink { 50% { opacity: .15; } }

/* Footer */
.fa-footer { text-align: center; font-size: 13px; color: #9fb3c4; padding: 13px 2px 0; line-height: 1.5; }
.fa-footer p { margin: 6px 0; }
.fa-footer__wap { margin-top: 9px; font-size: 12px; color: #6f8090; }
.fa-footer__wap a { color: #8fa3b5; }

/* Window title bar -------------------------------------------------------- */

/* The negative margin cancels .fa-sect's horizontal padding AND its 2px ridge
   border (18+2 here, 9+2 at the narrow breakpoint), so the bar covers the
   border rather than sitting inside it. That is what makes the side ridges
   appear to begin BELOW the title bar instead of running up alongside it —
   a window's frame starts under its title bar, not beside it. Both values
   must track .fa-sect's padding if that ever changes. */

.fa-titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 5px;
  margin: 0 -20px;
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: #fff;
  font: bold 12px var(--fa-sans);
  border-top: 2px solid #dfdfdf;
  border-left: 2px solid #dfdfdf;
  border-right: 2px solid #808080;
}

/* img.fa-titlebar__ic, not .fa-titlebar__ic: `.fa-page img { height: auto }` is
   (0,1,1) and outranks a bare class, so the height below was ignored and the
   sprite rendered at its natural 60px — four times the height of the window
   buttons beside it. */
img.fa-titlebar__ic {
  display: block;
  height: 14px;
  width: auto;
  flex: 0 0 auto;
  /* A 114x60 sprite scaled to 14px goes to mush under smooth interpolation;
     nearest-neighbour keeps the pixels it has. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@media (max-width: 640px) {
  img.fa-titlebar__ic { height: 12px; }
}

.fa-titlebar__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .02em;
}

.fa-titlebar__btns { display: flex; gap: 2px; flex: 0 0 auto; }

.fa-titlebar__btn {
  width: 17px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0c0c0;
  color: #000;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  font: bold 9px var(--fa-sans);
  line-height: 1;
}

/* The title bar spans the full width of the panel, so it cancels the panel's
   horizontal padding — and must track it at the narrow breakpoint too. */
@media (max-width: 640px) {
  .fa-titlebar { margin: 0 -11px; font-size: 11px; }
}

/* ===== 03-header.css ===== */
.fa-header__row { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 18px 0 2px; }
.fa-header__mark { flex: 0 1 auto; min-width: 0; display: block; }
.fa-header__mark img { width: 100%; max-width: 440px; height: auto; display: block; }

.fa-sparkles { flex: 0 0 auto; position: relative; width: 70px; height: 70px; }
.fa-sparkles--flip { transform: scaleX(-1); }
.fa-sparkle { position: absolute; }
.fa-sparkle svg { display: block; width: 100%; height: 100%; }
.fa-sparkle--1 { inset: 6px;  animation: fa-twinkle 2.1s ease-in-out infinite; }
.fa-sparkle--2 { width: 25px; height: 25px; left: -2px; top: 42px; animation: fa-twinkle 2.1s ease-in-out infinite .7s; }
.fa-sparkle--3 { width: 19px; height: 19px; left: 47px; top: 2px;  animation: fa-twinkle 2.1s ease-in-out infinite 1.4s; }
@keyframes fa-twinkle {
  0%, 100% { transform: scale(.25) rotate(0deg); opacity: .15; }
  50%      { transform: scale(1) rotate(45deg); opacity: 1; }
}

.fa-creed { text-align: center; margin: 6px 0 0; }
.fa-creed__big {
  font: bold 29px var(--fa-sans); letter-spacing: .17em;
  background: linear-gradient(90deg, var(--fa-red), var(--fa-gold), var(--fa-cyan), var(--fa-red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fa-creed__sub { text-align: center; font-size: 14px; font-style: italic; color: #a8bccd; margin: 6px 0 0; line-height: 1.5; }

.fa-nav { text-align: center; padding: 8px 4px; }
.fa-nav__list { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.9; }
.fa-nav__list li { display: inline; }
.fa-nav__list li + li::before { content: "•"; color: var(--fa-gold); padding: 0 6px; }
.fa-nav__list a { color: var(--fa-cyan); text-decoration: underline; }

@media (max-width: 640px) {
  .fa-header__row { gap: 5px; padding-top: 13px; }
  .fa-sparkles { width: 38px; height: 38px; }
  .fa-sparkle--2 { width: 14px; height: 14px; top: 23px; }
  .fa-sparkle--3 { width: 11px; height: 11px; left: 26px; }
  .fa-creed__big { font-size: 19px; letter-spacing: .1em; }
}

/* Cart, top-right. A cart is not a nav destination — it is a running total of
   what you are carrying, and the corner is where people look for it. */
.fa-header { position: relative; }

.fa-cartlink {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 3px outset var(--fa-bevel);
  background: #c9c9c9;
  font: bold 11px var(--fa-sans);
  text-decoration: none;
}

.fa-page a.fa-cartlink { color: #000; }

.fa-cartlink:active { border-style: inset; }

.fa-cartlink__ic { font-size: 13px; line-height: 1; }

/* On a narrow screen the corner is tight. Drop the word, shed the padding and
   sit flush against the panel edge — inset even a few pixels it still reached
   into the sparkle animation beside the logo.

   right/top are negative to cancel the panel's own 9px padding at this width,
   putting the control hard into the corner rather than floating inside it. */
@media (max-width: 560px) {
  .fa-cartlink {
    top: 0;
    right: -7px;
    gap: 3px;
    padding: 1px 3px;
    border-width: 2px;
  }

  .fa-cartlink__lbl { display: none; }

  .fa-cartlink__ic { font-size: 11px; }

  .fa-cartcount { min-width: 13px; padding: 0 2px; font-size: 9px; border-width: 1px; }
}

/* ===== 04-blocks.css ===== */
.fa-spec { display: grid; grid-template-columns: auto 1fr; gap: 1px 12px; margin: 5px 0 0; font-size: 13px; }
.fa-spec dt { color: var(--fa-muted); }
.fa-spec dd { margin: 0; color: #dcdcdc; }

.fa-carrow { display: flex; gap: 11px; align-items: center; border: 2px ridge #555;
  background: rgba(0,0,0,.5); padding: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fa-carrow__thumb { flex: 0 0 auto; width: 92px; border: 3px outset var(--fa-gold); display: block; }
.fa-carrow__thumb img { display: block; width: 100%; height: 62px; object-fit: cover; }
.fa-carrow__body { flex: 1 1 200px; min-width: 0; }
.fa-carrow__name { color: #fff; font-size: 15px; font-weight: bold; text-decoration: none; }
.fa-carrow__meta { color: var(--fa-muted); font-size: 12px; }
.fa-carrow__price { margin-left: auto; color: var(--fa-green); font-weight: bold; font-size: 16px; white-space: nowrap; }
.fa-avail { color: var(--fa-green); font-weight: bold; }
.fa-injapan { color: var(--fa-gold); font-weight: bold; }
.fa-soldtext { color: #ff5a5a; font-weight: bold; }
@media (max-width: 640px) { .fa-carrow__price { margin-left: 0; } }

.fa-buildtag { display: inline-block; margin-top: 3px; border: 2px outset var(--fa-magenta);
  background: rgba(255,79,216,.12); color: var(--fa-magenta); font: bold 9px var(--fa-sans);
  letter-spacing: .08em; padding: 2px 6px; text-decoration: none; text-transform: uppercase; }

.fa-carcard { border: 3px ridge #555; background: rgba(0,0,0,.55); padding: 9px;
  display: flex; gap: 11px; position: relative; margin-bottom: 11px; }
@media (max-width: 700px) { .fa-carcard { flex-direction: column; } }
/* align-self is load-bearing. .fa-carcard is a flex row, and flex items stretch
   to the tallest sibling by default — so the thumbnail's gold border grew to
   match the text column beside it while the image inside stayed 120px, leaving
   dead black space below the photograph. `flex: 0 0 auto` pins the width only;
   it does not stop cross-axis stretching. */
.fa-carcard__thumb { position: relative; border: 4px outset var(--fa-gold); width: 180px;
  flex: 0 0 auto; align-self: flex-start; display: block; }
@media (max-width: 700px) { .fa-carcard__thumb { width: 100%; } }
.fa-carcard__thumb img { display: block; width: 100%; height: 120px; object-fit: cover; }
.fa-photocount { position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.82);
  color: var(--fa-gold); font: bold 9px var(--fa-sans); padding: 2px 6px; }
.fa-mag { position: absolute; right: 0; top: 0; background: rgba(0,0,0,.8);
  color: var(--fa-cyan); font: bold 12px var(--fa-sans); padding: 1px 6px; }
.fa-carcard__body { flex: 1 1 auto; min-width: 0; }
.fa-carcard__name { margin: 4px 0 0; font-size: 18px; }
.fa-carcard__name a { color: #fff; text-decoration: none; }
.fa-carcard__price { color: var(--fa-green); font-weight: bold; font-size: 17px; margin: 6px 0 0; }
.fa-plus { font-size: 12px; color: var(--fa-muted); font-weight: normal; }

.fa-carcard--sold .fa-carcard__thumb img { filter: grayscale(1) brightness(.5); }
.fa-carcard--sold .fa-carcard__name, .fa-carcard--sold .fa-carcard__name a { color: #8a8a8a; }
.fa-carcard--sold .fa-carcard__price { color: #7a7a7a; text-decoration: line-through; }
.fa-soldstamp { position: absolute; right: 14px; top: 38px; transform: rotate(-14deg);
  border: 4px solid #ff3b3b; color: #ff3b3b; font: bold 26px var(--fa-sans);
  letter-spacing: .12em; padding: 3px 12px; opacity: .85; pointer-events: none; }
@media (max-width: 640px) { .fa-soldstamp { top: auto; bottom: 16px; right: 10px; font-size: 20px; } }

/* Japan shipping progress strip — spec §6.2. Reproduces the treatment from
   docs/superpowers/mockups/06-cars-inventory.html (.shipbar) and the
   BUILD WINDOW OPEN step from 08-source-and-build.html. */
.fa-shipbar { margin-top: 8px; border: 2px ridge #666; background: rgba(0,0,0,.5); padding: 6px 8px; font-size: 12px; }
.fa-shipbar__t { color: var(--fa-gold); font: bold 10px var(--fa-sans); letter-spacing: .12em; }
.fa-shipbar__steps { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.fa-shipbar__step { font-size: 11px; color: #5f6d79; }
.fa-shipbar__step.is-done { color: var(--fa-green); }
.fa-shipbar__step.is-now { color: var(--fa-gold); font-weight: bold; }
.fa-shipbar__ar { color: #3f4a54; font-size: 11px; }
.fa-shipbar__eta { margin-top: 4px; color: #a8bccd; }
.fa-shipbar__eta b { color: var(--fa-cyan); }

.fa-window { margin-top: 8px; border: 3px outset var(--fa-magenta);
  background: rgba(255,79,216,.09); padding: 8px 10px; font-size: 13px; }
.fa-window b { color: var(--fa-magenta); }
.fa-window .fa-btn { margin-top: 6px; }
.fa-window--calm { border-color: #3f6b52; background: rgba(56,255,90,.07); }
.fa-window--calm b { color: var(--fa-green); }

.fa-center { text-align: center; margin: 9px 0 0; }

.fa-mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 700px) { .fa-mgrid { grid-template-columns: repeat(2, 1fr); } }
.fa-mcell { border: 5px outset var(--fa-gold); background: #0d0d0d; padding: 8px;
  text-align: center; position: relative; }
/* contain, not cover: product art is often a wide graphic — the logo is nearly
   5:1 — and cropping it to a squat box cut the middle out of it. Letterboxing
   against the cell background is the lesser evil, and never lies about the
   product. */
.fa-mcell img { display: block; width: 100%; height: 104px; object-fit: contain; margin-bottom: 7px; }
.fa-mcell__name { display: block; color: var(--fa-magenta); font-size: 14px; }
.fa-mcell__price { color: var(--fa-green); font-style: normal; font-size: 14px; }

.fa-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .fa-doors { grid-template-columns: 1fr; } }
.fa-door { border: 5px outset var(--fa-gold); background: rgba(10,10,10,.85);
  padding: 9px 11px 10px; text-align: center; text-decoration: none; display: block; color: inherit; }
.fa-door__top { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* All three doors carry period animated GIFs rather than emoji. Qualified with
   img because `.fa-page img { height: auto }` is (0,1,1) and outranks a bare
   class — the same trap the title bar icon hit. 19px matches the emoji these
   replaced, so the doors keep a common baseline; width follows each file's
   aspect ratio. Nearest-neighbour keeps the pixels they have at this size. */
img.fa-door__ic {
  display: block;
  height: 19px;
  width: auto;
  flex: 0 0 auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.fa-door b { color: #fff; font: bold 14px var(--fa-sans); letter-spacing: .09em; }
.fa-door p { margin: 5px 0 0; font-size: 12.5px; color: #a8bccd; line-height: 1.35; }
.fa-door .fa-btn { margin-top: 7px; }

.fa-slot { border: 5px ridge var(--fa-gold); background: rgba(0,0,0,.6);
  padding: 12px; display: flex; gap: 14px; position: relative; }
@media (max-width: 700px) { .fa-slot { flex-direction: column; } }
.fa-slot__flag { position: absolute; top: -12px; left: 14px; background: var(--fa-red);
  color: #fff; font: bold 10px var(--fa-sans); letter-spacing: .13em; padding: 3px 10px;
  border: 2px outset #ff8a8a; }
/* No border of its own: .fa-slot already draws a gold frame around the whole
   card, and a second one around the photograph inside it read as two nested
   boxes. A store cell frames the cell and leaves its image bare; this matches.
   `position` stays — the photo count and magnifier are placed against it. */
.fa-slot__ph { flex: 0 0 auto; width: 300px; position: relative; display: block; }
@media (max-width: 700px) { .fa-slot__ph { width: 100%; } }
.fa-slot__ph img { display: block; width: 100%; height: 180px; object-fit: cover; }
.fa-slot__title { color: #fff; font-size: 23px; margin: 7px 0 3px; line-height: 1.15; }
.fa-slot__price { color: var(--fa-green); font-weight: bold; font-size: 21px; margin: 7px 0 0; }

/* [hidden] must beat author display declarations — .fa-carcard is display:flex,
   which silently defeats the UA [hidden] rule and makes tab filtering inert. */
[data-status][hidden], .fa-carcard[hidden] { display: none !important; }

.fa-tabs { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.fa-tab { border: 4px outset var(--fa-bevel); background: #c9c9c9; color: #000;
  font: bold 12px var(--fa-sans); padding: 7px 13px; cursor: pointer; }
.fa-tab__ct { color: #444; font-weight: normal; margin-left: 5px; }
.fa-tab.is-on { border-style: inset; background: var(--fa-gold); }
.fa-tab.is-on .fa-tab__ct { color: #5a4a00; }
.fa-legend { text-align: center; font-size: 12px; color: var(--fa-muted); padding: 4px 0 8px; }
.fa-sub { font-style: italic; color: #a8bccd; font-size: 13px; }

.fa-steps { margin: 8px 0; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.fa-steps li { margin-bottom: 7px; }
.fa-steps b { color: #fff; }

.fa-where { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .fa-where { grid-template-columns: 1fr; } }
.fa-wcol { border: 4px ridge #666; background: rgba(0,0,0,.5); padding: 11px; }
.fa-wcol--jp { border-color: #8a7a2c; }
.fa-wcol h3 { margin: 0 0 5px; font: bold 14px var(--fa-sans); letter-spacing: .1em; }
.fa-wcol--jp h3 { color: var(--fa-gold); }
.fa-wcol--us h3 { color: var(--fa-green); }
.fa-wcol__note { font-size: 12px; color: var(--fa-muted); margin: 0 0 7px; }
.fa-wcol ul { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.6; }
.fa-wcol__best { margin: 8px 0 0; border-top: 1px solid #333; padding-top: 6px;
  font-size: 12px; color: #a8bccd; }
.fa-wcol__best b { color: #fff; }


.fa-wap { font-family: var(--fa-sans); font-size: 13px; padding: 10px 6px; }
.fa-wap__tag { text-align: center; font: bold 10px var(--fa-sans); color: var(--fa-gold);
  letter-spacing: .24em; margin: 0 0 8px; }
.fa-wap__menu { list-style: none; margin: 8px 0; padding: 0;
  border: 2px ridge #666; background: rgba(0,0,0,.55); counter-reset: wap; }
.fa-wap__menu li { border-bottom: 1px solid #222; counter-increment: wap; }
.fa-wap__menu li:last-child { border-bottom: 0; }
.fa-wap__menu a { display: block; padding: 11px 10px; color: var(--fa-cyan); text-decoration: none; }
.fa-wap__menu a::before { content: counter(wap) " "; color: var(--fa-gold); font-weight: bold; margin-right: 7px; }
.fa-wap__note { text-align: center; font-size: 11px; color: #7f93a4; }

.fa-prose { font-size: 14px; line-height: 1.7; max-width: 62ch; margin: 0 auto; }
.fa-prose p { margin: 0 0 12px; }
.fa-prose ul { padding-left: 20px; }
.fa-prose li { margin-bottom: 7px; }
.fa-prose b { color: #fff; }

/* Native Fourthwall product pages: pull them toward the palette. .fa-fw is applied
   to platform-rendered pages only. It is deliberately NOT .fa-page — that class is
   the site-wide body wrapper on every page we render, and a bare element selector
   under it would bleed onto our own headings and buttons. Both this class hook and
   the inner selector names (guesses at platform markup) are confirmed against the
   live site during deployment (Task 16 Step 9) and adjusted there if they differ. */
.fa-fw .product-title { color: #fff; font-family: var(--fa-serif); }
.fa-fw .product-price,
.fa-fw .price { color: var(--fa-green); font-weight: bold; }
.fa-fw .add-to-cart {
  border: 3px outset var(--fa-bevel) !important; background: #c9c9c9 !important;
  color: #000 !important; font: bold 12px var(--fa-sans) !important; border-radius: 0 !important;
}

/* Blog index ------------------------------------------------------------- */

.fa-bloglist { list-style: none; margin: 0; padding: 0; }

.fa-blogitem {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed #333;
}

.fa-blogitem:last-child { border-bottom: 0; }

.fa-blogitem__thumb { flex: 0 0 140px; }

.fa-blogitem__thumb img {
  width: 100%;
  height: auto;
  border: 2px ridge #2e2e2e;
}

.fa-blogitem__body { flex: 1 1 auto; min-width: 0; }

.fa-blogitem__date,
.fa-post__date {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fa-blogitem__title { margin: 4px 0 6px; font-size: 17px; }

.fa-blogitem__sum { margin: 0 0 8px; color: #c8c8c8; }

.fa-post__body img { max-width: 100%; height: auto; }

.fa-post__body h2 { margin-top: 22px; }

.fa-post__body blockquote {
  margin: 14px 0;
  padding: 2px 14px;
  border-left: 3px solid #444;
  color: #bdbdbd;
}

/* A post printed in full on the index. Unlike .fa-blogitem it is a single
   column: the body is the point, so there is no thumbnail beside it competing
   for the width. */
.fa-blogentry {
  padding: 18px 0 4px;
  border-bottom: 1px dashed #333;
}

.fa-blogentry:last-of-type { border-bottom: 0; }

.fa-blogentry__hero { display: block; margin: 10px 0 4px; }

.fa-blogentry__hero img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border: 2px ridge #2e2e2e;
}

/* The feed offer above the posts. Quiet by design: it is a standing offer, not
   a call to action competing with the writing under it. */
.fa-feedrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}

.fa-feedrow__note { font-size: 11px; color: #9a9a9a; }

/* Tags on a post. Small, quiet, and clearly clickable — they are navigation
   away from what you are reading, not part of the post. */
.fa-tagrow { margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.fa-tagchip {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #d8d8d8;
  text-decoration: none;
  border: 2px outset var(--fa-bevel);
  background: #2a2a2a;
}

.fa-tagchip:hover, .fa-tagchip:focus { border-style: inset; background: var(--fa-gold); color: #000; }

/* Pager. Centred row: newer on the left, older on the right, where they sit
   on every weblog of the period. */
.fa-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 4px;
}

.fa-pager__at { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9a9a9a; }

/* Stack the thumbnail above the text on narrow screens rather than squeezing
   it into a column too small to read. */
@media (max-width: 520px) {
  .fa-blogitem { flex-direction: column; }
  .fa-blogitem__thumb { flex: 1 1 auto; max-width: 220px; }
}

/* Car detail page -------------------------------------------------------- */

.fa-crumb { margin: 0 0 8px; font-size: 12px; }

/* The hero is sized by its own photograph: height:auto rather than a fixed
   frame, so a single image fits exactly instead of sitting in a tall letterbox
   of dead black. */
.fa-cardetail__hero {
  position: relative;
  display: block;
  max-width: 640px;
  margin: 6px auto 0;
  border: 4px outset var(--fa-gold);
}

.fa-cardetail__hero img { display: block; width: 100%; height: auto; }

/* Remaining photos as a thumbnail row. These are fixed-height and cropped on
   purpose: a ragged row of mixed aspect ratios reads as broken, whereas the
   hero above is the one that must show the whole car. */
.fa-cardetail__strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  max-width: 640px;
  margin: 6px auto 0;
}

.fa-cardetail__strip img {
  display: block;
  width: 100%;
  height: 72px;
  object-fit: cover;
  border: 2px ridge #2e2e2e;
}

.fa-cardetail .fa-spec { margin-top: 14px; }

.fa-cardetail__prose { color: #c8c8c8; }

.fa-nophoto {
  margin: 10px auto;
  padding: 20px;
  max-width: 640px;
  text-align: center;
  color: var(--fa-muted);
  border: 2px dashed #333;
  background: rgba(0,0,0,.35);
}

/* The sold tab is an anchor so it works without JavaScript and so the build's
   link rewriting can reach it; these restore the button's box model to it. */
.fa-tab--link { display: inline-block; text-decoration: none; }

/* Period animated GIF on the About page. Floated so the prose wraps around it
   on wide screens; centred on its own line when there is not room to wrap
   without leaving a ragged one-word column beside it.

   Left transparent and unframed: the GIF keys out white on all 13 frames, and
   only 25 of its opaque pixels are near-white, so it sits on the starfield with
   no fringe worth hiding behind a white card. */
.fa-bow {
  float: right;
  margin: 0 0 8px 14px;
}

@media (max-width: 520px) {
  .fa-bow { float: none; display: block; margin: 0 auto 10px; }
}

/* Car GIFs flanking the Source & Build call to action. No background or frame:
   both key out chroma green with no fringe. */
.fa-ctarow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  margin: 14px 0 4px;
}

.fa-ctarow__car { display: block; }

.fa-ctarow__btns { margin: 0; text-align: center; }

/* Too narrow to flank: the cars pair up on their own line above the buttons
   rather than wrapping one to each side and stranding a car per row. */
@media (max-width: 620px) {
  .fa-ctarow__car { order: 1; }
  .fa-ctarow__btns { order: 2; flex: 1 0 100%; }
}


/* Archive cars with no surviving photograph. Same footprint as a thumbnail so
   the column stays aligned, but plainly labelled rather than pretending. */
.fa-carcard__thumb--none {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  border-style: ridge;
  border-color: #2e2e2e;
}

.fa-carcard__thumb--none span {
  font: bold 10px var(--fa-sans);
  letter-spacing: .14em;
  color: #6d6d6d;
}

/* WAP stock listings. Same austerity as the menu — numbered, no images, each
   entry two short lines so it reads on a phone the width of a credit card. */
.fa-wap__hdr {
  margin: 14px 0 4px;
  font: bold 10px var(--fa-sans);
  letter-spacing: .12em;
  color: var(--fa-gold);
}

.fa-wap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: wapitem;
  border-top: 1px solid #222;
}

.fa-wap__list li {
  counter-increment: wapitem;
  border-bottom: 1px solid #222;
  padding: 9px 10px 9px 26px;
  position: relative;
  color: #9fb3c4;
  font-size: 12px;
  line-height: 1.5;
}

.fa-wap__list li::before {
  content: counter(wapitem);
  position: absolute;
  left: 8px;
  color: var(--fa-gold);
  font-weight: bold;
}

.fa-wap__list a { color: var(--fa-cyan); text-decoration: none; font-size: 13px; }

.fa-wap__row { padding: 9px 10px; color: #7f93a4; font-size: 12px; }

/* ===== 05-gallery.css ===== */
.fa-gal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center; }
.fa-gal[hidden] { display: none; }
.fa-gal__box { width: min(780px, 95vw); border: 5px ridge var(--fa-gold);
  background: #000; font-family: var(--fa-serif); }
.fa-gal__bar { background: #c9c9c9; color: #000; font: bold 11px var(--fa-sans);
  padding: 6px 9px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.fa-gal__x { border: 2px outset var(--fa-bevel); background: #c9c9c9; padding: 1px 8px;
  cursor: pointer; font: bold 11px var(--fa-sans); }
.fa-gal__stage { position: relative; background: #050505; }
.fa-gal__stage .fa-gal__img { width: 100%; height: min(54vh, 430px); object-fit: contain; display: block; }
.fa-gal__img[hidden] { display: none !important; }
.fa-gal__err { width: 100%; height: min(54vh, 430px); display: flex; align-items: center;
  justify-content: center; background: #050505; border: 1px inset #333; color: var(--fa-text);
  font: bold 14px var(--fa-sans); letter-spacing: .04em; text-align: center; padding: 20px; }
.fa-gal__err[hidden] { display: none; }
.fa-gal__arw { position: absolute; top: 50%; transform: translateY(-50%);
  border: 3px outset var(--fa-bevel); background: #c9c9c9; color: #000;
  font: bold 20px var(--fa-sans); padding: 11px 15px; cursor: pointer; }
.fa-gal__arw--l { left: 9px; } .fa-gal__arw--r { right: 9px; }
.fa-gal__cap { color: var(--fa-text); font-size: 14px; padding: 9px 11px;
  display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #222; }
.fa-gal__of { color: var(--fa-green); font-family: var(--fa-mono); font-size: 12px; white-space: nowrap; }
.fa-gal__strip { display: flex; gap: 6px; padding: 9px; overflow-x: auto; border-top: 1px solid #222; }
.fa-gal__strip button { flex: 0 0 auto; width: 66px; height: 48px; padding: 0;
  border: 3px outset #666; background: #111; cursor: pointer; }
.fa-gal__strip button.is-sel { border-color: var(--fa-gold); }
.fa-gal__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 06-forms.css ===== */
.fa-sheet { border: 5px ridge var(--fa-gold); background: rgba(0,0,0,.62); }
.fa-sheet__hdr { background: #c9c9c9; color: #000; font: bold 12px var(--fa-sans);
  letter-spacing: .12em; padding: 6px 9px; display: flex; justify-content: space-between; gap: 8px; }
.fa-sheet__advice { padding: 8px 9px; margin: 0; border-bottom: 1px solid #1e1e1e;
  font-size: 13px; color: #a8bccd; }
.fa-sheet__field { padding: 8px 9px; border-bottom: 1px solid #1e1e1e; }
.fa-sheet__field label { display: block; color: #fff; font: bold 12px var(--fa-sans);
  margin-bottom: 4px; }
.fa-input { width: 100%; background: #0b0b0b; border: 2px inset #444; color: var(--fa-text);
  font: 13px var(--fa-serif); padding: 6px 8px; }
.fa-sheet__groups { font-size: 13px; }
.fa-sheet__fieldset { border: 0; margin: 0; padding: 0; overflow: hidden; }
.fa-sheet__group { float: left; width: 100%; margin: 0; text-align: left;
  background: #101010; color: var(--fa-cyan);
  font: bold 10px var(--fa-sans); letter-spacing: .14em; padding: 5px 8px; }
.fa-sheet__row { display: flex; align-items: flex-start; clear: both;
  padding: 7px 8px; border-bottom: 1px solid #1e1e1e; color: var(--fa-text); }
.fa-sheet__row.is-on { background: rgba(255,212,0,.07); }
.fa-sheet__cb { flex: 0 0 34px; width: 34px; text-align: center; }
.fa-sheet__cb input { width: 16px; height: 16px; cursor: pointer; }
.fa-sheet__body { flex: 1; }
.fa-sheet__it { color: #fff; font-weight: bold; display: block; cursor: pointer; }
.fa-sheet__ds { color: var(--fa-muted); font-size: 12px; display: block; }
.fa-sheet__tot { background: #0d0d0d; padding: 9px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 8px; border-top: 2px solid #333; }
.fa-sheet__n { color: var(--fa-green); font: bold 15px var(--fa-serif); }
.fa-sheet__note { font-size: 12px; color: var(--fa-muted); }

/* Netlify's honeypot field. Hidden from people but not from bots, which is the
   point: display:none would let a bot skip it, so it is moved off-screen while
   staying in the accessibility tree's tab order at -1. */
.fa-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fa-formnote {
  margin: 10px 0 0;
  font-size: 12px;
  color: #9a9a9a;
  text-align: center;
}

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

.fa-form { max-width: 560px; margin: 18px auto 0; }

.fa-form__set {
  border: 2px ridge #2e2e2e;
  background: rgba(0,0,0,.4);
  margin: 0 0 14px;
  padding: 10px 12px 12px;
}

.fa-form__legend {
  color: var(--fa-cyan);
  font: bold 10px var(--fa-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 6px;
}

/* Each field is its own row: the label sits on its own line above a full-width
   control, so a long label never squeezes the input into an unusable column. */
.fa-form__row { margin-top: 10px; }

.fa-form__row:first-of-type { margin-top: 2px; }

.fa-form__label {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font: bold 12px var(--fa-sans);
}

.fa-form__opt {
  font-weight: normal;
  color: var(--fa-muted);
}

.fa-form textarea.fa-input {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
}

.fa-form .fa-btn--block { margin-top: 4px; }

.fa-form__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--fa-muted);
}

/* Selects inherit .fa-input but need their own arrow affordance restored, since
   the inset border and dark background otherwise read as a disabled text box. */
.fa-form select.fa-input { cursor: pointer; }

/* Cart ----------------------------------------------------------------- */

.fa-btn--quiet { background: #8f8f8f; }

.fa-product__buy { max-width: 460px; margin: 14px auto 0; }

.fa-product__buy .fa-btn--block { margin-top: 8px; }

.fa-cartcount {
  display: inline-block;
  min-width: 17px;
  padding: 0 4px;
  border: 2px outset var(--fa-bevel);
  background: var(--fa-gold);
  color: #000;
  font: bold 10px var(--fa-sans);
  text-align: center;
}

/* No stray zero for a visitor who has not put anything in it. */
.fa-cartcount[data-empty="true"] { display: none; }

.fa-cartlist { list-style: none; margin: 14px 0 0; padding: 0; }

.fa-cartline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed #333;
}

.fa-cartline__thumb { flex: 0 0 86px; border: 3px outset var(--fa-gold); align-self: flex-start; }

.fa-cartline__thumb img { display: block; width: 100%; height: 64px; object-fit: contain; background: #0d0d0d; }

.fa-cartline__body { flex: 1 1 auto; min-width: 0; }

.fa-cartline__name { display: block; color: var(--fa-magenta); }

.fa-cartline__price { display: block; color: var(--fa-green); font-style: normal; font-weight: bold; margin-top: 2px; }

.fa-cartline__controls { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; }

.fa-cartline__qty { width: 70px; }

.fa-carttotal {
  margin: 14px 0 0;
  text-align: right;
  font: bold 15px var(--fa-serif);
  color: var(--fa-text);
}

.fa-carttotal b { color: var(--fa-green); margin-left: 8px; }

.fa-product__hero {
  position: relative;
  display: block;
  max-width: 520px;
  margin: 6px auto 0;
  border: 4px outset var(--fa-gold);
}

.fa-product__hero img { display: block; width: 100%; height: auto; }

.fa-product__strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
  max-width: 520px;
  margin: 6px auto 0;
}

.fa-product__strip img { display: block; width: 100%; height: 64px; object-fit: contain;
  background: #0d0d0d; border: 2px ridge #2e2e2e; }

.fa-product__price { text-align: center; color: var(--fa-green); font: bold 20px var(--fa-serif); margin: 12px 0 0; }

.fa-product__desc { margin-top: 10px; }

.fa-product__detailhd { font-size: 15px; margin: 16px 0 4px; }