/*
Theme Name: I+O Interim
Theme URI: https://www.investorsandoperators.com
Description: Disposable interim theme for the Investors & Operators Squarespace->WordPress 1-for-1 platform migration. Reproduces the current site's look (visitor-identical, not pixel-perfect). The content model lives in the io-content-model mu-plugin so this theme can be swapped for the redesign later. DO NOT use design/redesign skills here — this is replication.
Author: 51 Labs (migration)
Version: 0.1.0
*/

/* ============================================================
   Fonts — self-hosted Poppins (captured from the live site).
   Live site uses Poppins via Adobe Typekit; we self-host the
   Google faces (sub-pixel render drift logged, not yet corrected).
   ============================================================ */
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/011_poppins-v20-latin-ext_latin-regular.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/009_poppins-v20-latin-ext_latin-500.woff2") format("woff2");}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/010_poppins-v20-latin-ext_latin-600.woff2") format("woff2");}

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --io-orange:#FBA803;
  --io-black:#0c0c0c;
  --io-ink:#1a1a1a;
  --io-white:#ffffff;
  --io-gray:#6b6b6b;
  --io-faint:#f3f3f3;
  --io-line:#e6e6e6;
  --io-maxw:1260px;
  --io-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--io-font);color:var(--io-ink);background:var(--io-white);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-weight:600;line-height:1.15;margin:0 0 .4em;}
.io-wrap{max-width:var(--io-maxw);margin:0 auto;padding:0 28px;}
.io-btn{display:inline-block;background:var(--io-orange);color:#111;font-weight:600;
  padding:14px 30px;border-radius:999px;font-size:15px;line-height:1;border:0;cursor:pointer;}
.io-btn:hover{filter:brightness(.95);text-decoration:none;}

/* ============================================================
   Header (navRight: logo left, nav right). Default = light.
   Home gets .io-header--overlay (transparent over dark hero).
   ============================================================ */
.io-header{position:relative;z-index:50;background:var(--io-white);}
.io-header .io-wrap{max-width:none;padding:0 56px;display:flex;align-items:center;justify-content:space-between;height:100px;gap:24px;}  /* near-full-width like live (logo x~58, pill x~1367) */
.io-logo{display:flex;align-items:center;}
.io-logo img{height:48px;width:auto;}
.io-nav{display:flex;align-items:center;gap:34px;}
.io-nav a{font-size:17px;font-weight:300;color:var(--io-ink);}
.io-nav a:hover{color:var(--io-orange);text-decoration:none;}
/* active-page indicator: line under the current top-nav item (Zach-requested; live has none) */
.io-nav a[aria-current="page"],.io-nav a[aria-current="page"]:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;}
.io-social{display:flex;align-items:center;gap:18px;}
.io-social a{display:inline-flex;width:26px;height:26px;color:var(--io-ink);}
.io-social a:hover{color:var(--io-orange);}
.io-social svg{width:100%;height:100%;fill:currentColor;}
.io-social svg .svg-icon,.io-social svg path,.io-social svg circle{fill:currentColor;}
/* "WHO IS 51 LABS" pill — white text on black; hover keeps white text, pill lightens (white tint) */
.io-nav a.io-pill,.io-pill{display:inline-block;background:var(--io-black);color:#fff;font-weight:500;font-size:15px;
  letter-spacing:.01em;padding:19px 32px;border-radius:999px;line-height:1;transition:background-color .2s;white-space:nowrap;}
.io-nav a.io-pill:hover,.io-pill:hover{text-decoration:none;color:#fff;
  background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),var(--io-black);}

