/* Reusable SFPS Field Notes index and long-form article system. */
.field-notes-page,
.field-note-article-page { background: #020711; color: #f2f6fa; }

.field-notes-hero .subpage-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(26rem, 34rem); }
.field-notes-hero .dimensional-title { font-size: clamp(3.1rem, 3.8vw, 4.55rem); }
.field-notes-hero-visual { width: min(100%, 34rem); }
.field-notes-hero-visual::before { content: "Field notes / latest"; }
.field-notes-hero-visual .armored-frame-media img { aspect-ratio: 16 / 10; object-position: center 32%; }

.field-notes-index {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5rem, 7vw, 7.5rem) 0 clamp(6rem, 9vw, 9rem);
  background:
    radial-gradient(circle at 80% 14%, rgb(0 118 224 / .13), transparent 29rem),
    repeating-linear-gradient(0deg, rgb(94 141 181 / .04) 0 1px, transparent 1px 3rem),
    linear-gradient(180deg, #071321, #020711 72%);
}
.field-notes-index::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .2; background-image: linear-gradient(rgb(77 128 171 / .14) 1px, transparent 1px), linear-gradient(90deg, rgb(77 128 171 / .14) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: linear-gradient(180deg, #000, transparent 88%); }
.field-notes-index-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .55fr); align-items: end; gap: clamp(2rem, 6vw, 7rem); margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid #597188; }
.field-notes-index-heading .section-kicker { margin-bottom: .8rem; color: #63c5ff; }
.field-notes-index-heading .dimensional-title { font-size: clamp(3.4rem, 5vw, 5.8rem); }
.field-notes-index-heading > p { max-width: 31rem; margin: 0; color: #c9d5e0; font-size: 1.05rem; }

.featured-note { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(24rem, .88fr); overflow: hidden; margin-bottom: clamp(4rem, 6vw, 6rem); border: 1px solid #758a9d; outline: 1px solid #0b8fe6; outline-offset: -.35rem; clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, .8rem 100%, 0 calc(100% - .8rem), 0 1rem); background: linear-gradient(125deg, #0a1928, #030a13 72%, #073765); box-shadow: 0 1.4rem 2.6rem rgb(0 0 0 / .5), inset .2rem 0 0 #159fff; }
.featured-note-media { min-height: 30rem; overflow: hidden; border-right: 1px solid #71869a; background: #020711; }
.featured-note-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; transition: transform 240ms ease; }
.featured-note-media:hover img { transform: scale(1.015); }
.featured-note-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4vw, 4rem); }
.field-note-label { margin: 0 0 .75rem; color: #6ccaff; font: 900 .65rem/1.2 Arial, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.featured-note time,
.field-note-card time,
.related-notes time { color: #aebfce; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.featured-note h3 { margin: 1rem 0 1.2rem; font: italic 900 clamp(2rem, 3vw, 3.35rem)/1 var(--heading); letter-spacing: -.02em; text-transform: uppercase; }
.featured-note h3 a,
.field-note-card h3 a,
.related-notes h3 a { text-decoration: none; }
.featured-note h3 a:hover,
.field-note-card h3 a:hover,
.related-notes h3 a:hover { color: #83d5ff; }
.featured-note-copy > p:not(.field-note-label) { margin: 0; color: #d2dce5; line-height: 1.72; }
.field-note-link { display: inline-flex; min-height: 3rem; align-items: center; gap: .6rem; align-self: flex-start; margin-top: 1.5rem; color: #8bd8ff; font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.field-note-link span { font-size: 1.2rem; }
.field-note-link:hover { color: #fff; }

.latest-notes-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #526a80; }
.latest-notes-heading p { margin: 0; }
.latest-notes-heading h3 { margin: 0; color: #e9f1f8; font: italic 900 clamp(1.25rem, 1.7vw, 1.7rem)/1 var(--heading); letter-spacing: .02em; text-transform: uppercase; }
.field-note-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.3rem, 2.4vw, 2.25rem); margin: 0; padding: 0; }
.field-note-list > li { min-width: 0; list-style: none; }
.field-note-card { display: grid; height: 100%; grid-template-columns: minmax(12rem, .72fr) minmax(0, 1fr); overflow: hidden; border: 1px solid #60768a; clip-path: polygon(.75rem 0, calc(100% - .65rem) 0, 100% .65rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .75rem); background: linear-gradient(125deg, #091827, #030a13); box-shadow: 0 .8rem 1.4rem rgb(0 0 0 / .38), inset .14rem 0 0 #108cd9; }
.field-note-card-media { min-height: 18rem; overflow: hidden; border-right: 1px solid #526c82; background: #020711; }
.field-note-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 240ms ease; }
.field-note-card-media:hover img { transform: scale(1.018); }
.field-note-card > div { display: flex; flex-direction: column; align-items: flex-start; padding: 1.4rem; }
.field-note-card h3 { margin: .65rem 0 .8rem; color: #f1f5f8; font: 800 clamp(1.2rem, 1.55vw, 1.55rem)/1.18 var(--body); letter-spacing: -.025em; }
.field-note-card p:not(.field-note-label) { margin: 0; color: #c6d2dc; font-size: .92rem; line-height: 1.6; }
.field-note-card .field-note-link { margin-top: auto; padding-top: 1rem; }

/* Single article */
.article-hero { position: relative; isolation: isolate; min-height: clamp(29rem, 34vw, 34rem); overflow: hidden; padding: clamp(7.4rem, 8vw, 8.5rem) 0 3rem; border-bottom: 1px solid #294969; background-color: #020711; background-image: linear-gradient(90deg, rgb(2 7 17 / .97) 0 44%, rgb(2 8 19 / .8) 63%, rgb(1 7 17 / .92) 100%), radial-gradient(circle at 77% 44%, rgb(0 132 240 / .2), transparent 25rem), url("../sfps-hero-background-1672.webp"); background-position: center, center, center 38%; background-size: cover; }
.article-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: linear-gradient(rgb(72 129 180 / .17) 1px, transparent 1px), linear-gradient(90deg, rgb(72 129 180 / .17) 1px, transparent 1px); background-size: 3.5rem 3.5rem; mask-image: linear-gradient(90deg, #000, transparent 85%); }
.article-hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(23rem, .75fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.article-hero-copy { min-width: 0; padding-left: clamp(1.1rem, 2.2vw, 2rem); }
.article-hero h1 { max-width: 22ch; margin: 0; color: #f3f7fa; font: italic 900 clamp(2.65rem, 3.55vw, 4.25rem)/.98 var(--heading); letter-spacing: -.035em; text-transform: uppercase; text-shadow: .05em .07em 0 #1c3042, 0 .15em .2em #000, 0 0 .6rem rgb(21 159 255 / .18); overflow-wrap: anywhere; }
.article-meta { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.35rem; color: #b9c9d8; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.article-hero-visual { position: relative; overflow: hidden; margin: 0; padding: .42rem; border: 1px solid #7d92a5; outline: 1px solid #0d8ee6; outline-offset: -.25rem; clip-path: polygon(.8rem 0, calc(100% - .75rem) 0, 100% .75rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .8rem); background: #06101b; box-shadow: 0 1.2rem 2rem rgb(0 0 0 / .55), inset .15rem 0 0 #159fff; }
.article-hero-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 31%; }

.article-stage { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 50rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding-block: clamp(4rem, 7vw, 7rem); }
.article-context { position: sticky; top: 6.5rem; padding: 1.1rem; border: 1px solid #60768a; border-left: .2rem solid #159fff; clip-path: polygon(.65rem 0, 100% 0, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, 0 100%, 0 .65rem); background: linear-gradient(140deg, #0a1928, #030a13); box-shadow: 0 .8rem 1.4rem rgb(0 0 0 / .38); }
.article-context-kicker { margin: 0 0 1rem; color: #72ccff; font: 900 .62rem/1.2 Arial, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.article-context h2 { margin: 0 0 .8rem; color: #f1f5f8; font: italic 900 1.25rem/1 var(--heading); text-transform: uppercase; }
.article-context ol { margin: 0; padding-left: 1.2rem; }
.article-context li { margin: .55rem 0; color: #9fb2c3; font-size: .78rem; }
.article-context li::marker { color: #59c0fb; font-weight: 900; }
.article-context a { color: #dce6ee; text-decoration-color: #4baee7; text-underline-offset: .2em; }
.article-context a:hover { color: #83d5ff; }
.article-context-actions { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #526b80; }
.article-context-actions > a { display: flex; min-height: 3.2rem; flex-direction: column; justify-content: center; padding: .55rem .75rem; border: 1px solid #70879a; clip-path: polygon(.45rem 0, 100% 0, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .45rem); background: #071522; font-size: .65rem; font-weight: 900; letter-spacing: .09em; text-decoration: none; text-transform: uppercase; }
.article-context-call { border-color: #72caff !important; background: linear-gradient(110deg, #095ca8, #07345f) !important; }
.article-context-call span { color: #d9f1ff; font-size: .56rem; }
.article-context-call strong { margin-top: .15rem; color: #fff; font-size: .76rem; }

.field-note-article { grid-column: 2; min-width: 0; color: #d7e0e8; font-size: clamp(1.05rem, 1.15vw, 1.16rem); line-height: 1.82; }
.field-note-article .article-intro { margin-top: 0; color: #f0f4f7; font-size: clamp(1.15rem, 1.4vw, 1.32rem); line-height: 1.72; }
.field-note-article p { margin: 0 0 1.45em; }
.field-note-article h2 { scroll-margin-top: 6.5rem; margin: 2.1em 0 .7em; padding-top: .55em; border-top: 1px solid #49657e; color: #f2f6f9; font: italic 900 clamp(2rem, 2.7vw, 2.8rem)/1.05 var(--heading); letter-spacing: -.02em; text-transform: uppercase; }
.field-note-article h2::before { content: ""; display: block; width: 4rem; height: .16rem; margin-bottom: .65rem; background: #159fff; box-shadow: 0 0 .55rem rgb(21 159 255 / .55); }
.field-note-article h3 { margin: 1.7em 0 .6em; color: #eaf0f5; font: 800 clamp(1.25rem, 1.55vw, 1.55rem)/1.25 var(--body); letter-spacing: -.015em; }
.field-note-article a { color: #7ed1ff; font-weight: 700; text-decoration-thickness: .1em; text-underline-offset: .18em; }
.field-note-article a:hover { color: #fff; }
.field-note-article ol { margin: .75rem 0 1.6rem; padding-left: 1.7rem; }
.field-note-article li { margin: .6rem 0; padding-left: .35rem; }
.field-note-article li::marker { color: #67c9ff; font-weight: 900; }
.article-image { position: relative; margin: 1.7rem 0 2rem; padding: .35rem; overflow: hidden; border: 1px solid #758a9d; clip-path: polygon(.7rem 0, calc(100% - .6rem) 0, 100% .6rem, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0 .7rem); background: #030914; box-shadow: 0 .9rem 1.6rem rgb(0 0 0 / .42), inset .15rem 0 0 #159fff; }
.article-image img { width: 100%; max-height: 38rem; object-fit: cover; }
.article-image-wide img { aspect-ratio: 16 / 6; }
.article-faq h3 { margin-bottom: .35em; color: #87d7ff; }

.article-conversion { padding: clamp(3.5rem, 6vw, 5.5rem) 0; border-block: 1px solid #345572; background: radial-gradient(circle at 80% 50%, rgb(0 130 232 / .18), transparent 24rem), linear-gradient(110deg, #081827, #020711); }
.article-conversion-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem; }
.article-conversion .section-kicker { margin-bottom: .6rem; color: #6ccaff; }
.article-conversion h2 { max-width: 18ch; margin: 0; color: #f3f7fa; font: italic 900 clamp(2.6rem, 4.2vw, 4.8rem)/.92 var(--heading); text-transform: uppercase; }
.article-conversion p:not(.section-kicker) { margin: 1rem 0 0; color: #c4d2de; }
.article-conversion-actions { display: flex; align-items: stretch; gap: .7rem; }

.related-notes { padding: clamp(4.5rem, 7vw, 7rem) 0; background: #06111d; }
.related-notes > .shell > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid #526a80; }
.related-notes header p { margin: 0; color: #6ccaff; }
.related-notes header h2 { margin: 0; color: #f1f5f8; font: italic 900 clamp(2rem, 3vw, 3.3rem)/1 var(--heading); text-transform: uppercase; }
.related-notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.related-notes article { padding: .45rem .45rem 1.25rem; border: 1px solid #60768a; clip-path: polygon(.65rem 0, calc(100% - .55rem) 0, 100% .55rem, 100% calc(100% - .45rem), calc(100% - .45rem) 100%, 0 100%, 0 .65rem); background: linear-gradient(135deg, #091827, #030a13); }
.related-notes article > a { display: block; overflow: hidden; }
.related-notes img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.related-notes time { display: block; margin: 1rem .75rem .45rem; }
.related-notes h3 { margin: 0 .75rem; color: #eef3f7; font: 800 clamp(1.05rem, 1.35vw, 1.3rem)/1.25 var(--body); }

@media (max-width: 75rem) {
  .field-notes-hero .subpage-hero-layout { grid-template-columns: minmax(23rem, .95fr) minmax(26rem, 1.05fr); }
  .field-note-card { grid-template-columns: 1fr; }
  .field-note-card-media { min-height: 15rem; border-right: 0; border-bottom: 1px solid #526c82; }
  .article-stage { grid-template-columns: minmax(0, 50rem); justify-content: center; }
  .article-context { display: none; }
  .field-note-article { grid-column: 1; }
}

@media (max-width: 60rem) {
  .field-notes-hero .subpage-hero-layout { display: flex; }
  .field-notes-index-heading { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }
  .featured-note { grid-template-columns: 1fr; }
  .featured-note-media { min-height: 25rem; border-right: 0; border-bottom: 1px solid #71869a; }
  .article-hero { padding-top: 8rem; }
  .article-hero-layout { grid-template-columns: 1fr; }
  .article-hero-copy { padding-left: 0; }
  .article-hero h1 { max-width: none; }
  .article-hero-visual { width: min(100%, 44rem); justify-self: center; }
  .related-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.5rem) {
  .field-notes-hero .dimensional-title { font-size: clamp(2.25rem, 10.5vw, 3.35rem); }
  .field-notes-index { padding-block: 4.8rem 6rem; }
  .field-notes-index-heading .dimensional-title { font-size: clamp(3.25rem, 15vw, 4.7rem); }
  .featured-note-media { min-height: 19rem; }
  .featured-note-copy { padding: 1.5rem; }
  .featured-note h3 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .latest-notes-heading { display: block; }
  .latest-notes-heading h3 { margin-top: .5rem; }
  .field-note-list { grid-template-columns: 1fr; }
  .field-note-card-media { min-height: 14rem; }
  .article-hero { min-height: 0; padding: 7rem 0 2.5rem; }
  .article-hero h1 { font-size: clamp(2.05rem, 9vw, 3rem); }
  .article-meta { display: grid; gap: .25rem; }
  .article-meta > span[aria-hidden] { display: none; }
  .article-stage { width: min(calc(100% - 2.5rem), 50rem); padding-block: 3.5rem; }
  .field-note-article { font-size: 1.03rem; line-height: 1.75; }
  .field-note-article .article-intro { font-size: 1.12rem; }
  .field-note-article h2 { font-size: clamp(1.85rem, 9vw, 2.45rem); }
  .article-image { margin-inline: 0; }
  .article-image-wide img { aspect-ratio: 16 / 8; }
  .article-conversion-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .article-conversion-actions { display: grid; grid-template-columns: 1fr; }
  .article-conversion-actions .button,
  .article-conversion-actions .subpage-call { width: 100%; }
  .related-notes > .shell > header { display: block; }
  .related-notes header h2 { margin-top: .5rem; }
  .related-notes-grid { grid-template-columns: 1fr; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .featured-note-media img,
  .field-note-card-media img { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-note-media img,
  .field-note-card-media img { transition: none; }
}

@media (forced-colors: active) {
  .featured-note,
  .field-note-card,
  .article-hero-visual,
  .article-context,
  .article-image,
  .related-notes article { border: 2px solid CanvasText; }
}