/* ═══════════════════════════════════════════════════════════════ SAINT CLAIR — THE LANGUAGE, ONE GRAMMAR One file. Tokens, faces, and the whole vocabulary. Web copy of 08_creative-studio/standards/saint-clair.css; do not edit here. fonts resolve at ../saint-clair/typography/. Web copies (assetsc/css/) are written by saint-clair-css-publish.py beside this file; never edit a copy. ═══════════════════════════════════════════════════════════════ THE FIVE LAWS 1 ONE GROUND. A surface is violet or it is cream. Never both in one field, never a gradient, never a tint panel. 2 THE EDGE. Everything hangs from the left edge at one indent (--i). Nothing is centred. Ever. 3 THE WIRE. Structure is shown as structure: the gold lattice. If content has parts, the parts are cells. No cards, no shadows, no radius, no fills. 4 TWO SCALES. System (mono, tiny) and Monument (Sectra Black, sized to its cell). Body is the one voice between them. The monument has no little brother: no h3, no h4. Long reading documents (papers) keep their own ladder: saint-clair-papers.css, until the papers review. 5 LAVENDER SPEAKS, CREAM NAMES, GOLD WIRES. On violet: lavender is text, cream is a name or the operative term, gold is wire and system label only. On cream: violet speaks, violet-grey is system, gold wires. COROLLARIES a THE NAME. "Saint Clair" is never a monument: it is the wordmark at any size. An entity is named in the system voice beside or under the wordmark (SAINT CLAIR + lavender mono CAPITAL, .sys--ent), never inside it. b A PERSON. At display size a person's name is a signature: .sig, Sectra Light. At text size it is Jost Regular in cream. c THE NUMERAL. A gold numeral (.mon--num) IS the surface's one gold object. A surface with a gold numeral carries no .act. d THE TAG. The 9px tag is the one sanctioned tint: the terminal's highlight. e ONE EDGE. A full-window lattice is inset by --gap on all sides (.lat--win). Cell text and hero text start on the same line: --i from the window. Cells take horizontal padding var(--edge). f FIGURES. Inside a table, figures align right so decimals meet. Nothing else does. g NARROW CELL. Where a cell cannot hold the monument, the value drops to System. h DASHED. A dashed wire means closed, absent or yet to come. j KOREAN MASS. Black Han Sans mass is cream, as on the posters. Latin monuments are lavender; a monument that is a name (a slot value, a door of another house) may be cream. k THE BAND. A poster or social image in the Gongdeok register may close on one solid gold band carrying the mark, the wordmark and one terminal line. It is that surface's gold object. i SISTER. A sister brand enters as a muted overlay of its colour on the violet. It is the one permitted tint panel, and it carries no sister mark. ═══════════════════════════════════════════════════════════════ */ @font-face{font-family:'Jost';font-weight:300;src:url('../fonts/jost/Jost-Light.woff2') format('woff2');font-display:swap} @font-face{font-family:'Jost';font-weight:400;src:url('../fonts/jost/Jost-Regular.woff2') format('woff2');font-display:swap} @font-face{font-family:'Jost';font-weight:500;src:url('../fonts/jost/Jost-Medium.woff2') format('woff2');font-display:swap} @font-face{font-family:'Space Mono';font-weight:400;src:url('../fonts/space-mono/SpaceMono-Regular.woff2') format('woff2');font-display:swap} @font-face{font-family:'Space Mono';font-weight:700;src:url('../fonts/space-mono/SpaceMono-Bold.woff2') format('woff2');font-display:swap} @font-face{font-family:'GT Sectra Display';font-weight:300;src:url('../fonts/gt-sectra/GT-Sectra-Display-Light.woff2') format('woff2');font-display:swap} @font-face{font-family:'GT Sectra Display';font-weight:300;font-style:italic;src:url('../fonts/gt-sectra/GT-Sectra-Display-Light-Italic.woff2') format('woff2');font-display:swap} @font-face{font-family:'GT Sectra Display';font-weight:400;src:url('../fonts/gt-sectra/GT-Sectra-Display-Regular.woff2') format('woff2');font-display:swap} @font-face{font-family:'GT Sectra Display';font-weight:900;src:url('../fonts/gt-sectra/GT-Sectra-Display-Super.woff2') format('woff2');font-display:swap} @font-face{font-family:'KoPub Dotum';font-weight:300;src:url('../fonts/kopub/KoPubDotum-Light.woff2') format('woff2');font-display:swap} @font-face{font-family:'KoPub Dotum';font-weight:500;src:url('../fonts/kopub/KoPubDotum-Medium.woff2') format('woff2');font-display:swap} @font-face{font-family:'KoPub Dotum';font-weight:700;src:url('../fonts/kopub/KoPubDotum-Bold.woff2') format('woff2');font-display:swap} @font-face{font-family:'KoPub Batang';font-weight:300;src:url('../fonts/kopub/KoPubBatang-Light.woff2') format('woff2');font-display:swap} @font-face{font-family:'Black Han Sans';font-weight:400;src:url('../fonts/black-han-sans/BlackHanSans-Regular.woff2') format('woff2');font-display:swap} :root{ /* palette — five, unchanged since v5 */ --v:#1A1445; /* violet · the ground · CMYK 100 95 20 55 */ --c:#FAF9F5; /* cream · names, paper · CMYK 2 2 4 0 */ --g:#CAAA63; /* gold · wire, system · CMYK 20 30 70 10 */ --l:#B0ADC0; /* lavender · speech on violet · CMYK 30 28 15 5 */ --m:#8A8698; /* muted · metadata */ --vg:#5A5670; /* violet-grey · system voice on cream */ --paper:#F4F0E8; /* reading paper (papers only) */ /* faces */ --S:'GT Sectra Display',Georgia,serif; --J:'Jost','KoPub Dotum',sans-serif; --O:'Space Mono','KoPub Dotum',monospace; --K:'KoPub Dotum','Jost',sans-serif; --KS:'KoPub Batang','GT Sectra Display',serif; --KM:'Black Han Sans','KoPub Dotum',sans-serif; /* poster mass; on screen, one word as a Korean page's monument */ /* the wire */ --wire:1px; --frame:2px; --gap:3px; --wire-c:rgba(202,170,99,.62); /* the edge */ --i:clamp(20px,3.4vw,64px); --edge:calc(var(--i) - var(--gap)); /* the three sizes */ --sys:clamp(9px,.72vw,12px); --body:clamp(17px,1.7vw,28px); --pad:clamp(16px,2.4vw,56px); --ghost:.06; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body.sc7{margin:0;background:var(--v);color:var(--l);font:300 var(--body)/1.45 var(--J);-webkit-font-smoothing:antialiased;overflow-x:hidden} body.sc7.on-cream,.on-cream{background:var(--c);color:var(--v)} .sc7 a{color:var(--c);text-decoration:underline;text-decoration-color:var(--g);text-decoration-thickness:1px;text-underline-offset:.18em} .on-cream a{color:var(--v)} :where(.sc7) p{margin:0 0 .9em} :where(.cell)>p:last-child{margin-bottom:0} .sc7 b,.sc7 strong,.name{font-weight:400;color:var(--c)} .on-cream b,.on-cream strong,.on-cream .name{color:var(--v);font-weight:500} /* THE EDGE */ .edge{padding-left:var(--i);padding-right:var(--i)} /* SYSTEM — the terminal voice. Always tiny, always mono. */ .sys{font:400 var(--sys)/1.6 var(--O);letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin:0} .sys--mute{color:var(--m)} .sys--cream{color:var(--c)} .sys--plain{letter-spacing:.06em;text-transform:none} .on-cream .sys{color:var(--vg)} .on-cream .sys--gold{color:#8C7335} .sys--ent{color:var(--l)} .on-cream .sys--ent{color:var(--vg)} /* entity line and descriptor: system voice, as on the card; never gold */ /* WORDMARK — Jost Medium, capitals, 0.2em. One face, one weight, one tracking. Below 12px rendered size use .wm--s (0.28em optical). Never Sectra. */ .wm{font:500 clamp(11px,.95vw,16px)/1 var(--J);letter-spacing:.2em;text-transform:uppercase;color:var(--c);margin:0} .wm--s{font-size:8px;letter-spacing:.28em} .on-cream .wm{color:var(--v)} /* MONUMENT — Sectra Black capitals. One to three words. Sized to its cell: the element's nearest .cell / .lat / .mon-box is the container. */ /* Longhands where a size is in cqw: a print engine without container units (WeasyPrint) drops only the size, never the face. */ .mon-box,.cell{container-type:inline-size} .mon{font-family:var(--S);font-weight:900;font-size:clamp(34px,17cqw,300px);line-height:.9;letter-spacing:-.024em;text-transform:uppercase;color:var(--l);margin:0;text-wrap:balance} .mon--win{font-size:clamp(44px,11.5vw,300px)} /* sized to the window, outside any cell */ .mon--fit{font-size:clamp(32px,25cqw,480px)} /* one word that fills its wire */ .mon--num{color:var(--g)} .mon,.mon--num{font-variant-numeric:lining-nums} /* one word, wire to wire: set --em to the word's measured width in em (Sectra Super, capitals, -0.024em). CROSS-BORDER 7.35 · INVESTMENT 6.02 · TESSERACTIC 6.33 · THE PRACTICE 6.76 · CAPITAL 4.01 · CHANNEL 4.50 */ .mon--fill{font-size:calc(100cqw / var(--em,6));white-space:nowrap} /* THE MONUMENT NEVER SPELLS THE NAME. "Saint Clair" is the wordmark (Jost Medium) at any size. A person's name is a signature: Sectra Light, never Black. */ .sig{font:300 clamp(28px,4.4vw,84px)/1.05 var(--S);letter-spacing:-.01em;color:var(--c);margin:0} .on-cream .sig{color:var(--v)} .wm--xl{font-size:clamp(22px,4.6cqw,96px);line-height:1.25} /* obsessive-scale numbers */ .on-cream .mon{color:var(--v)} .mon--kr{font-family:var(--K);font-weight:700;letter-spacing:-.03em;line-height:1.02;word-break:keep-all} .mass--kr{font-family:var(--KM);font-weight:400;font-size:clamp(60px,22cqw,520px);line-height:.98;letter-spacing:-.01em;color:var(--c);margin:0;word-break:keep-all} /* LINE — the one soft sentence. Sectra Light. Once per surface. */ .line{font:300 clamp(24px,3.3vw,60px)/1.18 var(--S);letter-spacing:-.01em;color:var(--c);margin:0;max-width:22em} .on-cream .line{color:var(--v)} /* BODY — one voice */ .body{font:300 var(--body)/1.45 var(--J);color:var(--l);margin:0} .body--s{font-size:clamp(13px,1.05vw,17px)} .on-cream .body{color:var(--v)} [lang=ko],.kr{font-family:var(--K);word-break:keep-all;line-height:1.6} /* a Korean run keeps its own face when it is a mass or a line: lang="ko" must not reset it to KoPub Dotum */ .mass--kr:is([lang=ko],.kr){font-family:var(--KM);line-height:.98} .line--kr:is([lang=ko],.kr){font-family:var(--KS);line-height:1.35} /* THE WIRE — rule, lattice */ .wire{display:block;height:1px;width:clamp(28px,4vw,72px);background:var(--g);border:0;margin:0} .sc7 hr{border:0;border-top:1px solid var(--g);opacity:.4;margin:0 0 0 var(--i);max-width:240px} /* THE LATTICE — the nobody styled further. Grid version for screens (.lat > .cell), table version for print (table.lat). */ .lat{display:grid;gap:var(--gap);width:100%} .lat>.cell,.cell{border:var(--wire) solid var(--wire-c);padding:var(--pad);min-width:0;position:relative} .lat--win{padding:var(--gap)} .lat.lat--win>.cell,.lat--win>.cell{padding-left:var(--edge);padding-right:var(--edge)} .cell--tight{padding:clamp(10px,1.2vw,22px)} .cell--void{border:1px dashed var(--g)}.cell--void>*{opacity:.4} table.lat{display:table;border-collapse:separate;border-spacing:var(--gap);border:var(--frame) solid var(--g);width:100%} table.lat th,table.lat td{border:var(--wire) solid var(--g);padding:8px 12px;text-align:left;vertical-align:top} table.lat th{font:400 var(--sys)/1.5 var(--O);letter-spacing:.08em;text-transform:uppercase;color:var(--g)} table.lat td{font:300 clamp(13px,1.05vw,17px)/1.4 var(--J)} .on-cream table.lat th{color:#8C7335} .span2{grid-column:span 2}.span3{grid-column:span 3}.span-all{grid-column:1/-1}.row2{grid-row:span 2}.row3{grid-row:span 3} /* TAGS — terminal badges. 9px. The violence is the ratio to the monument. */ .tag{display:inline-block;font:400 9px/1 var(--O);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;margin:0 4px 4px 0} .tag--gold{background:rgba(202,170,99,.15);color:var(--g)} .tag--ghost{background:rgba(250,249,245,.07);color:var(--l)} .tag--solid{background:rgba(250,249,245,.12);color:var(--c)} /* THE ACT — the single solid gold object a surface may carry: its one action. */ .act{display:inline-block;background:var(--g);color:var(--v)!important;font:700 clamp(11px,.9vw,14px)/1 var(--O);letter-spacing:.12em;text-transform:uppercase;text-decoration:none!important;padding:1.1em 1.4em;border:0;border-radius:0} /* THE MARK — one, vertical, never gold, never decomposed. Paths are canonical. */ .mark{display:block;width:clamp(10px,1.3vw,22px);height:auto;fill:var(--c)} .on-cream .mark{fill:var(--v)} .ghost{position:fixed;right:-22vh;top:50%;transform:translateY(-50%);height:160vh;width:auto;fill:var(--l);opacity:var(--ghost);pointer-events:none;z-index:0} .on-cream .ghost{fill:var(--v);opacity:.045} /* NAV — the terminal directory, fixed top right. */ .nav{position:fixed;top:clamp(14px,2vw,32px);right:clamp(14px,2vw,32px);z-index:5;text-align:left;font:400 clamp(11px,.95vw,14px)/1.9 var(--O);text-transform:uppercase} .nav a{display:block;color:var(--l);opacity:.7;text-decoration:none} .nav a.ext{font-size:.86em;opacity:.45} .cur{font-family:'Space Mono',monospace;color:var(--g);animation:sc7blink 1s step-end infinite} @keyframes sc7blink{50%{opacity:0}} @media (max-width:720px){.nav{display:none}} /* FEED — rows */ .feed{list-style:none;margin:0;padding:0} .feed li{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,1.1vw,20px);padding:clamp(10px,1vw,18px) 0;border-top:1px solid rgba(250,249,245,.12)} .feed li:first-child{border-top:0} .feed img,.feed .ph{width:clamp(88px,7.5vw,140px);height:clamp(50px,4.2vw,79px);object-fit:cover;background:#241C58;display:block} .feed a{font:400 clamp(13px,1vw,18px)/1.3 var(--J);text-decoration:none} .feed time{display:block;font:400 9px/1.6 var(--O);letter-spacing:.08em;text-transform:uppercase;color:var(--m)} /* COLOPHON */ .colophon{font:400 var(--sys)/1.9 var(--O);letter-spacing:.06em;color:var(--m)} .colophon b{color:var(--l);font-weight:400} .on-cream .nav a{color:var(--vg);opacity:1}.on-cream .tag--gold{color:#8C7335} /* Korean line: the counterpart of .line */ .line--kr{font-family:var(--KS);font-weight:300;word-break:keep-all;line-height:1.35;letter-spacing:-.02em} .on-cream .colophon{color:var(--vg)}.on-cream .colophon b{color:var(--v)} /* Korean system and action voices: mono is illegible in Hangul */ .sys--kr{font:500 clamp(12px,.95vw,14px)/1.6 var(--K);letter-spacing:.04em;text-transform:none} .act--kr{font:700 clamp(14px,1.3vw,20px)/1 var(--K);letter-spacing:0;text-transform:none} /* spacing: the dilettante's tools, kept. */ .sp-1{height:8px}.sp-2{height:16px}.sp-3{height:32px}.sp-4{height:64px}.sp-5{height:clamp(64px,10vw,160px)}.sp-6{height:clamp(96px,16vw,240px)} @media (max-width:900px){.lat{grid-template-columns:1fr!important}.lat>.cell{grid-column:auto!important;grid-row:auto!important}} @media print{.nav,.cur{display:none}.ghost{position:absolute}} /* PRINT-READY: render.py --print-ready marks . The stock is the cream, so the cream ground is not printed; violet still is. */ html.print-ready body.sc7.on-cream,html.print-ready .on-cream{background:none}