/* Next Gen Talent — discovery surface. Editorial "Glossy Trade" system,
   shared by the landing page and the /learn knowledge pages. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --paper:#FAF8F5; --ink:#141414; --accent:#C8102E;
  --rule:rgba(20,20,20,.20); --rule-soft:rgba(20,20,20,.10);
  --display:'Oswald',Impact,'Arial Narrow',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:inherit;}
.wrap{max-width:940px;margin:0 auto;padding:0 24px;}
.measure{max-width:68ch;}

/* Kicker / eyebrow */
.kicker{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--accent);}

/* Header / nav */
.site-header{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(250,248,245,.94);backdrop-filter:blur(6px);z-index:20;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px;gap:16px;}
.brand{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:15px;text-decoration:none;}
.brand span{color:var(--accent);}
.nav{display:flex;gap:22px;align-items:center;}
.nav a{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:12px;text-decoration:none;color:var(--ink);}
.nav a:hover{color:var(--accent);}
/* Narrow desktop, just above the 640px two-row phone header. With Home and
   Contact in the menu there are five items plus the wordmark, and at the 22px
   gap the links wrapped to two lines inside a 60px header. Measured break is
   641-651px; the band runs to 660 so the fix does not sit on its own edge.
   ⛔ Do NOT add white-space:nowrap here. It was tried and reverted: when Oswald
   has not painted yet the fallback is wider, and nowrap converts a contained
   two-line wrap into 25-84px of horizontal page overflow with the Get the
   Playbook button cut off at the viewport edge. A wrap is the safe failure. */
@media (min-width:641px) and (max-width:660px){
  .nav{gap:13px;}
}
/* Mobile header nav is handled in the mobile block at the foot of this file.
   (This rule used to be display:none, which left phones with no navigation.) */

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;text-decoration:none;padding:13px 22px;border:2px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:all .18s ease;min-height:44px;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-primary:hover{background:#a50d26;border-color:#a50d26;color:#fff;}

/* Hero */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--rule);}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,8vw,84px);line-height:.94;letter-spacing:.005em;margin:14px 0 20px;overflow-wrap:break-word;}
.hero .lede{font-size:clamp(19px,2.4vw,23px);line-height:1.5;max-width:60ch;font-style:italic;margin-bottom:32px;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;}

/* Sections */
section.block{padding:56px 0;border-bottom:1px solid var(--rule);}
section.block h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(26px,4vw,40px);line-height:1.05;letter-spacing:.01em;margin-bottom:8px;}
section.block h2 + .rule,.hr{width:44px;height:3px;background:var(--accent);border:0;margin:14px 0 28px;}
section.block p{font-size:18px;line-height:1.62;max-width:68ch;margin-bottom:16px;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:8px;}
.card{border:1px solid var(--rule);padding:24px;}
.card .num{font-family:var(--display);font-weight:700;font-size:34px;color:transparent;-webkit-text-stroke:1.3px var(--rule);line-height:1;}
.card h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:16px;margin:10px 0 8px;}
.card p{font-size:16px;margin:0;}
.card a.more{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--accent);text-decoration:none;display:inline-block;margin-top:12px;}

/* Authority / Ellen */
.author{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:start;}
.author .avatar{width:120px;height:120px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:44px;}
@media (max-width:560px){ .author{grid-template-columns:1fr;} }

/* FAQ accordion */
.faq details{border-top:1px solid var(--rule);padding:18px 0;}
.faq details:last-child{border-bottom:1px solid var(--rule);}
.faq summary{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:14px 0 0;font-size:17px;}

/* Definition list (glossary) */
.terms{column-count:1;}
.terms .term{border-top:1px solid var(--rule-soft);padding:14px 0;break-inside:avoid;}
.terms dt{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:15px;}
.terms dd{font-size:17px;line-height:1.55;margin-top:4px;max-width:68ch;}
.alpha-nav{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px;}
.alpha-nav a{font-family:var(--display);font-weight:600;font-size:13px;text-decoration:none;color:var(--ink);border:1px solid var(--rule);padding:4px 9px;}
.alpha-nav a:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

/* CTA banner */
.cta-banner{background:var(--ink);color:var(--paper);padding:56px 0;text-align:center;}
.cta-banner h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,4vw,42px);line-height:1.02;margin-bottom:10px;}
.cta-banner p{max-width:52ch;margin:0 auto 26px;opacity:.85;}
.cta-banner .btn{border-color:var(--paper);color:var(--paper);}
.cta-banner .btn:hover{background:var(--paper);color:var(--ink);}
.cta-banner .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Footer */
.site-footer{padding:40px 0;font-size:13px;color:var(--ink);}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;}
.site-footer a{color:var(--ink);text-decoration:none;}
.site-footer .disc{font-size:12px;opacity:.7;max-width:60ch;}

/* breadcrumb */
.crumb{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:rgba(20,20,20,.6);padding:18px 0 0;}
.crumb a{color:inherit;text-decoration:none;}
.crumb a:hover{color:var(--accent);}

