/* Official Fragment Mono SC; bundled under SIL OFL 1.1. */
@font-face {
  font-family: 'Fragment Mono SC';
  src: url('assets/fonts/FragmentMonoSC-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root{--font-site:'Fragment Mono SC','Courier New',Courier,monospace;--paper:#fffae1;--orange:#bc6c26;--description:#dda25e;--olive:#44513a;--card:#f9efd0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--orange)}body{font-family:var(--font-site)}button,input,select,textarea{font-family:inherit}.hero{position:relative;min-height:100vh;overflow:hidden;padding:clamp(32px,7vw,112px)}.intro{position:relative;z-index:5;width:min(470px,42vw)}h1{font-weight:400;letter-spacing:.08em;font-size:clamp(34px,3.1vw,52px);margin:0 0 26px}.role,.history,.status,.tagline{letter-spacing:.045em}.role{font-size:clamp(15px,1.25vw,21px);margin:0 0 16px}.history{font-size:clamp(14px,1.15vw,19px);line-height:1.35;margin:0}.status{position:absolute;z-index:5;right:clamp(32px,8vw,130px);top:clamp(40px,8vw,130px);font-size:clamp(14px,1.2vw,20px);text-align:center;line-height:1.7}.status p{margin:0}.map-wrap{position:absolute;width:min(76vw,1180px);right:4vw;bottom:7vh;aspect-ratio:1.6}.terrain{width:100%;height:100%;object-fit:contain;display:block}.marker{position:absolute;z-index:4;width:36px;height:36px;border:3px solid var(--orange);background:var(--paper);color:var(--orange);font:400 27px/26px var(--font-site);cursor:pointer;padding:0;transition:.16s transform,.16s background,.16s color}.marker:hover,.marker:focus{transform:scale(1.12);background:var(--orange);color:var(--paper);outline:none}.marker:before,.marker:after{content:'';position:absolute;background:var(--paper)}.project-card{position:absolute;z-index:10;width:230px;background:var(--orange);color:var(--paper);left:46px;bottom:0;box-shadow:0 8px 30px #6d471d22;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}.marker:hover+.project-card,.marker:focus+.project-card,.project-card:hover{opacity:1;transform:none;pointer-events:auto}.project-card h2{font-weight:400;font-size:22px;margin:0;padding:8px 12px;letter-spacing:.05em}.project-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;filter:saturate(.65)}.project-card p{margin:0;padding:9px 12px;font-size:12px}.project-card a{display:block;color:inherit;padding:0 12px 12px;text-decoration:none}.tagline{position:absolute;left:clamp(32px,7vw,112px);bottom:8vh;font-size:clamp(14px,1.15vw,19px);z-index:5}footer{position:absolute;right:clamp(32px,8vw,130px);bottom:7vh;display:flex;align-items:center;gap:18px;z-index:5}.links{display:flex;flex-direction:column;font-size:12px;gap:4px}.links a{color:var(--orange);text-decoration:none}.links a:hover{text-decoration:underline}.monogram{display:block;width:82px;height:auto;flex-shrink:0}@media(max-width:800px){.hero{padding:34px 24px 44px;min-height:100svh;overflow:auto}.intro{width:100%}.status{position:relative;top:auto;right:auto;text-align:left;margin-top:28px;font-size:13px}.map-wrap{position:relative;right:auto;bottom:auto;width:120%;margin:25px -10% 0;aspect-ratio:1.45}.tagline{position:relative;left:auto;bottom:auto;margin:18px 0 38px;font-size:13px}footer{position:relative;right:auto;bottom:auto;justify-content:flex-end}.marker{width:28px;height:28px;font-size:22px;line-height:20px;border-width:2px}.project-card{width:180px;left:34px}.project-card h2{font-size:17px}}

/* Desktop proportions measured from the supplied 1440 × 1024 Figma export. */
@media(min-width:801px){
  .hero{min-height:max(100vh,71.1111vw);padding:0}
  .intro{position:absolute;left:7.9167%;top:17.5781%;width:34%}
  h1{font-size:2.7778vw;letter-spacing:.08em;margin-bottom:1.9444vw}
  .role,.history{font-size:1.3889vw;letter-spacing:.025em}
  .role{margin-bottom:.9722vw}
  .history{line-height:1.2}
  .status{top:16.5039%;right:8.3333%;font-size:1.3889vw;text-align:right;line-height:1.65}
  .map-wrap{width:74.3056%;right:8.2639%;bottom:10.2539%;aspect-ratio:1620/971}
  .tagline{left:7.9167%;bottom:9.2773%;font-size:1.3194vw;margin:0;letter-spacing:.025em}
  footer{right:10%;bottom:10.0586%;gap:.8333vw}
  .links{font-size:.8333vw;gap:.2778vw}
  .monogram{width:6.25vw}
  .marker{width:2.3611vw;height:2.3611vw;font-size:1.875vw;line-height:1.8056vw}
}

/* Original transparent label artwork, aligned with the grid's right edge. */
.grid-labels{position:absolute;left:94.75%;top:35.8%;width:2.3%;height:auto;display:block;pointer-events:none}
@media(max-width:800px){.grid-labels{top:37.1%;width:2.3%}}

#weather{color:inherit;text-decoration:none}#weather:hover{text-decoration:underline}

/* Frame edges: 120px insets at 1440 × 1024; smaller insets on narrower screens. */
.role,.history{color:var(--description)}
.grid-labels{aspect-ratio:28/245;background:var(--orange);mask:url('assets/grid-labels.png') center/contain no-repeat;-webkit-mask:url('assets/grid-labels.png') center/contain no-repeat}
@media(min-width:801px){
  .hero{--frame-inset:clamp(40px,8.333333333vw,120px);min-height:max(100svh,71.111111111vw)}
  .intro{left:var(--frame-inset);top:var(--frame-inset)}
  h1{line-height:1.2;margin-bottom:0}
  .role{line-height:1.2;margin-bottom:24px}
  .status{top:var(--frame-inset);right:var(--frame-inset)}
  .tagline{left:var(--frame-inset);bottom:var(--frame-inset)}
  footer{right:var(--frame-inset);bottom:var(--frame-inset)}
  .monogram{width:83px}
}

/* Fit the complete desktop composition to the viewport, including short screens. */
@media(min-width:801px){
  .hero{
    --scene-unit:min(1vw,1.40625dvh);
    --frame-inset:calc(8.333333333 * var(--scene-unit));
    height:100dvh;min-height:0;padding:0;overflow:hidden;
  }
  .intro{width:calc(42 * var(--scene-unit))}
  h1{font-size:calc(2.7778 * var(--scene-unit));line-height:1.2}
  .role,.history{font-size:calc(1.3889 * var(--scene-unit))}
  .role{margin-bottom:calc(1.6667 * var(--scene-unit))}
  .status{font-size:calc(1.3889 * var(--scene-unit))}
  .map-wrap{
    width:min(90vw,128dvh);height:auto;aspect-ratio:1620/971;
    left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);
  }
  .tagline{font-size:calc(1.3194 * var(--scene-unit))}
  footer{gap:calc(.8333 * var(--scene-unit))}
  .links{font-size:calc(.8333 * var(--scene-unit));gap:calc(.2778 * var(--scene-unit))}
  .monogram{width:calc(5.7639 * var(--scene-unit))}
  .marker{width:calc(2.3611 * var(--scene-unit));height:calc(2.3611 * var(--scene-unit));font-size:calc(1.875 * var(--scene-unit));line-height:calc(1.8056 * var(--scene-unit))}
  .project-card{width:clamp(150px,calc(16 * var(--scene-unit)),230px)}
}

/* Each original symbol is anchored to its corresponding terrain grid line. */
.grid-labels{inset:0;width:100%;height:100%;aspect-ratio:auto;background:none;mask:none;-webkit-mask:none;pointer-events:none}
.grid-labels img{position:absolute;left:95.3%;width:1.728395%;height:auto;transform:translateY(-50%);display:block}
@media(max-width:800px){
  .map-wrap{aspect-ratio:1620/971}
  .grid-labels{top:0;width:100%}
}

/* Supplied bracket/X artwork, displayed at the requested size at every breakpoint. */
.marker{
  width:31px;height:31px;padding:0;border:0;border-radius:0;
  background:transparent url('assets/x.svg') center/31px 31px no-repeat;
  font-size:0;line-height:0;transition:filter .16s;
}
.marker::before,.marker::after{content:none}
.marker:hover,.marker:focus{
  transform:none;background:transparent url('assets/x.svg') center/31px 31px no-repeat;
  color:var(--orange);filter:drop-shadow(0 2px 3px #bc6c2633);
}
.marker:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

/* Decorative birds: pointer-transparent, with gentle, staggered flight paths. */
.birds{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply}
.bird{position:absolute;width:3.6%;height:auto;filter:grayscale(1) contrast(3);mix-blend-mode:multiply;pointer-events:none;animation:bird-flight 24s ease-in-out infinite;transform-origin:center}
.bird-one{left:57%;top:8%}
.bird-two{left:62%;top:5%;width:3%;animation-name:bird-flight-two;animation-duration:29s;animation-delay:-9s}
.bird-three{left:66%;top:10%;width:3.2%;animation-name:bird-flight-three;animation-duration:27s;animation-delay:-16s}
@keyframes bird-flight{
  0%,100%{left:57%;top:8%;transform:rotate(-5deg)}
  30%{left:65%;top:5%;transform:rotate(4deg)}
  65%{left:72%;top:12%;transform:rotate(8deg)}
  85%{left:63%;top:14%;transform:rotate(-7deg)}
}
@keyframes bird-flight-two{
  0%,100%{left:62%;top:5%;transform:rotate(3deg)}
  40%{left:73%;top:8%;transform:rotate(9deg)}
  75%{left:67%;top:15%;transform:rotate(-6deg)}
}
@keyframes bird-flight-three{
  0%,100%{left:66%;top:10%;transform:rotate(-4deg)}
  35%{left:74%;top:16%;transform:rotate(6deg)}
  70%{left:58%;top:15%;transform:rotate(-8deg)}
}
@media(prefers-reduced-motion:reduce){.bird{animation:none}}

/* Uploaded hover headers with native, replaceable video previews. */
.project-marker{z-index:4}
.project-marker.is-open{z-index:20}
.project-marker.is-open>.marker{opacity:0}
.project-card,.marker:hover+.project-card,.marker:focus+.project-card,.project-card:hover{
  left:-7px;top:-7px;bottom:auto;width:259px;background:transparent;box-shadow:none;
  opacity:1;transform:none;transition:none;pointer-events:auto;
}
.project-card[hidden]{display:none}
.project-card .preview-heading{display:block;width:259px;height:45px;aspect-ratio:auto;object-fit:contain;filter:none}
.project-card video{display:block;width:239px;height:137px;margin-left:19.5723px;background:var(--paper);object-fit:cover}

/* Preserve the supplied vector lettering while revealing it in typed steps. */
.project-card .preview-heading{position:relative;display:block;width:259px;height:45px}
.project-card .preview-heading img{position:absolute;inset:0;width:259px;height:45px;aspect-ratio:auto;filter:none;pointer-events:none}
.is-open .typed-heading{animation:type-project-title .65s steps(var(--typing-steps),end) both}
@keyframes type-project-title{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.cursor-label{position:fixed;z-index:1000;pointer-events:none;visibility:hidden;padding:6px 9px;background:var(--paper);color:var(--orange);border:1px solid var(--orange);font:12px/1.3 var(--font-site);letter-spacing:.04em;white-space:nowrap}
.cursor-label.visible{visibility:visible}
@media(prefers-reduced-motion:reduce){.is-open .typed-heading{animation:none}}
@media(hover:none),(pointer:coarse){.cursor-label{display:none}}

/* Orange bar leads the lettering by 160ms; the diamond stays anchored. */
.is-open .sliding-heading-bar{animation:slide-project-bar .32s cubic-bezier(.22,.61,.36,1) both}
.is-open .typed-heading{animation-delay:.16s}
@keyframes slide-project-bar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.is-open .sliding-heading-bar,.is-open .typed-heading{animation:none}}

/* Initial text reveal leaves live clock/weather nodes intact. */
.intro-type-pending{clip-path:inset(0 100% 0 0)}
.intro-type{animation:page-type-in var(--intro-duration,900ms) steps(var(--intro-steps,30),end) var(--intro-delay,0ms) both}
@keyframes page-type-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.intro-type-pending{clip-path:none}.intro-type{animation:none}}

/* Tablet: a fluid header, full-width island, and footer in normal document flow. */
@media(max-width:1100px){
  .hero{height:auto;min-height:100svh;padding:40px 32px 28px;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:24px;align-content:center}
  .intro{position:static;width:auto;min-width:0;grid-column:1}
  h1{font-size:clamp(28px,3.5vw,38px);line-height:1.2;margin:0 0 12px;letter-spacing:.06em}
  .role,.history{font-size:14px;line-height:1.5;letter-spacing:.02em}
  .role{margin-bottom:16px}
  .history br{display:none}
  .status{position:static;grid-column:2;width:auto;min-width:0;margin:0;font-size:13px;line-height:1.65;text-align:right;align-self:start}
  .status p{overflow-wrap:anywhere}
  .map-wrap{position:relative;grid-column:1/-1;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;height:auto;aspect-ratio:1620/971;margin:0}
  .tagline{position:static;grid-column:1;font-size:13px;line-height:1.5;letter-spacing:.025em;margin:0;align-self:center}
  footer{position:static;grid-column:2;justify-content:flex-end;gap:14px;align-self:center}
  .links{font-size:12px;gap:6px}
  .links a{padding:5px 0}
  .monogram{width:70px}
  .marker{width:31px;height:31px}
}
/* Phone: preserve readable typography instead of shrinking the desktop canvas. */
@media(max-width:600px){
  .hero{display:flex;flex-direction:column;justify-content:flex-start;gap:22px;padding:28px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
  .intro,.status,.map-wrap,footer{width:100%}
  h1{font-size:clamp(26px,7.3vw,36px)}
  .role,.history{font-size:13px;line-height:1.5}
  .status{text-align:left;font-size:12px}
  .map-wrap{margin:0;flex:none}
  .tagline{font-size:12px;align-self:flex-start;max-width:32ch}
  footer{margin-top:auto;justify-content:space-between}
  .monogram{width:64px}
  .links{flex-direction:row;gap:20px}
}
@media(pointer:coarse){
  .marker::before{content:'';position:absolute;inset:-7px;background:transparent}
}
.preview-close{position:absolute;right:0;top:-35px;width:32px;height:32px;border:1px solid var(--orange);background:var(--paper);color:var(--orange);font:20px/1 var(--font-site);cursor:pointer;z-index:1}
.preview-close:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.preview-close{display:none}}

/* Mobile previews are portaled to the body so map transforms cannot clip them. */
@media(max-width:600px){
  body>.project-card{position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0!important;z-index:100;max-height:calc(100dvh - 24px);overflow:auto}
  .hero{min-height:100svh;height:100svh;height:100dvh;padding:clamp(14px,3dvh,24px) 20px;gap:clamp(8px,1.8dvh,16px);justify-content:center}
  .intro,.status,.tagline,footer{flex-shrink:0}
  h1{font-size:clamp(24px,4.5dvh,32px);margin-bottom:6px}
  .role,.history{font-size:clamp(11px,1.85dvh,13px);line-height:1.35}
  .role{margin-bottom:10px}
  .status{font-size:12px;line-height:1.5}
  .map-wrap{width:min(100%,calc(43dvh * 1620 / 971));align-self:center;margin:0}
  .tagline{max-width:none;font-size:12px;line-height:1.3}
  footer{margin-top:0}
  .links{font-size:12px;gap:16px}
  .monogram{width:56px}
}
/* Very short phone windows keep content accessible rather than clipping text. */
@media(max-width:600px) and (max-height:480px){.hero{height:auto;min-height:100dvh}}

.mobile-studies,.mobile-marker{display:none}
@media(max-width:600px){
  .hero{height:auto;min-height:100svh;justify-content:flex-start;padding:clamp(40px,8svh,72px) 18px 40px;gap:20px}
  h1{font-size:clamp(28px,8vw,40px);letter-spacing:.065em;margin-bottom:10px}
  .role,.history{font-size:13px;line-height:1.4;letter-spacing:.01em}
  .role{margin-bottom:12px}
  .status{font-size:12px;line-height:1.55}
  .map-wrap{width:100%;margin:8px 0 0}
  .project-marker>.marker{display:none}
  .mobile-marker{display:flex;align-items:center;justify-content:center;width:31px;height:31px;background:url('assets/number-brackets.svg') center/100% 100% no-repeat;color:var(--orange);font:18px/1 var(--font-site);text-decoration:none;position:relative}
  .mobile-marker::after{content:'';position:absolute;inset:-7px}
  .mobile-marker:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
  .mobile-studies{display:block;width:100%;padding:0 6px}
  .mobile-studies h2{color:var(--description);font-size:13px;font-weight:400;letter-spacing:.08em;margin:0 0 6px}
  .mobile-studies a{display:flex;align-items:center;min-height:36px;font-size:clamp(16px,4.4vw,21px);letter-spacing:.035em;color:var(--orange);text-decoration:none}
  .mobile-studies a:hover{text-decoration:underline}
  .tagline{margin-top:28px;font-size:12px;max-width:none;padding:0 6px}
  footer{margin:0;padding:0 6px}
  .links{font-size:12px}
  .monogram{width:56px}
}

/* Keep desktop positioning; mobile footer forms one aligned rectangle. */
.footer-group,.footer-copy{display:contents}
.footer-group>.monogram{position:absolute;right:var(--frame-inset,8vw);bottom:var(--frame-inset,7vh);width:calc(5.7639 * var(--scene-unit,1vw));z-index:5}
.footer-copy>.links{position:absolute;right:calc(var(--frame-inset,8vw) + 7 * var(--scene-unit,1vw));bottom:var(--frame-inset,7vh);z-index:5}
@media(min-width:601px) and (max-width:1100px){
 .footer-group{display:flex;grid-column:1/-1;align-items:center;gap:20px}
 .footer-copy{display:flex;align-items:center;justify-content:space-between;flex:1;gap:20px}
 .footer-copy>.links,.footer-group>.monogram{position:static}
 .footer-group>.monogram{width:70px}
}
@media(max-width:600px){
 .footer-group{display:flex;align-items:stretch;justify-content:space-between;gap:12px;width:100%;margin-top:28px;padding:0 6px}
 .footer-copy{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:space-between;height:45px}
 .footer-copy>.tagline{margin:0;padding:0;font-size:clamp(7px,2.05vw,11px);line-height:1.2;letter-spacing:0;max-width:none}
 .footer-copy>.links{position:static;display:flex;flex-direction:row;gap:16px;font-size:12px;line-height:1.2}
 .footer-copy>.links a{padding:0}
 .footer-group>.monogram{position:static;width:83px;height:45px;object-fit:contain;flex-shrink:0}
}

/* Scrambled copies are visual only; real content remains available to assistive tech. */
.glitch-active{color:transparent!important}
.glitch-active>:not(.glitch-overlay){opacity:0!important}
.glitch-overlay{position:absolute;inset:0;display:block;pointer-events:none;user-select:none;color:var(--orange);white-space:inherit}
.glitch-overlay *{color:inherit!important}
.preview-heading.scrambling .typed-heading{opacity:0}
.scramble-title{position:absolute;left:48px;top:14px;color:var(--paper);font:18px/1 var(--font-site);white-space:nowrap;visibility:visible}
.preview-heading .scramble-title.glitch-active{position:absolute;visibility:visible}
@media(prefers-reduced-motion:reduce){.glitch-overlay{display:none}}

/* Keep DoD's scrambled title centered at the same position as its final SVG. */
.scramble-title.scramble-dod{width:211px;height:20px;font-size:20px}
.scramble-dod .scramble-number{position:absolute;left:0;top:0}
.scramble-dod .scramble-dod-name{position:absolute;left:111.5px;top:0;transform:translateX(-50%);width:36px;text-align:center}

/* One live font layer remains in place before, during, and after scrambling. */
.preview-heading .stable-title{position:absolute;left:48px;top:14px;width:211px;height:20px;font:18px/20px var(--font-site);color:#fffae1;visibility:visible}
.stable-title .title-number{position:absolute;left:0;top:0}
.stable-title .title-name{position:absolute;left:62px;top:0;white-space:nowrap}
.stable-title.stable-dod .title-name{left:111.5px;width:40px;text-align:center;transform:translateX(-50%)}

/* Increase the grid label artwork by 2px while preserving its alignment. */
.grid-labels>img{width:calc(1.728395% + 2px);margin-left:-1px}

.project-card a.preview-heading{padding:0;text-decoration:none;color:inherit}

/* Keep labels readable across every responsive breakpoint. */
.links,.footer-copy>.links,.cursor-label,.status,.tagline,.footer-copy>.tagline,.mobile-studies h2,.weather-credit{font-size:max(12px,1em)}
@media(max-width:1100px){.links,.footer-copy>.links,.cursor-label,.status,.tagline,.footer-copy>.tagline,.mobile-studies h2{font-size:12px}}
@media(max-width:600px){
 .footer-group{align-items:center;gap:14px}
 .footer-copy{height:auto;min-height:64px;gap:10px;justify-content:space-between}
 .footer-copy>.tagline{font-size:12px;line-height:1.3;white-space:normal}
 .footer-copy>.links{font-size:12px}
 .footer-group>.monogram{height:64px;width:auto;max-width:28%}
 .role,.history{font-size:13px}
}

/* Show the full supplied preview clips regardless of aspect ratio. */
.project-card video{object-fit:contain}

.project-marker[data-project="capital-one"] .project-card video{background:#fff}

/* Three contact rows occupy the same height as the AW mark. */
.hero{--footer-mark-height:max(42px,calc(3.125 * var(--scene-unit,1vw)))}
.footer-group>.monogram{height:var(--footer-mark-height);width:auto}
.footer-copy>.links{height:var(--footer-mark-height);display:flex;flex-direction:column;justify-content:space-between;gap:0;font-size:12px;line-height:14px}
.resume-link{color:var(--orange)}
@media(max-width:1100px){.hero{--footer-mark-height:42px}}
@media(max-width:600px){.hero{--footer-mark-height:64px}.footer-copy{height:64px;min-height:64px;gap:4px}.footer-copy>.links{height:42px;min-height:42px;flex-direction:column;gap:0}.footer-copy>.tagline{line-height:1.3}.footer-group>.monogram{height:64px}}