/* JDA / FIELD EDITION 04
   Original custom vector icon system, high-contrast editorial blocks, immersive depth.
   Overrides are deliberately separate so the proven site structure remains intact. */
:root {
  --jda-navy: #081320;
  --jda-ink: #152633;
  --jda-cyan: #2be5ef;
  --jda-blue: #3c9cff;
  --jda-violet: #b67dff;
  --jda-gold: #f2c56b;
  --jda-paper: #f6f0e5;
}
.custom-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.mark-image { width: 82px; height: 47px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(55,204,237,.15)); }
.footer-mark-image { width: 130px; max-width:100%; height: 76px; object-fit: contain; }
.brand-rule { border-radius: 3px; }
.footer-monogram { display: inline-flex; align-items: center; min-width: 132px; }
.search-icon { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.close-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.editorial-diamond { display: inline-block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; vertical-align: -3px; }
.brand-separator { display: inline-flex; align-items: center; justify-content: center; color: #f8c971; }
.writing-brand .brand-separator, .lab-panel h2 .brand-separator { margin-left: 10px; }
.lab-panel h2 .editorial-diamond { width: 23px; height: 23px; }
.custom-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stage-directory .tile-icon { height: 46px; width: 46px; fill: none; stroke: currentColor; stroke-width: 2.1; }
.stage-directory .tile-arrow { display: inline-flex; align-items: center; justify-content: center; }
.project-mark { width: 88px; height: 88px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 9px 15px rgba(0,0,0,.08)); }
.detail-symbol .project-mark { width: 74px; height: 74px; stroke-width: 1.6; color: #f0cd84; }
/* Hero: reliably readable typography over composited architecture/portrait. */
.site-header { background: rgba(5,14,27,.94); border-bottom: 1px solid rgba(189,217,234,.29); }
.site-header .wordmark-name { color: #f2f6fd; font-weight: 600; }
.nav-links a { color: #ecf3fc; }
.nav-links a:focus-visible, .nav-links a:hover { color: #9ff3fd; }
.icon-button { min-width: 44px; min-height: 44px; justify-content: center; }
.immersive-stage { background: radial-gradient(circle at 72% 20%, rgba(48,72,92,.5), transparent 36%), radial-gradient(circle at 92% 51%, rgba(198,129,47,.19),transparent 24%), radial-gradient(circle at 17% 36%,rgba(0,145,204,.21),transparent 30%), linear-gradient(105deg,#060f1c 0%,#0c1c2c 51%,#101d2b 100%); }
.immersive-stage:before { opacity: .42; background: linear-gradient(90deg,rgba(3,12,22,.6),transparent 45%,rgba(1,8,18,.13)),repeating-linear-gradient(90deg, transparent 0 143px,rgba(194,232,251,.075) 144px 146px,transparent 147px 218px); }
.immersive-stage:after { opacity: .68; }
.stage-glow { animation: jdaAtmosphere 13s ease-in-out infinite alternate; }
.glow-gold { animation-delay: -7s; }
@keyframes jdaAtmosphere { 0% {transform: translate3d(0,0,0) scale(.92)} 100%{transform:translate3d(17px,-20px,0) scale(1.16)} }
.hero-frame::before { content:""; position:absolute; inset:0 44% 0 0; background: linear-gradient(90deg,rgba(3,13,24,.88),rgba(5,17,29,.63) 73%, transparent); z-index:2; pointer-events:none; }
.hero-content h1 { color: #f7fbff; letter-spacing: .045em; text-shadow:0 3px 22px #000,0 0 30px rgba(0,0,0,.4); }
.hero-eyebrow, .hero-lead { color: #f5f9ff; }
.hero-lead { max-width:560px; background:linear-gradient(90deg,rgba(4,16,28,.63),transparent); }
.portrait-area img { filter: contrast(1.06) saturate(.91); }
.lab-badge { border-color: rgba(201,223,238,.82); box-shadow:0 15px 40px #000b,inset 0 1px 0 #f8fdff65,0 0 33px #26cbe51c; }
.lab-badge > span { color:#f2f6fc; }
.hero-actions a:focus-visible, .entry-tile:focus-visible { outline-color:#f8d083; }
.entry-tile { background:linear-gradient(145deg,color-mix(in srgb,var(--tile) 24%,#0a1725) 0%,rgba(7,18,31,.96) 55%,rgba(8,21,34,.97) 100%); border-color: color-mix(in srgb,var(--tile) 78%,white 22%); box-shadow:inset 0 1px 1px #ffffff28,inset 0 -15px 32px color-mix(in srgb,var(--tile) 19%,transparent),0 15px 30px rgba(0,0,0,.46); }
.entry-tile h2 { color:#f6faff; font-size:clamp(13px,1.22vw,17px); letter-spacing:.095em; }
.entry-tile p { color:#e1ebf2; font-size:12.8px; line-height:1.62; }
.entry-tile .tile-arrow { color:#f7fcff; }
.entry-tile:hover { transform: translateY(-7px) perspective(600px) rotateX(1deg); }
.stage-bottom { color:#e5f1fc; }
/* Strong editorial color-block rhythm, full bleed while keeping interior grid aligned. */
.about,.index,.writing,.timeline,.ministry-section,.connect { max-width:none; padding-left:max(5vw,calc((100vw - 1400px)/2)); padding-right:max(5vw,calc((100vw - 1400px)/2)); }
.about { background: #f4f0e8; background-image:radial-gradient(circle at 95% 80%,rgba(54,146,183,.09),transparent 40%); }
.about .section-number { color:#5c655d; }
.about-grid h2 { color: #102333; }
.about-copy p { color:#3e4e52; }
.about-copy .lead { color:#1b3039; }
.about-signature { color:#475961; }
.index { background: #e2eaed; background-image:linear-gradient(135deg,#e1eaf0 0%,#edf1ec 65%,#e8e7dd 100%); }
.index .section-number,.index-count { color:#4f5c63; }
.index .section-heading p { color:#425662; font-size:13.5px; }
.filter,.sort-button { color:#425261; font-size:12px; }
.filter.active { color:#0a2638; border-bottom-color:#087b95; font-weight:600; }
.project-card { min-height:400px; border-radius:6px; border:1px solid #c1d0d9; box-shadow:0 6px 23px rgba(11,36,52,.07); transition: transform .24s, box-shadow .24s, border-color .24s; }
.project-card.blue { background: #d7e9f0; border-color:#accbdb; }
.project-card.gold { background: #f1e5c9; border-color:#ddcba0; }
.project-card.green { background: #dcebe3; border-color:#bdd8c7; }
.project-card.slate { background: #e2e7ed; border-color:#bfceda; }
.project-card.purple { background:#eae0ef; border-color:#d5bee0; }
.project-card .card-emblem { position:relative; min-height:105px; margin:4px 0; }
.project-card .card-emblem:before { content:""; width:124px; height:100px; position:absolute; top:50%;left:50%;transform:translate(-50%,-50%); border:1px solid currentColor; opacity:.19; clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%); }
.project-card.blue .card-emblem { color:#176587; }
.project-card.gold .card-emblem { color:#806024; }
.project-card.green .card-emblem { color:#327354; }
.project-card.slate .card-emblem { color:#375b75; }
.project-card.purple .card-emblem { color:#765090; }
.card-top, .card-footer { color:#3d505d; font-size:10.5px; }
.card-number { color:#53616b; font-size:10.5px; }
.card-main h3 { color:#172d3a; }
.card-main p { color:#354e58; font-size:14px; line-height:1.66; }
.card-footer { border-color:#0002; }
.index-bottom { color:#44545e; font-size:11px; }
.manifesto { background:radial-gradient(circle at 90% 10%,rgba(60,137,170,.19),transparent 40%),linear-gradient(132deg,#091622,#1a2b34 65%,#101922); border-block:1px solid #3c6074; }
.manifesto-kicker { color:#f0c579; }
.manifesto blockquote { color:#fbf8f2; }
.manifesto-credit { color:#b7c5ca; }
.writing { background:#f7f0e3; }
.writing .section-heading p { color:#4b5959; font-size:13px; }
.writing-feature { background:#e3c58f; border:1px solid #cdad73; color:#1f2b30; border-radius:3px; position:relative; overflow:hidden; }
.writing-feature:after { content:""; position:absolute; width:270px;height:270px;right:-108px;bottom:-140px; border:1px solid rgba(66,66,53,.27); transform:rotate(45deg); pointer-events:none; }
.writing-feature .small-label { color:#58421e; }
.writing-feature p { color:#384343; }
.writing-feature a { color:#132f3a; border-color:#132f3a; }
.mini-note { border:1px solid #ccd6da; background:#e9f0f0; border-radius:3px; }
.mini-note:first-child { background:#172b39; border-color:#2a536b; color:#f2f5f6; }
.mini-note:first-child>span:first-child,.mini-note:first-child .micro { color:#c4d3dd; }
.mini-note:first-child p { color:#dae6ed; }
.mini-note:nth-child(2) p { color:#3a555b; }
.mini-note:nth-child(2)>span:first-child,.mini-note:nth-child(2) .micro { color:#49646a; }
.timeline { background:#f3f2ed; }
.timeline-row p { color:#42555c; font-size:14px; }
.timeline-row>span:first-child,.timeline-index { color:#4c626c; }
.lab-panel { max-width:none; padding-left:max(5vw,calc((100vw - 1400px)/2)); padding-right:max(5vw,calc((100vw - 1400px)/2)); padding-top:86px; padding-bottom:86px; background:linear-gradient(180deg,#081722,#0b1d29); }
.lab-panel-inner { border:1px solid #477a89; border-radius:5px; background:radial-gradient(circle at 92% 27%,rgba(166,92,207,.18),transparent 36%),radial-gradient(circle at 7% 93%,rgba(19,165,209,.19),transparent 45%),linear-gradient(115deg,#0d2635,#152434 70%,#16202e); box-shadow:inset 0 1px #e7fdff35,0 12px 45px #0005; }
.lab-panel p { color:#dfecf1; font-size:16px; }
.lab-panel .small-label { color:#e9cb8d; }
.lab-panel .outline-button { color:#f4fbff;border-color:#a3dae5; }
.terminal { border-color:#5a7488; }
.terminal-top { color:#bad0d7; }
.terminal .term-comment { color:#a7bdc6; }
.ministry-section { background:#dae9e4; color:#203d40; }
.ministry-actions .outline-button { border-color:#516a6a; color:#17343f; }
.ministry-actions span { color:#355355; font-size:11px; }
.connect { background:#f5e8d3; }
.connect p { color:#42545a; font-size:16px; }
.connect-links span:first-child,.connect-links strong small { color:#536168; }
.connect-links>a,.connect-links>button { color:#18313b; }
.footer { background:#07131f; border-top:1px solid #2a7083; }
.footer-main p { color:#d5e1e6; }
.footer-bottom { color:#c1d2d8; }
/* Dialog details require the same contrast/visual consistency as the homepage. */
.search-dialog,.detail-dialog { border:1px solid #8eafbd; border-radius:8px; }
.search-title,.search-footer { color:#3a515f; }
.search-result small,.detail-topline,.detail-kind { color:#e4edf4; }
.search-result small { color:#425760; }
.detail-status,.detail-body>p:not(.detail-lead) { color:#3f5b61; }
.detail-close,.close-btn { min-width:40px;min-height:40px; display:grid;place-items:center; color:#163442; }
.detail-close { color:#fbf7ec; }
/* Fluid spacing and letterforms rather than tiny, low-contrast text on phones. */
@media (max-width: 1280px) {
  .stage-directory .entry-tile h2 { font-size:13px; letter-spacing:.06em; }
  .stage-directory .entry-tile p { font-size:12.5px; }
}
@media (max-width: 1050px) {
  .hero-frame::before { inset:0 30% 0 0; }
  .hero-content h1 { max-width:610px; font-size:clamp(34px,4.7vw,52px); }
  .hero-lead { max-width:460px; }
  .stage-directory .entry-tile h2 { font-size:15px; }
  .stage-directory .entry-tile p { font-size:13px; }
}
@media (max-width: 700px) {
  .header-inner { padding-inline:18px; }
  .mark-image { width:56px; height:38px; }
  .wordmark-name { font-size:10px; letter-spacing:.08em; }
  .wordmark .brand-rule { margin-inline:1px; }
  .mobile-contact { display:none; }
  .site-header .search-trigger { display:flex; }
  .hero-frame { height:595px; }
  .hero-frame::before { inset:0 0 38% 0; background:linear-gradient(180deg,rgba(4,13,24,.66),rgba(4,13,24,.52) 72%,transparent); }
  .hero-content { padding-top:31px; }
  .hero-content h1 { font-size:clamp(32px,8vw,47px); line-height:1.13; max-width:100%; letter-spacing:.018em; }
  .hero-lead { font-size:16px; line-height:1.55; max-width:100%; }
  .hero-actions { margin-top:25px; }
  .portrait-area { top:292px; height:302px; right:3%;width:90%; }
  .portrait-area img { height:128%; bottom:-20%; }
  .lab-badge { margin-top:-14px; padding:12px 17px; gap:11px; }
  .lab-badge>span { font-size:9px; }
  .entry-tile { min-height:211px; padding:17px 15px; }
  .entry-tile .tile-icon { width:35px; height:35px; margin-bottom:13px; }
  .stage-directory .entry-tile h2 { font-size:13px; letter-spacing:.07em; }
  .stage-directory .entry-tile p { font-size:12.5px; }
  .stage-bottom { font-size:9px; }
  .section-number,.card-number { font-size:11px; }
  .about,.index,.writing,.timeline,.ministry-section,.connect,.lab-panel { padding-left:6vw; padding-right:6vw; }
  .about .about-copy p { font-size:16px; }
  .filter,.sort-button { font-size:12px; }
  .project-grid { gap:14px; }
  .project-card { min-height:355px; }
  .card-main p { font-size:14px; }
  .card-top,.card-footer { font-size:10.5px; }
  .writing-feature p { font-size:15px; }
  .mini-note p { font-size:14px; }
  .footer-bottom { font-size:10px; }
}
@media(max-width:390px) {
  .stage-directory .entry-tile h2 { font-size:12.5px; }
  .stage-directory .entry-tile p { font-size:12px; }
  .wordmark-name {font-size:9px;}
  .portrait-area {top:302px;}
  .lab-badge b {font-size:24px;}
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; scroll-behavior:auto !important; }
  .entry-tile:hover { transform:none; }
}
/* Final optical alignment and narrow-screen safeguards. */
@media (min-width:1051px) {
  .hero-content h1 {font-size:clamp(38px,3.75vw,63px);}
}
@media (max-width:1050px) and (min-width:701px) {
  .hero-content h1 {font-size:clamp(34px,4vw,45px);max-width:540px;}
}
@media (max-width:700px) {
  .portrait-area img {height:100%;bottom:0;object-fit:cover;object-position:50% 0%;}
}
@media (max-width:700px) {
  .writing .section-heading { flex-direction:column; align-items:flex-start; gap:18px; }
  .writing .writing-brand { max-width:100%; white-space:normal; }
}

/* Custom direction strokes complete the bespoke icon library. */
.inline-arrow {display:inline-block;vertical-align:-3px;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.arrow-right {transform:rotate(45deg);}
.arrow-up {transform:rotate(-45deg);}
.entry-tile .inline-arrow {width:21px;height:21px;}
.card-arrow .inline-arrow {width:21px;height:21px;}
.detail-status-dot {display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#488575;vertical-align:2px;}
@media(min-width:1051px){.nav-links a {font-size:11px;letter-spacing:.11em;}}
/* Metadata legibility and extra-small phones. */
.stage-bottom {font-size:11px;}
@media(max-width:700px){
  .edge-legend span {font-size:9.5px;letter-spacing:.08em;}
  .hero-eyebrow {font-size:10px;}
  .stage-bottom {font-size:10px;}
  .lab-badge>span {font-size:9.5px;}
}
@media(max-width:360px){
  .hero-frame {height:645px;}
  .portrait-area {top:360px;height:280px;}
}