/* ==========================================================
   THINK DESIGN SCHOOL -- shared stylesheet
   Used by: index.html, contact.html, and all article pages.
   Sectioned below so each page's rules are easy to find.
   Selectors that exist on more than one page but need to
   look different are scoped with a body class, e.g.
   'body.page-index .hero' vs '.page-article .hero'.
   ========================================================== */


/* ---------- 1. HOMEPAGE (index.html) ---------- */

:root{
    --paper:#F2EEE2;
    --card:#FBF8EF;
    --ink:#211F1A;
    --accent:#4C5FAB;
    --accent-deep:#333F73;
    --moss:#485E43;
    --rule:#D6CCB4;
    --mute:#6F695C;
    --indigo:#4C5FAB;
    --indigo-tint:#E9EBF7;
    --moss-deep:#2F3D2A;
    --clay:#C9A688;
    --bad:#BD5B3B;
    --bad-tint:#F6E9E3;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body.page-index{
    background:var(--paper);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    background-image:
      linear-gradient(rgba(33,31,26,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(33,31,26,0.05) 1px, transparent 1px);
    background-size:64px 64px;
    background-position:-1px -1px;
    background-attachment:local;
  }
  h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;}
  .mono{font-family:'IBM Plex Mono',monospace;letter-spacing:0.02em;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  }

  /* ---------- bars mark ---------- */
  .bars{display:inline-flex;align-items:flex-end;gap:4px;}
  .bars svg{display:block;}

  /* ---------- nav ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(242,238,226,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1.5px solid var(--ink);
  }
  body.page-index nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1180px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-text{display:flex;flex-direction:column;line-height:1.02;}
  .brand-text .t1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;}
  .brand-text .t2{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase;margin-top:2px;}
  .navlinks{display:flex;gap:36px;align-items:center;}
  .navlinks a:not(.nav-cta){font-size:14.5px;font-weight:600;color:var(--ink);position:relative;padding:4px 0;}
  .navlinks a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .25s ease;}
  .navlinks a:not(.nav-cta):hover::after{width:100%;}
  .navlinks .nav-cta{
    display:inline-block;
    background:var(--ink) !important;color:var(--paper) !important;padding:11px 22px !important;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
    font-size:13.5px;font-weight:700;line-height:1;
    transition:background .2s ease, color .2s ease;
  }
  .navlinks .nav-cta:hover{background:var(--accent-deep) !important;color:var(--paper) !important;}
  @media (max-width:860px){.navlinks-inner{display:none;}}

  /* ---------- hero ---------- */
  .page-index .hero{padding:88px 0 56px;position:relative;}
  .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);
    border:1.5px solid var(--ink);padding:6px 14px 6px 10px;margin-bottom:26px;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  }
  .eyebrow::before{content:'';width:7px;height:7px;background:var(--accent);}
  .hero h1{font-size:clamp(38px,5.2vw,64px);font-weight:700;line-height:1.04;margin-bottom:22px;}
  .hero h1 .underline{
    position:relative;white-space:nowrap;
  }
  .hero h1 .underline svg{position:absolute;left:0;bottom:-10px;width:100%;height:14px;}
  .hero p.lede{font-size:18px;line-height:1.6;color:var(--mute);max-width:520px;margin-bottom:36px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
  .btn-primary{
    background:var(--ink);color:var(--paper);padding:15px 30px;
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;
    transition:transform .2s ease, background .2s ease;
  }
  .btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);}
  .btn-secondary{
    border:1.5px solid var(--ink);padding:13.5px 28px;
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    font-weight:700;font-size:14.5px;transition:all .2s ease;
  }
  .btn-secondary:hover{background:var(--ink);color:var(--paper);}
  .tag-row{display:flex;flex-wrap:wrap;gap:10px;}
  .page-index .tag{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--mute);border:1px solid var(--rule);padding:6px 13px;}

  .hero-art{position:relative;display:flex;justify-content:center;align-items:center;height:420px;}
  .hero-art svg{width:100%;max-width:380px;height:auto;}
  .hero-bar{transform-origin:bottom;transform:scaleY(0);animation:grow 0.9s cubic-bezier(.2,.7,.3,1) forwards;}
  .hero-bar:nth-child(1){animation-delay:.15s;}
  .hero-bar:nth-child(2){animation-delay:.32s;}
  .hero-bar:nth-child(3){animation-delay:.49s;}
  @keyframes grow{to{transform:scaleY(1);}}
  .hero-art .dot{opacity:0;animation:fadein .5s ease forwards;animation-delay:.9s;}
  @keyframes fadein{to{opacity:1;}}
  .hero-art .grid-tick{stroke:var(--rule);stroke-width:1;}
  .hero-art .measure{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--mute);}

  /* ---------- section shared ---------- */
  section{padding:100px 0;}
  .section-head{max-width:640px;margin-bottom:56px;}
  .page-index .section-eyebrow{
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;display:flex;align-items:center;gap:10px;
  }
  .section-eyebrow::before{content:'';width:24px;height:2px;background:var(--accent);display:inline-block;}
  .section-head h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;margin-bottom:16px;}
  .section-head p{font-size:16.5px;color:var(--mute);line-height:1.6;}

  /* ---------- ruled divider ---------- */
  .ruled-divider{border-top:1.5px dashed var(--rule);}

  /* ---------- services (parallelogram-cut cards) ---------- */
  .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .service-card{
    background:var(--card);border:1.5px solid var(--ink);padding:34px 26px 28px;
    clip-path:polygon(0 0,100% 0,100% 100%,22px 100%);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .service-card:hover{transform:translateY(-4px);}
  .service-icon{margin-bottom:24px;}
  .service-card h3{font-size:18.5px;font-weight:600;margin-bottom:12px;}
  .service-card p{font-size:14px;color:var(--mute);line-height:1.6;}
  @media (max-width:960px){.services-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.services-grid{grid-template-columns:1fr;}}

  /* ---------- stat ruler band ---------- */
  .ruler-band{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:52px 0;position:relative;}
  .ruler-band::before{
    content:'';position:absolute;top:-1px;left:0;right:0;height:8px;
    background-image:repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 40px);
  }
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center;}
  .stat-grid .num{font-family:'IBM Plex Mono',monospace;font-size:clamp(30px,4vw,44px);font-weight:500;color:var(--ink);position:relative;display:inline-block;}
  .stat-grid .num::after{content:'';position:absolute;left:10%;right:10%;bottom:-8px;height:4px;background:var(--accent);}
  .stat-grid .label{font-size:13.5px;color:var(--mute);margin-top:18px;letter-spacing:0.02em;}
  @media (max-width:700px){.stat-grid{grid-template-columns:1fr 1fr;row-gap:44px;}}

  /* ---------- why grid (slanted-left cards) ---------- */
  .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .why-card{
    background:var(--card);border:1.5px solid var(--rule);padding:32px 28px;
    border-left:4px solid var(--moss);
    transition:border-color .25s ease, transform .2s ease;
  }
  .why-card:hover{border-left-color:var(--accent);transform:translateY(-3px);}
  .why-mark{margin-bottom:18px;}
  .why-card h3{font-size:17px;font-weight:600;margin-bottom:10px;}
  .why-card p{font-size:14px;color:var(--mute);line-height:1.6;}
  @media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.why-grid{grid-template-columns:1fr;}}

  /* ---------- articles ---------- */
  .articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .article-card{
    background:var(--card);border:1.5px solid var(--rule);padding:24px;
    display:flex;flex-direction:column;height:100%;transition:transform .25s ease, border-color .25s ease;
  }
  .article-card:hover{transform:translateY(-4px);border-color:var(--ink);}
  .article-cat{
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;
    display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;color:var(--ink);
  }
  .article-cat::before{content:'';width:8px;height:8px;background:var(--dot,var(--accent));}
  .article-card h3{font-size:16px;font-weight:600;line-height:1.35;margin-bottom:12px;flex-grow:1;}
  .article-card p{font-size:13.5px;color:var(--mute);line-height:1.55;margin-bottom:18px;}
  .article-meta{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mute);border-top:1px dashed var(--rule);padding-top:14px;}
  @media (max-width:960px){.articles-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.articles-grid{grid-template-columns:1fr;}}

  /* ---------- vision (watermark quote, no dark block) ---------- */
  .vision{padding:120px 0;text-align:center;position:relative;overflow:hidden;}
  .vision-watermark{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:640px;max-width:90vw;opacity:0.06;pointer-events:none;
  }
  .vision blockquote{
    font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,3.4vw,38px);
    font-weight:500;line-height:1.4;max-width:820px;margin:0 auto 24px;position:relative;
  }
  .vision blockquote em{font-style:normal;color:var(--accent-deep);position:relative;}
  .vision .sig{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--mute);letter-spacing:0.08em;}

  /* ---------- cta ---------- */
  .cta-band{text-align:center;padding:96px 0;border-top:1.5px dashed var(--rule);border-bottom:1.5px dashed var(--rule);}
  .cta-band h2{font-size:clamp(30px,4vw,46px);margin-bottom:20px;}
  .cta-band p{color:var(--mute);font-size:16.5px;margin-bottom:36px;}
  .cta-buttons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

  /* ---------- footer ---------- */
  body.page-index footer{background:var(--ink);color:#D6D1C4;padding:64px 0 28px;background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);background-size:48px 48px;}
  .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px;}
  .footer-brand p{font-size:14px;line-height:1.6;color:#A6A192;margin-top:18px;max-width:280px;}
  .footer-col h4{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:#8E8975;margin-bottom:18px;}
  .footer-col a{display:block;font-size:14px;margin-bottom:12px;color:#D9D5C6;transition:color .2s ease;}
  .footer-col a:hover{color:var(--accent);}
  .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid #3A382F;padding-top:24px;font-size:12.5px;color:#8E8975;font-family:'IBM Plex Mono',monospace;}
  @media (max-width:860px){.footer-top{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.footer-top{grid-template-columns:1fr;}}

  @media (max-width:900px){.hero-grid{grid-template-columns:1fr;}.hero-art{height:280px;order:-1;}}

  a:focus-visible, button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;}

  .page-index .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
  .page-index .reveal.in{opacity:1;transform:translateY(0);}


/* ---------- 2. CONTACT PAGE (contact.html) ---------- */

:root{
    --paper:#F2EEE2;
    --card:#FBF8EF;
    --ink:#211F1A;
    --accent:#4C5FAB;
    --accent-deep:#333F73;
    --moss:#485E43;
    --rule:#D6CCB4;
    --mute:#6F695C;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body.page-contact{
    background:var(--paper);color:var(--ink);font-family:'Manrope',sans-serif;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;
    background-image:
      linear-gradient(rgba(33,31,26,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(33,31,26,0.05) 1px, transparent 1px);
    background-size:64px 64px;background-position:-1px -1px;background-attachment:local;
    display:flex;flex-direction:column;
  }
  h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

  /* ---------- nav (matches site) ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(242,238,226,0.88);
    backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink);
  }
  body.page-contact nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1180px;margin:0 auto;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-text{display:flex;flex-direction:column;line-height:1.02;}
  .brand-text .t1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:19px;}
  .brand-text .t2{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase;margin-top:2px;}
  .navlinks{display:flex;gap:36px;align-items:center;}
  .navlinks a{font-size:14.5px;font-weight:600;color:var(--ink);position:relative;padding:4px 0;}
  .navlinks a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .25s ease;}
  .navlinks a:not(.nav-cta):hover::after{width:100%;}
  .navlinks .nav-cta{
    display:inline-block;background:var(--ink) !important;color:var(--paper) !important;padding:11px 22px !important;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);font-size:13.5px;font-weight:700;line-height:1;
    transition:background .2s ease,color .2s ease;
  }
  .navlinks .nav-cta:hover{background:var(--accent-deep) !important;color:var(--paper) !important;}
  @media (max-width:860px){.navlinks-inner{display:none;}}

  /* ---------- page ---------- */
  main{flex:1;padding:70px 0 100px;}
  .contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;
    font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);
    border:1.5px solid var(--ink);padding:6px 14px 6px 10px;margin-bottom:24px;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  }
  .eyebrow::before{content:'';width:7px;height:7px;background:var(--accent);}

  .intro h1{font-size:clamp(32px,4.4vw,46px);font-weight:700;line-height:1.08;margin-bottom:18px;}
  .intro p.lede{font-size:16.5px;line-height:1.65;color:var(--mute);margin-bottom:36px;max-width:420px;}

  .info-list{display:flex;flex-direction:column;gap:22px;margin-bottom:40px;}
  .info-item{display:flex;gap:14px;align-items:flex-start;}
  .info-icon{
    width:34px;height:34px;border:1.5px solid var(--ink);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
  }
  .info-text .label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--mute);margin-bottom:3px;}
  .info-text .value{font-size:15px;font-weight:600;}
  .info-text .value a:hover{color:var(--accent-deep);}

  .expect-box{
    border:1.5px solid var(--rule);padding:24px 26px;background:var(--card);
    border-left:4px solid var(--moss);
  }
  .expect-box h3{font-size:15px;font-weight:600;margin-bottom:12px;}
  .expect-box ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .expect-box li{font-size:13.5px;color:var(--mute);line-height:1.5;padding-left:16px;position:relative;}
  .expect-box li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--accent);}

  /* ---------- form card ---------- */
  .form-card{
    background:var(--card);border:1.5px solid var(--ink);padding:44px 40px;
    clip-path:polygon(0 0,100% 0,100% 100%,26px 100%);
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
  .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
  .field label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--mute);}
  .field input, .field select, .field textarea{
    font-family:'Manrope',sans-serif;font-size:15px;color:var(--ink);background:var(--paper);
    border:1.5px solid var(--rule);padding:13px 14px;outline:none;
    transition:border-color .2s ease, background .2s ease;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);background:var(--card);}
  .field textarea{resize:vertical;min-height:110px;font-family:'Manrope',sans-serif;}
  .field select{appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236F695C'%3E%3Cpath d='M5.5 7l4.5 5 4.5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:38px;
  }
  .submit-btn{
    background:var(--ink);color:var(--paper);border:none;padding:15px 30px;
    clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
    font-weight:700;font-size:14.5px;font-family:'Manrope',sans-serif;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;transition:background .2s ease,transform .2s ease;margin-top:6px;
  }
  .submit-btn:hover{background:var(--accent-deep);transform:translateY(-2px);}
  .form-note{font-size:12.5px;color:var(--mute);margin-top:16px;}

  .success-state{display:none;text-align:center;padding:40px 10px;}
  .success-state.show{display:block;}
  .success-mark{margin:0 auto 20px;width:52px;height:52px;}
  .success-state h3{font-size:22px;margin-bottom:10px;}
  .success-state p{font-size:14.5px;color:var(--mute);max-width:360px;margin:0 auto;}

  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}

  /* ---------- footer ---------- */
  body.page-contact footer{background:var(--ink);color:#D6D1C4;padding:44px 0 26px;
    background-image:linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:48px 48px;}
  .footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#8E8975;font-family:'IBM Plex Mono',monospace;}
  .footer-bottom a:hover{color:var(--accent);}

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px;}


