/* =============================================================
   CYVORE — OFFICE EXTENSIONS
   TV/demo section · Dispatch press section · Firm org board
   Builds on noir.css + noir-purple.css
   ============================================================= */

/* =============================================================
   THE TV → DEMO SECTION
   ============================================================= */
.tv-sec{ padding:120px 0; }
.tv-wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center;
}
@media (max-width:900px){ .tv-wrap{ grid-template-columns:1fr; gap:40px; } }

.tv{
  position:relative; border-radius:22px; padding:26px;
  background:linear-gradient(160deg,#1b1922,#0c0b11);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.tv::after{ /* channel knobs on the side */
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:10px; height:64px; border-radius:6px;
  background:repeating-linear-gradient(#2a2733 0 14px, #14121b 14px 22px);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}
.tv-screen{
  position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  background:#05040a; cursor:pointer;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), inset 0 0 0 2px rgba(0,0,0,.6);
  transition:box-shadow .3s;
}
.tv-screen:hover{
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), inset 0 0 0 2px rgba(0,0,0,.6),
             0 0 0 2px var(--purple), 0 0 30px var(--purple-glow);
}
.tv-screen::before{ /* curved glass glare */
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:radial-gradient(120% 80% at 30% 8%, rgba(255,255,255,.10), transparent 40%);
}
.tv-screen .crt-scan{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px);
  opacity:.6;
}
.tv-screen .crt-roll{
  position:absolute; left:0; right:0; height:40%; z-index:3; pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.05), transparent);
  animation:roll 7s linear infinite;
}
@keyframes roll{ 0%{top:-40%} 100%{top:100%} }

.tv-idle{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center;
  filter:grayscale(1) contrast(1.1);
}
.tv-idle .reel{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(24px,3vw,40px); color:#d9d4ca;
}
.tv-idle .meta{
  font-family:var(--f-type); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:#8a8680;
}
.tv-idle .blip{
  width:54px; height:54px; border-radius:50%; border:2px solid #cfcabf;
  display:flex; align-items:center; justify-content:center;
}
.tv-idle .blip svg{ width:22px; height:22px; color:#cfcabf; margin-left:3px; }
.tv-noise{
  position:absolute; inset:0; z-index:1; opacity:.10; mix-blend-mode:screen;
  background-image:var(--grain-img,none); animation:grainShift .4s steps(2) infinite;
}
.tv-power{
  position:absolute; right:14px; bottom:12px; z-index:5;
  width:9px; height:9px; border-radius:50%;
  background:#47E187; box-shadow:0 0 10px #47E187;
}
.tv-copy .eyebrow{ margin-bottom:18px; }
.tv-copy h2{ margin-bottom:18px; }
.tv-copy p{
  color:var(--ink-dim); font-size:16px; line-height:1.75;
  margin-bottom:24px; max-width:42ch;
}
.demo-disclaimer{
  font-family:var(--f-type); font-size:11px; letter-spacing:.08em;
  color:var(--muted); margin-top:12px; max-width:42ch;
}

/* =============================================================
   DEMO MODAL (YouTube fullscreen)
   ============================================================= */
.demo-modal{
  position:fixed; inset:0; z-index:9600;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.demo-modal.open{ display:flex; }
.demo-modal-scrim{
  position:fixed; inset:0;
  background:rgba(4,3,8,.88); backdrop-filter:blur(10px);
}
.demo-modal-content{
  position:relative; z-index:2;
  width:100%; max-width:1100px;
}
.demo-modal-close{
  position:absolute; top:-48px; right:0;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--f-type); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:rgba(20,18,28,.7); border:1px solid var(--hair);
  border-radius:100px; padding:10px 18px; backdrop-filter:blur(6px);
  transition:border-color .2s;
}
.demo-modal-close:hover{ border-color:var(--purple); }
.demo-modal-close svg{ width:14px; height:14px; }
.demo-frame{
  position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:#05040a;
  box-shadow:inset 0 0 80px rgba(0,0,0,.9), 0 40px 90px -24px rgba(0,0,0,.8);
}
.demo-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:none;
}

/* =============================================================
   THE DISPATCH — press articles as newspaper clippings
   ============================================================= */
.dispatch{ padding:118px 0; }
.dispatch-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px;
}
@media (max-width:900px){ .dispatch-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .dispatch-grid{ grid-template-columns:1fr; } }

.clip{
  display:flex; flex-direction:column; background:#ece8df; color:#1c1812;
  border-radius:3px; overflow:hidden; text-decoration:none;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.7);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  position:relative; transform:rotate(var(--r,0deg));
}
.clip::before{ /* masking tape */
  content:""; position:absolute; top:-8px; left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:64px; height:18px;
  background:rgba(167,142,255,.3); border:1px solid rgba(167,142,255,.4); z-index:3;
}
.clip:hover{
  transform:rotate(0deg) translateY(-5px);
  box-shadow:0 26px 46px -16px rgba(0,0,0,.8);
}
.clip:focus-visible{ outline:3px solid var(--purple); outline-offset:3px; }
.clip.lead{ grid-column:span 2; }
@media (max-width:600px){ .clip.lead{ grid-column:span 1; } }

.clip-photo{
  aspect-ratio:16/9; background:#14121c; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  filter:grayscale(1) contrast(1.05);
}
.clip.lead .clip-photo{ aspect-ratio:21/9; }
.clip-photo svg{ width:46px; height:46px; color:#5a5566; }
.clip-photo .kicker{
  position:absolute; top:10px; left:10px;
  font-family:var(--f-type); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#d8d3ff; background:rgba(95,43,248,.55); padding:3px 8px; border-radius:2px;
}
.clip-body{
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:9px; flex:1;
}
.clip-body .src{
  font-family:var(--f-type); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:#8a4540;
}
.clip-body h4{
  font-family:var(--f-head); font-weight:800; font-size:17px;
  line-height:1.22; color:#1c1812;
}
.clip.lead .clip-body h4{ font-size:23px; }
.clip-body .date{
  font-family:var(--f-type); font-size:11px; color:#6b6557;
  margin-top:auto; display:flex; align-items:center; gap:7px;
}
.clip-body .date .arrow{ margin-left:auto; color:#8a4540; }
.dispatch-foot{ margin-top:30px; text-align:center; display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; }

/* articles beyond the first 6 are hidden until expanded */
.clip-hidden{ display:none; }
.dispatch-grid.expanded .clip-hidden{ display:flex; }

/* fade in newly revealed clips */
.dispatch-grid.expanded .clip-hidden{
  animation:clipReveal .4s var(--ease) both;
}
@keyframes clipReveal{
  from{ opacity:0; transform:rotate(var(--r,0deg)) translateY(12px); }
  to{   opacity:1; transform:rotate(var(--r,0deg)) translateY(0); }
}

/* =============================================================
   DEMO REQUEST FORM MODAL
   ============================================================= */
.demo-req-modal{
  position:fixed; inset:0; z-index:9700;
  display:none; align-items:center; justify-content:center; padding:24px;
}
.demo-req-modal.open{ display:flex; }
.demo-req-scrim{
  position:fixed; inset:0;
  background:rgba(4,3,8,.88); backdrop-filter:blur(10px);
}
.demo-req-sheet{
  position:relative; z-index:2; width:100%; max-width:560px;
  background:#ece8df; color:#1c1812; border-radius:4px;
  padding:48px clamp(24px,5vw,56px) 52px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);
  opacity:0; transform:translateY(16px) scale(.97);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.demo-req-modal.open .demo-req-sheet{ opacity:1; transform:none; }

.demo-req-close{
  position:absolute; top:16px; right:18px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-type); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#6b6557; background:none; border:none; cursor:pointer; padding:6px;
  transition:color .15s;
}
.demo-req-close:hover{ color:#1c1812; }
.demo-req-close svg{ width:14px; height:14px; }

.demo-req-sheet .masthead{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-top:2px solid #1c1812; border-bottom:1px solid rgba(28,24,18,.2);
  padding:10px 0; margin-bottom:28px;
}
.demo-req-sheet .masthead .paper{
  font-family:var(--f-display); text-transform:uppercase; font-size:clamp(18px,2.2vw,26px);
}
.demo-req-sheet .masthead .paper b{ color:var(--red); font-weight:400; }
.demo-req-sheet .masthead .dl{
  font-family:var(--f-type); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6b6557;
}
.demo-req-sheet h2{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(26px,3.8vw,44px); line-height:.96; margin-bottom:6px;
}
.demo-req-sheet .sub{
  font-size:14px; color:#6b6557; margin-bottom:28px; line-height:1.5;
}

.demo-form{ display:flex; flex-direction:column; gap:14px; }
.demo-form .field{ display:flex; flex-direction:column; gap:5px; }
.demo-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .demo-form .row{ grid-template-columns:1fr; } }
.demo-form label{
  font-family:var(--f-type); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:#6b6557;
}
.demo-form input,
.demo-form textarea{
  background:#fff; border:1px solid rgba(28,24,18,.2); border-radius:3px;
  padding:11px 13px; font-family:var(--f-body); font-size:14px; color:#1c1812;
  transition:border-color .15s; outline:none; width:100%;
}
.demo-form input:focus,
.demo-form textarea:focus{ border-color:#1c1812; }
.demo-form input.error,
.demo-form textarea.error{ border-color:#c2342b; }
.demo-form textarea{ resize:vertical; min-height:90px; }
.demo-form .submit-row{
  display:flex; gap:14px; align-items:center; margin-top:4px; flex-wrap:wrap;
}
.demo-form .form-status{
  font-family:var(--f-type); font-size:11px; letter-spacing:.08em; color:#6b6557;
}
.demo-form .form-status.error{ color:#c2342b; }
.demo-form .form-status.success{ color:#2d6a3f; }

/* =============================================================
   ARTICLE TAKEOVER — newspaper sheet overlay
   ============================================================= */
.takeover{
  position:fixed; inset:0; z-index:9600;
  display:none; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:48px 20px 64px;
}
.takeover.open{ display:flex; }
.takeover-scrim{
  position:fixed; inset:0;
  background:rgba(4,3,8,.84); backdrop-filter:blur(10px);
}
.takeover-sheet{
  position:relative; z-index:2; width:100%; max-width:980px;
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.takeover.open .takeover-sheet{ opacity:1; transform:none; }
.takeover-close{
  position:fixed; top:20px; right:22px; z-index:5;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--f-type); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:rgba(20,18,28,.75); border:1px solid var(--hair);
  border-radius:100px; padding:10px 18px; backdrop-filter:blur(6px);
  transition:border-color .2s;
}
.takeover-close:hover{ border-color:var(--purple); }
.takeover-close svg{ width:14px; height:14px; }

/* paper sheet */
.sheet-paper{
  background:#ece8df; color:#1c1812; border-radius:4px;
  padding:54px clamp(28px,5vw,72px) 60px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
}
.sheet-paper .masthead{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap;
  border-top:2px solid #1c1812; border-bottom:1px solid rgba(28,24,18,.25);
  padding:12px 0; margin-bottom:30px;
}
.sheet-paper .masthead .paper{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(22px,3vw,34px); line-height:1;
}
.sheet-paper .masthead .paper b{ color:var(--red); font-weight:400; }
.sheet-paper .masthead .dl{
  font-family:var(--f-type); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#6b6557;
}
.sheet-paper h1{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(30px,4.6vw,56px); line-height:.98; letter-spacing:.005em;
  margin-bottom:20px;
}
.sheet-paper .standfirst{
  font-family:var(--f-head); font-weight:600; font-size:19px; line-height:1.5;
  color:#3a352c; border-left:3px solid var(--red); padding-left:16px; margin-bottom:28px;
}
.sheet-cols{ column-count:2; column-gap:40px; }
@media (max-width:640px){ .sheet-cols{ column-count:1; } }
.sheet-cols p{
  font-size:15px; line-height:1.74; color:#332f27;
  margin-bottom:15px; break-inside:avoid;
}
.sheet-cols p:first-child::first-letter{
  font-family:var(--f-display); float:left; font-size:62px;
  line-height:.78; padding:4px 10px 0 0; color:var(--red);
}
.sheet-cols strong{ color:#1c1812; }
.sheet-out{
  margin-top:30px; padding-top:20px; border-top:1px solid rgba(28,24,18,.2);
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
}
.btn-ink{ background:#1c1812; color:#ece8df; border-color:#1c1812; }
.btn-ink:hover{ background:#000; transform:translateY(-1px); }
/* Full Cyvore article — wider sheet, article body typography */
.sheet-paper.full-article{ max-width:860px; margin:0 auto; }
.takeover-sheet{ max-width:1160px; }

.article-body{
  color:#332f27; font-size:16px; line-height:1.78;
  margin-top:24px;
}
.article-body h1,.article-body h2{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(22px,2.8vw,32px); line-height:1; margin:32px 0 14px; color:#1c1812; }
.article-body h3,.article-body h4{ font-family:var(--f-head); font-weight:700; font-size:18px; margin:26px 0 10px; color:#1c1812; }
.article-body p{ margin-bottom:16px; }
.article-body > p:first-of-type::first-letter{ font-family:var(--f-display); float:left; font-size:62px; line-height:.78; padding:4px 10px 0 0; color:var(--red); }
.article-body strong,.article-body b{ color:#1c1812; font-weight:700; }
.article-body a{ color:#8a4540; text-decoration:underline; }
.article-body a:hover{ color:#1c1812; }
.article-body ul,.article-body ol{ padding-left:22px; margin-bottom:16px; }
.article-body li{ margin-bottom:6px; }
.article-body blockquote{ border-left:3px solid var(--red); padding-left:16px; margin:20px 0; color:#3a352c; font-style:italic; }
.article-body img{ max-width:100%; height:auto; border-radius:4px; margin:20px 0; display:block; }
.article-body figure{ margin:24px 0; }
.article-body figcaption{ font-family:var(--f-type); font-size:11px; letter-spacing:.08em; color:#6b6557; margin-top:8px; }
.article-body iframe{ max-width:100%; border-radius:4px; }
.article-loading{ color:#6b6557; font-style:italic; }

/* -------------------------------------------------------------
   DEFENSIVE RESPONSIVE RULES for fetched (WordPress) content.
   The article body is post HTML we don't control. WP frequently
   emits figures / embeds / images carrying inline pixel widths
   (e.g. the "Scan My SMS Dashboard" block) that blow past the
   phone's width and drag the whole column off-screen. These rules
   force every embedded thing to fit the container instead.
   ------------------------------------------------------------- */
.article-body{ overflow-wrap:break-word; word-break:break-word; }
/* media never exceeds the column */
.article-body img,
.article-body video,
.article-body iframe,
.article-body embed,
.article-body object,
.article-body svg,
.article-body canvas{ max-width:100% !important; height:auto; }
/* kill inline fixed widths on figures / WP blocks / anything styled wide */
.article-body figure,
.article-body .wp-block-image,
.article-body .wp-block-embed,
.article-body .wp-block-embed__wrapper,
.article-body [style*="width"]{
  max-width:100% !important; width:auto !important;
  margin-left:0 !important; margin-right:0 !important;
}
/* let flex/grid embeds (the dashboard cards) shrink + stack rather
   than forcing a min-content width wider than the screen */
.article-body *{ min-width:0; }
.article-body [style*="display:flex"],
.article-body [style*="display: flex"],
.article-body [style*="display:grid"],
.article-body [style*="display: grid"]{
  flex-wrap:wrap !important;
  grid-template-columns:1fr !important;
}
/* wide tables / preformatted blocks scroll inside themselves */
.article-body table,
.article-body pre{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* final backstop: the sheet itself never scrolls the page sideways */
.takeover .sheet-paper{ overflow-x:hidden; }

.sheet-out .opens{
  font-family:var(--f-type); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:#6b6557;
}

/* =============================================================
   THE FIRM — founders org board (extends .board mechanics)
   ============================================================= */
.org-photo{ overflow:hidden; }
.org-photo img{ width:100%; height:100%; object-fit:cover; object-position:top center; filter:grayscale(.3) contrast(1.05); }
.org-photo .silhouette{ width:70%; height:88%; }
.founder-link .polaroid{ cursor:pointer; }
.founder-link:focus-visible .polaroid{ box-shadow:0 0 0 3px var(--purple); }
.org-roles{
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap; margin-top:30px;
}
.org-roles a{
  font-family:var(--f-type); font-size:12px; letter-spacing:.06em; color:var(--ink-dim);
  text-transform:uppercase; display:inline-flex; align-items:center; gap:8px;
}
.org-roles a:hover{ color:var(--ink); }
.org-roles svg{ width:14px; height:14px; }