/* article */
.article h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(32px,6vw,58px);line-height:1;letter-spacing:.005em;margin:10px 0 18px;overflow-wrap:break-word;}
.article .lede{font-size:clamp(19px,2.3vw,22px);font-style:italic;line-height:1.5;max-width:62ch;margin-bottom:8px;}
.article h2{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(22px,3.4vw,30px);letter-spacing:.01em;margin:40px 0 10px;padding-left:15px;border-left:3px solid var(--accent);}
.article h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(16px,2.1vw,19px);letter-spacing:.05em;margin:28px 0 10px;}
.article p{font-size:18px;line-height:1.64;max-width:68ch;margin:0 0 16px;}
.article ul{max-width:68ch;margin:0 0 18px;padding-left:0;list-style:none;}
.article li{font-size:18px;line-height:1.6;position:relative;padding-left:24px;margin-bottom:10px;}
.article li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--accent);}

/* ===================================================================
   MOBILE  —  everything from 641px up is deliberately untouched.
   All phone work lives in this block so the desktop cascade is
   provably unchanged.
   =================================================================== */
@media (max-width:640px){
  body{overflow-x:hidden;}
  a,button,summary{-webkit-tap-highlight-color:rgba(200,16,46,.14);}

  /* Gutters: tighter on a phone. The env() term is future-proofing only and
     currently resolves to 0 - Safari reports safe-area insets solely when the
     viewport meta carries viewport-fit=cover, and these pages do not set it. */
  .wrap{padding-left:max(20px,env(safe-area-inset-left));
        padding-right:max(20px,env(safe-area-inset-right));}

  /* --- Header -------------------------------------------------------
     Row 1: wordmark + Get the Playbook.  Row 2: the section links.
     They were previously display:none, so a phone had no way to reach
     Free Guides, About Ellen or the FAQ from the header at all.

     The button is a FLEX ITEM, not absolutely positioned. An absolute
     button reserves no space, and the wordmark is set in Oswald with a
     generic-sans fallback: iOS ships neither Impact nor Arial Narrow, and
     font-display:swap paints the wide fallback until Oswald arrives (or
     forever, if fonts.googleapis.com is blocked). Measured at 280px the
     fallback wordmark ran 30px past the button's left edge and "ENT"
     became a mailto link. In flex the two can never collide: the brand
     shrinks and ellipsises, the button never does.

     .nav is display:contents so its children become flex items of .wrap;
     .nav::before is a zero-height 100% item that forces the links onto
     row 2 and carries the divider rule .nav itself can no longer draw. */
  .site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;
       height:auto;column-gap:10px;row-gap:0;padding-top:7px;padding-bottom:0;}
  /* inline-block, NOT inline-flex: the wordmark is "Next Gen <span>Talent</span>"
     and a flex container drops the whitespace between the text node and the
     span, which renders it as "NEXT GENTALENT". line-height carries the height. */
  .brand{display:inline-block;line-height:36px;font-size:14px;order:1;
       flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nav{display:contents;}
  .nav a.btn{order:2;flex:0 0 auto;margin-left:auto;
       min-height:38px;padding:9px 14px;font-size:11px;white-space:nowrap;}
  .nav::before{content:"";order:3;flex:0 0 100%;height:0;
       margin-top:6px;border-top:1px solid var(--rule-soft);}
  .nav a:not(.btn){order:4;display:inline-flex;align-items:center;justify-content:center;
       flex:1 1 auto;min-height:38px;padding:0 6px;font-size:12px;text-align:center;}

  /* F7: in-page anchors (#faq, #unlock) must clear the taller sticky header. */
  section[id],[id]:target{scroll-margin-top:96px;}

  /* --- Rhythm: phones do not need desktop's vertical air ------------- */
  .hero{padding:44px 0 40px;}
  .hero .lede{margin-bottom:26px;}
  .cta-row{gap:12px;}
  .cta-row .btn{flex:1 1 100%;}   /* hero AND the #unlock row at the foot of the home page */
  section.block{padding:40px 0;}
  .grid{gap:16px;}
  .card{padding:20px;}

  /* Card actions are the primary route into each guide: give them a real
     tap target instead of a 19px line of text. */
  .card a.more{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;}

  /* --- FAQ ----------------------------------------------------------- */
  .faq details{padding:6px 0;}
  .faq summary{min-height:44px;display:flex;align-items:center;padding:10px 0;font-size:15px;}
  .faq details p{margin-bottom:12px;}


  /* --- Article pages ------------------------------------------------- */
  .crumb{padding-top:14px;line-height:1.9;}
  .crumb a{display:inline-block;padding:5px 0;}
  .article h2{margin-top:32px;padding-left:12px;}
  .article p,.article li{font-size:17px;}

  /* --- CTA banner ---------------------------------------------------- */
  .cta-banner{padding:44px 0;}
  .cta-banner p{opacity:.92;}
  .cta-banner .btn{width:100%;}

  /* --- Footer -------------------------------------------------------- */
  .site-footer{padding:28px 0 calc(24px + env(safe-area-inset-bottom));}
  .site-footer .wrap{gap:4px 20px;}
  .site-footer a{display:inline-flex;align-items:center;min-height:44px;}
  .site-footer .disc{font-size:12.5px;line-height:1.55;}
}

/* Smallest phones: pull the display type in one more notch. */
@media (max-width:360px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left));
        padding-right:max(16px,env(safe-area-inset-right));}
  /* Four menu items, not two: the 10px column gap pushed the links onto a
     second row below ~290px, doubling the sticky header. */
  .site-header .wrap{column-gap:4px;}
  .nav a.btn{padding:9px 11px;font-size:10px;}
  .nav a:not(.btn){font-size:11px;padding:0 2px;}
  .brand{font-size:13px;}
}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;} }