/* From the Rig Floor Report — WellCommand™ Weekly Brief
 * Shared styles for index.html + editions/edition-07.html + editions/edition-08.html
 *
 * Aligned to the wellcommand.ai portal design system (WCS Brand DNA v3.2 — locked):
 * sticky navy nav, full-bleed navy hero, Cormorant/Oswald/Inter scale, navy footer.
 * Editions 01-06 carry their own inline CSS and never load this file.
 *
 * CYAN HAS TWO VALUES AND THEY ARE NOT INTERCHANGEABLE (WCS-BRD-STD-001 v3.2.2):
 *   --forge-cyan  #5BA3C7  rules, borders, fills, and TEXT ON NAVY (6.58:1)
 *   --cyan-text   #347899  TEXT ON WHITE OR TINT (4.89:1 white / 4.56:1 #F4F7F9)
 * The locked Forge Cyan is 2.80:1 on white — far below AA. The portal's own
 * .eyebrow uses it on white; that is a contrast failure and is NOT copied here.
 * Same reason meta text on white is --silver-text #66737C (4.87:1), never
 * Silver #8A9BA8, which measures 2.86:1 on white.
 */

:root{
  --wcs-navy:#0A1628;
  --wcs-dark-navy:#1A2740;
  --wcs-silver:#8A9BA8;
  --wcs-white:#FFFFFF;
  --forge-cyan:#5BA3C7;
  --cyan-text:#347899;
  --silver-text:#66737C;
  --wcs-ink:#111827;
  --wcs-ink-soft:#374151;
  --wcs-tint:#F4F7F9;
  --wcs-rule:#D8DEE4;
  --measure:820px;

  --wcs-navy-rgb:10,22,40;
  --forge-cyan-rgb:91,163,199;
  --silver-rgb:138,155,168;
}

*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;}
html{scroll-behavior:smooth;}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--wcs-ink);
  background:var(--wcs-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--forge-cyan);color:var(--wcs-navy);
  font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  padding:14px 24px;
}
.skip:focus{left:0;}

/* ============================================================
   TOP NAV — navy bar, portal pattern, public-safe links only
   ============================================================ */
.nav{
  background:var(--wcs-navy);
  border-bottom:1px solid rgba(var(--forge-cyan-rgb),0.25);
  position:sticky;top:0;z-index:100;
}
.nav-inner{
  max-width:var(--measure);margin:0 auto;padding:14px 40px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px 24px;
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--wcs-white);}
.nav-brand-mark{width:44px;height:44px;overflow:hidden;display:block;flex:none;}
.brand-mark-img{width:100%;height:100%;display:block;object-fit:cover;}
.nav-brand-text{
  font-family:'Oswald',sans-serif;font-size:17px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:400;white-space:nowrap;
}
.nav-brand-text strong{color:var(--forge-cyan);font-weight:500;}

.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.nav-links a{
  color:var(--wcs-silver);text-decoration:none;font-size:13px;
  font-family:'Oswald',sans-serif;letter-spacing:1.2px;text-transform:uppercase;
  transition:color .2s ease;white-space:nowrap;
}
.nav-links a:hover{color:var(--wcs-white);}
.nav-links a.active{color:var(--forge-cyan);}

.nav-cta{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--forge-cyan);text-decoration:none;
  border:1px solid var(--forge-cyan);padding:9px 20px;
  transition:background .2s ease,color .2s ease;white-space:nowrap;flex:none;
}
.nav-cta:hover{background:var(--forge-cyan);color:var(--wcs-navy);}

/* ============================================================
   HERO — full-bleed navy, portal pattern
   ============================================================ */
.hero{
  background:var(--wcs-navy);color:var(--wcs-white);
  padding:88px 0 72px;
  border-bottom:1px solid rgba(var(--forge-cyan-rgb),0.18);
  position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--forge-cyan) 50%,transparent 100%);
  opacity:.4;
}
.hero-inner{max-width:var(--measure);margin:0 auto;padding:0 40px;position:relative;z-index:1;}

