:root { box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
    --bg:#f6f3ee; --fg:#161412; --mut:#6f675d; --line:#d9d2c6; --acc:#e4572e; --card:#fff; }
  html { scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#121110; --fg:#f2ede4; --mut:#9b9388; --line:#2b2824; --acc:#ff7a4d; --card:#1b1917; } }
  :root[data-theme="dark"] { --bg:#121110; --fg:#f2ede4; --mut:#9b9388; --line:#2b2824; --acc:#ff7a4d; --card:#1b1917; }
  * { box-sizing:border-box; margin:0; }
  body { font:400 1rem/1.7 Inter,system-ui,sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
  a { color:inherit; }
  .wrap { max-width:1000px; margin:0 auto; padding:0 24px; }
  .serif { font-family:Fraunces,Georgia,serif; font-weight:400; letter-spacing:-.02em; }
  em { font-style:italic; color:var(--acc); }
  header { position:sticky; top:env(safe-area-inset-top,0px); background:color-mix(in srgb,var(--bg) 72%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); z-index:5; border-bottom:1px solid var(--line); }
  header .wrap { display:flex; justify-content:space-between; align-items:center; padding-block:16px; flex-wrap:wrap; gap:6px 20px; }
  .logo { font-family:Fraunces,Georgia,serif; font-size:1.2rem; text-decoration:none; }
  .logo b { color:var(--acc); font-weight:400; font-style:italic; }
  nav a { margin-left:22px; text-decoration:none; font-size:.85rem; color:var(--mut); }
  nav a.on, nav a:hover { color:var(--fg); box-shadow:0 1.5px 0 var(--acc); }
  .page { display:none; animation:in .5s ease both; } .page.on { display:block; }
  @keyframes in { from { opacity:0; transform:translateY(10px); } }
  .eyebrow { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
  h1 { font-size:clamp(2.8rem,9vw,6.4rem); line-height:1.02; margin:18px 0 28px; }
  .lead { font-size:1.25rem; max-width:34ch; }
  .sub { color:var(--mut); max-width:46ch; margin-top:10px; }
  .hero { padding:12vh 0 8vh; }
  .links { margin-top:34px; display:flex; gap:26px; flex-wrap:wrap; }
  .arrow { text-decoration:none; font-weight:500; border-bottom:1px solid var(--fg); padding-bottom:3px; transition:.2s; }
  .arrow:hover { color:var(--acc); border-color:var(--acc); padding-right:6px; }
  .arrow::after { content:" →"; }
  .three { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; padding:28px 0; }
  .three div { padding:28px; border-radius:20px; background:color-mix(in srgb,var(--card) 55%,transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border:1px solid color-mix(in srgb,var(--fg) 14%,transparent); box-shadow:0 10px 30px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.35); }
  .three h3 { font-size:1rem; font-weight:600; margin-bottom:6px; }
  .three p { color:var(--mut); font-size:.92rem; }
  .row { display:grid; grid-template-columns:70px 1fr auto; gap:20px; align-items:start; padding:34px 0; border-top:1px solid var(--line); transition:padding .3s; }
  .row:hover { padding-left:12px; }
  .row .n { color:var(--acc); font-size:.85rem; padding-top:12px; }
  .row h2 { font-size:clamp(1.6rem,3.5vw,2.3rem); line-height:1.15; margin-bottom:10px; }
  .row p { color:var(--mut); max-width:58ch; }
  #svc .scard { position:sticky; top:calc(env(safe-area-inset-top,0px) + var(--hdr,84px) + var(--i)*var(--step,18px)); display:grid; grid-template-columns:50px 1fr auto; gap:20px; align-items:start; min-height:300px; margin-bottom:28px; padding:36px; background:color-mix(in srgb,var(--card) 55%,transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border:1px solid color-mix(in srgb,var(--fg) 14%,transparent); border-radius:22px; box-shadow:0 -12px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.35); }
  #svc .scard .n { color:var(--acc); font-size:.85rem; padding-top:12px; }
  #svc .scard h2 { font-size:clamp(1.6rem,3.5vw,2.3rem); line-height:1.15; margin-bottom:10px; }
  #svc .scard p { color:var(--mut); max-width:58ch; }
  .herogrid { display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
  .herogrid h1 { font-size:clamp(2.6rem,6.2vw,5rem); }
  .herogrid .links { gap:14px; }
  .arrow.glassbtn { padding:14px 26px; border-radius:999px; background:color-mix(in srgb,var(--card) 55%,transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border:1px solid color-mix(in srgb,var(--fg) 14%,transparent); box-shadow:0 10px 30px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .25s, border-color .25s, color .25s; }
  .arrow.glassbtn:hover { padding-right:26px; transform:translateY(-2px); border-color:var(--acc); color:var(--fg); }
  .portrait { position:relative; margin:0; max-width:430px; justify-self:end; width:100%; }
  .portrait { aspect-ratio:3/4; }
  .portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:26px; }
  .pA { animation:fadeA 12s ease-in-out infinite; } .pB { animation:fadeB 12s ease-in-out infinite; }
  @keyframes fadeA { 0%,40% { opacity:1; } 50%,90% { opacity:0; } 100% { opacity:1; } }
  @keyframes fadeB { 0%,40% { opacity:0; } 50%,90% { opacity:1; } 100% { opacity:0; } }
  @media (prefers-reduced-motion:reduce) { .pA { animation:none; opacity:1; } .pB { animation:none; opacity:0; } }
  .portrait svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
  .dd { fill:none; stroke:var(--dd,#f5b820); stroke-width:9; stroke-linecap:round; stroke-linejoin:round; }
  .crown { transform-box:fill-box; transform-origin:50% 100%; animation:bob 3.2s ease-in-out infinite; }
  .crown .dd { stroke-dasharray:1; animation:draw 5s ease-in-out infinite; }
  .crown circle { fill:var(--dd,#f5b820); animation:pop 5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  .ray { stroke-dasharray:1; animation:flash 2.6s ease-in-out infinite; }
  .heart { transform-box:fill-box; transform-origin:center; animation:beat 1.6s ease-in-out infinite; }
  @keyframes bob { 50% { transform:translateY(-10px) rotate(-3deg); } }
  @keyframes draw { 0% { stroke-dashoffset:1; } 30%,80% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-1; } }
  @keyframes pop { 0%,25% { transform:scale(0); } 35%,85% { transform:scale(1); } 100% { transform:scale(0); } }
  @keyframes flash { 0% { stroke-dashoffset:1; opacity:0; } 25% { stroke-dashoffset:0; opacity:1; } 60% { stroke-dashoffset:0; opacity:1; } 90%,100% { stroke-dashoffset:-1; opacity:0; } }
  @keyframes beat { 0%,100% { transform:scale(1); } 25% { transform:scale(1.18); } 45% { transform:scale(1); } 60% { transform:scale(1.1); } }
  @media (prefers-reduced-motion:reduce) { .crown,.crown .dd,.crown circle,.ray,.heart { animation:none; stroke-dashoffset:0; opacity:1; transform:none; } }
  section.blk { padding:9vh 0 6vh; border-top:1px solid var(--line); margin-top:8vh; }
  .split { display:grid; grid-template-columns:1fr 2fr; gap:32px; }
  .split h2 { font-size:2.2rem; }
  .split p { color:var(--mut); margin-bottom:16px; max-width:60ch; }
  .split p:first-child { color:var(--fg); font-size:1.2rem; }
  .tags { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 60px; }
  .tags span { font-size:.85rem; padding:6px 14px; border:1px solid var(--line); border-radius:99px; color:var(--mut); }
  .tags span:hover { border-color:var(--acc); color:var(--fg); }
  .ep { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-top:1px solid var(--line); }
  .ep:hover h3 { color:var(--acc); }
  .ep h3 { font-weight:500; font-size:1.05rem; transition:.2s; }
  .ep small { color:var(--mut); white-space:nowrap; }
  .res { display:grid; grid-template-columns:160px 1fr; gap:10px 32px; padding:28px 0; border-top:1px solid var(--line); }
  .res h4 { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); font-weight:500; padding-top:6px; }
  .res ul { margin:8px 0 22px 18px; color:var(--mut); font-size:.95rem; }
  .res li { margin-bottom:4px; }
  .res .role { font-weight:600; } .res .role span { color:var(--acc); }
  .res .date { display:block; font-size:.8rem; color:var(--mut); letter-spacing:.06em; }
  .big { font-size:clamp(1.12rem,3.85vw,2.52rem); text-decoration:none; border-bottom:2px solid var(--acc); word-break:break-all; }
  .big:hover { color:var(--acc); }
  footer { margin-top:12vh; border-top:1px solid var(--line); padding:36px 0 48px; font-size:.85rem; color:var(--mut); }
  footer .wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  footer a { margin-right:16px; text-decoration:none; } footer a:hover { color:var(--acc); }
  body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(520px 420px at 12% 22%,color-mix(in srgb,var(--acc) 26%,transparent),transparent 70%),radial-gradient(560px 460px at 90% 55%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 70%),radial-gradient(500px 400px at 30% 96%,color-mix(in srgb,var(--acc) 14%,transparent),transparent 70%); }
  #home section.blk.split, #portfolio .row, #podcast .ep, #resume .res, #contact .hero, .tags span { background:color-mix(in srgb,var(--card) 55%,transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border:1px solid color-mix(in srgb,var(--fg) 14%,transparent); box-shadow:0 10px 30px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.35); }
  #home section.blk.split { padding:clamp(24px,5vw,44px); border-radius:24px; }
  #portfolio .row { padding:clamp(22px,4vw,32px); border-radius:22px; margin-bottom:16px; transition:transform .3s; }
  #portfolio .row:hover { padding-left:clamp(22px,4vw,32px); transform:translateY(-3px); }
  #podcast .ep { padding:20px 24px; border-radius:18px; margin-bottom:12px; }
  #resume .res { padding:clamp(22px,4vw,34px); border-radius:22px; margin-bottom:16px; }
  #contact .hero { padding:clamp(28px,6vw,56px); border-radius:28px; margin-top:8vh; }
  .tags span { padding:7px 16px; }
  @media print { #resume .res { background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } }
  .mic { margin:0; justify-self:center; width:100%; max-width:250px; }
  .mic svg { width:100%; height:auto; overflow:visible; }
  .mic .m { fill:none; stroke:var(--acc); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
  .mic rect.m { fill:color-mix(in srgb,var(--card) 55%,transparent); }
  .mic .ring { fill:none; stroke:var(--acc); stroke-width:6; stroke-linecap:round; opacity:0; animation:ring 2.4s ease-in-out infinite; }
  .mic .r2 { animation-delay:.5s; }
  .mic svg { animation:bob2 3.4s ease-in-out infinite; }
  @keyframes ring { 0%,100% { opacity:0; } 40%,60% { opacity:.9; } }
  @keyframes bob2 { 50% { transform:translateY(-8px); } }
  @media (prefers-reduced-motion:reduce) { .mic .ring,.mic svg { animation:none; } .mic .ring { opacity:.7; } }
  #home section.blk.split { grid-template-columns:1fr; text-align:center; }
  #home section.blk.split p { margin-inline:auto; }
  a.ep { text-decoration:none; color:inherit; }
  .ep .d { color:var(--mut); font-size:.9rem; margin-top:2px; }
  nav a.book { padding:7px 18px; border-radius:99px; color:var(--fg); font-weight:500; background:color-mix(in srgb,var(--card) 55%,transparent); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid color-mix(in srgb,var(--fg) 16%,transparent); box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4); transition:transform .25s, border-color .25s; }
  nav a.book:hover { transform:translateY(-2px); border-color:var(--acc); box-shadow:0 6px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4); }
  .ctas { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .logo img { display:block; height:48px; width:auto; }
  #tc { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:20; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:99px; background:color-mix(in srgb,var(--card) 60%,transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid color-mix(in srgb,var(--fg) 16%,transparent); box-shadow:0 6px 18px rgba(0,0,0,.12); font-size:.72rem; color:var(--mut); }
  #tc button { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; outline:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
  #tc button.on { border-color:var(--fg); }
  @media print { #tc { display:none; } }
  .shots { display:none; }
  .modal { position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(10,8,6,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:in .25s ease both; }
  .modal[hidden] { display:none; }
  .mbox { position:relative; width:100%; max-width:980px; max-height:92vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:clamp(20px,4vw,32px); border-radius:22px; background:color-mix(in srgb,var(--card) 92%,transparent); border:1px solid color-mix(in srgb,var(--fg) 16%,transparent); box-shadow:0 24px 70px rgba(0,0,0,.35); }
  .mbox h3 { font-size:1.5rem; margin:0 44px 18px 0; }
  .mbox img { display:block; width:100%; height:auto; border-radius:12px; margin-bottom:14px; border:1px solid color-mix(in srgb,var(--fg) 14%,transparent); }
  .mbox .cap { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin:4px 0 10px; }
  .mclose { position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--fg); font-size:1.3rem; line-height:1; cursor:pointer; }
  .mclose:hover { border-color:var(--acc); color:var(--acc); }
  @media print { .modal { display:none; } }
  @media(max-width:700px){ .row,#svc .scard{grid-template-columns:1fr} .herogrid{grid-template-columns:1fr} .portrait{justify-self:start;max-width:340px} .row .n{padding:0} .split,.res{grid-template-columns:1fr} nav a{margin:0 16px 0 0} .ep{flex-direction:column;gap:4px} }
  @media print { header,footer,.noprint{display:none} .page{display:none!important} #resume{display:block!important} }
  /* ---- phones (iPhone 12 Pro ~390px and similar) ---- */
  @media (max-width:700px) {
    :root { --hdr:110px; --step:14px; }
    header .wrap { flex-direction:column; align-items:stretch; gap:6px; padding-block:10px; }
    .logo img { height:40px; }
    nav { display:flex; gap:20px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 0 4px; }
    nav::-webkit-scrollbar { display:none; }
    nav a, nav a.book { margin:0; flex:0 0 auto; }
    .hero { padding:7vh 0 5vh; }
    .portrait { justify-self:center; max-width:320px; }
    .mic { max-width:200px; }
    #svc .scard { padding:24px; min-height:240px; }
    .modal { padding:10px; }
    .mbox { max-height:92vh; max-height:92dvh; }
    #tc { right:10px; padding:6px 10px; }
  }
  /* ---- phones: header + centered hero text + centered cards ---- */
  @media (max-width:700px) {
    :root { --hdr:96px; }

    /* header: all links visible, no swiping */
    header .wrap { display:grid; grid-template-columns:repeat(5,1fr); align-items:center; column-gap:0; row-gap:6px; }
    nav { display:contents; }
    .logo { grid-column:1 / 4; grid-row:1; }
    nav a.book { grid-column:4 / 6; grid-row:1; justify-self:end; padding:6px 14px; }
    nav a:not(.book) { grid-row:2; text-align:center; font-size:.8rem; }

    /* hero text centered (Home, Portfolio, Podcast) */
    #home .hero, #portfolio .hero, #podcast .hero { text-align:center; }
    #home .hero .lead, #home .hero .sub, #portfolio .hero .lead, #portfolio .hero .sub, #podcast .hero .lead, #podcast .hero .sub { margin-inline:auto; }
    #home .hero .links, #podcast .hero .links { flex-direction:column; align-items:center; justify-content:center; }

    /* cards centered; the text inside them is unchanged */
    #svc .scard, .row, .ep, .glass { margin-inline:auto; }
  }
  /* ---- footer links wrap on small screens (stops the page being wider than the phone) ---- */
  footer .wrap > div:last-child { display:flex; flex-wrap:wrap; gap:8px 16px; }
  footer a { margin-right:0; }