/* ---------- 3. ARTICLE TEMPLATE (shared by all 4 articles) ---------- */

:root{
  --ink:#211F1A;--ink-soft:#6F695C;--ink-muted:#948E80;
  --bg:#F2EEE2;--bg-card:#FBF8EF;--border:#D6CCB4;
  --amber:#4C5FAB;--amber-lt:#E8EAF6;--amber-dk:#2E3868;
  --teal:#1A8C72;--teal-lt:#E6F5F1;
  --purple:#5B52CC;--purple-lt:#EEEDFE;
  --coral:#D95C38;--coral-lt:#FAECE7;
  --green-lt:#EAF3DE;--green-dk:#2D5A0C;
  --red-lt:#FCEBEB;--red-dk:#6B1212;
  --radius:10px;--radius-sm:6px;
}
html{scroll-behavior:smooth}
body.page-article{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
.page-article nav{position:sticky;top:0;z-index:100;background:rgba(250,250,248,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:58px}
.nav-brand{display:inline-flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none}
.nav-links{display:flex;gap:1.5rem}
.nav-links a{font-size:13px;color:var(--ink-soft);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.page{max-width:720px;margin:0 auto;padding:0 1.5rem 5rem}
.page-article .hero{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--border);margin-bottom:3rem}
.hero-eyebrow{display:flex;gap:8px;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.pill{font-size:11px;font-weight:600;letter-spacing:1.5px;border-radius:20px;padding:3px 10px}
.hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,5vw,40px);line-height:1.25;color:var(--ink);margin-bottom:1rem}
.hero-title em{font-style:italic;color:var(--amber)}
.hero-sub{font-size:16px;color:var(--ink-soft);line-height:1.65;margin-bottom:1.5rem}
.hero-meta{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.hero-meta span{font-size:13px;color:var(--ink-muted)}
.hero-meta strong{color:var(--ink-soft);font-weight:500}
.prose{font-size:15px;color:var(--ink-soft);line-height:1.8;margin-bottom:1rem}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--amber-dk);font-style:italic}
.section{margin-bottom:3.5rem}
.illus{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:1.5rem 0}
.illus svg{width:100%;display:block}
.illus-cap{font-size:12px;color:var(--ink-muted);text-align:center;padding:8px 12px;border-top:1px solid var(--border);font-style:italic}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:1.25rem 0}
.vs-card{border-radius:var(--radius-sm);padding:14px;border:1px solid transparent}
.vs-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;margin-bottom:6px}
.vs-text{font-size:13px;line-height:1.6}
.divider{height:1px;background:var(--border);margin:3rem 0;position:relative}
.divider::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);padding:0 10px;font-size:12px;color:var(--border)}
.cta-box{background:var(--ink);color:#fff;border-radius:var(--radius);padding:2rem;margin:2rem 0;text-align:center}
.cta-box h3{font-family:'Space Grotesk',sans-serif;font-size:22px;margin-bottom:10px;font-weight:400}
.cta-box p{font-size:14px;color:#B0B0A8;line-height:1.7;margin-bottom:1.25rem}
.cta-btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta-btn{font-family:inherit;font-size:13px;font-weight:600;padding:10px 20px;border-radius:var(--radius-sm);cursor:pointer;transition:opacity .2s;border:none}
.cta-btn:hover{opacity:.85}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2rem}
.page-article footer{border-top:1px solid var(--border);padding:2rem 1.5rem;text-align:center}
footer p{font-size:13px;color:var(--ink-muted)}
footer a{color:var(--amber-dk);text-decoration:none}
.page-article .reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.page-article .reveal.visible{opacity:1;transform:none;position: relative;padding: 10px 0px;}


/* ---------- 4. jtbd-article.html — "Nobody buys an umbrella..." (JTBD) — page-specific rules ---------- */

.page-jtbd {}  /* scope marker */

.page-jtbd .pill-level { background: var(--purple-lt); color: var(--purple); border: 1px solid #C4BFF4; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pill-topic { background: var(--teal-lt); color: var(--teal); border: 1px solid #A0D9CC; }
.hero-divider { width: 36px; height: 1px; background: var(--border); }
.page-article .section-eyebrow {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    color: var(--ink-muted); margin-bottom: 6px; text-transform: uppercase;
  }
.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(20px, 3.5vw, 26px);
    line-height: 1.3; color: var(--ink); margin-bottom: 1rem;
  }
.pull-quote {
    border-left: 3px solid var(--amber);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: var(--amber-lt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
.pull-quote p {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px; color: var(--amber-dk); font-style: italic; line-height: 1.5;
  }
.flip-instruction {
    font-size: 13px; color: var(--ink-muted); margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
  }
.flip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px; margin: 1rem 0 0.5rem;
  }
.flip-card { perspective: 700px; height: 140px; cursor: pointer; }
.flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.55s cubic-bezier(.4,0,.2,1);
    transform-style: preserve-3d;
  }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 14px 10px; text-align: center;
    background: var(--bg-card);
  }