.hero-eyebrow{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--forge-cyan);margin-bottom:20px;font-weight:400;
}
.hero-eyebrow strong{font-weight:inherit;}
.hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(38px,6.4vw,64px);line-height:1.05;font-weight:500;letter-spacing:-1px;
  margin-bottom:24px;color:var(--wcs-white);
}
.hero h1 em{font-style:italic;color:var(--forge-cyan);}
.hero-deck{
  font-size:18px;line-height:1.7;color:var(--wcs-silver);max-width:760px;font-weight:300;
}
.hero-deck em{color:var(--wcs-white);font-style:italic;}
.hero-meta{margin-top:40px;display:flex;gap:32px;flex-wrap:wrap;}
.hero-meta-item{display:flex;flex-direction:column;}
.hero-meta-label{
  font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--wcs-silver);margin-bottom:6px;
}
.hero-meta-value{
  font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:1px;color:var(--wcs-white);
}

/* ============================================================
   CONTENT COLUMN
   ============================================================ */
.content-narrow{max-width:var(--measure);margin:0 auto;padding:72px 40px;}
.content-narrow > .eyebrow:first-child{margin-top:0;}

.eyebrow{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--cyan-text);margin:0 0 28px;font-weight:500;
}

.intro{margin-bottom:56px;}
.intro p{font-size:17px;line-height:1.75;color:var(--wcs-ink-soft);margin-bottom:22px;}
.intro p:last-child{margin-bottom:0;}

/* ============================================================
   ITEMS
   ============================================================ */
.item{padding:0 0 44px;margin-bottom:44px;border-bottom:1px solid var(--wcs-rule);}
.item:last-of-type{border-bottom:none;margin-bottom:0;}

.item-tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px;}
.tag{
  font-family:'Oswald',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  padding:4px 10px;font-weight:500;
}
.tag-news{background:var(--wcs-navy);color:var(--wcs-white);}
.tag-commentary{background:#EEF2F5;color:var(--wcs-ink-soft);border:1px solid var(--wcs-rule);}
.tag-source{
  color:var(--silver-text);font-family:'Inter',sans-serif;font-size:12px;
  letter-spacing:.2px;text-transform:none;
}

.item h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:34px;line-height:1.15;font-weight:500;letter-spacing:-.5px;
  color:var(--wcs-navy);margin-bottom:18px;
}
.item p{font-size:17px;line-height:1.75;color:var(--wcs-ink-soft);margin-bottom:22px;}
.item p strong{color:var(--wcs-navy);font-weight:600;}

/* WHY IT MATTERS — portal .integrity-block treatment */
.why-box{
  background:rgba(var(--forge-cyan-rgb),0.05);
  border-left:3px solid var(--forge-cyan);
  padding:26px 30px;margin:0 0 22px;
}
.why-box .why-label{
  font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--cyan-text);font-weight:500;display:block;margin-bottom:12px;
}
.why-box p{font-size:16px;line-height:1.75;color:var(--wcs-ink-soft);margin:0;}

.item-link{
  display:inline-block;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan-text);text-decoration:none;
  border-bottom:1px solid rgba(var(--forge-cyan-rgb),0.5);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.item-link:hover{color:var(--wcs-navy);border-bottom-color:var(--wcs-navy);}

/* ============================================================
   BY THE NUMBERS — full-bleed navy stat band
   ============================================================ */
.btn-section{background:var(--wcs-navy);color:var(--wcs-white);padding:72px 0;}
.btn-inner{max-width:var(--measure);margin:0 auto;padding:0 40px;}
.btn-section .eyebrow{color:var(--forge-cyan);}

.btn-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(var(--silver-rgb),0.25);
  border:1px solid rgba(var(--silver-rgb),0.25);
}
.btn-cell{background:var(--wcs-navy);padding:26px 16px;text-align:center;}
.btn-cell .num{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:44px;line-height:1;font-weight:500;letter-spacing:-1px;color:var(--forge-cyan);
}
.btn-cell .lbl{
  font-family:'Inter',sans-serif;font-size:12px;color:var(--wcs-silver);
  margin-top:10px;letter-spacing:.2px;line-height:1.45;
}
.btn-foot{
  font-size:13px;line-height:1.7;color:var(--wcs-silver);margin-top:24px;font-weight:300;
}

