/* ==========================================================
   XB PORTFOLIO — UX REFINEMENT LAYER
   Shared spacing, type, navigation, accessibility and embeds.
   ========================================================== */
:root{
  --ux-content:1280px;
  --ux-gutter:clamp(22px,5vw,76px);
  --ux-header:76px;
  --ux-copy:70ch;
  --ux-focus:#e9c79f;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--ux-header) + 22px);
  overflow-x:clip;
}
body{
  font-size:15px;
  line-height:1.72;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
}
.wrap{
  width:min(var(--ux-content),calc(100% - (var(--ux-gutter) * 2)));
  margin-inline:auto;
}
p{
  text-wrap:pretty;
}
main p,
.project-section p,
.flight-section p,
.origin-body p,
.principles-list p{
  max-width:var(--ux-copy);
}
h1,h2,h3{
  text-wrap:balance;
}
img,svg,video,canvas{
  max-width:100%;
}
section[id],main[id]{
  scroll-margin-top:calc(var(--ux-header) + 20px);
}
/* Navigation */
.site-header{
  height:var(--ux-header);
  z-index:60;
  background:rgba(7,12,19,.91);
  border-bottom-color:rgba(163,196,214,.17);
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.header-inner{
  gap:clamp(14px,2.4vw,34px);
}
.brand{
  min-height:44px;
}
.brand-symbol{
  animation:none;
}
.desktop-nav{
  gap:clamp(14px,2.2vw,30px);
}
.desktop-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 2px;
  font-size:12px;
  letter-spacing:.015em;
  position:relative;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  height:1px;
  background:linear-gradient(90deg,var(--ux-focus),rgba(185,220,230,.55));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after,
.desktop-nav a[aria-current="location"]::after{
  transform:scaleX(1);
}
.desktop-nav a.active,
.desktop-nav a[aria-current="location"]{
  color:#f0d4b4;
}
.nav-cta{
  min-height:44px;
  padding:11px 16px;
  font-size:10px;
}
.menu-toggle{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  place-items:center;
  border-radius:3px;
  transition:background .2s,border-color .2s;
}
.menu-toggle:hover{
  background:rgba(176,211,222,.08);
  border-color:rgba(176,211,222,.65);
}
.menu-toggle span{
  transition:transform .2s,opacity .2s;
}
.menu-toggle[aria-expanded="true"] span:first-child{
  transform:translateY(3.5px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}
.mobile-nav:not([hidden]){
  top:var(--ux-header);
  padding:14px max(22px,calc((100vw - var(--ux-content))/2));
  gap:4px;
  border-bottom:1px solid rgba(151,188,205,.22);
  box-shadow:0 22px 38px rgba(0,0,0,.28);
}
.mobile-nav a{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:8px 4px;
  border-bottom:1px solid rgba(143,173,190,.12);
  font-size:14px;
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a:active{color:#f0d4b4}
/* More comfortable type and editorial rhythm */
.hero h1,
.project-hero h1,
.flight-headline h1{
  line-height:1.035;
  letter-spacing:-.065em;
}
.hero-summary,
.project-lead,
.flight-lead{
  max-width:62ch;
  line-height:1.82;
}
.section,
.project-section,
.flight-section{
  scroll-margin-top:calc(var(--ux-header) + 18px);
}
.section{
  padding-block:clamp(76px,8vw,116px);
}
.project-section{
  padding-block:clamp(76px,8vw,112px);
}
.flight-section{
  padding-block:clamp(76px,8vw,112px);
}
.section-header,
.project-section-heading,
.flight-section-intro,
.flight-proof-head{
  gap:clamp(28px,5vw,72px);
}
.project-section-heading{
  margin-bottom:clamp(32px,4.5vw,54px);
}
.project-section-heading>p,
.flight-section-intro>p,
.flight-proof-head>p{
  font-size:14px;
  line-height:1.85;
}
.project-section-top,
.flight-section-tag,
.flight-eyebrow,
.project-overline,
.micro{
  letter-spacing:.14em;
}
.project-section-top,
.flight-section-tag{
  font-size:10px;
}
/* Clear, consistent controls */
.button,
.project-solid-link,
.flight-button,
.flight-button-outline,
.project-text-link,
.nav-cta,
.project-card-action,
.featured-work a,
.footer a{
  -webkit-tap-highlight-color:transparent;
}
.button,
.project-solid-link,
.flight-button,
.flight-button-outline{
  min-height:48px;
}
.button,
.project-solid-link,
.flight-button{
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.button:active,
.project-solid-link:active,
.flight-button:active{
  transform:translateY(1px);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
iframe:focus-visible{
  outline:2px solid var(--ux-focus)!important;
  outline-offset:4px!important;
}
a[aria-disabled="true"]{
  cursor:not-allowed;
}
/* Cards and evidence panels */
.featured-work,
.project-card,
.principle,
.module-feature,
.flight-photo-card,
.embedded-experience,
.project-video-stage{
  border-color:rgba(158,190,207,.23);
}
.project-card,
.flight-photo-card,
.notes-archive-card,
.module-feature{
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .project-card:hover,
  .flight-photo-card:hover,
  .notes-archive-card:hover,
  .module-feature:hover{
    transform:translateY(-3px);
    border-color:rgba(183,215,226,.4);
    box-shadow:0 18px 48px rgba(0,0,0,.18);
  }
}
.evidence-note,
.experience-strip,
.proof-ethic,
.flight-notice{
  border-radius:2px;
}
/* Embedded demos: use one page scroll, not tiny nested viewports. */
.embedded-experience{
  border-radius:4px;
  box-shadow:0 24px 70px rgba(0,0,0,.2);
}
.embedded-experience-top{
  min-height:54px;
  padding:13px clamp(15px,2vw,22px);
  letter-spacing:.12em;
}
.embedded-experience-top a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:7px 2px 7px 12px;
}
.embedded-experience iframe[data-autosize]{
  display:block;
  width:100%;
  min-height:520px;
  height:760px;
  border:0;
  overflow:auto;
}
.experience-footnote{
  padding:14px clamp(15px,2vw,22px);
  font-size:11px;
  line-height:1.75;
}
/* Video placeholders remain calm and legible before a URL is configured. */
.project-video-section{
  scroll-margin-top:calc(var(--ux-header) + 18px);
}
.project-video-link{
  min-height:46px;
}
.project-video-status{
  line-height:1.6;
}
/* Footer and utility */
.footer{
  padding-block:36px;
}
.footer-inner{
  row-gap:16px;
}
.ux-back-top{
  position:fixed;
  z-index:55;
  right:max(20px,calc((100vw - var(--ux-content))/2 - 2px));
  bottom:22px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(166,201,216,.38);
  background:rgba(12,22,33,.93);
  color:#e6d0b4;
  border-radius:50%;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  font-size:20px;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s,visibility .2s,transform .2s,background .2s;
  backdrop-filter:blur(12px);
}
.ux-back-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.ux-back-top:hover{
  background:#203447;
}
.ux-back-top:focus-visible{
  opacity:1;
  visibility:visible;
}
/* Prevent decorative art from forcing horizontal overflow. */
html,body{max-width:100%;overflow-x:clip}
@media(max-width:900px){
  :root{--ux-header:70px;--ux-gutter:28px}
  .site-header{height:var(--ux-header)}
  .mobile-nav:not([hidden]){top:var(--ux-header)}
  .desktop-nav,.nav-cta{display:none}
  .menu-toggle{display:grid}
  .wrap{width:calc(100% - 56px)}
  .section,.project-section,.flight-section{padding-block:72px}
  .hero,.project-hero,.flight-hero{min-height:0}
  .project-hero{min-height:650px}
  .hero-layout{min-height:640px}
  .project-section-heading,
  .flight-section-intro,
  .flight-proof-head{grid-template-columns:1fr;align-items:start}
  .embedded-experience iframe[data-autosize]{min-height:480px}
}
@media(max-width:600px){
  :root{--ux-header:66px;--ux-gutter:20px}
  html{scroll-padding-top:78px}
  .wrap,
  .flight-hero .wrap,
  .flight-body .wrap{width:calc(100% - 40px)}
  .site-header{height:66px}
  .mobile-nav:not([hidden]){top:66px;padding:10px 20px}
  .brand{font-size:22px}
  .brand-symbol{font-size:23px;margin-right:10px}
  .hero,.project-hero,.flight-hero{min-height:0}
  .hero-layout{min-height:0}
  .hero-copy{padding-block:78px 52px}
  .hero h1{font-size:clamp(48px,12vw,68px);line-height:1.04}
  .project-hero{min-height:620px}
  .studio-hero-layout,.notes-hero-layout{min-height:590px}
  .studio-hero-copy,.notes-copy{padding-block:52px 34px}
  .project-hero h1,.studio-hero h1,.notes-hero h1{font-size:clamp(47px,11.5vw,68px);line-height:1.05}
  .project-lead,.flight-lead,.hero-summary{font-size:14px;line-height:1.78}
  .section,.project-section,.flight-section{padding-block:60px}
  .section-header{margin-bottom:28px}
  .project-section-top,.flight-section-tag{margin-bottom:28px}
  .project-section h2,.project-section-heading h2,
  .flight-section-intro h2,.flight-proof-head h2,.flight-next h2{
    font-size:clamp(35px,9vw,49px);
    line-height:1.08;
  }
  .project-section-heading>p,
  .flight-section-intro>p,
  .flight-proof-head>p{font-size:13px;line-height:1.8}
  .hero-actions,.flight-hero-cta{gap:14px;flex-wrap:wrap}
  .button,.project-solid-link,.flight-button,.flight-button-outline{
    min-height:48px;
    padding:13px 16px;
  }
  .project-video-section{padding-block:62px}
  .project-video-layout{gap:22px}
  .project-video-copy h2{font-size:clamp(36px,9vw,48px)}
  .project-video-copy p{font-size:13px;line-height:1.8}
  .project-video-stage{min-height:0}
  .embedded-experience-top{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
    padding:12px 15px;
    font-size:8px;
  }
  .embedded-experience-top a{
    min-height:40px;
    padding-left:0;
  }
  .embedded-experience iframe[data-autosize]{min-height:430px}
  .experience-footnote{font-size:10px}
  .footer{padding-block:28px}
  .footer-inner{grid-template-columns:1fr 1fr}
  .ux-back-top{right:15px;bottom:15px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ux-back-top{transition:none}
}

/* Final interaction polish */
.reading-line{z-index:80}
.project-text-link,
.flight-minor-link,
.project-card-action,
.embedded-experience-top a,
.footer-inner a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.spotlight-card{
  transition:border-color .24s ease,box-shadow .24s ease,transform .24s ease;
}
@media(hover:hover) and (pointer:fine){
  .spotlight-card:hover{
    border-color:rgba(176,213,224,.42);
    box-shadow:0 20px 58px rgba(0,0,0,.2);
  }
}
@media(prefers-contrast:more){
  body{color:#fff}
  p,.project-lead,.flight-lead,.hero-summary,.project-section-heading>p,.flight-section-intro>p,.flight-proof-head>p{
    color:#d0dce2;
  }
  .desktop-nav a,.mobile-nav a,.footer-inner>span:not(.footer-brand),.footer-inner a{
    color:#d7e1e6;
  }
  .site-header,.embedded-experience,.project-video-stage{
    border-color:rgba(220,238,246,.55);
  }
}