/* ============================================================================
   PYLON EDITORIAL  ·  assets/css/pylon-editorial.css
   The Field Notes surface. Loaded AFTER pylon.css, on /notes/ pages only.
   Field Notes is the one place on the site set on paper: dark site chrome
   above and below, a cream editorial body between. Everything is namespaced
   .paper / .ed-* so nothing here can collide with pylon.css.
   ========================================================================= */

/* 01 ------------------------------------------------------------ PAPER SCOPE */
.paper{
--pp:#f2efe8;--pp-2:#e9e5da;--pw:#fbfaf7;
--pi:#101014;--pi-2:#33333b;--pi-3:#5f5f69;--pi-4:#86868f;
--prule:rgba(16,16,20,.16);--prule-2:rgba(16,16,20,.08);--prule-3:rgba(16,16,20,.04);
background:var(--pp);color:var(--pi);position:relative
}
.paper .tag,.paper .fade{color:var(--pi-4)}
.paper a{color:inherit}
.paper .mono{color:var(--pi-4)}
.paper hr{border:none;border-top:1px solid var(--prule);margin:0}
.paper .lnk{color:var(--pi-3);border-bottom-color:var(--prule)}
.paper .lnk:hover{color:var(--pi);border-bottom-color:var(--pi-3)}

/* 02 -------------------------------------------------------------- DATELINE */
/* the rail that runs under the site chrome on every paper page */
.ed-k{grid-column:1/13;display:flex;align-items:baseline;gap:.875rem;padding-bottom:1.25rem;border-bottom:1px solid var(--prule-2);color:var(--pi-4)}
.ed-k b{color:var(--pi-2);font-weight:500}
.ed-k a{color:var(--pi-2);transition:color .25s}
.ed-k a:hover{color:var(--pi)}
.ed-k .sp{flex:1}
@media(max-width:760px){.ed-k .r{display:none}}

/* 03 ----------------------------------------------------- INDEX  (masthead) */
.ed-mh{padding:clamp(3.5rem,9vh,6.5rem) 0 0;border-bottom:1px solid var(--prule)}
.ed-h{grid-column:1/12;padding:clamp(2.25rem,5vw,3.5rem) 0 clamp(1.5rem,3vw,2rem);font-size:clamp(2.5rem,7.2vw,6.25rem);letter-spacing:-.052em;line-height:.9;font-weight:500;color:var(--pi)}
@media(max-width:1024px){.ed-h{grid-column:1/-1}}
.ed-lede{grid-column:1/6;padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.ed-lede p{font-size:1.0625rem;line-height:1.7;color:var(--pi-2);max-width:42ch;text-wrap:pretty}
.ed-rail{grid-column:8/13;padding-bottom:clamp(2.5rem,5vw,3.5rem);display:flex;flex-direction:column;justify-content:flex-end;gap:1.125rem}
@media(max-width:1024px){.ed-lede,.ed-rail{grid-column:1/-1}.ed-lede{padding-bottom:2rem}}
.ed-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);padding-top:1.25rem;border-top:1px solid var(--prule)}
@media(max-width:560px){.ed-facts{grid-template-columns:1fr;gap:1.125rem}}
.ed-facts div b{display:block;font-size:clamp(1rem,1.3vw,1.125rem);font-weight:500;letter-spacing:-.03em;color:var(--pi);line-height:1.25}
.ed-facts div span{display:block;margin-top:.4rem;font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-4);line-height:1.55}