/* ============================================================
   THE RIG FLOOR TAKE — portal .macondo treatment
   ============================================================ */
.take{
  background:var(--wcs-dark-navy);color:var(--wcs-white);
  border-left:4px solid var(--forge-cyan);
  padding:56px 52px;
}
.take .eyebrow{color:var(--forge-cyan);}
.take-body{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:24px;line-height:1.5;font-weight:400;color:var(--wcs-white);letter-spacing:-.2px;
}
.take-body p{margin-bottom:22px;}
.take-body p:last-child{margin-bottom:0;}
.take-body strong{color:var(--wcs-white);font-weight:600;}

/* ============================================================
   CTA — full-bleed navy band
   ============================================================ */
.cta{background:var(--wcs-navy);color:var(--wcs-white);padding:72px 0;text-align:center;}
.cta-inner{max-width:var(--measure);margin:0 auto;padding:0 40px;}
.cta h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:44px;line-height:1.15;font-weight:500;letter-spacing:-.5px;
  color:var(--wcs-white);margin-bottom:16px;
}
.cta h2 em{font-style:italic;color:var(--forge-cyan);}
.cta p{font-size:17px;line-height:1.7;color:var(--wcs-silver);margin-bottom:32px;font-weight:300;}
.cta-btn{
  display:inline-block;font-family:'Oswald',sans-serif;font-size:13px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:500;color:var(--wcs-navy);background:var(--forge-cyan);
  padding:15px 34px;text-decoration:none;transition:opacity .2s ease;
}
.cta-btn:hover{opacity:.88;}

/* ============================================================
   SIGNATURE
   ============================================================ */
.signature{
  /* Sits outside .content-narrow, so without its own measure it ran the full
     width and the mark and name sat hard against the left edge of the screen.
     Match the container every other band uses so it lines up with the copy. */
  max-width:var(--measure);margin:0 auto;padding:8px 40px 0;
}
.signature img{height:56px;width:auto;display:block;margin-bottom:10px;}
.sig-name{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:16px;
  color:var(--wcs-navy);letter-spacing:1px;text-transform:uppercase;
}
.sig-title{font-size:14px;color:var(--wcs-ink-soft);margin-top:3px;}
.sig-title .accent{color:var(--cyan-text);font-weight:600;}

/* ============================================================
   PAST EDITIONS — portal .portal-card treatment
   ============================================================ */
.archive{background:var(--wcs-tint);border-top:1px solid var(--wcs-rule);padding:72px 0;}
.arch-inner{max-width:var(--measure);margin:0 auto;padding:0 40px;}
.arch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.arch-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--wcs-ink);
  background:var(--wcs-white);border:1px solid rgba(var(--silver-rgb),0.4);
  transition:border-color .3s ease,transform .3s ease;
}
.arch-card:hover{border-color:var(--forge-cyan);transform:translateY(-2px);}
.arch-thumb{
  aspect-ratio:1200/627;background:var(--wcs-navy);
  background-size:cover;background-position:center;
  border-bottom:3px solid var(--forge-cyan);
}
.arch-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex-grow:1;}
.arch-ed{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--cyan-text);display:block;
}
.arch-week{font-size:13px;color:var(--silver-text);display:block;margin-top:4px;}
.arch-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:500;
  color:var(--wcs-navy);line-height:1.2;margin-top:10px;flex-grow:1;
}
.arch-go{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--wcs-navy);margin-top:18px;display:inline-flex;align-items:center;gap:8px;
}
.arch-go::after{content:"\2192";transition:transform .3s ease;}
.arch-card:hover .arch-go{color:var(--cyan-text);}
.arch-card:hover .arch-go::after{transform:translateX(4px);}

/* ============================================================
   FOOTER — portal footer, brief's legal copy preserved
   ============================================================ */
