/* Shared motion, focus & navigation layer — loaded on every page after the page styles. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2,0,0,1); }

a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 42%, transparent); outline-offset: 3px; border-radius: 6px;
}

/* sticky header gains depth once the page scrolls */
header { transition: box-shadow .2s cubic-bezier(.2,0,0,1); }
header.is-scrolled { box-shadow: 0 10px 28px -16px rgba(31,26,20,.22); }

/* mobile menu eases in */
.nav-menu.open { animation: navDrop .24s cubic-bezier(.16,1,.3,1); }
@keyframes navDrop { from { opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } }

/* scroll reveal — only hides content once JS is confirmed running */
@keyframes revealUp { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
.js [data-reveal] { opacity:0; }
.js [data-reveal].in { opacity:1; animation: revealUp .7s cubic-bezier(.16,1,.3,1) var(--rd, 0ms) both; }

.js [data-reveal].in-now { opacity:1; animation:none; }
.js .about-beat.in-now .ab-node::before { transform:scaleY(1); transition:none; }

/* hero entrance (home + Beanly overview) */
@keyframes heroIn { from { opacity:0; translate:0 14px; } to { opacity:1; translate:0 0; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
section.hero > div:first-child > *, .hero .hero-inner > * { animation: heroIn .8s cubic-bezier(.16,1,.3,1) both; }
section.hero > div:first-child > *:nth-child(2), .hero .hero-inner > *:nth-child(2) { animation-delay: .06s; }
section.hero > div:first-child > *:nth-child(3), .hero .hero-inner > *:nth-child(3) { animation-delay: .12s; }
section.hero > div:first-child > *:nth-child(4), .hero .hero-inner > *:nth-child(4) { animation-delay: .18s; }
.hero .hero-inner > *:nth-child(5) { animation-delay: .24s; }
.hero .hero-inner > *:nth-child(n+6) { animation-delay: .3s; }
#heroMedia { animation: heroIn .9s .16s cubic-bezier(.16,1,.3,1) both; }
.hero .shot { animation: fadeIn 1s .36s cubic-bezier(.16,1,.3,1) both; }

/* hidden tabs / prerenders: skip entrance motion entirely */
html.still section.hero > div:first-child > *, html.still .hero .hero-inner > *, html.still #heroMedia, html.still .hero .shot { animation:none !important; }

/* About timeline draws itself as each beat arrives */
.js .about-beat .ab-node::before { transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(.2,0,0,1) .3s; }
.js .about-beat.in .ab-node::before { transform: scaleY(1); }

/* FAQ opens smoothly where supported */
:root { interpolate-size: allow-keywords; }
.faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .3s cubic-bezier(.2,0,0,1), content-visibility .3s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }

/* Beanly reacts when you go for early access */
.paige-mascot-wrap svg, .paige-mascot svg, .foot-bean-head img, .nav-beanly img { transition: transform .45s cubic-bezier(.16,1,.3,1); }
.hero-inner:has(.btn-primary:hover) .paige-mascot-wrap svg,
.cta:has(.ea-btn:hover) .paige-mascot-wrap svg,
.paige-card:hover .paige-mascot svg { transform: translateY(-6px) rotate(-6deg); }
.foot-bean:has(.foot-cta:hover) .foot-bean-head img { transform: translateY(-3px) rotate(-9deg); }

/* Julian site: quiet link over to Beanly */
.nav-sep { width:1px; height:16px; background:var(--line); flex:0 0 auto; }
.nav-beanly { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:#7E5C8A; text-decoration:none; padding:4px 0; transition:color .14s; white-space:nowrap; }
.nav-beanly img { width:20px; height:20px; display:block; flex:0 0 auto; }
.nav-beanly svg { flex:0 0 auto; transition:transform .14s; }
.nav-beanly:hover { color:#574169; }
.nav-beanly:hover img { transform: rotate(-10deg) translateY(-1px); }
.nav-beanly:hover svg { transform: translate(1.5px,-1.5px); }
.nav-links a.is-active, .nav-links a[aria-current="page"] { color:var(--ink) !important; box-shadow: inset 0 -2px 0 var(--brand); }

/* Beanly site: early-access button in the top bar */
.nav-bar .nav-links { margin-left:auto; }
.nav-cta { display:inline-flex; align-items:center; font-size:13.5px; font-weight:600; color:#fff; background:#7E5C8A; padding:9px 15px; border-radius:10px; text-decoration:none; white-space:nowrap; flex:0 0 auto; transition:background .14s, transform .14s; }
.nav-cta:hover { background:#574169; transform:translateY(-1px); }
.nav-cta .cta-s { display:none; }
@media (max-width:900px){ .nav-bar .nav-div, .nav-bar .nav-ext { display:none; } }
@media (max-width:720px){ .nav-cta { margin-left:auto; } }
@media (max-width:420px){ .nav-cta .cta-l { display:none; } .nav-cta .cta-s { display:inline; } }

/* ---------- Effects ---------- */
[data-tilt] { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.16,1,.3,1), border-color .2s, box-shadow .3s; }
[data-tilt].tilt-on { transition: transform .12s ease-out, border-color .2s, box-shadow .3s; }
.tilt-glare { position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; opacity:0; transition:opacity .4s;
  background: radial-gradient(520px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.32), rgba(255,255,255,0) 45%); mix-blend-mode: soft-light; }
[data-tilt].tilt-on .tilt-glare { opacity:1; }
.work-card .tilt-glare { mix-blend-mode: normal; background: radial-gradient(420px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.55), rgba(255,255,255,0) 40%); }
.work-card.tilt-on { box-shadow: 0 22px 44px -18px rgba(31,26,20,.28), 0 6px 14px rgba(31,26,20,.06); }

[data-spot] { position:relative; isolation:isolate; }
[data-spot] > * { position:relative; z-index:1; }
[data-spot]::before { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0; transition:opacity .4s;
  background: radial-gradient(460px circle at var(--sx,50%) var(--sy,50%), rgba(187,163,198,.24), rgba(187,163,198,0) 62%); }
[data-spot]:hover::before { opacity:1; }
section.hero[data-spot]::before { background: radial-gradient(720px circle at var(--sx,50%) var(--sy,30%), rgba(143,176,121,.16), rgba(126,92,138,.12) 35%, rgba(126,92,138,0) 65%); }

.hero .shot { transform: perspective(1400px) rotateX(var(--shot-rx, 0deg)) translateY(var(--shot-y, 22px)); transform-origin: 50% 100%; will-change: transform; }
@media (max-width:600px){ .hero .shot { --shot-y: 16px; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js [data-reveal] { opacity:1; }
  .js .about-beat .ab-node::before { transform:none; }
}

@media print {
  .js [data-reveal] { opacity:1 !important; animation:none !important; }
  .js .about-beat .ab-node::before { transform:none !important; }
}

/* Julian's editorial system. Kept separate from the Beanly page styles. */
.julian-site {
  --brand:#8B3A2E; --brand-hover:#762F25; --brand-soft:#F5E3DD;
  --brand-2:#B8923E; --brand-2-soft:#F4ECD8; --brand-2-hover:#795B1C;
  --gold-ink:#795B1C;
  --ink:#1F1A14; --ink-soft:#3A332A; --muted:#6B5F4F;
  --bg:#FAF7F0; --bg-sunk:#F2ECE0; --surface:#FFFDFA; --line:#E1D6C2;
  --font-display:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-body:var(--font-display);
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;
  --gutter:clamp(20px,4vw,40px);
  --section-space:clamp(64px,7vw,104px);
  --page-width:1160px; --reading-width:680px;
  --type-small:.8125rem; --type-body:1.0625rem; --type-lead:1.25rem;
  --type-heading:clamp(1.75rem,3.2vw,2.5rem);
  --type-display:clamp(2.75rem,5.4vw,4.75rem);
  --radius-md:10px; --radius-lg:16px; --radius-xl:24px;
  --shadow-sm:0 2px 4px rgb(57 38 19 / .04),0 8px 24px -16px rgb(57 38 19 / .14);
  --shadow-lg:0 22px 52px -24px rgb(57 38 19 / .24),0 4px 12px rgb(57 38 19 / .05);
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--font-body); font-size:var(--type-body); line-height:1.7;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.julian-site *, .julian-site *::before, .julian-site *::after { box-sizing:border-box; }
.julian-site :where(h1,h2,h3,p,figure,blockquote,ol,ul) { margin:0; }
.julian-site :where(h1,h2,h3) { font-family:var(--font-display); font-weight:600; line-height:1.2; letter-spacing:-.035em; text-wrap:balance; color:var(--ink); }
.julian-site :where(p,li,figcaption) { text-wrap:pretty; }
.julian-site :where(p,blockquote) { hanging-punctuation:first last; }
.julian-site :where(img,svg) { vertical-align:middle; }
.julian-site img { max-width:100%; }
.julian-site :where(a,button) { -webkit-tap-highlight-color:rgb(139 58 46 / .15); }
.julian-site a { text-underline-offset:.22em; text-decoration-thickness:1px; text-decoration-skip-ink:auto; }
.julian-site button { font:inherit; }
.julian-site :where(a,button,summary,input,textarea,[tabindex]):focus-visible { outline:3px solid var(--brand); outline-offset:5px; border-radius:4px; }
.julian-site ::selection { background:var(--brand-soft); color:var(--ink); }
html:has(> .julian-site) { scroll-behavior:smooth; scroll-padding-top:100px; }
.julian-site [id] { scroll-margin-top:100px; }
.julian-site .skip-link { position:fixed; top:12px; left:var(--gutter); z-index:100; padding:12px 20px; min-height:44px; transform:translateY(-180%); background:var(--brand); color:white; border-radius:var(--radius-md); text-decoration:none; font-weight:600; }
.julian-site .skip-link::before { content:attr(aria-label); }
.julian-site .skip-link:focus { transform:none; }
.julian-site .ps-eyebrow, .julian-site .post-meta, .julian-site .pc-cat,
.julian-site .tl-date, .julian-site .co-label, .julian-site .cc-label,
.julian-site .ic-label, .julian-site .ph-label, .julian-site .toc-h,
.julian-site .foot-h { font-family:var(--font-mono); font-size:11px; font-weight:500; line-height:1.65; letter-spacing:.12em; text-transform:uppercase; }
.julian-site .ps-eyebrow { color:var(--gold-ink); }
.julian-site .ps-quote { font-family:var(--font-serif); font-weight:400; letter-spacing:-.025em; }
.julian-site .ps-cta { min-height:48px; transition:transform .2s,background .2s,box-shadow .2s; }
.julian-site .ps-iconlink { width:44px !important; height:44px !important; transition:color .2s,background .2s; }
.julian-site .ps-link-u { transition:color .2s; }

/* Navigation */
.julian-site .site-header { position:sticky; top:0; z-index:30; background:rgb(250 247 240 / .95); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.julian-site .nav-inner { max-width:var(--page-width); margin:auto; padding:var(--space-4) var(--gutter); display:flex; align-items:center; gap:var(--space-5); }
.julian-site .nav-brand { display:inline-flex; align-items:center; gap:11px; min-height:44px; text-decoration:none; flex-shrink:0; }
.julian-site .nav-brand > span:last-child { font-size:18px !important; letter-spacing:-.035em !important; }
.julian-site .nav-links { display:flex; align-items:center; flex:1; gap:22px; margin-left:var(--space-4); }
.julian-site .nav-links > a { display:inline-flex; align-items:center; min-height:44px; padding:8px 0 !important; }
.julian-site .nav-links a.is-active, .julian-site .nav-links a[aria-current] { color:var(--brand) !important; box-shadow:inset 0 -2px var(--brand); }
.julian-site .nav-burger { display:none; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); cursor:pointer; }
.julian-site .nav-burger[aria-expanded="true"] { background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
.julian-site .nav-menu { display:none; padding:var(--space-2) var(--gutter) var(--space-4); border-top:1px solid var(--line); max-height:calc(100svh -80px); overflow-y:auto; }
.julian-site .nav-menu a { display:flex; align-items:center; gap:10px; min-height:52px; padding:12px 4px; border-bottom:1px solid var(--line); font-size:16px; font-weight:500; color:var(--ink); text-decoration:none; }
.julian-site .nav-menu a:last-child { border-bottom:0; }
.julian-site .nav-menu a[aria-current] { color:var(--brand); font-weight:600; }
.julian-site .nav-menu .nm-paige { color:#7E5C8A; font-weight:600; }
.julian-site .nm-mascot { width:22px; height:22px; flex:0 0 auto; }
.julian-site .nm-soon { font-family:var(--font-mono); font-size:10px; line-height:1.5; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#7E5C8A; border-radius:999px; padding:3px 7px; }

/* Home: generous narrative beats, with the original playful depth. */
.julian-site section.hero { max-width:var(--page-width); margin:auto; padding:var(--section-space) var(--gutter); display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(40px,6vw,88px); align-items:center; }
.julian-site .hero h1 { font-size:var(--type-display) !important; line-height:1.04 !important; letter-spacing:-.025em !important; }
.julian-site .hero > div:first-child > p { font-size:18px !important; line-height:1.8 !important; }
.julian-site [data-spot]:not(.paige-card)::before { background:radial-gradient(460px circle at var(--sx,50%) var(--sy,50%),rgb(184 146 62 / .14),transparent 65%); }
.julian-site section.hero[data-spot]::before { background:radial-gradient(640px circle at var(--sx,65%) var(--sy,50%),rgb(184 146 62 / .12),rgb(139 58 46 / .04) 40%,transparent 72%); }
.julian-site .hero-media { max-width:380px; width:100%; justify-self:end; position:relative; }
.julian-site #heroPlate { border:1px solid rgb(184 146 62 / .5); background:linear-gradient(145deg,var(--brand),#632B23) !important; }
.julian-site .about-grid { max-width:var(--page-width); margin:auto; padding:var(--section-space) var(--gutter); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,88px); align-items:start; }
.julian-site .about-grid h2, .julian-site .work-intro h2 { font-size:var(--type-heading) !important; line-height:1.18 !important; }
.julian-site .about-beat { display:grid; grid-template-columns:34px minmax(0,1fr); gap:20px; }
.julian-site .ab-node { position:relative; }
.julian-site .ab-node::before { content:''; position:absolute; left:16px; top:34px; bottom:-30px; width:1px; background:var(--line); }
.julian-site .about-beat:last-child .ab-node::before { display:none; }
.julian-site .ab-icn { position:relative; z-index:1; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--brand); display:flex; align-items:center; justify-content:center; }
.julian-site .work-inner { max-width:var(--page-width); margin:auto; padding:var(--section-space) var(--gutter); }
.julian-site .work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6); }
.julian-site .work-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .work-card > div:last-of-type { padding:var(--space-6) !important; }
.julian-site .work-card p { font-size:15px !important; line-height:1.75 !important; }
.julian-site .work-card h3 { font-size:22px !important; line-height:1.3 !important; }
.julian-site .work-link { min-height:44px; }
.julian-site .work-link::after { content:''; position:absolute; inset:0; border-radius:inherit; }
.julian-site .work-card:has(.work-link):focus-within { outline:3px solid var(--brand); outline-offset:5px; }
.julian-site .work-media { aspect-ratio:16 / 9; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-sunk); border-bottom:1px solid var(--line); }
.julian-site .work-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.julian-site .work-media--red { background:var(--brand-soft); }
.julian-site .work-media--gold { background:var(--brand-2-soft); }
.julian-site .work-icon { width:96px; height:96px; border-radius:50%; background:var(--surface); box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; }
.julian-site .ps-hl-arrow { transition:transform .2s,color .2s; }
.julian-site .paige-wrap { max-width:var(--page-width); margin:auto; padding:var(--section-space) var(--gutter); }
.julian-site .paige-card { border:1px solid rgb(126 92 138 / .3); }
.julian-site .paige-card h2 { letter-spacing:-.035em; }
.julian-site .paige-pill { min-height:44px; }
.julian-site .paige-mascot-wrap svg, .julian-site .paige-mascot svg { display:block; width:100%; height:auto; overflow:visible; }
.julian-site :is(.b-blink-l,.b-blink-r) { transform-box:view-box; animation:julianBeanBlink 5.4s ease-in-out infinite; }
.julian-site .b-blink-l { transform-origin:75px 161px; }
.julian-site .b-blink-r { transform-origin:143px 162px; }
.julian-site :is(.b-pupil-l,.b-pupil-r) { transition:transform .16s ease-out; }
@keyframes julianBeanBlink { 0%,93%,97%,100% { transform:scaleY(1); } 95% { transform:scaleY(.06); } }
@keyframes julianModalIn { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }

/* Writing index: a real illustrated cover, followed by the existing copy. */
.julian-site .blog-head { max-width:1000px; margin:auto; padding:var(--section-space) var(--gutter) var(--space-7); }
.julian-site .blog-title { font-family:var(--font-serif); font-size:clamp(56px,7vw,88px); font-weight:400; letter-spacing:-.035em; line-height:1.1; margin:var(--space-3) 0 var(--space-5); }
.julian-site .blog-intro { max-width:62ch; font-size:var(--type-lead); line-height:1.75; color:var(--ink-soft); }
.julian-site .blog-list { max-width:1000px; margin:auto; padding:0 var(--gutter) var(--section-space); }
.julian-site .post-card { display:block; position:relative; border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; }
.julian-site .post-card:focus-visible { border-radius:var(--radius-xl); }
.julian-site .pc-image { overflow:hidden; border-radius:23px 23px 0 0; border-bottom:1px solid var(--line); background:var(--bg-sunk); }
.julian-site .pc-image img { display:block; width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.julian-site .pc-copy { padding:clamp(24px,4vw,44px); }
.julian-site .pc-cat { color:var(--brand); }
.julian-site .pc-title { font-size:clamp(24px,3vw,34px); line-height:1.24; margin:var(--space-3) 0 var(--space-4); transition:color .2s; }
.julian-site .pc-excerpt { max-width:68ch; font-size:16px; line-height:1.8; color:var(--ink-soft); margin-bottom:var(--space-5); }
.julian-site .pc-foot { display:flex; align-items:center; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); padding-top:var(--space-5); font-family:var(--font-mono); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.julian-site .pc-read { display:inline-flex; align-items:center; gap:8px; margin-left:auto; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--brand); }
.julian-site .pc-read svg { transition:transform .2s; }
.julian-site .dot { color:var(--muted); }

/* Article: one quiet reading column with deliberate wider image breaks. */
.julian-site .post { max-width:var(--page-width); margin:auto; padding:0 var(--gutter); }
.julian-site .post-header { max-width:820px; margin:auto; padding:clamp(48px,6vw,88px) 0 var(--space-7); }
.julian-site .post-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.julian-site .post-meta::before { content:''; width:28px; height:2px; background:var(--brand-2); margin-right:4px; }
.julian-site .post-cat { color:var(--brand); min-height:44px; display:inline-flex; align-items:center; }
.julian-site .post-title { margin:var(--space-4) 0 var(--space-5); }
.julian-site .post-title-lead { display:block; max-width:21ch; font-family:var(--font-serif); font-size:var(--type-display); font-weight:400; line-height:1.02; letter-spacing:-.025em; }
.julian-site .post-title-tail { display:block; margin-top:var(--space-5); font-family:var(--font-display); font-size:clamp(19px,2vw,24px); line-height:1.4; font-weight:500; letter-spacing:-.025em; color:var(--brand); }
.julian-site .post-standfirst { max-width:58ch; font-size:var(--type-lead); line-height:1.7; color:var(--ink-soft); }
.julian-site .post-body { max-width:var(--reading-width); margin:auto; font-size:18px; line-height:1.85; color:var(--ink-soft); }
.julian-site .post-body > p { margin-bottom:var(--space-5); }
.julian-site .post-body h2 { font-size:clamp(25px,3vw,32px); margin:var(--space-8) 0 var(--space-5); line-height:1.25; }
.julian-site .post-body h3 { font-size:21px; line-height:1.35; margin-bottom:var(--space-4); letter-spacing:-.025em; }
.julian-site .post-body a { color:var(--brand); text-decoration:underline; }
.julian-site .post-body strong { color:var(--ink); font-weight:600; }
.julian-site .post-body ul { margin:0 0 var(--space-5); padding-left:24px; }
.julian-site .post-body li { margin-bottom:var(--space-2); }
.julian-site .post-body li::marker { color:var(--brand); }
.julian-site .post-body code { font-family:var(--font-mono); font-size:.85em; }
.julian-site .post-fig { margin:var(--space-7) 0; }
.julian-site .pf-imgs { display:grid; gap:var(--space-4); }
.julian-site .post-fig img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); background:var(--bg-sunk); }
.julian-site .post-fig figcaption { max-width:64ch; margin:var(--space-4) auto 0; padding-left:var(--space-4); border-left:2px solid var(--brand-2); font-size:13px; line-height:1.75; color:var(--muted); text-align:left; }
.julian-site .post-hero { margin:0 0 var(--space-8); }
.julian-site .post-hero img, .julian-site .closing img { border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); }
.julian-site .post-hero figcaption { max-width:820px; }
.julian-site .post-fig.duo .pf-imgs { grid-template-columns:1.7fr 1fr; align-items:center; }
.julian-site .post-fig.phone-duo .pf-imgs { grid-template-columns:3.4fr 1fr; align-items:end; }
.julian-site .post-fig.trio .pf-imgs { grid-template-columns:1.25fr 1.4fr .8fr; align-items:center; }
.julian-site .post-fig.side .pf-imgs { max-width:460px; margin:auto; }
.julian-site .post-fig.narrow .pf-imgs { max-width:300px; }
.julian-site .browser { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-lg); }
.julian-site .browser-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--bg-sunk); border-bottom:1px solid var(--line); }
.julian-site .browser-bar span { width:8px; height:8px; border-radius:50%; background:var(--line); }
.julian-site .browser-bar span:first-child { background:var(--brand); }
.julian-site .browser-bar span:nth-child(2) { background:var(--brand-2); }
.julian-site .browser-bar em { margin-left:12px; font:normal 10px/1.5 var(--font-mono); color:var(--muted); }
.julian-site .browser img { border:0; border-radius:0; box-shadow:none; }
.julian-site .post-toc { max-width:var(--reading-width); margin:0 auto var(--space-7); padding:var(--space-6); background:var(--bg-sunk); border:1px solid var(--line); border-radius:var(--radius-lg); }
.julian-site .toc-h { color:var(--gold-ink); margin-bottom:var(--space-4); }
.julian-site .post-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px; padding:0; list-style:none; counter-reset:toc; }
.julian-site .post-toc li { counter-increment:toc; }
.julian-site .post-toc a { display:flex; align-items:baseline; gap:10px; min-height:44px; padding:10px 0; font-size:14px; line-height:1.6; color:var(--ink-soft); text-decoration:none; }
.julian-site .post-toc a::before { content:counter(toc,decimal-leading-zero); color:var(--brand); font:11px/1.6 var(--font-mono); }
.julian-site .read-progress { position:fixed; z-index:40; top:0; left:0; width:100%; height:3px; pointer-events:none; }
.julian-site .read-progress-bar { width:100%; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transform:scaleX(0); transform-origin:left; }

