/* Tokyo Claw Days support reading room; system fonts and local styles. */
:root { color-scheme: light; --paper:#fff8e8; --ink:#263c32; --forest:#254b40; --leaf:#e9efd9; --gold:#e8c567; --line:#c6cfb8; --muted:#536554; }
* { box-sizing:border-box; }
html { scroll-padding-top:1.5rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"PingFang TC","Hiragino Kaku Gothic ProN","Apple SD Gothic Neo",sans-serif; font-size:17px; line-height:1.8; overflow-wrap:anywhere; }
a { color:var(--forest); text-decoration-thickness:.08em; text-underline-offset:.2em; }
a:hover { text-decoration-thickness:.15em; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--forest); outline-offset:4px; background:var(--gold); color:var(--ink); }
.skip { position:absolute; left:1rem; top:-10rem; padding:.7rem 1rem; background:var(--gold); z-index:10; }
.skip:focus { top:1rem; }
.wrap { max-width:1120px; margin:auto; padding:0 32px; }
.masthead { border-top:10px solid var(--forest); border-bottom:1px solid var(--line); }
.brand-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:27px; padding-bottom:20px; }
.brand { display:inline-flex; align-items:center; gap:15px; color:var(--forest); font-family:ui-rounded,"Hiragino Maru Gothic ProN","PingFang TC",sans-serif; font-size:clamp(1.15rem,2.8vw,1.6rem); font-weight:800; line-height:1.35; text-decoration:none; }
.shop-mark { display:inline-block; flex:0 0 38px; height:36px; width:38px; border:3px solid var(--forest); border-radius:4px 4px 0 0; position:relative; }
.shop-mark:before { content:""; position:absolute; left:-6px; top:-6px; width:44px; height:12px; border:2px solid var(--forest); border-radius:3px; background:repeating-linear-gradient(90deg,var(--paper) 0 7px,var(--forest) 7px 14px); }
.shop-mark:after { content:""; position:absolute; right:5px; bottom:0; height:17px; width:11px; border:2px solid var(--forest); border-bottom:0; }
.page-tabs,.languages { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; }
.page-tabs a,.languages a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:7px 12px; border:1px solid transparent; border-radius:5px; line-height:1.45; text-decoration:none; }
.page-tabs a { font-weight:700; }
.page-tabs a[aria-current="page"] { background:var(--forest); color:var(--paper); }
.languages { padding:8px 0 15px; font-size:15px; }
.languages a[aria-current="page"] { border-color:var(--forest); background:var(--leaf); font-weight:700; }
.language-label { color:var(--muted); margin-right:9px; font-size:14px; }
.draft { margin:28px 0 30px; padding:16px 21px; border-left:5px solid var(--gold); background:#f5edda; border-radius:0 7px 7px 0; }
.draft strong { display:block; font-size:15px; letter-spacing:.035em; color:var(--forest); }
.draft p { margin:5px 0 7px; max-width:94ch; color:var(--muted); font-size:14px; line-height:1.7; }
.draft small { font-size:14px; color:var(--muted); }
.reading { display:grid; grid-template-columns:minmax(150px,215px) minmax(0,1fr); gap:48px; align-items:start; padding-bottom:64px; }
.contents { position:sticky; top:24px; padding-top:8px; }
.contents h2 { margin:0 0 10px; color:var(--muted); font:700 13px/1.5 system-ui,sans-serif; letter-spacing:.06em; }
.contents ul { list-style:none; padding:0; margin:0; border-left:1px solid var(--line); }
.contents li { margin:0; }
.contents a { display:flex; align-items:center; min-height:44px; padding:8px 15px; font-size:14px; line-height:1.5; text-decoration:none; }
.contents a:hover { background:var(--leaf); }
article { min-width:0; max-width:73ch; }
article h1 { font-family:ui-rounded,"Hiragino Maru Gothic ProN","PingFang TC",sans-serif; font-size:clamp(1.8rem,3.8vw,2.5rem); letter-spacing:-.035em; line-height:1.3; font-weight:800; margin:0 0 26px; color:var(--forest); text-wrap:balance; }
article h2 { border-top:1px solid var(--line); padding-top:28px; margin:36px 0 13px; font-size:1.25rem; font-weight:750; line-height:1.5; color:var(--forest); }
article p { margin:0 0 19px; }
article ol { padding-left:1.65em; margin:0 0 22px; }
article li { padding-left:.3em; margin:0 0 14px; }
article strong { color:var(--forest); }
.footer { border-top:1px solid var(--line); padding:24px 0 36px; color:var(--muted); font-size:14px; }
.footer p { margin:0; }
@media (max-width:760px) {
 .wrap { padding-left:22px; padding-right:22px; }
 .brand-row { display:block; padding-top:25px; padding-bottom:9px; }
 .page-tabs { margin-top:18px; }
 .languages { gap:4px; }
 .languages a { padding-left:10px; padding-right:10px; }
 .language-label { flex-basis:100%; margin-bottom:2px; }
 .draft { margin:22px 0 25px; padding:14px 15px; }
 .reading { display:block; padding-bottom:36px; }
 .contents { position:static; margin-bottom:28px; padding:0; }
 .contents ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .contents a { font-size:14px; padding:8px 10px; }
 article { max-width:none; }
 article h1 { font-size:1.8rem; margin-bottom:23px; }
 article h2 { margin-top:30px; padding-top:23px; }
}
@media (max-width:360px) { .wrap { padding-left:16px; padding-right:16px; } .contents ul { grid-template-columns:1fr; } }
@media print { .skip,.languages,.page-tabs,.contents,.footer { display:none; } .reading { display:block; } .wrap { max-width:none; padding:0; } body { background:white; font-size:11pt; } article { max-width:none; } }

.effective { margin:1.5rem 0; color:var(--muted); font-size:14px; }