.footer{background:var(--wcs-dark-navy);color:var(--wcs-silver);padding:64px 0 40px;}
.footer-inner{max-width:var(--measure);margin:0 auto;padding:0 40px;}
.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;
  padding-bottom:40px;border-bottom:1px solid rgba(var(--silver-rgb),0.2);
}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.footer-brand-mark{width:44px;height:44px;overflow:hidden;display:block;flex:none;}
.footer-brand-text{
  font-family:'Oswald',sans-serif;font-size:17px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:400;color:var(--wcs-white);
}
.footer-brand-text strong{color:var(--forge-cyan);font-weight:500;}
.footer-tagline{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-style:italic;
  color:var(--wcs-silver);max-width:360px;
}
.footer-col h5{
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--forge-cyan);margin-bottom:14px;font-weight:500;
}
.footer-col p{font-size:14px;line-height:1.7;color:var(--wcs-silver);margin:0;}
.footer-col a{color:var(--wcs-silver);text-decoration:none;border-bottom:1px solid rgba(var(--silver-rgb),0.4);}
.footer-col a:hover{color:var(--wcs-white);border-bottom-color:var(--wcs-white);}

.disclaimer{padding:32px 0 0;}
.disclaimer p{font-size:12px;line-height:1.7;color:var(--wcs-silver);margin-bottom:12px;}
.disclaimer strong{color:var(--wcs-white);font-weight:500;}

.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  margin-top:24px;padding-top:24px;border-top:1px solid rgba(var(--silver-rgb),0.2);
  font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--wcs-silver);
}
.footer-motto{color:var(--forge-cyan);}

/* ============================================================
   ABOUT THE AUTHOR — panel sits on white now, not on a sheet
   ============================================================ */
.wcs-author{margin:0 0 8px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .btn-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:720px){
  /* the nav bar cannot fit brand + links + CTA on one 390px row, and a
     three-row sticky bar would eat a third of a phone screen. Two rows,
     and it stops being sticky below this width. */
  .nav{position:static;}
  .nav-inner{padding:12px 24px;gap:10px 16px;flex-wrap:wrap;}
  .nav-brand-mark{width:36px;height:36px;}
  .nav-brand-text{font-size:14px;letter-spacing:1.2px;}
  .nav-cta{font-size:11px;letter-spacing:1.2px;padding:8px 12px;}
  .nav-links{gap:18px;order:2;}
  .nav-cta{order:3;}
  .nav-links a{font-size:12px;}
  .hero{padding:56px 0 48px;}
  .hero-deck{font-size:17px;}
  .hero-meta{gap:24px;}
  .content-narrow{padding:48px 24px;}
  .item h3{font-size:28px;}
  .hero-inner,.btn-inner,.cta-inner,.arch-inner,.footer-inner,.signature{padding-left:24px;padding-right:24px;}
  .btn-section,.cta{padding:48px 0;}
  .archive{padding:48px 0;}
  .take{padding:36px 28px;}
  .take-body{font-size:21px;}
  .cta h2{font-size:34px;}
  .why-box{padding:22px 22px;}
  .arch-grid{grid-template-columns:1fr;}
  .footer{padding:48px 0 32px;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px;}
}

/* ---- Focus affordance ---- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--forge-cyan);outline-offset:3px;
}
.nav a:focus-visible,.hero a:focus-visible,.btn-section a:focus-visible,
.cta a:focus-visible,.take a:focus-visible,.footer a:focus-visible{
  outline-color:var(--forge-cyan);
}

/* ---- Touch targets (WCAG 2.5.8) ----
   Standalone links on this page render 14-33px tall: the per-item source links
   ("Read the source →"), the footer meta link, and the author block's
   LinkedIn / web / contact links. WCAG exempts a link sitting inline inside a
   sentence — none of these are. Each is the only content of its own line, so
   giving it a 44px tap box costs nothing in flow.

   Triggered on narrow viewports OR a coarse pointer. Pointer alone was wrong:
   2.5.8 is about target size, not input device, and a desktop browser at phone
   width reports `pointer: fine` — so the rule silently did not apply anywhere
   an audit could measure it, which is exactly where it needed to. */
@media (max-width: 640px), (pointer: coarse) {
  .item-link,
  .read,
  .arch-go,
  .nav-links a,
  .nav-cta,
  .footer-col a,
  .meta a,
  .wcs-author .links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}