/* 04 ------------------------------------------------------ INDEX  (register) */
/* A numbered register, not a card grid. One hairline row per note. */
.ed-reg{padding:0 0 clamp(4rem,8vh,7rem)}
.ed-reg .wrap{position:relative}
.ed-row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) 10rem;column-gap:var(--gut);align-items:start;padding:clamp(1.75rem,3.4vw,2.875rem) clamp(.5rem,1vw,1rem);margin:0 clamp(-1rem,-1vw,-.5rem);border-bottom:1px solid var(--prule);transition:background .35s var(--e)}
.ed-row:hover{background:rgba(16,16,20,.035)}
@media(max-width:900px){.ed-row{grid-template-columns:3.25rem minmax(0,1fr);row-gap:1rem}}
.ed-no{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pi-4);padding-top:.5rem}
.ed-c h2{font-size:clamp(1.5rem,2.9vw,2.375rem);letter-spacing:-.04em;line-height:1.06;font-weight:500;color:var(--pi);text-wrap:balance;max-width:26ch}
.ed-c p{margin-top:1rem;font-size:1rem;line-height:1.65;color:var(--pi-2);max-width:58ch;text-wrap:pretty}
.ed-c .ed-go{display:inline-flex;align-items:center;gap:.625rem;margin-top:1.5rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pi);padding-bottom:.375rem;border-bottom:1px solid var(--prule);transition:gap .3s var(--e),border-color .3s}
.ed-row:hover .ed-go{gap:1rem;border-bottom-color:var(--pi)}
.ed-m{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-4);line-height:1.6}
.ed-m b{color:var(--pi-2);font-weight:500}
@media(max-width:900px){.ed-m{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:.875rem;padding-top:0;order:-1;margin-bottom:-.5rem}}

/* 05 ------------------------------------------------------ ARTICLE  (opener) */
.ed-ah{padding:clamp(3.5rem,9vh,6.5rem) 0 0;border-bottom:1px solid var(--prule)}
.ed-title{grid-column:1/11;padding:clamp(2rem,4.5vw,3.25rem) 0 clamp(1.25rem,2.5vw,1.75rem);font-size:clamp(2.125rem,5.4vw,4.5rem);letter-spacing:-.05em;line-height:.94;font-weight:500;color:var(--pi);text-wrap:balance}
@media(max-width:1024px){.ed-title{grid-column:1/-1}}
.ed-dek{grid-column:1/7;font-size:clamp(1.125rem,1.7vw,1.3125rem);line-height:1.5;letter-spacing:-.02em;color:var(--pi-3);max-width:44ch;padding-bottom:clamp(2rem,4vw,2.75rem);text-wrap:pretty}
@media(max-width:1024px){.ed-dek{grid-column:1/-1}}
.ed-by{grid-column:1/13;display:flex;align-items:center;flex-wrap:wrap;gap:.875rem 1.25rem;padding:1.25rem 0 clamp(2rem,4vw,2.75rem);border-top:1px solid var(--prule)}
.ed-by .who{font-size:1rem;font-weight:600;letter-spacing:-.025em;color:var(--pi);white-space:nowrap}
.ed-by .role,.ed-by time,.ed-by .len{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-4)}
.ed-by .sp{flex:1}
.ed-by .topics{display:flex;flex-wrap:wrap;gap:.5rem}
.ed-by .topics span{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-3);border:1px solid var(--prule);padding:.35rem .55rem}

/* 06 -------------------------------------------------------- ARTICLE  (body) */
/* --measure is the one knob for how wide a note reads. Everything inside the
   article inherits its width from the container rather than carrying its own
   ch cap, so this single value moves the prose, the lists, the CTA card and the
   next-note rail together and they cannot drift apart. */
.ed-ab{--measure:clamp(860px,52vw,1040px);padding:clamp(3rem,6vw,4.5rem) 0 clamp(4rem,8vh,7rem)}
/* Centred on the measure rather than parked in grid columns. Any fixed column
   span is only balanced at one window width, because the prose stops at its cap
   while the column keeps growing, and all of that slack lands on the right:
   4/11 measured 0 skew at 1520 and 143px at 2000. Spanning wide and centring on
   max-width instead holds the skew at 0 from 1025 up, and the span is now just
   an outer bound the measure never reaches. */
.ed-body,.ed-cta,.ed-next{grid-column:2/12;width:100%;max-width:var(--measure);margin-inline:auto}
@media(max-width:1024px){.ed-body,.ed-cta,.ed-next{grid-column:1/-1;max-width:none}}
/* Below 1024 the column runs full bleed, so the old 66ch cap comes back to stop
   a tablet from setting 107-character lines. Above it the container is the cap. */
