@font-face{
    font-family:"Caveat Brush";
    src:url('../assets/fonts/caveat-brush.woff2') format('woff2');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
:root{
    --bg:#fcfaf7;
    --ink:#0c0f15;
    --muted:#545b65;
    --accent:#d95c50;
    --border:#e4e0d8;
    --border-strong:#c5c1b9;
    --font: -apple-system, "system-ui", "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-script: "Caveat Brush", cursive;
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  [data-nav]{cursor:pointer;}
  .wrap{max-width:1216px;margin:0 auto;padding:0 24px;}
  [hidden]{display:none!important;}

  /* Header */
  header.site{
    position:sticky; top:0; z-index:50;
    background:rgba(252,250,247,0.9);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border);
  }
  header.site .bar{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px;
  }
  .logo{font-size:21px; font-weight:800; letter-spacing:-0.02em; cursor:pointer;}
  .logo .amp{color:var(--accent);}
  nav.main{display:flex; gap:22px;}
  nav.main a{
    font-size:14px; color:var(--ink); cursor:pointer; padding:4px 2px; white-space:nowrap;
    border-bottom:2px solid transparent;
  }
  nav.main a.active{color:var(--accent); border-color:var(--accent);}
  .search-btn{
    width:40px;height:40px;border-radius:999px;border:none;background:transparent;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  }
  .search-btn:hover, .search-btn:focus{background:#efece5; outline:none;}
  .search-panel{border-top:1px solid var(--border);}
  .search-panel-inner{padding:20px 24px;}
  .search-input-row{display:flex; align-items:center; gap:12px; color:var(--muted);}
  .search-input-row svg{flex-shrink:0;}
  .search-input-row input{
    flex:1; border:none; background:transparent; outline:none; color:var(--ink);
    font-family:var(--font); font-size:18px; padding:6px 0;
  }
  .search-input-row input::placeholder{color:var(--muted);}
  .search-panel-close{
    border:none; background:transparent; color:var(--muted); font-size:24px; line-height:1;
    cursor:pointer; padding:4px 6px; border-radius:6px; flex-shrink:0;
  }
  .search-panel-close:hover{background:#efece5; color:var(--ink);}
  .search-results{margin-top:8px; max-height:60vh; overflow-y:auto;}
  .search-result{
    display:flex; align-items:baseline; gap:12px; padding:12px 4px;
    border-top:1px solid var(--border); cursor:pointer;
  }
  .search-result:hover{background:#f4f1eb;}
  .search-result-tag{color:var(--accent); font-size:13px; font-weight:600; flex-shrink:0; width:110px;}
  .search-result-title{font-size:15px; font-weight:600;}
  .search-empty{padding:16px 4px; color:var(--muted); font-size:14px;}
  @media (max-width:600px){
    .search-result-tag{width:auto;}
    .search-result{flex-direction:column; gap:2px;}
  }
  .menu-btn{display:none;}
  .mobile-nav{
    display:none; flex-direction:column; border-top:1px solid var(--border);
    background:var(--bg); padding:8px 24px 16px;
  }
  .mobile-nav a{padding:12px 0; font-size:16px; border-bottom:1px solid var(--border);}
  .mobile-nav a:last-child{border-bottom:none;}
  .mobile-nav.open{display:flex;}

  /* Hero */
  .essential-label{
    display:flex; align-items:center; gap:12px; margin:56px 0 32px;
    font-size:12px; letter-spacing:0.12em; font-weight:600; color:var(--muted); text-transform:uppercase;
  }
  .essential-label .rule{width:32px; height:1px; background:var(--accent);}
  .hero{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding-bottom:56px;}
  .hero > *{min-width:0;}
  .hero img{width:100%; aspect-ratio:622/388; object-fit:contain; background:#f2efe8; border-radius:4px; display:block;}
  .hero .tag{color:var(--accent); font-size:14px; font-weight:600; margin-bottom:16px; display:block;}
  .hero h1{font-size:56px; line-height:1.05; font-weight:700; letter-spacing:-0.02em; margin:0 0 24px;}
  .hero p.dek{font-size:18px; line-height:1.5; color:var(--muted); margin:0 0 24px; max-width:46ch;}
  .byline{font-size:14px; color:var(--muted); margin-bottom:20px;}
  .read-link{font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:6px;}
  .read-link svg{width:14px;height:14px;}
  .full-rule{border:none; border-top:1px solid var(--border); margin:0;}

  /* Latest thinking grid */
  .section-head{padding:56px 0 24px;}
  .eyebrow{color:var(--accent); font-size:14px; font-weight:600; margin-bottom:8px;}
  .section-head h2{font-size:36px; font-weight:700; letter-spacing:-0.02em; margin:0 0 24px;}
  .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:56px; padding-bottom:56px;}
  .grid-2 > *{min-width:0;}
  .card img{width:100%; aspect-ratio:588/440; object-fit:contain; background:#f2efe8; border-radius:4px; display:block; margin-bottom:24px;}
  .card .meta{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
  .card .meta .cat{color:var(--accent); font-size:14px; font-weight:600;}
  .card .meta .read{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:14px;}
  .card .meta .read svg{width:14px;height:14px;}
  .card h3{font-size:26px; font-weight:700; line-height:1.2; letter-spacing:-0.01em; margin:0 0 12px;}
  .card p{color:var(--muted); font-size:16px; line-height:1.5; margin:0;}
  .empty-note{color:var(--muted); font-size:15px; padding:8px 0 40px;}

  /* Ad slots: reserved height so ads never shift the page as they load,
     never position:sticky/fixed so they can't follow a reader's scroll,
     and always sit at a natural pause between sections rather than inside
     the middle of a card grid or an article paragraph. */
  .ad-slot{
    margin:48px 0; padding:20px 0; min-height:250px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:#f4f1eb; border-radius:8px; overflow:hidden;
  }
  .ad-slot-label{
    font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--muted); margin-bottom:12px;
  }
  .ad-slot .adsbygoogle{width:100%;}

  /* Newsletter */
  .newsletter{border-top:1px solid var(--border); padding:56px 0;}
  .newsletter-inner{display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:40px 0;}
  .newsletter h2{font-size:32px; font-weight:700; letter-spacing:-0.02em; margin:8px 0 0;}
  .newsletter form{display:flex; gap:12px; flex-wrap:wrap;}
  .newsletter input[type=email]{
    padding:12px 16px 12px 40px; border:1px solid var(--border-strong); border-radius:999px; font-size:15px;
    background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%23545b65" stroke-width="2"><path d="M1 3h14v10H1z"/><path d="M1 3l7 6 7-6"/></svg>') 14px center no-repeat;
    min-width:240px;
    font-family:var(--font);
  }
  .newsletter button{
    padding:12px 24px; border-radius:999px; border:none; background:var(--ink); color:#fff;
    font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
    font-family:var(--font);
  }
  .newsletter .fine{color:var(--muted); font-size:13px; margin-top:8px;}

  /* Footer */
  footer.site{padding:32px 0 56px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; color:var(--muted); font-size:14px;}

  /* Site footer */
  .site-footer{background:var(--ink); color:#cfd2d8; margin-top:64px; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
  .site-footer-top{display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:40px; padding:56px 32px 40px; max-width:1680px; box-sizing:border-box;}
  .site-footer-brand{flex:0 1 auto; max-width:760px;}
  .site-footer-brand .logo{font-size:22px; font-weight:800; letter-spacing:-0.02em; margin-bottom:18px; cursor:pointer;}
  .site-footer-tagline{font-size:21px; line-height:1.25; color:#fff; font-weight:400; letter-spacing:0; margin:0 0 16px; max-width:760px;}
  .site-footer-tagline em{color:var(--accent); font-style:normal; font-family:var(--font-script); font-weight:400; font-size:2.4em; line-height:1; vertical-align:-0.22em; margin:0 0.07em; display:inline-block;}
  .site-footer-desc{font-size:16px; line-height:1.6; color:#9a9eaa; margin:0 0 20px; max-width:480px;}
  .site-footer-sub{font-size:14px; font-weight:600; color:#fff; margin-bottom:10px;}
  .site-footer-form{display:flex; gap:10px; max-width:380px; flex-wrap:wrap;}
  .site-footer-form input{flex:1; min-width:180px; border:1px solid #333844; background:#1a1e27; color:#fff; border-radius:8px; padding:12px 14px; font-family:var(--font); font-size:14px;}
  .site-footer-form input::placeholder{color:#7d818c;}
  .site-footer-form button{border:none; background:#fff; color:var(--ink); border-radius:8px; padding:12px 20px; font-weight:700; font-size:14px; cursor:pointer; font-family:var(--font);}
  .site-footer-links{display:flex; flex:0 1 auto; gap:72px;}
  .site-footer-heading{font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#7d818c; font-weight:700; margin-bottom:18px;}
  .site-footer-links a{display:block; color:#cfd2d8; font-size:15px; margin-bottom:14px; cursor:pointer; white-space:nowrap;}
  .site-footer-links a:hover{color:#fff;}
  .site-footer-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:24px 32px; max-width:1680px; box-sizing:border-box; border-top:1px solid #262b35; font-size:13px; color:#7d818c;}
  .site-footer-social{display:flex; gap:16px;}
  .site-footer-social .icon-btn{background:transparent; border:none; color:#cfd2d8; width:28px; height:28px; padding:0;}
  .site-footer-social .icon-btn svg{width:18px; height:18px;}
  .site-footer-social .icon-btn:hover{color:#fff;}
  @media (max-width:760px){
    .site-footer-top{flex-direction:column; gap:40px; padding:48px 24px 40px;}
    .site-footer-links{width:100%; justify-content:space-between; gap:24px;}
    .site-footer-tagline{font-size:17px; line-height:1.6;}
    .site-footer-tagline em{font-size:2em; margin:0 0.05em;}
    .site-footer-tagline .tagline-break{display:none;}
  }

  /* Article view */
  .article-head{padding:56px 0 40px; text-align:center;}
  .article-head .tag{display:block; color:var(--accent); font-weight:600; font-size:15px; margin-bottom:20px;}
  .article-head h1{font-size:48px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:0 0 24px;}
  .article-head .dek{font-size:19px; color:var(--muted); max-width:640px; margin:0 auto 24px; line-height:1.5;}
  .article-head .byline{font-size:15px;}
  .article-head .byline b{font-weight:600;}
  .article-hero{width:100%; aspect-ratio:1216/500; object-fit:contain; background:#f2efe8; border-radius:4px; display:block; margin-bottom:48px;}
  .article-body-wrap{display:grid; grid-template-columns:1fr 220px; gap:64px; padding-bottom:56px; align-items:start;}
  /* Grid items default to min-width:auto, so without this a long line of
     body text can force the column (and the whole page) wider than the
     viewport instead of wrapping — the classic CSS Grid overflow trap. */
  .article-body-wrap > *{min-width:0;}
  .article-sidebar{position:sticky; top:96px;}
  .share-col{display:flex; flex-direction:column; gap:12px;}
  .share-col .lbl{font-size:12px; letter-spacing:0.1em; color:var(--muted); font-weight:600; margin-bottom:4px;}
  .icon-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; background:#fff; cursor:pointer;}
  .article-body{font-size:19px; line-height:1.7; max-width:680px;}
  .article-body p{margin:0 0 24px;}
  .article-body h2{font-size:28px; font-weight:700; margin:40px 0 20px; letter-spacing:-0.01em; scroll-margin-top:96px;}
  .article-body h3,.article-body h4{font-size:22px; font-weight:700; margin:36px 0 16px; letter-spacing:-0.01em; scroll-margin-top:96px;}
  .article-body blockquote{border-left:3px solid var(--border-strong); margin:28px 0; padding:2px 0 2px 20px; color:var(--muted); font-style:italic;}
  .article-body ul,.article-body ol{margin:0 0 24px; padding-left:22px;}
  .article-body li{margin:0 0 10px;}
  .article-body code{background:#f1efe9; border-radius:3px; padding:2px 6px; font-size:0.9em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
  .article-body pre{background:#141821; color:#e8e6e1; border-radius:8px; padding:20px; overflow-x:auto; margin:28px 0;}
  .article-body pre code{background:none; padding:0; color:inherit;}
  .article-body a{color:var(--accent); text-decoration:underline; text-underline-offset:2px;}
  .article-body a.article-body-image-wrapper{text-decoration:none; display:block; margin:32px 0;}
  .article-body a.article-body-image-wrapper img{width:100%; border-radius:6px; display:block;}
  .article-body .table-wrapper-paragraph{overflow-x:auto; margin:28px 0;}
  /* Belt and suspenders: a table that arrives without the wrapper above
     (some imported posts don't have it) still shouldn't be able to force
     the whole page wider on a narrow screen — it scrolls on its own instead. */
  .article-body table{width:100%; border-collapse:collapse; font-size:16px; display:block; overflow-x:auto;}
  .article-body th,.article-body td{border:1px solid var(--border); padding:10px 14px; text-align:left; vertical-align:top;}
  .article-body th{background:#f6f4ef; font-weight:700;}
  .pullquote{border-left:3px solid var(--accent); padding:4px 0 4px 24px; font-size:24px; font-weight:600; line-height:1.4; margin:32px 0;}
  .callout{background:#fbe3de; border-radius:4px; padding:24px; font-size:18px; margin:32px 0;}
  .takeaway{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:32px 0; margin:40px 0;}
  .takeaway .eyebrow{margin-bottom:12px;}
  .takeaway h2{font-size:26px; margin:0;}
  .toc{background:transparent;}
  .toc .lbl{font-weight:700; font-size:15px; margin-bottom:16px;}
  .toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
  .toc li{color:var(--muted); font-size:14px;}
  .toc li a{color:inherit; cursor:pointer; line-height:1.4; display:block; padding:8px 0;}
  .toc li a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}

  .conversation{padding:40px 0;}
  .conversation h2{display:flex; align-items:center; gap:10px; font-size:24px; margin:0 0 8px;}
  .conversation h2 svg{width:22px; height:22px; flex:0 0 auto;}
  .conversation > p{color:var(--muted); margin:0 0 24px;}
  .comment-form{border:1px solid var(--border-strong); border-radius:12px; padding:32px;}
  .comment-form label{display:block; font-size:14px; font-weight:600; margin-bottom:8px;}
  .comment-form input, .comment-form textarea{
    width:100%; border:1px solid var(--border); border-radius:8px; padding:12px; font-family:var(--font); font-size:15px; margin-bottom:20px;
  }
  .comment-form textarea{min-height:100px; resize:vertical;}
  .comment-form .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  .comment-form .fine{color:var(--muted); font-size:14px;}
  .comment-form .fine.fine-error{color:#a4291b;}
  .comment-form .fine.fine-success{color:#1a7a42;}
  .comment-form button{padding:12px 24px; border-radius:999px; border:none; background:var(--ink); color:#fff; font-weight:600; cursor:pointer; font-family:var(--font);}
  .comment-form button:disabled{opacity:0.6; cursor:default;}
  .comment{border-top:1px solid var(--border); padding:24px 0;}
  .comment .row{display:flex; justify-content:space-between; margin-bottom:8px;}
  .comment .name{font-weight:700;}
  .comment .date{color:var(--muted); font-size:14px;}
  .comment p{margin:0; color:var(--ink);}

  .continue{border-top:1px solid var(--border); padding:48px 0 56px;}
  .continue .eyebrow{margin-bottom:24px;}
  .continue-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px;}
  .continue-card{display:flex; gap:20px; align-items:center;}
  .continue-card img{width:112px; height:80px; object-fit:contain; background:#f2efe8; border-radius:4px; flex-shrink:0;}
  .continue-card .cat{color:var(--accent); font-size:13px; font-weight:600; margin-bottom:4px; display:block;}
  .continue-card h4{font-size:17px; font-weight:700; margin:0; line-height:1.3;}

  .notfound{padding:120px 0; text-align:center;}
  .notfound h1{font-size:28px;}
  .notfound a{color:var(--accent); font-weight:600;}

  @media (max-width:860px){
    nav.main{display:none;}
    .menu-btn{display:flex;}
    .hero{grid-template-columns:1fr; gap:24px;}
    .hero h1{font-size:38px;}
    .grid-2{grid-template-columns:1fr; gap:40px;}
    .article-body-wrap{grid-template-columns:1fr;}
    .article-sidebar{position:static; order:-1; margin-bottom:40px; padding-bottom:32px; border-bottom:1px solid var(--border);}
    .share-col{flex-direction:row;}
    .continue-grid{grid-template-columns:1fr;}
    .article-head h1{font-size:32px;}
    .newsletter-inner{flex-direction:column; align-items:flex-start;}
  }

  @media (max-width:480px){
    .wrap{padding:0 18px;}
    header.site .bar{padding:16px 18px;}
    .essential-label{margin:40px 0 24px;}
    .hero h1{font-size:30px;}
    .hero p.dek{font-size:16px;}
    .section-head h2{font-size:28px;}
    .card h3{font-size:22px;}
    .article-head{padding:40px 0 32px;}
    .article-head h1{font-size:26px;}
    .article-head .dek{font-size:17px;}
    .article-body{font-size:17px;}
    .article-body h2{font-size:23px; margin:32px 0 16px;}
    .article-body h3,.article-body h4{font-size:19px; margin:28px 0 14px;}
    .pullquote{font-size:20px; padding-left:16px;}
    .callout{padding:18px; font-size:16px;}
    .continue-card{gap:14px;}
    .continue-card img{width:88px; height:64px;}
    .newsletter h2{font-size:26px;}
  }