:root{
  --co-bg:#fbf4e7;
  --co-bg2:#f5e9d3;
  --co-ink:#2b1913;
  --co-mute:#7a6354;
  --co-rule:#e2d1b6;
  --co-coral:#e8553e;
  --co-gold:#f0a830;
  --co-card:#fffaf0;
  --co-code-bg:#2b1913;
  --co-code-ink:#f7e8cf;
  --co-grad:linear-gradient(100deg,#ff6a4d 0%,#f7a23b 55%,#ffcf6b 100%);
  --co-serif:"Fraunces","Playfair Display",Georgia,"Times New Roman",serif;
  --co-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --co-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --co-bg:#1a100c;
    --co-bg2:#24160f;
    --co-ink:#f6e8d2;
    --co-mute:#b49b86;
    --co-rule:#3d2a1f;
    --co-coral:#ff7a5c;
    --co-gold:#ffbd4a;
    --co-card:#22150f;
    --co-code-bg:#120a07;
    --co-code-ink:#f7e8cf;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fbf4e7;background:var(--co-bg);color:var(--co-ink);
  font-family:var(--co-sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--co-coral);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
code{font-family:var(--co-mono);font-size:.86em;background:var(--co-bg2);padding:.12em .4em;border-radius:4px;overflow-wrap:anywhere}

.co-wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.co-narrow{max-width:700px;margin:0 auto;padding:0 16px}

/* masthead */
.co-head{border-bottom:3px double var(--co-rule)}
.co-dateline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-mute);border-bottom:1px solid var(--co-rule)}
.co-mast{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0 16px}
.co-brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--co-serif);font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1;color:var(--co-ink);text-decoration:none}
.co-brand img{width:34px;height:34px;display:block}
.co-brand:hover{text-decoration:none}
.co-nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:14px;font-weight:500}
.co-nav a{color:var(--co-ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.co-nav a:hover{border-bottom-color:var(--co-gold)}
.co-nav a[aria-current="page"]{border-bottom-color:var(--co-coral);color:var(--co-coral)}

/* hero */
.co-hero{position:relative;overflow:hidden;padding:64px 0 72px;border-bottom:1px solid var(--co-rule)}
.co-sun{position:absolute;right:-120px;top:-60px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#ffd06b 0%,#ff9a4a 45%,#ff5e4d 75%,rgba(255,94,77,0) 76%);opacity:.34;pointer-events:none}
.co-hero .co-wrap{position:relative}
.co-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--co-coral);margin-bottom:18px}
.co-hero h1{font-family:var(--co-serif);font-weight:800;font-size:clamp(44px,9vw,104px);line-height:.98;letter-spacing:-.035em;margin:0 0 28px;max-width:11.5em}
.co-hero h1 em{font-style:italic;font-weight:600;background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.08em}
.co-standfirst{font-family:var(--co-serif);font-size:clamp(20px,2.6vw,26px);line-height:1.45;max-width:30em;color:var(--co-mute);margin:0 0 32px}
.co-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.co-btn{display:inline-block;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;text-decoration:none;transition:transform .15s ease}
.co-btn:hover{transform:translateY(-1px);text-decoration:none}
.co-btn-main{background:var(--co-grad);color:#2b1913}
.co-btn-ghost{border:1.5px solid var(--co-ink);color:var(--co-ink)}

/* sections */
.co-sec{padding:64px 0;border-bottom:1px solid var(--co-rule)}
.co-sec-alt{background:var(--co-bg2)}
.co-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--co-coral);margin:0 0 10px}
.co-h2{font-family:var(--co-serif);font-weight:600;font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-.02em;margin:0 0 22px}

/* essay with drop cap + columns */
.co-essay{columns:2 320px;column-gap:48px;column-rule:1px solid var(--co-rule)}
.co-essay p{margin:0 0 1.1em;font-size:18px;line-height:1.75;break-inside:avoid-column}
.co-essay p:first-child::first-letter{font-family:var(--co-serif);font-weight:800;font-size:4.4em;line-height:.82;float:left;padding:.06em .1em 0 0;background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* numbered features */
.co-feats{list-style:none;margin:0;padding:0;counter-reset:co}
.co-feat{display:grid;grid-template-columns:96px 1fr;gap:8px 28px;padding:30px 0;border-top:1px solid var(--co-rule);counter-increment:co}
.co-feat:last-child{border-bottom:1px solid var(--co-rule)}
.co-feat::before{content:counter(co,decimal-leading-zero);font-family:var(--co-serif);font-style:italic;font-weight:600;font-size:56px;line-height:1;background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.co-feat h3{font-family:var(--co-serif);font-weight:600;font-size:26px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em}
.co-feat p{margin:0;max-width:40em;color:var(--co-mute)}

/* stats */
.co-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--co-ink);border-bottom:1px solid var(--co-rule)}
.co-stat{padding:26px 18px 24px 0;border-right:1px solid var(--co-rule);margin-right:18px}
.co-stat:last-child{border-right:0;margin-right:0}
.co-stat b{display:block;font-family:var(--co-serif);font-weight:800;font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:-.03em;background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.co-stat span{display:block;margin-top:10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--co-mute);line-height:1.4}

