/* ============================================================ Vibetrek — Ghost theme · screen.css Tokens + base + components. Hand-written (no build step). ============================================================ */ :root{ --paper:#F7F4EF; --paper-2:#F1ECE3; --paper-3:#EAE3D7; --rule:#DCD5C8; --ink:#1A1A1A; --ink-2:#565249; --ink-3:#8E897D; --accent:#B14B36; --nav-red:#B14B36; --nav-green:#4E875C; --light:#F7F4EF; /* text over photos — fixed, never theme-flipped */ --serif:"Source Serif 4","Noto Serif SC",Georgia,serif; --grotesque:"Helvetica Neue",Helvetica,Arial,sans-serif; --margin:clamp(20px,7vw,132px); --measure:49rem; color-scheme:light; } /* ---------- dark mode: warm near-black paper, same warm-grey ladder inverted. Red brightens one step so small uppercase kickers keep their contrast; green follows for the running lights. Never pure black or white. ---------- */ @media (prefers-color-scheme: dark){ :root{ --paper:#171411; --paper-2:#1F1B18; --paper-3:#27221E; --rule:#37312A; --ink:#EDE8DE; --ink-2:#B6AEA0; --ink-3:#867F73; --accent:#C96B52; --nav-red:#C96B52; --nav-green:#619C6E; color-scheme:dark; } } *{ box-sizing:border-box; } html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); line-height:1.7; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } /* ---------- language chrome (EN default; .zh on flips it) ---------- */ /* high-specificity so it beats element rules like .brand{display:inline-flex} */ html:not(.zh) .s-zh{ display:none; } html.zh .s-en{ display:none; } /* ---------- logo mark ---------- */ .lights{ display:inline-flex; flex-direction:column; gap:0.16em; margin-left:0.12em; transform:translateY(0.12em); } .lights i{ width:0.13em; height:0.13em; border-radius:50%; display:block; } .lights .r{ background:var(--nav-red); } .lights .g{ background:var(--nav-green); } .brand{ font-family:var(--grotesque); font-weight:600; letter-spacing:-0.035em; display:inline-flex; align-items:center; line-height:1; color:inherit; } /* ---------- nav (text only; white over hero, ink elsewhere) ---------- */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:22px var(--margin); color:var(--light); transition:color .3s ease; } .site-nav > *{ position:relative; z-index:1; } .site-nav::before{ content:""; position:absolute; left:0; right:0; top:0; bottom:-52px; pointer-events:none; opacity:0; transition:opacity .3s ease; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); -webkit-mask-image:linear-gradient(to bottom,#000 46%,transparent); mask-image:linear-gradient(to bottom,#000 46%,transparent); } .site-nav.frost::before{ opacity:1; } .site-nav.ink{ color:var(--ink); } .site-nav .brand{ font-size:25px; opacity:0; filter:blur(6px); transition:opacity .3s ease, filter .3s ease; } .site-nav.show-brand .brand{ opacity:1; filter:none; } .site-nav-right{ display:flex; align-items:center; gap:clamp(16px,2.4vw,28px); font-family:var(--grotesque); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; } .site-nav-right a{ opacity:0.82; transition:opacity .2s; } .site-nav-right a:hover{ opacity:1; } .lang-switch{ letter-spacing:0.1em; } .site-nav a:focus-visible, .brand:focus-visible, .work:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; } /* (cover masthead crossfades out; header brand crossfades in — see app.js) */ /* ---------- cover ---------- */ .cover{ position:relative; height:100svh; min-height:600px; overflow:visible; color:var(--light); display:flex; } .cover::after{ clip-path:inset(0); } .cover-media{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0); } .cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; } .cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(12,11,10,0.34) 0%, rgba(12,11,10,0) 30%, rgba(12,11,10,0) 50%, rgba(12,11,10,0.72) 100%); } .cover-inner{ position:relative; z-index:2; align-self:flex-end; width:100%; padding:0 var(--margin) clamp(40px,7vw,86px); } .masthead{ font-family:var(--grotesque); font-weight:600; letter-spacing:-0.035em; font-size:clamp(56px,13vw,150px); line-height:0.9; display:inline-flex; align-items:center; color:var(--light); position:relative; z-index:40; will-change:opacity, filter, transform; } .tagline{ margin-top:clamp(18px,2.4vw,30px); font-weight:300; font-size:clamp(13px,4.2vw,24px); line-height:1.4; white-space:nowrap; opacity:0.95; font-style:italic; } html.zh .tagline{ font-style:normal; } .scrollcue{ position:absolute; left:var(--margin); bottom:24px; z-index:3; font-family:var(--grotesque); font-size:10px; letter-spacing:0.24em; text-transform:uppercase; opacity:0.7; animation:bob 2.6s ease-in-out infinite; } @keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} } /* the newest dispatch, quoted on the cover */ .cover-latest{ position:absolute; right:var(--margin); bottom:24px; z-index:3; display:flex; gap:14px; align-items:baseline; font-family:var(--grotesque); text-transform:uppercase; color:var(--light); max-width:46%; } .cover-latest .cl-k{ font-size:10px; letter-spacing:0.24em; opacity:0.6; white-space:nowrap; } .cover-latest .cl-t{ font-size:11px; letter-spacing:0.18em; line-height:1.7; border-bottom:1px solid rgba(247,244,239,0.38); padding-bottom:2px; transition:border-color .25s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cover-latest:hover .cl-t{ border-bottom-color:var(--light); } @media(max-width:720px){ .cover-latest{ display:none; } } /* ---------- gallery ---------- */ .gallery{ max-width:1320px; margin:0 auto; padding:clamp(64px,10vw,140px) var(--margin) clamp(40px,6vw,80px); counter-reset:plate; } .gallery-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(40px,6vw,72px); } .gallery-head .k{ font-family:var(--grotesque); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); white-space:nowrap; } .gallery-head .line{ height:1px; background:var(--rule); flex:1; } .gallery-head .n{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; } .work{ display:block; color:inherit; } .work .frame{ overflow:hidden; background:var(--paper-2); } .work .frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.7,.2,1); } .work:hover .frame img{ transform:scale(1.035); } .work .cap{ padding-top:18px; } .work .kicker{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; } /* plate number — echoes the in-essay figure numbering */ .work .kicker::before{ counter-increment:plate; content:counter(plate,decimal-leading-zero); font-size:10px; font-weight:600; letter-spacing:0.14em; color:var(--ink-3); font-variant-numeric:tabular-nums; } .work .kicker .no{ color:var(--accent); } .work .ttl{ font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; line-height:1.12; margin:0; display:inline; background-image:linear-gradient(var(--ink),var(--ink)); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .6s cubic-bezier(.2,.7,.2,1); padding-bottom:2px; } .work:hover .ttl{ background-size:100% 1px; } .work .route{ font-family:var(--grotesque); font-size:12.5px; letter-spacing:0.05em; line-height:1.6; color:var(--ink-2); margin-top:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .featured{ margin-bottom:clamp(56px,8vw,104px); } .featured .frame{ aspect-ratio:16/7; } /* bottom-edge alignment. NOT `last baseline`: a line-clamped box reports the baseline of its hidden final line, which shoves the deck way up. With both columns set in the same family, `end` lands within ~5px of true baseline alignment at every clamp size — measured, imperceptible, and robust. */ .featured .cap{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:18px clamp(40px,7vw,110px); align-items:end; padding-top:24px; } .featured .ttl{ font-size:clamp(30px,4vw,52px); text-wrap:balance; } .featured .route{ font-family:var(--serif); font-size:clamp(15px,1.25vw,17px); line-height:1.66; letter-spacing:0; color:var(--ink-2); margin:0; text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } html.zh .featured .route{ line-height:1.9; } @media(max-width:720px){ .featured .frame{ aspect-ratio:auto; } .featured .cap{ grid-template-columns:1fr; gap:14px; } .featured .route{ -webkit-line-clamp:4; } } .wall{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px) clamp(24px,4vw,56px); } .wall .work:nth-child(even){ margin-top:clamp(0px,7vw,90px); } .wall .frame{ aspect-ratio:4/3; } .wall .ttl{ font-size:clamp(22px,2.5vw,30px); } @media(max-width:720px){ .wall{ grid-template-columns:1fr; gap:48px; } .wall .work:nth-child(even){ margin-top:0; } /* single column: let every photo keep its native aspect, no crop */ .wall .frame{ aspect-ratio:auto; } .work .frame img{ height:auto; } } /* ---------- archive / author ---------- */ .archive{ padding-top:clamp(120px,16vw,180px); } .archive-head{ margin-bottom:clamp(40px,6vw,72px); } .archive-head .kicker{ font-family:var(--grotesque); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); } .archive-head h1{ font-weight:400; font-size:clamp(34px,5vw,56px); letter-spacing:-0.015em; margin:14px 0 0; } .archive-desc{ max-width:48ch; color:var(--ink-2); font-size:18px; line-height:1.8; margin:14px 0 0; } .archive-count{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); margin-top:18px; } /* ---------- post hero ---------- */ .essay .post-hero{ position:relative; min-height:660px; height:100svh; overflow:hidden; color:var(--light); display:flex; } .essay .post-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; } .essay .post-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,10,10,0.32) 0%, rgba(10,10,10,0) 28%, rgba(10,10,10,0) 46%, rgba(10,10,10,0.78) 100%); } .post-hero-inner{ position:relative; z-index:2; align-self:flex-end; width:100%; padding:0 var(--margin) clamp(36px,6vw,72px); } .post-hero-inner .kicker{ font-family:var(--grotesque); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; opacity:0.9; margin-bottom:20px; } .post-hero-inner .kicker .k-type{ color:#e0a99b; } .post-hero-inner .kicker .k-tags{ color:var(--light); opacity:0.82; } .post-title{ font-weight:400; font-size:clamp(38px,6.4vw,92px); line-height:0.99; letter-spacing:-0.015em; margin:0 0 clamp(26px,4vw,44px); max-width:16ch; text-wrap:balance; } /* flight-strip (built by app.js) */ .flight-strip{ display:grid; grid-auto-flow:column; grid-auto-columns:max-content; gap:clamp(20px,4vw,64px); border-top:1px solid rgba(247,244,239,0.32); padding-top:20px; } .flight-strip .fs .l{ font-family:var(--grotesque); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; opacity:0.6; margin-bottom:8px; } .flight-strip .fs .v{ font-family:var(--grotesque); font-weight:500; font-size:clamp(15px,1.5vw,20px); letter-spacing:0.02em; font-variant-numeric:tabular-nums; } .flight-strip .fs .v .arrow{ opacity:0.6; margin:0 0.25em; } @media(max-width:760px){ .flight-strip{ grid-auto-flow:row; grid-template-columns:1fr 1fr; } } /* ============================================================ POST BODY — Koenig (Ghost editor) content The native editor is mapped, card by card, onto the Vibetrek language, so writing normally yields the static-essay look. Four measures, set by one named grid: main — prose, quotes, lists (~ --measure, 608) mid — a single image, a touch wider (~ 850) wide — pairs, insets, statement frames (~ 1180) full — edge to edge Koenig adds .kg-width-wide / .kg-width-full itself; a plain image card lands in `mid`, wider than the prose it breaks. ============================================================ */ .post-body{ padding:clamp(60px,9vw,120px) 0 0; } /* standfirst = the post's Excerpt field (Ghost native) */ .standfirst{ max-width:var(--measure); margin:0 auto clamp(40px,6vw,68px); padding:0 var(--margin); } .standfirst p{ font-size:clamp(20px,2.3vw,26px); line-height:1.7; font-weight:300; color:var(--ink-2); margin:0; text-wrap:pretty; } html.zh .standfirst p{ line-height:1.92; } .gh-content{ display:grid; grid-template-columns: [full-start] minmax(var(--margin),1fr) [wide-start] minmax(0,110px) [mid-start] minmax(0,90px) [main-start] min(var(--measure), 100% - 2*var(--margin)) [main-end] minmax(0,90px) [mid-end] minmax(0,110px) [wide-end] minmax(var(--margin),1fr) [full-end]; } .gh-content > *{ grid-column:main; } /* ---- prose ---- */ .gh-content p{ font-size:19px; line-height:1.95; margin:0 0 1.5em; text-wrap:pretty; } html.zh .gh-content p{ line-height:1.9; } .gh-content > p:first-child{ margin-top:0; } .gh-content :is(ul,ol){ font-size:19px; line-height:1.9; padding-left:1.3em; margin:0 0 1.5em; } html.zh .gh-content :is(ul,ol){ line-height:1.86; } .gh-content li{ margin:0 0 .5em; padding-left:.2em; } .gh-content li::marker{ color:var(--ink-3); } .gh-content li > :is(ul,ol){ margin:.5em 0 0; } .gh-content a{ color:var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 42%, transparent); transition:border-color .2s; } .gh-content a:hover{ border-bottom-color:var(--accent); } .gh-content strong{ font-weight:600; } .gh-content em{ font-style:italic; } .gh-content :is(sup,sub){ font-size:.7em; line-height:0; } /* inline code → grotesque (reads flight numbers / airline codes cleanly) */ .gh-content :not(pre) > code{ font-family:var(--grotesque); font-weight:500; font-size:0.9em; letter-spacing:0.01em; font-variant-numeric:tabular-nums; color:var(--ink); background:none; padding:0; } .gh-content pre{ grid-column:main; background:#1A1A1A; color:#F7F4EF; padding:22px 24px; overflow:auto; font-size:14px; line-height:1.62; margin:clamp(28px,4vw,44px) 0; } .gh-content pre code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; } /* ---- headings ---- H2 → the signature kick-rule: a small grotesque section label with a hairline running to the right margin (most-used). H3 → a quiet serif subhead, for finer subdivisions. H4 → a small grotesque label, no rule. (Card headings are nested, so the `>` keeps them untouched.) */ .gh-content > :is(h2,h3,h4){ scroll-margin-top:90px; } .gh-content > h2{ grid-column:main; display:flex; align-items:center; gap:18px; margin:clamp(48px,7vw,90px) 0 clamp(22px,3.4vw,34px); font-family:var(--grotesque); font-weight:600; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--accent); line-height:1.35; } .gh-content > h2::after{ content:""; height:1px; background:var(--rule); flex:1 1 auto; } html.zh .gh-content > h2{ letter-spacing:0.18em; } .gh-content > h3{ grid-column:main; display:flex; align-items:baseline; gap:.6em; font-family:var(--serif); font-weight:600; font-size:clamp(21px,2.2vw,23px); letter-spacing:-0.006em; line-height:1.32; margin:2em 0 .55em; text-wrap:balance; } .gh-content > h3 .vf-dot{ flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--accent); transform:translateY(-0.16em); } .gh-content > h4{ grid-column:main; font-family:var(--grotesque); font-weight:600; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); margin:2.2em 0 .6em; } .gh-content > :is(h2,h3,h4):first-child{ margin-top:0; } /* ---- figures (image + gallery cards) ---- plain card → mid; .kg-width-wide → wide; .kg-width-full → full */ .gh-content :is(.kg-image-card,.kg-gallery-card,figure){ grid-column:mid; margin:clamp(40px,6vw,76px) 0; } .gh-content .kg-width-wide{ grid-column:wide; } .gh-content .kg-width-full{ grid-column:full; } .gh-content :is(.kg-image-card,.kg-gallery-card) img, .gh-content figure > img{ width:100%; height:auto; display:block; } /* auto-numbered captions — the 01/02 number is injected by app.js as a real element (.fig-no), so it is reliable across browsers and in print. One size everywhere; the text block matches the body measure and aligns to the text column, whatever width the image is. */ .gh-content figcaption{ display:flex; gap:14px; align-items:baseline; font-family:var(--serif); font-style:normal; font-size:15px; line-height:1.64; color:var(--ink-2); margin-top:16px; text-align:left; } /* normalise whatever Ghost nests inside the caption (it wraps text in a , galleries sometimes in a

) so the text can never inherit a different size or add its own spacing — a single image caption and a gallery caption render byte-for-byte identically */ .gh-content figcaption > *{ font:inherit; color:inherit; margin:0; padding:0; line-height:inherit; } .gh-content figcaption .fig-no{ font-family:var(--grotesque); font-size:10px; font-weight:600; letter-spacing:0.14em; color:var(--ink-3); flex:0 0 auto; align-self:baseline; font-variant-numeric:tabular-nums; line-height:inherit; } .gh-content figcaption a{ color:var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 42%, transparent); } /* the caption is anchored to its image: left edge = image left, width tracks the image (mid / wide / full), so it grows with the picture as the page widens. Full-bleed keeps its text off the screen edge by one page margin. */ .gh-content .kg-width-full > figcaption{ padding-left:var(--margin); padding-right:var(--margin); } /* ---- gallery: equal columns (app.js refines each cell to its aspect ratio) ---- */ .gh-content .kg-gallery-container{ display:flex; flex-direction:column; gap:clamp(12px,2vw,24px); } .gh-content .kg-gallery-row{ display:flex; gap:clamp(12px,2vw,24px); } .gh-content .kg-gallery-image{ flex:1 1 0; min-width:0; } .gh-content .kg-gallery-image img{ width:100%; height:100%; object-fit:cover; display:block; } @media(max-width:680px){ .gh-content .kg-gallery-row{ flex-direction:column; } } /* ---- blockquote ---- default → a quiet aside on a hairline rule .kg-blockquote-alt → the grand pull-quote, centred under the red-over-green running lights */ .gh-content blockquote:not(.kg-blockquote-alt){ grid-column:main; margin:clamp(30px,4vw,42px) 0; padding:3px 0 3px clamp(18px,2vw,26px); border-left:2px solid var(--rule); font-size:clamp(20px,2.3vw,23px); line-height:1.6; color:var(--ink-2); font-weight:400; font-style:italic; } html.zh .gh-content blockquote:not(.kg-blockquote-alt){ font-style:normal; } .gh-content blockquote:not(.kg-blockquote-alt) p{ margin:0 0 .5em; } .gh-content blockquote:not(.kg-blockquote-alt) p:last-child{ margin:0; } .gh-content blockquote.kg-blockquote-alt{ grid-column:mid; max-width:min(720px,86vw); margin:clamp(60px,9vw,112px) auto; text-align:center; border:0; padding:0; position:relative; font-weight:300; font-style:normal; font-size:clamp(27px,3.6vw,40px); line-height:1.36; letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; } /* the red-over-green running lights — injected as real dots by app.js */ .gh-content blockquote.kg-blockquote-alt .vf-mark{ display:flex; flex-direction:column; align-items:center; gap:7px; width:max-content; margin:0 auto clamp(24px,3vw,30px); } .gh-content blockquote.kg-blockquote-alt .vf-mark i{ width:7px; height:7px; border-radius:50%; display:block; } .gh-content blockquote.kg-blockquote-alt .vf-mark .r{ background:var(--nav-red); } .gh-content blockquote.kg-blockquote-alt .vf-mark .g{ background:var(--nav-green); } .gh-content blockquote.kg-blockquote-alt p{ margin:0; } .gh-content blockquote.kg-blockquote-alt p + p{ margin-top:.4em; } .gh-content blockquote.kg-blockquote-alt cite{ display:block; margin-top:24px; font-family:var(--grotesque); font-style:normal; font-size:12px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); } /* ---- divider (hr): a quiet single red waypoint on a hairline ---- app.js swaps

for
so the dot is a real element (renders everywhere); the bare hr is the no-JS fallback. */ .gh-content :is(hr,.vf-break){ grid-column:main; border:0; margin:clamp(58px,8vw,98px) 0; height:7px; position:relative; background: linear-gradient(var(--rule),var(--rule)) left center / calc(50% - 16px) 1px no-repeat, linear-gradient(var(--rule),var(--rule)) right center / calc(50% - 16px) 1px no-repeat; } .gh-content hr::before, .gh-content .vf-break i{ content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:50%; transform:translate(-50%,-50%); background:var(--accent); } /* ============================================================ Koenig CARDS — Header / Callout / Button / Toggle / Bookmark / Table ============================================================ */ /* --- Header card (v1 + v2) → a chapter band or full-bleed statement. Plain (paper), accent (paper-3), dark (ink), or over a photo. --- */ .gh-content .kg-header-card{ grid-column:full; margin:clamp(54px,8vw,96px) 0; padding:clamp(64px,11vw,128px) var(--margin); text-align:center; background:var(--paper-2); position:relative; overflow:hidden; background-size:cover; background-position:center; } .gh-content .kg-header-card-content{ position:relative; z-index:2; max-width:32ch; margin:0 auto; display:flex; flex-direction:column; align-items:center; } .gh-content .kg-header-card :is(.kg-header-card-heading,.kg-header-card-header){ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.6vw,54px); letter-spacing:-0.015em; line-height:1.06; margin:0; text-wrap:balance; } .gh-content .kg-header-card :is(.kg-header-card-subheading,.kg-header-card-subheader){ font-family:var(--grotesque); font-weight:400; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-3); margin:20px 0 0; line-height:1.5; max-width:48ch; } html.zh .gh-content .kg-header-card :is(.kg-header-card-subheading,.kg-header-card-subheader){ letter-spacing:0.14em; } /* accent + dark variants */ .gh-content .kg-header-card.kg-style-accent{ background:var(--paper-3); } .gh-content .kg-header-card.kg-style-dark, .gh-content .kg-header-card[data-kg-background-color="dark"]{ background:#1A1A1A; color:var(--light); } .gh-content .kg-header-card.kg-style-dark :is(.kg-header-card-subheading,.kg-header-card-subheader){ color:rgba(247,244,239,0.66); } /* over a background image → scrim + light text */ .gh-content .kg-header-card.kg-style-image{ color:var(--light); } .gh-content .kg-header-card.kg-style-image::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(10,10,10,0.30),rgba(10,10,10,0.60)); } .gh-content .kg-header-card.kg-style-image :is(.kg-header-card-subheading,.kg-header-card-subheader){ color:rgba(247,244,239,0.82); } /* v2 may inject a / background layer */ .gh-content .kg-header-card > picture, .gh-content .kg-header-card .kg-header-card-image{ position:absolute; inset:0; z-index:0; margin:0; } .gh-content .kg-header-card :is(picture,.kg-header-card-image) img{ width:100%; height:100%; object-fit:cover; } /* --- buttons (button card + header button): thin ink outline, never a slab fill --- */ .gh-content .kg-button-card{ grid-column:main; display:flex; margin:clamp(38px,5vw,58px) 0; } .gh-content .kg-button-card.kg-align-center{ justify-content:center; } .gh-content .kg-button-card.kg-align-left{ justify-content:flex-start; } .gh-content .kg-header-card-button-container{ margin-top:clamp(28px,4vw,38px); } .gh-content :is(.kg-btn,.kg-header-card-button){ display:inline-flex; align-items:center; gap:.6em; font-family:var(--grotesque); font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); background:none !important; border:1px solid var(--ink); border-radius:0; padding:14px 26px; transition:color .2s,border-color .2s; } .gh-content :is(.kg-btn,.kg-header-card-button):hover{ color:var(--accent); border-color:var(--accent); } .gh-content .kg-header-card.kg-style-dark :is(.kg-btn,.kg-header-card-button), .gh-content .kg-header-card.kg-style-image :is(.kg-btn,.kg-header-card-button){ color:var(--light); border-color:rgba(247,244,239,0.55); } .gh-content .kg-header-card.kg-style-dark :is(.kg-btn,.kg-header-card-button):hover, .gh-content .kg-header-card.kg-style-image :is(.kg-btn,.kg-header-card-button):hover{ color:var(--light); border-color:var(--light); } /* --- callout: quiet paper block (no rounding, no slab) --- */ .gh-content .kg-callout-card{ grid-column:main; display:flex; gap:15px; align-items:flex-start; margin:clamp(36px,5vw,54px) 0; padding:clamp(22px,3vw,28px) clamp(22px,3vw,30px); background:var(--paper-2); border:0; border-radius:0; } .gh-content .kg-callout-card-accent{ background:transparent; border-left:2px solid var(--accent); padding-left:clamp(20px,2.5vw,26px); } .gh-content .kg-callout-emoji{ font-size:19px; line-height:1.6; flex:0 0 auto; } .gh-content .kg-callout-text{ font-family:var(--serif); font-size:17px; line-height:1.72; color:var(--ink-2); } .gh-content .kg-callout-text a{ color:var(--accent); border-bottom:1px solid color-mix(in oklab, var(--accent) 42%, transparent); } /* --- toggle: hairline list, serif heading (behaviour in app.js) --- */ .gh-content .kg-toggle-card{ grid-column:main; margin:0; border-bottom:1px solid var(--rule); padding:0; } .gh-content .kg-toggle-card:first-of-type{ border-top:1px solid var(--rule); margin-top:clamp(30px,4vw,44px); } .gh-content .kg-toggle-card:last-of-type{ margin-bottom:clamp(30px,4vw,44px); } .gh-content .kg-toggle-heading{ display:flex; justify-content:space-between; align-items:center; gap:18px; cursor:pointer; } .gh-content .kg-toggle-heading-text{ font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.4; margin:0; padding:20px 0; } .gh-content .kg-toggle-card-icon{ flex:0 0 auto; width:13px; height:13px; color:var(--ink-3); background:none; border:0; padding:0; cursor:pointer; transition:transform .25s ease; } .gh-content .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon{ transform:rotate(180deg); } .gh-content .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{ display:none; } .gh-content .kg-toggle-content{ padding:0 0 22px; } .gh-content .kg-toggle-content p{ font-size:18px; line-height:1.8; color:var(--ink-2); margin:0 0 1em; } .gh-content .kg-toggle-content > :last-child{ margin-bottom:0; } /* --- bookmark: quiet hairline card --- */ .gh-content .kg-bookmark-card{ grid-column:main; margin:clamp(36px,5vw,56px) 0; } .gh-content .kg-bookmark-container{ display:flex; border:1px solid var(--rule); color:inherit; text-decoration:none; min-height:128px; } .gh-content .kg-bookmark-content{ flex:1 1 auto; padding:22px 24px; display:flex; flex-direction:column; } .gh-content .kg-bookmark-title{ font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); } .gh-content .kg-bookmark-description{ font-size:15px; line-height:1.6; color:var(--ink-2); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gh-content .kg-bookmark-metadata{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-top:auto; padding-top:14px; display:flex; gap:10px; align-items:center; } .gh-content .kg-bookmark-thumbnail{ flex:0 0 34%; max-width:240px; } .gh-content .kg-bookmark-thumbnail img{ width:100%; height:100%; object-fit:cover; } /* --- embeds / video: give them room --- */ .gh-content :is(.kg-embed-card,.kg-video-card){ grid-column:wide; margin:clamp(40px,6vw,76px) 0; display:flex; justify-content:center; } /* --- tables --- */ .gh-content table{ grid-column:main; width:100%; border-collapse:collapse; font-size:16px; line-height:1.6; margin:clamp(28px,4vw,44px) 0; } .gh-content :is(th,td){ text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule); } .gh-content th{ font-family:var(--grotesque); font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); } .gh-content tbody tr:last-child td{ border-bottom:0; } /* ============================================================ Vibetrek HTML-card conventions — the two things Koenig can't express natively. Paste as HTML cards; save each as a Ghost snippet once and reuse. (See EDITOR-GUIDE.md.) ============================================================ */ /* two individually-captioned images, side by side (Ghost's gallery shares ONE caption — this gives each its own) */ .gh-content .vf-figrow{ grid-column:wide; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px); align-items:start; margin:clamp(40px,6vw,76px) 0; } .gh-content .vf-figrow figure{ grid-column:auto; margin:0; } .gh-content .vf-figrow img{ width:100%; height:auto; display:block; } .gh-content .vf-figrow figcaption{ margin-top:16px; } @media(max-width:680px){ .gh-content .vf-figrow{ grid-template-columns:1fr; gap:34px; } } /* text + image, side by side (Koenig has no column card). Add .vf-inset-right to put the image on the left. */ .gh-content .vf-inset{ grid-column:wide; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; margin:clamp(48px,7vw,86px) 0; } .gh-content .vf-inset.vf-inset-right{ direction:rtl; } .gh-content .vf-inset.vf-inset-right > *{ direction:ltr; } .gh-content .vf-inset .vf-inset-text p{ font-size:19px; line-height:1.95; margin:0 0 1.3em; } .gh-content .vf-inset .vf-inset-text p:last-child{ margin-bottom:0; } .gh-content .vf-inset figure{ grid-column:auto; margin:0; } .gh-content .vf-inset img{ width:100%; height:auto; display:block; } .gh-content .vf-inset figcaption{ margin-top:16px; } @media(max-width:680px){ .gh-content .vf-inset{ grid-template-columns:1fr; gap:28px; } .gh-content .vf-inset.vf-inset-right{ direction:ltr; } } /* the flight-facts list is lifted into the hero by app.js, then hidden */ .gh-content .vf-flight, .vf-flight{ display:none; } /* ---------- newsletter colophon ---------- */ .colophon{ max-width:34em; margin:clamp(80px,11vw,150px) auto clamp(40px,6vw,70px); padding:clamp(46px,6vw,64px) var(--margin) 0; text-align:center; border-top:1px solid var(--rule); } .colophon .k{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent); } .colophon p{ font-size:20px; line-height:1.7; font-weight:300; color:var(--ink-2); margin:20px auto 30px; max-width:30ch; } .subform{ display:flex; align-items:flex-end; justify-content:center; gap:18px; max-width:30em; margin:0 auto; flex-wrap:wrap; } .subform .sub-email{ flex:1; min-width:200px; background:transparent; border:0; border-bottom:1px solid var(--ink-3); color:var(--ink); font-family:var(--serif); font-size:18px; padding:8px 2px; } .subform .sub-email:focus{ outline:none; border-bottom-color:var(--accent); } .subform button{ background:none; border:0; cursor:pointer; font-family:var(--grotesque); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); padding:9px 2px; white-space:nowrap; border-bottom:1px solid var(--ink); transition:color .2s,border-color .2s; } .subform button:hover{ color:var(--accent); border-bottom-color:var(--accent); } .colophon .fine{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.08em; color:var(--ink-3); margin-top:22px; } /* ---------- post foot ---------- */ .post-foot{ max-width:1180px; margin:0 auto; padding:clamp(40px,6vw,70px) var(--margin); display:flex; justify-content:space-between; gap:30px; border-top:1px solid var(--rule); } .pf-link{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); display:flex; flex-direction:column; gap:8px; } .pf-link.pf-next{ text-align:right; margin-left:auto; } .pf-ttl{ font-family:var(--serif); font-size:19px; letter-spacing:0; text-transform:none; color:var(--ink); } /* ---------- error ---------- */ .error{ min-height:80svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:140px var(--margin) 80px; } .error-code{ font-family:var(--grotesque); font-weight:600; font-size:clamp(60px,12vw,140px); letter-spacing:-0.04em; color:var(--paper-3); } .error-title{ font-weight:400; font-size:clamp(26px,4vw,40px); margin:10px 0 18px; } .error-msg{ color:var(--ink-3); font-family:var(--grotesque); font-size:13px; letter-spacing:0.06em; } .error-back{ display:inline-block; margin-top:24px; font-family:var(--grotesque); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid var(--accent); padding-bottom:2px; } /* ---------- page (About etc.) ---------- */ .page{ padding-top:clamp(120px,16vw,190px); } .page-head{ max-width:var(--measure); margin:0 auto clamp(30px,5vw,52px); padding:0 var(--margin); } .page-head h1{ font-weight:400; font-size:clamp(34px,5vw,56px); letter-spacing:-0.015em; margin:0; } .gh-content.measure{ display:block; max-width:var(--measure); margin:0 auto; padding:0 var(--margin); } /* ---------- footer ---------- */ .site-footer{ border-top:1px solid var(--rule); margin-top:clamp(70px,10vw,130px); padding:44px var(--margin); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; max-width:1320px; margin-left:auto; margin-right:auto; } .site-footer .brand{ font-size:20px; color:var(--ink); } .foot-note{ font-family:var(--grotesque); font-size:11px; letter-spacing:0.1em; color:var(--ink-3); text-transform:uppercase; } /* ---------- pagination (Ghost default markup) ---------- */ .pagination{ display:flex; align-items:center; justify-content:center; gap:24px; padding:clamp(50px,7vw,90px) 0 10px; font-family:var(--grotesque); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); } .pagination a{ color:var(--accent); } /* ---------- dark-mode component tweaks ---------- */ @media (prefers-color-scheme: dark){ .gh-content pre{ background:#11100D; } .gh-content .kg-header-card.kg-style-dark, .gh-content .kg-header-card[data-kg-background-color="dark"]{ background:#100E0C; } } /* ---------- reveal ---------- */ @media(prefers-reduced-motion: no-preference){ .reveal{ opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s ease; } .reveal.in{ opacity:1; transform:none; } .wall .work:nth-child(even){ transition-delay:.09s; } .cover .tagline, .cover .scrollcue, .cover .cover-latest, .post-hero-inner > *{ opacity:0; transform:translateY(16px); animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards; } .post-title{ animation-delay:.18s; } .tagline,.flight-strip{ animation-delay:.36s; } .cover .scrollcue, .cover .cover-latest{ animation-delay:.55s; } @keyframes rise{ to{ opacity:1; transform:none; } } /* cover settles from a slight zoom — one slow cinematic breath */ .cover-media img{ animation:coverDrift 3.4s cubic-bezier(.2,.7,.2,1) both; } @keyframes coverDrift{ from{ transform:scale(1.045); } to{ transform:scale(1); } } }