/* FDE Field Notes — extends the locked ScottFelten.com tokens and shell. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.blog-wrap { width: min(100%, 1296px); }
.blog-lede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .4fr); align-items: end; gap: 40px; padding: clamp(64px, 10vw, 118px) 0 48px; }
.blog-lede .eyebrow { grid-column: 1 / -1; margin-bottom: -18px; }
.blog-lede h1 { max-width: 12ch; margin: 0; font-size: clamp(44px, 7vw, 86px); font-stretch: 108%; font-weight: 800; letter-spacing: -.055em; line-height: .99; }
.blog-lede h1 em { display: block; color: var(--ink-soft); font-size: .8em; font-stretch: 80%; font-weight: 400; }
.blog-lede .lede-copy { max-width: 36ch; margin: 0; color: var(--ink-soft); font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; }
.blog-lede-meta { grid-column: 1 / -1; display: flex; gap: 18px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--ink-soft); font: 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.blog-lede-meta a { text-decoration-color: var(--line); text-underline-offset: 4px; }

.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin: clamp(12px, 2vw, 24px); }
.blog-card { min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--panel); }
.blog-grid > .blog-card { border: 1px solid var(--rule); }
.blog-card-featured { grid-column: 1 / -1; justify-self: center; width: min(100%, 1040px); margin-bottom: clamp(72px, 8vw, 112px); }
.blog-card-link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; }
.blog-card-featured .blog-card-link { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; }
.blog-card-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 4vw, 44px); }
.blog-card h2 { max-width: 18ch; margin: 22px 0 14px; font-size: clamp(26px, 3.4vw, 42px); font-stretch: 106%; font-weight: 800; letter-spacing: -.038em; line-height: 1.04; }
.blog-card:not(.blog-card-featured) h2 { font-size: clamp(24px, 2.7vw, 34px); }
.blog-card p { max-width: 54ch; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.blog-card .text-arrow { margin-top: auto; padding-top: 34px; color: var(--line); }
.blog-card-link:hover h2, .blog-card-link:focus-visible h2 { color: var(--deep); }
.blog-card-link:hover .text-arrow, .blog-card-link:focus-visible .text-arrow { text-decoration: underline; text-underline-offset: 5px; }
.blog-card-link:focus-visible { outline: 2px solid var(--line); outline-offset: -2px; }

.blog-meta { display: flex; flex-wrap: wrap; gap: 7px 15px; color: var(--ink-soft); font: 9.5px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.blog-meta > span { position: relative; }
.blog-meta > span:not(:last-child)::after { content: "/"; position: absolute; right: -10px; color: var(--rule); }
.blog-status { padding: 2px 7px; border: 1px solid var(--line); color: var(--deep); }

.blog-visual { position: relative; isolation: isolate; overflow: hidden; min-height: 270px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--fill) 54%, var(--panel)); color: var(--deep); }
.blog-card-featured .blog-visual { min-height: 430px; border-right: 1px solid var(--rule); border-bottom: 0; }
.blog-visual-hero { min-height: clamp(320px, 47vw, 560px); margin-top: 38px; border: 1px solid var(--rule); }
.blog-visual::before, .blog-visual::after { content: ""; position: absolute; pointer-events: none; }
.blog-visual::before { inset: 11% 8%; border: 1px solid color-mix(in srgb, var(--deep) 22%, transparent); }
.blog-visual::after { width: 44%; aspect-ratio: 1; top: 50%; left: 50%; border: 1px solid var(--line); border-radius: 50%; opacity: .42; transform: translate(-50%, -50%); }
.blog-visual-label { position: absolute; z-index: 3; top: 20px; left: 22px; max-width: calc(100% - 44px); color: var(--deep); font: 9px/1.45 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.blog-visual-line { position: absolute; z-index: 1; height: 1px; background: var(--line); transform-origin: left center; }
.blog-visual-line.line-a { top: 36%; left: 14%; width: 73%; }
.blog-visual-line.line-b { top: 52%; left: 22%; width: 58%; }
.blog-visual-line.line-c { top: 68%; left: 32%; width: 45%; }
.blog-visual-node { position: absolute; z-index: 2; display: block; width: 15px; height: 15px; border: 2px solid var(--deep); background: var(--panel); }
.blog-visual .node-a { top: calc(36% - 7px); left: 14%; border-radius: 50%; }
.blog-visual .node-b { top: calc(52% - 7px); left: 42%; transform: rotate(45deg); }
.blog-visual .node-c { top: calc(68% - 7px); left: 68%; border-radius: 50%; }
.blog-visual .node-d { top: calc(36% - 7px); right: 12%; }

.blog-visual[data-pattern="evidence-grid"]::after { width: 36%; border-radius: 0; box-shadow: 22px 22px 0 color-mix(in srgb, var(--line) 20%, transparent), -22px -22px 0 color-mix(in srgb, var(--line) 16%, transparent); }
.blog-visual[data-pattern="evidence-grid"] .line-b { left: 14%; width: 73%; }
.blog-visual[data-pattern="decision-path"] .line-a { top: 50%; transform: rotate(-12deg); }
.blog-visual[data-pattern="decision-path"] .line-b { top: 50%; transform: rotate(12deg); }
.blog-visual[data-pattern="decision-path"] .line-c { top: 50%; left: 18%; width: 68%; }
.blog-visual[data-pattern="decision-path"] .node-a { top: calc(50% - 7px); }
.blog-visual[data-pattern="decision-path"] .node-b { top: 34%; left: 49%; }
.blog-visual[data-pattern="decision-path"] .node-c { top: 63%; left: 72%; }
.blog-visual[data-pattern="field-system"]::before { inset: 16% 10%; border-left-width: 7px; border-right-width: 7px; }
.blog-visual[data-pattern="field-system"]::after { width: 24%; box-shadow: -90px 0 0 -1px color-mix(in srgb, var(--fill) 70%, var(--panel)), 90px 0 0 -1px color-mix(in srgb, var(--fill) 70%, var(--panel)); }
.blog-visual[data-pattern="transfer-path"] .blog-visual-line { left: 12%; width: 76%; }
.blog-visual[data-pattern="transfer-path"] .line-a { top: 44%; }
.blog-visual[data-pattern="transfer-path"] .line-b { top: 50%; }
.blog-visual[data-pattern="transfer-path"] .line-c { top: 56%; }
.blog-visual[data-pattern="transfer-path"] .node-a { top: calc(50% - 7px); left: 12%; }
.blog-visual[data-pattern="transfer-path"] .node-b { top: calc(50% - 7px); left: 38%; }
.blog-visual[data-pattern="transfer-path"] .node-c { top: calc(50% - 7px); left: 64%; }
.blog-visual[data-pattern="transfer-path"] .node-d { top: calc(50% - 7px); right: 10%; }

.blog-empty { max-width: 740px; margin-top: 30px; padding: clamp(34px, 6vw, 68px); border: 1px solid var(--rule); background: var(--panel); }
.blog-empty h2 { margin: 0 0 16px; font-size: clamp(30px, 5vw, 52px); letter-spacing: -.04em; }
.blog-empty > p:not(.eyebrow) { max-width: 54ch; color: var(--ink-soft); font-size: 15px; line-height: 1.65; }
.blog-empty .text-arrow { margin-top: 24px; }

.article-header { max-width: 930px; padding: clamp(58px, 9vw, 110px) 0 0; }
.blog-back { display: inline-flex; margin-bottom: 32px; color: var(--ink-soft); font: 10px/1.4 var(--mono); letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.blog-back:hover, .blog-back:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; outline: none; }
.article-header h1 { max-width: 17ch; margin: 24px 0 22px; font-size: clamp(42px, 7.2vw, 84px); font-stretch: 108%; font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.article-deck { max-width: 68ch; margin: 0; color: var(--ink-soft); font-size: clamp(17px, 2vw, 21px); line-height: 1.55; }
.article-byline { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-soft); font: 10px/1.45 var(--mono); letter-spacing: .09em; text-transform: uppercase; }

.article-layout { display: grid; grid-template-columns: minmax(150px, .28fr) minmax(0, 740px) minmax(40px, .12fr); gap: clamp(28px, 6vw, 78px); margin-top: clamp(48px, 8vw, 84px); }
.article-rail { grid-column: 1; align-self: start; position: sticky; top: 24px; display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.article-rail > span { margin-top: 12px; color: var(--line); font: 9px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.article-rail strong { color: var(--ink-soft); font: 11px/1.55 var(--mono); font-weight: 400; text-transform: capitalize; }
.article-rail ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font: 10px/1.5 var(--mono); }
.article-body { grid-column: 2; min-width: 0; font-size: 17px; line-height: 1.76; }
.article-body > *:first-child { margin-top: 0; }
.article-body h2 { margin: 2.8em 0 .7em; font-size: clamp(28px, 4vw, 42px); font-stretch: 105%; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.article-body h3 { margin: 2.3em 0 .65em; font-size: clamp(21px, 2.5vw, 27px); letter-spacing: -.025em; line-height: 1.2; }
.article-body h4 { margin: 2em 0 .55em; font-size: 18px; }
.article-body p, .article-body li { color: var(--ink-soft); }
.article-body p { margin: 0 0 1.25em; }
.article-body strong { color: var(--ink); font-weight: 650; }
.article-body a { color: var(--ink); text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.article-body a:hover, .article-body a:focus-visible { color: var(--deep); outline: none; text-decoration-thickness: 2px; }
.article-body ul, .article-body ol { display: grid; gap: .55em; margin: 1.2em 0 1.6em; padding-left: 1.4em; }
.article-body li::marker { color: var(--line); font-family: var(--mono); }
.article-body blockquote { margin: 2.2em 0; padding: clamp(22px, 4vw, 38px); border: 0; border-left: 4px solid var(--line); background: color-mix(in srgb, var(--fill) 38%, var(--panel)); }
.article-body blockquote p { margin: 0; color: var(--deep); font-size: clamp(19px, 2.6vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.42; }
.article-body pre { max-width: 100%; overflow-x: auto; margin: 1.7em 0; padding: 20px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); font: 13px/1.65 var(--mono); }
.article-body code { padding: .12em .32em; background: var(--panel); font: .86em/1.5 var(--mono); overflow-wrap: anywhere; }
.article-body pre code { padding: 0; background: transparent; }
.article-body hr { margin: 3em 0; border: 0; border-top: 1px solid var(--rule); }
.article-body table { display: block; width: 100%; overflow-x: auto; margin: 1.8em 0; border-collapse: collapse; font-size: 14px; }
.article-body th, .article-body td { min-width: 180px; padding: 13px 15px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.article-body th { background: var(--fill); color: var(--deep); font: 10px/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.article-body td { color: var(--ink-soft); }

.blog-sources { max-width: 920px; margin: clamp(70px, 10vw, 118px) 0 0 clamp(0px, 14vw, 230px); padding: clamp(28px, 5vw, 48px); border: 1px solid var(--rule); background: var(--panel); }
.blog-sources h2, .blog-related h2 { margin: 0 0 24px; font-size: clamp(25px, 3.5vw, 36px); letter-spacing: -.03em; }
.blog-sources ol { display: grid; gap: 18px; margin: 0; padding-left: 22px; }
.blog-sources li { padding-left: 7px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.blog-sources li::marker { color: var(--line); font: 10px var(--mono); }
.blog-sources li > a { display: inline; color: var(--ink); font-weight: 650; text-decoration-color: var(--line); text-underline-offset: 3px; }
.blog-sources li > span { display: block; margin-top: 4px; font: 9.5px/1.55 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.blog-sources li > p { margin: 5px 0 0; }

.blog-related { margin-top: clamp(74px, 10vw, 120px); padding-top: 34px; border-top: 1px solid var(--rule); }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.blog-related .blog-card h2 { font-size: clamp(21px, 2.2vw, 28px); }
.blog-related .blog-visual { min-height: 190px; }
.blog-related .blog-card-copy { padding: 24px; }
.blog-related .blog-card p { display: none; }

.blog-cta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(230px, .7fr) auto; align-items: end; gap: 28px; margin-top: 70px; padding: clamp(32px, 6vw, 62px); background: var(--fill); color: var(--deep); }
.blog-cta .eyebrow { grid-column: 1 / -1; margin-bottom: -8px; color: var(--deep); opacity: .66; }
.blog-cta h2 { max-width: 14ch; margin: 0; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.045em; line-height: 1; }
.blog-cta p { margin: 0; color: color-mix(in srgb, var(--deep) 72%, transparent); font-size: 14px; line-height: 1.6; }
.blog-cta .button { background: var(--deep); color: var(--fill); white-space: nowrap; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-rail { grid-column: 1; position: static; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
  .article-rail > span { margin-top: 0; }
  .article-rail ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .article-body { grid-column: 1; }
  .blog-sources { margin-left: 0; }
  .blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-related .blog-card:last-child { grid-column: 1 / -1; }
  .blog-cta { grid-template-columns: 1fr auto; }
  .blog-cta p { grid-column: 1; }
  .blog-cta .button { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}

@media (max-width: 680px) {
  .blog-lede { grid-template-columns: 1fr; gap: 24px; }
  .blog-lede .eyebrow { margin-bottom: 0; }
  .blog-lede .lede-copy, .blog-lede-meta { grid-column: 1; }
  .blog-grid, .blog-related-grid { grid-template-columns: 1fr; }
  .blog-card-featured { grid-column: auto; width: 100%; margin-bottom: 32px; }
  .blog-card-featured .blog-card-link { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .blog-card-featured .blog-visual { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .blog-related .blog-card:last-child { grid-column: auto; }
  .article-header h1 { overflow-wrap: anywhere; }
  .blog-visual-hero { min-height: 300px; }
  .article-rail { grid-template-columns: 1fr; }
  .blog-cta { grid-template-columns: 1fr; }
  .blog-cta p, .blog-cta .button { grid-column: 1; grid-row: auto; }
  .blog-cta .button { justify-self: start; }
}

@media (max-width: 420px) {
  .blog-lede h1 { font-size: 39px; }
  .article-header h1 { font-size: 38px; }
  .blog-card-copy { padding: 22px; }
  .blog-meta { gap: 6px 11px; }
  .blog-meta > span:not(:last-child)::after { right: -7px; }
  .blog-visual, .blog-card-featured .blog-visual { min-height: 240px; }
  .article-body { font-size: 16px; line-height: 1.72; }
}

@media print {
  .skip-link, .site-header, .practice-nav, .site-footer, .blog-related, .blog-cta, .profile { display: none !important; }
  body { background: #fff; color: #000; }
  .wrap { width: 100%; padding: 0; }
  .article-header { padding-top: 0; }
  .blog-visual-hero { min-height: 220px; break-inside: avoid; }
  .article-layout { display: block; }
  .article-rail { position: static; margin-bottom: 30px; }
  .article-body a { color: #000; text-decoration: underline; }
  .blog-sources { margin-left: 0; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card-link, .blog-card-link *, .blog-visual * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}