/* SkillDojo Field Notes: shared entry stylesheet.
   Template approved 2026-08-26 (s5016). Tokens lifted from the home page so the
   section reads as one site. Two box types live here and must stay visually
   distinct: .summary (white ground, red top rule) is the entry summary; .callout
   (grey ground, dark left rule) is the technical register. If they converge,
   readers learn to skip both. */
:root{
  --white:#FFFFFF; --char:#363636; --red:#D41E1E; --offwhite:#F7F6F4;
  --hairline:#E8E7E5; --gray:#6E6E6E; --char-deep:#2B2B2B;
  --font:'Hanken Grotesk',-apple-system,'Segoe UI',Arial,sans-serif;
  --content:1080px; --measure:66ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);color:var(--char);background:var(--white);
  font-size:1.125rem;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px}
a{color:inherit}
a:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:2px}

/* header + footer: lifted from the home page so the section reads as one site */
header{background:var(--char);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--content);margin:0 auto}
.nav img{height:34px;width:auto;display:block}
.nav .by{font-size:.72rem;color:#B8B7B5;letter-spacing:.06em;margin-left:10px;white-space:nowrap}
.nav-brand{display:flex;align-items:baseline}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-link{color:#E8E7E5;text-decoration:none;font-weight:600;font-size:.95rem;
  white-space:nowrap;border-bottom:2px solid transparent;padding-bottom:2px}
.nav-link:hover{border-bottom-color:var(--red)}
.nav-link[aria-current]{border-bottom-color:var(--red)}
.btn{display:inline-block;font-weight:700;font-size:1rem;padding:14px 28px;border-radius:6px;
  text-decoration:none;white-space:nowrap;border:2px solid transparent;transition:background .15s}
.btn-red{background:var(--red);color:var(--white)}
.btn-red:hover{background:#B51818}
.nav .btn{padding:10px 20px;font-size:.92rem}

/* ============ Entry masthead ============ */
.masthead{padding-top:56px}
.crumb{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);text-decoration:none;display:inline-block;margin-bottom:22px}
.crumb:hover{text-decoration:underline}
h1{font-size:clamp(2.2rem,5.2vw,3.5rem);font-weight:800;letter-spacing:-0.025em;
  line-height:1.08;text-wrap:balance;max-width:20ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin-top:26px;padding-bottom:26px;border-bottom:1px solid var(--hairline);
  font-size:.92rem;color:var(--gray)}
.byline .no{font-weight:700;color:var(--char)}
.byline .dot{color:var(--hairline)}
/* attribution slot: carries a named external co-author from day one (D-5014-9) */
.byline .attrib{width:100%;font-size:.88rem;color:var(--gray);margin-top:2px}

/* ============ Article grid: body + right rail ============ */
.entry{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  column-gap:64px;align-items:start;padding-top:44px;padding-bottom:20px}
.entry > *{grid-column:1;max-width:var(--measure)}
.entry > p{margin-bottom:26px}
.entry h2{grid-column:1;font-size:1.55rem;font-weight:800;letter-spacing:-0.015em;
  line-height:1.2;margin:46px 0 18px;text-wrap:balance}
.entry .lede{font-size:1.28rem;line-height:1.6;font-weight:500}
.entry strong{font-weight:700}

/* ============ The summary block ============
   Deliberately NOT a bordered aside: the technical call-outs below are the
   bordered element, and two similar boxes on one page teach the reader to
   skip both. This one is a masthead panel. Source order places it after the
   opening paragraph, so it stacks BELOW that paragraph on a phone and never
   spoils the opening. */
.summary{grid-column:2;grid-row:1 / 60;align-self:start;max-width:none;
  border-top:3px solid var(--red);padding-top:18px;font-size:.98rem;line-height:1.6}
.summary .lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px}
.summary p{max-width:none;margin-bottom:12px}
.summary .punch{font-weight:700;color:var(--char);font-size:1.06rem;line-height:1.45}
.summary .stats{margin-top:16px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:.86rem;color:var(--gray)}
.summary .stats b{color:var(--char);font-weight:700}

/* ============ Technical call-out: the expert register ============ */
.callout{grid-column:1;background:var(--offwhite);border-left:3px solid var(--char);
  padding:26px 30px;margin:34px 0;font-size:1rem;line-height:1.65;max-width:var(--measure)}