.flip-back { transform: rotateY(180deg); }
.flip-icon { font-size: 28px; margin-bottom: 8px; }
.flip-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.flip-hint { font-size: 11px; color: var(--ink-muted); }
.flip-answer { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.flip-answer strong { display: block; margin-bottom: 4px; font-size: 12px; }
.samosa-wrap {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px; margin: 1.25rem 0; align-items: start;
  }
@media (max-width: 520px) { .samosa-wrap { grid-template-columns: 1fr; } }
.layer-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.layer-btn {
    width: 100%; text-align: left;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    font-family: inherit;
  }
.layer-btn.active { border-color: var(--amber); background: var(--amber-lt); }
.layer-num { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 2px; }
.layer-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.layer-sub  { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.layer-panel {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 16px;
    min-height: 100px;
    transition: opacity .25s;
  }
.layer-panel p { font-size: 13px; color: var(--ink-soft); line-height: 1.7; font-style: italic; }
@media (max-width: 460px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-old  { background: var(--red-lt);   border-color: #F09595; color: var(--red-dk); }
.vs-old .vs-lbl  { color: #A33; }
.vs-new  { background: var(--green-lt); border-color: #97C459; color: var(--green-dk); }
.vs-new .vs-lbl  { color: #3B6D11; }
.formula-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem; margin: 1.25rem 0;
  }
.formula-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.formula-kw {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    background: #211F1A; color: #fff;
    border-radius: var(--radius-sm); padding: 4px 10px;
    min-width: 70px; text-align: center; flex-shrink: 0;
  }
.formula-input {
    flex: 1; font-family: inherit; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 12px; background: var(--bg);
    color: var(--ink); outline: none;
    transition: border-color .2s;
  }
.formula-input:focus { border-color: var(--amber); }
.formula-input::placeholder { color: var(--ink-muted); }
.formula-btn {
    width: 100%; margin-top: 6px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 11px; border-radius: var(--radius-sm);
    background: var(--ink); color: #fff; border: none;
    cursor: pointer; transition: background .2s;
    letter-spacing: 0.3px;
  }
.formula-btn:hover { background: #333; }
.formula-result {
    margin-top: 12px; padding: 14px;
    background: var(--teal-lt); border-radius: var(--radius-sm);
    border: 1px solid #A0D9CC;
    font-size: 13px; color: #0B4E3E; line-height: 1.7;
    display: none;
  }
.formula-result strong { color: var(--teal); }
.cta-btn-primary { background: var(--amber); color: #fff; }
.cta-btn-secondary { background: transparent; color: #fff; border: 1px solid #444; }
.page-article .tag {
    font-size: 12px; padding: 4px 12px;
    border-radius: 20px; background: var(--bg-card);
    color: var(--ink-muted); border: 1px solid var(--border);
    text-decoration: none; transition: border-color .2s, color .2s;
  }
.tag:hover { border-color: var(--amber); color: var(--amber-dk); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    .flip-inner { transition: none; }
  }
.nav-logo-mark{color:var(--ink);flex-shrink:0}
.nav-brand-text{display:inline-flex;align-items:baseline;gap:5px;}
.nb-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted, var(--mute));}


/* ---------- 4. ux-case-study-article.html — page-specific rules ---------- */

.page-ux {}  /* scope marker */

.page-ux .pill-level{background:var(--purple-lt);color:var(--purple);border:1px solid #C4BFF4}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.pill-ux{background:#E6F1FB;color:#185FA5;border:1px solid #85B7EB}
.hero-div{width:36px;height:1px;background:var(--border)}
.sec-eye{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--ink-muted);margin-bottom:6px;text-transform:uppercase}
.sec-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,3.5vw,25px);line-height:1.3;color:var(--ink);margin-bottom:1rem}
.pull{border-left:3px solid var(--amber);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--amber-lt);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pull p{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--amber-dk);font-style:italic;line-height:1.5}
.steps-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.step-btn{font-family:inherit;font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--ink-soft);cursor:pointer;transition:all .2s;letter-spacing:.3px}
.step-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.step-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:opacity .25s}
.step-panel h4{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--ink);margin-bottom:6px}
.step-panel p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin-bottom:8px}
.step-panel .tag{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;display:inline-block;margin-top:4px}
.checklist{list-style:none;margin:1.25rem 0}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:.5px solid var(--border);font-size:14px;color:var(--ink-soft);line-height:1.6;cursor:pointer}
.checklist li:last-child{border-bottom:none}
.check-box{width:20px;height:20px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--bg-card)}
.check-box.done{background:var(--teal);border-color:var(--teal);color:#fff;font-size:12px}
@media(max-width:480px){.vs-grid{grid-template-columns:1fr}}
.vs-bad{background:var(--red-lt);border-color:#F09595;color:var(--red-dk)}
.vs-bad .vs-lbl{color:#A33}
.vs-good{background:var(--green-lt);border-color:#97C459;color:var(--green-dk)}
.vs-good .vs-lbl{color:#3B6D11}
.cta-primary{background:var(--amber);color:#fff}
.cta-secondary{background:transparent;color:#fff;border:1px solid #444 !important}
.tag-link{font-size:12px;padding:4px 12px;border-radius:20px;background:var(--bg-card);color:var(--ink-muted);border:1px solid var(--border);text-decoration:none;transition:border-color .2s,color .2s}
.tag-link:hover{border-color:var(--amber);color:var(--amber-dk)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.nav-logo-mark{color:var(--ink);flex-shrink:0}
.nav-brand-text{display:inline-flex;align-items:baseline;gap:5px;}
.nb-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted, var(--mute));}


/* ---------- 4. ai-thinking-partner-article.html — page-specific rules ---------- */

.page-ai {}  /* scope marker */

.page-ai .pill-level{background:var(--amber-lt);color:var(--amber-dk);border:1px solid #B7BEE0}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.pill-ai{background:#EEEDFE;color:#5B52CC;border:1px solid #AFA9EC}
.hero-div{width:36px;height:1px;background:var(--border)}
.sec-eye{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--ink-muted);margin-bottom:6px;text-transform:uppercase}
.sec-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,3.5vw,25px);line-height:1.3;color:var(--ink);margin-bottom:1rem}
.pull{border-left:3px solid var(--amber);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--amber-lt);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pull p{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--amber-dk);font-style:italic;line-height:1.5}
.toggle-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin:1.5rem 0}
.toggle-tabs{display:flex;border-bottom:1px solid var(--border)}
.toggle-tab{flex:1;padding:10px;font-family:inherit;font-size:13px;font-weight:600;border:none;background:transparent;cursor:pointer;transition:background .2s,color .2s;color:var(--ink-muted)}
.toggle-tab.active{background:var(--ink);color:#fff}
.toggle-body{padding:1.25rem;font-size:14px;color:var(--ink-soft);line-height:1.7}
.toggle-body strong{color:var(--ink);font-weight:600}
.prompt-grid{display:grid;grid-template-columns:1fr;gap:10px;margin:1.25rem 0}
.prompt-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;cursor:pointer;transition:border-color .2s}
.prompt-card:hover{border-color:var(--amber)}
.prompt-label{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--ink-muted);margin-bottom:5px}
.prompt-q{font-size:13px;color:var(--ink);font-style:italic;margin-bottom:6px;font-family:'Space Grotesk',sans-serif}
.prompt-why{font-size:12px;color:var(--ink-muted);line-height:1.5;display:none}
.prompt-card.open .prompt-why{display:block}
.prompt-card.open{border-color:var(--teal);background:var(--teal-lt)}
.prompt-card.open .prompt-label{color:var(--teal)}
.prompt-card.open .prompt-q{color:#0B4E3E}
.spectrum{margin:1.5rem 0}
.spectrum-bar{height:10px;border-radius:5px;background:linear-gradient(90deg,#EAF3DE,#E8EAF6,var(--coral-lt));margin:8px 0;position:relative}
.spectrum-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-muted)}
@media(max-width:480px){.vs-grid{grid-template-columns:1fr}}
.vs-bad{background:var(--red-lt);border-color:#F09595;color:var(--red-dk)}
.vs-bad .vs-lbl{color:#A33}
.vs-good{background:var(--green-lt);border-color:#97C459;color:var(--green-dk)}
.vs-good .vs-lbl{color:#3B6D11}
.cta-primary{background:var(--amber);color:#fff}
.cta-secondary{background:transparent;color:#fff;border:1px solid #444 !important}
.tag-link{font-size:12px;padding:4px 12px;border-radius:20px;background:var(--bg-card);color:var(--ink-muted);border:1px solid var(--border);text-decoration:none;transition:border-color .2s,color .2s}
.tag-link:hover{border-color:var(--amber);color:var(--amber-dk)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.nav-logo-mark{color:var(--ink);flex-shrink:0}
.nav-brand-text{display:inline-flex;align-items:baseline;gap:5px;}
.nb-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted, var(--mute));}


/* ---------- 4. ic-to-design-lead-article.html — page-specific rules ---------- */

.page-ic {}  /* scope marker */

.page-ic .pill-level{background:var(--green-lt);color:#3B6D11;border:1px solid #97C459}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.pill-career{background:var(--coral-lt);color:var(--coral);border:1px solid #F0997B}
.hero-div{width:36px;height:1px;background:var(--border)}
.sec-eye{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--ink-muted);margin-bottom:6px;text-transform:uppercase}
.sec-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(19px,3.5vw,25px);line-height:1.3;color:var(--ink);margin-bottom:1rem}
.pull{border-left:3px solid var(--amber);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--amber-lt);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.pull p{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--amber-dk);font-style:italic;line-height:1.5}
.shift-list{display:flex;flex-direction:column;gap:12px;margin:1.25rem 0}
.shift-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:border-color .2s}
.shift-card:hover{border-color:var(--amber)}
.shift-card.open{border-color:var(--amber);background:var(--amber-lt)}
.shift-head{display:flex;justify-content:space-between;align-items:center}
.shift-title{font-size:14px;font-weight:600;color:var(--ink)}
.shift-arrow{font-size:16px;color:var(--ink-muted);transition:transform .25s}
.shift-card.open .shift-arrow{transform:rotate(90deg);color:var(--amber-dk)}
.shift-body{font-size:13px;color:var(--ink-soft);line-height:1.7;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:none}
.shift-card.open .shift-body{display:block}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:1.25rem 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.compare-col{padding:16px}
.compare-col:first-child{border-right:1px solid var(--border)}
.compare-head{font-size:12px;font-weight:700;letter-spacing:1px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.compare-row{font-size:13px;color:var(--ink-soft);padding:6px 0;border-bottom:.5px solid var(--border);line-height:1.5}
.compare-row:last-child{border-bottom:none}
.timeline{position:relative;margin:1.5rem 0;padding-left:24px}
.timeline::before{content:'';position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--border)}
.tl-item{position:relative;margin-bottom:20px}
.tl-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--amber);background:var(--bg-card);position:absolute;left:-24px;top:3px}
.tl-dot.filled{background:var(--amber)}
.tl-month{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--ink-muted);margin-bottom:3px}
.tl-text{font-size:14px;color:var(--ink-soft);line-height:1.6}
.tl-text strong{color:var(--ink);font-weight:600}
@media(max-width:480px){.vs-grid{grid-template-columns:1fr}.compare-grid{grid-template-columns:1fr}.compare-col:first-child{border-right:none;border-bottom:1px solid var(--border)}}
.vs-ic{background:var(--purple-lt);border-color:#AFA9EC;color:#26215C}
.vs-ic .vs-lbl{color:var(--purple)}
.vs-lead{background:var(--coral-lt);border-color:#F0997B;color:#3A1205}
.vs-lead .vs-lbl{color:var(--coral)}
.cta-primary{background:var(--amber);color:#fff}
.cta-secondary{background:transparent;color:#fff;border:1px solid #444 !important}
.tag-link{font-size:12px;padding:4px 12px;border-radius:20px;background:var(--bg-card);color:var(--ink-muted);border:1px solid var(--border);text-decoration:none;transition:border-color .2s,color .2s}
.tag-link:hover{border-color:var(--amber);color:var(--amber-dk)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.nav-logo-mark{color:var(--ink);flex-shrink:0}
.nav-brand-text{display:inline-flex;align-items:baseline;gap:5px;}
.nb-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-muted, var(--mute));}


/* ==========================================================
   5. BOOK PROMO SECTION (on index.html — "book-feature")
   ========================================================== */
.book-feature{padding:100px 0;}
.book-feature-grid{
  max-width:1180px;margin:0 auto;padding:0 32px;
  display:grid;grid-template-columns:0.75fr 1.25fr;gap:56px;align-items:center;
}
.book-cover{
  background:var(--ink);color:var(--paper);padding:44px 36px;min-height:400px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:polygon(0 0,100% 0,100% 100%,24px 100%);
}
.book-cover .cover-label{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent);display:block;margin-bottom:20px;
}
.book-cover .cover-title{
  font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:600;line-height:1.2;
}
.book-cover .cover-title em{font-style:normal;color:var(--accent);}
.book-cover .cover-sub{font-size:14px;color:#B9B5A8;line-height:1.6;margin-top:14px;max-width:260px;}
.book-cover .cover-footer{display:flex;align-items:center;justify-content:space-between;margin-top:24px;}
.book-cover .cover-author{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#B9B5A8;letter-spacing:0.04em;}
.book-cover .cover-icon{width:40px;height:40px;flex-shrink:0;}

.book-feature-content .eyebrow{margin-bottom:20px;}
.book-feature-content h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.15;margin-bottom:16px;}
.book-feature-content .desc{font-size:15.5px;color:var(--mute);line-height:1.65;margin-bottom:28px;max-width:560px;}
.book-stats{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:32px;}
.book-stat{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--mute);}
.book-stat .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;display:inline-block;}
.book-cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.book-cta{
  background:var(--ink);color:var(--paper);padding:15px 28px;font-weight:700;font-size:14.5px;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  display:inline-flex;align-items:center;gap:8px;transition:background .2s ease,transform .2s ease;
}
.book-cta:hover{background:var(--accent-deep);transform:translateY(-2px);}
.book-cta-secondary{
  border:1.5px solid var(--ink);padding:14px 26px;font-weight:700;font-size:14.5px;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:all .2s ease;
}
.book-cta-secondary:hover{background:var(--ink);color:var(--paper);}
@media (max-width:860px){
  .book-feature-grid{grid-template-columns:1fr;}
  .book-cover{min-height:280px;}
}

/* ==========================================================
   6. BOOK READING PAGE (why-is-this-so-annoying.html)
   All rules scoped under .page-book to avoid collisions with
   other pages' generic-sounding class names (.tag, .rule, .num…)
   ========================================================== */

.page-book main.book-content{min-width:0;padding: 0px;}

/* -- hero -- */
.page-book .book-hero{
  max-width:720px;margin:0 auto;padding:64px 32px 48px;text-align:center;
  border-bottom:1px solid var(--rule);
}
.page-book .book-hero .eyebrow{margin:0 auto 22px;}
.page-book .book-hero h1{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,5vw,46px);font-weight:700;
  line-height:1.15;margin-bottom:14px;
}
.page-book .book-hero h1 em{font-style:normal;color:var(--accent);}
.page-book .book-hero .subhead{font-size:16px;color:var(--mute);font-weight:600;margin-bottom:10px;}
.page-book .book-hero .lede{font-size:15px;color:var(--mute);line-height:1.6;}

/* -- layout: sidebar + content -- */
.page-book .book-layout{
  max-width:1180px;margin:0 auto;padding:40px 32px 100px;
  display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start;
}
.page-book .toc-toggle{display:none;}
.page-book .toc{
  position:sticky;top:78px;max-height:calc(100vh - 100px);overflow-y:auto;
  border:1px solid var(--rule);background:var(--card);padding:20px 18px;
}
.page-book .toc-section{margin-bottom:18px;}
.page-book .toc-section:last-child{margin-bottom:0;}
.page-book .toc-section-title{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--mute);margin-bottom:8px;display:block;
}
.page-book .toc-item{
  display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink);text-decoration:none;
  padding:5px 0;border-left:2px solid transparent;padding-left:8px;margin-left:-8px;
  transition:border-color .15s ease,color .15s ease;
}
.page-book .toc-item .num{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mute);flex-shrink:0;
}
.page-book .toc-item:hover{color:var(--accent-deep);}
.page-book .toc-item.active{border-left-color:var(--accent);color:var(--accent-deep);font-weight:600;}
.page-book .toc-item.active .num{color:var(--accent);}

