/* ============ FREDERICK STUDIOS — SUBPAGES (Launch Areas) ============
   Loaded AFTER styles.css (which is never modified). Index pages stay
   LOUD (poster titles, plate cards in the homepage anatomy); article and
   story pages go QUIET (Kristen's dialect): Oswald only for headline,
   pull-quotes and eyebrows; an Inter reading column at ~44rem; glow
   reserved for chrome and the end-of-article CTA; reveals only — no
   ticker, no cards competing with paragraphs.
   Motion law (same as styles.css): transform/opacity only; no animated
   background-position, blur, or box-shadow; reduced-motion safe. */

.sub-main{padding-top:var(--header-h)}
.wrap-read{max-width:44rem;margin:0 auto;padding:0 24px}

/* ---- Loud page hero (index pages: Articles, Work, Offer) ---- */
.page-hero{padding:72px 24px 8px;text-align:center}
.poster-title{
  font-family:var(--font-head); font-weight:700; text-transform:uppercase;
  font-size:clamp(52px, 9vw, 104px); letter-spacing:2px; line-height:1.02;
  color:var(--ink); text-shadow:0 0 34px rgba(46,187,242,.35);
  margin-bottom:20px;
}
.poster-title.offer-title{font-size:clamp(40px, 6.4vw, 76px)}
.page-hero-intro{max-width:720px;margin:0 auto;font-size:18.5px;line-height:1.6}

/* ---- Articles index: featured + plate cards ---- */
.articles-wrap,.work-wrap{padding-bottom:96px}
.article-featured{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  margin-top:52px; position:relative; overflow:hidden;
  background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--glow-line); border-radius:var(--radius);
  box-shadow:var(--glow-rest), inset 0 1px 0 rgba(255,255,255,.06);
}
.article-featured .card-band{height:230px}
.article-featured-body{padding:30px 34px 36px;text-align:left}
.article-featured h2{
  font-size:clamp(28px,4vw,40px); font-weight:600; text-transform:uppercase;
  letter-spacing:1px; margin-bottom:12px; line-height:1.15;
}
.article-featured .card-desc{font-size:17.5px;-webkit-line-clamp:3}
.card-eyebrow{
  font-family:var(--font-head); font-size:13px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--blue-4);
  margin-bottom:12px;
}
.read-story{
  margin-top:18px; font-family:var(--font-head); font-weight:600; font-size:15px;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--blue-4);
}
.article-grid{margin-top:26px}
.article-card{text-decoration:none;color:inherit;text-align:left}
.article-card .card-body{text-align:left}
.article-card .card-desc{-webkit-line-clamp:5}
.article-card h3{text-transform:none;letter-spacing:.2px;font-size:22px;line-height:1.3}
@media (hover:hover) and (min-width:761px){
  .article-featured{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease}
  .article-featured:hover{transform:translateY(-4px); border-color:var(--glow-line-hi); box-shadow:var(--glow-hover), inset 0 1px 0 rgba(255,255,255,.06)}
  .article-featured:hover h2{color:var(--blue-4)}
}

/* ---- Work index ---- */
a.work-card{text-decoration:none;color:inherit}
.story-chip{
  display:inline-block; margin-top:16px;
  font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--muted);
  border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:4px 12px;
}

/* ---- Quiet reading pages (article + story body) ---- */
.article-head{padding-top:64px;text-align:left}
.article-head .eyebrow{margin-bottom:16px}
.article-title{
  font-size:clamp(34px, 5.4vw, 52px); font-weight:600; line-height:1.12;
  letter-spacing:.4px; margin-bottom:20px;
}
.article-dek{font-size:20.5px; line-height:1.55; color:var(--ink); margin-bottom:26px}
.byline{
  font-family:var(--font-head); font-size:14px; font-weight:500;
  letter-spacing:2px; text-transform:uppercase; color:var(--muted);
  padding-bottom:26px; border-bottom:1px solid rgba(46,187,242,.22);
}
.article-body{padding-top:36px; font-size:18px; line-height:1.78}
.article-body p{margin-bottom:24px; max-width:68ch}
.article-body strong{color:var(--ink)}
.article-body a{color:var(--blue-4)}
.article-body h2{
  font-size:29px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
  line-height:1.25; margin:46px 0 18px;
}
.article-body h3{
  font-size:22px; font-weight:600; letter-spacing:.6px;
  line-height:1.3; margin:36px 0 14px;
}
.article-body ul,.article-body ol{margin:0 0 24px 26px; max-width:66ch}
.article-body li{margin-bottom:10px; line-height:1.7}
.article-body li::marker{color:var(--blue-4); font-weight:600}
.pull-quote{
  margin:44px 0; padding:6px 0 6px 26px;
  border-left:3px solid var(--blue-4);
}
.pull-quote p{
  font-family:var(--font-head); font-weight:600; font-size:26px;
  line-height:1.35; color:var(--ink); margin-bottom:10px; max-width:26em;
}
.pull-quote .pq-attr{
  font-family:var(--font-body); font-weight:500; font-size:15.5px;
  color:var(--muted); margin-bottom:0;
}

