/* Desk Notes: the Cordon landing-page system, turned into a long-form reading room. One column, large type, quiet tools. */
:root{
  --bg:#ffffff; --bg-alt:#f5f5f7; --fg:#1d1d1f; --fg-2:#6e6e73; --line:#d2d2d7; --surface:#ffffff; --surface-2:#f5f5f7;
  --accent:#0071e3; --accent-hover:#0077ed; --link:#0066cc; --on-accent:#ffffff;
  --pause:#c25700; --pause-soft:rgba(255,149,0,.14); --stop:#d70015; --calm:#248a3d; --calm-soft:rgba(52,199,89,.14);
  --metal:linear-gradient(180deg,#1d1d1f 0%,#3a3a3c 45%,#86868b 100%);
  --nav-bg:rgba(250,250,252,.8); --nav-solid:#fafafc; --nav-line:rgba(0,0,0,.08); --nav-hi:rgba(0,0,0,.06);
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Tight","Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#000000; --bg-alt:#101011; --fg:#f5f5f7; --fg-2:#98989d; --line:#2a2a2d; --surface:#1c1c1e; --surface-2:#2c2c2e;
  --link:#2997ff; --pause:#ff9f0a; --pause-soft:rgba(255,159,10,.15); --stop:#ff453a; --calm:#30d158; --calm-soft:rgba(48,209,88,.15);
  --metal:linear-gradient(180deg,#ffffff 0%,#c7c7cc 55%,#8e8e93 100%);
  --nav-bg:rgba(22,22,23,.8); --nav-solid:#161617; --nav-line:rgba(255,255,255,.12); --nav-hi:rgba(255,255,255,.12); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#000000; --bg-alt:#101011; --fg:#f5f5f7; --fg-2:#98989d; --line:#2a2a2d; --surface:#1c1c1e; --surface-2:#2c2c2e;
  --link:#2997ff; --pause:#ff9f0a; --pause-soft:rgba(255,159,10,.15); --stop:#ff453a; --calm:#30d158; --calm-soft:rgba(48,209,88,.15);
  --metal:linear-gradient(180deg,#ffffff 0%,#c7c7cc 55%,#8e8e93 100%);
  --nav-bg:rgba(22,22,23,.8); --nav-solid:#161617; --nav-line:rgba(255,255,255,.12); --nav-hi:rgba(255,255,255,.12); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:18px;line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);text-wrap:balance;letter-spacing:-.028em;line-height:1.08}
a{color:var(--link)}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.wrap{max-width:1024px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.read{max-width:700px}
.metal{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.mono{font-family:var(--mono)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--nav-line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--nav-solid)}
.nav .wrap{min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;gap:9px;color:var(--fg);text-decoration:none;font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:-.015em;white-space:nowrap}
.logo rect{stroke:currentColor}
.nav .right{display:flex;align-items:center;gap:18px}
.nav .right > a{color:var(--fg-2);text-decoration:none;font-size:.82rem;letter-spacing:0}
.nav .right > a:hover{color:var(--fg)}
.seg{display:flex;gap:2px;padding:2px;border-radius:980px;border:1px solid var(--nav-line)}
.seg button{font:400 .74rem var(--body);color:var(--fg-2);background:none;border:0;padding:4px 10px;border-radius:980px;cursor:pointer}
.seg button[aria-pressed="true"]{color:var(--fg);background:var(--nav-hi)}

/* hub */
.hubhero{padding-block:clamp(72px,10vw,130px) clamp(56px,7vw,90px);text-align:center}
.kicker{font-family:var(--display);font-weight:600;font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:-.01em;color:var(--fg-2)}
.hubhero h1{font-size:clamp(3rem,8.4vw,6.2rem);font-weight:700;line-height:1.02;margin-top:14px}
.hubhero .lede{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:500;line-height:1.36;color:var(--fg-2);max-width:32em;margin:22px auto 0}
.band{padding-block:clamp(64px,8vw,104px)}
.band.alt{background:var(--bg-alt)}
.band h2{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:700}
.band .sub{color:var(--fg-2);margin-top:10px;max-width:36em}
.rows{margin-top:34px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;padding-block:22px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.row h3{font-size:clamp(1.25rem,2vw,1.55rem);font-weight:600}
.row:hover h3{color:var(--link)}
.row p{grid-column:1;color:var(--fg-2);font-size:1rem}
.row span{grid-column:2;grid-row:1;color:var(--fg-2);font-size:.82rem;font-family:var(--mono);white-space:nowrap;padding-top:6px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.tile{background:var(--surface);border-radius:24px;padding:clamp(24px,3.2vw,36px);display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;min-width:0}
.tile b{font-size:.88rem;color:var(--link);font-weight:600}
.tile h3{font-size:1.55rem;font-weight:700}
.tile p{color:var(--fg-2);font-size:1rem}
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,44px);margin-top:34px}
.lanes > div{border-top:1px solid var(--line);padding-top:18px;min-width:0}
.lanes h3{font-size:1.2rem;font-weight:600;margin-bottom:6px}
.lanes p{color:var(--fg-2);font-size:.98rem}

/* article */
.head{padding-block:clamp(56px,8vw,96px) 34px}
.head h1{font-size:clamp(2.5rem,6.2vw,4.3rem);font-weight:700;margin-top:12px}
.head .dek{font-size:clamp(1.15rem,1.9vw,1.42rem);font-weight:500;line-height:1.36;color:var(--fg-2);margin-top:20px}
.byline{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.84rem;color:var(--fg-2);letter-spacing:0}
.prose{padding-bottom:70px}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(1.55rem,2.8vw,2rem);font-weight:700;margin-top:2em}
.prose h3{font-size:1.25rem;font-weight:600;margin-top:1.7em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.5em}
.prose strong{font-weight:600}
.callout{background:var(--bg-alt);border-radius:18px;padding:22px 24px}
.callout strong{display:block;margin-bottom:4px}
.tablebox{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600}
td{font-variant-numeric:tabular-nums}
.sources{border-top:1px solid var(--line);margin-top:2.6em;padding-top:18px;font-size:.84rem;color:var(--fg-2)}
.sources strong{display:block;color:var(--fg);margin-bottom:6px}
.sources ul{margin:0;padding-left:1.1em}
.next{background:var(--bg-alt);padding-block:clamp(48px,6vw,72px)}
.next .kicker{font-size:.95rem}
.next a{display:block;color:var(--fg);text-decoration:none;margin-top:8px;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.025em;line-height:1.1}
.next a:hover{color:var(--link)}

/* subscribe */
.subscribe{padding-block:clamp(64px,9vw,110px);text-align:center}
.subscribe h2{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:700}
.subscribe p.d{color:var(--fg-2);max-width:32em;margin:14px auto 0}
form.sub{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:520px;margin:26px auto 0}
.field{font:400 1rem var(--body);letter-spacing:-.01em;min-height:50px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);min-width:0;width:100%}
form.sub .field{flex:1 1 240px;width:auto}
.field::placeholder{color:var(--fg-2)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 24px;border-radius:12px;border:0;background:var(--accent);color:var(--on-accent);font:500 1rem var(--body);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--accent-hover)}
.btn.soft{background:var(--surface-2);color:var(--fg)}
.fine{font-size:.82rem;color:var(--fg-2);margin-top:12px}
.fine.ok{color:var(--calm);font-weight:500}.fine.err{color:var(--stop)}

/* tools */
.tool{background:var(--bg-alt);border-radius:26px;padding:clamp(22px,3.6vw,38px);display:flex;flex-direction:column;gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tool label{display:flex;flex-direction:column;gap:6px;font-size:.88rem;font-weight:500;min-width:0}
textarea.field{min-height:190px;padding:14px 16px;font-family:var(--mono);font-size:.84rem;line-height:1.55;resize:vertical}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.result{background:var(--surface);border-radius:18px;padding:22px}
.bigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bigs div{min-width:0}
.bigs b{display:block;font-family:var(--display);font-size:clamp(1.7rem,3.8vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.bigs span{font-size:.82rem;color:var(--fg-2)}
.neg{color:var(--stop)}.pos{color:var(--calm)}
.q{border-top:1px solid var(--line);padding-top:14px}
.q:first-child{border-top:0;padding-top:0}
.q p{font-weight:500}
.q .opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.q .opts label{flex-direction:row;align-items:center;gap:8px;font-weight:400;background:var(--surface);border-radius:10px;padding:8px 12px;cursor:pointer}
pre.out{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:.84rem;line-height:1.6;margin:0}

footer{background:var(--bg-alt);color:var(--fg-2);font-size:.76rem;line-height:1.5;letter-spacing:0;padding-block:30px 42px;border-top:1px solid var(--line)}
footer p + p{margin-top:8px}

@media (max-width:760px){
  .tiles,.lanes,.grid2{grid-template-columns:1fr}
  .bigs{grid-template-columns:1fr}
  .nav .right > a.hide{display:none}
}