/* pull quote */
.co-pull{font-family:var(--co-serif);font-style:italic;font-weight:400;font-size:clamp(24px,3.6vw,38px);line-height:1.3;margin:0;padding:6px 0 6px 24px;border-left:5px solid var(--co-gold);max-width:24em}
.co-pull cite{display:block;margin-top:14px;font-family:var(--co-sans);font-style:normal;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--co-mute)}

/* code */
.co-fig{margin:26px 0}
.co-code{margin:0;padding:20px 22px;background:var(--co-code-bg);color:var(--co-code-ink);border-radius:10px;border-top:4px solid var(--co-coral);font-family:var(--co-mono);font-size:14px;line-height:1.65;overflow-x:auto;-webkit-overflow-scrolling:touch}
.co-code .k{color:#ffb255}
.co-code .s{color:#ff8f7a}
.co-code .c{color:#a58c78}
.co-cap{margin-top:8px;font-size:13px;color:var(--co-mute);font-style:italic}

/* inner pages */
.co-page{padding-top:56px;padding-bottom:72px}
.co-page h1{font-family:var(--co-serif);font-weight:800;font-size:clamp(40px,7vw,76px);line-height:1;letter-spacing:-.03em;margin:0 0 20px}
.co-lead{font-family:var(--co-serif);font-size:clamp(20px,2.6vw,25px);line-height:1.5;color:var(--co-mute);margin:0 0 36px;padding-bottom:30px;border-bottom:1px solid var(--co-rule)}
.co-page h2{font-family:var(--co-serif);font-weight:600;font-size:30px;line-height:1.2;letter-spacing:-.015em;margin:44px 0 12px}
.co-page h2 .co-num{font-style:italic;color:var(--co-coral);margin-right:.35em}
.co-page p{margin:0 0 1.1em}
.co-note{margin:26px 0;padding:18px 22px;background:var(--co-card);border:1px solid var(--co-rule);border-left:5px solid var(--co-gold);border-radius:4px;font-size:16px}
.co-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0}
.co-t{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.co-t th{text-align:left;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-mute);font-weight:700;padding:10px 14px 10px 0;border-bottom:2px solid var(--co-ink)}
.co-t td{padding:12px 14px 12px 0;border-bottom:1px solid var(--co-rule);vertical-align:top}
.co-up{color:#2f8f5b;font-weight:700}
.co-more{color:var(--co-gold);font-weight:700}
@media (prefers-color-scheme:dark){.co-up{color:#5fd493}}
.co-sig{font-family:var(--co-serif);font-style:italic;color:var(--co-mute)}

/* 404 */
.co-lost{max-width:700px;margin:0 auto;padding:88px 16px 96px;text-align:center}
.co-lost b{display:block;font-family:var(--co-serif);font-weight:800;font-size:clamp(110px,26vw,220px);line-height:.9;letter-spacing:-.05em;background:var(--co-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-bottom:18px}
.co-lost p{font-family:var(--co-serif);font-size:22px;line-height:1.5;color:var(--co-mute);margin:0 auto 30px;max-width:26em}

/* footer */
.co-foot{border-top:3px double var(--co-rule);padding:26px 0 40px;font-size:14px;color:var(--co-mute)}
.co-foot .co-wrap{display:flex;justify-content:space-between;gap:14px 24px;flex-wrap:wrap}
.co-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.co-foot a{color:var(--co-mute)}

@media (max-width:760px){
  body{font-size:16px}
  .co-hero{padding:44px 0 52px}
  .co-sun{width:300px;height:300px;right:-110px;top:-40px;opacity:.28}
  .co-sec{padding:44px 0}
  .co-feat{grid-template-columns:1fr;gap:6px}
  .co-feat::before{font-size:42px}
  .co-stats{grid-template-columns:1fr 1fr}
  .co-stat{border-right:0;margin-right:0;border-bottom:1px solid var(--co-rule)}
  .co-stat:nth-last-child(-n+2){border-bottom:0}
  .co-brand{font-size:30px}
  .co-essay{columns:1}
  .co-page{padding-top:40px;padding-bottom:56px}
}