/* Dated narrative: the line is continuous, independent of reveal animations. */
.julian-site .timeline { position:relative; margin:var(--space-7) 0; }
.julian-site .timeline::before { content:''; position:absolute; top:10px; bottom:0; left:6px; width:1px; background:linear-gradient(var(--brand-2),var(--brand)); }
.julian-site .tl-item { position:relative; padding:0 0 var(--space-7) 36px; }
.julian-site .tl-item:last-child { padding-bottom:0; }
.julian-site .tl-item::before { content:''; position:absolute; top:8px; left:1px; width:11px; height:11px; border:2px solid var(--brand); border-radius:50%; background:var(--bg); box-shadow:0 0 0 5px var(--bg); }
.julian-site .tl-item:last-child::before { background:var(--brand); }
.julian-site .tl-item h3 { display:flex; flex-direction:column; gap:var(--space-2); }
.julian-site .tl-date { color:var(--brand); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.julian-site .tl-title { text-wrap:balance; }
.julian-site .tl-item > p { margin:0 0 var(--space-4); }
.julian-site .tl-item > p:last-child { margin-bottom:0; }
.julian-site .timeline .post-fig { margin:var(--space-6) 0 var(--space-4); }
.julian-site .timeline .post-fig.wide { margin-left:0; margin-right:0; }
.julian-site .ph-box { display:flex; flex-direction:column; gap:var(--space-2); border:1px dashed var(--brand-2); border-radius:var(--radius-lg); background:linear-gradient(135deg,var(--brand-2-soft),var(--bg)); padding:var(--space-6); text-align:left; }
.julian-site .ph-label { color:var(--gold-ink); }
.julian-site .ph-text { color:var(--ink-soft); font-size:14px; line-height:1.75; max-width:56ch; }
.julian-site .post-pull { position:relative; margin:var(--space-7) 0; padding:32px 32px 32px 48px; border-left:3px solid var(--brand); border-radius:0 var(--radius-lg) var(--radius-lg) 0; background:linear-gradient(110deg,var(--brand-2-soft),transparent); font-family:var(--font-serif); font-style:italic; font-size:clamp(30px,3.5vw,40px); line-height:1.25; letter-spacing:-.015em; color:var(--ink); text-wrap:balance; }
.julian-site .post-pull::before { content:'\201C'; position:absolute; left:14px; top:8px; font-family:var(--font-serif); font-style:normal; font-size:56px; line-height:1; color:var(--brand); }
.julian-site .post-pull p { margin:0; }
.julian-site .tool-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); list-style:none; padding:0 !important; margin:var(--space-6) 0 var(--space-7) !important; }
.julian-site .tool-list li { position:relative; margin:0; min-width:0; padding:var(--space-5); border:1px solid var(--line); border-top:2px solid var(--brand-2); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); font-size:15px; line-height:1.75; }
.julian-site .tool-list li strong { display:block; margin-bottom:var(--space-2); font-size:16px; line-height:1.4; letter-spacing:-.02em; color:var(--brand); }
.julian-site .course-card { margin:var(--space-6) 0 var(--space-7); padding:var(--space-6); background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand-2); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.julian-site .cc-label, .julian-site .ic-label { color:var(--gold-ink); margin-bottom:var(--space-2); }
.julian-site .cc-title { font-size:22px; font-weight:600; line-height:1.4; letter-spacing:-.025em; color:var(--ink); margin-bottom:var(--space-3); }
.julian-site .cc-text { font-size:15px; line-height:1.75; margin-bottom:var(--space-4); }
.julian-site .cc-link, .julian-site .ic-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:14px; font-weight:600; }
.julian-site .interview-card { display:grid; grid-template-columns:80px minmax(0,1fr); gap:var(--space-5); align-items:start; padding:var(--space-5); margin:var(--space-6) 0 var(--space-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .interview-card img { display:block; width:80px; height:80px; object-fit:cover; object-position:center 20%; border:4px solid var(--bg); border-radius:50%; box-shadow:0 0 0 1px var(--brand-2); }
.julian-site .ic-title { font-size:17px; font-weight:600; line-height:1.4; color:var(--ink); margin-bottom:var(--space-2); }
.julian-site .ic-text { font-size:14px; line-height:1.75; }
.julian-site .post-end { max-width:calc(var(--reading-width) + 2 * var(--gutter)); margin:var(--space-8) auto 0; padding:0 var(--gutter) var(--space-7); }
.julian-site .post-end-inner { border-top:1px solid var(--line); padding-top:var(--space-6); }
.julian-site .post-byline { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6); }
.julian-site .post-byline img { width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:center 20%; border:3px solid var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .pb-name { font-size:15px; font-weight:600; }
.julian-site .pb-sub { font-size:13px; color:var(--muted); }
.julian-site .post-cta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-5); padding:var(--space-6); border-radius:var(--radius-lg); background:var(--ink); }
.julian-site .pcta-t { font-family:var(--font-serif); font-size:30px; line-height:1.2; color:var(--bg); margin-bottom:var(--space-2); }
.julian-site .pcta-s { max-width:42ch; color:#D4CFC6; font-size:14px; line-height:1.75; }
.julian-site .post-cta a { display:inline-flex; align-items:center; min-height:48px; padding:12px 20px; border-radius:var(--radius-md); color:#fff; background:#7E5C8A; font-size:14px; font-weight:600; text-decoration:none; }

/* The same footer on the home page and both writing pages. */
.julian-site .foot { margin-top:var(--space-7); background:var(--bg-sunk); border-top:1px solid var(--line); }
.julian-site .foot-main { max-width:var(--page-width); margin:auto; padding:var(--space-8) var(--gutter) var(--space-7); display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; gap:var(--space-5); }
.julian-site .foot-julian, .julian-site .foot-bean { min-width:0; display:flex; flex-direction:column; padding:var(--space-6); border:1px solid var(--line); border-top:2px solid var(--brand); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .foot-bean { border-top-color:#7E5C8A; }
.julian-site .foot-julian-head, .julian-site .foot-bean-head { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.julian-site .foot-julian-head img { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:center 18%; }
.julian-site .foot-julian-head b, .julian-site .foot-bean-head b { display:block; font-size:17px; font-weight:600; letter-spacing:-.025em; }
.julian-site .foot-julian-head em { display:block; font-style:normal; font-size:12px; color:var(--muted); }
.julian-site .foot-bean-head img { width:34px; height:38px; }
.julian-site .foot-bean p { font-size:14px; line-height:1.8; color:var(--ink-soft); margin-bottom:var(--space-4); }
.julian-site .foot-bean-soon { display:inline-flex; align-items:center; gap:8px; font:10px/1.7 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:#7E5C8A; margin-bottom:var(--space-4); }
.julian-site .foot-bean-soon .d { width:6px; height:6px; border-radius:50%; background:#7E5C8A; }
.julian-site .foot-cta { display:inline-flex; align-items:center; align-self:start; gap:10px; min-height:46px; padding:10px 18px; margin-bottom:var(--space-5); font-size:14px; font-weight:600; border-radius:var(--radius-md); color:#fff; background:#7E5C8A; text-decoration:none; transition:transform .2s,background .2s; }
.julian-site .foot-links { display:flex; flex-direction:column; align-items:start; gap:0; margin-top:auto; }
.julian-site .foot-julian .foot-links { margin-top:0; }
.julian-site .foot-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:6px 0; font-size:14px; line-height:1.6; color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.julian-site .foot-link svg, .julian-site .foot-loc svg { color:var(--muted); flex-shrink:0; transition:transform .2s,color .2s; }
.julian-site .foot-connect-block { margin-top:var(--space-5); border-top:1px solid var(--line); padding-top:var(--space-5); }
.julian-site .foot-h { color:var(--gold-ink); margin-bottom:var(--space-2); }
.julian-site .foot-connect-row { display:flex; align-items:center; flex-wrap:wrap; gap:0 20px; }
.julian-site .mail-row { display:inline-flex; align-items:center; gap:4px; }
.julian-site .mail-copy { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; background:transparent; border:1px solid transparent; border-radius:var(--radius-md); color:var(--muted); cursor:pointer; }
.julian-site .mail-copy.copied { color:var(--brand); background:var(--brand-soft); }
.julian-site .mc-check, .julian-site .copied .mc-ico { display:none; }
.julian-site .copied .mc-check { display:inline-flex; }
.julian-site .foot-loc { display:inline-flex; align-items:center; gap:9px; margin-top:var(--space-4); font-size:13px; color:var(--muted); }
.julian-site .foot-bottom { background:var(--bg); border-top:1px solid var(--line); }
.julian-site .foot-bottom-inner { max-width:var(--page-width); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; margin:auto; padding:var(--space-4) var(--gutter); font:11px/1.75 var(--font-mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.julian-site .foot-legal { display:inline-flex; align-items:center; flex-wrap:wrap; gap:12px; }
.julian-site .foot-legal-link { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; color:var(--muted); font:inherit; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.julian-site .foot-sep { color:var(--muted); }
.julian-site .modal-close, .julian-site .lang-btn { min-width:44px; min-height:44px; }
.julian-site .modal-card { padding:clamp(20px,4vw,40px); }
.julian-site .modal-overlay.open { animation-name:julianModalIn; }

/* 404 keeps its Beanly illustration and existing wording; header and links are Julian Brunke. */
.julian-site.page-404 .top { max-width:var(--page-width); width:100%; margin:auto; padding:var(--space-5) var(--gutter); }
.julian-site.page-404 .top a { display:inline-flex; align-items:center; min-height:44px; }
.julian-site.page-404 .wrap-404 { padding:var(--space-7) var(--gutter) var(--section-space); }
.julian-site.page-404 h1 { font-family:var(--font-serif); font-size:clamp(40px,6vw,68px); font-weight:400; letter-spacing:-.025em; }
.julian-site.page-404 .btn-home { min-height:48px; box-shadow:0 8px 20px -10px rgb(139 58 46 / .4); }
.julian-site.page-404 .link-2 { display:inline-flex; align-items:center; min-height:44px; color:var(--brand); }
.julian-site.page-404 .top .nav-name { color:var(--ink); }

@media (min-width:1100px) {
  .julian-site .post-body > .post-fig:is(.wide,.duo,.trio,.phone-duo) { margin-left:-80px; margin-right:-80px; }
  .julian-site .timeline { margin-left:-128px; }
  .julian-site .timeline::before { left:110px; }
  .julian-site .tl-item { padding-left:152px; }
  .julian-site .tl-item::before { left:105px; }
  .julian-site .tl-date { position:absolute; left:0; top:3px; width:94px; text-align:right; }
  .julian-site .timeline .post-fig.wide { margin-right:-80px; }
}
@media (max-width:900px) {
  .julian-site .nav-links { display:none; }
  .julian-site .nav-burger { display:inline-flex; }
  .julian-site .nav-menu.open { display:flex; flex-direction:column; }
  .julian-site section.hero { grid-template-columns:1fr; gap:var(--space-7); }
  .julian-site .hero-media { max-width:360px; justify-self:center; width:calc(100% - 24px); margin:0 12px 16px 0; }
  .julian-site .hero > div:first-child > p { max-width:68ch !important; }
  .julian-site .about-grid { grid-template-columns:1fr; gap:var(--space-7); }
  .julian-site .about-grid > div:first-child p { max-width:58ch !important; }
  .julian-site .paige-card { grid-template-columns:auto minmax(0,1fr) !important; gap:24px !important; padding:32px !important; }
  .julian-site .paige-pill { grid-column:1 / -1; justify-self:start; }
}
@media (max-width:720px) {
  .julian-site .foot-main { grid-template-columns:1fr; }
  .julian-site .work-grid { grid-template-columns:1fr; }
  .julian-site .post-toc ol { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .julian-site .nav-inner { padding-top:12px; padding-bottom:12px; gap:12px; }
  .julian-site .hero h1 { max-width:13ch; }
  .julian-site .hero > div:first-child > p { font-size:17px !important; }
  .julian-site .about-beat { grid-template-columns:30px minmax(0,1fr); gap:16px; }
  .julian-site .ab-icn { width:30px; height:30px; }
  .julian-site .ab-node::before { left:14px; top:30px; }
  .julian-site .work-card > div:last-of-type, .julian-site .foot-julian, .julian-site .foot-bean { padding:var(--space-5) !important; }
  .julian-site .work-card h3 { font-size:21px !important; }
  .julian-site .paige-card { grid-template-columns:1fr !important; padding:28px !important; }
  .julian-site .paige-mascot { width:72px !important; }
  .julian-site .blog-intro, .julian-site .post-standfirst { font-size:18px; }
  .julian-site .post-header { padding-bottom:var(--space-6); }
  .julian-site .post-meta { font-size:10px; gap:6px 8px; letter-spacing:.08em; }
  .julian-site .post-meta::before { display:none; }
  .julian-site .post-body { font-size:17px; line-height:1.85; }
  .julian-site .post-hero { margin-bottom:var(--space-7); }
  .julian-site .post-hero img { border-radius:var(--radius-lg); }
  .julian-site .post-toc { padding:var(--space-5); }
  .julian-site .post-fig figcaption { font-size:12px; }
  .julian-site .post-fig.duo .pf-imgs { grid-template-columns:1fr; }
  .julian-site .post-fig.duo img:nth-child(2) { max-width:65%; justify-self:center; }
  .julian-site .post-fig.phone-duo .pf-imgs { grid-template-columns:2.6fr 1fr; gap:10px; }
  .julian-site .post-fig.trio .pf-imgs { grid-template-columns:1fr 1fr; gap:10px; }
  .julian-site .post-fig.trio img:first-child { grid-column:1 / -1; }
  .julian-site .tool-list { grid-template-columns:1fr; }
  .julian-site .post-pull { padding:28px 20px 28px 36px; }
  .julian-site .post-pull::before { left:9px; top:7px; font-size:44px; }
  .julian-site .tl-item { padding-left:28px; }
  .julian-site .interview-card { grid-template-columns:1fr; gap:var(--space-4); }
  .julian-site .interview-card img { width:64px; height:64px; }
  .julian-site .course-card, .julian-site .post-cta, .julian-site .ph-box { padding:var(--space-5); }
  .julian-site .foot-legal { gap:8px; }
}
@media (max-width:420px) { .julian-site .site-header .ps-iconlink { display:none !important; } }

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .julian-site .ps-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .julian-site .ps-iconlink:hover { color:var(--brand) !important; background:var(--brand-soft); }
  .julian-site .ps-link-u:hover, .julian-site .post-toc a:hover, .julian-site .foot-link:hover, .julian-site .foot-legal-link:hover { color:var(--brand) !important; }
  .julian-site .nav-burger:hover { border-color:var(--brand); }
  .julian-site .work-card:has(.work-link):hover { border-color:var(--brand-2); box-shadow:var(--shadow-lg); }
  .julian-site .work-card:hover .work-media img { transform:scale(1.035); }
  .julian-site .work-link:hover .ps-hl-arrow { color:var(--brand); transform:translate(2px,-2px); }
  .julian-site .post-card:hover { border-color:var(--brand-2); box-shadow:var(--shadow-lg); }
  .julian-site .post-card:hover .pc-image img { transform:scale(1.025); }
  .julian-site .post-card:hover .pc-title { color:var(--brand); }
  .julian-site .post-card:hover .pc-read svg { transform:translateX(3px); }
  .julian-site .tool-list li:hover { border-color:var(--brand-2); box-shadow:var(--shadow-lg); }
  .julian-site .post-fig:not(.post-hero) img { transition:transform .45s,box-shadow .3s; }
  .julian-site .post-fig:not(.post-hero):not(.trio) .pf-imgs > img:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
  .julian-site .foot-link:hover { text-decoration:underline; }
  .julian-site .foot-link.chev:hover svg { transform:translateX(2px); }
  .julian-site .foot-bean .foot-link:hover { color:#574169 !important; }
  .julian-site .foot-cta:hover, .julian-site .post-cta a:hover { background:#574169; transform:translateY(-1px); }
  .julian-site .mail-copy:hover { color:var(--brand); background:var(--brand-2-soft); }
}
@media (hover:none), (prefers-reduced-motion:reduce) {
  .julian-site [data-spot]::before, .julian-site .tilt-glare { display:none; }
  .julian-site [data-tilt], .julian-site [data-magnetic],
  .julian-site .paige-mascot svg, .julian-site .foot-bean-head img,
  .julian-site .nav-beanly img, .julian-site .nav-beanly svg,
  .julian-site .btn-home:hover { transform:none !important; translate:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(> .julian-site) { scroll-behavior:auto; }
  .julian-site *, .julian-site *::before, .julian-site *::after { animation:none !important; transition:none !important; }
  .julian-site .b-pupil-l, .julian-site .b-pupil-r { transform:none !important; }
  .julian-site .read-progress { display:none; }
}
@media print {
  .julian-site .site-header, .julian-site .foot, .julian-site .skip-link,
  .julian-site .read-progress, .julian-site .post-toc, .julian-site .post-cta { display:none; }
  .julian-site { background:white; }
  .julian-site .post { max-width:none; padding:0; }
  .julian-site .post-body { max-width:72ch; font-size:11pt; }
  .julian-site .post-fig, .julian-site .tool-list li { break-inside:avoid; }
}

/* ---------- Click-to-load LinkedIn embed (two-click privacy) ---------- */
.julian-site .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.julian-site .li-embed { margin:var(--space-7) 0; }
.julian-site .li-card { position:relative; border:1px solid var(--line); border-top:3px solid var(--brand-2); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); padding:var(--space-6); }
.julian-site .li-head { display:flex; align-items:center; gap:12px; margin-bottom:var(--space-4); }
.julian-site .li-logo { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--brand-soft); color:var(--brand); flex:0 0 auto; }
.julian-site .li-meta { display:flex; flex-direction:column; line-height:1.35; }
.julian-site .li-meta b { font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--ink); }
.julian-site .li-meta span { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink); font-variant-numeric:tabular-nums; }
.julian-site .li-quote { margin:0; padding:0 0 0 var(--space-5); border-left:3px solid var(--brand); }
.julian-site .li-quote p { margin:0; font-family:var(--font-serif); font-style:italic; font-size:clamp(21px,2.4vw,26px); line-height:1.35; color:var(--ink); text-wrap:pretty; }
.julian-site .li-embed .li-cite { max-width:none; margin:var(--space-3) 0 0; border-left:0; padding-left:var(--space-5); font-size:14px; color:var(--ink-soft); text-align:left; }
.julian-site .li-cite cite { font-style:normal; font-weight:600; }
.julian-site .li-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:var(--space-5); }
.julian-site .li-load { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border:0; border-radius:999px; background:var(--brand); color:#fff; font:600 15px/1 var(--font-body); cursor:pointer; transition:background .15s; }
.julian-site .li-load:hover { background:var(--brand-hover); }
.julian-site .li-load:focus-visible, .julian-site .li-link:focus-visible, .julian-site .li-note a:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.julian-site .li-link { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-weight:600; color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.julian-site .li-note { margin:var(--space-3) 0 0; font-size:13px; line-height:1.6; color:var(--muted); max-width:60ch; }
.julian-site .li-note a { color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
html:not(.js) .julian-site .li-load, html:not(.js) .julian-site .li-note { display:none; }
.julian-site .li-frame { margin-top:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; }
.julian-site .li-frame iframe { display:block; width:100%; max-width:100%; height:600px; border:0; }
.julian-site .li-embed.is-loaded .li-load, .julian-site .li-embed.is-loaded .li-note { display:none; }
@media (max-width:520px) { .julian-site .li-card { padding:var(--space-5); } .julian-site .li-frame iframe { height:640px; } }
@media (prefers-reduced-motion: reduce) { .julian-site .li-load { transition:none; } }

/* ---------- Featured portfolio card (newest work, spans the grid) ---------- */
.julian-site .work-links { margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; }
.julian-site .work-link--sub { position:relative; z-index:1; }
.julian-site .work-link--sub::after { content:none; }
.julian-site .work-link--sub:hover { text-decoration:underline !important; text-underline-offset:3px; }
.julian-site .work-link--sub:focus-visible { outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; }
@media (min-width:721px) { .julian-site .work-card--feature { grid-column:1 / -1; } }
@media (min-width:900px) {
  .julian-site .work-card--feature { flex-direction:row; }
  .julian-site .work-card--feature .work-media { flex:0 0 56%; aspect-ratio:16 / 10; min-height:0; border-bottom:0; border-right:1px solid var(--line); }
  .julian-site .work-card--feature > div:last-of-type { justify-content:center; }
}

/* ---------- Discuss link (blog articles) ---------- */
.julian-site .post-discuss { display:inline-flex; align-items:center; gap:4px; min-height:44px; font-weight:600; color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.julian-site .post-discuss:hover { color:var(--brand-hover); }
.julian-site .post-discuss:focus-visible { outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---------- aih-: AI / L&D history article, diagrams and draft card ---------- */
.julian-site .aih-era { display:block; margin-top:8px; font:11px/1.6 var(--font-mono); color:var(--gold-ink); letter-spacing:.1em; }
.julian-site .aih-panel { min-width:0; border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; }
.julian-site .aih-graphic-head { padding:28px 28px 20px; }
.julian-site .aih-kicker { display:block; font:500 10px/1.7 var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--gold-ink); }
.julian-site .aih-graphic-title { margin:8px 0 0; font:400 clamp(28px,3vw,38px)/1.1 var(--font-serif); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.julian-site .aih-graphic-note { margin:0; padding:18px 24px 24px; font-size:12px; line-height:1.65; color:var(--muted); }
.julian-site .aih-overview { margin:0 0 var(--space-7); }
.julian-site .aih-legend { display:flex; flex-wrap:wrap; gap:8px 20px; padding:0 28px 20px; font-size:11px; line-height:1.6; color:var(--ink-soft); }
.julian-site .aih-legend > span { display:inline-flex; align-items:center; gap:7px; }
.julian-site .aih-text { --aih-thread:var(--brand); }
.julian-site .aih-image { --aih-thread:var(--brand-2); }
.julian-site .aih-voice { --aih-thread:var(--ink); }
.julian-site .aih-video { --aih-thread:var(--muted); }
.julian-site .aih-author { --aih-thread:var(--gold-ink); }
.julian-site .aih-code { --aih-thread:var(--brand-hover); }
.julian-site .aih-dot { display:inline-block; width:10px; height:10px; background:var(--aih-thread); border-radius:50%; flex:none; }
.julian-site .aih-image.aih-dot { border-radius:2px; }
.julian-site .aih-video.aih-dot { border-radius:0; transform:rotate(45deg); }
.julian-site .aih-author.aih-dot { background:transparent; border:2px solid var(--aih-thread); }
.julian-site .aih-code.aih-dot { border-radius:0; background:repeating-linear-gradient(90deg,var(--aih-thread) 0 2px,transparent 2px 4px); }
.julian-site .aih-rail { overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-color:var(--brand-2) var(--bg-sunk); padding:10px 20px 20px; }
.julian-site .aih-rail:focus-visible { outline-offset:-4px; }
.julian-site .aih-years { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); min-width:1020px; }
.julian-site .aih-year { position:relative; min-width:0; padding:20px 7px 4px; border-top:1px solid var(--brand-2); scroll-snap-align:start; }
.julian-site .aih-year::before { content:''; position:absolute; left:8px; top:-4px; width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 5px var(--surface); }
.julian-site .aih-year > b { display:block; margin-bottom:16px; font:500 13px/1 var(--font-mono); color:var(--ink); }
.julian-site .aih-milestone { display:flex; align-items:center; min-height:44px; margin:0 0 8px; border-left:3px solid var(--aih-thread); background:var(--bg); padding:6px; font-size:10px; line-height:1.55; color:var(--ink-soft); text-decoration:none; overflow-wrap:break-word; }
.julian-site .aih-scroll-note { margin:0; padding:0 28px 22px; font:11px/1.7 var(--font-mono); color:var(--muted); }
.julian-site .aih-scroll-note > span { color:var(--brand); margin-left:10px; }
.julian-site .aih-lanes { display:grid; gap:26px; padding:0 24px; }
.julian-site .aih-lane { min-width:0; }
.julian-site .aih-lane-head { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.julian-site .aih-lane-head > b { color:var(--ink); font-size:14px; }
.julian-site .aih-lane ol { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; list-style:none; margin:0; padding:0; }
.julian-site .aih-lane li { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; margin:0; padding:12px 10px; border:1px solid var(--line); border-radius:10px; background:var(--bg); font-size:12px; line-height:1.5; color:var(--ink-soft); }
.julian-site .aih-lane li:not(:last-child)::after { content:'→'; position:absolute; right:-11px; top:40px; color:var(--brand); font-size:14px; }
.julian-site .aih-lane li.aih-human { border-color:var(--brand); background:var(--surface); }
.julian-site .aih-step-no { font:10px/1 var(--font-mono); color:var(--gold-ink); }
.julian-site .aih-lane small { display:block; margin-top:auto; font:9px/1.6 var(--font-mono); color:var(--brand); }
.julian-site .aih-stack-table { padding:0 24px; font-size:12px; line-height:1.6; }
.julian-site .aih-stack-head, .julian-site .aih-stack-row { display:grid; grid-template-columns:1.05fr repeat(3,1.25fr); }
.julian-site .aih-stack-head { font:10px/1.6 var(--font-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.julian-site .aih-stack-head > div { padding:10px; }
.julian-site .aih-stack-row { border-top:1px solid var(--line); }
.julian-site .aih-stack-row > div { padding:14px 10px; }
.julian-site .aih-stack-row > div:last-child { background:var(--brand-2-soft); }
.julian-site .aih-layer { color:var(--brand); font-weight:600; }
.julian-site .aih-mobile-era { display:none; }
.julian-site .aih-builder-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:4px 28px 28px; }
.julian-site .aih-builder-grid > div { min-width:0; }
.julian-site .aih-builder-grid b { display:block; margin-top:16px; font-size:14px; line-height:1.5; color:var(--ink); }
.julian-site .aih-builder-grid p { margin:8px 0 0; font-size:12px; line-height:1.65; }
.julian-site .aih-door { position:relative; display:flex; align-items:flex-end; height:116px; margin-top:18px; border-bottom:2px solid var(--brand-2); background:linear-gradient(90deg,var(--bg-sunk),var(--surface)); overflow:hidden; }
.julian-site .aih-door::before { content:''; position:absolute; bottom:0; left:18px; height:90px; width:42px; border:2px solid var(--brand); border-bottom:0; border-radius:40px 40px 0 0; background:var(--brand-soft); }
.julian-site .aih-door-two::before { width:80px; }
.julian-site .aih-door-three::before { width:136px; background:var(--brand-2-soft); }
.julian-site .aih-door > span { position:relative; margin-left:auto; padding:10px; font:12px/1 var(--font-mono); color:var(--gold-ink); }
.julian-site .aih-builder-floor { margin:0; padding:18px 28px; background:var(--brand); color:var(--surface); font:400 23px/1.3 var(--font-serif); }
.julian-site .aih-sources { max-width:var(--reading-width); margin:var(--space-8) auto 0; padding-top:var(--space-5); border-top:1px solid var(--line); font-size:12px; line-height:1.8; }
.julian-site .aih-sources > p { margin-bottom:12px; }
.julian-site .aih-sources ul { padding-left:18px; }
.julian-site .aih-sources li { margin-bottom:9px; }
.julian-site .aih-sources a { overflow-wrap:anywhere; }
.julian-site .aih-index-card { margin-bottom:var(--space-7); }
.julian-site .aih-draft { display:inline-block; margin-left:12px; padding:3px 9px; border:1px solid var(--brand); border-radius:999px; font:10px/1.5 var(--font-mono); color:var(--brand); background:var(--brand-soft); letter-spacing:.04em; }
@media (hover:hover) and (pointer:fine) {
  .julian-site .aih-milestone:hover { background:var(--brand-2-soft); text-decoration:underline; }
}
@media (max-width:700px) {
  .julian-site .aih-graphic-head { padding:22px 18px 18px; }
  .julian-site .aih-legend { padding:0 18px 18px; gap:8px 14px; }
  .julian-site .aih-years { grid-template-columns:repeat(11,132px); min-width:1452px; }
  .julian-site .aih-milestone { font-size:12px; padding:10px; }
  .julian-site .aih-year { padding-left:9px; padding-right:12px; }
  .julian-site .aih-scroll-note { padding:0 18px 20px; font-size:10px; }
  .julian-site .aih-lanes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:0 16px; }
  .julian-site .aih-lane-head { flex-direction:column; gap:5px; min-height:84px; }
  .julian-site .aih-lane-head > b { font-size:13px; }
  .julian-site .aih-lane ol { grid-template-columns:1fr; gap:20px; }
  .julian-site .aih-lane li { min-height:125px; padding:12px; }
  .julian-site .aih-lane li:not(:last-child)::after { content:'↓'; top:auto; right:auto; left:calc(50% - 4px); bottom:-21px; }
  .julian-site .aih-graphic-note { padding:18px 16px 22px; font-size:11px; }
  .julian-site .aih-stack-table { padding:0 16px; font-size:12px; }
  .julian-site .aih-stack-head { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .julian-site .aih-stack-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 8px; padding-bottom:12px; }
  .julian-site .aih-stack-row > div { padding:8px 5px; overflow-wrap:break-word; }
  .julian-site .aih-stack-row > .aih-layer { grid-column:1 / -1; padding:10px 0 0; }
  .julian-site .aih-mobile-era { display:block; margin-bottom:6px; font:9px/1.5 var(--font-mono); color:var(--muted); }
  .julian-site .aih-builder-grid { gap:12px; padding:0 16px 20px; }
  .julian-site .aih-builder-grid b { font-size:12px; }
  .julian-site .aih-builder-grid p { font-size:11px; }
  .julian-site .aih-door { height:100px; }
  .julian-site .aih-door::before { left:5px; width:22px; height:70px; }
  .julian-site .aih-door-two::before { width:46px; }
  .julian-site .aih-door-three::before { width:72px; }
  .julian-site .aih-door > span { padding:5px; font-size:9px; }
  .julian-site .aih-builder-floor { font-size:21px; padding:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .julian-site .aih-rail { scroll-behavior:auto; scroll-snap-type:none; }
}

/* =====================================================================
   E: "Fall Leaf, modern" (Oct 2026)
   Funnel Display + Funnel Sans, rust + gold, warm night sections,
   tactile buttons. Loaded last so it refines everything above.
   Scoped to .julian-site, Beanly pages are untouched.
   ===================================================================== */
.julian-site {
  --font-display:"Funnel Display",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Funnel Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:var(--font-display);
  --font-mono:var(--font-body);
  --night:#1C1512; --night-2:#261D18; --night-3:#30251E; --night-line:#3D3029;
  --on-night:#F5EBDD; --on-night-soft:#D3C5B1; --on-night-muted:#A8998A;
  --bg:#F6EFE4; --bg-sunk:#EEE4D4; --surface:#FFFBF5; --line:#E2D5C1;
  --ink:#1C1512; --ink-soft:#45372D; --muted:#73645A;
  --brand:#8B3A2E; --brand-hover:#762F25; --brand-deep:#5A231B; --brand-soft:#F3E0D8;
  --gold:#E8B85C; --gold-deep:#9A7020; --brand-2:#B8923E; --brand-2-soft:#F4E6C6; --brand-2-hover:#6E4F12; --gold-ink:#6E4F12;
  --radius-md:12px; --radius-lg:20px; --radius-xl:28px;
  --page-width:1200px;
  --type-display:clamp(2.6rem,4.6vw,4.1rem);
  --type-h2:clamp(1.9rem,3vw,2.6rem);
  --shadow-sm:0 1px 2px rgb(28 21 18 / .05),0 10px 26px -18px rgb(28 21 18 / .22);
  --shadow-lg:0 30px 60px -28px rgb(28 21 18 / .45),0 6px 16px rgb(28 21 18 / .08);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.7;
  background:var(--bg); color:var(--ink); overflow-x:clip;
  font-optical-sizing:auto; font-variant-numeric:lining-nums;
}
.julian-site :where(h1,h2,h3) { font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; line-height:1.02; }
.julian-site :where(h3) { font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.julian-site ::selection { background:var(--gold); color:var(--night); }
.julian-site :where(a,button,summary,input,textarea,[tabindex]):focus-visible { outline:3px solid var(--gold); outline-offset:4px; border-radius:8px; }
.julian-site .skip-link { background:var(--gold); color:var(--night); }

/* Labels: sentence case, no monospace, no tracked caps */
.julian-site :is(.ps-eyebrow,.post-meta,.pc-cat,.tl-date,.co-label,.cc-label,.ic-label,.ph-label,.toc-h,.foot-h,.li-meta span,.browser-bar em,.pc-foot,.foot-bottom-inner,.nm-soon,.foot-bean-soon) {
  font-family:var(--font-body); letter-spacing:0; text-transform:none;
}
.julian-site .dot, .julian-site .foot-sep, .julian-site .post-meta > .dot { display:none !important; }

/* Shared section scaffolding */
.julian-site .e-wrap { max-width:var(--page-width); margin:0 auto; padding-inline:var(--gutter); }
.julian-site .e-section { position:relative; padding-block:clamp(64px,7vw,104px); }
.julian-site .e-h2 { font-size:var(--type-h2); margin:0 0 20px; text-wrap:balance; }
.julian-site .e-sub { max-width:44ch; font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0; }
.julian-site .e-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 48px; margin-bottom:clamp(40px,5vw,64px); }
.julian-site .e-head .e-h2 { margin:0; }
.julian-site .e-night { background:var(--night); color:var(--on-night); }
.julian-site .e-night :where(h1,h2,h3) { color:var(--on-night); }
.julian-site .e-night .e-sub { color:var(--on-night-soft); }
.julian-site .e-rust { background:var(--brand); color:#FFFAF2; }
.julian-site .e-rust :where(h1,h2,h3) { color:#FFFAF2; }
.julian-site .e-rust .e-sub { color:#F3DDD3; }
.julian-site .e-grain { position:relative; isolation:isolate; }
.julian-site .e-grain::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--grain); background-size:240px; opacity:.14; mix-blend-mode:overlay; }
.julian-site .e-rust.e-grain::after { opacity:.18; }

/* Buttons: one tactile language everywhere */
.julian-site .e-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border:2px solid transparent; border-radius:var(--radius-md); font:700 16px/1 var(--font-body); text-decoration:none; cursor:pointer; white-space:nowrap;
  --d:var(--brand-deep); box-shadow:0 3px 0 var(--d),0 10px 22px -12px rgb(0 0 0 / .45); transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background-color .2s,border-color .2s,color .2s; }
.julian-site .e-btn svg { flex:0 0 auto; }
.julian-site .e-btn:hover { transform:translateY(-1px); box-shadow:0 4px 0 var(--d),0 14px 26px -12px rgb(0 0 0 / .5); }
.julian-site .e-btn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--d),0 4px 10px -8px rgb(0 0 0 / .4); transition-duration:.06s; }
.julian-site .e-btn--gold { background:var(--gold); color:var(--night); --d:var(--gold-deep); }
.julian-site .e-btn--rust { background:var(--brand); color:#FFFAF2; --d:var(--brand-deep); }
.julian-site .e-btn--ghost { background:rgb(255 250 242 / .06); color:var(--on-night); border-color:rgb(255 250 242 / .2); --d:#0E0A08; }
.julian-site .e-btn--ghost:hover { border-color:rgb(255 250 242 / .5); background:rgb(255 250 242 / .1); }
.julian-site .e-btn--paper { background:var(--surface); color:var(--ink); border-color:var(--line); --d:#D9C8AE; }
.julian-site .e-btn--paper:hover { border-color:var(--brand); }
.julian-site .e-btn--beanly { background:#7E5C8A; color:#fff; --d:#4A3356; }
.julian-site .e-link { display:inline-block; padding-block:10px; font-weight:700; line-height:1.4; color:var(--brand); text-decoration:underline 2px transparent; text-underline-offset:5px; transition:text-decoration-color .2s; }
.julian-site .e-link:hover { text-decoration-color:currentColor; }
.julian-site .e-link svg { display:inline; vertical-align:-1px; margin-left:6px; transition:transform .2s var(--ease-out); }
.julian-site .e-link:hover svg, .julian-site .e-wcard:hover .e-stretch svg { transform:translate(2px,-2px); }
.julian-site .e-tag { display:inline-flex; align-items:center; min-height:26px; padding:2px 10px; border-radius:999px; background:var(--brand-2-soft); color:var(--gold-ink); font-size:13px; font-weight:700; line-height:1.2; }
.julian-site .e-tag--quiet { background:var(--bg-sunk); color:var(--ink-soft); }
.julian-site .e-tag--draft { background:transparent; border:1px dashed currentColor; }
.julian-site .e-kicker { display:flex; flex-wrap:wrap; gap:4px 10px; margin:0 0 10px; font-size:14px; font-weight:600; line-height:1.4; color:var(--muted); }
.julian-site .e-kicker span { color:var(--brand); font-weight:700; }
.julian-site .e-tags { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; padding:0; list-style:none; }

/* ---------- Header: floating glass bar over every page ---------- */
.julian-site .site-header { position:fixed; top:0; left:0; right:0; z-index:40; padding:12px max(10px, calc(var(--gutter) - 14px)) 0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--on-night); pointer-events:none; }
.julian-site .site-header.is-scrolled { box-shadow:none; }
.julian-site .nav-inner { pointer-events:auto; max-width:calc(var(--page-width) - 2 * var(--gutter) + 28px); margin:0 auto; padding:7px 8px 7px 12px; gap:16px; border-radius:18px; background:#2A201B; border:1px solid #3F322A; transition:background-color .3s; }
.julian-site .site-header.is-scrolled .nav-inner { background:#2A201B; }
.julian-site .nav-brand { color:var(--on-night); min-height:44px; }
.julian-site .nav-avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:center 20%; border:2px solid var(--gold); flex:0 0 auto; display:block; }
.julian-site .nav-name { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.025em; color:var(--on-night); }
.julian-site .nav-links { gap:2px; margin-left:8px; }
.julian-site .nav-links > a { min-height:40px; padding:8px 12px !important; border-radius:10px; }
.julian-site .nav-links > a:not(.nav-beanly) { font-size:15px; font-weight:600; color:var(--on-night-muted); text-decoration:none; transition:color .2s,background-color .2s; }
.julian-site .nav-links > a:not(.nav-beanly):hover { color:var(--on-night); background:rgb(255 250 242 / .07); }
.julian-site .nav-links a.is-active, .julian-site .nav-links a[aria-current] { color:var(--gold) !important; box-shadow:none; background:rgb(232 184 92 / .12); }
.julian-site .nav-sep { background:rgb(255 250 242 / .14); margin:0 6px; }
.julian-site .nav-beanly { color:#CBB6D4; font-size:15px; }
.julian-site .nav-beanly:hover { color:#EFE7F2; background:rgb(203 182 212 / .1); }
.julian-site .nav-tools { margin-left:auto; display:flex; align-items:center; gap:4px; }
.julian-site .nav-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; color:var(--on-night-muted); transition:color .2s,background-color .2s; }
.julian-site .nav-icon:hover { color:var(--on-night); background:rgb(255 250 242 / .07); }
.julian-site .nav-burger { background:rgb(255 250 242 / .06); color:var(--on-night); border:1px solid rgb(255 250 242 / .16); border-radius:12px; }
.julian-site .nav-burger[aria-expanded="true"] { background:var(--gold); border-color:var(--gold); color:var(--night); }
.julian-site .nav-menu { pointer-events:auto; max-width:calc(var(--page-width) - 2 * var(--gutter) + 28px); margin:8px auto 0; padding:6px 16px; border-radius:18px; background:#2A201B; border:1px solid #3F322A; }
.julian-site .nav-menu a { color:var(--on-night); border-bottom-color:rgb(255 250 242 / .1); font-weight:600; }
.julian-site .nav-menu a[aria-current] { color:var(--gold); }
.julian-site .nav-menu .nm-paige { color:#CBB6D4; }

/* ---------- Home: hero + about in one section, portrait beside ---------- */
.julian-site .e-hero { background:radial-gradient(900px circle at 88% -10%,rgb(232 184 92 / .13),rgb(139 58 46 / .08) 42%,transparent 70%),var(--night); color:var(--on-night); }
.julian-site .e-hero-inner { max-width:var(--page-width); margin:0 auto; padding:calc(clamp(48px,6vw,88px) + 72px) var(--gutter) clamp(72px,8vw,112px); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); grid-template-areas:"intro media" "about about"; column-gap:clamp(48px,7vw,104px); align-items:center; }
.julian-site .e-hero-intro { grid-area:intro; }
.julian-site .e-display { max-width:15ch; font-size:var(--type-display); line-height:1.02; letter-spacing:-.04em; color:var(--on-night); margin:0 0 28px; text-wrap:balance; }
.julian-site .e-hello { margin:0 0 8px; font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.015em; color:var(--on-night); }
.julian-site .e-hello .wave { display:inline-block; transform-origin:70% 75%; }
.julian-site .e-lead, .julian-site .e-about p { max-width:58ch; margin:0; font-size:17.5px; line-height:1.7; color:var(--on-night-soft); }
.julian-site .e-lead { margin-bottom:32px; }
.julian-site .e-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.julian-site .e-about { grid-area:about; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px clamp(32px,4vw,56px); margin-top:clamp(56px,6vw,80px); padding-top:clamp(36px,4vw,48px); border-top:1px solid var(--night-line); }
.julian-site .e-acol { display:flex; flex-direction:column; gap:16px; }
.julian-site .e-about p { max-width:none; font-size:16.5px; line-height:1.72; }
.julian-site .e-about .e-ain { color:var(--on-night); font-weight:600; }
.julian-site .e-hero-media { grid-area:media; align-self:center; justify-self:end; width:100%; max-width:380px; }
.julian-site .e-tilt { position:relative; border-radius:var(--radius-xl); transform-style:preserve-3d; }
.julian-site .e-plate { position:absolute; inset:20px -18px -18px 20px; border-radius:var(--radius-xl); background:linear-gradient(150deg,var(--brand),var(--brand-deep)); transform:translateZ(-24px); }
.julian-site .e-portrait { position:relative; aspect-ratio:4 / 5; border-radius:var(--radius-xl); overflow:hidden; border:6px solid var(--on-night); box-shadow:0 34px 70px -24px rgb(0 0 0 / .7); }
.julian-site .e-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.julian-site .e-hero-intro > * { animation:heroIn .9s var(--ease-out) both; }
.julian-site .e-hero-intro > :nth-child(2) { animation-delay:.08s; }
.julian-site .e-hero-intro > :nth-child(3) { animation-delay:.14s; }
.julian-site .e-hero-intro > :nth-child(4) { animation-delay:.2s; }
.julian-site .e-hello .wave { animation:eWave 1.6s .7s ease-in-out both; }
@keyframes eWave { 0%,100% { rotate:0deg; } 15%,45% { rotate:16deg; } 30%,60% { rotate:-8deg; } 75% { rotate:6deg; } }
html.still .julian-site .e-hero-intro > *, html.still .julian-site .e-hello .wave { animation:none !important; }

/* ---------- Home: focus panels on rust ---------- */
.julian-site .e-focus-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:clamp(28px,3vw,40px); }
.julian-site .e-fpanel { display:flex; flex-direction:column; gap:12px; padding:clamp(24px,2.4vw,30px); border-radius:var(--radius-lg); background:rgb(255 250 242 / .06); border:1px solid rgb(255 250 242 / .2); transition:background-color .3s,border-color .3s; }
.julian-site .e-fpanel:hover { background:rgb(255 250 242 / .09); border-color:rgb(255 250 242 / .32); }
.julian-site .e-fart { display:block; width:120px; height:80px; margin-bottom:14px; color:#FFFAF2; overflow:visible; }
.julian-site .e-fpanel h3 { margin:0; font-size:20px; font-weight:700; line-height:1.2; letter-spacing:-.02em; color:#FFFAF2; text-wrap:balance; }
.julian-site .e-fpanel p { margin:0; font-size:15.5px; line-height:1.65; color:#F6E3DA; }
.julian-site .e-fpanel--wide { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:28px clamp(32px,5vw,72px); align-items:center; }
.julian-site .e-fpanel--wide h3 { margin-bottom:12px; }

/* Click-through challenge: a tiny parody compliance module */
.julian-site .ct { display:flex; flex-direction:column; gap:12px; }
html:not(.js) .julian-site .ct { display:none; }
.julian-site .ct .ct-hint { margin:0; font-size:15px; font-weight:700; color:#FFFAF2; }
.julian-site .ct-window { position:relative; display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border-radius:14px; background:#FBF6EE; color:#5E5550; box-shadow:0 22px 44px -24px rgb(28 9 5 / .8),0 0 0 1px rgb(28 9 5 / .1); }
.julian-site .ct-progress { height:5px; background:#E6DED2; }
.julian-site .ct-progress span { display:block; height:100%; background:var(--brand); transform:scaleX(.083); transform-origin:left; transition:transform .18s var(--ease-out); }
.julian-site .ct-row { grid-area:2 / 1; display:flex; align-items:center; gap:14px; padding:12px 12px 12px 18px; }
.julian-site .ct-count { font-size:15px; font-weight:700; color:#3A2D24; font-variant-numeric:tabular-nums; }
.julian-site .ct-count.is-tick { animation:ctTick .22s var(--ease-out); }
@keyframes ctTick { from { opacity:.25; transform:translateY(-5px); } }
.julian-site .ct-timer { margin-left:auto; min-width:4.5ch; text-align:right; font-size:14px; font-weight:600; color:#7D746D; font-variant-numeric:tabular-nums; }
.julian-site .ct-next { display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 14px 0 18px; border:0; border-radius:10px; background:#8A817A; color:#fff; font:700 15px/1 var(--font-body); cursor:pointer; box-shadow:0 3px 0 #5E5550; transition:transform .08s,box-shadow .08s,background-color .2s; }
.julian-site .ct-next:hover { background:#6F6760; }
.julian-site .ct-next:active { transform:translateY(3px); box-shadow:0 0 0 #5E5550; }
/* The result shares the grid cell of the slide row, so the window grows when the result wraps (narrow screens) instead of clipping it. */
.julian-site .ct-done { grid-area:2 / 1; position:relative; z-index:2; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 14px; padding:10px 14px; background:#FBF6EE; }
.julian-site .ct-done[hidden] { display:none; }
.julian-site .ct-stamp { display:inline-block; padding:4px 10px; border:3px solid var(--brand); border-radius:6px; color:var(--brand); font:800 15px/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase; transform:rotate(-6deg); }
.julian-site .ct-window.is-done .ct-stamp { animation:ctStamp .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ctStamp { 0% { opacity:0; transform:rotate(-6deg) scale(2.4); } 60% { opacity:1; } 100% { transform:rotate(-6deg) scale(1); } }
.julian-site .ct-window.is-done { animation:ctShake .3s .24s ease-out both; }
@keyframes ctShake { 0%,100% { transform:none; } 35% { transform:translate(-2px,1px); } 70% { transform:translate(2px,-1px); } }
.julian-site .ct .ct-result { margin:0; font-size:15px; line-height:1.4; color:#3A2D24; }
.julian-site .ct-result strong { font-variant-numeric:tabular-nums; }
.julian-site .ct-again { min-height:40px; padding:0 14px; border:2px solid #3A2D24; border-radius:10px; background:transparent; color:#3A2D24; font:700 14px/1 var(--font-body); cursor:pointer; }
.julian-site .ct-again:hover { background:#3A2D24; color:#FFFAF2; }

/* ---------- Home: work ---------- */
.julian-site .e-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.julian-site .e-wcard { position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-lg); background:var(--surface); color:var(--ink); box-shadow:0 26px 50px -30px rgb(0 0 0 / .8); }
.julian-site .e-wcard--feature { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
.julian-site .e-wmedia { aspect-ratio:16 / 9; overflow:hidden; background:var(--bg-sunk); }
.julian-site .e-wcard--feature .e-wmedia { aspect-ratio:auto; min-height:100%; }
.julian-site .e-wmedia img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.julian-site .e-wcard:hover .e-wmedia img { transform:scale(1.04); }
.julian-site .e-wbody { display:flex; flex-direction:column; flex:1; padding:clamp(26px,3vw,36px); }
.julian-site .e-wcard h3, .julian-site .e-night .e-wcard h3 { margin:0 0 12px; font-size:clamp(21px,1.8vw,23px); color:var(--ink); }
.julian-site .e-wcard--feature h3 { font-size:clamp(26px,2.4vw,30px); }
.julian-site .e-wcard p { margin:0 0 24px; font-size:16px; line-height:1.7; color:var(--ink-soft); }
.julian-site .e-wlinks { margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.julian-site .e-wicon { width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); margin-bottom:18px; }
.julian-site .e-wicon--gold { background:var(--brand-2-soft); color:var(--gold-ink); }
.julian-site .e-stretch::after { content:''; position:absolute; inset:0; z-index:1; }
.julian-site .e-wcard:has(.e-stretch:focus-visible) { outline:3px solid var(--gold); outline-offset:4px; }
.julian-site .e-wcard .e-btn, .julian-site .e-wcard .e-link { position:relative; z-index:2; }

/* ---------- Home: writing ---------- */
.julian-site .e-post { position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); overflow:hidden; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out); }
.julian-site .e-post:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.julian-site .e-post img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16 / 10; }
.julian-site .e-post-body { padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; }
.julian-site .e-post h3 { margin:0 0 12px; font-size:clamp(24px,2.2vw,30px); }
.julian-site .e-post h3 .tail { display:block; margin-top:8px; font-size:.62em; letter-spacing:-.02em; color:var(--brand); }
.julian-site .e-post p { margin:0 0 20px; font-size:16.5px; line-height:1.7; color:var(--ink-soft); }
.julian-site .e-post-meta { margin:auto 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:14px; font-weight:600; color:var(--muted); }

/* ---------- Beanly guest card (its own brand colours) ---------- */
.julian-site .paige-wrap:has(.e-beanly) { padding-top:0; }
.julian-site .e-beanly { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:24px 40px; align-items:center; padding:clamp(28px,4vw,44px); border-radius:var(--radius-xl); background:#EFE7F2; color:#2B2133; text-decoration:none; border:1px solid #DCCDE3; transition:transform .5s var(--ease-out); }
.julian-site .e-beanly:hover { transform:translateY(-3px); }
.julian-site .e-beanly .paige-mascot { width:96px; }
.julian-site .e-beanly small { display:block; margin-bottom:6px; font-size:14px; font-weight:700; color:#6A4C76; }
.julian-site .e-beanly h2 { margin:0 0 8px; font-size:clamp(24px,2.4vw,30px); color:#2B2133; }
.julian-site .e-beanly p { margin:0; max-width:62ch; font-size:16px; line-height:1.65; color:#4B3E55; }
.julian-site .e-beanly em { font-style:italic; color:#6A4C76; }
.julian-site .e-beanly .e-btn { pointer-events:none; }

/* ---------- Footer: round photo, name, connect ---------- */
.julian-site .e-foot { background:var(--night); color:var(--on-night-soft); }
.julian-site .e-foot-main { max-width:var(--page-width); margin:0 auto; padding:clamp(56px,6vw,80px) var(--gutter) 36px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 40px; }
.julian-site .e-foot-id { display:flex; align-items:center; gap:18px; }
.julian-site .e-foot-avatar { width:72px; height:72px; flex:0 0 auto; border-radius:50%; object-fit:cover; object-position:center 20%; box-shadow:0 0 0 3px var(--night),0 0 0 5px var(--gold); }
.julian-site .e-foot-name { margin:0; font-family:var(--font-display); font-size:clamp(26px,2.4vw,32px); font-weight:800; line-height:1.05; letter-spacing:-.035em; color:var(--on-night); }
.julian-site .e-foot-line { margin:4px 0 0; font-size:15px; color:var(--on-night-soft); }
.julian-site .e-foot-connect { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.julian-site .e-foot-mail { display:inline-flex; align-items:center; gap:2px; min-height:52px; padding:0 4px 0 18px; border-radius:var(--radius-md); border:1px solid rgb(255 250 242 / .16); background:rgb(255 250 242 / .05); }
.julian-site .e-foot-mail a { color:var(--on-night); font-weight:600; text-decoration:none; }
.julian-site .e-foot-mail a:hover { color:var(--gold); }
.julian-site .e-foot .mail-copy { color:var(--on-night-muted); border-color:transparent; }
.julian-site .e-foot .mail-copy:hover { color:var(--on-night); background:rgb(255 250 242 / .08); }
.julian-site .e-foot .mail-copy.copied { color:var(--night); background:var(--gold); }
.julian-site .e-foot-bottom { max-width:var(--page-width); margin:0 auto; padding:14px var(--gutter) 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 24px; border-top:1px solid var(--night-line); }
.julian-site .e-foot-nav { display:flex; flex-wrap:wrap; gap:0 22px; margin:0; padding:0; list-style:none; }
.julian-site .e-foot-nav a { display:inline-flex; align-items:center; min-height:44px; font-size:15px; font-weight:600; color:var(--on-night); text-decoration:none; transition:color .2s; }
.julian-site .e-foot-nav a:hover { color:var(--gold); }
.julian-site .e-foot-legal { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0 18px; font-size:14px; color:var(--on-night-muted); }
.julian-site .e-foot .foot-legal-link { color:var(--on-night-muted); font-size:14px; }
.julian-site .e-foot .foot-legal-link:hover { color:var(--on-night); }

/* ---------- Writing index ---------- */
.julian-site.page-writing .blog-head-band { background:radial-gradient(700px circle at 80% 10%,rgb(232 184 92 / .16),transparent 70%),var(--night); color:var(--on-night); }
.julian-site.page-writing .blog-head { max-width:var(--page-width); padding:calc(clamp(48px,6vw,88px) + 72px) var(--gutter) clamp(56px,6vw,88px); }
.julian-site.page-writing .blog-title { font-family:var(--font-display); font-weight:800; font-size:clamp(2.75rem,5vw,4.25rem); line-height:.94; letter-spacing:-.045em; color:var(--on-night); margin:0 0 24px; }
.julian-site.page-writing .blog-intro { max-width:56ch; font-size:clamp(18px,1.6vw,21px); line-height:1.65; color:var(--on-night-soft); }
.julian-site.page-writing .blog-list { max-width:var(--page-width); padding:clamp(56px,7vw,96px) var(--gutter) var(--section-space); }

/* ---------- Article ---------- */
.julian-site.page-article .post-header { position:relative; isolation:isolate; max-width:900px; padding:calc(clamp(40px,5vw,80px) + 72px) 0 clamp(44px,5vw,64px); color:var(--on-night); }
.julian-site.page-article .post-header::before { content:''; position:absolute; z-index:-1; top:0; bottom:calc(-1 * clamp(140px,20vw,300px)); left:calc(50% - 50vw); right:calc(50% - 50vw); background:radial-gradient(760px circle at 75% 15%,rgb(232 184 92 / .15),rgb(139 58 46 / .1) 45%,transparent 72%),var(--night); }
.julian-site.page-article .post-header::after { content:''; position:absolute; z-index:-1; top:0; bottom:calc(-1 * clamp(140px,20vw,300px)); left:calc(50% - 50vw); right:calc(50% - 50vw); background-image:var(--grain); background-size:240px; opacity:.14; mix-blend-mode:overlay; pointer-events:none; }
.julian-site .post-meta { gap:8px; font-size:14px; font-weight:700; color:var(--on-night-soft); }
.julian-site .post-meta::before { display:none; }
.julian-site .post-meta > :is(span,a):not(.dot) { color:var(--on-night-soft); }
.julian-site .post-meta { gap:6px 22px; font-weight:600; }
.julian-site .post-meta > a.post-cat { min-height:44px; color:var(--gold); text-decoration:underline !important; text-underline-offset:5px; }
.julian-site .post-title { margin:28px 0 26px; }
.julian-site .post-title-lead { max-width:18ch; font-family:var(--font-display); font-size:clamp(2.4rem,4.8vw,4.25rem); font-weight:800; line-height:1; letter-spacing:-.045em; color:var(--on-night); }
.julian-site .post-title-tail { margin-top:22px; font-family:var(--font-body); font-size:clamp(20px,2.2vw,26px); font-weight:700; letter-spacing:-.015em; color:var(--gold); }
.julian-site .post-standfirst { max-width:52ch; font-size:clamp(19px,1.7vw,21px); line-height:1.6; color:var(--on-night-soft); }
.julian-site .post-hero { position:relative; z-index:1; }
.julian-site .post-hero img { border:0; border-radius:var(--radius-xl); box-shadow:0 40px 80px -30px rgb(0 0 0 / .65); }
.julian-site .post-body { font-size:18.5px; line-height:1.8; color:var(--ink-soft); }
.julian-site .post-body h2 { font-size:clamp(28px,3vw,38px); line-height:1.02; letter-spacing:-.035em; margin:clamp(72px,8vw,104px) 0 24px; color:var(--ink); }
.julian-site .post-body h3 { font-family:var(--font-display); font-size:clamp(22px,2vw,26px); font-weight:700; color:var(--ink); }
.julian-site .post-body strong { font-weight:700; }
.julian-site .post-fig img { border:0; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.julian-site .post-fig figcaption { padding-left:0; border-left:0; font-size:14px; line-height:1.6; color:var(--muted); text-align:left; }
.julian-site .post-toc { padding:0; background:none; border:0; }
.julian-site .toc-h { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.julian-site .post-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; border-top:1px solid var(--line); }
.julian-site .post-toc li { border-bottom:1px solid var(--line); }
.julian-site .post-toc a { display:flex; align-items:center; min-height:48px; padding:10px 0; font-size:16px; font-weight:600; color:var(--ink-soft); text-decoration:none; transition:color .2s; }
.julian-site .post-toc a:hover { color:var(--brand); }
.julian-site .post-toc a::before { content:none; }
.julian-site .timeline::before { background:var(--line); width:2px; }
.julian-site .tl-item::before { border-color:var(--brand); background:var(--bg); box-shadow:0 0 0 5px var(--bg); }
.julian-site .tl-date { display:inline-flex; align-self:flex-start; align-items:center; min-height:26px; padding:2px 10px; border-radius:999px; background:var(--brand); color:#FFFAF2; font-size:13px; font-weight:700; }
.julian-site .tl-title { font-size:clamp(22px,2vw,26px); }
.julian-site .post-pull { position:relative; isolation:isolate; overflow:hidden; margin:clamp(48px,6vw,72px) 0; padding:clamp(28px,3.4vw,40px); border:0; border-radius:var(--radius-xl); background:var(--brand); color:#FFFAF2; font-family:var(--font-display); font-style:normal; font-weight:700; font-size:clamp(24px,2.4vw,30px); line-height:1.08; letter-spacing:-.035em; box-shadow:0 4px 0 var(--brand-deep); }
.julian-site .post-pull::before { content:''; position:absolute; inset:0; z-index:-1; background-image:var(--grain); background-size:240px; opacity:.18; mix-blend-mode:overlay; font-size:0; }
.julian-site .post-pull p { text-wrap:balance; }
.julian-site .tool-list li { border:1px solid var(--line); border-top:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.julian-site .tool-list li strong { font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--brand); }
.julian-site .course-card { border:0; border-radius:var(--radius-xl); background:var(--night); color:var(--on-night-soft); box-shadow:var(--shadow-lg); }
.julian-site .course-card .cc-label { color:var(--gold); font-size:14px; font-weight:700; }
.julian-site .course-card .cc-title { font-family:var(--font-display); font-size:clamp(24px,2.4vw,30px); font-weight:800; letter-spacing:-.03em; color:var(--on-night); }
.julian-site .course-card .cc-link { color:var(--gold); }
.julian-site .interview-card { border-radius:var(--radius-lg); background:var(--surface); }
.julian-site .interview-card img { box-shadow:0 0 0 2px var(--gold); }
.julian-site .ic-label { color:var(--brand); font-size:14px; font-weight:700; }
.julian-site .ph-box { border:2px dashed var(--brand-2); background:var(--brand-2-soft); border-radius:var(--radius-lg); }
.julian-site .ph-label { color:var(--gold-ink); font-size:14px; font-weight:700; }
.julian-site .li-card { border:1px solid var(--line); border-radius:var(--radius-lg); }
.julian-site .li-meta span { font-size:13px; color:var(--muted); }
.julian-site .li-quote { border-left:0; padding-left:0; }
.julian-site .li-quote p { font-family:var(--font-display); font-style:normal; font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.julian-site .li-embed .li-cite { padding-left:0; }
.julian-site .li-load { border-radius:var(--radius-md); box-shadow:0 4px 0 var(--brand-deep); }
.julian-site .read-progress-bar { background:var(--gold); }
.julian-site .post-discuss { font-weight:700; color:var(--brand); }
.julian-site .post-cta { background:#EFE7F2; border:1px solid #DCCDE3; border-radius:var(--radius-xl); }
.julian-site .pcta-t { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; color:#2B2133; }
.julian-site .pcta-s { color:#4B3E55; }
.julian-site .post-cta a { border-radius:var(--radius-md); box-shadow:0 4px 0 #4A3356; font-weight:700; }
.julian-site .post-card { border-radius:var(--radius-xl); }
.julian-site .pc-image { border-radius:27px 27px 0 0; }
.julian-site .pc-cat { font-size:14px; font-weight:700; color:var(--brand); }
.julian-site .pc-title { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,2.8vw,34px); letter-spacing:-.035em; line-height:1.02; }
.julian-site .pc-foot { font-size:14px; font-weight:600; }

/* 404 keeps its Beanly illustration and wording (new version pending); only spacing for the new type */
.julian-site.page-404 h1 { font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; line-height:1; margin-bottom:16px; }
.julian-site.page-404 .btn-home { border-radius:var(--radius-md); box-shadow:0 4px 0 var(--brand-deep); }

/* ---------- Responsive ---------- */
@media (max-width:1000px) {
  .julian-site .e-focus-grid { grid-template-columns:1fr 1fr; }
  .julian-site .e-focus-grid > .e-fpanel:nth-child(3) { grid-column:1 / -1; }
}
@media (max-width:900px) {
  .julian-site .e-hero-inner { grid-template-columns:1fr; grid-template-areas:"intro" "media" "about"; row-gap:48px; }
  .julian-site .e-about { padding-top:36px; }
  .julian-site .e-hero-media { position:relative; top:auto; justify-self:center; max-width:320px; width:calc(100% - 24px); margin:8px 20px 0 0; }
  .julian-site .e-about { margin-top:0; }
  .julian-site .e-work-grid { grid-template-columns:1fr; }
  .julian-site .e-wcard--feature { grid-template-columns:1fr; }
  .julian-site .e-wcard--feature .e-wmedia { aspect-ratio:16 / 10; }
  .julian-site .e-post { grid-template-columns:1fr; }
  .julian-site .e-beanly { grid-template-columns:auto minmax(0,1fr); }
  .julian-site .e-beanly .e-btn { grid-column:1 / -1; justify-self:start; }
  .julian-site .e-fpanel--wide { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .julian-site .e-focus-grid { grid-template-columns:1fr; }
  .julian-site .e-actions .e-btn { flex:1 1 auto; }
  .julian-site .e-beanly { grid-template-columns:1fr; }
  .julian-site .e-beanly .paige-mascot { width:72px; }
  .julian-site .e-foot-connect, .julian-site .e-foot-connect .e-btn { width:100%; }
  .julian-site .e-foot-mail { width:100%; justify-content:space-between; }
  .julian-site .ct-row { gap:10px; padding-left:14px; }
}
@media (hover:none) {
  .julian-site .e-btn:hover, .julian-site .e-post:hover, .julian-site .e-beanly:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .julian-site .e-hero-intro > *, .julian-site .e-hello .wave { animation:none !important; }
  .julian-site :is(.e-btn,.e-wcard,.e-wmedia img,.e-post,.e-beanly,.post-toc a,.e-link,.e-fpanel,.ct-progress span,.ct-next,.nav-inner) { transition:none !important; }
  .julian-site :is(.ct-count.is-tick,.ct-window.is-done,.ct-window.is-done .ct-stamp) { animation:none !important; }
  .julian-site :is(.e-btn,.e-post,.e-beanly):is(:hover,:active) { transform:none !important; }
  .julian-site .e-wcard:hover .e-wmedia img { transform:none; }
}

/* ---------- Work: compact horizontal cards with inset media ---------- */
.julian-site .e-work-grid { grid-template-columns:1fr; gap:16px; }
.julian-site .e-wcard { transition:box-shadow .4s var(--ease-out); }
.julian-site .e-wcard--row { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); align-items:center; gap:8px clamp(16px,2.4vw,32px); padding:12px; }
.julian-site .e-wcard--row .e-wmedia { aspect-ratio:16 / 9; border-radius:12px; }
.julian-site .e-wcard--row .e-wbody { padding:10px 20px 10px 0; }
.julian-site .e-wcard--row h3, .julian-site .e-night .e-wcard--row h3 { font-size:19px; line-height:1.25; margin-bottom:10px; transition:color .2s; }
.julian-site .e-wcard--row p { max-width:68ch; font-size:15.5px; line-height:1.65; margin-bottom:10px; }
.julian-site .e-wcard--row .e-wlinks { margin-top:0; }
.julian-site .e-wcard--row .e-link { font-size:15px; }
.julian-site .e-wcard:has(.e-stretch):hover h3 { color:var(--brand); }
.julian-site .e-wcard:hover .e-wmedia img { transform:scale(1.035); }
.julian-site .e-wmedia--icon { display:flex; align-items:center; justify-content:center; }
.julian-site .e-wmedia--rust { background:var(--brand-soft); color:var(--brand); }
.julian-site .e-wmedia--gold { background:var(--brand-2-soft); color:var(--gold-ink); }
.julian-site .e-post img { transition:transform .7s var(--ease-out); }
.julian-site .e-post:hover img { transform:scale(1.03); }
.julian-site .e-post { transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out); }
.julian-site .e-beanly { transition:transform .4s var(--ease-out),border-color .3s; }
.julian-site .e-beanly:hover { border-color:#C9B4D3; }
.julian-site .e-beanly .e-btn { transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out); }
.julian-site .e-beanly:hover .e-btn { transform:translateY(-1px); box-shadow:0 4px 0 var(--d),0 14px 26px -12px rgb(0 0 0 / .35); }
@media (max-width:900px) { .julian-site .e-about { grid-template-columns:1fr; margin-top:0; } }
@media (max-width:640px) {
  .julian-site .e-wcard--row { grid-template-columns:1fr; }
  .julian-site .e-wcard--row .e-wmedia--icon { aspect-ratio:3 / 1; }
  .julian-site .e-wcard--row .e-wbody { padding:12px 8px 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .julian-site :is(.e-link svg,.e-post img,.e-beanly .e-btn) { transition:none !important; }
  .julian-site :is(.e-link:hover svg,.e-wcard:hover .e-stretch svg,.e-post:hover img,.e-wcard:hover .e-wmedia img,.e-beanly:hover .e-btn) { transform:none !important; }
}
.julian-site .e-wcard--feature { padding:12px; gap:8px clamp(16px,2.4vw,32px); }
.julian-site .e-wcard--feature .e-wmedia { border-radius:12px; }
.julian-site .e-wcard--feature .e-wbody { padding:clamp(14px,2vw,24px) clamp(8px,1.6vw,20px) clamp(14px,2vw,24px) 0; }
@media (max-width:900px) { .julian-site .e-wcard--feature .e-wbody { padding:12px 8px 8px; } }

/* Focus cards: lead sentence visible, rest folds out */
.julian-site .e-fpanel .e-flead { margin:0; font-size:15.5px; line-height:1.65; color:#F6E3DA; }
.julian-site .e-more { display:grid; grid-template-rows:1fr; transition:grid-template-rows .45s var(--ease-out); }
.julian-site .e-more > div { min-height:0; overflow:hidden; }
.julian-site .e-more p { margin:0; padding-top:10px; font-size:15.5px; line-height:1.65; color:#F6E3DA; }
.julian-site .e-more-btn { display:none; align-self:flex-start; align-items:center; gap:8px; min-height:44px; margin-top:auto; padding:0; border:0; background:none; color:#FFFAF2; font:700 15px/1 var(--font-body); cursor:pointer; text-decoration:underline 2px rgb(255 250 242 / .35); text-underline-offset:6px; transition:text-decoration-color .2s; }
.julian-site .e-more-btn:hover { text-decoration-color:var(--gold); }
.julian-site .e-more-btn::after { content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease-out); }
.julian-site .e-more-btn[aria-expanded="true"]::after { transform:translateY(2px) rotate(-135deg); }
.js .julian-site .e-more { grid-template-rows:0fr; }
.js .julian-site .e-more.is-open { grid-template-rows:1fr; }
.js .julian-site .e-more-btn { display:inline-flex; }
.julian-site .e-fpanel--wide .e-more-btn { margin-top:10px; }
@media (prefers-reduced-motion:reduce) { .julian-site .e-more, .julian-site .e-more-btn::after { transition:none; } }

/* Colour sections stay straight, full-bleed; only the menu is a rounded pill. */
.julian-site.page-article .post > :not(.post-header):not(script) { position:relative; z-index:1; }
.julian-site .e-head--stack { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; }
.julian-site .e-btn { border-radius:14px; }
.julian-site .e-wcard, .julian-site .e-post, .julian-site .e-fpanel { border-radius:22px; }
.julian-site .e-wcard--row .e-wmedia, .julian-site .e-wcard--feature .e-wmedia { border-radius:14px; }

/* ---------- Writing: featured post + compact rows ---------- */
.julian-site .blog-follow { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:32px; }
.julian-site .blog-rss { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:700; color:var(--gold); text-decoration:none; }
.julian-site .blog-rss:hover { text-decoration:underline; text-underline-offset:5px; }
.julian-site .e-post-title { margin:0 0 12px; font-size:clamp(24px,2.2vw,30px); font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; line-height:1.06; }
.julian-site .e-post-title .tail { display:block; margin-top:8px; font-size:.62em; letter-spacing:-.02em; color:var(--brand); }
.julian-site .e-post .e-kicker { margin-bottom:12px; }
.julian-site .blog-more-h, .julian-site .read-next-h { margin:clamp(48px,5vw,64px) 0 16px; font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
.julian-site .blog-rows { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px; }
.julian-site .blog-row { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:clamp(16px,2.4vw,28px); align-items:center; padding:10px; border-radius:20px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:border-color .25s,box-shadow .4s var(--ease-out); }
.julian-site .blog-row:hover { border-color:#D6C3A6; box-shadow:var(--shadow-sm); }
.julian-site .blog-row img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:12px; }
.julian-site .blog-row h3 { margin:0; font-size:clamp(19px,1.6vw,22px); line-height:1.15; letter-spacing:-.025em; transition:color .2s; }
.julian-site .blog-row:hover h3 { color:var(--brand); }
.julian-site .blog-row h3 .tail { display:block; margin-top:6px; font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:0; color:var(--muted); }
.julian-site .blog-row p:not(.e-kicker) { margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--ink-soft); max-width:70ch; }
.julian-site .blog-row .e-kicker { margin-bottom:6px; }
.julian-site .blog-draft { margin-left:4px; padding:1px 8px; border:1px dashed var(--gold-ink); border-radius:999px; font-style:normal; font-size:12.5px; font-weight:700; color:var(--gold-ink); }
.julian-site .read-next { margin-bottom:var(--space-6); }
.julian-site .read-next-h { margin-top:0; }
.julian-site.page-writing .blog-list .e-post { margin-top:0; }

/* ---------- Article fixes for the new type ---------- */
.julian-site .aih-graphic-title { font-family:var(--font-display); font-weight:800; letter-spacing:-.03em; }
.julian-site .aih-era { font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:0; color:var(--muted); margin-top:10px; }
.julian-site .aih-kicker { font-family:var(--font-body); font-size:13px; text-transform:none; letter-spacing:0; font-weight:700; }
.julian-site .tl-date { white-space:nowrap; }
@media (min-width:1100px) { .julian-site .tl-date { left:auto; right:calc(100% - 96px); width:auto; } }
@media (max-width:640px) {
  .julian-site .blog-row { grid-template-columns:1fr; }
  .julian-site .blog-row > div { padding:4px 6px 8px; }
}
@media (prefers-reduced-motion:reduce) { .julian-site .blog-row, .julian-site .blog-row h3 { transition:none; } }
.julian-site .aih-sources a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.julian-site .aih-sources a:hover { color:var(--brand-hover); }

/* Fikus card: a credits strip on the image, one AI tool per layer of the course.
   Sits on the empty floor below the title; on phones it hangs under the image. */
.julian-site .e-wmedia--stack { position:relative; container-type:inline-size; }
.julian-site .e-stack { position:absolute; left:12px; right:12px; bottom:12px; z-index:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 6px; margin:0; padding:10px 14px; list-style:none; border-radius:10px; background:rgb(28 21 18 / .88); border:1px solid rgb(255 250 242 / .1); color:var(--on-night); }
.julian-site .e-stack li { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:6px; min-width:0; line-height:1.25; }
.julian-site .e-stack-dot { grid-row:2; width:7px; height:7px; border-radius:2px; transition:transform .4s var(--ease-out); transition-delay:calc(var(--i) * 40ms); }
.julian-site .e-stack-l { grid-column:1 / -1; font-size:11.5px; font-weight:600; color:var(--on-night-muted); white-space:nowrap; }
.julian-site .e-stack b { grid-row:2; font-size:13.5px; font-weight:700; white-space:nowrap; }
.julian-site .e-wcard--feature:hover .e-stack-dot { transform:scale(1.5); }
@container (max-width:540px) {
  .julian-site .e-stack { left:8px; right:8px; bottom:8px; padding:8px 10px; gap:6px 4px; }
  .julian-site .e-stack-l { font-size:10.5px; }
  .julian-site .e-stack b { font-size:12px; }
  .julian-site .e-stack li { column-gap:5px; }
}
@container (max-width:400px) { .julian-site .e-stack { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .julian-site .e-wcard--feature .e-wmedia--stack { aspect-ratio:auto; overflow:visible; border-radius:0; }
  .julian-site .e-wmedia--stack img { height:auto; aspect-ratio:16 / 10; border-radius:12px 12px 0 0; }
  .julian-site .e-stack { position:static; border-radius:0 0 12px 12px; border-top:0; background:var(--night); }
}
@media (prefers-reduced-motion:reduce) { .julian-site .e-stack-dot { transition:none; } }

.julian-site .post-byline { align-items:center; }

/* ===================== Article: making-of components (29 Oct) ===================== */
.julian-site .post-ask { margin:4px 0 28px; font-family:var(--font-display); font-size:clamp(24px,2.6vw,31px); font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--brand); text-wrap:balance; }
.julian-site .post-body h2.post-part { display:flex; align-items:center; gap:20px; }
.julian-site .post-body h2.post-part::after { content:''; flex:1; height:2px; border-radius:2px; background:var(--line); }
.julian-site .post-body h2.post-part + h3 { margin-top:8px; }
.julian-site .post-body h3 { margin-top:clamp(48px,6vw,72px); }
.julian-site .post-body h4 { margin:40px 0 12px; font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--brand); }
.julian-site .post-final { margin:clamp(40px,5vw,56px) 0 clamp(32px,4vw,48px); font-family:var(--font-display); font-size:clamp(32px,4.4vw,50px); font-weight:800; line-height:1.02; letter-spacing:-.045em; color:var(--ink); text-wrap:balance; }

/* Mark's course vs. Benjamin */
.julian-site .two-paths .tp { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.julian-site .tp-col { display:flex; flex-direction:column; padding:clamp(22px,2.6vw,30px); border-radius:var(--radius-xl); }
.julian-site .tp-mark { background:var(--bg-sunk); border:1px solid var(--line); color:var(--muted); }
.julian-site .tp-ben { position:relative; isolation:isolate; overflow:hidden; background:var(--night); color:var(--on-night-soft); box-shadow:var(--shadow-lg); }
.julian-site .tp-ben::before { content:''; position:absolute; inset:0; z-index:-1; background-image:var(--grain); background-size:240px; opacity:.5; mix-blend-mode:overlay; }
.julian-site .tp-h { margin:0; font-family:var(--font-display); font-size:clamp(22px,2.2vw,26px); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--ink); }
.julian-site .tp-ben .tp-h { color:var(--on-night); }
.julian-site .tp-h span { display:block; margin-top:6px; font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0; color:var(--muted); }
.julian-site .tp-ben .tp-h span { color:var(--gold); }
.julian-site .tp ol { flex:1; margin:22px 0 !important; padding:0 !important; list-style:none; }
.julian-site .tp li { position:relative; display:flex; align-items:center; gap:12px; margin:0 0 22px; padding:12px 14px; border-radius:14px; font-size:16px; font-weight:600; line-height:1.35; }
.julian-site .tp li:last-child { margin-bottom:0; }
.julian-site .tp li::marker { content:none; }
.julian-site .tp li:not(:last-child)::after { content:''; position:absolute; left:25px; bottom:-19px; width:2px; height:16px; border-radius:2px; }
.julian-site .tp-mark li { background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); }
.julian-site .tp-mark li:not(:last-child)::after { background:repeating-linear-gradient(var(--muted) 0 3px, transparent 3px 6px); opacity:.6; }
.julian-site .tp-ben li { background:var(--night-2); border:1px solid var(--night-line); color:var(--on-night); }
.julian-site .tp-ben li:not(:last-child)::after { background:var(--gold); }
.julian-site .tp li svg { width:24px; height:24px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.julian-site .tp-mark li svg { color:var(--muted); }
.julian-site .tp-ben li svg { color:var(--gold); }
.julian-site .tp-out { margin:0; padding-top:16px; border-top:1px dashed currentColor; font-size:15px; font-weight:700; }
.julian-site .tp-mark .tp-out { color:var(--muted); }
.julian-site .tp-ben .tp-out { color:var(--gold); border-top-color:var(--night-line); }
@media (max-width:640px) { .julian-site .two-paths .tp { grid-template-columns:1fr; } }

/* Beanly box inside the article (Beanly's own colours) */
.julian-site .bean-callout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:clamp(20px,3vw,36px); margin:clamp(48px,6vw,64px) 0; padding:clamp(24px,3vw,36px); border:1px solid #DCCDE3; border-radius:var(--radius-xl); background:#EFE7F2; }
.julian-site .bean-callout p { margin:0 0 14px; font-size:16.5px; line-height:1.7; color:#4B3E55; }
.julian-site .bean-callout .bc-label { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:14px; font-weight:700; color:#5E4470; }
.julian-site .bean-callout .bc-label img { width:28px; height:auto; }
.julian-site .bean-callout .bc-title { font-family:var(--font-display); font-size:clamp(22px,2.3vw,27px); font-weight:800; line-height:1.15; letter-spacing:-.03em; color:#2B2133; }
.julian-site .bean-callout .bc-claim { font-weight:700; color:#2B2133; }
.julian-site .bc-link { display:inline-flex; align-items:center; gap:10px; min-height:48px; margin-top:6px; padding:12px 18px; border-radius:var(--radius-md); background:#7E5C8A; color:#fff !important; font-size:15px; font-weight:700; line-height:1.3; text-decoration:none !important; box-shadow:0 4px 0 #4A3356; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s; }
.julian-site .bc-link svg { flex:0 0 auto; transition:transform .25s var(--ease-out); }
.julian-site .bc-img img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 18px 40px -22px rgb(43 33 51 / .45); }
@media (hover:hover) {
  .julian-site .bc-link:hover { background:#6C4D78; transform:translateY(-2px); box-shadow:0 6px 0 #4A3356; }
  .julian-site .bc-link:hover svg { transform:translateX(3px); }
  .julian-site .bc-link:active { transform:translateY(3px); box-shadow:0 1px 0 #4A3356; }
}
@media (max-width:760px) { .julian-site .bean-callout { grid-template-columns:1fr; } .julian-site .bc-img { order:-1; } }

/* Benjamin quote card */
.julian-site .quote-fig { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; overflow:hidden; padding:0; border-radius:var(--radius-xl); background:#0F0B09; box-shadow:var(--shadow-lg); }
.julian-site .quote-fig .qf-img img { display:block; width:100%; height:100%; max-height:440px; object-fit:cover; border-radius:0; box-shadow:none; }
.julian-site .qf-quote { margin:0; padding:clamp(24px,3.5vw,44px) clamp(24px,3.5vw,44px) clamp(24px,3.5vw,44px) 8px; }
.julian-site .qf-quote p { margin:0 0 18px; font-family:var(--font-display); font-size:clamp(26px,3vw,38px); font-weight:800; line-height:1.08; letter-spacing:-.035em; color:var(--on-night); text-wrap:balance; }
.julian-site .qf-quote footer { font-size:15px; font-weight:700; color:var(--gold); }
@media (max-width:640px) {
  .julian-site .quote-fig { grid-template-columns:1fr; }
  .julian-site .quote-fig .qf-img img { max-height:300px; object-position:center 30%; }
  .julian-site .qf-quote { padding:4px 24px 28px; }
}

/* Lists with their own markers */
.julian-site .post-body ul:is(.memory-list,.bot-misses) { margin:0 0 28px; padding:0; list-style:none; }
.julian-site :is(.memory-list,.bot-misses) li { position:relative; margin:0; padding:14px 0 14px 40px; border-bottom:1px solid var(--line); }
.julian-site :is(.memory-list,.bot-misses) li:first-child { border-top:1px solid var(--line); }
.julian-site .memory-list li::before { content:''; position:absolute; left:4px; top:23px; width:14px; height:14px; border-radius:4px; background:var(--gold); box-shadow:0 0 0 4px var(--brand-2-soft); }
.julian-site .bot-misses li::before { content:'\00D7'; position:absolute; left:0; top:15px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:19px; font-weight:800; line-height:1; }

/* Layer stack (SVG) */
.julian-site .lstack-fig { padding:clamp(20px,3vw,32px) clamp(12px,2vw,24px) 18px; border-radius:var(--radius-xl); background:var(--night); box-shadow:var(--shadow-lg); }
.julian-site .lstack { display:block; width:100%; max-width:520px; height:auto; margin:0 auto; overflow:visible; }
.julian-site .lstack .ls-role { font-family:var(--font-body); font-size:14px; font-weight:600; fill:var(--on-night-muted); }
.julian-site .lstack .ls-tool { font-family:var(--font-display); font-size:19px; font-weight:800; letter-spacing:-.02em; fill:var(--on-night); }
.julian-site .lstack .slab { transition:transform 1s var(--ease-out); transition-delay:calc(var(--i) * 90ms); }
.julian-site .lstack .ls-label { transition:opacity .5s ease .55s; }
.js .julian-site .lstack-fig:not(.in):not(.in-now) .slab { transform:translateY(var(--c)); }
.js .julian-site .lstack-fig:not(.in):not(.in-now) .ls-label { opacity:0; }
.julian-site .lstack-fig figcaption { margin-top:14px; color:var(--on-night-muted) !important; text-align:center !important; }
@media (hover:hover) { .julian-site .lstack-fig:hover .slab { transform:translateY(calc(var(--i) * -7px)); } }

/* Feedback loop */
.julian-site .loop { position:relative; padding:clamp(20px,3vw,32px); border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .loop-ring { position:absolute; inset:17% 17%; border:2px solid #D8C7AE; border-radius:50%; pointer-events:none; }
.julian-site .loop-arrow { position:absolute; width:14px; height:14px; background:var(--brand); clip-path:polygon(0 0,100% 50%,0 100%,22% 50%); }
.julian-site .loop-arrow.a1 { left:85.36%; top:14.64%; transform:translate(-50%,-50%) rotate(30deg); }
.julian-site .loop-arrow.a2 { left:85.36%; top:85.36%; transform:translate(-50%,-50%) rotate(150deg); }
.julian-site .loop-arrow.a3 { left:14.64%; top:85.36%; transform:translate(-50%,-50%) rotate(210deg); }
.julian-site .loop-arrow.a4 { left:14.64%; top:14.64%; transform:translate(-50%,-50%) rotate(-30deg); }
.julian-site .loop-dot { position:absolute; left:100%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px var(--surface), 0 0 14px rgb(232 184 92 / .8); animation:loopOrbit 16s linear infinite; }
@keyframes loopOrbit {
  0%{left:100%;top:50%} 8.33%{left:93.3%;top:75%} 16.67%{left:75%;top:93.3%} 25%{left:50%;top:100%} 33.33%{left:25%;top:93.3%} 41.67%{left:6.7%;top:75%}
  50%{left:0%;top:50%} 58.33%{left:6.7%;top:25%} 66.67%{left:25%;top:6.7%} 75%{left:50%;top:0%} 83.33%{left:75%;top:6.7%} 91.67%{left:93.3%;top:25%} 100%{left:100%;top:50%}
}
.julian-site .loop-center { position:absolute; left:50%; top:50%; margin:0; transform:translate(-50%,-50%); text-align:center; }
.julian-site .loop-center b { display:block; font-family:var(--font-display); font-size:clamp(36px,4vw,48px); font-weight:800; line-height:1; letter-spacing:-.045em; color:var(--brand); }
.julian-site .loop-center span { display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--muted); }
.julian-site .post-body .loop-steps { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:". a ." "d . b" ". c ."; gap:22px 0; margin:0 !important; padding:0 !important; list-style:none; }
.julian-site .loop-steps li { position:relative; z-index:1; display:grid; grid-template-columns:auto 1fr; align-items:center; align-self:center; align-content:start; gap:4px 10px; margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .loop-steps li::marker { content:none; }
.julian-site .loop-steps .ls-1 { grid-area:a; } .julian-site .loop-steps .ls-2 { grid-area:b; } .julian-site .loop-steps .ls-3 { grid-area:c; } .julian-site .loop-steps .ls-4 { grid-area:d; }
.julian-site .loop-steps svg { width:22px; height:22px; fill:none; stroke:var(--brand); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.julian-site .loop-steps b { font-family:var(--font-display); font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
.julian-site .loop-steps span { grid-column:1 / -1; font-size:14.5px; line-height:1.5; color:var(--ink-soft); }
.julian-site .loop-steps .ls-2 { margin-left:-8%; } .julian-site .loop-steps .ls-4 { margin-right:-8%; }
@media (max-width:720px) {
  .julian-site .loop-ring { display:none; }
  .julian-site .loop-center { position:static; transform:none; margin-bottom:16px; text-align:left; display:flex; align-items:baseline; gap:10px; }
  .julian-site .loop-center span { margin:0; }
  .julian-site .post-body .loop-steps { grid-template-columns:1fr; grid-template-areas:none; gap:22px; }
  .julian-site .loop-steps li { grid-area:auto !important; margin:0 !important; }
  .julian-site .loop-steps li:not(:last-child)::after { content:''; position:absolute; left:26px; bottom:-20px; width:2px; height:18px; border-radius:2px; background:var(--brand); }
}
@media (prefers-reduced-motion:reduce) {
  .julian-site .loop-dot { animation:none; display:none; }
  .julian-site .lstack .slab, .julian-site .lstack .ls-label { transition:none; }
  .js .julian-site .lstack-fig:not(.in):not(.in-now) .slab { transform:none; }
  .js .julian-site .lstack-fig:not(.in):not(.in-now) .ls-label { opacity:1; }
  .julian-site .lstack-fig:hover .slab { transform:none; }
}
@media (min-width:1100px) {
  .julian-site .post-body > :is(.bean-callout,.quote-fig) { margin-left:-80px; margin-right:-80px; }
}

/* Article opening: smaller hero, Julian's first line as the lede headline under it */
.julian-site.page-article .post-hero { max-width:980px; margin-left:auto; margin-right:auto; margin-bottom:clamp(36px,4.5vw,56px); }
.julian-site.page-article .post-hero img { width:100%; aspect-ratio:21 / 10; object-fit:cover; object-position:center 58%; }
.julian-site.page-article .post-header::before, .julian-site.page-article .post-header::after { bottom:calc(-1 * clamp(110px,15vw,220px)); }
.julian-site .post-lede { max-width:var(--reading-width); margin:0 auto clamp(40px,5vw,64px); font-family:var(--font-display); font-size:clamp(30px,3.6vw,44px); font-weight:800; line-height:1.06; letter-spacing:-.04em; color:var(--ink); text-wrap:balance; }
.julian-site .post-lede span { color:var(--brand); }
.julian-site .post-ask { margin:4px 0 26px; font-family:var(--font-body); font-size:clamp(20px,2vw,23px); font-style:italic; font-weight:600; line-height:1.45; letter-spacing:0; color:var(--ink); }
@media (max-width:640px) { .julian-site.page-article .post-hero img { aspect-ratio:16 / 10; } }

/* Beanly: plain article section + one small tile (mini ad, links out) */
.julian-site .bean-tile { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin:8px 0 8px; padding:14px 18px; border:1px solid #DCCDE3; border-radius:var(--radius-lg); background:#F4EEF6; color:#2B2133; text-decoration:none !important; transition:border-color .2s, box-shadow .25s var(--ease-out), transform .25s var(--ease-out); }
.julian-site .bean-tile img { width:34px; height:auto; flex:0 0 auto; }
.julian-site .bt-text { display:flex; flex-direction:column; line-height:1.25; margin-right:auto; }
.julian-site .bt-text b { font-family:var(--font-display); font-size:16px; font-weight:800; letter-spacing:-.01em; color:#2B2133; }
.julian-site .bt-text span { font-size:13px; font-weight:600; color:#5E4470; }
.julian-site .bt-cta { display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:#6A4C78; }
.julian-site .bt-cta svg { flex:0 0 auto; transition:transform .25s var(--ease-out); }
@media (hover:hover) {
  .julian-site .bean-tile:hover { border-color:#BFA8CB; box-shadow:0 10px 24px -16px rgb(74 51 86 / .45); transform:translateY(-1px); }
  .julian-site .bean-tile:hover .bt-cta svg { transform:translate(2px,-2px); }
}

/* Benjamin's line: small, face in a gold ring */
.julian-site .post-fig.bq { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(16px,2.4vw,26px); margin:36px 0 36px; }
.julian-site .post-fig.bq .bq-face { width:clamp(72px,9vw,96px); max-width:none; height:auto; aspect-ratio:1; border-radius:50% !important; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--gold), 0 12px 28px -14px rgb(28 21 18 / .5) !important; }
.julian-site .bq-quote { margin:0; padding:0; border:0; }
.julian-site .bq-quote p { margin:0 0 6px; font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px); font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.julian-site .bq-quote p span { color:var(--brand); }
.julian-site .bq-quote footer { font-size:14px; font-weight:700; color:var(--muted); }
/* Beanly card now follows the dark Work section directly (Writing section parked) */
.julian-site #paige.paige-wrap { padding-top:clamp(56px,7vw,96px); }

/* ===== 29 Oct, round 3: calmer article opening, TOC card, small prop, Beanly card, LinkedIn only ===== */
.julian-site.page-article .post-hero { max-width:840px; }
.julian-site.page-article .post-hero img { aspect-ratio:24 / 10; object-position:center 60%; }
@media (max-width:640px) { .julian-site.page-article .post-hero img { aspect-ratio:16 / 9; } }

/* Contents as its own card */
.julian-site .post-toc { max-width:var(--reading-width); margin:0 auto clamp(48px,6vw,72px); padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,32px) clamp(12px,1.6vw,18px); border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .toc-h { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--brand); }
.julian-site .toc-h::before { content:''; width:16px; height:2px; border-radius:2px; background:var(--gold); }
.julian-site .post-toc ol { border-top:0; counter-reset:toc; gap:0 36px; }
.julian-site .post-toc li { counter-increment:toc; border-bottom:1px solid var(--line); }
.julian-site .post-toc li:nth-last-child(-n+2):nth-child(odd), .julian-site .post-toc li:last-child { border-bottom:0; }
.julian-site .post-toc a { gap:12px; font-size:15.5px; }
.julian-site .post-toc a::before { content:''; flex:0 0 auto; width:8px; height:8px; border-radius:2px; background:var(--gold); transition:background-color .2s, transform .25s var(--ease-out); }
.julian-site .post-toc a:hover::before { background:var(--brand); transform:scale(1.25); }
@media (max-width:640px) { .julian-site .post-toc ol { grid-template-columns:1fr; } .julian-site .post-toc li:nth-last-child(-n+2):nth-child(odd) { border-bottom:1px solid var(--line); } .julian-site .post-toc li:last-child { border-bottom:0; } }

/* The binder prop: small, beside the text */
.julian-site .post-fig.float-prop { float:right; width:clamp(120px,22%,170px); margin:6px 0 16px 24px; }
.julian-site .post-fig.float-prop img { display:block; width:100%; height:auto; border-radius:var(--radius-md); box-shadow:0 14px 30px -18px rgb(28 21 18 / .55); transform:rotate(2deg); }
.julian-site .post-body h2 { clear:both; }
@media (max-width:520px) { .julian-site .post-fig.float-prop { width:110px; margin-left:16px; } }

/* Beanly card: screenshot, logo, one link (links out) */
.julian-site .bean-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(18px,2.6vw,28px); margin:28px 0 8px; padding:clamp(16px,2vw,22px); border:1px solid #DCCDE3; border-radius:var(--radius-xl); background:#EFE7F2; color:#2B2133; text-decoration:none !important; transition:box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .2s; }
.julian-site .bk-img img { display:block; width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 16px 34px -20px rgb(43 33 51 / .5); }
.julian-site .bk-body { display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.julian-site .bk-head { display:flex; align-items:center; gap:12px; }
.julian-site .bk-head img { width:44px; height:auto; }
.julian-site .bk-head b { display:block; font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.025em; line-height:1.1; color:#2B2133; }
.julian-site .bk-head small { display:block; margin-top:3px; font-size:13px; font-weight:700; color:#5E4470; }
.julian-site .bk-cta { display:inline-flex; align-items:center; gap:9px; padding:12px 16px; border-radius:var(--radius-md); background:#7E5C8A; color:#fff; font-size:14.5px; font-weight:700; line-height:1.3; box-shadow:0 4px 0 #4A3356; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .2s; }
.julian-site .bk-cta svg { flex:0 0 auto; transition:transform .25s var(--ease-out); }
@media (hover:hover) {
  .julian-site .bean-card:hover { border-color:#C7B3D2; box-shadow:0 22px 44px -28px rgb(74 51 86 / .6); transform:translateY(-2px); }
  .julian-site .bean-card:hover .bk-cta { background:#6C4D78; }
  .julian-site .bean-card:hover .bk-cta svg { transform:translate(2px,-2px); }
}
@media (max-width:640px) { .julian-site .bean-card { grid-template-columns:1fr; } }

/* End of article: only the LinkedIn discussion */
.julian-site .post-discuss-wrap { display:flex; justify-content:flex-start; margin-bottom:var(--space-6); }
.julian-site .post-discuss-btn { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 18px; border:2px solid var(--line); border-radius:var(--radius-md); background:var(--surface); color:var(--ink) !important; font-size:15px; font-weight:700; text-decoration:none !important; box-shadow:0 3px 0 var(--line); transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .2s; }
.julian-site .post-discuss-btn svg { color:var(--brand); }
@media (hover:hover) { .julian-site .post-discuss-btn:hover { border-color:var(--brand); box-shadow:0 5px 0 var(--brand-deep); transform:translateY(-2px); } }

/* About columns: one illustration each, in the same family as the focus cards */
.julian-site .e-aart { display:block; width:190px; height:119px; margin:0 0 4px -10px; color:var(--on-night); overflow:visible; transition:transform .5s var(--ease-out); }
.julian-site .e-aart-orbit { transform-origin:80px 50px; animation:aartOrbit 36s linear infinite; }
.julian-site .e-aart-cursor { animation:aartBlink 1.1s steps(1) infinite; }
.julian-site .e-aart-hero, .julian-site .e-aart-bulb { transform-box:fill-box; transform-origin:50% 100%; transition:transform .5s var(--ease-out); }
@keyframes aartOrbit { to { transform:rotate(360deg); } }
@keyframes aartBlink { 50% { opacity:0; } }
@media (hover:hover) {
  .julian-site .e-acol:hover .e-aart { transform:translateY(-3px); }
  .julian-site .e-acol:hover .e-aart-hero { transform:translateY(-3px); }
  .julian-site .e-acol:hover .e-aart-bulb { transform:scale(1.08); }
}
@media (max-width:900px) { .julian-site .e-aart { width:160px; height:100px; margin-left:-4px; } }
.julian-site .e-aart-flow { animation:aartFlow 5s linear infinite; }
@keyframes aartFlow { to { stroke-dashoffset:-48; } }
@media (prefers-reduced-motion:reduce) { .julian-site .e-aart-orbit, .julian-site .e-aart-cursor, .julian-site .e-aart-flow { animation:none; } .julian-site .e-aart, .julian-site .e-aart-hero, .julian-site .e-aart-bulb { transition:none; } }
.julian-site .e-aart-plant { transform-origin:66px 76px; animation:aartSway 7s ease-in-out infinite alternate; }
@keyframes aartSway { from { transform:rotate(-2deg); } to { transform:rotate(2deg); } }
@media (prefers-reduced-motion:reduce) { .julian-site .e-aart-plant { animation:none; } }

/* Static legal pages (/impressum/, /datenschutz/), generated from legal.js */
.julian-site .legal-page { padding:calc(clamp(40px,5vw,72px) + 72px) var(--gutter) var(--section-space); background:var(--bg); }
.julian-site .legal-doc { max-width:var(--reading-width); margin:auto; }
.julian-site .legal-doc h1 { margin:0 0 28px; font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.04em; line-height:1; }
.julian-site .legal-en-h { margin:56px 0 20px; padding-top:32px; border-top:1px solid var(--line); font-size:24px; font-weight:800; letter-spacing:-.025em; }
.julian-site .legal-body { font-size:16px; line-height:1.75; color:var(--ink-soft); }
.julian-site .legal-body .ps-eyebrow { margin-top:6px; font-size:14px; font-weight:800; color:var(--brand); }
.julian-site a.foot-legal-link { text-decoration:underline; text-underline-offset:3px; }

/* Article: "Tools used" box at the end of the post, styled like the contents box at the top */
.julian-site .post-tools { max-width:var(--reading-width); margin:clamp(48px,6vw,72px) auto 0; padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,32px) clamp(12px,1.6vw,18px); border:1px solid var(--line); border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-sm); }
.julian-site .post-tools .pt-h { display:flex; align-items:center; gap:10px; margin:0 0 6px; font-family:var(--font-display); font-size:13px; font-weight:800; line-height:1.4; letter-spacing:.02em; color:var(--brand); }
.julian-site .post-tools .pt-h::before { content:''; flex:0 0 auto; width:16px; height:2px; border-radius:2px; background:var(--gold); }
.julian-site .pt-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 36px; margin:0; padding:0; list-style:none; }
.julian-site .pt-list li { display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:15.5px; line-height:1.5; color:var(--ink); }
.julian-site .pt-list li:nth-last-child(-n+2):nth-child(odd), .julian-site .pt-list li:last-child { border-bottom:0; }
.julian-site .pt-list b { font-weight:700; }
.julian-site .pt-list span { font-size:14px; color:var(--muted); }
.julian-site .pt-list .pt-name { display:inline-flex; align-items:center; gap:8px; align-self:center; color:inherit; text-decoration:none; }
.julian-site .pt-list .pt-name:hover b { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.julian-site .pt-list .pt-logo { flex:0 0 auto; width:20px; height:20px; border-radius:5px; display:block; }
@media (max-width:640px) { .julian-site .pt-list { grid-template-columns:1fr; } .julian-site .pt-list li:nth-last-child(-n+2):nth-child(odd) { border-bottom:1px solid var(--line); } .julian-site .pt-list li:last-child { border-bottom:0; } }

/* ===== Fikus article: TOC sub-entry ===== */
.julian-site .post-toc li.toc-sub a { padding-left:18px; font-weight:500; }
.julian-site .post-toc li.toc-sub a::after { content:none; }

/* Bot chat gallery: Splide 4.1.4 (MIT, self-hosted in /assets/vendor/splide/). Without JS, or if Splide fails, the slides simply stack. */
.julian-site .bot-gallery { margin:var(--space-7, 48px) 0; }
.julian-site .bot-gallery .splide__list { list-style:none; }
.julian-site .bot-gallery .splide__slide { display:flex; justify-content:center; }
.julian-site .bot-gallery .bg-fig { margin:0; display:flex; flex-direction:column; align-items:center; width:100%; }
.julian-site .bot-gallery .bg-fig img { display:block; width:min(300px, 78vw); width:min(300px, 78vw, calc((100svh - 250px) * .467)); min-width:200px; max-width:100%; height:auto; aspect-ratio:360 / 771; border:0; border-radius:0; box-shadow:none; background:transparent; filter:drop-shadow(0 18px 28px rgb(57 38 19 / .18)); -webkit-user-drag:none; user-select:none; }
.julian-site .bot-gallery .bg-fig figcaption { max-width:40ch; margin:var(--space-4, 16px) auto 0; padding:0 8px; text-align:center; }
/* No JS / no Splide: stacked, all visible */
html:not(.js) .julian-site .bot-gallery .splide, .julian-site .bot-gallery .splide.is-static { visibility:visible; }
html:not(.js) .julian-site .bot-gallery .splide__list, .julian-site .bot-gallery .splide.is-static .splide__list { display:grid; gap:40px; justify-items:center; }
html:not(.js) .julian-site .bot-gallery .splide__arrows, .julian-site .bot-gallery .splide.is-static .splide__arrows { display:none; }
/* Carousel: track on top, controls row below (prev, dots, next) */
.julian-site .bot-gallery .splide.is-initialized { display:grid; grid-template-columns:44px auto 44px; justify-content:center; align-items:center; column-gap:14px; row-gap:var(--space-4, 16px); }
.julian-site .bot-gallery .splide.is-initialized .splide__track { grid-column:1 / -1; grid-row:1; touch-action:pan-y; }
.julian-site .bot-gallery .splide.is-initialized .splide__track:focus-visible, .julian-site .bot-gallery .splide__slide:focus-visible { outline:3px solid var(--brand); outline-offset:6px; border-radius:var(--radius-lg); }
.julian-site .bot-gallery .splide__arrows { display:contents; }
.julian-site .bot-gallery .splide__arrow--prev { grid-column:1; grid-row:2; }
.julian-site .bot-gallery .splide__arrow--next { grid-column:3; grid-row:2; }
.julian-site .bot-gallery .splide__arrow--prev svg { transform:scaleX(-1); }
.julian-site .bot-gallery .splide__pagination { grid-column:2; grid-row:2; display:flex; gap:4px; padding:0; margin:0; }
.julian-site .bot-gallery .bg-btn { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm); transition:background .2s, border-color .2s, transform .15s; }
.julian-site .bot-gallery .bg-btn:hover:not([disabled]) { background:var(--brand-soft); border-color:var(--brand); }
.julian-site .bot-gallery .bg-btn:active:not([disabled]) { transform:scale(.96); }
.julian-site .bot-gallery .bg-btn:focus-visible, .julian-site .bot-gallery .splide__pagination__page:focus-visible { outline:3px solid var(--brand); outline-offset:3px; }
.julian-site .bot-gallery .bg-btn[disabled] { opacity:.4; cursor:default; }
.julian-site .bot-gallery .splide__pagination__page { width:28px; height:28px; padding:0; margin:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; border-radius:50%; }
.julian-site .bot-gallery .splide__pagination__page::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .2s, transform .2s; }
.julian-site .bot-gallery .splide__pagination__page.is-active::before { background:var(--brand); transform:scale(1.25); }
@media (prefers-reduced-motion:reduce) {
  .julian-site .bot-gallery .bg-btn, .julian-site .bot-gallery .splide__pagination__page::before { transition:none; }
}
@media print {
  .julian-site .bot-gallery .splide__arrows, .julian-site .bot-gallery .splide__pagination { display:none !important; }
}

/* ===== Home TEST (30 Oct): "Build things we could only dream of before" + "My take on AI" ===== */
.julian-site .e-about.e-about--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px) { .julian-site .e-about.e-about--two { grid-template-columns:1fr; } }
.julian-site .e-possible { border-top:1px solid var(--night-line); }
.julian-site .e-pos-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,64px); align-items:center; }
.julian-site .e-pos-media img { display:block; width:100%; height:auto; border-radius:var(--radius-xl); border:1px solid var(--night-line); }
.julian-site .e-possible .e-kicker span { color:var(--gold); }
.julian-site .e-pos-lead { margin:18px 0 0; font-size:17.5px; line-height:1.7; color:var(--on-night-soft); }
.julian-site .e-pos-tiles { list-style:none; margin:24px 0 8px; padding:0; display:grid; gap:10px; }
.julian-site .e-pos-tiles li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:14px; align-items:baseline; padding:14px 18px; border-radius:var(--radius-lg); background:rgb(255 250 242 / .05); border:1px solid rgb(255 250 242 / .14); }
.julian-site .e-pos-tiles b { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--gold); }
.julian-site .e-pos-tiles span { font-size:15.5px; line-height:1.6; color:var(--on-night-soft); }
.julian-site .e-possible .e-link { color:var(--gold); }
.julian-site .e-take { margin-top:clamp(40px,5vw,64px); border:1px solid rgb(255 250 242 / .18); border-radius:var(--radius-xl); background:rgb(255 250 242 / .04); }
.julian-site .e-take summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; padding:clamp(20px,2.4vw,28px) clamp(20px,2.8vw,32px); padding-right:64px; position:relative; border-radius:var(--radius-xl); }
.julian-site .e-take summary::-webkit-details-marker { display:none; }
.julian-site .e-take summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.julian-site .e-take-h { font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px); font-weight:800; letter-spacing:-.025em; color:var(--on-night); }
.julian-site .e-take-line { font-size:16.5px; font-weight:600; color:var(--on-night-soft); }
.julian-site .e-take-chev { position:absolute; right:clamp(20px,2.8vw,32px); top:50%; margin-top:-9px; color:var(--gold); transition:transform .25s var(--ease-out); }
.julian-site .e-take[open] .e-take-chev { transform:rotate(180deg); }
.julian-site .e-take-body { display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:clamp(20px,3vw,40px); padding:0 clamp(20px,2.8vw,32px) clamp(24px,2.8vw,32px); }
.julian-site .e-take-art { width:100%; height:auto; border-radius:var(--radius-lg); align-self:start; }
.julian-site .e-take-intro { margin:0 0 20px; font-size:17px; line-height:1.72; color:var(--on-night-soft); max-width:68ch; }
.julian-site .e-take-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.julian-site .e-take-card p { margin:0; font-size:15.5px; line-height:1.65; color:var(--on-night-soft); }
.julian-site .e-take-card .e-flead { color:var(--on-night); }
.julian-site .e-focus-grid.e-focus-grid--two { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.julian-site .e-focus-grid.e-focus-grid--two > .e-fpanel--wide { grid-column:auto; }
@media (max-width:1000px) {
  .julian-site .e-focus-grid.e-focus-grid--two { grid-template-columns:1fr; }
  .julian-site .e-pos-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .julian-site .e-take-body, .julian-site .e-take-cards { grid-template-columns:1fr; }
  .julian-site .e-take-art { max-width:180px; }
  .julian-site .e-pos-tiles li { grid-template-columns:1fr; gap:4px; }
}
@media (prefers-reduced-motion:reduce) { .julian-site .e-take-chev { transition:none; } }

/* Polish pass (30 Oct): media fills the text column height, tiles/summary get hover + focus states, chevron becomes a round control */
.julian-site .e-pos-grid { align-items:stretch; }
.julian-site .e-pos-body { align-self:center; }
.julian-site .e-pos-media { position:relative; display:block; align-self:center; }
.julian-site .e-pos-media img { width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; box-shadow:0 30px 60px -36px rgb(0 0 0 / .9); }
.julian-site .e-pos-media::after { content:""; position:absolute; inset:0; border-radius:var(--radius-xl); pointer-events:none; background:radial-gradient(60% 55% at 50% 52%,rgb(232 184 92 / .12),transparent 70%); opacity:.6; transition:opacity .6s var(--ease-out); }
.julian-site .e-pos-tiles li { position:relative; transition:background-color .3s,border-color .3s,translate .3s var(--ease-out); }
.julian-site .e-pos-tiles li::before { content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--gold); opacity:0; transition:opacity .3s; }
.julian-site .e-pos-tiles b { line-height:1.3; }
.julian-site .e-take { transition:border-color .3s,background-color .3s; }
.julian-site .e-take[open] { border-color:rgb(232 184 92 / .32); background:rgb(255 250 242 / .055); }
.julian-site .e-take summary { align-items:center; padding-right:84px; transition:background-color .3s; }
.julian-site .e-take summary::marker { content:""; }
.julian-site .e-take-chev { box-sizing:content-box; width:18px; height:18px; padding:10px; margin-top:-20px; border-radius:50%; border:1px solid rgb(232 184 92 / .4); background:rgb(232 184 92 / .08); transition:transform .3s var(--ease-out),background-color .3s,border-color .3s; }
.julian-site .e-take[open] summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.julian-site .e-take[open] .e-take-body { border-top:1px solid rgb(255 250 242 / .1); padding-top:clamp(24px,2.8vw,32px); }
.julian-site .e-take-art { border:1px solid var(--night-line); }
.julian-site .e-take-card { height:100%; }
@media (hover:hover) and (pointer:fine) {
  .julian-site .e-pos-media:hover::after { opacity:1; }
  .julian-site .e-pos-tiles li:hover { background:rgb(255 250 242 / .08); border-color:rgb(232 184 92 / .34); translate:4px 0; }
  .julian-site .e-pos-tiles li:hover::before { opacity:1; }
  .julian-site .e-take summary:hover { background:rgb(255 250 242 / .04); }
  .julian-site .e-take summary:hover .e-take-chev { background:rgb(232 184 92 / .18); border-color:var(--gold); }
}
.julian-site .e-take summary:focus-visible .e-take-chev { background:rgb(232 184 92 / .18); border-color:var(--gold); }
@media (prefers-reduced-motion:no-preference) {
  .julian-site .e-take[open] .e-take-body { animation:revealUp .45s var(--ease-out) both; }
}
@media (max-width:700px) {
  .julian-site .e-take summary { padding:20px 72px 20px 20px; }
  .julian-site .e-take-chev { right:16px; }
  .julian-site .e-take-art { max-width:150px; }
  .julian-site .e-pos-tiles li { padding:14px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  .julian-site :is(.e-pos-tiles li,.e-pos-tiles li::before,.e-pos-media::after,.e-take,.e-take summary) { transition:none; }
  .julian-site .e-pos-tiles li:hover { translate:none; }
}

/* Work cards with generated line-art (night artwork on a cream card): framed like a screen, warm glow on hover */
.julian-site .e-wmedia--art { position:relative; background:var(--night); box-shadow:inset 0 0 0 1px rgb(255 250 242 / .08); }
.julian-site .e-wmedia--art::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgb(232 184 92 / .0); background:radial-gradient(55% 60% at 50% 50%,rgb(232 184 92 / .14),transparent 70%); opacity:0; transition:opacity .6s var(--ease-out),box-shadow .6s var(--ease-out); }
.julian-site .e-wcard:hover .e-wmedia--art::after, .julian-site .e-wcard:focus-within .e-wmedia--art::after { opacity:1; box-shadow:inset 0 0 0 1px rgb(232 184 92 / .35); }
@media (hover:none) { .julian-site .e-wcard:hover .e-wmedia--art::after { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .julian-site .e-wmedia--art::after { transition:none; } }

/* ===== Clay spot illustrations (blog only) ===== */
.julian-site .post-fig.float-art { float:right; width:clamp(130px,26%,200px); margin:4px 0 14px 28px; }
.julian-site .post-fig.float-art img { display:block; width:100%; height:auto; border:0; border-radius:0; box-shadow:none; background:transparent; filter:drop-shadow(0 14px 18px rgb(57 38 19 / .16)); }
.julian-site .post-body h4 + .float-art, .julian-site .post-body h3 + .float-art { margin-top:0; }
@media (max-width:600px) { .julian-site .post-fig.float-art { width:112px; margin:2px 0 10px 16px; } }
.julian-site .blog-head { position:relative; }
.julian-site .blog-head-art { display:block; width:clamp(120px,18vw,210px); height:auto; margin:0 0 12px; filter:drop-shadow(0 14px 20px rgb(28 21 18 / .25)); }

/* Polish pass (30 Oct): floats hang slightly into the right margin on wide screens, headings/figures always clear them */
.julian-site .post-body :is(h2,h3,h4,.post-final,.post-fig:not(.float-art),.bot-gallery,blockquote,.timeline) { clear:right; }
.julian-site .post-body h4 + .float-art, .julian-site .post-body h3 + .float-art, .julian-site .post-body h2 + .float-art { margin-top:6px; }
.julian-site .post-body .float-art + p + ul { display:flow-root; }
.julian-site .post-fig.float-art { shape-outside:margin-box; }
@media (min-width:1200px) { .julian-site .post-fig.float-art { width:190px; margin:2px -96px 16px 32px; } }
@media (max-width:600px) { .julian-site .post-fig.float-art { width:84px; margin:4px 0 8px 14px; } }
@media (max-width:360px) { .julian-site .post-fig.float-art { display:none; } }

/* Blog index header art: right of the title block on desktop, small above the title on phones */
.julian-site.page-writing .blog-head-art { width:96px; margin:0 0 10px -4px; }
@media (min-width:900px) {
  .julian-site.page-writing .blog-head { position:relative; }
  .julian-site.page-writing .blog-head > :not(.blog-head-art) { max-width:min(700px,62%); }
  .julian-site.page-writing .blog-head-art { position:absolute; right:calc(var(--gutter) + clamp(0px,4vw,64px)); top:calc(50% + 36px); width:clamp(220px,22vw,290px); margin:0; translate:0 -50%; filter:drop-shadow(0 22px 28px rgb(0 0 0 / .4)); }
  .julian-site.page-writing .blog-head::after { content:""; position:absolute; right:calc(var(--gutter) + clamp(0px,4vw,64px) - 40px); top:calc(50% + 36px); width:clamp(300px,30vw,380px); aspect-ratio:1; translate:0 -50%; border-radius:50%; background:radial-gradient(closest-side,rgb(232 184 92 / .16),transparent); pointer-events:none; z-index:0; }
  .julian-site.page-writing .blog-head-art { z-index:1; }
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference) {
  .julian-site.page-writing .blog-head-art { animation:blogArtBob 7s ease-in-out infinite; }
}
@keyframes blogArtBob { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-8px) rotate(1.5deg); } }