/* ---- End-of-article CTA + related ---- */
.end-cta{
  margin:56px 0 8px; text-align:center;
  background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--glow-line); border-radius:var(--radius);
  box-shadow:var(--glow-cta), inset 0 1px 0 rgba(255,255,255,.06);
  padding:44px 34px;
}
.end-cta h2{
  font-size:29px; font-weight:600; text-transform:uppercase; letter-spacing:1px;
  margin-bottom:12px; line-height:1.2;
}
.end-cta p{font-size:17px; margin-bottom:26px}
.end-cta-actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.related{padding:48px 0 96px}
.related-title{
  font-size:21px; font-weight:600; text-transform:uppercase; letter-spacing:1.5px;
  margin-bottom:22px;
}
.related-row{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.related-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
  padding:22px 22px 24px;
}
.related-card .card-eyebrow{margin-bottom:8px}
.related-card h3{font-size:18.5px; line-height:1.32; font-weight:600}
@media (hover:hover) and (min-width:761px){
  .related-card{transition:transform .25s ease, border-color .25s ease}
  .related-card:hover{transform:translateY(-3px); border-color:var(--glow-line-hi)}
  .related-card:hover h3{color:var(--blue-4)}
}

/* ---- Work story ---- */
.story-band{
  position:relative; overflow:hidden; margin-top:calc(var(--header-h) * -1);
  padding-top:var(--header-h);
}
.story-band-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.story-band-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,11,26,.58), rgba(7,11,26,.38) 45%, rgba(7,11,26,.88));
}
.story-band-copy{position:relative; z-index:2; padding:110px 24px 64px; max-width:1240px}
.story-title{
  font-size:clamp(38px, 6vw, 64px); font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; line-height:1.05; margin-bottom:18px; max-width:14em;
  text-shadow:0 4px 30px rgba(0,0,0,.55);
}
.story-dek{font-size:20px; line-height:1.55; color:#fff; max-width:36em;
  text-shadow:0 2px 18px rgba(0,0,0,.6)}
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  margin:52px auto 8px; max-width:1240px;
}
.stat-cell{
  text-align:center; padding:28px 14px 24px;
  background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--glow-line); border-radius:var(--radius);
  box-shadow:var(--glow-rest), inset 0 1px 0 rgba(255,255,255,.06);
}
.stat-value{
  font-family:var(--font-head); font-weight:700; font-size:clamp(30px,4vw,44px);
  line-height:1; color:var(--blue-4); text-shadow:0 0 22px rgba(46,187,242,.4);
  margin-bottom:10px;
}
.stat-label{
  font-family:var(--font-head); font-size:13px; font-weight:500;
  letter-spacing:1.6px; text-transform:uppercase; color:var(--body);
}

/* ---- Offer ---- */
.offer-wrap{max-width:860px; padding-bottom:96px}
.offer-card{
  margin-top:52px; text-align:center;
  background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--glow-line); border-radius:var(--radius);
  box-shadow:var(--glow-rest), inset 0 1px 0 rgba(255,255,255,.06);
  padding:48px 40px;
}
.offer-price{margin-bottom:30px}
.offer-amount{
  display:block; font-family:var(--font-head); font-weight:700;
  font-size:clamp(56px,9vw,84px); line-height:1; color:var(--ink);
  text-shadow:0 0 30px rgba(46,187,242,.4);
}
.offer-for{
  display:block; margin-top:10px; font-family:var(--font-head); font-size:15px;
  font-weight:500; letter-spacing:2.5px; text-transform:uppercase; color:var(--blue-4);
}
.offer-includes-title{
  font-size:22px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:20px;
}
.offer-includes{list-style:none; text-align:left; max-width:560px; margin:0 auto 34px}
.offer-includes li{
  font-size:17.5px; line-height:1.55; padding:13px 0 13px 30px; position:relative;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.offer-includes li:last-child{border-bottom:0}
.offer-includes li::before{
  content:""; position:absolute; left:2px; top:22px; width:9px; height:9px;
  border-radius:50%; background:var(--blue-4); box-shadow:0 0 12px rgba(46,187,242,.6);
}
.faq{margin-top:56px}
.faq-title{
  font-size:26px; font-weight:600; text-transform:uppercase; letter-spacing:1.2px;
  text-align:center; margin-bottom:28px;
}
.faq-item{
  background:var(--glass); border:1px solid var(--glass-border); border-radius:16px;
  padding:26px 28px; margin-bottom:16px;
}
.faq-item h3{font-size:19.5px; font-weight:600; margin-bottom:8px}
.faq-item p{font-size:16.5px; line-height:1.6}

/* ---- Contact ---- */
.contact-section{padding-top:72px}
.contact-chips{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:6px 0 34px}
.contact-chip{
  font-family:var(--font-head); font-weight:600; font-size:15.5px; letter-spacing:1px;
  color:var(--ink); text-decoration:none;
  border:1px solid var(--glow-line); border-radius:999px; padding:11px 24px;
  background:rgba(7,109,242,.10);
}
@media (hover:hover) and (min-width:761px){
  .contact-chip{transition:transform .2s ease, border-color .2s ease}
  .contact-chip:hover{transform:translateY(-2px); border-color:var(--glow-line-hi); color:var(--blue-4)}
}

/* ---- Responsive ---- */
@media (max-width:980px){
  .related-row{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .page-hero{padding-top:52px}
  .article-head{padding-top:48px}
  .article-body{font-size:17.5px}
  .story-band-copy{padding:84px 24px 52px}
  .offer-card{padding:38px 24px}
}
@media (max-width:560px){
  .stats-strip{grid-template-columns:1fr 1fr; gap:12px}
  .article-featured-body{padding:26px 24px 30px}
  .article-featured .card-band{height:180px}
  .end-cta{padding:36px 24px}
  .end-cta-actions .btn{flex:1 1 100%; text-align:center}
  .offer-actions .btn{flex:1 1 100%; text-align:center}
  .pull-quote p{font-size:23px}
}

@media (prefers-reduced-motion: reduce){
  .article-featured,.related-card,.contact-chip{transition:none !important}
}