/* =========================================================================== "Plot & Prose" — the engineer-poet design system, now multi-theme. Everything is driven by CSS custom properties so a single [data-theme] attribute on repaints the whole site. Four themes ship: ink (default) · bone · blueprint · phosphor Fraunces (display) · Spectral (prose) · IBM Plex Mono (technical labels). =========================================================================== */ /* ---- INK (default) -------------------------------------------------------- */ :root, html[data-theme="ink"] { color-scheme: dark; --bg:#0e1014; --bg-2:#14171d; --surface:#15181f; --surface-2:#191d25; --line:#262b33; --line-2:#323844; --text:#e7e9ec; --text-dim:#c3c8d0; --muted:#8b93a1; --accent:#d9a441; --accent-2:#ecc06a; --accent-ink:#1a1206; --accent-soft:rgba(217,164,65,.16); --accent-dim:#7d6224; --signal:#7ca9b0; --signal-soft:rgba(124,169,176,.16); --name-a:#f3f4f6; --name-b:#c9ccd2; --glow:rgba(217,164,65,.06); --grid:rgba(255,255,255,.012); --scan:.4; --nav-bg:rgba(14,16,20,.72); --shadow:0 20px 44px -26px rgba(0,0,0,.75); --ok-bg:#13241a; --ok-bd:#234a32; --ok-fg:#bfe9cf; --err-bg:#2a1414; --err-bd:#5a2020; --err-fg:#f2b8b8; } /* ---- BONE (warm light editorial) ----------------------------------------- */ html[data-theme="bone"] { color-scheme: light; --bg:#f4f1ea; --bg-2:#efeae0; --surface:#fffdf8; --surface-2:#f8f4ec; --line:#e4ded1; --line-2:#d3cbbb; --text:#1b1a16; --text-dim:#454139; --muted:#807a6d; --accent:#b07b2c; --accent-2:#cf9540; --accent-ink:#fff8ec; --accent-soft:rgba(176,123,44,.13); --accent-dim:#caa66a; --signal:#2f6f6a; --signal-soft:rgba(47,111,106,.12); --name-a:#1b1a16; --name-b:#7a6b4d; --glow:rgba(176,123,44,.10); --grid:rgba(40,30,10,.028); --scan:0; --nav-bg:rgba(244,241,234,.78); --shadow:0 22px 44px -30px rgba(80,64,32,.4); --ok-bg:#e6f3ea; --ok-bd:#bcdcc7; --ok-fg:#1f6b3a; --err-bg:#f6e3e3; --err-bd:#e2bcbc; --err-fg:#8a2a2a; } /* ---- BLUEPRINT (deep navy + cyan) ---------------------------------------- */ html[data-theme="blueprint"] { color-scheme: dark; --bg:#081521; --bg-2:#0b1b2b; --surface:#0e2233; --surface-2:#123047; --line:#1d3b52; --line-2:#2a526f; --text:#e3f1fa; --text-dim:#b4d2e4; --muted:#6f93aa; --accent:#54c4e6; --accent-2:#84daf2; --accent-ink:#04141f; --accent-soft:rgba(84,196,230,.16); --accent-dim:#356e85; --signal:#e0b15a; --signal-soft:rgba(224,177,90,.16); --name-a:#eaf6fc; --name-b:#9fc6dc; --glow:rgba(84,196,230,.09); --grid:rgba(120,200,235,.05); --scan:.32; --nav-bg:rgba(8,21,33,.74); --shadow:0 20px 44px -24px rgba(0,8,16,.75); --ok-bg:#0d2a22; --ok-bd:#1f5142; --ok-fg:#8fe6cf; --err-bg:#2a1620; --err-bd:#5a2438; --err-fg:#f2b8cf; } /* ---- PHOSPHOR (near-black terminal, amber + green) ----------------------- */ html[data-theme="phosphor"] { color-scheme: dark; --bg:#07090a; --bg-2:#0c0f10; --surface:#0e1213; --surface-2:#131819; --line:#1d2624; --line-2:#2c3a36; --text:#dcf0d2; --text-dim:#aecb9f; --muted:#6f8a6a; --accent:#cfa64a; --accent-2:#ecc36a; --accent-ink:#0a0d06; --accent-soft:rgba(207,166,74,.16); --accent-dim:#7a6128; --signal:#76d36a; --signal-soft:rgba(118,211,106,.16); --name-a:#e7f6df; --name-b:#9fbf92; --glow:rgba(118,211,106,.06); --grid:rgba(150,255,150,.022); --scan:.5; --nav-bg:rgba(7,9,10,.74); --shadow:0 20px 44px -26px rgba(0,0,0,.8); --ok-bg:#0e2417; --ok-bd:#1f4a30; --ok-fg:#aee8b4; --err-bg:#241410; --err-bd:#4a261c; --err-fg:#f0c4a8; } :root { --serif:"Spectral", Georgia, "Times New Roman", serif; --display:"Fraunces", Georgia, serif; --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --maxw:1080px; --rail:96px; --r:14px; } * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--serif); font-size:18px; line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .4s ease, color .4s ease; background-image: radial-gradient(120% 80% at 50% -10%, var(--glow), transparent 60%), linear-gradient(transparent calc(100% - 1px), var(--grid) 100%); background-size:auto, 100% 34px; background-attachment:fixed, scroll; } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } ::selection { background:var(--accent-soft); } .scanline { position:fixed; inset:0; pointer-events:none; z-index:1; background:linear-gradient(rgba(255,255,255,.02), transparent 3px); background-size:100% 4px; mix-blend-mode:overlay; opacity:var(--scan); } /* ---------- type helpers ---------- */ .mono { font-family:var(--mono); } .muted { color:var(--muted); } .mono-label { font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin:0; } .coord { font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 26px; display:flex; align-items:center; gap:12px; } .coord::before { content:""; width:26px; height:1px; background:var(--accent-dim); flex:0 0 auto; } .textlink { font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--text-dim); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .2s, border-color .2s; } .textlink:hover { color:var(--accent-2); border-color:var(--accent); } .blink { color:var(--accent); animation:blink 1.4s steps(1) infinite; } @keyframes blink { 50% { opacity:0; } } /* ---------- the axis (signature) ---------- */ .axis { position:fixed; top:0; bottom:0; left:calc((100vw - var(--maxw)) / 2 + 14px); width:1px; z-index:3; pointer-events:none; } .axis__line { position:absolute; inset:0; width:1px; background:linear-gradient(var(--line) 0 30%, var(--line-2) 30% 70%, var(--line) 70% 100%); } .axis__ticks { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; } .axis__tick { width:8px; height:1px; background:var(--line-2); transform:translateX(-3px); } .axis__head { position:absolute; left:-4px; top:0; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 0 14px var(--accent); transition:top .12s linear; } @media (max-width:1180px){ .axis { display:none; } } /* ---------- shell ---------- */ .shell { max-width:var(--maxw); margin:0 auto; padding:0 24px 0 var(--rail); position:relative; z-index:2; } @media (max-width:1180px){ .shell { padding-left:24px; } :root { --rail:24px; } } /* ---------- top bar (sticky, translucent) ---------- */ .topbar { position:sticky; top:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; flex-wrap:wrap; background:var(--nav-bg); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid transparent; margin-bottom:8px; } .topbar.is-stuck { border-bottom-color:var(--line); } .topbar__mark { display:flex; align-items:baseline; gap:12px; } /* The container is baseline-aligned for the name/coord pair, so the glyph opts out and centres itself against that line instead. */ .topbar__logo { align-self:center; width:21px; height:22px; flex:0 0 auto; color:var(--name-a); margin-right:-2px; transition:color .2s, transform .35s cubic-bezier(.2,.8,.2,1); } .topbar__mark:hover .topbar__logo { color:var(--accent-2); transform:translateY(-1px); } .topbar__name { font-family:var(--display); font-size:18px; font-weight:560; letter-spacing:-.01em; } .topbar__coord { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; } .topbar__right { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .topbar__nav { display:flex; gap:22px; flex-wrap:wrap; } .navlink { font-family:var(--mono); font-size:13px; letter-spacing:.03em; color:var(--text-dim); padding-bottom:4px; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; } .navlink:hover { color:var(--text); } .navlink.is-active { color:var(--accent-2); border-color:var(--accent-dim); } .navlink--tools { color:var(--signal); } .navlink--tools:hover { filter:brightness(1.15); } /* ---------- theme switcher ---------- */ .theme { position:relative; } .theme__btn { display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line-2); color:var(--text-dim); font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:7px 12px; border-radius:999px; cursor:pointer; transition:border-color .2s, color .2s; } .theme__btn:hover { border-color:var(--accent-dim); color:var(--text); } .theme__chip { width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--signal)); box-shadow:0 0 0 1px rgba(0,0,0,.2) inset; } .theme__caret { font-size:9px; opacity:.7; } .theme__menu { position:absolute; right:0; top:calc(100% + 10px); min-width:188px; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:6px; box-shadow:var(--shadow); z-index:20; } .theme__menu[hidden] { display:none; } .theme__opt { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; color:var(--text-dim); font-family:var(--mono); font-size:13px; padding:9px 10px; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; } .theme__opt:hover { background:var(--surface-2); color:var(--text); } .theme__opt[aria-checked="true"] { color:var(--accent-2); } .theme__opt[aria-checked="true"]::after { content:"✓"; margin-left:auto; color:var(--accent); } .sw { width:18px; height:18px; border-radius:6px; flex:0 0 auto; border:1px solid rgba(0,0,0,.2); } .sw--ink { background:linear-gradient(135deg,#15181f 50%, #d9a441 50%); } .sw--bone { background:linear-gradient(135deg,#fffdf8 50%, #b07b2c 50%); } .sw--blueprint { background:linear-gradient(135deg,#0e2233 50%, #54c4e6 50%); } .sw--phosphor { background:linear-gradient(135deg,#0e1213 50%, #76d36a 50%); } /* ---------- flash ---------- */ .flash { margin:8px 0 0; padding:11px 16px; border-radius:10px; font-family:var(--mono); font-size:13px; } .flash--ok { background:var(--ok-bg); border:1px solid var(--ok-bd); color:var(--ok-fg); } .flash--error { background:var(--err-bg); border:1px solid var(--err-bd); color:var(--err-fg); } /* ---------- hero ---------- */ .hero { padding:13vh 0 11vh; max-width:780px; } .hero__eyebrow { margin-bottom:30px; display:flex; align-items:center; gap:10px; } .status-dot { width:8px; height:8px; border-radius:50%; background:var(--signal); box-shadow:0 0 0 0 var(--signal-soft); animation:pulse 2.4s ease-out infinite; } @keyframes pulse { 0%{ box-shadow:0 0 0 0 var(--signal-soft);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} } .hero__name { font-family:var(--display); font-weight:560; font-size:clamp(3.4rem,11vw,7.4rem); line-height:.95; letter-spacing:-.03em; margin:0 0 24px; font-optical-sizing:auto; background:linear-gradient(180deg, var(--name-a) 0%, var(--name-b) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero__roles { list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 30px; } .hero__role { font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 13px; line-height:1; transition:border-color .2s, color .2s, transform .2s; } .hero__role:hover { border-color:var(--accent-dim); color:var(--accent-2); transform:translateY(-1px); } .hero__tagline { font-size:clamp(1.15rem,2.4vw,1.5rem); line-height:1.55; color:var(--text-dim); max-width:30em; margin:0 0 40px; font-weight:300; } .hero__actions { display:flex; gap:14px; flex-wrap:wrap; } /* ---------- buttons ---------- */ .btn { font-family:var(--mono); font-size:13px; letter-spacing:.03em; padding:12px 20px; border-radius:999px; border:1px solid var(--line-2); display:inline-flex; align-items:center; gap:9px; transition:transform .2s, background .2s, border-color .2s, color .2s; cursor:pointer; } .btn--brass { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:500; } .btn--brass:hover { background:var(--accent-2); transform:translateY(-2px); } .btn--ghost { color:var(--text-dim); } .btn--ghost:hover { border-color:var(--accent-dim); color:var(--text); transform:translateY(-2px); } .btn--line { color:var(--signal); border-color:var(--signal-soft); } .btn--line:hover { border-color:var(--signal); background:var(--signal-soft); transform:translateY(-2px); } .btn__count { background:var(--signal-soft); border-radius:5px; padding:1px 7px; font-size:11px; } /* ---------- generic block ---------- */ .block { padding:7vh 0; border-top:1px solid var(--line); } .block__head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:34px; } .block__head .coord { margin-bottom:0; } /* ---------- duality ---------- */ .duality { padding:8vh 0; border-top:1px solid var(--line); } .duality__grid { display:grid; grid-template-columns:1fr 1px 1fr; } .duality__side { padding:6px 0; } .duality__side--prose { padding-right:44px; } .duality__side--verse { padding-left:44px; } .duality__seam { background:linear-gradient(var(--bg), var(--line-2) 18% 82%, var(--bg)); } .duality__title { font-family:var(--display); font-weight:520; font-size:1.7rem; line-height:1.15; letter-spacing:-.02em; margin:16px 0 14px; } .duality__title a { transition:color .2s; } .duality__title a:hover { color:var(--accent-2); } .duality__text { color:var(--text-dim); margin:0 0 18px; } .duality__verse { font-family:var(--display); font-size:1.18rem; line-height:1.7; color:var(--text); font-style:italic; white-space:pre-wrap; margin:0 0 18px; font-weight:360; } @media (max-width:720px){ .duality__grid { grid-template-columns:1fr; } .duality__seam { height:1px; margin:34px 0; } .duality__side--prose,.duality__side--verse { padding:0; } } /* ---------- cards ---------- */ .cards { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } @media (max-width:680px){ .cards { grid-template-columns:1fr; } } .card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s, background .25s; } .card:hover { border-color:var(--accent-dim); transform:translateY(-4px); background:var(--surface-2); box-shadow:var(--shadow); } .card__media { aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); } .card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .card:hover .card__media img { transform:scale(1.04); } .card__body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; } .card__meta { font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal); margin:0; } .card__title { font-family:var(--display); font-weight:520; font-size:1.42rem; line-height:1.12; letter-spacing:-.02em; margin:0; display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .card__title .arr { font-family:var(--mono); font-size:.85rem; color:var(--accent); opacity:0; transform:translateX(-6px); transition:opacity .25s, transform .25s; } .card:hover .card__title .arr { opacity:1; transform:none; } .card__summary { color:var(--text-dim); font-size:.98rem; margin:0; } .card__tech { font-size:11.5px; color:var(--muted); letter-spacing:.02em; margin:0; } /* ---------- about ---------- */ .block--about .about__text { font-size:1.32rem; line-height:1.7; max-width:30em; color:var(--text-dim); font-weight:300; } /* ---------- instruments ---------- */ .block--instruments { border-bottom:1px solid var(--line); } .instruments__panel { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 34px; border-radius:var(--r); flex-wrap:wrap; background:linear-gradient(135deg, var(--signal-soft), transparent); border:1px solid var(--signal-soft); transition:border-color .25s, transform .25s; } .instruments__panel:hover { border-color:var(--signal); transform:translateY(-2px); } .instruments__title { font-family:var(--display); font-weight:520; font-size:1.6rem; margin:0 0 8px; letter-spacing:-.02em; } .instruments__text { color:var(--text-dim); margin:0; max-width:42ch; } .instruments__go { color:var(--signal); font-size:13px; letter-spacing:.04em; white-space:nowrap; font-family:var(--mono); } /* ---------- footer ---------- */ .footer { border-top:1px solid var(--line); margin-top:3vh; padding:48px 0 60px; } .footer__inner { display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; } .footer__note { margin:12px 0 0; color:var(--text-dim); font-size:.96rem; } .footer__links { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; } .footer__links a { font-family:var(--mono); font-size:13px; color:var(--text-dim); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:color .2s, border-color .2s; } .footer__links a:hover { color:var(--accent-2); border-color:var(--accent); } .footer__base { display:flex; justify-content:space-between; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); } .footer__base a:hover { color:var(--accent-2); } /* ---------- listing / detail pages ---------- */ .page { padding:6vh 0 4vh; } .page__head { max-width:720px; margin-bottom:48px; } .page__title { font-family:var(--display); font-weight:560; font-size:clamp(2.4rem,6vw,3.6rem); letter-spacing:-.03em; line-height:1; margin:18px 0; } .page__lead { font-size:1.2rem; color:var(--text-dim); font-weight:300; max-width:32em; } .empty { border:1px dashed var(--line-2); border-radius:var(--r); padding:40px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; } .filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; } .filter { font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-dim); transition:all .2s; } .filter:hover { border-color:var(--accent-dim); color:var(--text); } .filter.is-active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .rows { border-top:1px solid var(--line); } .row { display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--line); transition:padding .25s, background .25s; } .row:hover { padding-left:14px; background:linear-gradient(90deg, var(--surface), transparent); } .row__title { font-family:var(--display); font-weight:520; font-size:1.5rem; letter-spacing:-.02em; line-height:1.15; margin:0 0 8px; transition:color .2s; } .row:hover .row__title { color:var(--accent-2); } .row__meta { font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; } .row__excerpt { color:var(--text-dim); margin:6px 0 0; font-size:1rem; max-width:60ch; } .row__side { font-family:var(--mono); font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; } .prose { max-width:660px; font-size:1.12rem; line-height:1.8; color:var(--text-dim); } .prose h2,.prose h3,.prose h4 { font-family:var(--display); color:var(--text); font-weight:540; letter-spacing:-.02em; line-height:1.2; margin:1.8em 0 .6em; } .prose h2 { font-size:1.7rem; } .prose h3 { font-size:1.4rem; } .prose p { margin:0 0 1.2em; } .prose a { color:var(--accent-2); border-bottom:1px solid var(--accent-dim); } .prose a:hover { border-color:var(--accent); } .prose strong { color:var(--text); font-weight:600; } .prose code { font-family:var(--mono); font-size:.9em; background:var(--bg-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; } .prose blockquote { border-left:2px solid var(--accent-dim); margin:1.4em 0; padding:.2em 0 .2em 22px; color:var(--text); font-style:italic; } .prose ul { padding-left:22px; } .prose li { margin:.4em 0; } .prose-figure { margin:2em 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); } .prose-figure img { width:100%; } .prose-figure figcaption { font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--muted); padding:10px 14px; border-top:1px solid var(--line); line-height:1.5; } .prose-code { font-family:var(--mono); font-size:.85rem; line-height:1.65; color:var(--text); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin:1.4em 0; overflow-x:auto; } .prose-code code { background:none; border:0; padding:0; font-size:inherit; } .article { padding:6vh 0 8vh; } .article__head { max-width:660px; margin-bottom:40px; } .article__title { font-family:var(--display); font-weight:560; font-size:clamp(2.2rem,5vw,3.2rem); letter-spacing:-.03em; line-height:1.04; margin:16px 0; } .article__meta { font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.04em; } .article__cover { border-radius:var(--r); overflow:hidden; border:1px solid var(--line); margin:0 0 40px; } .back { font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.05em; } .back:hover { color:var(--accent-2); } .poem { font-family:var(--display); font-size:1.34rem; line-height:1.85; white-space:pre-wrap; color:var(--text); font-weight:360; max-width:38ch; } .poem__note { margin-top:38px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:.98rem; font-style:italic; max-width:50ch; } .chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .chip { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--signal); border:1px solid var(--signal-soft); border-radius:999px; padding:4px 11px; } .paper { padding:28px 0; border-bottom:1px solid var(--line); } .paper__title { font-family:var(--display); font-weight:520; font-size:1.46rem; letter-spacing:-.02em; line-height:1.2; margin:0 0 8px; } .paper__authors { color:var(--text-dim); margin:0 0 4px; } .paper__venue { font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.03em; margin:0 0 14px; } .paper__abstract { color:var(--text-dim); font-size:1rem; max-width:64ch; margin:0 0 16px; } .paper__actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .bibtex { margin-top:14px; } .bibtex summary { font-family:var(--mono); font-size:12px; color:var(--muted); cursor:pointer; letter-spacing:.04em; } .bibtex summary:hover { color:var(--accent-2); } .bibtex pre { font-family:var(--mono); font-size:12.5px; line-height:1.6; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; padding:16px; overflow-x:auto; color:var(--text-dim); margin:12px 0 0; } /* ---------- tools gallery ---------- */ .toolcat { margin-bottom:44px; } .toolcat__name { font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; } .toolgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:16px; } .tool { display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; transition:border-color .22s, transform .22s, box-shadow .22s; position:relative; } .tool:hover { border-color:var(--signal); transform:translateY(-4px); box-shadow:var(--shadow); } .tool__top { display:flex; align-items:center; justify-content:space-between; } .tool__icon { font-size:22px; line-height:1; } .tool__lock { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent-dim); border-radius:999px; padding:3px 9px; } .tool__name { font-family:var(--display); font-weight:520; font-size:1.25rem; letter-spacing:-.01em; margin:0; } .tool__desc { color:var(--text-dim); font-size:.95rem; margin:0; flex:1; } .tool__foot { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.04em; display:flex; gap:10px; } /* =========================================================================== PHONES The layout above is built for a wide page with a generous rail. Below the tablet breakpoint the vertical rhythm (7–13vh between blocks) and the two-column rows cost more than they give, so they collapse here. =========================================================================== */ /* Scroll down, never sideways. `clip` instead of `hidden` so the sticky top bar keeps working. */ html, body { overflow-x:clip; } @media (max-width:820px) { /* The bar is sticky, so every row it wraps to is a row stolen from the article underneath. Two rows, fixed: identity + theme, then the links on one line that scrolls sideways under a thumb. */ .topbar { gap:10px 14px; padding:12px 0 10px; } .topbar__right { display:contents; } .topbar__mark { order:1; flex:1 1 auto; min-width:0; } .topbar__name { font-size:16px; } .topbar__coord { display:none; } .theme { order:2; flex:0 0 auto; } .topbar__nav { order:3; flex:1 0 100%; flex-wrap:nowrap; gap:18px; overflow-x:auto; /* Bleed to the screen edges so the last link isn't stranded under the rail. */ margin:0 calc(var(--rail) * -1); padding:2px var(--rail) 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .topbar__nav::-webkit-scrollbar { display:none; } .navlink { white-space:nowrap; } } @media (max-width:680px) { :root { --rail:18px; } .shell { padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); } /* Keep the nav's edge-to-edge bleed matched to the shell's real padding. */ .topbar__nav { margin-left:calc(max(18px, env(safe-area-inset-left)) * -1); margin-right:calc(max(18px, env(safe-area-inset-right)) * -1); padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); } /* Vertical air, rescaled. vh units that read as elegant on a desktop turn into half a screen of nothing on a phone. */ .hero { padding:6vh 0 7vh; } .hero__eyebrow { margin-bottom:20px; } .hero__name { font-size:clamp(2.6rem,15vw,4.4rem); margin-bottom:18px; overflow-wrap:break-word; } .hero__tagline { margin-bottom:28px; } .hero__actions { gap:10px; } .block, .duality { padding:5vh 0; } .block__head { margin-bottom:24px; } .page { padding:4vh 0 3vh; } .page__head { margin-bottom:30px; } .article { padding:4vh 0 6vh; } .article__head { margin-bottom:28px; } .article__cover { margin-bottom:28px; } /* Listing rows: the right-hand meta column has nowhere to go at this width, so it drops under the title instead of squeezing it to two words a line. */ .row { grid-template-columns:1fr; gap:6px; padding:20px 0; } .row__side { text-align:left; } .row__title { font-size:1.3rem; } .row:hover { padding-left:0; background:none; } .cards { gap:14px; } .card__body { padding:16px 18px 18px; } .card__title { font-size:1.26rem; } .toolgrid { grid-template-columns:1fr; gap:12px; } .tool { padding:18px; } .block--about .about__text { font-size:1.14rem; } .instruments__panel { padding:22px 20px; gap:16px; } .instruments__title { font-size:1.35rem; } .prose { font-size:1.06rem; } .prose blockquote { padding-left:16px; } .poem { font-size:1.16rem; } .footer { padding:36px 0 calc(40px + env(safe-area-inset-bottom)); } .footer__inner { gap:22px; } .footer__base { flex-wrap:wrap; gap:8px; margin-top:28px; } .paper__actions { gap:10px; } .empty { padding:28px 20px; } } @media (max-width:420px) { .hero__roles { gap:6px; } .hero__role { font-size:10.5px; padding:4px 10px; } /* Below this the two buttons side by side are each too narrow to read. */ .hero__actions .btn { flex:1 1 100%; justify-content:center; } } /* Touch targets. Text links in prose stay as they are — they're inside a sentence and padding them out would break the line — but standalone controls get a 44px box. */ @media (pointer:coarse) { .btn, .filter, .theme__btn { min-height:44px; } .filter { display:inline-flex; align-items:center; } .theme__opt { padding:12px 10px; } .navlink, .footer__links a, .textlink, .back, .footer__base a { padding-top:8px; padding-bottom:8px; display:inline-block; } .topbar__mark { padding:6px 0; } /* A one-line heading link is only ~23px of target. Vertical padding on an inline box grows the hit area without changing the line height, so the listing stays as typeset and the title gets easier to hit. */ .row__title a, .duality__title a, .card__title a, .paper__title a { padding:5px 0; } } /* ---------- a11y ---------- */ :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } .skip { position:absolute; left:-9999px; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }