/*
Theme Name: Vellum — BOA Labs
Theme URI: https://boalabs.io
Author: BOA Labs
Author URI: https://boalabs.io
Description: Elena Mar surface for the Pyrados platform. Warm-paper Swiss-editorial child theme on Vellum: all-Helvetica, oversized ultra-tight headlines, tan hairline rules, a single hot-orange accent, and white bordered cards. Same content + post types as vellum-pyrados, re-skinned.
Template: vellum
Version: 1.0.3
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vellum-labs
*/

/* ============================================================
   ELENA MAR — DESIGN TOKENS
   Warm paper, near-black ink, one hot-orange accent.
   ============================================================ */
:root {
  /* Type — all Helvetica (no serif, no web fonts) */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Palette */
  --color-bg:         #f6f4ef;   /* warm paper */
  --color-text:       #111111;
  --color-text-muted: #76736d;   /* warm grey */
  --color-line:       #d9d4c8;   /* tan hairline */
  --color-accent:     #ff4f1f;   /* hot orange */
  --color-accent-dim: rgba(255, 79, 31, .08);

  /* Reserved surfaces */
  --pyr-soft:   #efece4;
  --pyr-cream:  #f1ede4;
  --pyr-gold:   #ff4f1f;   /* numbering / markers now use the accent */
  --pyr-red:    #ff4f1f;
  --pyr-green:  #6f7d5e;
  --pyr-panel:  #111111;
  --pyr-ink:    #111111;
  --el-card:    #ffffff;

  /* Type scale — oversized, Swiss */
  --type-display: clamp(58px, 12vw, 180px);
  --type-h1:      clamp(48px, 8vw, 120px);
  --type-h2:      clamp(32px, 6vw, 86px);
  --type-h3:      clamp(24px, 3vw, 40px);

  --sec-pad: clamp(56px, 8vw, 96px);
}

/* Ultra-tight, heavy Helvetica headlines */
h1, h2, h3, .display,
.vellum-hero__name, .vellum-page-title__title,
.vellum-nav-overlay a,
.pyr-sec-head__title, .pyr-card__title,
.pyr-detail-hero__title, .pyr-archive-head__title,
.pyr-newsletter__title, .pyr-benefit__title,
.pyr-event-row__title, .pyr-ep-row__title,
.pyr-article-header__title {
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
}
.display, .vellum-hero__name, .pyr-detail-hero__title,
.pyr-archive-head__title, .pyr-article-header__title {
  letter-spacing: -0.075em;
  line-height: 0.84;
}
.eyebrow { letter-spacing: .08em; font-weight: 600; }

/* Nav — uppercase, hot-orange hover, wordmark visible */
.vellum-nav__mark { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; text-transform: none; font-size: clamp(18px,2vw,26px); }
.vellum-nav__links a { letter-spacing: .08em; opacity: 1; }
.vellum-nav__links a:hover { color: var(--color-accent); opacity: 1; }
.vellum-homepage .vellum-nav__mark { visibility: visible; }  /* show wordmark even on front */

/* ============================================================
   SHARED PRIMITIVES
   ============================================================ */
.pyr-section { padding: var(--sec-pad) 0; }
.pyr-section--soft  { background: var(--pyr-soft); }
.pyr-section--cream { background: var(--pyr-cream); }
/* Elena is all-paper: neutralise the dark sections from the base build */
.pyr-section--ink   { background: var(--pyr-soft); color: var(--color-text); }
.pyr-section--ink .eyebrow { color: var(--color-text-muted); }

/* Section heads gain a hairline rule */
.pyr-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gap); margin-bottom: clamp(20px, 3vw, 36px);
  padding-bottom: 14px; border-bottom: 1px solid var(--color-line);
}
.pyr-sec-head__title { font-size: var(--type-h2); margin: 0; }
.pyr-sec-head .eyebrow { margin: 0; }

.pyr-textlink { font-size: 13px; font-weight: 500; letter-spacing: .08em; }
.pyr-textlink:hover { color: var(--color-accent); }
.pyr-textlink::after { background: var(--color-accent); }

/* Badges → orange / outline */
.pyr-badge { background: #fff; color: #111; border: 1px solid var(--color-line); }
.pyr-badge--limited { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.pyr-badge--premium { background: #111; color: #fff; border-color: #111; }

/* ============================================================
   CONTENT CARD — white, bordered, lifts on hover, arrow
   ============================================================ */
.pyr-card {
  display: block; background: var(--el-card);
  border: 1px solid var(--color-line);
  transition: transform var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}
.pyr-card:hover { transform: translateY(-4px); border-color: var(--color-text); }
.pyr-card__media { position: relative; overflow: hidden; background: var(--pyr-soft); }
.pyr-card__media--poster { aspect-ratio: 3/4; }
.pyr-card__media--wide   { aspect-ratio: 16/11; }
.pyr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: none; }
.pyr-card:hover .pyr-card__media img { transform: none; }
.pyr-card__body { position: relative; padding: 16px 18px 18px; padding-right: 44px; }
.pyr-card__body::after {
  content: "\2197"; position: absolute; right: 16px; bottom: 14px;
  font-size: 28px; line-height: 1; color: var(--color-text);
}
.pyr-card:hover .pyr-card__body::after { color: var(--color-accent); }
.pyr-card__meta { font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--color-text-muted); margin: 0 0 6px; font-weight: 400; }
.pyr-card__title { font-size: clamp(22px, 2.6vw, 34px); margin: 0; }

/* ============================================================
   RAIL + GRIDS
   ============================================================ */
.pyr-rail { gap: 18px; }
.pyr-grid { display: grid; gap: 18px; }
.pyr-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pyr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pyr-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .pyr-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .pyr-grid--4, .pyr-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pyr-grid--2, .pyr-grid--3, .pyr-grid--4 { grid-template-columns: 1fr; } }

/* ============================================================
   ELENA HERO (front page) — paper, giant tight headline
   ============================================================ */
.el-hero { min-height: 74vh; display: grid; align-items: end; padding: clamp(32px,5vh,64px) 0 32px; border-bottom: 1px solid var(--color-line); }
.el-hero__title { font-size: var(--type-display); line-height: 0.82; letter-spacing: -0.085em; font-weight: 700; margin: 0; max-width: 16ch; }
.el-hero__row { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: 40px; margin-top: 36px; align-items: end; }
.el-hero__intro { font-size: clamp(18px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.035em; max-width: 760px; margin: 0; }
.el-hero__meta { color: var(--color-text-muted); font-size: 14px; line-height: 1.45; margin: 0; }
@media (max-width: 800px) { .el-hero__row { grid-template-columns: 1fr; } }

/* "Selected work" 12-col asymmetric grid for featured releases */
.el-work { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.el-work > * { grid-column: span 4; }
.el-work > *:nth-child(7n+1) { grid-column: span 8; }
@media (max-width: 1024px) { .el-work > *, .el-work > *:nth-child(7n+1) { grid-column: span 6; } }
@media (max-width: 640px)  { .el-work > *, .el-work > *:nth-child(7n+1) { grid-column: span 12; } }

/* About / statement grid (membership intro, services list) */
.el-about { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); padding: 34px 0; }
.el-about__statement { margin: 0; font-size: clamp(24px, 4vw, 62px); line-height: 0.96; letter-spacing: -0.065em; font-weight: 700; }
.el-services { display: grid; gap: 10px; align-content: start; color: var(--color-text-muted); font-size: 16px; }
.el-services span { display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-line); padding-bottom: 8px; }
@media (max-width: 800px) { .el-about { grid-template-columns: 1fr; } }

/* Simple list rows (podcasts on the home page) */
.el-list-row { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--color-line); }
.el-list-row:last-child { border-bottom: 1px solid var(--color-line); }
.el-list-row__num { font-size: clamp(22px,3vw,40px); color: var(--color-text-muted); letter-spacing: -0.06em; }
.el-list-row__title { font-size: clamp(22px,3vw,40px); margin: 0; }
.el-list-row__meta { color: var(--color-text-muted); font-size: 14px; }

/* ============================================================
   NEWSLETTER — light paper version
   ============================================================ */
.pyr-newsletter { text-align: left; max-width: none; }
.pyr-newsletter__title { font-size: clamp(40px,7vw,96px); line-height: .9; letter-spacing: -0.07em; margin: 0 0 18px; }
.pyr-newsletter p { color: var(--color-text-muted); margin: 0 0 28px; max-width: 56ch; }
.pyr-newsletter__form { border-bottom: 1px solid var(--color-text); max-width: 560px; margin: 0; }
.pyr-newsletter__form input[type=email] { color: var(--color-text); }
.pyr-newsletter__form input::placeholder { color: var(--color-text-muted); }
.pyr-newsletter__form button { color: var(--color-text); }
.pyr-newsletter__form button:hover { color: var(--color-accent); }

/* ============================================================
   MEMBERSHIP — benefit grid + pricing tiers
   ============================================================ */
.pyr-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
@media (max-width: 860px) { .pyr-benefits { grid-template-columns: 1fr; } }
.pyr-benefit { border-top: 1px solid var(--color-line); padding-top: 22px; }
.pyr-benefit__num { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--color-accent); margin: 0 0 18px; }
.pyr-benefit__title { font-size: var(--type-h3); margin: 0 0 12px; }
.pyr-benefit p { margin: 0; color: var(--color-text-muted); }

.pyr-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--sec-pad); }
@media (max-width: 860px) { .pyr-tiers { grid-template-columns: 1fr; } }
.pyr-tier { border: 1px solid var(--color-line); background: var(--el-card); padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.pyr-tier--feature { background: #111; color: #fff; border-color: #111; }
.pyr-tier__price { font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -0.05em; margin: 18px 0 8px; }
.pyr-tier__price small { font-family: var(--font-sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); }
.pyr-tier ul { list-style: none; padding: 0; margin: 24px 0 32px; display: grid; gap: 12px; }
.pyr-tier li { font-size: 15px; padding-left: 22px; position: relative; }
.pyr-tier li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--color-accent); }
.pyr-tier .btn { margin-top: auto; justify-content: center; }

/* ============================================================
   DETAIL / ARCHIVE — keep image heroes, paper bodies
   ============================================================ */
.pyr-detail-hero { background: #111; }
.pyr-credits dt { color: var(--color-text-muted); }
.pyr-synopsis { font-family: var(--font-sans); font-size: clamp(20px,2.2vw,30px); line-height: 1.18; letter-spacing: -0.03em; }
.pyr-block__head, .pyr-card__meta, .pyr-event-row__where, .pyr-ep-row__meta { text-transform: none; }
.pyr-archive-head__intro { font-family: var(--font-sans); letter-spacing: -0.03em; }

/* Cast tiles → bordered white */
.pyr-cast__img { border: 1px solid var(--color-line); background: var(--el-card); }
.pyr-cast figcaption b { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.04em; }

/* ── ARTICLE (journal single) — wide editorial layout ── */
.pyr-article-header { text-align: center; max-width: 1040px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 44px); }
.pyr-article-header__title { font-size: var(--type-h1); margin: 18px 0; }
.pyr-article-header__deck { font-family: var(--font-sans); font-style: normal; letter-spacing: -0.02em; font-size: clamp(20px, 2.2vw, 28px); color: var(--color-text-muted); max-width: 46ch; margin: 0 auto; }
.pyr-article-meta { font-family: var(--font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.pyr-article-hero { aspect-ratio: 16/9; overflow: hidden; background: var(--pyr-soft); margin-bottom: clamp(40px, 6vw, 80px); }
.pyr-article-hero img { width: 100%; height: 100%; object-fit: cover; }
/* The default .prose column is intentionally narrow (72ch). Articles read
   wider so they don't look skinny next to the full-width sections. */
.single-article .prose { max-width: 960px; }

/* ============================================================
   BUTTONS — square, ink, orange-aware
   ============================================================ */
.btn, .vellum-btn { border-radius: 0; letter-spacing: .08em; }
.btn--solid { background: #111; color: #fff; border-color: #111; border-radius: 0; padding: 15px 28px; min-height: 46px; }
.btn--solid:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); transform: translateY(-2px); }

/* ============================================================
   FOOTER — light paper, thin, hot-orange hovers
   ============================================================ */
.pyr-footer { background: var(--color-bg); color: var(--color-text-muted); border-top: 1px solid var(--color-line); padding: clamp(48px,6vw,80px) 0 40px; }
.pyr-footer__top { border-bottom: 1px solid var(--color-line); }
.pyr-footer__mark { color: var(--color-text); letter-spacing: -0.04em; text-transform: none; font-size: clamp(20px,2.4vw,30px); }
.pyr-footer__tagline { color: var(--color-text-muted); letter-spacing: -0.03em; }
.pyr-footer__heading { color: var(--color-text-muted); }
.pyr-footer__col a { color: var(--color-text); }
.pyr-footer__col a:hover { color: var(--color-accent); }
/* Bottom bar: copyright on the left, legal links inline on the right. */
.pyr-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px var(--gap); flex-wrap: wrap; padding-top: 28px; }
.pyr-footer__bottom p { margin: 0; font-size: 12px; color: var(--color-text-muted); }
/* Legal links: a row of plain links, NOT a bulleted list. */
.pyr-footer__legal { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.pyr-footer__legal li { margin: 0; }
.pyr-footer__legal a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.pyr-footer__legal a:hover { color: var(--color-accent); }

/* Grain overlay reads heavy on warm paper — dial it down */
.vellum-grain { opacity: .03; }

/* Footer with the link columns removed — keep just the copyright bar,
   tightened so it doesn't float in the full footer padding. */
.pyr-footer--minimal { padding-block: clamp(28px, 3vw, 44px) 36px; }
.pyr-footer--minimal .pyr-footer__bottom { padding-top: 0; }


/* ============================================================
   BOA LABS — SHOWCASE LAYER (appended to the Elena Mar surface)
   Work grid of live demos, hero tweaks, Lab Mode button.
   Uses the Elena Mar tokens: paper bg, hot-orange accent, Helvetica.
   ============================================================ */

/* ---- generic section rhythm ---- */
.bl-section{padding:clamp(3rem,8vw,6rem) 0}
.bl-lead{max-width:42rem;font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.5;color:var(--color-text)}
.bl-eyebrow{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:1rem}
.bl-statement{font-size:clamp(1.8rem,6vw,3.4rem);line-height:1.02;letter-spacing:-.02em;font-weight:700;max-width:18ch}
.bl-statement em{color:var(--color-accent);font-style:normal}

/* ---- Lab Mode button (the signature CTA) ---- */
.bl-vibe{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  background:#111;color:#fff;border:0;border-radius:100px;
  padding:.85rem 1.6rem;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  transition:transform .2s,background .2s}
.bl-vibe:hover{transform:translateY(-2px);background:var(--color-accent);color:#fff}
.bl-vibe .dot{width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd23d,#ff4f1f 60%,#b06bff);box-shadow:0 0 10px rgba(255,79,31,.7)}

/* ---- Work grid ---- */
.bl-workhead{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:2.4rem;border-bottom:1px solid var(--color-line);padding-bottom:1.4rem}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(1.2rem,3vw,2rem)}
.bl-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--color-line);background:#fff;border-radius:2px;overflow:hidden;
  transition:transform .25s var(--ease,ease),box-shadow .25s}
.bl-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(0,0,0,.35)}
.bl-card__media{aspect-ratio:16/10;background:#ece8df center/cover no-repeat;position:relative;
  display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--color-line)}
.bl-card__media .ph{font-size:clamp(2rem,6vw,3rem);font-weight:700;color:#c9c2b3;letter-spacing:-.02em}
.bl-card__media::after{content:"View live \2197";position:absolute;right:.7rem;bottom:.7rem;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(17,17,17,.82);
  padding:.35rem .6rem;border-radius:100px;opacity:0;transform:translateY(4px);transition:.2s}
.bl-card:hover .bl-card__media::after{opacity:1;transform:translateY(0)}
.bl-card__body{padding:1.1rem 1.2rem 1.3rem}
.bl-card__role{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.4rem}
.bl-card__title{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.bl-card__note{margin-top:.45rem;font-size:.9rem;color:var(--color-text-muted);line-height:1.4}

/* ---- featured row on the home page ---- */
.bl-cta-row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:2rem}
.bl-textlink{text-decoration:none;color:#111;font-weight:600;border-bottom:2px solid var(--color-accent);padding-bottom:2px}
.bl-textlink:hover{color:var(--color-accent)}

@media (max-width:600px){
  .bl-workhead{flex-direction:column;align-items:flex-start}
}

/* Lab Mode button — force visibility over the parent .vellum-front a rule */
a.bl-vibe{color:#fff !important;background:#111 !important}
a.bl-vibe:hover,a.bl-vibe:focus{color:#fff !important;background:var(--color-accent) !important}

a.bl-vibe,a.bl-vibe:hover,a.bl-vibe:focus{text-decoration:none !important}