/* ============================================================ Laser Lloyd — site styles "Shop floor, not showroom": dark, instrument-panel, electric-blue beam accent + working amber. Mobile-first. Zero external deps. Fonts: Inter (body) + Space Grotesk (display) — both OFL, self-hosted. ============================================================ */ @font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/inter-700.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/spacegrotesk-500.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/spacegrotesk-600.woff2") format("woff2"); } @font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/spacegrotesk-700.woff2") format("woff2"); } :root { --bg-0:#080a0d; --bg-1:#0d1116; --bg-2:#12171e; --bg-3:#171e27; --bg-4:#1e2732; --line:#242e3a; --ink:#eaf1f8; --muted:#9aabbc; --muted-2:#6f8496; --accent:#2ea8ff; /* laser blue (brand) */ --accent-2:#00e6cf; /* cyan glow */ --amber:#ffb64a; /* money / pro-tip / highlight */ --amber-ink:#1d1305; /* text on amber */ --danger:#ff6b6b; /* safety */ --ok:#4ade80; --maxw:1120px; --gutter:20px; --radius:14px; --shadow:0 10px 34px rgba(0,0,0,.45); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --display: "Space Grotesk", "Inter", system-ui, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; /* theme-dependent derived colors (light theme overrides all of these) */ --on-accent:#00121f; /* text on accent-filled buttons */ --accent-hover:#4fb6ff; --amber-hover:#ffc670; --prose-body:#dbe6f0; /* body copy inside .prose */ --header-bg:rgba(8,10,13,.86); --accent-soft:rgba(46,168,255,.10); --accent2-soft:rgba(0,230,207,.08); --amber-soft:rgba(255,182,74,.06); --danger-soft:rgba(255,107,107,.06); --row-alt:rgba(255,255,255,.02); --total-row-bg:rgba(255,182,74,.07); --glow-accent:rgba(46,168,255,.35); --glow-amber:rgba(255,182,74,.4); /* Donate CTA "plate": bright amber plate; the label is knocked out to the page background (color:var(--bg-0)) so it reads as the page punched through. Light theme darkens the plate so the near-white cut-out stays legible. */ --cta-plate:#ffc24d; --cta-plate-hover:#ffce6e; --cta-plate-shadow:0 2px 9px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.22); --cta-plate-shadow-hover:0 7px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.55); --caption-fade:rgba(8,10,13,.92); color-scheme:dark; } /* ---------- Light theme (dark stays the default) ---------- Toggled by the nav button; persisted in localStorage("theme"); a pre-paint snippet in sets data-theme before first render. */ html[data-theme="light"] { --bg-0:#f2f5f9; --bg-1:#f8fafc; --bg-2:#ffffff; --bg-3:#e9eef5; --bg-4:#dfe6ee; --line:#d3dce6; --ink:#16212c; --muted:#546675; --muted-2:#6d7f8e; --accent:#0b78d0; /* darkened for contrast on white */ --accent-2:#0a8f80; --amber:#f5a623; --amber-ink:#241703; --danger:#d64545; --ok:#15803d; --shadow:0 10px 30px rgba(20,35,50,.12); --on-accent:#ffffff; --accent-hover:#0d69b4; --amber-hover:#e2960f; --prose-body:#2e3d4a; --header-bg:rgba(242,245,249,.88); --accent-soft:rgba(11,120,208,.10); --accent2-soft:rgba(10,143,128,.10); --amber-soft:rgba(245,166,35,.12); --danger-soft:rgba(214,69,69,.08); --row-alt:rgba(20,35,50,.03); --total-row-bg:rgba(245,166,35,.16); --glow-accent:rgba(11,120,208,.25); --glow-amber:rgba(226,150,15,.35); /* deep gold so the near-white knockout (var(--bg-0)) clears AA (4.66:1) */ --cta-plate:#96640a; --cta-plate-hover:#845608; --cta-plate-shadow:0 2px 8px rgba(70,45,0,.26), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.15); --cta-plate-shadow-hover:0 7px 16px rgba(70,45,0,.3), inset 0 1px 0 rgba(255,255,255,.32); --caption-fade:rgba(248,250,252,.92); color-scheme:light; } html[data-theme="light"] body { background: repeating-linear-gradient(-45deg, rgba(84,102,117,.02) 0 1px, transparent 1px 7px), radial-gradient(1100px 520px at 80% -10%, rgba(11,120,208,.07), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(10,143,128,.05), transparent 55%), var(--bg-0); } /* Japanese pages: add JP system fonts to the fallback stacks, drop the tight latin letter-spacing that breaks kana/kanji rhythm. */ :lang(ja) { --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic UI", sans-serif; --display: "Space Grotesk", "Inter", system-ui, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic UI", sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, "Hiragino Sans", "Noto Sans CJK JP", "Yu Gothic UI", monospace; } :lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing:0; } /* Chinese pages: same treatment with Simplified-Chinese system fonts */ :lang(zh) { --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; --display: "Space Grotesk", "Inter", system-ui, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; } :lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { letter-spacing:0; } /* Arabic pages render dir="rtl" from the html attribute (set by base.html). Bidi text flow is handled by the browser automatically; the overrides below flip the physical (not logical) left/right properties used elsewhere in this file so the header, prose accents, lists, tables and TOC read naturally right-to-left instead of staying pinned to their LTR sides. Purely decorative fixed-corner elements (back-to-top FAB, modal close button, featured-card ribbon) are left alone on purpose — a fixed corner badge reads fine in either direction. */ html[dir="rtl"] .skip-link { left:auto; right:-9999px; } html[dir="rtl"] .skip-link:focus { left:auto; right:12px; } html[dir="rtl"] .brand { margin-right:0; margin-left:auto; } html[dir="rtl"] .lang-menu > ul { right:auto; left:0; } html[dir="rtl"] .nav-toggle { margin-left:0; margin-right:auto; } html[dir="rtl"] .spec-plate .spec-cell { border-left:0; border-right:1px solid var(--line); } html[dir="rtl"] .spec-plate .spec-cell:first-child { border-right:0; } html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol { padding-left:0; padding-right:22px; } html[dir="rtl"] .prose blockquote, html[dir="rtl"] .prose .wp-block-quote { border-left:0; border-right:3px solid var(--accent); border-radius:10px 0 0 10px; } html[dir="rtl"] .prose th, html[dir="rtl"] .prose td { text-align:right; } html[dir="rtl"] .callout { border-left:0; border-right:3px solid var(--amber); border-radius:10px 0 0 10px; } html[dir="rtl"] .callout.safety { border-right-color:var(--danger); } html[dir="rtl"] .callout.implement-box { border-right-color:var(--accent); } html[dir="rtl"] .toc a { border-left:0; border-right:2px solid var(--line); } html[dir="rtl"] .toc a:hover { border-right-color:var(--accent); } html[dir="rtl"] .implement-box .setup-split ul { padding-left:0; padding-right:20px; } html[dir="rtl"] .copy-btn { right:auto; left:8px; } html[dir="rtl"] .pre-wrap > pre { padding-right:0; } @media (hover:none) { html[dir="rtl"] .pre-wrap > pre { padding-left:78px; padding-right:0; } } h1, h2, h3, .brand .word b { font-family:var(--display); } h1, h2, h3 { text-wrap:balance; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; font-family:var(--font); color:var(--ink); background: repeating-linear-gradient(-45deg, rgba(154,171,188,.014) 0 1px, transparent 1px 7px), radial-gradient(1100px 520px at 80% -10%, rgba(46,168,255,.10), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(0,230,207,.06), transparent 55%), var(--bg-0); line-height:1.6; -webkit-font-smoothing:antialiased; } img { max-width:100%; height:auto; } a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } .container { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); } /* bare rules render as cut-lines site-wide */ hr { border:0; height:2px; margin:30px 0; background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:12px; top:12px; z-index:1000; background:var(--accent); color:var(--on-accent); padding:8px 12px; border-radius:8px; } /* ---------- Header / nav ---------- */ .site-header { position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .nav { display:flex; align-items:center; gap:16px; padding:12px 0; } .brand { display:flex; align-items:center; gap:12px; margin-right:auto; } .brand img { height:40px; width:auto; display:block; } .brand .word { display:flex; flex-direction:column; line-height:1.05; } .brand .word b { font-size:17px; letter-spacing:.02em; } .brand .word span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; } :lang(ja) .brand .word span { letter-spacing:.04em; } .nav-links { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .nav-links a { color:var(--ink); font-size:14.5px; font-weight:500; padding:8px 11px; border-radius:9px; white-space:nowrap; } .nav-links a:hover { background:var(--bg-3); text-decoration:none; } .nav-links a[aria-current="page"] { color:var(--accent); background:var(--accent-soft); } /* Donate CTA — a solid amber "plate" set on top of the page, with the label knocked out so the letters take the page-background colour (var(--bg-0)) and read as the page showing through the plate. The plate darkens on the light theme so the near-white cut-out stays readable (audit A2: nav-cta legibility). */ .nav-cta, .nav-links a.nav-cta { background:var(--cta-plate); color:var(--bg-0); font-weight:800; letter-spacing:.015em; padding:8px 16px; border-radius:11px; box-shadow:var(--cta-plate-shadow); transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .nav-links a.nav-cta:hover { background:var(--cta-plate-hover); color:var(--bg-0); transform:translateY(-1px); box-shadow:var(--cta-plate-shadow-hover); } .nav-links a.nav-cta:active { transform:translateY(0); box-shadow:var(--cta-plate-shadow); } .nav-links a.nav-cta[aria-current="page"] { background:var(--cta-plate); color:var(--bg-0); box-shadow:var(--cta-plate-shadow), 0 0 0 2px var(--glow-amber); } /* Language toggle */ .nav-links a.lang-switch { border:1px solid var(--line); font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted); padding:7px 10px; } .nav-links a.lang-switch:hover { color:var(--accent); border-color:var(--accent); background:transparent; } /* Multi-language menu (renders when 3+ languages are enabled; with exactly two the nav falls back to the single toggle link above) */ .lang-menu { position:relative; } .lang-menu > summary.lang-switch { list-style:none; cursor:pointer; display:inline-block; border-radius:9px; border:1px solid var(--line); font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--muted); padding:7px 10px; } .lang-menu > summary::-webkit-details-marker { display:none; } .lang-menu > summary.lang-switch:hover { color:var(--accent); border-color:var(--accent); } .lang-menu > ul { position:absolute; right:0; top:calc(100% + 6px); z-index:60; margin:0; padding:6px; list-style:none; min-width:140px; background:var(--bg-2); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); } .lang-menu > ul a { display:block; padding:7px 10px; border-radius:7px; color:var(--ink); font-size:14px; } .lang-menu > ul a:hover { background:var(--bg-3); text-decoration:none; } /* dark/light theme toggle: shows the theme you'd switch TO */ .theme-toggle { background:transparent; border:1px solid var(--line); border-radius:9px; padding:7px 9px; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; } .theme-toggle:hover { color:var(--accent); border-color:var(--accent); } .theme-toggle svg { width:17px; height:17px; display:block; } .theme-toggle .icon-moon { display:none; } html[data-theme="light"] .theme-toggle .icon-moon { display:block; } html[data-theme="light"] .theme-toggle .icon-sun { display:none; } @media (max-width:860px){ .theme-toggle { align-self:flex-start; margin-top:6px; } } .nav-toggle { display:none; margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:9px; padding:9px 10px; cursor:pointer; } .nav-toggle span { display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; } @media (max-width:860px){ .nav-toggle { display:block; } .nav-links { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:2px; background:var(--bg-1); border-bottom:1px solid var(--line); padding:10px var(--gutter) 16px; box-shadow:var(--shadow); } .nav-links.open { display:flex; } /* header STAYS sticky on mobile (audit: nav scrolled away on 10k-px posts) */ } /* ---------- Cut-line motif ---------- */ /* A dashed "cut path" with a beam dot — the site's one decorative move. */ .divider { border:0; height:14px; margin:0; position:relative; background:none; } .divider::before { content:""; position:absolute; left:50%; top:6px; transform:translateX(-50%); width:min(92%, var(--maxw)); height:2px; background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); } .divider::after { content:""; position:absolute; top:2px; left:calc(50% - min(46%, 560px)); width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--glow-accent); } /* ---------- Hero ---------- */ .hero { padding:56px 0 40px; position:relative; overflow:hidden; } .hero-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; align-items:center; } @media (max-width:900px){ .hero-grid { grid-template-columns:1fr; gap:28px; } } .hero .kicker { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:var(--accent-2); margin-bottom:14px; } :lang(ja) .hero .kicker { letter-spacing:.08em; } .hero .kicker::before { content:""; width:26px; height:2px; background:repeating-linear-gradient(90deg, var(--accent-2) 0 6px, transparent 6px 10px); display:inline-block; } .hero h1 { font-size:clamp(34px,5.4vw,54px); line-height:1.05; margin:0 0 16px; letter-spacing:-.02em; } .hero h1 .glow { color:var(--accent); text-shadow:0 0 18px var(--glow-accent); } .hero p.lede { font-size:clamp(16px,2.3vw,19px); color:var(--muted); max-width:640px; margin:0 0 26px; } .hero-cta { display:flex; flex-wrap:wrap; gap:12px; } /* right-side work photo, framed like a job on the bed */ .hero-photo { position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); box-shadow:var(--shadow); } .hero-photo img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } .hero-photo figcaption { position:absolute; left:0; right:0; bottom:0; padding:8px 14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:linear-gradient(180deg, transparent, var(--caption-fade) 45%); } .hero-photo::after { content:""; position:absolute; inset:10px; border:1px dashed var(--glow-accent); border-radius:8px; pointer-events:none; } @media (max-width:900px){ .hero-photo { max-width:560px; } } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:11px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; } .btn-primary { background:var(--accent); color:var(--on-accent); } .btn-primary:hover { background:var(--accent-hover); text-decoration:none; } .btn-ghost { background:transparent; border-color:var(--line); color:var(--ink); } .btn-ghost:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; } .btn-donate { background:var(--amber); color:var(--amber-ink); } .btn-donate:hover { background:var(--amber-hover); text-decoration:none; color:var(--amber-ink); } /* ---------- Sections ---------- */ .section { padding:44px 0; } .section-head { margin:0 0 22px; } .section-head h1, .section-head h2 { font-size:clamp(24px,3.4vw,32px); margin:0 0 6px; letter-spacing:-.01em; } .section-head p { color:var(--muted); margin:0; max-width:640px; } /* ---------- Project cards ---------- */ .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } @media (max-width:900px){ .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px){ .cards { grid-template-columns:1fr; } } .card { display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; } .card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--shadow); text-decoration:none; } .card .thumb { aspect-ratio:16/10; background:var(--bg-4); overflow:hidden; } .card .thumb img { width:100%; height:100%; object-fit:cover; display:block; } .card .thumb.placeholder { display:grid; place-items:center; color:var(--muted-2); font-size:13px; letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(135deg,var(--bg-3),var(--bg-4)); } .card .body { padding:15px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; } .card .tag { align-self:flex-start; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-2); background:var(--accent2-soft); padding:3px 9px; border-radius:999px; } :lang(ja) .card .tag { letter-spacing:.04em; } .card h3 { margin:0; font-size:18px; color:var(--ink); line-height:1.25; } .card p { margin:0; color:var(--muted); font-size:14px; } /* spec-plate meta line: mono, like a machine nameplate */ .card .meta { margin-top:auto; font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); } /* category pages already say the category twice — hide the per-card pill there */ .cards.no-tags .tag { display:none; } .empty-note { background:var(--bg-2); border:1px dashed var(--line); border-radius:var(--radius); padding:26px; color:var(--muted); text-align:center; } /* ---------- Article (project post) ---------- */ .article { padding:34px 0 60px; } .article-header { margin:0 0 26px; } .breadcrumb { font-size:13px; color:var(--muted-2); margin:0 0 14px; } .breadcrumb a { color:var(--muted); } .article-header .tag { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-2); background:var(--accent2-soft); padding:4px 10px; border-radius:999px; margin-bottom:12px; } .article-header h1 { font-size:clamp(28px,4.6vw,44px); line-height:1.08; margin:0 0 14px; letter-spacing:-.02em; } /* spec-plate: post meta as a machine nameplate (dl > .spec-cell > dt+dd) */ .spec-plate { display:inline-flex; flex-wrap:wrap; gap:0; align-items:stretch; margin:0; font-family:var(--mono); background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; } .spec-plate .spec-cell { padding:8px 16px 9px; border-left:1px solid var(--line); } .spec-plate .spec-cell:first-child { border-left:0; } .spec-plate dt { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 2px; } .spec-plate dd { margin:0; font-size:13px; color:var(--ink); letter-spacing:.03em; } .spec-plate dd a { color:var(--accent-2); text-decoration:none; } .spec-plate dd a:hover { text-decoration:underline; } :lang(ja) .spec-plate dt { letter-spacing:.06em; } .article-header .date { color:var(--muted-2); font-size:14px; } .article-hero { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin:0 0 30px; } .article-hero img { width:100%; display:block; } /* readable measure: ~70ch at 17px (audit P1) */ .container.narrow { max-width:768px; } .prose { font-size:17px; line-height:1.7; } .prose > *:first-child { margin-top:0; } .prose h2 { font-size:25px; margin:40px 0 12px; letter-spacing:-.01em; padding-top:6px; } .prose h3 { font-size:20px; margin:28px 0 10px; } /* cut-dash marker instead of the solid SaaS dash */ .prose h2::before { content:""; display:block; width:56px; height:3px; margin-bottom:12px; border-radius:2px; background:repeating-linear-gradient(90deg, var(--accent) 0 9px, transparent 9px 15px); } .prose p { margin:0 0 16px; color:var(--prose-body); } .prose a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .prose ul, .prose ol { margin:0 0 18px; padding-left:22px; } .prose li { margin:6px 0; } .prose .has-large-font-size { font-size:19px; color:var(--ink); } .prose strong { color:var(--ink); } .prose hr { border:0; height:2px; margin:34px 0; background:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); } /* WP posts stack their own

right above an h2 → collapse the double rule */ .prose hr + h2::before { display:none; } /* images: consistent frame, capped height, centered (audit P1 #13) */ .prose figure, .prose .wp-block-image { margin:24px 0; } .prose figure img, .prose .wp-block-image img, .prose p > img { display:block; margin-inline:auto; max-height:560px; width:auto; max-width:100%; border-radius:10px; border:1px solid var(--line); background:var(--bg-2); } .prose figure figcaption, .prose .wp-block-image figcaption { color:var(--muted-2); font-size:13px; text-align:center; margin-top:8px; } /* legacy WP columns: grid override kills the 33%+66%+gap overflow (audit A3) */ .prose .wp-block-columns { display:grid; grid-template-columns:minmax(130px,1fr) 2fr; gap:20px; margin:22px 0; align-items:start; } .prose .wp-block-column { min-width:0; } .prose .wp-block-column figure { margin-top:0; margin-bottom:0; } .prose .wp-block-column img { width:100%; max-width:240px; max-height:240px; object-fit:contain; } .prose .wp-block-column ul:last-child, .prose .wp-block-column p:last-child { margin-bottom:0; } @media (max-width:640px){ .prose .wp-block-columns { grid-template-columns:1fr; } .prose .wp-block-column img { margin-inline:0; } } /* new-content two-column rows (writer class per spec) */ .prose .cols { display:grid; grid-template-columns:minmax(130px,1fr) 2fr; gap:20px; margin:22px 0; align-items:start; } .prose .cols > * { min-width:0; margin-top:0; } .prose .cols figure { margin:0; } @media (max-width:640px){ .prose .cols { grid-template-columns:1fr; } } /* inline SVG diagrams (writer-authored flowcharts) */ .prose .diagram { margin:26px 0; padding:20px 18px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius); } .prose .diagram svg { display:block; width:100%; height:auto; font-family:var(--font); } .prose .diagram figcaption { margin-top:12px; } /* wp group */ .prose .wp-block-group { margin:18px 0; } .prose .wp-block-list { list-style:disc; } /* quotes / pullquote / details ---------------------------------- */ .prose blockquote, .prose .wp-block-quote { margin:22px 0; padding:14px 20px; border-left:3px solid var(--accent); background:var(--bg-2); border-radius:0 10px 10px 0; color:var(--muted); } .prose .wp-block-pullquote { margin:26px 0; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,var(--accent-soft),transparent); text-align:center; } .prose .wp-block-pullquote blockquote { border:0; background:none; padding:0; margin:0; color:var(--ink); } .prose .wp-block-pullquote cite { color:var(--muted-2); font-style:normal; display:block; margin-top:8px; } .prose details, .prose .wp-block-details { margin:20px 0; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); padding:0 16px; } .prose details[open], .prose .wp-block-details[open] { padding-bottom:8px; } .prose summary { cursor:pointer; padding:14px 4px; font-weight:600; color:var(--accent); list-style:none; } .prose summary::-webkit-details-marker { display:none; } .prose summary::before { content:"▸ "; color:var(--accent); } .prose details[open] > summary::before { content:"▾ "; } /* the accordion tutorial post ships its own .ll-acc