/* ============================================================ Even The Dog Has ADHD — HOME layout (loads only on is_front_page()) Ported verbatim from design/etd-home-mockup.html. 6 image assets are CSS-gradient PLACEHOLDERS — SIGN-OFF BLOCKER (BUILD-SPEC R1). ============================================================ */ /* ---------- IMAGE PLACEHOLDERS (temporary CSS gradients) ---------- */ .ph{background-size:cover;background-position:center} .ph-waves{background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 72%,var(--paper-2)),color-mix(in srgb,var(--coral) 62%,var(--paper-2)))} .ph-map{background:linear-gradient(120deg,color-mix(in srgb,var(--coral) 68%,var(--paper-2)),color-mix(in srgb,var(--violet) 66%,var(--paper-2)))} .ph-pack{background:linear-gradient(160deg,color-mix(in srgb,var(--pink) 68%,var(--paper-2)),color-mix(in srgb,var(--violet) 66%,var(--paper-2)))} .ph-well{background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 66%,var(--paper-2)),color-mix(in srgb,var(--pink) 62%,var(--paper-2)))} .ph-wonderland{background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 62%,var(--paper-2)),color-mix(in srgb,var(--violet) 70%,var(--paper-2)))} .ph-portrait{background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--violet) 45%,var(--paper-2)),var(--paper-2))} /* ---------- HERO ---------- */ header{position:relative;overflow:hidden} .hero-texture{position:absolute;inset:0;opacity:.10;pointer-events:none;background:radial-gradient(60% 80% at 75% 40%,var(--violet),transparent 70%),radial-gradient(70% 60% at 55% 62%,var(--coral),transparent 70%);background-size:cover;background-position:70% 50%;-webkit-mask-image:radial-gradient(ellipse 75% 60% at 72% 45%,#000,transparent 76%);mask-image:radial-gradient(ellipse 75% 60% at 72% 45%,#000,transparent 76%)} .hero-inner{position:relative;padding-top:90px;padding-bottom:110px;display:grid;grid-template-columns:repeat(12,1fr);gap:48px;align-items:center} .hero-copy{grid-column:span 8} .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:30px} .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)} h1.hero{font-size:clamp(3.4rem,10.5vw,10rem);font-weight:600} .hero-sub{margin-top:34px;font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--ink-dim);max-width:34rem} .hero-sub strong{color:var(--ink);font-weight:500} .hero-cta{margin-top:38px;display:flex;flex-wrap:wrap;gap:18px;align-items:center} .text-link{font-size:14px;font-weight:500;color:var(--ink-dim);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s,border-color .2s} .text-link:hover{color:var(--ink);border-color:var(--ink-dim)} .hero-art{grid-column:span 4;position:relative} .art-card{aspect-ratio:1;max-width:420px;margin:0 auto;border:1px solid var(--line);border-radius:28px;background:#121017;display:grid;place-items:center;padding:36px;box-shadow:var(--shadow);position:relative} .art-card .mark{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(3rem,7vw,5.5rem);color:var(--ink);opacity:.9;text-align:center;line-height:1} .art-logo{width:100%;height:auto;object-fit:contain;display:block} .ep-chip{position:absolute;bottom:-22px;left:-22px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)} .ep-chip .play{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0} .ep-chip .play svg{width:15px;height:15px} @media(max-width:980px){.hero-copy,.hero-art{grid-column:span 12}.hero-art{margin-top:56px}} /* ---------- SECTIONS ---------- */ section{border-top:1px solid var(--line)} .sec-pad{padding:96px 0} .sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;margin-bottom:56px} h2.sec{font-size:clamp(2.6rem,5vw,4.6rem);font-weight:340;line-height:.95;margin-top:14px} .sec-head .lead{grid-column:span 7} .sec-head .note{grid-column:span 5;color:var(--ink-dim);align-self:end} @media(max-width:880px){.sec-head .lead,.sec-head .note{grid-column:span 12}} /* lead story */ .lead-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:start} .lead-grid .l{grid-column:span 4} .lead-grid .r{grid-column:span 8} .lead-meta{margin-top:32px} .lead-meta h3{font-family:"Fraunces",serif;font-weight:360;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.1;margin-top:14px} .lead-meta p{margin-top:14px;color:var(--ink-dim);max-width:34rem} .lead-meta .btn-play{margin-top:26px;font-size:13px;padding:9px 18px} .story{display:block;position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:24px;overflow:hidden;cursor:pointer;background:var(--paper-2)} .story .bg{position:absolute;inset:0} .story .play-lg{position:absolute;top:22px;right:22px;width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px;transition:transform .3s;border:0;cursor:pointer} .story .play-lg svg{width:22px;height:22px} .story:hover .play-lg{transform:scale(1.08)} @media(max-width:880px){.lead-grid .l,.lead-grid .r{grid-column:span 12}} /* studio: three rooms */ .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden} .room{background:var(--card);padding:36px;display:flex;flex-direction:column;transition:background .25s} .room:hover{background:var(--paper-2)} .room .rh{display:flex;justify-content:space-between;margin-bottom:28px} .room .thumb{aspect-ratio:1;border-radius:16px;border:1px solid var(--line);overflow:hidden;margin-bottom:28px;background:var(--paper-2)} .room .thumb img{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform .6s ease} .room:hover .thumb img{transform:scale(1.04)} .room:hover .thumb.ph{filter:brightness(1.05)} .room h3{font-family:"Fraunces",serif;font-weight:360;font-size:1.7rem;margin-bottom:10px} .room:hover h3{color:var(--accent)} .play-lg,.story .play-lg,.ep-chip .play{background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%)!important} .room p{color:var(--ink-dim);font-size:.95rem;flex:1} .room .enter{margin-top:28px;display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.2em} .room .enter .arr{transition:transform .2s} .room:hover .enter .arr{transform:translateX(4px)} .room.teaser{cursor:default} .room .badge-soon{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:4px 9px} @media(max-width:880px){.rooms{grid-template-columns:1fr}} /* work: bento */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px} .tile{position:relative;border:1px solid var(--line);border-radius:24px;padding:44px;overflow:hidden;background:var(--card);transition:border-color .25s;display:flex;flex-direction:column} .tile:hover{border-color:var(--ink-dim)} .tile .tbg{position:absolute;inset:0;opacity:.16;background-size:cover;background-position:center} .tile .tscrim{position:absolute;inset:0;background:linear-gradient(105deg,var(--card) 28%,transparent)} .tile .tc{position:relative;display:flex;flex-direction:column;height:100%} .tile h3{font-family:"Fraunces",serif;font-weight:340;line-height:1;letter-spacing:-.02em} .tile p{color:var(--ink-dim);margin:14px 0 26px;max-width:26rem} .tile .lnk{margin-top:auto;font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.22em;display:inline-flex;gap:8px;align-items:center} .tile.big{grid-column:span 7;grid-row:span 2;min-height:520px} .tile.big h3{font-size:clamp(3rem,5vw,4.5rem);margin-top:auto} .tile.sm{grid-column:span 5;min-height:248px} .tile.sm h3{font-size:2.4rem;margin-top:14px} .tile.sm p{font-size:.92rem;max-width:60%} @media(max-width:880px){.tile.big,.tile.sm{grid-column:span 12;grid-row:auto;min-height:auto}} /* speaking */ .speak{display:grid;grid-template-columns:repeat(12,1fr);gap:40px;align-items:end} .speak .l{grid-column:span 7}.speak .r{grid-column:span 5} .speak-lead{color:var(--ink-dim);font-size:1.08rem;margin-bottom:28px} .speak-cta{display:flex;flex-wrap:wrap;gap:14px} @media(max-width:880px){.speak .l,.speak .r{grid-column:span 12}} /* about */ .about{display:grid;grid-template-columns:repeat(12,1fr);gap:48px} .about .por{grid-column:span 5} .about .txt{grid-column:span 7;padding-left:16px} .portrait{aspect-ratio:4/5;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--paper-2);position:relative} .portrait img{width:100%;height:100%;object-fit:cover} .portrait .ph-frame{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px} .portrait blockquote{font-family:"Fraunces",serif;font-style:italic;font-weight:340;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;font-optical-sizing:auto} .about .txt p{color:var(--ink-dim);font-size:1.08rem;margin-top:20px;max-width:38rem} .about .txt p em{color:var(--ink);font-style:normal;font-weight:500} .about-cta{margin-top:40px;display:inline-flex;align-items:center;gap:14px} .about-cta .circ{width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0} .about-cta .circ svg{width:20px;height:20px} @media(max-width:880px){.about .por,.about .txt{grid-column:span 12}.about .txt{padding-left:0}} /*+BUILD Lovable dark energy: hero glow + marquee */ .hero-glow{top:-150px;right:-130px;width:600px;height:600px} @media(max-width:880px){.hero-glow{width:360px;height:360px;right:-110px;top:-90px}} .marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden} .marquee{display:flex;width:max-content;animation:etdmarquee 38s linear infinite} .marquee .m{display:flex;align-items:center;gap:40px;padding-right:40px;flex-shrink:0} .marquee .gw{font-family:"Fraunces",serif;font-style:italic;font-size:23px;line-height:1.1;background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .marquee .star{font-family:"Fraunces",serif;font-style:italic;font-size:16px;color:var(--line)} @keyframes etdmarquee{to{transform:translateX(-50%)}} .marquee:hover{animation-play-state:paused} /*+BUILD Lovable: gradient-tinted line-art + hover */ .room .thumb{position:relative} .room .thumb img{filter:brightness(1.12) contrast(1.08)} .room .thumb::after{content:"";position:absolute;inset:0;background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%);mix-blend-mode:overlay;opacity:.5;pointer-events:none;transition:opacity .35s} .room:hover .thumb::after{opacity:.72} .room:hover .thumb img{transform:scale(1.06)} :root[data-theme="dark"] .room:hover h3{background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .tile .tbg{filter:brightness(1.12) contrast(1.06)} /*+BUILD Bark/Pack archive (2-col cards + filters) */ .arch-head{margin-bottom:30px} .arch-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px} .chip{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);transition:color .2s,border-color .2s,background .2s} .chip:hover{color:var(--ink);border-color:var(--ink-dim)} .chip.is-active{background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%);color:#fff;border-color:transparent} .arch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} @media(max-width:780px){.arch-grid{grid-template-columns:1fr}} .ep-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .25s,transform .25s} .ep-card:hover{border-color:var(--ink-dim);transform:translateY(-2px)} .ep-thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background-image:linear-gradient(125deg,color-mix(in srgb,var(--violet) 42%,var(--paper-2)),color-mix(in srgb,var(--pink) 42%,var(--paper-2)))} .ep-thumb .ep-img{width:100%;height:100%;object-fit:cover} .ep-play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:17px} .ep-cbody{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1} .ep-meta{color:var(--ink-dim)} .ep-title{display:block;font-family:"Fraunces",serif;font-weight:340;font-size:1.45rem;line-height:1.12;color:var(--ink);transition:color .2s} .ep-card:hover .ep-title{color:var(--accent)} .ep-exc{color:var(--ink-dim);font-size:.95rem;line-height:1.55;flex:1} .ep-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px} .ep-watch{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);white-space:nowrap} .ep-plat{display:flex;gap:8px} .plat{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:transform .2s,border-color .2s} .plat svg{width:16px;height:16px} .plat:hover{transform:scale(1.12);border-color:var(--ink-dim)} .plat-sp{color:#1DB954} .plat-ap{color:#A855F7} .plat-yt{color:#FF0000} .ep-cats{display:flex;flex-wrap:wrap;gap:6px} .pill{font-family:"JetBrains Mono",monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;padding:5px 11px;border:1px solid var(--line);border-radius:999px;color:var(--ink-dim);white-space:nowrap;transition:color .2s,border-color .2s} a.pill:hover{color:var(--ink);border-color:var(--ink-dim)} .pill-cat{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)} .pill-dummy{opacity:.55} .ep-res{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px} .ep-res-lab,.ep-listen-lab{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);opacity:.65} .ep-watch{display:inline-block;margin-top:8px} .ep-listen{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap} .etd-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)} .etd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .etd-video--empty{display:grid;place-items:center;color:var(--ink-dim)} /* Coaching page (Work With Me) */ .co-list{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:8px} .co-list li{position:relative;padding-left:26px;color:var(--ink-dim);line-height:1.55} .co-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent);font-weight:700} .co-rooms{margin-top:8px} .co-rooms .room{cursor:default} .co-rooms .room h3{margin:10px 0 6px} .co-rooms .room .co-list{margin-top:10px} .co-end{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-dim)} .co-end strong{color:var(--ink)} .co-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:8px} .co-quote{margin:0;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card)} .co-quote blockquote{margin:0;font-size:1rem;line-height:1.6;color:var(--ink)} .co-quote figcaption{margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} @media(max-width:880px){.co-rooms{grid-template-columns:1fr}} /* Contact page */ .ct-h3{font-family:"Fraunces",serif;font-weight:400;font-size:1.5rem;margin:0 0 4px;color:var(--ink)} .ct-note{color:var(--ink-dim);line-height:1.65;margin:0 0 22px} .ct-social-label{display:block;color:var(--accent);margin-bottom:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase} .ct-social-links{display:flex;flex-wrap:wrap;gap:18px} .ct-social-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s} .ct-social-links a:hover{color:var(--accent);border-color:var(--accent)} /* Elementor form -> token-aware */ .elementor-field-group label{color:var(--ink-dim)!important;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em} .elementor-field-textual{background:var(--card)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:12px 14px!important} .elementor-field-textual:focus{border-color:var(--accent)!important;outline:none} .elementor-field-textual::placeholder{color:var(--ink-dim);opacity:.6} .elementor-button[type=submit]{background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%)!important;color:#fff!important;border:0!important;border-radius:999px!important;font-weight:600;padding:12px 26px!important} /* +TRY (2026-06-04b) art-card gradient ring (Diana pt3) + slow hero-glow drift (Julian) */ .art-card{border-color:transparent} .art-card::before{content:"";position:absolute;inset:0;border-radius:28px;padding:2px;background:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none} @keyframes etdDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,18px) scale(1.06)}} .hero-glow{animation:etdDrift 18s ease-in-out infinite} /* +TRY (2026-06-04c) contact submit button -> bordered .btn-solid style (gradient border, dark fill, white text) */ .elementor-button[type=submit]{background:linear-gradient(var(--btn-dark),var(--btn-dark)) padding-box,linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%) border-box!important;color:#fff!important;border:2px solid transparent!important;border-radius:999px!important;padding:12px 26px!important;font-weight:600} .elementor-button[type=submit]:hover{transform:translateY(-1px)} /* +HERO-WEIGHT: hero h1 only, lighter upright (Julian) */ .hero.display{font-weight:300} /* +GRAD-WEIGHT: keep the gradient hero word heavier (Julian) */ .hero.display .grad,.hero.display .grad em{font-weight:600} /* +HERO-SUB-WRAP: keep Diana's name on one line + widen para to two clean lines (Julian) */ .hero-sub{max-width:40rem} .hero-sub strong{white-space:nowrap} /* +CHIP-PLAY-SIZE: bigger hero chip play button + bigger triangle (Julian) */ .ep-chip .play{width:50px;height:50px} .ep-chip .play svg{width:22px;height:22px} /* +HERO-ART-SHIFT: pull the dog square 100px toward centre (desktop only) (Julian) */ @media(min-width:881px){.hero-art{transform:translateX(-100px)}} /* +EP-MIC: podcast mic icon, top-right of hero art-card (Julian) */ .ep-mic{position:absolute;top:18px;right:18px;width:56px;height:56px;z-index:3;pointer-events:none} .ep-mic svg{width:100%;height:100%;display:block} /* +EP-MIC-TINT: Julian sizing + light coral->pink wash over the mic */ .ep-mic{top:10px;right:5px;width:80px;height:80px} /* +EP-MIC-WARMTH: warm the mic toward coral/pink without a box (Julian) */ /* +EP-MIC-BOB: subtle up/down bob + slight scale throb on the mic (Julian) */ @keyframes etdMicBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.03)}} .ep-mic{animation:etdMicBob 5.5s ease-in-out infinite} /* +HERO-GLOW-WANDER: longer, less-obvious-loop drift for the hero gradient orb (Julian) */ @keyframes etdWander{0%{transform:translate(0,0) scale(1)}18%{transform:translate(-30px,22px) scale(1.05)}37%{transform:translate(24px,40px) scale(1.09)}58%{transform:translate(40px,-18px) scale(1.04)}79%{transform:translate(-22px,-30px) scale(1.07)}100%{transform:translate(0,0) scale(1)}} .hero-glow{animation:etdWander 42s ease-in-out infinite!important} /* +EP-CARD-TIDY: readable guest/date, bigger Resources label, watch at bottom row (Julian) */ .ep-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:2px} .ep-guest{font-weight:600;color:var(--ink);font-size:.95rem;letter-spacing:0} .ep-dur{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-dim);letter-spacing:.04em} .ep-guest + .ep-dur{position:relative;padding-left:9px} .ep-guest + .ep-dur::before{content:"\2022";position:absolute;left:-1px;color:var(--ink-dim)} .ep-res-lab{font-size:12px!important;letter-spacing:.08em!important;color:var(--ink)!important} .ep-listen{margin-top:auto} .ep-listen .ep-watch{margin-right:auto} /* +CHIP-BORDER: active filter chip -> bordered gradient (not solid fill), matching buttons (Julian) */ .chip.is-active{border:1.5px solid transparent;background:linear-gradient(var(--btn-dark),var(--btn-dark)) padding-box,linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%) border-box;color:#fff} .chip.is-active:hover{color:#fff;border-color:transparent} /* +ARCH-CENTER: centre the directory header, intro + filters (Julian) */ .arch-head{text-align:center;max-width:760px;margin-left:auto;margin-right:auto} .arch-intro{margin-top:16px;color:var(--ink-dim);font-size:1.05rem;line-height:1.6} .arch-filters{justify-content:center} /* +ARCH-TITLE-SIZE: archive h1 (The Pack) was h1 but size rule was h2.sec -> match big-heading scale (Julian) */ .arch-head .display{font-size:clamp(2.6rem,5vw,4.6rem);line-height:.95} /* +EP-META2: Guest: label + clock icon, bigger/legible meta (Julian) */ .ep-meta{gap:14px;font-size:1rem} .ep-guest{font-size:1rem;color:var(--ink)} .ep-glab{color:var(--ink-dim);font-weight:500} .ep-dur{display:inline-flex;align-items:center;gap:5px;font-size:.95rem} .ep-dur-ic{width:15px;height:15px;flex-shrink:0;opacity:.85} .ep-guest + .ep-dur{padding-left:0} .ep-guest + .ep-dur::before{content:none} /* +CARD-BREATHE: more vertical breathing room in cards (Julian) */ .ep-cbody{padding:32px 26px;gap:16px} .ep-res{margin-top:6px} .ep-listen{padding-top:18px} .arch-grid{gap:28px} /* +EP-WATCH-STYLE: Julian — bigger + warm orange watch link */ .ep-watch{font-size:15px;color:#ff992d} /* +PILL-CAT-COLOR: Julian — category pill text colour */ :root[data-theme="dark"] .pill-cat{color:#fea2dc} /* +MARQUEE-WEIGHT: Julian — marquee words to 300 */ .marquee .gw{font-weight:300} /* +ART-RING-SPIN: rotating gradient border ring on the hero art-card (Julian/Diana — noticeable movement) */ @property --etd-ring{syntax:'';inherits:false;initial-value:0deg} .art-card::before{background:conic-gradient(from var(--etd-ring),var(--coral),var(--pink),var(--violet),var(--coral))!important;animation:etdRingSpin 6s linear infinite} @keyframes etdRingSpin{to{--etd-ring:360deg}} @media(prefers-reduced-motion:reduce){.art-card::before{animation:none!important}} /* +MARQUEE-WHITE: Julian — marquee words white (drop gradient) */ .marquee .gw{background-image:none!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important} /* +CTA-FIXES: gradient arrow (about-cta) + lead-story Play button -> bordered gradient (Julian) */ .about-cta .circ{background:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%)!important;color:#fff!important} .btn-play{border:2px solid transparent!important;background:linear-gradient(var(--btn-dark),var(--btn-dark)) padding-box,linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%) border-box!important;color:#fff!important} /* +ABOUT-APPROACH: photo frame off, moved approach title smaller + spaced (Julian) */ .s-ab-portrait{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important} .ab-approach-sub{font-size:clamp(1.7rem,3.2vw,2.5rem)!important;line-height:1.06} .s-ab-eye2{margin-top:30px!important} /* +YOU-PAD: 30px above the moved 'ready for more' block */ .s-ab-eye3{margin-top:30px!important} /* +ABOUT-BODY-FIX: 0.9rem body + space below the moved headings (Julian) */ .s-ab-lead,.s-ab-approach-body,.s-ab-you-body{font-size:1rem!important;line-height:1.6} .ab-approach-sub{margin-bottom:16px!important} /* +ABOUT-EXPLORE-PAD: tighten gap above Where-to-next on About */ .ab-explore-sec{padding-top:36px!important} /* +LEGAL-PAGES: on-brand styling for Privacy / Cookie / Terms (scoped) */ .legal-page .wrap{max-width:820px} .legal-page h1,.legal-page .legal-title{font-family:"Fraunces",Georgia,serif;font-weight:340;letter-spacing:-.02em;line-height:1.02;font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:8px} .legal-page h2{font-family:"Fraunces",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.1;font-size:clamp(1.5rem,2.6vw,2rem);margin:48px 0 14px} .legal-page h3{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:1.05rem;margin:28px 0 8px;color:var(--ink)} .legal-page p,.legal-page li{font-family:"Inter Tight",sans-serif;font-size:1rem;line-height:1.7;color:var(--ink-dim);max-width:68ch} .legal-page p{margin:0 0 16px} .legal-page ul{margin:0 0 20px;padding-left:22px} .legal-page li{margin:0 0 8px} .legal-page li strong,.legal-page p strong{color:var(--ink)} .legal-page a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;transition:opacity .2s} .legal-page a:hover{opacity:.7} .legal-page em{font-style:italic;color:var(--ink-dim)} .legal-page table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-family:"Inter Tight",sans-serif;font-size:.94rem} .legal-page th,.legal-page td{text-align:left;vertical-align:top;padding:12px 14px;border:1px solid var(--line);line-height:1.55} .legal-page th{background:var(--paper-2);color:var(--ink);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em} .legal-page td{color:var(--ink-dim)} .legal-page td strong{color:var(--ink)} @media(max-width:600px){.legal-page table,.legal-page thead,.legal-page tbody,.legal-page tr,.legal-page th,.legal-page td{display:block}.legal-page thead{display:none}.legal-page td{border-top:0}.legal-page tr{margin-bottom:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden}.legal-page td{border-left:0;border-right:0}} /* ============================================================ +MOBILE-TRIM-P1 : Phase-1 small-safe mobile trim (additive, removable) Scoped to small screens only. Desktop/tablet rules above are untouched. Rollback: delete this entire block. ============================================================ */ @media(max-width:768px){ .s-ab-grid{grid-template-columns:1fr !important;gap:28px !important} .s-ab-portrait{max-width:420px;margin-left:auto;margin-right:auto} } @media(max-width:600px){ .sec-pad{padding:56px 0} /* was 96px */ .hero-inner{padding-top:64px;padding-bottom:72px} /* was 90/110 */ .sec-head{margin-bottom:36px} /* was 56px */ .tile{padding:28px} /* was 44px */ .art-card{padding:24px} /* was 36px */ .ep-cbody{padding:18px} /* was 24px */ .room h3{font-size:1.4rem} /* was 1.7rem */ .tile.sm h3{font-size:2rem} /* was 2.4rem */ .legal-page.sec-pad{padding:48px 0} .arch-pager a,.arch-pager span{padding:10px 14px;min-height:40px;display:inline-flex;align-items:center;justify-content:center} } /* ============================================================ +MOBILE-OVERFLOW-FIX : ROOT CAUSE of right-edge overflow on phones. repeat(12,1fr) tracks have implicit min-width:auto and refuse to shrink below content, so wide children (h1, iframe, image) blow the grid past the viewport even when children span 12. Fix: collapse the containers to a single minmax(0,1fr) track on small screens + a global image/iframe guard. Additive & removable. ============================================================ */ @media(max-width:880px){ .hero-inner,.sec-head,.lead-grid,.speak,.about,.bento{ grid-template-columns:minmax(0,1fr) !important; } /* children may carry grid-column:span N from desktop; force full row */ .hero-copy,.hero-art,.sec-head>*,.lead-grid>*,.speak>*,.about>*,.bento>*{ grid-column:1 / -1 !important; min-width:0; } } /* global media guard — no image/iframe/video may exceed its box */ img,svg,video,iframe{max-width:100%} img{height:auto} /* +DOG-ITALIC 2026-06-05 — skew the hero word "dog" (not the gradient "ADHD"); no gradient. Removable. */ .hero em:not(.grad em){display:inline-block;font-style:normal;transform:skewX(-11deg)} /* Hero background microphone (Diana request 2026-06) — large faint mic behind hero, additive; tablet .ep-mic untouched */ .hero-mic-bg{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.25;overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 70% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 70% 50%,#000,transparent 75%)} .hero-mic-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .hero-inner{z-index:2} [data-theme="light"] .hero-mic-bg{opacity:.10} @media(max-width:860px){.hero-mic-bg{opacity:.12}} /* Related episodes strip (single-episode template lib 126) */ .rel-strip{border-top:1px solid var(--line)} .rel-wrap{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px} .rel-head{margin-bottom:40px} .rel-head .mono{display:block;margin-bottom:10px} .rel-title{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05;margin:0} .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .rel-card{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .rel-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--shadow)} .rel-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2)} .rel-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .rel-card:hover .rel-img{transform:scale(1.05)} .rel-img--ph{background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 60%,var(--paper-2)),color-mix(in srgb,var(--coral) 55%,var(--paper-2)))} .rel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(100deg,var(--coral),var(--pink));color:#fff;opacity:.92;transition:transform .25s ease,opacity .25s ease} .rel-play svg{width:22px;height:22px;margin-left:2px} .rel-card:hover .rel-play{transform:translate(-50%,-50%) scale(1.08);opacity:1} .rel-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px} .rel-badge{align-self:flex-start;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:4px 10px} .rel-h{font-family:"Fraunces",serif;font-weight:300;font-size:1.12rem;line-height:1.25;color:var(--ink)} .rel-sum{font-size:.92rem;line-height:1.5;color:var(--ink-dim)} .rel-more{margin-top:auto;padding-top:6px;font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;gap:6px;align-items:center} .rel-more span{transition:transform .2s ease} .rel-card:hover .rel-more span{transform:translateX(4px)} @media(max-width:960px){.rel-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.rel-grid{grid-template-columns:1fr}} /* Single-episode story body: restore paragraph rhythm (global *{margin:0} flattens it) */ .elementor-widget-theme-post-content .elementor-widget-container{color:var(--ink-dim);font-size:1.05rem;line-height:1.75} .elementor-widget-theme-post-content p{margin:0 0 1.15em;max-width:72ch} .elementor-widget-theme-post-content p:last-child{margin-bottom:0} .elementor-widget-theme-post-content h2,.elementor-widget-theme-post-content h3,.elementor-widget-theme-post-content h4{font-family:"Fraunces",serif;font-weight:500;color:var(--ink);line-height:1.2;margin:1.8em 0 .6em} .elementor-widget-theme-post-content ul,.elementor-widget-theme-post-content ol{margin:0 0 1.15em;padding-left:1.4em} .elementor-widget-theme-post-content li{margin:0 0 .5em;line-height:1.65} .elementor-widget-theme-post-content li:last-child{margin-bottom:0} .elementor-widget-theme-post-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .elementor-widget-theme-post-content blockquote{margin:1.4em 0;padding-left:1.1em;border-left:2px solid var(--accent);color:var(--ink);font-style:italic} .elementor-widget-theme-post-content strong{color:var(--ink);font-weight:600} /* Related section: standalone full-width section, inner wrap matches main content (1200px + 24px pad) */ .rel-host{display:block;width:100%} .rel-strip{display:block;width:100%;border-top:1px solid var(--line)} .rel-strip .rel-wrap{box-sizing:border-box;width:100%;max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px} .elementor-element-sgrelated01{display:block !important;width:100%} /* Hero glow: match Lovable (static 640 circle, top-right) */ .hero-glow.glow-orb{top:-128px;right:-128px;width:640px;height:640px;border-radius:50%;opacity:.30;filter:blur(64px);background-image:linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%)} .hero-glow{animation:none!important} /* hero-art tweak (owner-supplied) */ .hero-art{transform:translateX(-33px);max-width:353px;animation:etdArtBob 6s ease-in-out infinite} /* hero-art gentle bob (keeps -33px X offset) */ @keyframes etdArtBob{0%,100%{transform:translate(-33px,0)}50%{transform:translate(-33px,-4px)}} @media(prefers-reduced-motion:reduce){.hero-art{animation:none}} /* remove bob from mic icon (keep hero-art bob) */ .ep-mic{animation:none!important} /* +JOURNAL 2026-06-09 : single post + archive (reuse .rel-* cards) */ .jrn-single{padding-top:34px}.jrn-wrap{max-width:820px}.jrn-back{display:inline-block;margin-bottom:22px;color:var(--ink-dim);text-decoration:none}.jrn-back:hover{color:var(--accent)}.jrn-head{margin-bottom:26px}.jrn-meta{display:block;margin-bottom:14px}.jrn-title{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.06}.jrn-hero{margin:0 0 30px}.jrn-hero-img{width:100%;height:auto;border-radius:20px;display:block}.jrn-body{color:var(--ink-dim);font-size:1.075rem;line-height:1.75}.jrn-body p{margin:0 0 1.2em}.jrn-body p:last-child{margin-bottom:0}.jrn-body h2{font-family:"Fraunces",serif;font-weight:300;color:var(--ink);font-size:1.6rem;line-height:1.2;margin:1.6em 0 .5em}.jrn-body h3{font-family:"Fraunces",serif;font-weight:300;color:var(--ink);font-size:1.3rem;margin:1.4em 0 .4em}.jrn-body ul,.jrn-body ol{margin:0 0 1.2em;padding-left:1.3em}.jrn-body li{margin:.4em 0}.jrn-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.jrn-body blockquote{margin:1.4em 0;padding-left:1.1em;border-left:2px solid var(--accent);color:var(--ink);font-style:italic}.jrn-end{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}.jrn-archive{padding-top:30px}.jrn-archive-head{margin-bottom:40px;max-width:680px}.jrn-archive-head .mono{display:block;margin-bottom:12px}.jrn-archive-sub{color:var(--ink-dim);font-size:1.05rem;margin-top:14px} /* +HERO-ART-MOBILE 2026-06-11 : centre + scale the hero art on mobile (kill desktop offset/bob, keep chip+mic visible with even padding) */ @media(max-width:880px){ .hero-art{transform:none !important;animation:none} .art-card{margin-left:auto;margin-right:auto} } @media(max-width:600px){ .hero-art{margin-top:44px} .art-card{max-width:min(300px,calc(100vw - 96px))} } /* +MOBILE-GUTTERS 2026-06-11 : consistent 20px content gutter on mobile + tighter card padding */ @media(max-width:600px){ .wrap{padding-left:20px;padding-right:20px} .room{padding:24px 22px} .tile{padding:22px} .aw-tc{padding:24px 22px} .rel-body{padding:18px 18px 20px} #sg-body{padding-left:20px;padding-right:20px} .sg-body{padding-left:20px;padding-right:20px} } /* +ABOUT-MOBILE-GUTTERS 2026-06-11 : the About atomic sections don't use .wrap; override their side padding on mobile */ @media(max-width:600px){.s-ab-sec{padding-left:20px !important;padding-right:20px !important}.s-ab-kw{padding-left:20px !important;padding-right:20px !important}.s-ab-support{padding-left:20px !important;padding-right:20px !important}.s-ab-txt{padding-left:0 !important;padding-right:0 !important}.s-ab-portrait{padding:16px !important}} /* +ATOMIC-GRID-MOBILE 2026-06-11 : collapse atomic grids with no mobile rule to 1 column (incl. testimonials) */ @media(max-width:768px){.s-na-head,.s-na-rooms,.s-ab-tgrid,.s-ct-grid{grid-template-columns:1fr !important}} /* +ABOUT-PORTRAIT-MOBILE 2026-06-11 : image at natural ratio, drop the frame padding + big top gap */ @media(max-width:768px){ .s-ab-portrait{aspect-ratio:auto !important;padding:0 !important;background:transparent !important;border:0 !important} .s-ab-sec{padding-top:36px !important} } /* +ABOUT-SECTION-RHYTHM 2026-06-11 : the atomic About sections use a different padding system than the site's .sec-pad sections -> normalise their vertical padding to match (96 desktop / 56 mobile) so they line up with 'Three doors' and each other. Supersedes the earlier one-off 36px top. */ .s-ab-sec,.s-ab-kw,.s-ab-support{padding-top:96px !important;padding-bottom:96px !important} @media(max-width:600px){ .s-ab-sec,.s-ab-kw,.s-ab-support{padding-top:56px !important;padding-bottom:56px !important} } /* +LIGHT-HERO-GLOW-OFF 2026-06-11 : remove the colourful radial glow orb from the hero on LIGHT theme only (dark keeps it) */ :root[data-theme="light"] .hero-glow{display:none !important} /* +BUILD 2026-07-02 EXPLORE CTA (01B, between lead story and studio) */ .ec-sec{padding-top:0;border-top:0} .explore-cta{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:stretch;overflow:hidden;border:1px solid transparent;border-radius:26px;padding:40px 40px 40px 70px;background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%) border-box} .explore-cta .sec{font-size:47px;margin:0 0 12px} .ec-sub{font-family:"Fraunces",Georgia,serif;font-weight:360;font-size:clamp(19px,2.1vw,26px);margin:0 0 16px} .ec-sub .accent em{font-style:italic} .ec-copy{align-self:center}.ec-body{color:var(--ink-dim);font-size:17px;line-height:1.6;max-width:46ch;margin:0 0 26px} .ec-btn{border:2px solid transparent;color:var(--ink);background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(100deg,var(--coral) 0%,var(--pink) 50%,var(--violet) 100%) border-box;margin-top:0;width:auto;flex:0 0 auto} .ec-btn:hover{transform:translateY(-1px)} .ec-art{margin:-40px -40px -40px 0;overflow:hidden;border-radius:0 26px 26px 0;position:relative} .ec-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;display:block} [data-theme="light"] .ec-art img{filter:invert(1) hue-rotate(180deg)} .ec-ph{aspect-ratio:16/10;border-radius:18px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;background:radial-gradient(closest-side at 30% 40%,color-mix(in oklab,var(--violet) 14%,transparent),transparent 70%),radial-gradient(closest-side at 75% 65%,color-mix(in oklab,var(--pink) 12%,transparent),transparent 70%)} .ec-ph:after{content:"Artwork to follow";font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)} @media(max-width:920px){.explore-cta{grid-template-columns:1fr;padding:40px 28px;gap:30px}.ec-art{margin:0 -28px -40px -28px;border-radius:0;position:static}.ec-art img{position:static;height:auto;object-fit:contain}} /* +BUILD 2026-07-02 GUEST INVITE POPUP (home, 65% scroll) */ .gp-backdrop{position:fixed;inset:0;background:rgba(8,7,12,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;z-index:9998} .gp-backdrop.open{opacity:1;visibility:visible;pointer-events:auto} .gp-pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);width:min(695px,calc(100vw - 36px));border:1px solid transparent;border-radius:24px;padding:38px 40px 34px;z-index:9999;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,transform .3s,visibility .3s;box-shadow:var(--shadow);background:linear-gradient(var(--paper),var(--paper)) padding-box,linear-gradient(120deg,var(--violet),var(--pink)) border-box} .gp-pop.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%)} .gp-pop h3{font-size:clamp(26px,3.2vw,36px);margin:12px 0 12px;color:var(--ink)} .gp-pop p{color:var(--ink-dim);font-size:15.5px;line-height:1.6;margin:0 0 22px} .gp-row{display:flex;gap:12px;flex-wrap:wrap} .gp-row .btn{flex:0 0 auto;width:auto;margin-top:0} .gp-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--ink-dim);font-size:26px;line-height:1;cursor:pointer;padding:6px} .gp-x:hover{color:var(--ink)} @media(max-width:600px){.gp-pop{padding:28px 22px 24px}} /* +JOURNAL-SINGLE-REBUILD 2026-07-06 : two-column layout, sticky sidebar (episode-style), TOC + recent cards */ .jrn-single{position:relative} .jrn-shell{max-width:1200px} .jrn-hero-head{margin-bottom:22px} .jrn-hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-dim);margin-bottom:16px} .jrn-hero-meta .jrn-hero-cat{color:var(--accent)} .jrn-hero-meta .jrn-hero-dot{opacity:.5} .jrn-single .jrn-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start} .jrn-single .jrn-grid .jrn-body{max-width:none} .jrn-side-inner{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px} .jrn-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--paper)} .jrn-card-k{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:14px} .jrn-cta-p{color:var(--ink-dim);font-size:.95rem;line-height:1.6;margin:0 0 16px} .jrn-cta .btn{width:100%;justify-content:center;margin-top:0} .jrn-toc-list{display:flex;flex-direction:column;gap:2px} .jrn-toc-a{color:var(--ink-dim);text-decoration:none;font-size:.92rem;line-height:1.4;padding:6px 0;border-left:2px solid transparent;padding-left:12px;margin-left:-2px;transition:color .2s,border-color .2s} .jrn-toc-a:hover{color:var(--accent);border-color:var(--accent)} .jrn-toc-h3{padding-left:24px;font-size:.86rem} .jrn-recent-list{display:flex;flex-direction:column;gap:14px} .jrn-recent-item{display:flex;gap:12px;align-items:center;text-decoration:none} .jrn-recent-thumb{flex:0 0 54px;width:54px;height:54px;border-radius:10px;background-size:cover;background-position:center;background-color:color-mix(in oklab,var(--violet) 12%,transparent)} .jrn-recent-tx{display:flex;flex-direction:column;gap:3px} .jrn-recent-d{font-size:10px;letter-spacing:.1em;color:var(--ink-dim)} .jrn-recent-h{font-family:"Fraunces",serif;font-weight:300;color:var(--ink);font-size:.98rem;line-height:1.25} .jrn-recent-item:hover .jrn-recent-h{color:var(--accent)} @media(max-width:900px){.jrn-single .jrn-grid{grid-template-columns:1fr;gap:36px}.jrn-single .jrn-side-inner{position:static}} /* +JOURNAL-HERO-SPLIT 2026-07-06 : 50/50 hero (title left, image right), fix image size, sticky match episode (111px), anchor prev/next to hero */ .jrn-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:40px} .jrn-hero-split .jrn-hero-copy{min-width:0} .jrn-hero-split .jrn-hero{margin:0} .jrn-hero-split .jrn-hero-img{width:100%;height:380px;object-fit:cover;border-radius:20px;display:block} .jrn-single .jrn-side-inner{top:111px;inset-block-start:111px} /* prev/next: anchor to hero band, not whole-article centre. JS sets --jrn-pn-top; fallback keeps them near the top. */ .jrn-single .etd-pn{top:var(--jrn-pn-top,240px)} @media(max-width:900px){.jrn-hero-split{grid-template-columns:1fr;gap:24px}.jrn-hero-split .jrn-hero-img{height:300px}} /* +JOURNAL-PN-ZINDEX 2026-07-06 : lift prev/next tabs above hero image + title (wrap is static so z-index there is ignored) */ .jrn-single{z-index:1} .jrn-single .etd-pn-wrap{position:relative;z-index:20} .jrn-single .etd-pn{z-index:20} /* +JOURNAL-HERO-UNIFORM 2026-07-06 : fixed hero row height so body start point is identical across posts (no layout jump) */ .jrn-hero-split{min-height:380px} .jrn-hero-split .jrn-hero-copy{align-self:center} .jrn-hero-split .jrn-hero{align-self:center} @media(max-width:900px){.jrn-hero-split{min-height:0}} /* +JOURNAL-STICKY-FIX 2026-07-06 : grid align-items:start makes .jrn-side shrink to content, leaving sticky no travel room. Stretch the cell so the sticky inner can travel the article height. */ .jrn-single .jrn-side{align-self:stretch} .jrn-single .jrn-side-inner{position:-webkit-sticky;position:sticky} /* +JOURNAL-RELATED-BORDER 2026-07-06 : remove divider above related strip on journal singles (kept on episodes). rel-strip is inside article.jrn-single. */ .jrn-single .rel-strip{border-top:0} /* Testimonial corner paw — 2026-07-06 (same paw as quiz toggle, upright) */ .co-quote{position:relative} .co-quote::after{content:'';position:absolute;right:16px;bottom:14px;width:50px;height:50px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain; background-color:#8a8896;opacity:.22;pointer-events:none;transform:rotate(-14deg);transition:background-color .3s ease,opacity .3s ease} /* About-page testimonial paw (s-ab-card atomic cards) — match co-quote paw 2026-07-06 */ .s-ab-card{position:relative} .s-ab-card::after{content:'';position:absolute;right:20px;bottom:18px;width:50px;height:50px;-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain; background-color:#8a8896;opacity:.22;pointer-events:none;transform:rotate(-14deg);transition:background-color .3s ease,opacity .3s ease} /* About support CTA inline-right + tighten footer note 2026-07-06 */ @media(min-width:900px){ .s-ab-support-in{display:grid !important;grid-template-columns:1fr auto;column-gap:48px;align-items:center} .s-ab-support-in > .elementor-element-ab-support-eye, .s-ab-support-in > .elementor-element-ab-support-h, .s-ab-support-in > .elementor-element-ab-support-body{grid-column:1} .s-ab-support-in > .elementor-element-ab-support-cta{grid-column:2;grid-row:1 / span 3;align-self:center;justify-self:end;margin:0} .s-ab-support-in > .elementor-element-ab-support-cta > div{margin-top:0 !important} } /* Testimonial paw hover -> pink 2026-07-06 */ .co-quote:hover::after,.s-ab-card:hover::after{background-color:#e6157f;opacity:.27} /* Remove double border under header (first section duplicates header's bottom border) 2026-07-06 */ #content > .elementor > section:first-of-type{border-top:0} #content .elementor-element:first-child > section:first-of-type{border-top:0} /* Testimonial hover: replicate mega-card hover (lift + shadow + gradient ring) 2026-07-06 */ .co-quote,.s-ab-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .co-quote:hover,.s-ab-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 20px 46px -24px rgba(0,0,0,.6)} .co-quote::before,.s-ab-card::before{content:'';position:absolute;inset:0;padding:1px;background:linear-gradient(125deg,var(--coral),var(--pink),var(--violet));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s ease;pointer-events:none} .co-quote::before{border-radius:18px} .s-ab-card::before{border-radius:16px} .co-quote:hover::before,.s-ab-card:hover::before{opacity:1} /* +BUILD 2026-07-08 ABOUT STORY (How this began) */ .about-story{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)} .about-story > .mono{display:block;margin-bottom:20px} .as-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px} .as-cols p{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-dim)} .as-cols em{color:var(--ink);font-style:italic} .as-stat{display:grid;grid-template-columns:auto auto 1fr;gap:32px;align-items:center;margin:36px 0;padding:26px 30px;border:1px solid var(--line);border-radius:18px;background:var(--card)} .as-stat-item{display:flex;flex-direction:column;gap:5px} .as-num{font-family:"Fraunces",serif;font-weight:500;font-size:2rem;line-height:1;background-image:linear-gradient(100deg,var(--coral),var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .as-lab{font-size:13px;line-height:1.5;color:var(--ink-dim);max-width:240px} .as-for{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)} .as-quote{margin:0;font-family:"Fraunces",serif;font-weight:400;font-size:1.45rem;line-height:1.5;color:var(--ink);max-width:900px} @media(max-width:880px){.as-cols{grid-template-columns:1fr;gap:18px}.as-stat{grid-template-columns:1fr;gap:20px;align-items:start}.as-lab{max-width:none}} .stats-band .as-stat{margin:0} .stats-band{border-top:0;padding:56px 0} .stats-band .as-for .accent{padding-inline-end:.08em} .lead-sec{padding-bottom:10px} /* Profile banner — premium overlay strip across the bottom of Diana's portrait */ .about .portrait{position:relative} .profile-banner{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:stretch;padding:11px 10px 10px;background:linear-gradient(to top,color-mix(in srgb,var(--btn-dark) 88%,transparent) 0%,color-mix(in srgb,var(--btn-dark) 78%,transparent) 62%,transparent 100%);border-top:1px solid rgba(255,255,255,.30);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;z-index:2} .pb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;line-height:1;text-decoration:none;transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease} .pb-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);transform:translateY(-2px)} .pb-ico{width:17px;height:17px;flex-shrink:0} .pb-label{white-space:nowrap} .pb-btn.pb-primary{flex:0 0 auto;border:2px solid transparent;background:linear-gradient(color-mix(in srgb,var(--btn-dark) 55%,transparent),color-mix(in srgb,var(--btn-dark) 55%,transparent)) padding-box,linear-gradient(100deg,var(--coral),var(--pink),var(--violet)) border-box;color:#fff;font-weight:700;box-shadow:none} .pb-btn.pb-primary:hover{background:linear-gradient(color-mix(in srgb,var(--btn-dark) 40%,transparent),color-mix(in srgb,var(--btn-dark) 40%,transparent)) padding-box,linear-gradient(100deg,var(--coral),var(--pink),var(--violet)) border-box;box-shadow:0 8px 20px -10px color-mix(in srgb,var(--pink) 70%,transparent);transform:translateY(-2px)} @media(max-width:520px){.pb-btn .pb-label{display:none}.pb-btn{flex:1;min-height:46px}.pb-btn.pb-primary{flex:1}} /* +TESTIMONIAL-NAME-LEFT 2026-07-09 : figcaption back to left (s-co-sec text-align:center was leaking) */ .co-quote figcaption{text-align:left;} /* +COACHING-TITLE-HIERARCHY 2026-07-12 : hero h1 was small (size rule is h2.sec only); make hero largest, scope body section h2 smaller inside .mmb/.mmbody */ .mm-hero h1.sec.display{font-size:clamp(2.8rem,5.5vw,4.4rem);line-height:.95;} .mmb h2.sec.display,.mmbody h2.sec.display{font-size:clamp(1.85rem,3.2vw,2.7rem);line-height:1.02;} /* +AB-TGRID-ORPHAN 2026-07-15 : lone last testimonial spans the full row (About page) */ .page-id-58 .co-quotes .co-quote:last-child:nth-child(odd){grid-column:1/-1}