@media(max-width:1024px){.ed-body p,.ed-body h2,.ed-body ul,.ed-body ol{max-width:66ch}}
.ed-body>*+*{margin-top:1.375rem}
.ed-body p{font-size:1.125rem;line-height:1.72;color:var(--pi-2);text-wrap:pretty}
.ed-body p.stand{font-size:1.3125rem;line-height:1.55;letter-spacing:-.02em;color:var(--pi)}
.ed-body b,.ed-body strong{color:var(--pi);font-weight:600}
.ed-body em{font-style:italic;color:var(--pi-2)}
.ed-body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--prule);color:var(--pi);transition:text-decoration-color .25s}
.ed-body a:hover{text-decoration-color:var(--pi)}
.ed-body h2{position:relative;margin-top:clamp(2.75rem,5vw,4rem);font-size:clamp(1.375rem,2.2vw,1.875rem);letter-spacing:-.035em;line-height:1.12;font-weight:500;color:var(--pi);padding:1.25rem 26% 0 0;border-top:1px solid var(--prule);text-wrap:pretty}
.ed-body h2+*{margin-top:1.25rem}
/* a pull quote already closes with a rule; don't stack a second one under it */
.ed-pull+h2,.ed-verdict+h2{border-top:0;padding-top:0}
/* section number hangs in the left gutter, author-controlled via data-n */
.ed-body h2[data-n]::before{content:attr(data-n);position:absolute;left:-4.75rem;top:1.45rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;color:var(--pi-4)}
@media(max-width:1024px){.ed-body h2[data-n]::before{position:static;display:block;margin-bottom:.75rem}}
.ed-body h3{margin-top:2rem;font-size:1.125rem;font-weight:600;letter-spacing:-.025em;color:var(--pi)}
/* a sub-section can carry a qualifier (a duration, a stage) above its title */
.ed-body h3[data-t]::before{content:attr(data-t);display:block;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--acc,#6366f1);margin-bottom:.5rem}
.ed-body h3+*{margin-top:.75rem}
.ed-body ul{list-style:none;display:flex;flex-direction:column;gap:.875rem}
.ed-body ul li{position:relative;padding-left:1.5rem;font-size:1.0625rem;line-height:1.65;color:var(--pi-2);text-wrap:pretty}
.ed-body ul li::before{content:"";position:absolute;left:0;top:.6rem;width:.4375rem;height:.4375rem;background:var(--acc,#6366f1)}
.ed-body ol{list-style:none;counter-reset:edol;display:flex;flex-direction:column;gap:.875rem}
.ed-body ol li{counter-increment:edol;position:relative;padding-left:2.25rem;font-size:1.0625rem;line-height:1.65;color:var(--pi-2)}
.ed-body ol li::before{content:counter(edol,decimal-leading-zero);position:absolute;left:0;top:.2rem;font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.14em;color:var(--pi-4)}
.ed-body blockquote{padding:.25rem 0 .25rem 1.5rem;border-left:2px solid var(--acc,#6366f1);font-size:clamp(1.1875rem,1.8vw,1.4375rem);font-weight:500;letter-spacing:-.03em;line-height:1.3;color:var(--pi)}
.ed-body code{font-family:var(--mono);font-size:.875em;background:rgba(16,16,20,.06);padding:.125rem .375rem;color:var(--pi)}
.ed-body hr{margin:clamp(2.5rem,5vw,3.5rem) 0;border-top:1px solid var(--prule)}
/* pull quote: full measure, ruled top and bottom, set at display weight */
.ed-pull{margin:clamp(2.5rem,5vw,3.5rem) 0;padding:1.5rem 34% 1.5rem 0;border-top:1px solid var(--prule);border-bottom:1px solid var(--prule);font-size:clamp(1.375rem,2.4vw,1.875rem);letter-spacing:-.04em;line-height:1.16;font-weight:500;color:var(--pi);text-wrap:balance}
@media(max-width:700px){.ed-body h2{padding-right:0}.ed-pull{padding-right:0}}
/* verdict block: the "bad sign / good sign" reads better as a ruled pair */
.ed-verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);margin-top:1.75rem;border-top:1px solid var(--prule)}
@media(max-width:640px){.ed-verdict{grid-template-columns:1fr;gap:0}}
.ed-verdict div{padding:1.25rem 0}
.ed-verdict div+div{border-left:1px solid var(--prule-2);padding-left:var(--gut)}
@media(max-width:640px){.ed-verdict div+div{border-left:none;border-top:1px solid var(--prule-2);padding-left:0}}
.ed-verdict b{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.625rem}
.ed-verdict .no b{color:#b4341f}
.ed-verdict .yes b{color:#1c7a4f}
.ed-verdict p{font-size:1rem;line-height:1.6;color:var(--pi-2)}
/* closing aside, set small */
.ed-aside{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--prule)}
.ed-aside p{font-size:.9375rem;line-height:1.7;color:var(--pi-3);max-width:60ch}

/* 07 ---------------------------------------------------- ARTICLE  (footer) */
.ed-cta{margin-top:clamp(3rem,6vw,4.5rem);background:var(--pw);border:1px solid var(--prule);padding:clamp(1.75rem,3.2vw,2.5rem)}
.ed-cta .lbl{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-4);margin-bottom:1rem}
.ed-cta h3{font-size:clamp(1.25rem,2vw,1.625rem);letter-spacing:-.035em;line-height:1.14;font-weight:500;color:var(--pi);max-width:26ch}
.ed-cta p{margin-top:.875rem;font-size:1rem;line-height:1.65;color:var(--pi-2);max-width:56ch;text-wrap:pretty}
.ed-cta .btn{margin-top:1.75rem;border-color:var(--pi);background:var(--pi);color:var(--pp);font-weight:600;white-space:nowrap}
.ed-cta .btn:hover{background:#2a2a32;border-color:#2a2a32}
/* prev / next rail */
.ed-next{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--prule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
@media(max-width:640px){.ed-next{grid-template-columns:1fr;gap:0}}
.ed-next a{padding:1.5rem 0;display:block;transition:opacity .25s}
.ed-next a+a{border-left:1px solid var(--prule-2);padding-left:var(--gut)}
@media(max-width:640px){.ed-next a+a{border-left:none;border-top:1px solid var(--prule-2);padding-left:0}}
.ed-next .dir{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-4);margin-bottom:.75rem}
.ed-next .ttl{display:block;font-size:1.0625rem;font-weight:500;letter-spacing:-.03em;line-height:1.25;color:var(--pi-2);max-width:28ch;transition:color .25s}
.ed-next a:hover .ttl{color:var(--pi)}
.ed-next .all{grid-column:1/-1;border-top:1px solid var(--prule-2);padding:1.25rem 0 0;display:flex}

/* ============================================================================
   08 ------------------------------------------------------------- DISPATCH
   The Pylon Dispatch: company announcements, same paper surface as Field Notes.
   A real nameplate (not a page title) so successive issues read as a series.
   ========================================================================= */
.dp-mh{padding:clamp(3rem,7vh,5rem) 0 0}
/* the heavy nameplate rule is a border on the plate itself, not a spacer div */
.dp-plate{grid-column:1/13;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:2px solid var(--pi)}
.dp-nm{display:flex;align-items:center;gap:.875rem;color:var(--pi)}
.dp-nm svg{height:22px;width:auto;flex-shrink:0}
.dp-nm b{font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.dp-vol{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pi-3);display:flex;align-items:baseline;gap:.75rem;padding-bottom:.25rem}
.dp-vol .sep{color:var(--pi-4);opacity:.6}
.dp-line{grid-column:1/13;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.75rem 0 0;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-4)}
.dp-line b{color:var(--pi-2);font-weight:500}

.dp-hl{grid-column:1/12;padding:clamp(2.5rem,5.5vw,4rem) 0 clamp(2rem,4vw,3rem);font-size:clamp(2.25rem,6.4vw,5.25rem);letter-spacing:-.05em;line-height:.92;font-weight:500;color:var(--pi);text-wrap:balance}
.dp-hl .soft{color:var(--pi-4)}
@media(max-width:1024px){.dp-hl{grid-column:1/-1}}

/* the two launch products, as a ruled pair */
.dp-pair{grid-column:1/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
@media(max-width:760px){.dp-pair{grid-template-columns:1fr;gap:0}}
.dp-p{padding-top:1.25rem;border-top:1px solid var(--pi)}
@media(max-width:760px){.dp-p+.dp-p{margin-top:2rem}}
.dp-p .k{display:flex;align-items:center;gap:.625rem;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-3);margin-bottom:1rem}
.dp-p .k i{width:.5rem;height:.5rem;flex-shrink:0;font-style:normal}
.dp-p p{font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.02em;line-height:1.35;color:var(--pi);max-width:36ch;text-wrap:pretty}
.dp-p .lnk{margin-top:1.25rem}

/* release body */
.dp-ab{padding:clamp(2.5rem,5vw,3.5rem) 0 clamp(4rem,8vh,7rem);border-top:1px solid var(--prule)}
.dp-body{grid-column:1/8}
@media(max-width:1024px){.dp-body{grid-column:1/-1}}
.dp-body .lbl{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-4);margin-bottom:1.75rem}
.dp-lead{font-size:clamp(1.125rem,1.6vw,1.375rem);font-weight:500;letter-spacing:-.02em;line-height:1.5;color:var(--pi);max-width:52ch;text-wrap:pretty}
.dp-body p{font-size:1.0625rem;line-height:1.72;color:var(--pi-2);max-width:60ch;text-wrap:pretty}
.dp-body .dp-lead+p{margin-top:1.75rem}
.dp-body p+p{margin-top:1.25rem}
.dp-q{margin:clamp(2.25rem,4.5vw,3rem) 0;padding:.25rem 0 .25rem 1.5rem;border-left:2px solid var(--acc,#6366f1)}
.dp-q p{font-size:clamp(1.1875rem,1.9vw,1.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.3;color:var(--pi);max-width:32ch}
.dp-q cite{display:block;margin-top:1.125rem;font-style:normal;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-4)}
.dp-side{grid-column:9/13;align-self:start;position:sticky;top:calc(var(--chrome) + 2rem)}
@media(max-width:1024px){.dp-side{grid-column:1/-1;position:static;margin-top:3rem}}
.dp-box{border-top:1px solid var(--pi);padding-top:1.25rem}
.dp-box+.dp-box{margin-top:2rem}
.dp-box .lbl{display:block;font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pi-4);margin-bottom:1rem}
.dp-box p{font-size:.9375rem;line-height:1.7;color:var(--pi-2);max-width:38ch}
.dp-box p+p{margin-top:.875rem}
.dp-box a{text-decoration:underline;text-decoration-color:var(--prule);text-underline-offset:3px;transition:text-decoration-color .25s}
.dp-box a:hover{text-decoration-color:var(--pi)}
.dp-box dl{display:flex;flex-direction:column;gap:.875rem}
.dp-box dt{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-4)}
.dp-box dd{font-size:.9375rem;line-height:1.6;color:var(--pi-2);margin-top:.25rem}
.dp-end{grid-column:1/8;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.25rem;border-top:1px solid var(--prule);font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pi-4)}
@media(max-width:1024px){.dp-end{grid-column:1/-1}}

/* issue register: successive dispatches stack here */
.dp-arc{padding:0 0 clamp(4rem,8vh,6rem)}
.dp-arc .hd{grid-column:1/13;display:flex;align-items:baseline;gap:.875rem;padding-bottom:1rem;border-bottom:1px solid var(--pi);font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pi-3)}
.dp-arc .hd .sp{flex:1}
.dp-iss{grid-column:1/13;display:grid;grid-template-columns:8rem minmax(0,1fr) 9rem;column-gap:var(--gut);align-items:baseline;padding:1.5rem clamp(.5rem,1vw,1rem);margin:0 clamp(-1rem,-1vw,-.5rem);border-bottom:1px solid var(--prule)}
@media(max-width:760px){.dp-iss{grid-template-columns:1fr;row-gap:.625rem}}
.dp-iss .v,.dp-iss .w{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--pi-4)}
.dp-iss .t{font-size:1.0625rem;font-weight:500;letter-spacing:-.03em;line-height:1.3;color:var(--pi)}
.dp-iss.now{background:rgba(16,16,20,.04)}
.dp-iss.now .w{color:var(--pi-2)}