/* overlay variant (home, over dark hero) */
.io-header--overlay{position:absolute;left:0;right:0;top:0;background:transparent;border-bottom:0;}
.io-header--overlay .io-nav a,.io-header--overlay .io-social a{color:#fff;}
/* logo is a white-tile JPG; on the live site it shows as-is on the dark hero — no filter */

/* mobile hamburger (hidden on desktop) */
.io-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.io-burger span{display:block;width:26px;height:2px;background:var(--io-ink);}
.io-header--overlay .io-burger span{background:#fff;}

/* ============================================================
   Footer (dark)
   ============================================================ */
.io-footer{background:transparent;color:var(--io-ink);padding:40px 0;}
.io-footer .io-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;}  /* nav row ON TOP of the social row (stacked, like live) */
.io-footer nav{display:flex;gap:28px;}
.io-footer a{color:var(--io-ink);font-size:16px;font-weight:300;}
.io-footer a:hover{color:var(--io-orange);text-decoration:none;}
.io-footer .io-social{gap:16px;}
.io-footer .io-social a{color:var(--io-ink);width:48px;height:48px;}

/* ============================================================
   Single episode (THIN: chrome + preserved sqs body)
   ============================================================ */
.io-episode{padding:60px 0 40px;}
/* episode content width matches the live: 328@390 / 982@1440 / 1200@1920 (cap) → min(1200px,68vw); full-width on mobile */
.io-episode__title{font-size:40px;font-weight:600;text-align:center;width:min(1200px,68vw);max-width:100%;margin:0 auto 40px;line-height:1.2;}
.io-episode__body{width:min(1200px,68vw);max-width:100%;margin:0 auto;}
/* prev/next */
.io-epnav{max-width:var(--io-maxw);margin:50px auto 0;padding:24px 28px 0;display:flex;justify-content:flex-end;}
.io-epnav a{font-size:22px;font-weight:600;text-align:right;max-width:520px;}

/* ---- preserved Squarespace body content (.sqs-html-content) ---- */
.sqs-html-content{font-size:17px;line-height:1.7;}
.sqs-html-content p{margin:0 0 1.1em;}
.sqs-html-content a{color:#111;text-decoration:underline;}
.sqs-html-content a:hover{color:var(--io-orange);}
.sqs-html-content h1,.sqs-html-content h2,.sqs-html-content h3{margin:1.2em 0 .5em;}
.sqsrte-text-highlight{background:var(--io-orange);padding:.05em .15em;}
.sqsrte-text-color--black{color:#111;}
/* embeds in the body (captivate audio bar + youtube) */
.io-episode__body iframe{max-width:100%;border:0;}
.io-episode__body iframe[src*="youtube"]{width:100%;aspect-ratio:16/9;height:auto;margin:0 0 20px;border-radius:8px;}

/* ============================================================
   Episodes archive (dark hero + list) — /episodes, 20/page
   ============================================================ */
/* Episodes archive list (hero uses shared .io-phero). Row = square thumb + large title + Read More (live @1440: thumb 217, title 43.84/500, no excerpt) */
.io-eplist{max-width:1100px;margin:0 auto;padding:40px 28px 40px;}
.io-eprow{display:flex;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--io-line);}
.io-eprow__thumb{flex:0 0 217px;}
.io-eprow__thumb img{width:217px;height:217px;object-fit:cover;background:var(--io-orange);display:block;}
.io-eprow__title{font-size:43.84px;font-weight:500;line-height:1.08;margin:0 0 .35em;}
.io-eprow__title a:hover{color:var(--io-orange);text-decoration:none;}
.io-eprow__more{font-size:15px;color:var(--io-ink);text-decoration:underline;text-underline-offset:3px;}
.io-eprow__more:hover{color:var(--io-orange);}
/* episode listings fade in on load, all at once (matches the live's load animation) */
.io-eprow{animation:io-eprow-in .65s ease-out both;}
@keyframes io-eprow-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.io-eprow{animation:none;}}
.io-pagination{display:flex;justify-content:flex-end;align-items:center;max-width:1100px;margin:0 auto;padding:24px 28px 72px;}
.io-pagination .io-pag-newer{margin-right:auto;}  /* newer left, older right; page 1 has only older (right) */
.io-pagination a{font-size:15px;color:var(--io-ink);text-decoration:underline;text-underline-offset:3px;}
.io-pagination a:hover{color:var(--io-orange);}

/* ============================================================
   Generic page (about / newsletter)
   ============================================================ */
.io-page{padding:64px 0;}
.io-page__title{font-size:38px;text-align:center;margin:0 0 36px;}
.io-page__body{max-width:820px;margin:0 auto;}

/* ============================================================
   Home (front-page) — bespoke sections
   ============================================================ */
.io-hero{position:relative;min-height:635px;background:#222 center/cover no-repeat;color:#fff;display:flex;align-items:flex-end;}
.io-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.34);} /* readability overlay (Zach-requested; live has none) */
.io-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--io-maxw);margin:0 auto;padding:0 28px 140px;text-align:left;text-shadow:0 2px 18px rgba(0,0,0,.28);} /* lower placement = off Jordan's face */
.io-hero .io-btn{padding:21px 36px;font-size:15px;}
.io-hero__title{font-size:clamp(2.6rem,7.6vw,110px);font-weight:500;line-height:1.02;letter-spacing:-.01em;margin:0 0 .12em;color:#fff;}
.io-hero__sub{font-size:clamp(1.2rem,2.4vw,35px);font-weight:500;line-height:1.2;margin:0 0 30px;color:#fff;}
.io-sec{padding:72px 0;}
.io-sec--cadence{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.io-sec--cadence h2{font-size:36px;line-height:1.1;margin:0 0 .5em;}
.io-sec--cadence > div > p{color:var(--io-gray);max-width:30em;}
/* layered composition (measured @1440: skyline 342w right, headshot 195w at comp-left, lower) — NO play button */
.io-compose{position:relative;width:100%;max-width:468px;margin:0 auto;}
.io-compose__skyline{display:block;width:73%;margin-left:auto;height:auto;}     /* skyline 342/471≈73%, right-aligned, full image */
.io-compose__head{position:absolute;left:0;bottom:6%;width:41%;height:auto;}    /* headshot 195/471≈41%, lower + further left = covers less, full image (all hair + shirt) */
/* What We Talk About — small label + 3-row animated marquee with edge fade */
.io-wwta{padding:56px 0 64px;}
.io-wwta__label{font-size:17px;font-weight:300;color:#000;margin:0 0 14px;text-align:center;}
.io-marquee{display:flex;flex-direction:column;gap:6px;}
.io-mq-row{overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 15%,#000 85%,transparent 100%);}
/* track = 4 copies of the row; shift by exactly one copy (-25%) → seamless on any width (3 copies always fill the viewport) */
.io-mq-track{display:inline-flex;align-items:center;white-space:nowrap;width:max-content;will-change:transform;
  animation:io-mq-scroll 52s linear infinite;}
.io-mq-row--0 .io-mq-track{animation-duration:50s;animation-direction:reverse;} /* row 1 → right */
.io-mq-row--1 .io-mq-track{animation-duration:58s;}                              /* row 2 → left  */
.io-mq-row--2 .io-mq-track{animation-duration:54s;animation-direction:reverse;} /* row 3 → right */
.io-mq-item,.io-mq-dot{font-size:64px;font-weight:500;color:#000;line-height:1.18;padding:0 .18em;}
@keyframes io-mq-scroll{from{transform:translateX(0);}to{transform:translateX(-25%);}}
@media(prefers-reduced-motion:reduce){.io-mq-track{animation:none;}}
.io-eyebrow{text-align:center;color:var(--io-gray);font-size:14px;letter-spacing:.06em;margin:0 0 28px;}
.io-latest h2,.io-section-title{text-align:center;font-size:30px;margin:0 0 36px;}
.io-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.io-card__thumb{aspect-ratio:1;background:var(--io-orange);border-radius:8px;overflow:hidden;}
.io-card h3{font-size:15px;margin:14px 0 6px;font-weight:600;}
.io-card p{font-size:13px;color:var(--io-gray);margin:0;}
.io-sponsors{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 40px;align-items:center;padding:10px 0;}
.io-sponsors img{max-height:64px;width:auto;margin:0 auto;}  /* color logos (live is full-color) */
.io-newsletter{background:transparent;text-align:center;}  /* live bg is transparent/white, not gray */
.io-newsletter h2{font-size:35px;margin:0 0 6px;}
.io-newsletter__lead{color:var(--io-gray);font-size:17px;margin:0 auto;max-width:560px;line-height:1.5;}
.io-newsletter form{display:flex;gap:10px;max-width:520px;margin:24px auto 16px;}
.io-newsletter input{flex:1;padding:16px 18px;border:1px solid var(--io-line);border-radius:6px;font:inherit;}
.io-newsletter .io-btn{background:var(--io-black);color:#fff;}  /* live "Sign Me Up" is black, not orange */
.io-newsletter__note{color:var(--io-gray);font-size:15px;margin:0;}
/* WPForms (interim newsletter form, row 8 amended 2026-07-13): plugin CSS is fully OFF
   (Settings > General > Include Form Styling = No styling), so the theme owns the look.
   The honeypot MUST stay hidden here because the plugin CSS that normally hides it is off. */
.wpforms-field-hp{display:none!important;}
/* screen-reader-only for hidden-label fields (plugin CSS normally does this) */
.wpforms-label-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.io-newsletter .wpforms-field-container{flex:1;}
.io-newsletter .wpforms-field{padding:0;margin:0;}
.io-newsletter input[type=email]{width:100%;box-sizing:border-box;}
.wpforms-error-noscript{display:none;}
em.wpforms-error{display:block;color:#c0392b;font-size:13px;font-style:normal;margin:6px 0 0;text-align:left;}
.io-newsletter .wpforms-confirmation-container-full{max-width:520px;margin:24px auto 16px;padding:16px;font-size:17px;}
.io-thanks{display:grid;grid-template-columns:342px 1fr;gap:56px;align-items:center;max-width:900px;margin:0 auto;} /* wider block (live ~898px) → text box ~500px = 3 lines */
.io-thanks__card{display:block;width:100%;height:auto;border-radius:6px;}   /* the 016 black "I&O" cover graphic */
.io-thanks__body p{font-size:22px;font-weight:400;line-height:1.65;margin:0 0 18px;}  /* larger+heavier; box ~446 → line 1 wraps at "...Podcast is" (matches live) */
.io-thanks__body a:not(.io-btn){text-decoration:underline;}
.io-thanks__body .io-social{margin:22px 0;justify-content:flex-start;gap:16px;}
/* SUB-FOOTER icons = BLACK CIRCLES with white glyph (different from the plain footer icons) */
.io-thanks__body .io-social a{width:48px;height:48px;background:var(--io-black);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.io-thanks__body .io-social svg{width:100%;height:100%;filter:brightness(0) invert(1);}
.io-thanks__body .io-btn{margin-top:12px;background:var(--io-black);color:#fff;padding:20px 40px;}  /* black w/ white text */
.io-thanks__body .io-btn:hover{background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),var(--io-black);}

/* ============================================================
   Page hero band — shared: About / Newsletter / Episodes
   montage bg + 15% dark overlay + white centered title (live @1440: 333px)
   ============================================================ */
.io-phero{position:relative;min-height:333px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px 24px;overflow:hidden;background:var(--io-black);}
/* io_page_hero(): exactly 3 large episode-card images wide; only a partial section shows in the
   band, and the grid is translated up by a per-load random % (inline style) to vary the window. */
.io-phero__grid{position:absolute;top:0;left:0;right:0;z-index:0;display:grid;grid-template-columns:repeat(3,1fr);}
.io-phero__grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.io-phero__overlay{position:absolute;inset:0;background:#000;opacity:.78;z-index:1;}  /* match the live's near-dark hero (cards faintly visible); crisp tiles read lighter than the live's low-res montage, so a heavy tint is needed */
.io-phero__title{position:relative;z-index:2;color:#fff;font-weight:500;margin:0;line-height:1.1;
  font-size:clamp(45px,2.45rem + 1.63vw,62.72px);}  /* live: 45.57px @390 → 62.72px @1440 */
.io-accent{color:var(--io-orange);}

/* ---- About: intro + host ---- */
.io-about-intro{padding:64px 0 8px;text-align:center;}
.io-about-intro h2{font-size:clamp(33.6px,29.8px + 0.97vw,43.84px);font-weight:500;line-height:1.18;margin:0 auto .9em;max-width:1100px;}  /* live H2 curve: 33.6@390 → 43.84@1440 */
.io-about-intro__body{margin:0 auto;text-align:left;}
.io-about-intro__body p{font-size:17.28px;line-height:1.87;color:#000;margin:0 0 1.2em;}
.io-host{padding:48px 0 80px;}
.io-host__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}  /* proportional: photo ~583@1440, ~329@768 (stays 2-col to 600) */
.io-host__photo{width:100%;height:auto;display:block;}
.io-host__body h3{font-size:25.12px;font-weight:500;margin:0 0 .7em;}
.io-host__body p{font-size:17.28px;line-height:1.6;color:#000;margin:0 0 1em;}
.io-host__body a{color:inherit;text-decoration:underline;}

/* ---- Newsletter: two-column copy + form (form = placeholder; HubSpot wiring pending) ---- */
.io-nl__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start;padding-top:8px;}  /* proportional ~1.1:1 (form ~542@1440, ~300@768; stays 2-col to 600) */
.io-nl__intro h2{font-size:clamp(33.6px,29.8px + 0.97vw,43.84px);font-weight:500;line-height:1.15;margin:0 0 .55em;}  /* live H2 curve: 33.6@390 → 43.84@1440 */
.io-nl__intro p{font-size:17.28px;line-height:1.6;color:#000;max-width:26em;}
.io-nl__form{display:flex;flex-direction:column;}
.io-nl__label{font-size:14px;color:#333;margin:0 0 9px;font-weight:400;}
.io-nl__req{color:var(--io-gray);}
.io-nl__form input,.io-nl__form textarea{border:1px solid var(--io-line);border-radius:2px;padding:15px 16px;font:inherit;margin:0 0 22px;background:#fbfbfb;width:100%;box-sizing:border-box;}
.io-nl__form textarea{min-height:70px;resize:vertical;}
.io-nl__submit{align-self:center;background:var(--io-black);color:#fff;padding:16px 36px;margin-top:6px;}
.io-nl__submit:hover{background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),var(--io-black);}
/* WPForms variant of the /newsletter form: form_class io-nl__form lands on the .wpforms-container
   div, so the placeholder's descendant selectors (input/textarea) still apply; labels + submit
   centering are re-created below. "(required)" text replaces the WPForms asterisk to match live. */
.io-nl__form .wpforms-field{margin:0;padding:0;}
.io-nl__form .wpforms-field-label{display:block;font-size:14px;color:#333;margin:0 0 9px;font-weight:400;}
.io-nl__form .wpforms-required-label{display:none;}
.io-nl__form .wpforms-field-email .wpforms-field-label::after{content:" (required)";color:var(--io-gray);}
.io-nl__form .wpforms-submit-container{text-align:center;}
.io-nl__formcol .wpforms-confirmation-container-full{font-size:17px;padding:8px 0;}

/* ============================================================
   Responsive (mobile 390 parity)
   ============================================================ */
@media(max-width:900px){
  .io-burger{display:flex;}
  .io-header .io-wrap{height:68px;}
  /* nav becomes a dropdown panel toggled by the hamburger */
  .io-nav{position:absolute;top:100%;left:0;right:0;background:var(--io-black);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 0;display:none;}
  .io-header[data-nav-open="1"] .io-nav{display:flex;}
  .io-nav a{color:#fff;width:100%;padding:13px 28px;font-size:16px;}
  .io-nav .io-social{padding:13px 28px;}
  .io-nav .io-social a{color:#fff;}
  .io-nav .io-pill{margin:10px 28px;}
  .io-sec--cadence,.io-thanks{grid-template-columns:1fr;}  /* homepage grids stack at 900 (unchanged) */
  .io-phero{min-height:240px;padding:36px 20px;}
  /* About-host + Newsletter stay TWO-COLUMN here (live keeps them side-by-side at 768) — they stack at 600 below */
  /* episode rows stay HORIZONTAL on tablet (live keeps side-by-side at 768) — just shrink thumb + title */
  .io-eplist{padding:30px 20px;}
  .io-eprow{gap:24px;}
  .io-eprow__thumb{flex:0 0 150px;}
  .io-eprow__thumb img{width:150px;height:150px;}
  .io-eprow__title{font-size:30px;}
  .io-pagination{padding:16px 20px 56px;}
  .io-cards{grid-template-columns:repeat(2,1fr);}
  .io-sponsors{grid-template-columns:repeat(3,1fr);}
  .io-episode__title{font-size:28px;}
  .io-episode,.io-page{padding-top:40px;}
  .io-marquee__row{font-size:26px;}
  .io-hero h1{font-size:24px;}
}
@media(max-width:767px){
  /* live switches everything to single-column at <=767 (two-column/horizontal only >=768) */
  /* episode rows STACK: full-width square thumb over title + Read More */
  .io-eprow{flex-direction:column;align-items:stretch;gap:14px;}
  .io-eprow__thumb{flex:none;}
  .io-eprow__thumb img{width:100%;height:auto;aspect-ratio:1;}
  .io-eprow__title{font-size:32px;}
  /* About-host + Newsletter stack */
  .io-host__grid,.io-nl__grid{grid-template-columns:1fr;gap:28px;}
  /* episode content goes full-width on mobile (live drops the desktop side insets) */
  .io-episode__body,.io-episode__title{width:100%;}
}