Code

/* =====================================================
   ISAK VIDINGHOFF – MIDDLE‑PATH LIGHT THEME
   Purpose: calm editorial container for reflective study
   Fonts: Clockwise (headings) / Inter (body)
   ===================================================== */

/* ---------------------------------
   COLOR & TYPOGRAPHY TOKENS
--------------------------------- */
:root {
  --brand-teal: #7FBEC5;
  --brand-teal-dark: #1B6A73;
  --brand-cream-bg: #FBF4EE;
  --brand-deep: #192035;

  --surface-white: #FFFFFF;
  --surface-muted: #F8FAFB;

  --font-head: "Clockwise", Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;

  --radius: 12px;
  --shadow: 0 4px 12px rgba(25,32,53,0.06);
  --transition: 0.18s ease;
}

/* ---------------------------------
   BASE
--------------------------------- */
html, body {
  color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background: var(--surface-white);
  margin: 0;
  padding: 0;
}

p, li {
  margin-bottom: 1em;
  text-wrap: pretty;
}

a {
  color: var(--brand-teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
a:hover,
a:focus {
  color: var(--brand-teal);
  text-decoration-color: var(--brand-teal);
  outline: none;
}

/* ---------------------------------
   HEADINGS
--------------------------------- */
h1, h2, h3,
.notion-heading,
.notion-header .notion-title {
  font-family: var(--font-head) !important;
  color: var(--brand-deep);
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  font-weight: 700;
}
h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  line-height: 1.25;
  font-weight: 600;
  margin-top: 2em;
}
h3 {
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 500;
  margin-top: 1.6em;
}

/* ---------------------------------
   NAVBAR — FROSTED & LIGHT
--------------------------------- */
.super-navbar {
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(25,32,53,.06);
  box-shadow: 0 2px 6px rgba(25,32,53,.04);
}
.super-navbar a {
  color: var(--brand-deep);
  font-weight: 500;
  transition: color var(--transition);
}
.super-navbar a:hover {
  color: var(--brand-teal-dark);
}

/* ---------------------------------
   CALLOUTS & CARDS
--------------------------------- */
.notion-callout,
.callout {
  background: var(--surface-muted);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(25,32,53,.05);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.notion-callout:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(25,32,53,.08);
}

.notion-collection-card,
.notion-collection .notion-collection-card {
  background: var(--surface-white);
  border: 1px solid rgba(25,32,53,.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.notion-collection-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-teal);
  box-shadow: 0 10px 24px rgba(25,32,53,.08);
}
.notion-collection-item-title {
  font-weight: 600;
}

/* ---------------------------------
   SECTION VARIANTS
--------------------------------- */
.section-cream,
.notion-bg-yellow {
  background: var(--brand-cream-bg);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  border: 1px solid rgba(232,192,163,0.1);
}

/* ---------------------------------
   BUTTONS
--------------------------------- */
.btn-primary,
a.button,
a[data-button="primary"] {
  display:inline-block;
  background: var(--brand-teal-dark);
  color:#fff !important;
  padding:.65rem 1rem;
  border-radius:10px;
  border:none;
  font-weight:600;
  text-decoration:none;
  transition: background var(--transition), transform var(--transition);
}
.btn-primary:hover,
a.button:hover {
  background: var(--brand-teal);
  transform: translateY(-2px);
}

.btn-ghost,
a[data-button="secondary"] {
  display:inline-block;
  background: transparent;
  color: var(--brand-deep);
  border:1px solid var(--brand-teal);
  padding:.6rem .9rem;
  border-radius:10px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-ghost:hover {
  background: rgba(127,190,197,0.08);
  transform: translateY(-1px);
}

/* ---------------------------------
   DIVIDERS & FOOTER
--------------------------------- */
hr, .notion-divider {
  border:none;
  border-top:1px solid rgba(25,32,53,0.08) !important;
  margin:2rem 0 !important;
}
footer {
  color:rgba(25,32,53,0.75);
  font-size:15px;
  line-height:1.6;
  padding:2rem 0;
  border-top:1px solid rgba(25,32,53,0.08);
}
footer a:hover {
  color:var(--brand-teal);
  text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--brand-teal);
}

/* ---------------------------------
   IMAGES
--------------------------------- */
img {
  border-radius: var(--radius);
  display:block;
  height:auto;
}

/* ---------------------------------
   RESPONSIVE
--------------------------------- */
@media (max-width:900px){
  :root { --radius:10px; }
  h1 { font-size:clamp(1.75rem,6vw,2.35rem); }
  h2 { font-size:clamp(1.3rem,4vw,1.6rem); }
  .notion-callout,
  .notion-collection-card { padding:1rem; }
  .super-navbar__content{ padding:0.4rem 1rem; }
}

/* ---------------------------------
   REDUCED MOTION
--------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;transform:none!important}
}

/* ---------------------------------
   FONT FACE
--------------------------------- */
@font-face {
  font-family: "Clockwise";
  src: url("https://randomtoolguy.github.io/isakvidinghoff.com/clockwise-regular.woff2") format("woff2"),
       url("https://randomtoolguy.github.io/isakvidinghoff.com/clockwise-regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family: "Clockwise";
  src: url("https://randomtoolguy.github.io/isakvidinghoff.com/clockwise-bold.woff2") format("woff2"),
       url("https://randomtoolguy.github.io/isakvidinghoff.com/clockwise-bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------------------------------
   EDITORIAL FOOTER (LIGHT THEME)
--------------------------------- */
:root .footer {
  background: var(--brand-deep);          /* deep‑blue base  */
  color: rgba(255,255,255,.75);
  padding: 3rem 0 2.5rem;
}
:root footer a {
  color: rgba(255,255,255,.88);
  text-decoration: none;
  transition: color .18s ease;
}
:root footer a:hover,
:root footer a:focus-visible {
  color: var(--brand-teal) !important;
  outline: none;
}
:root footer__list-heading {
  color: rgba(255,255,255,.9);
  font-weight: 600;
  margin-bottom: .4rem;
}
:root footer__link p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
:root footer__footnote {
  margin-top: 2rem;
  font-size: 14px;
  line-height: 1.6;
  opacity: .8;
}

/* ---------------------------------
   FOOTER — remove Super underline fully
--------------------------------- */
a.notion-link.super-footer__link,
a.notion-link.super-footer__link p {
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
}

a.notion-link.super-footer__link:hover,
a.notion-link.super-footer__link:focus-visible {
  color: var(--brand-teal) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove underline / focus ring from footer social icons */
.super-footer__icons a.notion-link {
  text-decoration: none !important;
  box-shadow: none !important;
}
.super-footer__icons a.notion-link:hover,
.super-footer__icons a.notion-link:focus-visible {
  color: var(--brand-teal) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
}

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5CBVVZ4S"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!--ScrollReveal-->
<script defer>
function initScrollReveal() {
if (typeof ScrollReveal === 'undefined') return;
ScrollReveal({ distance: '-50px' });
const selectors = [
'.notion-divider',
'.super-footer',
'.highlighted-background',
'.notion-collection',
'.notion-embed',
'.notion-quote',
'.notion-column',
'.notion-callout',
'.notion-heading',
'.notion-text',
'#fastcomments-widget',
'.notion-image'
];
selectors.forEach((selector) => {
if (document.querySelector(selector)) {
ScrollReveal().reveal(selector, { duration: 500 });
}
});
}
window.addEventListener('load', initScrollReveal);
window.addEventListener('super:navigation', initScrollReveal);
</script>

<!--Lottie Player-->
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.2.0/dist/lottie-player.js"></script>


<script>
/* isakvidinghoff.com — page tagging + index hero + inline email CTA (SPA-safe) */
(function(){
  const html = document.documentElement;

  /* ---------- CONFIG — EDIT THESE ---------- */
  const FORM_URL = "https://forms.isakvidinghoff.com/DF8hxE"; // ← REPLACE with your form URL
  const PAGES = { "/":"page-home", "/blog/":"blog-index", "/podcast/":"podcast-index" };
  const POSTS_PREFIX = "/blog/posts/";
  const EPISODE_PREFIX = "/podcast/episodes/";
  const INLINE_CTA_SELECTOR = '#isak-inline-optin'; // put a div with this id where you want CTA
  /* ----------------------------------------- */

  const isIdx = (p,pre)=> p===pre || p===pre.slice(0,-1);
  const isBlogPost = (p)=> p.startsWith(POSTS_PREFIX) && !isIdx(p,POSTS_PREFIX);
  const isEpisode  = (p)=> p.startsWith(EPISODE_PREFIX) && !isIdx(p,EPISODE_PREFIX);

  function applyPageTags(){
    const path = location.pathname.replace(/\/+$/,'/') || "/";
    Object.values(PAGES).forEach(c => html.classList.remove(c));
    if (PAGES[path]) html.classList.add(PAGES[path]);

    html.classList.toggle("reading-mode", isBlogPost(path));
    html.classList.toggle("episode-mode", isEpisode(path));
  }

  function ensureIndexHeroes(){
    const firstCallout = () =>
      document.querySelector('.notion-page-content .notion-callout, .super-content__page .notion-callout');
    if (html.classList.contains('blog-index')) {
      const co = firstCallout();
      if (co && !co.classList.contains('blog-index-hero')) co.classList.add('blog-index-hero');
    }
    if (html.classList.contains('podcast-index')) {
      const co = firstCallout();
      if (co && !co.classList.contains('podcast-hero')) co.classList.add('podcast-hero');
    }
  }

  function renderInlineCTA(){
    document.querySelectorAll(INLINE_CTA_SELECTOR).forEach(host=>{
      if (host.dataset.ctaRendered === "1") return;
      host.dataset.ctaRendered = "1";

      const loc  = new URL(location.href);
      const path = loc.pathname;
      const h1   = document.querySelector('h1')?.innerText?.trim();
      const pageTitle = (h1 || document.title || 'Isak Vidinghoff').trim();

      const isEp  = path.startsWith(EPISODE_PREFIX) && !isIdx(path, EPISODE_PREFIX);
      const isPod = path.startsWith('/podcast') && !isEp;
      const isBlog= path.startsWith('/blog');

      const label = isEp ? 'Receive episode notes by email' : isPod ? 'Follow new episodes by email' : isBlog ? 'Letters on Focus & Recovery' : 'Email Updates';
      const noteText = isEp ? 'Sent only when a new episode is released. You can unsubscribe anytime.' : isPod ? 'Occasional updates about new episodes. Unsubscribe anytime.' : isBlog ? 'Shared for reflection — not marketing. Unsubscribe anytime.' : 'Shared for reflection. Unsubscribe anytime.';

      const returnUrl = `${loc.origin}${path}?sub=thanks`;
      const qs = new URLSearchParams({ rmee4: pageTitle, zc6ai: returnUrl });
      const href = `${FORM_URL}?${qs.toString()}`;

      host.innerHTML = `
        <a href="${href}" class="isak-cta">${label}</a>
        <div class="isak-cta-note">${noteText}</div>
      `;
    });
  }

  function run(){
    applyPageTags();
    ensureIndexHeroes();
    renderInlineCTA();
  }

  if (document.readyState !== 'loading') run();
  else document.addEventListener('DOMContentLoaded', run);

  addEventListener('super:load',       run);
  addEventListener('super:navigation', run);
  addEventListener('pageshow', e => { if (e.persisted) run(); });
  addEventListener('popstate',         run);

  const debounced = (()=>{let t;return ()=>{clearTimeout(t);t=setTimeout(run,80);};})();
  new MutationObserver(debounced).observe(document.documentElement, { childList:true, subtree:true });
})();
</script>

<!-- isakvidinghoff.com — page-tagging, inline CTA, latest-episode, sharebar (isized bundle) -->
<script>
(function(){
  const html = document.documentElement;

  /* ---------- CONFIG - EDIT THESE ---------- */
  const FORM_URL = "https://forms.isakvidinghoff.com/DF8hxE"; // <-- your form URL
  const RSS_URL  = ""; // optional: podcast RSS (e.g. "https://isakvidinghoff.com/podcast/episodes.rss")
  const TRAILER_ID = ""; // optional PodOps trailer id (leave empty if not used)
  const PAGES = { "/":"page-home", "/blog/":"blog-index", "/podcast/":"podcast-index" };
  const POSTS_PREFIX = "/blog/posts/";
  const EPISODE_PREFIX = "/podcast/episodes/";
  const INLINE_CTA_SELECTOR = '#isak-inline-optin'; // put a DIV with this id where you want the CTA
  const SHAREBAR_SELECTOR = '[data-sharebar]'; // mounts for sharebar
  const LATEST_SELECTOR = '[data-latest-episode]'; // mounts for latest episode
  /* ------------------------------------------ */

  const isIdx = (p,pre)=> p===pre || p===pre.slice(0,-1);
  const isBlogPost = (p)=> p.startsWith(POSTS_PREFIX) && !isIdx(p,POSTS_PREFIX);
  const isEpisode  = (p)=> p.startsWith(EPISODE_PREFIX) && !isIdx(p,EPISODE_PREFIX);

  /* ---------- page tagging ---------- */
  function applyPageTags(){
    const path = location.pathname.replace(/\/+$/,'/') || "/";
    Object.values(PAGES).forEach(c => html.classList.remove(c));
    if (PAGES[path]) html.classList.add(PAGES[path]);
    html.classList.toggle("reading-mode", isBlogPost(path));
    html.classList.toggle("episode-mode", isEpisode(path));
  }

  /* ---------- ensure index hero classes ---------- */
  function ensureIndexHeroes(){
    const firstCallout = () =>
      document.querySelector('.notion-page-content .notion-callout, .super-content__page .notion-callout');
    if (html.classList.contains('blog-index')) {
      const co = firstCallout();
      if (co && !co.classList.contains('blog-index-hero')) co.classList.add('blog-index-hero');
    }
    if (html.classList.contains('podcast-index')) {
      const co = firstCallout();
      if (co && !co.classList.contains('podcast-hero')) co.classList.add('podcast-hero');
    }
  }

  /* ---------- Inline email CTA renderer ---------- */
  function renderInlineCTA(){
    document.querySelectorAll(INLINE_CTA_SELECTOR).forEach(host=>{
      if (!host) return;
      if (host.dataset.ctaRendered === "1") return;
      host.dataset.ctaRendered = "1";

      const loc  = new URL(location.href);
      const path = loc.pathname;
      const h1   = document.querySelector('h1')?.innerText?.trim();
      const pageTitle = (h1 || document.title || 'Isak Vidinghoff').trim();

      const isEp  = path.startsWith(EPISODE_PREFIX) && !isIdx(path, EPISODE_PREFIX);
      const isPod = path.startsWith('/podcast') && !isEp;
      const isBlog= path.startsWith('/blog');

      // label & note logic (customize text here)
      const label = isEp ? 'Receive episode notes by email' : isPod ? 'Follow new episodes by email' : isBlog ? 'Letters on Focus & Recovery' : 'Email Updates';
      const noteText = isEp ? 'Sent for new episodes only. Unsubscribe anytime.' : isPod ? 'Occasional episode updates. Unsubscribe anytime.' : isBlog ? 'Letters, reflections—no spam. Unsubscribe anytime.' : 'Unsubscribe anytime.';

      const returnUrl = `${loc.origin}${path}?sub=thanks`;
      const qs = new URLSearchParams({ rmee4: pageTitle, zc6ai: returnUrl });
      const href = `${FORM_URL}?${qs.toString()}`;

      host.innerHTML = `
        <a href="${href}" class="isak-cta btn btn--brand" aria-label="${label}">${label}</a>
        <div class="isak-cta-note" style="margin-top:.45rem;opacity:.85">${noteText}</div>
      `;
    });
  }

  /* ---------- Latest episode (RSS) renderer ---------- */
  const LATEST_SELECT = LATEST_SELECTOR;
  let cachedEpisode = null;
  let rssInFlight = null;

  function parseRSS(xml){
    try {
      const doc  = new DOMParser().parseFromString(xml, "text/xml");
      const item = doc.querySelector("channel > item");
      if (!item) return null;
      const enc  = item.querySelector("enclosure[url]");
      return {
        title   : item.querySelector("title")?.textContent?.trim() || "",
        link    : item.querySelector("link")?.textContent?.trim()  || "#",
        pubDate : item.querySelector("pubDate")?.textContent       || "",
        audioUrl: enc?.getAttribute("url") || ""
      };
    } catch (e) {
      return null;
    }
  }

  function renderLatestInto(mount, ep){
    if (!mount || mount.dataset.latestRendered === "1") return;
    mount.dataset.latestRendered = "1";
    if (!ep) {
      // fallback trailer/placeholder
      mount.innerHTML = '<div class="latest-wrap"><span class="badge">Latest Episode</span><div class="latest-title">No episode found</div></div>';
      return;
    }
    const date = ep.pubDate ? new Date(ep.pubDate).toLocaleDateString() : "";
    mount.innerHTML =
      `<div class="latest-wrap">
         <span class="badge">Latest Episode</span>
         <h3 class="latest-title"><a href="${ep.link||'#'}" target="_blank" rel="noopener">${ep.title||'Latest episode'}</a></h3>
         <div class="latest-meta">${date}</div>
         ${ep.audioUrl ? `<audio class="latest-audio" controls preload="none" src="${ep.audioUrl}" aria-label="Play latest"></audio>` : ''}
       </div>`;
  }

  function fetchLatest(){
    if (!RSS_URL) return Promise.resolve(null);
    if (cachedEpisode !== null) return Promise.resolve(cachedEpisode);
    if (rssInFlight) return rssInFlight;

    const ctrl = new AbortController(); setTimeout(()=>ctrl.abort(), 6000);
    rssInFlight = fetch(RSS_URL, {
      headers:{ "Accept":"application/rss+xml, application/xml, text/xml" },
      signal: ctrl.signal
    })
    .then(r => r.ok ? r.text() : Promise.reject())
    .then(xml => (cachedEpisode = parseRSS(xml)))
    .catch(() => (cachedEpisode = null))
    .finally(() => { rssInFlight = null; });

    return rssInFlight;
  }

  function renderAllLatest(){
    const mounts = document.querySelectorAll(LATEST_SELECT);
    if (!mounts.length) return Promise.resolve();
    return fetchLatest().then(ep => mounts.forEach(m => ep ? renderLatestInto(m, ep) : renderLatestInto(m, null))).catch(()=> mounts.forEach(m => renderLatestInto(m, null)));
  }

  /* ---------- Sharebar builder ---------- */
  const SHAREBAR_SELECT = SHAREBAR_SELECTOR;

  function currentPageUrl(){
    const canonical = document.querySelector('link[rel="canonical"]')?.href;
    return canonical || location.href;
  }

  function openPopup(href){
    const w=680,h=540,l=(screen.width-w)/2,t=(screen.height-h)/2;
    window.open(href,'share','width='+w+',height='+h+',left='+l+',top='+t+',noopener');
  }

  function buildSharebar(mount){
    if(!mount) return;
    // always rebuild (pick up updated page URL after soft nav)
    mount.innerHTML = '';
    const pageUrl = currentPageUrl();
    const encUrl  = encodeURIComponent(pageUrl);
    const title   = mount.dataset.title || document.title || 'Isak Vidinghoff';
    const encText = encodeURIComponent(title);
    const via     = mount.dataset.via || 'isakv';

    const endpoints = {
      x:        () => `https://twitter.com/intent/tweet?url=${encUrl}&text=${encText}&via=${via}`,
      linkedin: () => `https://www.linkedin.com/sharing/share-offsite/?url=${encUrl}`,
      facebook: () => `https://www.facebook.com/sharer/sharer.php?u=${encUrl}`,
      reddit:   () => `https://www.reddit.com/submit?url=${encUrl}&title=${encText}`,
      whatsapp: () => `https://api.whatsapp.com/send?text=${encText}%20${encUrl}`,
      email:    () => `mailto:?subject=${encText}&body=${encText}%0A${encUrl}`,
      copy:     'copy'
    };

    const list = (mount.dataset.platforms || 'x,linkedin,facebook,reddit,whatsapp,email,copy')
      .split(',').map(s=>s.trim().toLowerCase()).filter(Boolean);

    const frag = document.createDocumentFragment();

    // optional native share if available (mobile)
    if (navigator.share && !list.includes('copy') && !list.includes('email')) {
      const btn = document.createElement('button');
      btn.type='button';
      btn.textContent='Share';
      btn.setAttribute('aria-label','Share');
      btn.addEventListener('click', ()=>navigator.share({ title, url: pageUrl }).catch(()=>{}));
      frag.appendChild(btn);
    }

    list.forEach(p=>{
      if (p === 'copy') {
        const copy = document.createElement('button');
        copy.type='button';
        copy.textContent='Copy link';
        copy.setAttribute('aria-label','Copy link');
        copy.addEventListener('click', async ()=>{
          try {
            await navigator.clipboard.writeText(pageUrl);
            copy.textContent='Copied!';
            copy.classList.add('copy-ok');
            setTimeout(()=>{ copy.textContent='Copy link'; copy.classList.remove('copy-ok'); }, 1400);
          } catch(_) {}
        });
        frag.appendChild(copy);
        return;
      }
      const make = endpoints[p];
      if (!make) return;
      const href = typeof make === 'function' ? make() : make;
      const a = document.createElement('a');
      a.href = href;
      a.target = '_blank';
      a.rel = 'noopener nofollow';
      a.textContent = p.charAt(0).toUpperCase() + p.slice(1);
      a.setAttribute('aria-label', 'Share on ' + p);
      a.addEventListener('click', (e)=>{
        if (!navigator.share && p !== 'email') {
          e.preventDefault();
          openPopup(href);
        }
      });
      frag.appendChild(a);
    });

    mount.appendChild(frag);
  }

  function renderSharebars(){
    document.querySelectorAll(SHAREBAR_SELECT).forEach(buildSharebar);
  }

  /* ---------- start / orchestration ---------- */
  function run(){
    applyPageTags();
    ensureIndexHeroes();
    renderInlineCTA();
    renderSharebars();
    renderAllLatest().catch(()=>{});
  }

  if (document.readyState !== 'loading') run();
  else document.addEventListener('DOMContentLoaded', run);

  addEventListener('super:load',       run);
  addEventListener('super:navigation', run);
  addEventListener('pageshow', e => { if (e.persisted) run(); });
  addEventListener('popstate',         run);

  const debounced = (()=>{let t;return ()=>{clearTimeout(t);t=setTimeout(run,80);};})();
  new MutationObserver(debounced).observe(document.documentElement, { childList:true, subtree:true });

  // Expose a manual hook if needed
  window.ISAK = window.ISAK || {};
  window.ISAK.renderSharebars = renderSharebars;
  window.ISAK.renderLatestEpisodes = renderAllLatest;
  window.ISAK.renderInlineCTAs = renderInlineCTA;
})();
</script>

/* ---------- ISAKVIDINGHOFF.COM - "isized" CSS (paste into custom CSS) ---------- */
/* Tokens & fonts */
:root{
  --brand-teal: #7FBEC5;
  --brand-teal-dark: #1B6A73;
  --brand-cream: #E8C0A3;
  --brand-cream-bg: #FBF4EE;
  --brand-deep: #192035;
  --primary-font: "Clockwise", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --secondary-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --reading-max: 70ch;
  --base-size: 19px;
  --radius: 12px;
  --cta-radius: 10px;
}

/* Font-face (adjust if you host fonts elsewhere) */
@font-face { font-family: "Clockwise"; src: url("https://randomtoolguy.github.io/isakvidinghoff.com/clockwise-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Clockwise"; src: url("https://randomtoolguy.github.io/isakvidinghoff.com/clockwise-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Base reading area */
.notion-page-content { max-width: var(--reading-max); margin-inline: auto; }
.notion-text, .notion-page-content { font-size: var(--base-size); line-height: 1.65; font-family: var(--secondary-font); color: var(--brand-deep); }
.notion-divider { border-bottom: none !important; margin: 2em 0 !important; }

/* Headings */
.notion-page-title, .notion-h1, .notion-h2, .notion-h3,
.notion-h1 .notion-semantic-string, .notion-h2 .notion-semantic-string, .notion-h3 .notion-semantic-string {
  font-family: var(--primary-font) !important;
  color: var(--brand-deep) !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing:antialiased;
}
.notion-page-title, .notion-h1 { font-weight:700; font-size: clamp(2rem, 4.5vw, 2.75rem); line-height:1.15; margin: 0 0 .6rem; }
.notion-h2 { font-weight:600; font-size: clamp(1.375rem, 2.2vw, 1.9rem); line-height:1.2; margin-top:2rem; position:relative; padding-top:.35rem; }
.notion-h2::before { content:""; position:absolute; top:0; left:0; width:56px; height:4px; background:var(--brand-teal); border-radius:2px; }
.notion-h3 { font-weight:700; font-size:.95rem; margin-top:1.25rem; opacity:.95; }

/* Links & CTA button rules */
a, .notion-page a { color: var(--brand-teal-dark); text-decoration: underline; text-underline-offset: 3px; transition: color .15s ease; }
a:hover, a:focus { color: var(--brand-teal); }
:root a:focus-visible { outline:3px solid rgba(27,106,115,0.14); outline-offset:3px; border-radius:6px; }

/* Button primitives */
.btn { display:inline-block; padding:.65rem 1rem; border-radius:999px; font-weight:600; text-decoration:none; line-height:1; transition:transform .12s ease; }
.btn--brand { background: linear-gradient(180deg,var(--brand-teal) 0%, var(--brand-teal-dark) 100%); color:#fff; border:none; box-shadow: 0 10px 22px rgba(27,106,115,0.08); }
.btn--brand:hover { transform: translateY(-1px); }

/* Promote highlighted backgrounds to buttons */
a.notion-link.link:has(span[style*="background"]),
.highlighted-background:has(> a.notion-link.link:only-child),
.highlighted-background:has(> *:only-child > a.notion-link.link:only-child) {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:.62rem .95rem !important; border-radius:var(--cta-radius) !important;
  background: linear-gradient(180deg,var(--brand-teal) 0%, var(--brand-teal-dark) 100%) !important;
  color:#fff !important; text-decoration:none !important; font-weight:700 !important;
}

/* Keep inline paragraph links inline */
.notion-text a.notion-link.link,
.notion-text p a,
.notion-page-content p a { display:inline !important; padding:0 !important; background:none !important; box-shadow:none !important; color:var(--brand-teal-dark) !important; text-decoration:underline !important; }

/* Callouts / cards */
.notion-callout, .callout { background: #fff; border-radius:var(--radius); padding:1.05rem 1.2rem; box-shadow: 0 6px 18px rgba(25,32,53,0.04); border:1px solid rgba(25,32,53,0.03); }
.notion-collection-card { background:#fff; border-radius:var(--radius); padding:.9rem; box-shadow: 0 18px 30px rgba(25,32,53,0.06); border:1px solid rgba(25,32,53,0.04); transition:transform .15s ease; }
.notion-collection-card:hover { transform:translateY(-6px); box-shadow:0 24px 36px rgba(25,32,53,0.08); }
.notion-collection-card .notion-collection-item-title { font-weight:700; color:var(--brand-deep); }

/* cream section helper */
.notion-bg-yellow, .notion-block .notion-block--bg-yellow, .section-cream, .super-page-section--cream {
  background: linear-gradient(180deg,var(--brand-cream-bg),var(--brand-cream-bg)); border-radius:var(--radius); padding:1.05rem 1.2rem; border:1px solid rgba(232,192,163,0.08);
}

/* Images / covers */
.notion-asset-wrapper img { border-radius:12px; display:block; height:auto; -webkit-mask-image:-webkit-radial-gradient(white, black); }
.notion-header__cover, .notion-header .notion-cover, .notion-collection__cover { position:relative !important; width:100% !important; overflow:hidden !important; border-radius:20px !important; box-shadow:0 14px 40px rgba(0,0,0,0.12) !important; }
.notion-header__cover img, .notion-header .notion-cover img { object-fit:cover !important; width:100% !important; height:100% !important; }

/* Small mobile tweaks */
@media (max-width:900px){
  :root { --radius:10px; --base-size:16px; }
  .notion-h1, .notion-page-title { font-size: clamp(1.75rem,6vw,2.25rem); }
  .notion-h2 { font-size: clamp(1.25rem,4vw,1.6rem); }
  .btn, .btn--brand { padding:.5rem .9rem; }
}

/* Force main layers above cover (fix Super theming oddities) */
:root .super-content__page, :root .notion-page-content, :root main, :root article { position:relative !important; z-index: 2 !important; }
:root .page-home .notion-callout:first-of-type { position: relative !important; z-index: 3 !important; }

/* latest / video styles used by script */
.latest-wrap{ padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,0.06); background: rgba(0,0,0,0.02); }
.latest-title { font-weight:700; margin:0 0 8px; }
.latest-meta { opacity:.85; margin:4px 0 10px; }
.latest-audio { width:100%; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; background:var(--brand-deep); color:var(--brand-cream-bg); font-weight:700; font-size:12px; margin-bottom:8px; }

/* small note style for CTA */
.isak-cta-note { font-size:.95rem; opacity:.85; margin-top:.35rem; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){ * { transition:none !important; animation:none !important; transform:none !important; } }