/* ========================================================================== Shiyawase Studio — shared wafū design system One stylesheet for every page of shiyawase.com. Structure: tokens → base → shared components → landing → policy shell → game policy pages → 404. Cache-busting: bump the ?v= query on each page's when this changes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root{ color-scheme:light; /* Fonts — Home Blessed */ --font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-body:var(--font-display); --font-ui:var(--font-display); --font-kanji:"Noto Serif JP","Yu Mincho",serif; /* seal / 漢字 only */ /* Surfaces — warm washi */ --paper:#FBF5EC; --paper-raised:#FFFFFF; --paper-dim:#F5EDE0; --ink:#2C1F14; --ink-muted:#6E5F4E; --ink-faint:#B3A090; --line:#E4D9C4; /* Brand brown replaces vermilion/indigo */ --vermilion:#8B6347; /* graphic accent (rules, markers) */ --vermilion-ink:#6E4C33; /* text-safe brown */ --indigo:#6E4C33; --gold:#B08A4A; --accent:var(--vermilion); --accent-ink:var(--vermilion-ink); --link:var(--vermilion-ink); --link-hover:var(--vermilion); --btn-bg:#8B6347; --btn-fg:#FBF5EC; --btn-hover:.94; --focus:#8B6347; --wm:rgba(110,76,51,.05); --header-bg:rgba(251,245,236,.86); --shadow-1:0 8px 28px rgba(139,99,71,.10); --seal-drop:rgba(94,30,18,.3); /* fluid type scale */ --step--1:clamp(.82rem,.79rem + .14vw,.9rem); --step-0:clamp(1rem,.95rem + .25vw,1.125rem); --step-1:clamp(1.15rem,1.08rem + .35vw,1.35rem); --step-2:clamp(1.4rem,1.28rem + .6vw,1.75rem); --step-3:clamp(1.8rem,1.55rem + 1.2vw,2.5rem); --step-4:clamp(2.25rem,1.8rem + 2.2vw,3.4rem); --eyebrow-size:.75rem; /* layout */ --section-y:clamp(3.5rem,2.4rem + 4.5vw,6.5rem); --w-content:46rem; --w-wide:64rem; --header-h:3.5rem; --pad-x:clamp(1.2rem,4.5vw,2rem); --r-sm:4px; --r-md:8px; --r-pill:999px; } @media (prefers-color-scheme:dark){ :root{ /* warm dark — Home Blessed at night */ --paper:#211812; --paper-raised:#2A2017; --paper-dim:#281E15; --ink:#F0E7D6; --ink-muted:#C4B49C; --ink-faint:#8F7E68; --line:#413325; --vermilion:#9C7250; /* graphic accent (seal, rules, markers) */ --vermilion-ink:#C9A57E; /* text-safe tan */ --indigo:#C9A57E; --gold:#D4AF6E; --btn-bg:#C9A57E; --btn-fg:#241A11; --btn-hover:1.12; --focus:#C9A57E; --wm:rgba(240,231,214,.05); --header-bg:rgba(33,24,18,.82); --shadow-1:none; --seal-drop:rgba(0,0,0,.4); } } /* Per-game accents — set as a class on . Wax-mark palettes (--w1..--w8) are the retained personality of each game. */ .theme-diary{ --accent:#755526; --accent-ink:#755526; --link:#755526; --link-hover:#5C401C; --game-motif:#8A6A3A; --btn-bg:#755526; --btn-fg:#F6EFDF; --focus:#755526; --w1:#C88A3A;--w2:#C8A24E;--w3:#8C4A3E;--w4:#7F9E6A; --w5:#8A6A3A;--w6:#B8945A;--w7:#A5654A;--w8:#7A4E30; } .theme-logic{ --accent:#1F6E8C; --accent-ink:#1F6E8C; --link:#1F6E8C; --link-hover:#155469; --game-motif:#2C7A99; --btn-bg:#1F6E8C; --btn-fg:#EAF6FA; --focus:#1F6E8C; --w1:#2C7A99;--w2:#B08A3E;--w3:#7A6BAE;--w4:#4E8A66; --w5:#B06A80;--w6:#A65240;--w7:#3E8A8C;--w8:#B07A46; } @media (prefers-color-scheme:dark){ .theme-diary{ --accent:#D8B25E; --accent-ink:#D8B25E; --link:#D8B25E; --link-hover:#E8CE96; --game-motif:#C8A24E; --btn-bg:#D8B25E; --btn-fg:#241C0F; --focus:#D8B25E; --w1:#E0A55A;--w2:#E8CE96;--w3:#C08272;--w4:#9CBE86; --w5:#C8A24E;--w6:#D8B87E;--w7:#C88866;--w8:#B0784E; } .theme-logic{ --accent:#7FC5DC; --accent-ink:#7FC5DC; --link:#7FC5DC; --link-hover:#A8D8E8; --game-motif:#67B7D1; --btn-bg:#7FC5DC; --btn-fg:#0E212B; --focus:#7FC5DC; --w1:#5FB0CE;--w2:#D9B36A;--w3:#A99AE0;--w4:#7FBE9B; --w5:#D89AAC;--w6:#D08370;--w7:#6FBFC1;--w8:#D8A276; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:var(--step-0); font-weight:400; line-height:1.85; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto} a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em} a:hover{color:var(--link-hover)} b,strong{font-weight:600;color:var(--ink)} em{color:var(--ink-muted)} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px} ::selection{background:var(--vermilion);color:#FBF6EB} section[id]{scroll-margin-top:calc(var(--header-h) + 1rem)} .wrap{max-width:var(--w-wide);margin:0 auto;padding-inline:var(--pad-x)} .wrap--narrow{max-width:var(--w-content)} /* Skip link */ .skip{ position:fixed;left:1rem;top:1rem;z-index:100; background:var(--paper-raised);color:var(--ink); border:2px solid var(--focus);border-radius:var(--r-sm); padding:.6rem 1rem;font-family:var(--font-ui);font-size:var(--step--1); text-decoration:none;transform:translateY(calc(-100% - 2rem)); } .skip:focus{transform:none} /* Scroll-reveal (progressive enhancement; everything visible without JS) */ html.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease} html.js [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html.js [data-reveal]{opacity:1;transform:none;transition:none} } /* -------------------------------------------------------------------------- 3. Shared components -------------------------------------------------------------------------- */ /* Hanko seal */ .seal{ display:inline-flex;align-items:center;justify-content:center; background:var(--vermilion); background-image:radial-gradient(circle at 30% 25%,rgba(255,255,255,.16),transparent 60%); color:#fff;font-family:var(--font-kanji);font-weight:700;line-height:1; box-shadow:0 2px 0 var(--seal-drop); user-select:none;flex:0 0 auto; } .seal--sm{width:24px;height:24px;font-size:.85rem;border-radius:6px} .seal--md{width:40px;height:40px;font-size:1.2rem;border-radius:9px} .seal--lg{width:72px;height:72px;font-size:2.3rem;border-radius:16px} /* Header */ .site-header{ position:sticky;top:0;z-index:10; height:var(--header-h); background:var(--paper); border-bottom:1px solid var(--line); } @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .site-header{ background:var(--header-bg); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); } } .site-header .bar{ max-width:var(--w-wide);margin:0 auto;height:100%; padding-inline:var(--pad-x); display:flex;align-items:center;justify-content:space-between;gap:1rem; } .brand{ display:inline-flex;align-items:center;gap:.6rem; color:var(--ink);text-decoration:none; font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.02em; white-space:nowrap; } .brand:hover{color:var(--ink)} .site-nav{display:flex;gap:clamp(.8rem,2.5vw,1.6rem)} .site-nav a{ color:var(--ink-muted);text-decoration:none; font-family:var(--font-ui);font-size:var(--step--1);font-weight:500;letter-spacing:.06em; } .site-nav a:hover{color:var(--accent-ink)} @media (max-width:430px){ .brand{font-size:.92rem} .site-nav{gap:.7rem} .site-nav a{letter-spacing:.02em} } /* Bilingual eyebrow: 理念 · Our belief */ .eyebrow{ display:flex;align-items:baseline;gap:.6rem;margin:0 0 .9rem; font-family:var(--font-ui);font-size:var(--eyebrow-size);font-weight:500; letter-spacing:.3em;text-transform:uppercase;color:var(--ink-muted); } .eyebrow--center{justify-content:center} .eyebrow .ja{ font-family:var(--font-kanji);font-weight:600;font-size:1.05rem; letter-spacing:.18em;color:var(--accent-ink);text-transform:none; } .eyebrow .dot{letter-spacing:0;color:var(--ink-faint)} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:.5rem; background:var(--btn-bg);color:var(--btn-fg); font-family:var(--font-ui);font-weight:700;font-size:var(--step--1);letter-spacing:.05em; padding:.85rem 1.7rem;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap; transition:filter .15s ease; } .btn:hover{color:var(--btn-fg);filter:brightness(var(--btn-hover))} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500} .btn-ghost:hover{color:var(--accent-ink);border-color:var(--accent-ink);filter:none} /* Card with the kakejiku double frame */ .card{ position:relative; background:var(--paper-raised); border:1px solid var(--line);border-radius:var(--r-sm); box-shadow:var(--shadow-1); padding:clamp(1.6rem,4vw,2.4rem); } .card::before{ content:"";position:absolute;inset:8px; border:1px solid var(--line);border-radius:2px; opacity:.55;pointer-events:none; } .card--tldr{border-left:3px solid var(--accent)} /* Seigaiha wave divider — SVG mask so it themes itself in light/dark */ .seigaiha{ height:30px; background-color:var(--line); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cg fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='0' cy='34' r='30'/%3E%3Ccircle cx='0' cy='34' r='21'/%3E%3Ccircle cx='0' cy='34' r='12'/%3E%3Ccircle cx='32' cy='34' r='30'/%3E%3Ccircle cx='32' cy='34' r='21'/%3E%3Ccircle cx='32' cy='34' r='12'/%3E%3Ccircle cx='64' cy='34' r='30'/%3E%3Ccircle cx='64' cy='34' r='21'/%3E%3Ccircle cx='64' cy='34' r='12'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center/64px 30px; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 30'%3E%3Cg fill='none' stroke='black' stroke-width='2.5'%3E%3Ccircle cx='0' cy='34' r='30'/%3E%3Ccircle cx='0' cy='34' r='21'/%3E%3Ccircle cx='0' cy='34' r='12'/%3E%3Ccircle cx='32' cy='34' r='30'/%3E%3Ccircle cx='32' cy='34' r='21'/%3E%3Ccircle cx='32' cy='34' r='12'/%3E%3Ccircle cx='64' cy='34' r='30'/%3E%3Ccircle cx='64' cy='34' r='21'/%3E%3Ccircle cx='64' cy='34' r='12'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center/64px 30px; } /* Vermilion rule */ .rule{width:44px;height:2px;background:var(--vermilion);border:0;margin:2.6rem auto 0} /* Data table */ .tablewrap{ overflow-x:auto;margin:1rem 0 .4rem; border:1px solid var(--line);border-radius:var(--r-md); background:var(--paper-raised); } table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.94rem} caption{ caption-side:top;text-align:left;padding:.9rem .9rem .4rem; color:var(--ink-muted);font-size:.9rem;font-style:italic; } th,td{text-align:left;padding:.72rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6} thead th{ font-family:var(--font-ui);font-size:.72rem;font-weight:700;font-style:normal; letter-spacing:.14em;text-transform:uppercase; color:var(--ink-muted);background:var(--paper-dim); } tbody tr:last-child td{border-bottom:0} td.what{font-weight:600;color:var(--ink);white-space:nowrap} .pill{ display:inline-block;font-family:var(--font-ui);font-size:.7rem;letter-spacing:.06em; padding:.16rem .55rem;border:1px solid var(--line);border-radius:var(--r-pill); color:var(--ink-muted);background:var(--paper); } .pill.opt{color:var(--accent-ink);border-color:var(--accent-ink)} /* Footer */ .site-footer{ padding:3rem 0 4rem;text-align:center; color:var(--ink-muted);font-family:var(--font-ui);font-size:var(--step--1); } .site-footer .fname{ font-family:var(--font-display);font-size:1.05rem;letter-spacing:.04em; color:var(--ink);margin:.9rem 0 .1rem; } .site-footer .fname .ja{font-family:var(--font-kanji);color:var(--ink-faint);margin-left:.4rem} .flinks{ display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem 1.2rem; list-style:none;margin:.8rem 0 1.1rem;padding:0; } .flinks a{color:var(--ink-muted);text-decoration:none} .flinks a:hover{color:var(--accent-ink);text-decoration:underline} .fcopy{margin:0;color:var(--ink-muted)} /* -------------------------------------------------------------------------- 4. Landing page -------------------------------------------------------------------------- */ .hero{ position:relative;overflow:hidden;text-align:center; padding:calc(var(--section-y)*1.05) 0 var(--section-y); } .hero-wm{ position:absolute;top:50%;left:50%;transform:translate(-8%,-52%); font-family:var(--font-kanji);font-weight:700;line-height:1; font-size:clamp(15rem,42vw,28rem);color:var(--wm); pointer-events:none;user-select:none; } .tategaki{ position:absolute;top:50%;right:clamp(.6rem,3.5vw,3rem);transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--font-kanji);font-size:.9rem;letter-spacing:.42em; color:var(--ink-faint);display:none; } @media (min-width:900px){.tategaki{display:block}} .hero .inner{position:relative;max-width:var(--w-content);margin:0 auto;padding-inline:var(--pad-x)} .hero .studio{ font-family:var(--font-ui);font-size:.78rem;font-weight:500; letter-spacing:.42em;text-transform:uppercase;color:var(--ink-muted); margin:1.5rem 0 0;padding-left:.42em; } .hero .kanji{ font-family:var(--font-kanji);font-weight:600; font-size:clamp(2.6rem,2rem + 3vw,4rem);letter-spacing:.24em; color:var(--ink);margin:.5rem 0 .2rem;padding-left:.24em;line-height:1.4; } .hero h1{ font-size:var(--step-4);font-weight:800;line-height:1.4;letter-spacing:-0.02em; max-width:24ch;margin:.4rem auto 1.2rem;text-wrap:balance; } .hero .lede{ color:var(--ink-muted);font-size:var(--step-1);line-height:1.9; max-width:44ch;margin:0 auto;text-wrap:pretty; } .hero-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem} .section{padding:var(--section-y) 0} .section h2{ font-size:var(--step-2);font-weight:800;line-height:1.4;letter-spacing:-0.02em; text-align:center;margin:0 0 1rem; } .sec-intro{ text-align:center;color:var(--ink-muted); max-width:52ch;margin:0 auto;text-wrap:pretty; } /* Belief principles */ .principles{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); max-width:56rem;margin:2.6rem auto 0; } @media (max-width:680px){.principles{grid-template-columns:1fr;max-width:26rem}} .principle{text-align:center;padding:2.2rem 1.5rem} .principle .ring{ width:64px;height:64px;margin:0 auto 1.1rem; border:1px solid var(--line);border-radius:50%; display:grid;place-items:center; } .principle .pkanji{ font-family:var(--font-kanji);font-weight:600;font-size:1.9rem;line-height:1; color:var(--vermilion-ink); } .principle h3{ font-family:var(--font-ui);font-size:.85rem;font-weight:700; letter-spacing:.22em;text-transform:uppercase; margin:0 0 .5rem;color:var(--ink); } .principle p{margin:0;color:var(--ink-muted);font-size:.95rem;line-height:1.8} /* Product showcase */ .product-card{max-width:48rem;margin:2.6rem auto 0} .prow{display:flex;align-items:center;gap:1.1rem} .pmark{ width:64px;height:64px;border-radius:14px;overflow:hidden;flex:0 0 auto; box-shadow:0 1px 3px rgba(38,35,30,.18); } .pmark img{width:100%;height:100%;display:block;object-fit:cover} .pname{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;color:var(--ink)} .ptag{color:var(--ink-muted);font-size:.95rem} .pbody{color:var(--ink-muted);margin:1.4rem 0 0} ul.feat{ list-style:none;padding:0;margin:1.2rem 0 0; display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.6rem; } @media (max-width:640px){ul.feat{grid-template-columns:1fr}} ul.feat li{position:relative;padding-left:1.35rem;color:var(--ink-muted);font-size:.95rem} ul.feat li::before{content:"—";position:absolute;left:0;color:var(--vermilion-ink)} .pricing{display:flex;flex-wrap:wrap;gap:1rem;margin:1.8rem 0 0} .chip{ display:flex;align-items:baseline;gap:.45rem; border:1px solid var(--line);border-radius:var(--r-sm); background:var(--paper);padding:.7rem 1.2rem; } .chip b{font-family:var(--font-display);font-weight:600;font-size:1.35rem;color:var(--ink)} .chip span{font-family:var(--font-ui);font-size:.85rem;color:var(--ink-muted)} .trial{color:var(--ink-muted);font-size:.92rem;margin:1.1rem 0 0} .product-cta{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:1.6rem} .appurl{font-family:var(--font-ui);font-size:.85rem;color:var(--ink-muted)} /* Games */ .games{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.8rem); max-width:48rem;margin:2.6rem auto 0; } @media (max-width:640px){.games{grid-template-columns:1fr;max-width:26rem}} .game{display:flex;gap:1.1rem;align-items:flex-start;text-align:left;padding:1.6rem} .gamemark{ width:52px;height:52px;border-radius:10px;flex:0 0 auto; display:grid;place-items:center;font-size:1.3rem;line-height:1; } .gamemark--diary{background:#3A2A1C;color:#F0D28A} .gamemark--logic{background:#1F4657;color:#9FD8EC} .game h3{font-family:var(--font-display);font-size:1.08rem;font-weight:600;margin:0 0 .25rem;color:var(--ink)} .game p{margin:0 0 .55rem;color:var(--ink-muted);font-size:.92rem;line-height:1.7} .game a{font-family:var(--font-ui);font-size:.82rem;letter-spacing:.04em} /* Contact */ .contact-line{text-align:center;color:var(--ink-muted);font-size:var(--step-1);line-height:2} /* -------------------------------------------------------------------------- 5. Policy shell (privacy / terms / refund) -------------------------------------------------------------------------- */ .policy{padding-block:clamp(2.2rem,6vw,3.6rem) clamp(3rem,8vw,4.5rem)} .back{ display:inline-block;margin-bottom:2rem; font-family:var(--font-ui);font-size:.85rem;letter-spacing:.03em; color:var(--ink-muted);text-decoration:none; } .back:hover{color:var(--accent-ink)} .policy-head{margin-bottom:2.6rem} .policy-head .eyebrow{margin:1.2rem 0 .6rem} .policy-head h1{font-size:var(--step-3);font-weight:800;letter-spacing:-0.02em;line-height:1.35;margin:0 0 .4rem} .policy-head .meta{font-family:var(--font-ui);font-size:.85rem;color:var(--ink-muted)} .policy-head .rule{margin:1.7rem 0 0;width:40px} .policy h2{ font-family:var(--font-display);font-size:var(--step-1);font-weight:600;line-height:1.4; color:var(--ink);margin:2.4em 0 .5em;padding-left:.95rem;position:relative; } .policy h2::before{ content:"";position:absolute;left:0;top:.32em;width:3px;height:1.05em; background:var(--vermilion);border-radius:2px; } .policy p{margin:.8rem 0} .policy ul{margin:.8rem 0;padding-left:1.3rem} .policy li{margin:.4rem 0} .policy li::marker{color:var(--vermilion-ink)} /* -------------------------------------------------------------------------- 6. Game policy pages -------------------------------------------------------------------------- */ .policy-game{padding-block:clamp(2.2rem,6vw,3.6rem) clamp(3rem,8vw,4.5rem)} .ghero{padding:0 0 1.9rem;border-bottom:1px solid var(--line)} .ghero .eyebrow{margin-bottom:1.3rem} .ghero h1{ font-size:var(--step-3);font-weight:800;line-height:1.25;letter-spacing:-0.02em; margin:.2rem 0 .1rem;text-wrap:balance; } .ghero .sub{font-size:1.06rem;color:var(--ink-muted);margin:.7rem 0 0;max-width:36rem;text-wrap:pretty} .gmeta{ display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:1.5rem 0 0; font-family:var(--font-ui);font-size:.8rem;letter-spacing:.05em;color:var(--ink-muted); } .gmeta span{display:inline-flex;align-items:center;gap:.5rem} .gmeta .dot{ width:.5rem;height:.5rem;transform:rotate(45deg); background:var(--game-motif);display:inline-block; } /* Dungeon Diary — leather book emblem (brand colors, same in both schemes) */ .emblem{margin:1.4rem 0 .2rem} .book{ position:relative;width:3rem;height:3.9rem;border-radius:3px 6px 6px 3px; background:linear-gradient(135deg,#4E3826,#3A2A1C 58%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 2px 0 0 rgba(0,0,0,.28),0 5px 12px rgba(0,0,0,.28); } .book::before{ content:"";position:absolute;left:5px;top:7%;bottom:7%;width:2px; background:rgba(0,0,0,.32);border-radius:2px; } .crest{ position:absolute;left:calc(50% + 2px);top:50%;width:1.15rem;height:1.15rem; transform:translate(-50%,-50%) rotate(45deg);border-radius:2px; background:linear-gradient(135deg,#F0D28A,#C8A24E 62%); box-shadow:0 0 0 1px #9A7A38,0 1px 3px rgba(0,0,0,.45); } .crest::after{ content:"";position:absolute;left:50%;top:14%;bottom:14%;width:2px; transform:translateX(-50%) rotate(-45deg);background:#9A7A38;border-radius:2px; } .clasp{ position:absolute;right:-3px;top:50%;transform:translateY(-50%); width:7px;height:1.15rem;border-radius:2px; background:linear-gradient(90deg,#B8945A,#8A6A3A); box-shadow:0 1px 3px rgba(0,0,0,.45); } /* Logic Dungeon — puzzle tile row */ .tiles{display:flex;gap:.45rem;margin:1.4rem 0 .2rem} .tile{ width:2.2rem;height:2.2rem;display:grid;place-items:center; border:1px solid var(--line);border-radius:6px;background:var(--paper-raised); font-family:var(--font-display);font-size:1.05rem;line-height:1;color:var(--ink); } .tile.exit{border-color:var(--accent-ink);color:var(--accent-ink)} @media (max-width:520px){.tile{width:1.95rem;height:1.95rem;font-size:.95rem}} /* TL;DR card */ .tldr{margin:2.2rem 0 .5rem} .tldr h2{margin:.55rem 0 .8rem;font-size:1.25rem;font-weight:600;line-height:1.5} .tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .tldr li{position:relative;padding-left:1.7rem} .tldr li::before{ content:"◆";position:absolute;left:0;top:.05em; color:var(--game-motif);font-size:.75rem; } /* Numbered sections */ .policy-game section{padding:2.3rem 0 .6rem;border-bottom:1px solid var(--line)} .policy-game section:last-of-type{border-bottom:0} .shead{display:flex;align-items:baseline;gap:.85rem;margin:0 0 .4rem} .idx{ font-family:var(--font-display);font-style:italic;font-size:.95rem;font-weight:600; color:var(--accent-ink);letter-spacing:.04em; } .mark{ width:.6rem;height:.6rem;border-radius:2px;flex:0 0 auto;align-self:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .policy-game h2{font-size:var(--step-1);font-weight:600;line-height:1.35;margin:0;text-wrap:balance} .policy-game section p{margin:.85rem 0} .policy-game section p:first-of-type{margin-top:.65rem} ul.plain{margin:.7rem 0;padding-left:1.3rem} ul.plain li{margin:.35rem 0} ul.plain li::marker{color:var(--game-motif)} /* Contact card */ .gcontact{ margin:2.4rem 0 0; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem; } .gcontact > div{max-width:26rem} .gcontact .eyebrow{margin-bottom:.4rem} .gcontact p{margin:0;color:var(--ink)} @media (max-width:520px){.gcontact{flex-direction:column;align-items:flex-start}} .colophon{ margin:2.6rem 0 0;text-align:center;line-height:1.7; font-family:var(--font-ui);font-size:.82rem;letter-spacing:.02em;color:var(--ink-muted); } /* -------------------------------------------------------------------------- 7. 404 -------------------------------------------------------------------------- */ .notfound{ position:relative;overflow:hidden;text-align:center; padding:calc(var(--section-y)*1.3) 0; } .notfound .inner{position:relative;max-width:var(--w-content);margin:0 auto;padding-inline:var(--pad-x)} .nf-code{ font-family:var(--font-display);font-weight:600;line-height:1; font-size:clamp(4.5rem,12vw,7rem);margin:.4rem 0 .8rem;color:var(--ink); } .notfound p{color:var(--ink-muted);max-width:40ch;margin:0 auto 2rem}