/* ============================================================ xiexiemili.com — shared stylesheet TYPEFACE NOTE. Kochi Mincho is the sitewide face, but it ships two kinds of hole: 1. characters absent from its cmap (17 traditional forms such as 絕 and 值, where it carries the japanese 絶 and 値) 2. characters PRESENT in its cmap but drawn as empty glyphs. every polish diacritic is one of these, plus · – — › ž. this is the nastier case: the browser sees the character mapped, so it never falls back, and prints nothing. "bronie słowa" came out as "bronie sowa". fix: two tiny subsets declared FIRST in the stack, each pinned to an exact unicode-range so they only ever claim the broken codepoints and Kochi keeps everything else. fallback-latin 4 KB Nimbus Roman polish, accents, punctuation fallback-han 5.6 KB Noto Serif TC the 17 missing han forms kochi.woff2 is ALSO a subset, 144 KB, cut from the 9 MB 東風明朝Kochi Mincho.ttf down to the characters this site actually uses, the interactive collection included. the ttf stays in the folder as the source and never ships. ADD NEW CHARACTERS TO THE COPY AND YOU MUST REBUILD IT, or they render in the visitor's own serif: python3 -m fontTools.subset "東風明朝Kochi Mincho.ttf" \ --text-file=chars.txt --output-file=kochi.woff2 --flavor=woff2 ============================================================ */ @font-face{ font-family:'KochiMincho'; src:url('kochi.woff2') format('woff2'); font-display:swap; } @font-face{ font-family:'FallbackLatin'; src:url('fallback-latin.woff2') format('woff2'); font-display:swap; unicode-range:U+00AB,U+00B7,U+00BB,U+00C0-00CA,U+00CD,U+00CE,U+00D3,U+00D4, U+00D6,U+00D7,U+00DA,U+00DC,U+00DF,U+00E0,U+00E2,U+00E7-00EA,U+00EE,U+00F1, U+00F3,U+00F4,U+00F7,U+00FB,U+0104-0107,U+0118,U+0119,U+0141-0144, U+015A,U+015B,U+0179-017C,U+017E,U+2013,U+2014,U+2018,U+2019,U+201C-201E, U+2022,U+2026,U+2039,U+203A,U+2190-2193,U+2550; } @font-face{ font-family:'FallbackHan'; src:url('fallback-han.woff2') format('woff2'); font-display:swap; unicode-range:U+25B6,U+503C,U+5167,U+541E,U+555F,U+5920,U+5FB5,U+6525,U+6BCF, U+6DDA,U+6EAB,U+72C0,U+7942,U+7D55,U+812B,U+8173,U+8AAA,U+8E29; } :root{ /* house palette, prepared 30 july 2026: hot pink, near-black, mint, off-white. the greys are derived from it, neutral now rather than the old warm browns. */ --void:#0d0d0d; --bone:#f0f0f0; --rose:#f20ca2; --ash:#8f8f8f; --dim:#2a2a2a; --skin:#d8d8d8; --mint:#8cfad8; /* bright, the poster page. mint cannot carry text on off-white, so it stays an accent and the headings sit in the near-black. */ --paper:#f0f0f0; --ink:#0d0d0d; --cobalt:#0d0d0d; --hot:#f20ca2; /* the two fallbacks MUST come before Kochi. see note above. */ --serif:'FallbackLatin','FallbackHan','KochiMincho','Noto Serif TC',serif; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:var(--serif); background:var(--void); color:var(--bone); line-height:1.8; font-weight:400; -webkit-font-smoothing:antialiased; } body.bright{background:var(--paper); color:var(--ink);} img{max-width:100%; height:auto; display:block;} a{color:inherit;} /* ---------- language spans ---------- EN is the source, PL and ZH sit beside it in the markup. lang.js sets and remembers the choice. */ /* hide the inactive languages and never set display on the active one. display:revert used to be on the active side and it threw away author values, so .who{display:inline-block} came back as plain inline. !important because a page-level rule setting display on the same element has equal specificity to .l-pl and, sitting later in the cascade, used to win: that is how the polish button ended up next to the english one. */ html[lang="en"] .l-pl,html[lang="en"] .l-zh, html[lang="pl"] .l-en,html[lang="pl"] .l-zh, html[lang="zh"] .l-en,html[lang="zh"] .l-pl{display:none !important;} /* 中文 stays hidden until that copy exists. delete this line then. */ #langbar a[data-lang="zh"]{display:none;} /* copy that exists in POLISH ONLY, prices being the reason it exists. złoty figures anchor foreign festivals low, so they stay off the english. it must not use .l-pl: every .l-pl is paired 1:1 with an .l-en and that pairing is what the copy review round-trip relies on. */ html:not([lang="pl"]) .pl-only{display:none !important;} #langbar{display:inline-flex;gap:.55rem;align-items:center; padding-left:.7rem;margin-left:.2rem;border-left:1px solid rgba(240,240,240,.14);} #langbar a{font-size:12px;letter-spacing:.16em;color:rgba(240,240,240,0.74); text-decoration:none;transition:color .3s;} #langbar a:hover{color:var(--mint);} #langbar a[aria-current="true"]{color:var(--rose);} /* ---------- masthead ---------- */ .masthead{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.1rem clamp(1.2rem,4vw,3rem); background:rgba(13,13,13,.88); backdrop-filter:blur(10px); border-bottom:1px solid rgba(240,240,240,.09); } body.bright .masthead{ background:rgba(13,13,13,.94); border-bottom:1px solid rgba(240,240,240,.12); } .mark{font-size:1rem; letter-spacing:.1em; color:var(--bone); text-decoration:none; line-height:1.25;} .mark small{display:block; font-size:10px; letter-spacing:.2em; color:var(--ash);} .mark:hover{color:#fff;} .navlinks{display:flex; gap:clamp(.9rem,2.5vw,1.9rem); align-items:center; flex-wrap:wrap;} .navlinks a{ font-size:12px; letter-spacing:.22em; color:rgba(240,240,240,0.81); text-decoration:none; transition:color .35s; white-space:nowrap; } .navlinks a:hover{color:var(--mint);} .navlinks a[aria-current]{color:var(--rose);} /* ---------- layout ---------- */ .wrap{max-width:860px; margin:0 auto; padding:0 clamp(1.2rem,5vw,2rem);} .wide{max-width:1180px;} section{padding:clamp(3rem,8vw,6rem) 0;} section+section{border-top:1px solid rgba(240,240,240,.07);} body.bright section+section{border-top:1px solid rgba(13,13,13,.12);} /* ---------- type ---------- */ .eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:lowercase; color:var(--ash); margin-bottom:1.6rem; } body.bright .eyebrow{color:var(--hot);} h1{font-size:clamp(2.4rem,7.5vw,5rem); font-weight:400; letter-spacing:.06em; line-height:1.12;} h2{font-size:clamp(1.5rem,4vw,2.4rem); font-weight:400; letter-spacing:.09em; line-height:1.3; margin-bottom:1.6rem;} h3{font-size:clamp(1.05rem,2.4vw,1.35rem); font-weight:400; letter-spacing:.1em; margin-bottom:.7rem;} body.bright h2,body.bright h3{color:var(--cobalt);} p{margin-bottom:1.4rem; max-width:62ch;} p:last-child{margin-bottom:0;} .lede{font-size:clamp(1.05rem,2.3vw,1.3rem); line-height:1.85; color:var(--skin);} body.bright .lede{color:var(--ink);} .quiet{color:var(--ash); font-size:1rem;} strong{font-weight:400; color:var(--bone);} body.bright strong{color:var(--cobalt);} em{font-style:normal; color:var(--ash); font-size:.88em; letter-spacing:.04em;} /* ---------- cards ---------- */ .cards{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:2rem;} .card{ border:1px solid rgba(240,240,240,.14); padding:1.6rem 1.5rem; transition:border-color .4s; } .card:hover{border-color:rgba(140,250,216,.5);} body.bright .card{border-color:rgba(13,13,13,.18); background:rgba(255,255,255,.5);} body.bright .card:hover{border-color:var(--hot);} .card h3{margin-bottom:.5rem;} .card p{font-size:.98rem; margin-bottom:.5rem;} .card .t{font-size:12px; letter-spacing:.24em; color:var(--ash);} body.bright .card .t{color:var(--hot);} /* ---------- lists ---------- */ ul.plain{list-style:none; max-width:62ch;} ul.plain li{position:relative; padding-left:1.3rem; margin-bottom:.75rem;} ul.plain li::before{content:'·'; position:absolute; left:.3rem; color:var(--rose);} body.bright ul.plain li::before{color:var(--hot);} /* ---------- sample entry / pull box ---------- */ .box{ border-left:2px solid var(--rose); padding:1.3rem 1.6rem; margin:2rem 0; max-width:62ch; background:rgba(255,255,255,.02); } body.bright .box{border-left-color:var(--hot); background:rgba(255,255,255,.5);} .box dt{font-size:12px; letter-spacing:.28em; color:var(--ash); margin-top:.8rem;} .box dt:first-child{margin-top:0;} .box dd{margin-bottom:.2rem; font-size:1rem;} .box dd.zh{font-size:1.25rem; letter-spacing:.08em; line-height:1.7;} /* ---------- buttons ---------- */ .btn{ display:inline-block; margin-top:1.8rem; border:1px solid rgba(240,240,240,.3); border-radius:2px; padding:.85rem 1.9rem; font-size:12px; letter-spacing:.28em; color:var(--bone); text-decoration:none; transition:all .4s; font-family:inherit; } .btn:hover{border-color:var(--mint); color:var(--mint);} body.bright .btn{border-color:var(--cobalt); color:var(--cobalt);} body.bright .btn:hover{border-color:var(--hot); color:var(--hot); background:rgba(255,45,120,.06);} /* ---------- gallery ---------- */ .gallery{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:2rem;} .gallery img{width:100%; object-fit:cover; cursor:zoom-in;} figure{margin:2.5rem 0;} figure img{width:100%;} figcaption{margin-top:.7rem; font-size:12px; letter-spacing:.24em; color:var(--ash);} .slot{ display:flex; align-items:center; justify-content:center; min-height:210px; border:1px dashed rgba(240,240,240,.2); font-size:12px; letter-spacing:.26em; color:rgba(240,240,240,0.72); text-align:center; padding:1rem; } /* ---------- lightbox ---------- */ #lb{position:fixed; inset:0; z-index:2000; background:rgba(4,3,3,.95); display:none; align-items:center; justify-content:center; padding:5vh 4vw; cursor:zoom-out;} #lb.on{display:flex;} #lb img{max-width:94vw; max-height:90vh; object-fit:contain;} #lb .x{position:absolute; top:3vh; right:4vw; font-size:1.7rem; color:rgba(240,240,240,0.82);} /* ---------- footer ---------- */ .foot{ padding:3.5rem clamp(1.2rem,5vw,2rem); text-align:center; border-top:1px solid rgba(240,240,240,.09); background:var(--void); color:var(--ash); } .foot a{color:var(--rose); text-decoration:none;} .foot a:hover{color:var(--mint);} .foot .row{font-size:12px; letter-spacing:.2em; margin-bottom:.7rem;} .foot .sig{font-size:12px; letter-spacing:.34em; color:rgba(240,240,240,0.73); margin-top:1.6rem;} /* ---------- phones ---------- the nav used to drop position:sticky here and wrap into two or three rows of 11px links, so getting to another page meant scrolling all the way back up and aiming at text. now it stays stuck to the top as one row that scrolls sideways, every link is 44px tall, and EN / PL is parked in the corner where it cannot scroll out of reach. */ @media(max-width:620px){ .masthead{ position:sticky; top:0; flex-direction:column; align-items:stretch; gap:.2rem; padding:.55rem 1rem .1rem; } .mark{align-self:flex-start; padding-right:4.5rem;} .navlinks{ gap:0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .navlinks::-webkit-scrollbar{display:none;} .navlinks a{ min-height:44px; display:flex; align-items:center; padding:0 .7rem; flex:0 0 auto; } .navlinks a:first-child{padding-left:0;} .masthead #langbar{ position:absolute; top:.5rem; right:1rem; border-left:none; padding-left:0; margin:0; } #langbar a{min-height:44px; display:flex; align-items:center; padding:0 .35rem;} p{max-width:none;} }