/* -- chapter sections -- */
.page-book .chapter-section{margin-bottom:64px;padding: 0px;}
.page-book .chapter-section:first-child{margin-top:0;}
.page-book .section-header{display:flex;align-items:center;gap:20px;margin-bottom:36px;}
.page-book .section-icon{width:56px;height:56px;flex-shrink:0;}
.page-book .section-text .eyebrow{margin-bottom:8px;}
.page-book .section-text h2{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;}

/* -- individual chapter/pattern -- */
.page-book .chapter{
  position:relative;padding:32px 0;border-top:1px solid var(--rule);
}
.page-book .chapter:first-of-type{border-top:none;padding-top:0;}
.page-book .chapter-num{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--accent);
  letter-spacing:0.05em;margin-bottom:6px;
}
.page-book .chapter h3{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin-bottom:10px;}
.page-book .chapter .tagline{
  font-size:15.5px;font-style:italic;color:var(--accent-deep);margin-bottom:20px;line-height:1.5;
}
.page-book .block{margin-bottom:16px;}
.page-book .block-label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:6px;
}
.page-book .block p{font-size:14.5px;line-height:1.65;color:var(--ink);}

.page-book .visual-row{display:flex;gap:14px;margin:24px 0;}
.page-book .visual-panel{
  flex:1;border:1.5px solid var(--rule);padding:16px;text-align:center;background:var(--card);
}
.page-book .visual-panel svg{width:64px;height:64px;margin:0 auto 10px;display:block;}
.page-book .visual-panel.bad{border-color:var(--bad);background:var(--bad-tint);}
.page-book .visual-panel.good{border-color:var(--accent);background:var(--indigo-tint);}
.page-book .visual-caption{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--mute);
}