.callout .lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);margin-bottom:14px}
.callout p{max-width:none;margin-bottom:14px}
.callout p:last-child{margin-bottom:0}
.callout ul{margin:0 0 14px 20px}
.callout li{margin-bottom:6px}
.callout .tw{overflow-x:auto;margin-bottom:14px}
.callout table{border-collapse:collapse;width:100%;font-size:.94rem}
.callout th,.callout td{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--hairline);white-space:nowrap}
.callout th{font-weight:700}

/* forthcoming cross-links: rendered as text, never as a 404 */
.soon{color:var(--gray);border-bottom:1px dotted var(--hairline)}
.entry a{color:var(--char);text-decoration:underline;text-decoration-color:var(--red);
  text-underline-offset:3px;text-decoration-thickness:2px}

.signoff{grid-column:1;margin:52px 0 0;padding-top:26px;border-top:1px solid var(--hairline);
  font-size:1.05rem;font-weight:600;color:var(--char);max-width:var(--measure)}
.entry .foot-date{font-size:.92rem;color:var(--gray);font-style:italic;margin-bottom:20px}

footer{background:var(--char-deep);color:#B8B7B5;padding:52px 0 36px;font-size:.9rem;margin-top:80px}
footer .f-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer a{color:#D9D8D6;text-decoration:none}
footer a:hover{text-decoration:underline}
footer .f-brand img{height:30px;width:auto;display:block}
footer .f-brand .by{font-size:.78rem;letter-spacing:.06em;margin-top:8px;display:block}
footer .f-brand .tag{font-size:.92rem;color:#D9D8D6;margin-top:16px}
footer .f-brand .billing{font-size:.85rem;margin-top:16px;max-width:36ch;line-height:1.6}
footer .f-links{display:flex;flex-direction:column;gap:10px}
footer .f-links .f-h{color:var(--white);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
footer .f-legal{border-top:1px solid #4A4A4A;margin-top:36px;padding-top:20px;font-size:.82rem;color:#9A9997}

@media (max-width:900px){
  body{font-size:1.06rem}
  .nav .by{display:none}
  .entry{grid-template-columns:1fr;column-gap:0;padding-top:34px}
  .entry > *{max-width:none}
  /* the block leaves the rail and lands where it sits in the source: AFTER
     the opening paragraph. Never above it. */
  .summary{grid-column:1;grid-row:auto;margin:6px 0 30px}
  .callout{padding:22px 22px;margin:28px 0}
  .masthead{padding-top:38px}
}
@media (max-width:560px){
  /* the slash separators orphan at the end of a wrapped line; the gap
     already does the separating at this width */
  .byline .dot{display:none}
  .byline{gap:4px 14px}
}

/* ============ Section index (/field-notes/) ============ */
.fn-intro{padding-top:56px;padding-bottom:8px}
.fn-intro h1{max-width:none}
.fn-intro .standfirst{font-size:1.22rem;line-height:1.6;color:var(--char);
  max-width:60ch;margin-top:22px}
.fn-intro .note{font-size:1rem;color:var(--gray);max-width:60ch;margin-top:16px}
.fn-list{padding-top:40px;padding-bottom:20px}
.fn-item{display:block;text-decoration:none;color:inherit;
  padding:30px 0;border-top:1px solid var(--hairline)}
.fn-item:last-of-type{border-bottom:1px solid var(--hairline)}
.fn-item:hover h2{color:var(--red)}
.fn-item .meta{font-size:.82rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gray);margin-bottom:10px}
.fn-item .meta b{color:var(--red);font-weight:700}
.fn-item h2{font-size:1.85rem;font-weight:800;letter-spacing:-0.02em;line-height:1.15;
  margin:0 0 12px;max-width:22ch;transition:color .15s;text-wrap:balance}
.fn-item .blurb{font-size:1.06rem;line-height:1.6;color:var(--char);max-width:62ch;
  margin-bottom:12px}
.fn-item .figs{font-size:.9rem;color:var(--gray)}
.fn-item .figs b{color:var(--char);font-weight:700}
@media (max-width:900px){
  .fn-intro{padding-top:38px}
  .fn-item h2{font-size:1.5rem;max-width:none}
}

@media (max-width:560px){
  /* nav gets a third element at s5016 (Field Notes); tighten so nothing wraps */
  .nav{padding:12px 16px}
  .nav img{height:28px}
  .nav-right{gap:14px}
  .nav-link{font-size:.88rem}
  .nav .btn{padding:9px 14px;font-size:.85rem}
}