{"schemaVersion":1,"name":"Japan, curated","generatedFrom":"src/app/globals.css @theme (parsed at build) + lib/brand-guidelines.ts (authored) + .impeccable/design.json (ramps)","northStar":"The Otaku Almanac","overview":"A catalog of finds kept by someone who actually knows Japan and its geek scene, set in the type and grid of a Japanese editorial magazine. It reads like a hand-built index, not a travel-startup landing page. The system runs on three moves: a barely-warm paper field, near-black ink, and one decisive vermilion accent. Type carries everything, so a page with no image is still complete.","keyCharacteristics":["Warm-paper / ink / one-vermilion palette, no pure white or black anywhere.","Type-led and photo-light: layout and font contrast carry the page.","Rounded interactive controls and floating surfaces; images, hairline rules, and structural frames stay flush.","Confident and graphic: hard display-to-body scale jumps, decisive accent.","Bilingual by design: Latin and Japanese paired by script class, JP never italicized."],"colors":[{"id":"accent","cssVar":"--color-accent","displayName":"Torii Vermilion","role":"accent","value":"#c8102e","purpose":"The only saturated color in the system, named for the red of Shinto shrine gates. Reserved for the highest-signal moments: the wordmark's 'curated', links, hover on place names and geek nav, selected filter chips. Its rarity is the entire point.","ramp":["oklch(0.30 0.12 22)","oklch(0.38 0.16 22)","oklch(0.46 0.19 22)","oklch(0.55 0.21 22)","oklch(0.64 0.19 22)","oklch(0.74 0.15 22)","oklch(0.85 0.09 22)","oklch(0.94 0.04 22)"]},{"id":"paper","cssVar":"--color-paper","displayName":"Washi White","role":"neutral","value":"oklch(0.994 0.0035 75)","purpose":"The page field. A faint-warm off-white named for Japanese paper, tuned to read as white while carrying a trace of the warm hue. Deliberately not a beige cream.","ramp":["oklch(0.18 0.004 75)","oklch(0.26 0.004 75)","oklch(0.36 0.004 75)","oklch(0.49 0.004 75)","oklch(0.62 0.004 75)","oklch(0.78 0.004 75)","oklch(0.92 0.0035 75)","oklch(0.994 0.0035 75)"]},{"id":"paper-deep","cssVar":"--color-paper-deep","displayName":"Washi Deep","role":"neutral","value":"oklch(0.975 0.004 75)","purpose":"One step down from the page field. Section and blockquote backgrounds; the tonal layering that creates depth without shadow."},{"id":"ink","cssVar":"--color-ink","displayName":"Sumi Ink","role":"neutral","value":"oklch(0.255 0.004 75)","purpose":"Near-black body and headline text, named for calligraphy ink. Warm-tinted, never pure black. Also drives hairline borders at 10–20% opacity."},{"id":"ink-mid","cssVar":"--color-ink-mid","displayName":"Sumi Mid","role":"neutral","value":"oklch(0.37 0.004 75)","purpose":"The midtone between Sumi Ink and Sumi Soft. One job: the secondary Japanese name line (name_ja) under a place's English name, so it reads as the name in another script."},{"id":"ink-soft","cssVar":"--color-ink-soft","displayName":"Sumi Soft","role":"neutral","value":"oklch(0.49 0.004 75)","purpose":"Secondary text, metadata, tags, and the resting state of basic-nav links."}],"typography":[{"id":"hero","displayName":"Hero","fontFamily":"Fraunces, Georgia, serif","fontSize":"clamp(3rem, 9vw, 6.5rem)","fontWeight":600,"lineHeight":"1.0","letterSpacing":"-0.01em","purpose":"The single loudest type on the site, reserved for the home front door. One step above Display so arrival lands the hard display-to-body scale jump."},{"id":"display","displayName":"Display","fontFamily":"Fraunces, Georgia, serif","fontSize":"clamp(2.75rem, 6vw, 5rem)","fontWeight":600,"lineHeight":"1.0","letterSpacing":"-0.01em","purpose":"Page and hero headlines."},{"id":"feature","displayName":"Feature","fontFamily":"Fraunces, Georgia, serif","fontSize":"clamp(2rem, 4vw, 3.25rem)","fontWeight":600,"lineHeight":"1.05","purpose":"Detail-page article titles, feature-treatment headings."},{"id":"title","displayName":"Title","fontFamily":"Fraunces, Georgia, serif","fontSize":"1.25rem","fontWeight":500,"lineHeight":"1.15","purpose":"Place-card names, section headings, prose h2/h3."},{"id":"body","displayName":"Body","fontFamily":"Archivo, system-ui, sans-serif","fontSize":"1.0625rem","fontWeight":400,"lineHeight":"1.7","purpose":"MDX prose, capped at a 38rem (~65ch) measure."},{"id":"kicker","displayName":"Label / Kicker","fontFamily":"Archivo, system-ui, sans-serif","fontSize":"0.75rem","fontWeight":500,"lineHeight":"1.4","letterSpacing":"0.18em","transform":"uppercase","purpose":"Tracked uppercase metadata labels: city names above cards, nav group headers. Always Sumi Soft."},{"id":"jp-serif","displayName":"Japanese Serif","fontFamily":"Noto Serif JP, serif","fontSize":"0.88em","fontWeight":400,"lineHeight":"1.8","purpose":"Paired to Fraunces by script class (serif ↔ Mincho); ~12% smaller, raised line-height, never italic."},{"id":"jp-sans","displayName":"Japanese Sans","fontFamily":"Noto Sans JP, sans-serif","fontSize":"0.88em","fontWeight":400,"lineHeight":"1.75","purpose":"Paired to Archivo by script class (sans ↔ Gothic); ~12% smaller, raised line-height, never italic."}],"spacing":[{"id":"gutter","value":"1.5rem","purpose":"The page gutter (px-6). Constant across breakpoints."},{"id":"measure","value":"38rem","purpose":"Max prose width (~65ch). Body text never runs wider."},{"id":"container","value":"72rem","purpose":"Max layout width (max-w-6xl). The asymmetric editorial grid lives inside it."},{"id":"breakpoint-md","value":"768px","purpose":"The single breakpoint. One deliberate layout change, not a fluid soup."}],"radii":[{"id":"control","cssVar":"--radius-control","value":"0.5rem","appliesTo":"Buttons, filter chips, selects, inputs, toasts, the skip-link, map zoom/locate controls."},{"id":"panel","cssVar":"--radius-panel","value":"0.75rem","appliesTo":"Dropdown panels, search-result lists, map popups, the mobile bottom sheet's top corners."}],"elevation":"Flat by default. No shadows anywhere. Depth comes from tonal layering (Washi Deep behind Washi White) and 1px Sumi Ink hairlines. Nothing floats; everything sits on the paper.","motion":[{"name":"scroll-reveal","value":"opacity 0→1, translateY 20px→0, 0.5s easeOut, once, viewport margin -10%","purpose":"Calm whileInView entrance for sections and grids. Fully disabled under prefers-reduced-motion."},{"name":"state-transition","value":"color / border-color / background-color, ~0.2–0.3s ease","purpose":"Hover and selected-state shifts on links, place names, chips, and the header CTA."}],"controls":[{"name":"Primary button","tier":"primary","spec":"Solid Torii Vermilion fill, Washi White text, control radius, 1px matching border. At most one primary button per region of the screen — it is the region's single unmistakable action.","states":{"rest":"background & border --color-accent; color --color-paper","hover / focus-visible":"fill deepens ~18% toward Sumi Ink: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink))"}},{"name":"Filter chip","tier":"secondary","spec":"1px border, transparent fill, control radius. No background fill in any state.","states":{"rest":"border Sumi Ink 20%; text Sumi Soft","hover":"border and text darken to full Sumi Ink","selected":"border and text flip to Torii Vermilion"}},{"name":"Select","tier":"secondary","spec":"Hairline-outlined (Sumi Ink 20%), paper fill, control radius; border darkens on hover, accent on focus.","states":{"rest":"border Sumi Ink 20%","hover":"border Sumi Ink","focus-visible":"border Torii Vermilion"}}],"components":[{"name":"Place card","description":"The signature component. Not a box — a top hairline rule and type. The deliberate answer to the banned identical-icon-card grid.","anatomy":["Top hairline rule: 1px Sumi Ink at 15%","City/type eyebrow: kicker style, Sumi Soft","Place name: Fraunces Title, Sumi Ink → Torii Vermilion on hover","Japanese name (name_ja): Noto Serif JP, Sumi Mid (The Three-Tier Name Rule)","Tags: small Archivo, Sumi Soft"]},{"name":"Navigation links","description":"The three gaming sections sit top-level — Pokémon and Nintendo each carry their own dropdown, Retro Gaming is a plain link — followed by The Basics, Finds, and Cheat Sheets. Every top-level item shares one treatment: Archivo, Sumi Ink, roll-up on hover. Top-level labels never highlight for the current section (the mark lives inside the dropdown; aria-current still announces it). Dropdown items are smaller Archivo, Sumi Ink → vermilion, and go accent when current. Each dropdown leads with an \"All …\" link, the only route to the section page itself from the menu. The desktop row appears at lg (1024px); below that everything folds into the takeover menu, where each item with sub-pages becomes a disclosure — one Fraunces row per destination, sub-links revealed by tapping rather than indented under it.","anatomy":["Top-level: Archivo, ink, roll-up on hover, chevron when it owns a menu","Dropdown item: Archivo small, ink → accent, Washi Deep on hover","Wordmark: 'Japan, curated' with 'curated' in vermilion"]},{"name":"Blockquote","description":"Washi Deep background with even padding, set in Fraunces, full-width. No side stripe — the old accent left-border was removed.","anatomy":["Background: Washi Deep","Type: Fraunces, upright","No border, no stripe, flush corners"]}],"snippets":[{"name":"Design tokens","description":"Every custom property from the live @theme block, generated at build time.","css":":root {\n  --color-paper: oklch(0.994 0.0035 75);\n  --color-paper-deep: oklch(0.975 0.004 75);\n  --color-ink: oklch(0.255 0.004 75);\n  --color-ink-mid: oklch(0.37 0.004 75);\n  --color-ink-soft: oklch(0.49 0.004 75);\n  --color-accent: #c8102e;\n  --font-display: var(--font-fraunces), Georgia, serif;\n  --font-sans: var(--font-archivo), system-ui, sans-serif;\n  --font-jp-serif: var(--font-noto-serif-jp), serif;\n  --font-jp-sans: var(--font-noto-sans-jp), sans-serif;\n  --radius-control: 0.5rem;\n  --radius-panel: 0.75rem;\n  --text-kicker: 0.75rem;\n  --text-dek: 1.25rem;\n  --text-hero: clamp(3rem, 9vw, 6.5rem);\n  --text-display: clamp(2.75rem, 6vw, 5rem);\n  --text-feature: clamp(2rem, 4vw, 3.25rem);\n}"},{"name":"Primary button","description":"The production .map-cta treatment: vermilion fill, hover deepens toward ink.","css":".button-primary {\n  border: 1px solid var(--color-accent);\n  border-radius: var(--radius-control);\n  background: var(--color-accent);\n  color: var(--color-paper);\n  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),\n    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.button-primary:hover,\n.button-primary:focus-visible {\n  background: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink));\n  border-color: color-mix(in oklch, var(--color-accent) 82%, var(--color-ink));\n}"},{"name":"Filter chip","description":"Secondary control: hairline outline, no fill in any state, accent when selected.","css":".chip {\n  border: 1px solid color-mix(in oklch, var(--color-ink) 20%, transparent);\n  border-radius: var(--radius-control);\n  background: transparent;\n  color: var(--color-ink-soft);\n  padding: 0.625rem 0.875rem;\n  transition: color 0.2s ease, border-color 0.2s ease;\n}\n.chip:hover {\n  border-color: var(--color-ink);\n  color: var(--color-ink);\n}\n.chip[aria-pressed=\"true\"] {\n  border-color: var(--color-accent);\n  color: var(--color-accent);\n  font-weight: 600;\n}"},{"name":"Place card","description":"The signature card: a top hairline and type, never a bordered box.","css":".place-card {\n  display: block;\n  border-top: 1px solid color-mix(in oklch, var(--color-ink) 15%, transparent);\n  padding-top: 0.75rem;\n  text-decoration: none;\n}\n.place-card__name {\n  font-family: var(--font-display);\n  font-size: 1.25rem;\n  font-weight: 500;\n  line-height: 1.15;\n  color: var(--color-ink);\n  transition: color 0.2s ease;\n}\n.place-card:hover .place-card__name { color: var(--color-accent); }\n.place-card__name-ja {\n  font-family: var(--font-jp-serif);\n  font-size: 0.88em;\n  line-height: 1.8;\n  font-style: normal;\n  color: var(--color-ink-mid);\n}\n.place-card__tags { font-size: 0.875rem; color: var(--color-ink-soft); }"},{"name":"Kicker label","description":"Tracked uppercase metadata label, always Sumi Soft.","css":".kicker {\n  font-family: var(--font-sans);\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.18em;\n  color: var(--color-ink-soft);\n}"},{"name":"Japanese text","description":"The Two-Script Rule in CSS: pair by script class, shrink ~12%, never italicize.","css":".jp {\n  font-family: var(--font-jp-sans);\n  font-size: 0.88em;\n  line-height: 1.75;\n  font-style: normal !important;\n}\n.jp-serif {\n  font-family: var(--font-jp-serif);\n  font-size: 0.88em;\n  line-height: 1.8;\n  font-style: normal !important;\n}"}],"brandStrategy":{"threeWords":["Curated","Knowing","Editorial"],"audience":"Otaku and nerdy travelers planning a Japan trip, plus their travel companions. Enthusiast-level on the geek side, not necessarily experienced Japan travelers — so the basics have to be as trustworthy as the niche picks.","positioning":"Generic Japan travel sites bury the geek content and read as interchangeable SEO filler; the niche communities that cover Pokémon Centers and retro game hunting rarely cover food, stays, and transit with the same care. This site does both, under one curated editorial roof. The niche is the headline.","emotionalGoal":"Curated trust plus insider delight. The visitor should feel a real, knowledgeable person made this for them — confidence that the picks are worth their time, layered with the small thrill of niche finds. Trust is the floor; delight is the lift."},"voice":{"summary":"The confident, plainspoken voice of a real person who knows Japan and the geek scene, writing for a peer — not for a search engine. Specific over vague, opinionated where it has earned the opinion, never breathless or hype-driven. Print-magazine restraint, not blog-post enthusiasm.","pairs":[{"do":"Name the shop, the exact station, the real hours, the canonical pin.","dont":"Vague filler — 'a great spot for foodies,' 'a must-visit hidden gem.'"},{"do":"State an opinion where the site has earned it.","dont":"Hype and superlatives standing in for judgment."},{"do":"Write for a peer who is already fluent in the subject.","dont":"Write for a search engine, or pad for word count."},{"do":"Print-magazine restraint — let the find carry the excitement.","dont":"Blog-post enthusiasm and exclamation marks."}]},"rules":[{"name":"The One Voice Rule","section":"colors","body":"Torii Vermilion appears on no more than ~10% of any screen. It is a signal, not a theme. If two things on a screen are red, one of them is wrong. Standing chrome exception: the header's red View Map button and the wordmark's red 'curated' are the fixed accent of the chrome. Documented page exception: /map, where every pin is vermilion for legibility against the basemap."},{"name":"The No-Pure-White Rule","section":"colors","body":"Never #ffffff and never #000000. Every neutral is tinted toward the warm hue (chroma ~0.004) so the surface reads as paper, not screen."},{"name":"The Two-Script Rule","section":"typography","body":"Japanese text is paired to the Latin face by script class (serif ↔ Mincho, sans ↔ Gothic), sized ~12% smaller with raised line-height, and never italicized."},{"name":"The Three-Tier Name Rule","section":"typography","body":"A place name reads in three tiers, distinguished by color: the uppercase city/type eyebrow in Sumi Soft (metadata), the English name in full Sumi Ink (the title), and the Japanese name_ja in Sumi Mid (the name in another script). The Japanese line must never share the eyebrow's Sumi Soft, or it reads as metadata instead of as the name."},{"name":"The Hard-Contrast Rule","section":"typography","body":"The jump from Body to Display is large and deliberate. Push scale and weight contrast; a timid type scale reads as a default template. Hierarchy comes from contrast, not from boxes or color."},{"name":"The Case Rule","section":"typography","body":"Three cases, three jobs. TRACKED UPPERCASE is reserved for kickers and metadata labels (0.18em tracking, Sumi Soft) — never headings, never emphasis. Title Case is for names: nav labels, button labels, section names ('Pokémon Centers', 'View Map', 'Brand Guidelines'). Sentence case is for everything that speaks: headings, body copy, captions. Japanese has no letter case — these rules govern Latin text only."},{"name":"The Flat-By-Default Rule","section":"corners","body":"Surfaces are flat. The system uses no shadows at all. If you reach for a shadow to separate two things, use a tonal step or a 1px hairline instead. A drop shadow on this site is always a mistake."},{"name":"The Corner Language","section":"corners","body":"Interactive controls and floating surfaces round; content and structure stay flush (decision 2026-07-07). Two radius tokens only — control (0.5rem) and panel (0.75rem). Images, hairline rules, section dividers, the map frame, and the sticky jump-bar keep square edges. Rounding is a control affordance, not decoration."}],"dos":["Keep Torii Vermilion on ≤10% of any screen (The One Voice Rule).","Tint every neutral toward the warm hue and keep Washi White reading as white, not cream.","Round interactive controls at the control radius and floating surfaces at the panel radius; keep images, hairline rules, and structural frames flush.","Convey depth with tonal layering and 1px Sumi Ink hairlines — never a shadow.","Pair Japanese text by script class, shrink it ~12%, raise its line-height, keep it upright.","Set the secondary Japanese name line (name_ja) in Sumi Mid — darker than the Sumi Soft eyebrow, lighter than the Sumi Ink English title.","Push display-to-body scale and weight contrast hard; let type create the hierarchy."],"donts":["Don't use Inter or any default system sans on stark white — the single loudest AI tell for this project.","Don't use purple/indigo gradients, gradient text, or the SaaS-marketing palette.","Don't build the centered-hero-plus-three-icon-boxes layout, or grids of identical icon + heading + body cards.","Don't round corners or add drop shadows on images.","Don't use glassmorphism, decorative blur, parallax, animated gradients, or bouncy/elastic motion.","Don't use a border-left/right greater than 1px as a colored accent stripe.","Don't write #ffffff or #000000 anywhere."]}