.page-book .tag-row{margin:20px 0;flex-direction:column;gap:10px;}
.page-book .tag{
  display:flex;align-items:flex-start;gap:10px;font-family:'Manrope',sans-serif;
  font-size:13.5px;line-height:1.55;padding:12px 14px;border:1px solid var(--rule);
  color:var(--ink);border-radius:0;
}
.page-book .tag.bad{border-color:rgba(189,91,59,0.35);background:var(--bad-tint);}
.page-book .tag.good{border-color:rgba(76,95,171,0.3);background:var(--indigo-tint);}
.page-book .tag .icon{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px;
}
.page-book .tag.bad .icon{background:var(--bad);color:#fff;}
.page-book .tag.good .icon{background:var(--accent);color:#fff;}

.page-book .rule{
  margin-top:24px;padding-top:16px;border-top:1px dashed var(--rule);
  font-family:'Space Grotesk',sans-serif;font-size:15px;font-style:italic;color:var(--ink);
}

.page-book footer{border-top:1px solid var(--rule);padding:32px 24px;text-align:center;}
.page-book footer, .page-book footer p{font-size:13px;color:var(--mute);}
.page-book footer a{color:var(--accent-deep);text-decoration:none;}

/* -- responsive -- */
@media (max-width:860px){
  .page-book .book-layout{grid-template-columns:1fr;}
  .page-book .toc-toggle{
    display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--rule);
    padding:12px 16px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;margin-bottom:16px;cursor:pointer;
  }
  .page-book .toc{
    display:none;position:fixed;top:58px;left:0;right:0;bottom:0;z-index:60;
    max-height:none;border:none;overflow-y:auto;padding:20px;
  }
  .page-book .toc.open{display:block;}
  .page-book .visual-row{flex-direction:column;}
}