@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,75,500;0,75,600;0,75,700;0,100,400;0,100,500;0,125,600;0,125,700&family=Work+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&family=Piazzolla:ital,wght@0,500;1,500&display=swap');

:root{
  --paper:#EAE7DF;
  --ink:#242321;
  --signal:#80503F;
  --mist:#969386;
  --line:#D2CEC3;

  --display: 'Archivo', sans-serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --voice: 'Piazzolla', serif;

  --gutter: clamp(16px, 4vw, 64px);
  --col-max: 1180px;

  --space-2xs: clamp(8px, 1.2vw, 12px);
  --space-xs: clamp(12px, 1.8vw, 16px);
  --space-sm: clamp(16px, 2.5vw, 24px);
  --space-md: clamp(24px, 4vw, 40px);
  --space-lg: clamp(40px, 6vw, 64px);
  --space-xl: clamp(56px, 8vw, 88px);
  --space-2xl: clamp(72px, 10vw, 112px);

  --nav-y: clamp(14px, 2.2vw, 18px);
  --nav-height: calc(var(--nav-y) * 2 + 1.5px + 16px);
}

*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-height) + var(--space-xs));
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.wrap{ max-width:var(--col-max); margin:0 auto; padding:0 var(--gutter); }

/* ---------- Nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  border-bottom:0.5px solid var(--line);
}
.site-nav::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(242,240,232,0.92);
  backdrop-filter:blur(6px);
  z-index:-1;
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:var(--nav-y);
  padding-bottom:var(--nav-y);
}
.wordmark{
  font-family:var(--display); font-stretch:75%; font-weight:600;
  font-size:16px; letter-spacing:0.02em;
}
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-family:var(--mono); font-size:12px; color:var(--ink);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{
  color:var(--signal); border-bottom-color:var(--signal);
}
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:44px; height:44px;
  margin:0 -8px 0 auto;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle-bar{
  display:block;
  width:22px; height:1.5px;
  background:var(--ink);
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.site-nav.is-open .nav-toggle-bar:first-child{
  transform:translateY(3.75px) rotate(45deg);
}
.site-nav.is-open .nav-toggle-bar:last-child{
  transform:translateY(-3.75px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero{
  padding-block:var(--space-2xl) var(--space-lg);
}
.hero .eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--mist);
  margin:0 0 var(--space-sm);
}
.hero h1{
  font-family:var(--display); font-stretch:125%; font-weight:700;
  font-size:clamp(40px, 6.4vw, 76px); line-height:1.04; letter-spacing:-0.01em;
  margin:0;
  max-width:14ch;
}
.hero--sub{
  min-height:auto;
  padding-block:clamp(52px, 7vw, 84px) clamp(28px, 4vw, 44px);
}
.hero--sub h1{
  font-family:var(--display); font-stretch:100%; font-weight:600;
  font-size:clamp(28px, 4.4vw, 48px); line-height:1.08;
  max-width:16ch; margin:0;
}
.hero--sub h1.hero-headline--wide{ max-width:18ch; }
.hero--sub .section-label{ margin-bottom:var(--space-xs); }
.hero--contact{
  min-height:auto;
  padding-block:clamp(52px, 7vw, 84px) clamp(32px, 5vw, 56px);
}
.hero--contact h1{
  font-family:var(--display); font-stretch:100%; font-weight:600;
  font-size:clamp(30px, 4.4vw, 48px); line-height:1.08;
  max-width:14ch; margin:0 0 var(--space-sm);
}
.hero--contact .voice{ margin:0; }

/* ---------- Page layout ---------- */
.page-main{
  padding-bottom:clamp(48px, 8vw, 80px);
}

/* ---------- Section labels ---------- */
.section-label{
  font-family:var(--mono); font-size:12px; color:var(--mist);
  margin:0 0 var(--space-sm);
}
.section{
  padding:var(--space-xl) 0;
  border-top:0.5px solid var(--line);
}
.section--first{
  border-top:none;
  padding-top:clamp(24px, 4vw, 40px);
}
.section--flush{
  padding-top:0;
}
.section-intro{
  font-family:var(--body); font-size:16px; color:var(--mist);
  max-width:52ch; margin:calc(var(--space-2xs) * -1) 0 var(--space-md);
}

/* ---------- Journey (homepage WORK) ---------- */
.journey{ display:flex; position:relative; gap:clamp(16px, 3vw, 36px); }
.journey-thread-col{ flex-shrink:0; width:32px; position:relative; }
.journey-thread-col svg{ position:absolute; top:0; left:0; height:100%; width:32px; overflow:visible; }
.journey-thread-base,
.journey-thread-segment{ fill:none; stroke-width:1.3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.journey-thread-base{ stroke:var(--line); }
.journey-thread-segment{ stroke:transparent; stroke-dasharray:2 5; transition:stroke .22s ease, opacity .22s ease; opacity:0; }
.journey-item{ position:relative; }
.journey-marker{
  position:absolute;
  top:clamp(52px, 7vw, 84px);
  left:calc(-1 * (clamp(16px, 3vw, 36px) + 32px - 5px));
  width:10px; height:1px;
  background:var(--line);
  transition:background .22s ease, width .22s ease;
  z-index:2;
}
.journey-item:first-child .journey-marker{ top:calc(var(--space-2xs) + 7px); }
.journey-item:hover .journey-marker,
.journey-item:focus-visible .journey-marker,
.journey-item:focus-within .journey-marker{
  background:var(--signal);
  width:14px;
}
.journey-thread-segment.is-active{ stroke:var(--signal); opacity:1; }
.journey-items{ flex:1; min-width:0; }
.journey-item{
  padding:clamp(40px, 6vw, 72px) 0;
  border-bottom:0.5px solid var(--line);
}
.journey-item:first-child{ padding-top:var(--space-2xs); }
.journey-item:last-child{ border-bottom:none; padding-bottom:0; }
.journey-num{
  font-family:var(--mono); font-size:12px; color:var(--mist);
  margin:0 0 var(--space-xs);
}
.journey-title{
  font-family:var(--display); font-stretch:75%; font-weight:600;
  font-size:clamp(34px, 5.6vw, 64px); line-height:1.02; letter-spacing:-0.01em;
  margin:0 0 var(--space-xs); transition:color 0.2s ease;
}
.journey-item:hover .journey-title{ color:var(--signal); }
.journey-tagline{
  font-family:var(--body); font-size:17px; color:var(--ink);
  max-width:46ch; margin:0 0 var(--space-sm);
}
.journey-meta{
  font-family:var(--mono); font-size:12px; color:var(--mist);
  margin:0 0 var(--space-sm);
}
.journey-visual{ max-width:640px; }
.journey-visual .placeholder{ min-height:clamp(200px, 32vw, 280px); }


/* ---------- Index rows (compact — used for case-study lists) ---------- */
.index-list{ display:flex; gap:clamp(14px, 2.5vw, 28px); }
.thread{ flex-shrink:0; }
.rows{ flex:1; min-width:0; border-top:0.5px solid var(--ink); }
.row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-sm);
  padding:var(--space-sm) 0;
  border-bottom:0.5px solid var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.row:hover{ background:var(--ink); color:var(--paper); }
.row-name{
  font-family:var(--display); font-stretch:75%; font-weight:600;
  font-size:clamp(20px, 2.6vw, 30px);
}
.row-meta{ font-family:var(--mono); font-size:12px; text-align:right; white-space:nowrap; }

/* Quiet rows (no thread, no invert) */
.rows.quiet{ border-top:0.5px solid var(--line); }
.rows.quiet .row{ border-bottom:0.5px solid var(--line); }
.rows.quiet .row:hover{ background:transparent; color:var(--signal); }
.rows.quiet .row-name{ font-size:clamp(18px, 2vw, 22px); }
.rows.quiet .row-meta{ color:var(--mist); }

/* ---------- Links ---------- */
.link{
  font-family:var(--mono); font-size:13px; color:var(--signal);
  border-bottom:1px solid transparent;
}
.link:hover{ border-bottom-color:var(--signal); }

/* ---------- Placeholder blocks (assets to be added later) ---------- */
.placeholder{
  border:1px dashed var(--mist);
  background:transparent;
  color:var(--mist);
  font-family:var(--mono); font-size:12px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:var(--space-md) var(--space-sm);
  min-height:clamp(180px, 28vw, 220px);
  border-radius:2px;
}
.placeholder.tall{ min-height:clamp(280px, 42vw, 420px); }
.placeholder.wide{ min-height:clamp(320px, 48vw, 520px); }

/* ---------- Feature rows (experiments, split layouts) ---------- */
.feature-row{
  display:flex;
  gap:clamp(20px, 4vw, 32px);
  flex-wrap:wrap;
  align-items:flex-start;
}
.feature-row > .placeholder,
.feature-row > .feature-copy{
  flex:1;
  min-width:min(260px, 100%);
}
.feature-copy h2{
  font-family:var(--display); font-stretch:75%; font-weight:600;
  font-size:clamp(20px, 2.4vw, 24px);
  margin:0 0 var(--space-2xs);
}
.feature-copy p{ max-width:44ch; margin:0 0 var(--space-xs); }
.feature-copy .case-meta{ margin-bottom:var(--space-xs); }
.feature-copy .link{ display:inline-block; margin-top:var(--space-2xs); }

/* ---------- Case study content ---------- */
.case-hero{
  padding-block:clamp(40px, 7vw, 72px) clamp(24px, 4vw, 40px);
}
.case-title{
  font-family:var(--display); font-stretch:125%; font-weight:700;
  font-size:14px; letter-spacing:0.08em; color:var(--mist);
  margin:0 0 var(--space-xs);
}
.case-headline{
  font-family:var(--display); font-stretch:100%; font-weight:600;
  font-size:clamp(30px, 4.6vw, 52px); line-height:1.08;
  max-width:16ch; margin:0 0 var(--space-sm);
}
.case-dek{
  font-family:var(--body); font-size:17px; max-width:56ch;
  color:var(--ink); margin:0 0 var(--space-sm);
}
.case-meta{ font-family:var(--mono); font-size:12px; color:var(--mist); }
.case-meta--offset{ margin-top:var(--space-xs); }

.voice{
  font-family:var(--voice); font-style:italic; font-weight:500;
  font-size:clamp(24px, 3vw, 34px); line-height:1.3;
  max-width:22ch; margin:var(--space-2xs) 0;
}

.prose h2{
  font-family:var(--display); font-stretch:75%; font-weight:600;
  font-size:clamp(20px, 2.4vw, 26px); margin:0 0 var(--space-xs);
}
.prose p{ max-width:64ch; margin:0 0 var(--space-sm); }
.prose .role-list{ list-style:none; padding:0; margin:0; }
.prose .role-list li{ font-family:var(--mono); font-size:13px; margin-bottom:var(--space-2xs); }
.block{ margin:var(--space-lg) 0; }
.block:first-child{ margin-top:0; }
.block:last-child{ margin-bottom:0; }
.block--tight{ margin:var(--space-md) 0; }
.media-offset{ margin-top:var(--space-sm); }
.link-row{ margin-top:var(--space-sm); }

.footer-cta{
  border-top:0.5px solid var(--line);
  padding-block:var(--space-xl) var(--space-2xl);
}
.footer-cta .voice{ margin-bottom:var(--space-md); }

/* ---------- Site footer ---------- */
.site-footer{
  border-top:0.5px solid var(--line);
  padding:var(--space-md) 0 clamp(32px, 5vw, 48px);
  font-family:var(--mono); font-size:12px; color:var(--mist);
}
.site-footer .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-xs);
  width:100%;
}
.site-footer a{ color:var(--ink); }
.site-footer a:hover{ color:var(--signal); }



/* ---------- Cursor personality ---------- */
.cursor-personality{
  position:fixed;
  left:0; top:0;
  z-index:100;
  pointer-events:none;
  opacity:0;
  transform:translate3d(14px,14px,0);
  font-family:var(--mono);
  font-size:11px;
  line-height:1;
  letter-spacing:.01em;
  color:var(--ink);
  white-space:nowrap;
  will-change:transform, opacity;
  transition:opacity .18s ease;
  mix-blend-mode:multiply;
}
.cursor-personality.is-visible{ opacity:.78; }
.cursor-amna{ position:relative; }
.cursor-personality.is-leaving{ opacity:0; }
.cursor-personality-active,
.cursor-personality-active *{ cursor:none !important; }

@media (max-width:760px), (pointer:coarse){
  .cursor-personality{ display:none !important; }
}

/* ---------- Companion thread (persistent, site-wide) ---------- */
.companion-thread{
  position:fixed;
  top:0; right:26px;
  width:56px; height:100vh;
  pointer-events:none;
  z-index:9999;
  display:none;
}
.companion-thread svg{ width:100%; height:100%; display:block; }
@media (min-width:900px) and (pointer:fine){
  .companion-thread{ display:block !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  :root{
    --gutter:20px;
    --space-sm:20px;
    --space-md:28px;
    --space-lg:48px;
    --space-xl:64px;
    --space-2xl:80px;
  }

  body{
    font-size:16px;
  }

  .wrap{
    width:100%;
  }

  .nav-toggle{ display:flex; }

  .nav-links{
    position:fixed;
    inset:0;
    top:var(--nav-height);
    z-index:49;
    flex-direction:column;
    gap:0;
    padding:var(--space-md) var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    background:rgba(242,240,232,0.98);
    backdrop-filter:blur(8px);
    overflow-y:auto;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  }

  .site-nav.is-open .nav-links{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .nav-links li{ width:100%; }

  .nav-links a{
    display:block;
    font-size:15px;
    padding:var(--space-sm) 0;
    border-bottom:0.5px solid var(--line);
  }

  .nav-links a:hover,
  .nav-links a[aria-current="page"]{
    border-bottom-color:var(--line);
  }

  .hero:not(.hero--sub):not(.hero--contact){
    padding-block:64px 36px;
  }

  .hero h1{
    max-width:12ch;
    font-size:clamp(38px, 10.5vw, 48px);
    line-height:1.04;
    letter-spacing:-0.02em;
  }

  .hero--sub{
    padding-block:48px 28px;
  }

  .hero--contact{
    padding-block:64px 32px;
  }

  .hero--sub h1,
  .hero--contact h1{
    max-width:14ch;
    font-size:clamp(30px, 8.5vw, 42px);
    line-height:1.06;
  }

  .section{
    padding:48px 0;
  }

  .section--first{
    padding-top:28px;
  }

  .section-label{
    margin-bottom:16px;
  }

  .section-intro{
    margin-top:-4px;
    margin-bottom:28px;
  }

  .journey-item{
    padding:48px 0;
  }

  .journey-item:first-child{
    padding-top:4px;
  }

  .journey-title{
    font-size:clamp(34px, 9vw, 44px);
    line-height:1;
  }

  .journey-tagline{
    max-width:38ch;
    margin-bottom:16px;
  }

  .journey-meta{
    line-height:1.45;
    margin-bottom:20px;
  }

  .journey-visual{
    width:100%;
  }

  .row{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:18px 0;
  }

  .row-name{
    font-size:22px;
    line-height:1.15;
  }

  .row-meta{
    text-align:left;
    white-space:normal;
    line-height:1.45;
  }

  .feature-row{
    gap:28px;
  }

  .feature-row > .placeholder,
  .feature-row > .feature-copy{
    flex-basis:100%;
  }

  .case-hero{
    padding-block:48px 28px;
  }

  .case-headline{
    max-width:14ch;
    font-size:clamp(30px, 8.5vw, 42px);
    line-height:1.06;
  }

  .case-dek{
    font-size:16px;
    line-height:1.55;
  }

  .voice{
    font-size:26px;
    line-height:1.25;
  }

  .block{
    margin:36px 0;
  }

  .footer-cta{
    padding-top:48px;
    padding-bottom:72px;
  }

  .site-footer .wrap{
    flex-direction:column;
    align-items:flex-start;
  }
}

@media (max-width:560px){
  .journey-thread-col{ display:none; }
  .journey{ gap:0; }

  .placeholder{
    min-height:200px;
    padding:24px 16px;
  }

  .placeholder.tall{
    min-height:280px;
  }

  .placeholder.wide{
    min-height:240px;
  }

  .site-footer{
    padding-bottom:32px;
  }
}

@media (max-width:390px){
  :root{
    --gutter:16px;
  }

  .hero:not(.hero--sub):not(.hero--contact){
    padding-top:52px;
  }

  .hero h1{
    font-size:38px;
  }

  .nav-links{
    padding-left:var(--gutter);
    padding-right:var(--gutter);
  }

  .journey-item{
    padding:40px 0;
  }

  .journey-title{
    font-size:34px;
  }
}

/* ---------- Portfolio media/content blocks ---------- */
.project-preview, .project-hero-card, .experiment-card, .evidence-card, .design-note, .responsive-note, .archive-note, .process-strip{
  border:0.5px solid var(--line);
  background:rgba(255,255,255,0.16);
}
.project-preview{
  min-height:clamp(200px, 32vw, 280px); padding:var(--space-md);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-sm);
}
.project-preview .preview-kicker, .project-hero-card span, .experiment-card span, .evidence-card span{
  font-family:var(--mono); font-size:11px; color:var(--mist); letter-spacing:.04em;
}
.project-preview strong{font-family:var(--display); font-stretch:100%; font-size:clamp(24px,3.2vw,40px); line-height:1.05; font-weight:600; max-width:15ch;}
.project-preview > span:last-child{font-family:var(--mono); font-size:11px; color:var(--mist);}
.site-preview{
  width:100%;
  aspect-ratio:16 / 9;
  min-height:320px;
  border:0.5px solid var(--line);
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(20px,4vw,40px);
  text-decoration:none;
  color:var(--ink);
  transition:background .2s ease, transform .2s ease;
}
.site-preview:hover{ background:rgba(255,255,255,.22); transform:translateY(-1px); }
.site-preview__label{ font-family:var(--display); font-size:clamp(28px,5vw,64px); line-height:1; font-weight:600; }
.site-preview__hint{ font-family:var(--mono); font-size:11px; color:var(--mist); white-space:nowrap; }
.project-hero-card{min-height:clamp(280px,42vw,420px); padding:var(--space-lg); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-md);}
.project-hero-card strong{font-family:var(--display); font-stretch:125%; font-size:clamp(40px,6vw,76px); line-height:1; max-width:10ch;}
.project-hero-card small{font-family:var(--mono); font-size:11px; color:var(--mist);}
.process-strip{min-height:180px; padding:var(--space-md); display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:11px; color:var(--mist);}
.process-strip span{color:var(--ink);}
.process-strip b{font-weight:400; color:var(--mist);}
.design-note, .responsive-note, .archive-note{padding:var(--space-md); display:flex; flex-direction:column; gap:var(--space-xs);}
.design-note strong, .responsive-note strong, .archive-note .voice{font-family:var(--display); font-size:clamp(24px,3.2vw,36px); line-height:1.1; font-weight:600; margin:0;}
.design-note span, .responsive-note span{max-width:60ch; color:var(--mist);}
.evidence-card{min-height:150px; padding:var(--space-sm); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-sm);}
.evidence-card strong{font-family:var(--display); font-size:24px; line-height:1.08; font-weight:600; max-width:22ch;}
.experiment-card{min-height:280px; padding:var(--space-md); display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-sm);}
.experiment-card strong{font-family:var(--display); font-stretch:125%; font-size:clamp(32px,5vw,58px); line-height:.95; font-weight:600;}
.experiment-card small{font-family:var(--mono); font-size:11px; color:var(--mist); max-width:30ch;}
@media(max-width:760px){
  .site-preview{ min-height:220px; }
  .project-hero-card{min-height:300px;}
  .process-strip{justify-content:flex-start; align-content:center;}
}

/* ---------- Final polish ---------- */
.contact-list{ font-size:15px; }
.role-list--wide{ max-width:64ch; }
.subproject-title{
  font-family:var(--display);
  font-stretch:75%;
  font-weight:600;
  font-size:18px;
  line-height:1.2;
  margin:0 0 var(--space-xs);
}

/* Keep the visual language quiet: structure first, decoration second. */
.project-preview,
.project-hero-card,
.experiment-card,
.evidence-card,
.design-note,
.responsive-note,
.archive-note,
.process-strip{
  border-radius:0;
  box-shadow:none;
}
.project-preview{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(to right, transparent calc(50% - .25px), var(--line) calc(50% - .25px), var(--line) calc(50% + .25px), transparent calc(50% + .25px));
  background-size:100% 100%;
}
.project-preview::after{
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  right:var(--space-sm);
  top:var(--space-sm);
  border:1px solid var(--signal);
  border-radius:50%;
}
.project-preview strong{ max-width:12ch; }
.project-hero-card{
  position:relative;
  background:
    linear-gradient(90deg, transparent 0 16%, var(--line) 16% calc(16% + .5px), transparent calc(16% + .5px) 84%, var(--line) 84% calc(84% + .5px), transparent calc(84% + .5px));
}
.process-strip{ border-left:0; border-right:0; background:transparent; }

/* Better text measure on very wide screens. */
.prose{ max-width:760px; }
.prose .block{ max-width:100%; }

/* Site previews use a fixed responsive ratio instead of embedded iframes. */
.site-preview{ max-width:100%; overflow:hidden; }

@media (min-width:761px){
  .journey-item{ display:block; }
  .journey-visual{ margin-top:var(--space-md); }
  .case-hero{ max-width:900px; margin-left:max(var(--gutter), calc((100% - var(--col-max))/2 + var(--gutter))); }
}

@media (max-width:760px){
  .site-nav .wrap{ min-height:60px; }
  .wordmark{ font-size:15px; }
  .hero{ padding-bottom:40px; }
  .journey-item{ padding-block:44px; }
  .journey-visual{ margin-top:20px; }
  .project-preview{ min-height:210px; padding:24px; }
  .project-preview::after{ right:20px; top:20px; }
  .project-hero-card{ padding:28px 24px; }
  .site-preview{ min-height:220px; }
  .prose{ max-width:none; }
  .prose p{ max-width:60ch; }
}

@media (max-width:390px){
  .project-preview{ min-height:190px; }
  .project-preview strong{ font-size:30px; }
  .project-hero-card strong{ font-size:38px; }
}


/* ---------- Intentional live previews ---------- */
.live-preview{
  border-top:0.5px solid var(--ink);
  border-bottom:0.5px solid var(--ink);
  margin:var(--space-lg) 0;
}
.live-preview__head,
.live-preview__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:12px 0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.035em;
  color:var(--mist);
  text-transform:uppercase;
}
.live-preview__head span:last-child{ text-align:right; }
.live-preview__foot{ text-transform:none; letter-spacing:0; }
.live-preview__foot .link{ font-size:11px; }
.live-preview .site-preview{ border-left:0; border-right:0; }

/* ---------- Full-viewport Amna footer ---------- */
.site-footer--immersive{
  min-height:100svh;
  box-sizing:border-box;
  padding:clamp(28px,4vw,48px) 0 clamp(24px,4vw,40px);
  border-top:0.5px solid var(--ink);
  color:var(--ink);
}
.site-footer--immersive .site-footer__inner{
  min-height:calc(100svh - clamp(52px,8vw,88px));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.site-footer__top,
.site-footer__bottom{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:start;
  font-family:var(--mono);
  font-size:11px;
  color:var(--mist);
}
.site-footer__mark{ color:var(--ink); text-align:center; }
.site-footer__top > :last-child{ text-align:right; }
.site-footer__message{ padding:12vh 0 10vh; }
.site-footer__thanks{
  margin:0 0 20px;
  font-family:var(--voice);
  font-style:italic;
  font-weight:500;
  font-size:clamp(58px,11vw,150px);
  line-height:.88;
  letter-spacing:-.035em;
  max-width:9ch;
}
.site-footer__note{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  color:var(--mist);
  max-width:36ch;
}
.site-footer__bottom{ align-items:end; }
.site-footer__bottom nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 18px; }
.site-footer__bottom nav a{ color:var(--ink); }
.site-footer__bottom nav a:hover,
.site-footer__toplink:hover{ color:var(--signal); }
.site-footer__toplink{ text-align:right; color:var(--ink); }

@media(max-width:760px){
  .live-preview{ margin:36px 0; }
  .live-preview__head,.live-preview__foot{ align-items:flex-start; }
  .live-preview__head{ flex-direction:column; gap:5px; }
  .live-preview__head span:last-child{ text-align:left; }
  .live-preview__foot{ flex-direction:column; gap:7px; }

  .site-footer--immersive{ min-height:100svh; }
  .site-footer--immersive .site-footer__inner{ min-height:calc(100svh - 56px); }
  .site-footer__top,.site-footer__bottom{ grid-template-columns:1fr auto; }
  .site-footer__top .site-footer__mark{ text-align:right; }
  .site-footer__top > :last-child{ text-align:right; }
  .site-footer__message{ padding:18vh 0 12vh; }
  .site-footer__thanks{ font-size:clamp(56px,16vw,90px); max-width:8ch; }
  .site-footer__bottom nav{ grid-column:1/-1; grid-row:2; justify-content:flex-start; padding-top:14px; border-top:0.5px solid var(--line); }
  .site-footer__toplink{ text-align:right; }
}
@media(max-width:390px){
  .site-footer__message{ padding:14vh 0 10vh; }
  .site-footer__thanks{ font-size:54px; }
}

/* ---------- Amna art direction: hero ---------- */
.hero{
  position:relative;
  min-height:min(720px, calc(100svh - var(--nav-height)));
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-copy{ position:relative; z-index:2; width:min(760px, 100%); }
.hero-kicker{
  margin:0 0 var(--space-sm);
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--mist);
}
.hero-aside{
  margin:var(--space-md) 0 0 auto;
  max-width:30ch;
  font-family:var(--voice); font-style:italic;
  font-size:clamp(17px,2vw,22px); line-height:1.35;
  color:var(--mist);
}
.hero-art{
  position:absolute;
  width:min(54vw, 620px); aspect-ratio:1;
  right:-7vw; top:50%; transform:translateY(-50%);
  pointer-events:none; z-index:1;
}
.hero-art svg{ width:100%; height:100%; overflow:visible; }
.hero-orbit{ fill:none; stroke:var(--line); stroke-width:1; }
.hero-orbit--two,.hero-orbit--three{ stroke:var(--mist); stroke-opacity:.42; }
.hero-thread{ fill:none; stroke:var(--signal); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:5 7; }
.hero-dot{ fill:var(--signal); }
.hero-dot--small{ fill:var(--paper); stroke:var(--signal); stroke-width:1.5; }
.hero-art-label{
  position:absolute; font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  color:var(--mist); white-space:nowrap;
}
.hero-art-label--top{ top:11%; right:21%; transform:rotate(-18deg); }
.hero-art-label--bottom{ bottom:13%; left:20%; transform:rotate(12deg); }

/* ---------- Amna art direction: immersive footer ---------- */
.site-footer--immersive{ position:relative; overflow:hidden; isolation:isolate; }
.site-footer--immersive::before{
  content:'∞'; position:absolute; right:-.03em; top:8%;
  font-family:var(--display); font-size:min(48vw,680px); font-weight:700;
  line-height:.7; color:transparent; -webkit-text-stroke:1px var(--line);
  opacity:.75; pointer-events:none; z-index:-1;
}
.site-footer__art{
  position:absolute; width:min(58vw,760px); aspect-ratio:700/420;
  right:-4vw; top:7%; pointer-events:none; z-index:0;
}
.site-footer__art svg{ width:100%; height:100%; overflow:visible; }
.footer-orbit{ fill:none; stroke:var(--line); stroke-width:1; }
.footer-orbit--two{ stroke:var(--mist); stroke-opacity:.38; }
.footer-thread{ fill:none; stroke:var(--signal); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:4 8; }
.site-footer__art span{
  position:absolute; right:17%; bottom:9%;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  color:var(--mist); transform:rotate(-7deg);
}
.site-footer__top,.site-footer__message,.site-footer__bottom{ position:relative; z-index:2; }
.site-footer__message{ max-width:900px; }

@media(max-width:760px){
  .hero:not(.hero--sub):not(.hero--contact){ min-height:calc(100svh - var(--nav-height)); padding-block:var(--space-xl) var(--space-lg); align-items:flex-end; }
  .hero-art{ width:108vw; right:-38vw; top:33%; opacity:.9; }
  .hero-art-label--top{ top:10%; right:28%; }
  .hero-art-label--bottom{ bottom:17%; left:24%; }
  .hero-copy{ max-width:100%; }
  .hero-aside{ max-width:26ch; margin-left:0; }
  .site-footer--immersive::before{ font-size:90vw; right:-.12em; top:20%; }
  .site-footer__art{ width:125vw; right:-34vw; top:5%; opacity:.88; }
  .site-footer__art span{ right:27%; bottom:8%; }
  .site-footer__message{ position:relative; z-index:3; }
}

/* ---------- Subpage rhythm ---------- */
.hero--sub,
.hero--contact{
  min-height:0 !important;
  display:block;
  overflow:visible;
  isolation:auto;
  padding-top:clamp(48px,7vw,84px);
  padding-bottom:clamp(36px,5vw,60px);
}
.hero--sub h1,
.hero--contact h1{
  max-width:18ch;
}
.hero--contact .voice{
  max-width:34ch;
  margin:var(--space-md) 0 0;
}
.about-main .block{
  max-width:680px;
}
.about-intro{
  padding-bottom:var(--space-md);
}
.about-intro .voice{
  max-width:26ch;
}
.about-signoff{
  padding-top:var(--space-sm);
}
@media(max-width:760px){
  .hero--sub,
  .hero--contact{
    padding-top:36px;
    padding-bottom:32px;
  }
}

/* Image slots — replace the named files in assets/work/ with your actual visuals. */
.project-preview--image, .project-hero-card--image, .evidence-card--image {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 100%;
}
.project-preview--image img, .project-hero-card--image img, .evidence-card--image img {
  display: block; width: 100%; height: 100%; min-height: inherit; object-fit: cover;
}
.project-preview--image::after, .project-hero-card--image::after, .evidence-card--image::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,22,15,.32), transparent 45%); pointer-events: none;
}
.image-file-label {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font: 10px/1.2 'IBM Plex Mono', monospace; letter-spacing: .04em;
  background: rgba(242,240,232,.88); padding: 5px 7px;
}
.project-preview--image img:not([src]), .project-hero-card--image img:not([src]), .evidence-card--image img:not([src]) { display:none; }
@media (max-width: 700px) {
  .image-file-label { left: 9px; bottom: 8px; font-size: 9px; }
}

/* =========================================================
   FINAL SYSTEM PASS
   Keep the visual language restrained and make every interaction
   line up with the content it belongs to.
   ========================================================= */

/* The companion thread is ambient, not a second focal point. */
.companion-thread{
  right:clamp(8px,1.6vw,24px);
  width:28px;
  opacity:.72;
  display:none;
  position:fixed;
  top:0;
  height:100vh;
  z-index:9999;
  pointer-events:none;
}
@media (min-width:900px) and (pointer:fine){
  .companion-thread{display:block !important;}
}
.companion-thread path{
  stroke:var(--ink) !important;
  stroke-width:1 !important;
  opacity:.24 !important;
}
.companion-thread circle,
.companion-thread .companion-thread-dot{ display:block !important; fill:var(--ink) !important; opacity:.65; }

/* Project marker dashes are intentionally removed. The SVG journey thread
   remains the only left-side hover indicator. */
.journey-marker{ display:none !important; }

/* Missing media gets a deliberate editorial placeholder instead of a
   broken-image icon or a filename label. */
.project-preview--image.is-missing,
.project-hero-card--image.is-missing,
.evidence-card--image.is-missing{
  background:
    linear-gradient(90deg, transparent 49.95%, var(--line) 50%, transparent 50.05%),
    linear-gradient(0deg, transparent 49.95%, var(--line) 50%, transparent 50.05%);
}
.project-preview--image.is-missing::before,
.project-hero-card--image.is-missing::before,
.evidence-card--image.is-missing::before{
  content:'PROJECT VISUAL';
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--mist);
  white-space:nowrap;
}
.project-preview--image.is-missing::after,
.project-hero-card--image.is-missing::after,
.evidence-card--image.is-missing::after{ display:none; }
.image-file-label{ display:none !important; }


/* Touch devices do not have hover: don't pretend that they do. */
@media (hover:none){
  .journey-item:hover .journey-title{ color:inherit; }
  .journey-item:hover .journey-marker{ background:var(--line); width:12px; }
}

/* The thread has no useful role once the column disappears. */
@media (max-width:560px){
  .journey-thread-col,
  .journey-marker{ display:none; }
}

/* Avoid the ambient thread competing with reading on medium screens. */
@media (min-width:761px) and (max-width:1299px){
  .journey{ gap:28px; }
}

/* Small-screen rhythm: preserve generous breathing room without creating
   the oversized blank bands that were present on the first pass. */
@media (max-width:760px){
  .wrap{ padding-left:var(--gutter); padding-right:var(--gutter); }
  .hero:not(.hero--sub):not(.hero--contact){ min-height:calc(100svh - var(--nav-height)); }
  .section{ padding-block:64px; }
  .section--first{ padding-top:42px; }
  .journey-item{ padding-block:58px; }
  .journey-item:first-child{ padding-top:0; }
  .journey-visual{ margin-top:24px; }
  .project-preview--image{ min-height:200px; }
  .case-hero{ padding-top:40px; padding-bottom:24px; }
  .live-preview{ margin-block:32px; }
  .site-preview{ min-height:220px; }
}

@media (max-width:390px){
  :root{ --gutter:18px; }
  .hero:not(.hero--sub):not(.hero--contact){ padding-top:48px; }
  .journey-item{ padding-block:48px; }
  .site-preview{ min-height:200px; }
}

/* Accessibility / keyboard navigation */
.skip-link{
  position:fixed;
  left:16px;
  top:10px;
  z-index:100;
  padding:8px 10px;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:11px;
  transform:translateY(-180%);
  transition:transform .18s ease;
}
.skip-link:focus{ transform:translateY(0); }

/* Make the whole journey item visibly interactive without relying on hover. */
.journey-item:focus-visible{
  outline:2px solid var(--signal);
  outline-offset:5px;
}

/* Don't let decorative media create accidental layout overflow. */
img, svg{ max-width:100%; }

/* =========================================================
   PORTFOLIO POLISH — shared interaction language
   ========================================================= */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
::selection{background:var(--ink);color:var(--paper)}

/* Quiet, consistent focus treatment across the whole site. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:1.5px solid var(--signal);
  outline-offset:4px;
}

/* A little more life in the homepage project cards, without adding noise. */
.journey-item .journey-visual{transition:transform .45s cubic-bezier(.2,.75,.25,1)}
.journey-item .project-preview--image img{transition:transform .7s cubic-bezier(.2,.75,.25,1),filter .7s ease}
@media (hover:hover){
  .journey-item:hover .journey-visual{transform:translateY(-4px) rotate(-.35deg)}
  .journey-item:hover .project-preview--image img{transform:scale(1.025)}
  .journey-item:hover .journey-meta{color:var(--ink)}
}

/* ---------- Homepage Q&A ---------- */
.home-qa{
  background:var(--ink);
  color:var(--paper);
  padding-block:var(--space-2xl);
}
.home-qa .section-label{ color:#B7B3A6; }
.home-qa__intro{ display:grid; grid-template-columns:1fr 1.7fr; gap:var(--space-lg); align-items:end; margin-bottom:var(--space-xl); }
.home-qa__intro h2{
  margin:0;
  font-family:var(--display);
  font-stretch:125%;
  font-size:clamp(42px,7vw,88px);
  line-height:.92;
  letter-spacing:-.035em;
}
.home-qa__intro h2 em{ font-family:var(--voice); font-weight:500; letter-spacing:-.02em; }
.home-qa__intro > p:last-child{ grid-column:2; margin:0; font-family:var(--mono); font-size:12px; color:#B7B3A6; }
.home-qa__grid{ border-top:1px solid rgba(242,240,232,.28); }
.home-qa__card{
  width:100%; display:grid; grid-template-columns:56px 1fr 32px; gap:18px; align-items:center;
  padding:22px 0; border:0; border-bottom:1px solid rgba(242,240,232,.18);
  background:transparent; color:inherit; text-align:left; cursor:pointer;
  font:500 clamp(20px,2.4vw,30px)/1.15 var(--display);
  transition:padding .3s ease, color .25s ease;
}
.home-qa__card:hover,.home-qa__card.is-active{ color:#C9AAA4; padding-left:10px; }
.home-qa__num{ font:11px var(--mono); color:#8F8B80; }
.home-qa__plus{ font:400 24px/1 var(--body); text-align:right; transition:transform .3s ease; }
.home-qa__card.is-active .home-qa__plus{ transform:rotate(45deg); }
.home-qa__answer{
  margin-top:var(--space-md); padding:var(--space-md) 0 0 56px; max-width:760px;
}
.home-qa__answer-label{ font:10px var(--mono); letter-spacing:.12em; color:#8F8B80; }
.home-qa__answer p{ margin:10px 0 0; font-size:clamp(19px,2.2vw,27px); line-height:1.35; max-width:32ch; }

/* ---------- Homepage routes ---------- */
.home-next{ padding-block:var(--space-2xl); }
.home-next__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.home-next__card{ min-height:330px; padding:clamp(28px,5vw,56px); display:flex; flex-direction:column; justify-content:space-between; transition:transform .35s ease, background .35s ease; }
.home-next__card--about{ background:#C8CFD3; }
.home-next__card--contact{ background:#C9AAA4; }
.home-next__card:hover{ transform:translateY(-5px); }
.home-next__label{ font:10px var(--mono); letter-spacing:.1em; }
.home-next__card h2{ margin:24px 0 0; font:600 clamp(34px,5vw,64px)/.95 var(--display); font-stretch:125%; letter-spacing:-.03em; }
.home-next__card h2 span{ font-family:var(--body); font-size:.55em; vertical-align:middle; }
.home-next__card p{ margin:24px 0 0; max-width:38ch; font-size:15px; line-height:1.55; }

@media (max-width:760px){
  .home-qa__intro{ display:block; margin-bottom:48px; }
  .home-qa__intro h2{ margin-top:18px; }
  .home-qa__intro > p:last-child{ margin-top:22px; }
  .home-qa__card{ grid-template-columns:38px 1fr 26px; padding:19px 0; font-size:20px; }
  .home-qa__answer{ padding-left:38px; }
  .home-next__grid{ grid-template-columns:1fr; }
  .home-next__card{ min-height:280px; }
}


/* Shared page-to-page continuity */
body { opacity: 1; }
body.page-enter { animation: page-enter .48s cubic-bezier(.22,.8,.24,1) both; }
body.page-leave { overflow: hidden; }
.page-transition {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  pointer-events: none; opacity: 0;
  clip-path: inset(100% 0 0 0);
  transition: opacity .16s ease, clip-path .48s cubic-bezier(.76,0,.24,1);
}
.page-transition.is-leaving { opacity: 1; clip-path: inset(0 0 0 0); pointer-events: auto; }
.page-transition__inner { text-align:center; transform: translateY(18px); opacity:0; transition: transform .42s ease .04s, opacity .3s ease .04s; }
.page-transition.is-leaving .page-transition__inner { transform:translateY(0); opacity:1; }
.page-transition__eyebrow { display:block; margin-bottom:12px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.page-transition__wordmark { font:600 clamp(28px,5vw,56px)/.9 var(--display); letter-spacing:-.04em; }
.page-transition__dot { display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:var(--signal); vertical-align:middle; }
@keyframes page-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  body.page-enter { animation:none; }
  .page-transition { transition:none; }
  .page-transition__inner { transition:none; }
}


/* =========================================================
   MOBILE REFINEMENT — home
   Keep the art, remove the crowding.
   ========================================================= */
@media (max-width:760px){
  /* Hero: make the artwork an introduction, not a wall of empty space. */
  .hero:not(.hero--sub):not(.hero--contact){
    min-height:auto;
    padding-top:24px;
    padding-bottom:58px;
    align-items:stretch;
  }
  .hero-art{
    width:88vw;
    right:-34vw;
    top:14px;
    opacity:.62;
  }
  .hero-art-label--top{ top:8%; right:24%; }
  .hero-art-label--bottom{ bottom:14%; left:18%; }
  .hero-copy{
    width:100%;
    padding-top:300px;
  }
  .hero-kicker{
    margin-bottom:14px;
    font-size:10px;
    letter-spacing:.07em;
  }
  .hero-copy h1{
    font-size:clamp(42px,11.5vw,54px);
    line-height:.94;
    letter-spacing:-.035em;
    max-width:10ch;
  }
  .hero-aside{
    margin-top:22px;
    max-width:29ch;
    font-size:18px;
    line-height:1.42;
  }

  /* Selected work: tighter rhythm, same hierarchy. */
  .section--first{ padding-top:18px; }
  .journey-item{ padding-block:32px; }
  .journey-item:first-child{ padding-top:0; }
  .journey-title{
    font-size:clamp(34px,9.5vw,42px);
    margin-bottom:12px;
  }
  .journey-tagline{
    font-size:16px;
    line-height:1.5;
    margin-bottom:12px;
  }
  .journey-meta{ font-size:10.5px; margin-bottom:14px; }
  .journey-visual{ margin-top:0; }
  .project-preview--image{ min-height:0; aspect-ratio:16 / 9; }

  /* Q&A: fewer competing edges, more breathing room. */
  .home-qa{ padding-block:82px; }
  .home-qa__intro{ margin-bottom:52px; }
  .home-qa__intro h2{
    font-size:clamp(40px,10.5vw,52px);
    line-height:.94;
  }
  .home-qa__intro > p:last-child{ margin-top:18px; }
  .home-qa__card{
    grid-template-columns:30px 1fr 20px;
    gap:22px;
    padding:24px 0;
    font-size:18px;
    line-height:1.2;
  }
  .home-qa__card:hover,.home-qa__card.is-active{ padding-left:0; }
  .home-qa__num{ font-size:10px; }
  .home-qa__plus{ font-size:21px; }
  .home-qa__answer{
    margin-top:40px;
    padding:0;
    max-width:31ch;
  }
  .home-qa__answer p{ font-size:18px; line-height:1.45; }

  /* About/contact exits: two calm cards instead of two giant blocks. */
  .home-next{ padding-block:82px; }
  .home-next__grid{
    grid-template-columns:1fr;
    gap:22px;
    background:transparent;
    border:0;
  }
  .home-next__card{
    min-height:0;
    padding:36px 28px 42px;
    border:1px solid var(--line);
  }
  .home-next__label{ font-size:9.5px; }
  .home-next__card h2{
    margin-top:20px;
    font-size:clamp(38px,10vw,48px);
    line-height:.96;
  }
  .home-next__card p{
    margin-top:28px;
    max-width:31ch;
    font-size:15px;
    line-height:1.5;
  }
  .home-next__card:hover{ transform:none; }
}



/* =========================================================
   MOBILE FINAL — spacious cards + quiet navigation
   ========================================================= */
@media (max-width:760px){
  /* Selected work becomes a sequence of calm editorial cards. */
  .journey{display:block;}
  .journey-items{display:grid;gap:30px;}
  .journey-item,
  .journey-item:first-child,
  .journey-item:last-child{
    padding:30px 22px 24px;
    margin:0;
    border:1px solid var(--line);
    background:rgba(255,255,255,.22);
  }
  .journey-item + .journey-item{margin-top:0;}
  .journey-item .journey-num{margin-bottom:18px;}
  .journey-title{margin-bottom:16px;}
  .journey-tagline{margin-bottom:18px;max-width:34ch;}
  .journey-meta{margin-bottom:22px;}
  .journey-visual{margin-top:0;max-width:none;}
  .project-preview--image{border:0;background:transparent;padding:0;aspect-ratio:16/10;min-height:0;}
  .project-preview--image img{display:block;width:100%;height:100%;object-fit:cover;}

  /* No decorative/UI arrows on mobile. Textual arrows inside copy remain. */
  .contact-scribble,

  /* More breathing room around the two homepage exits. */
  .home-next{padding-block:104px 120px;}
  .home-next__grid{gap:28px;}
  .home-next__card{padding:42px 28px 48px;}
}

@media (max-width:560px){
  .journey-items{gap:34px;}
  .journey-item,
  .journey-item:first-child,
  .journey-item:last-child{padding:28px 20px 22px;}
  .journey-title{font-size:clamp(34px,10vw,42px);}
  .journey-tagline{font-size:16px;line-height:1.55;}
  .journey-meta{font-size:10px;}
  .project-preview--image{aspect-ratio:16/10;}
}

/* Mobile navigation: intentionally non-sticky. The menu lives in normal document flow. */
@media (max-width:760px){
  /* Mobile menu: solid paper panel, never transparent over page content. */
  .site-nav{
    position:relative;
    top:auto;
    z-index:100;
    isolation:isolate;
    background:var(--paper);
  }
  .site-nav::before{
    z-index:0;
    background:var(--paper);
    backdrop-filter:none;
  }
  .site-nav .wrap{position:relative;z-index:3;}
  .nav-toggle{position:relative;z-index:4;}
  .nav-links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:2;
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:12px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));
    background:var(--paper) !important;
    background-color:var(--paper) !important;
    border-bottom:0.5px solid var(--line);
    box-shadow:0 14px 28px rgba(23,22,15,.05);
    flex-direction:column;
    gap:0;
    overflow:visible;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
  }
  .site-nav.is-open{
    background:var(--paper);
  }
  .site-nav.is-open .nav-links{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-links a{font-size:19px;padding:20px 0;}
}

/* FINAL MOBILE MENU FIX — non-sticky header, fixed solid dropdown panel */
@media (max-width:760px){
  .site-nav{
    position:relative !important;
    top:auto !important;
    z-index:1000 !important;
    isolation:isolate;
    background:var(--paper) !important;
  }

  .site-nav::before{
    z-index:0 !important;
    background:var(--paper) !important;
    backdrop-filter:none !important;
  }

  .site-nav .wrap{
    position:relative;
    z-index:1002;
  }

  .nav-toggle{
    position:relative;
    z-index:1004;
  }

  /* The header itself stays in normal document flow. Only the open menu
     becomes a viewport-level panel, so it can never overlap transparently
     with page content. */
  .nav-links{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:var(--nav-height) !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:calc(100dvh - var(--nav-height)) !important;
    max-height:none !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:24px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px)) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    gap:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:var(--paper) !important;
    background-color:var(--paper) !important;
    background-image:none !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none !important;
    z-index:1003 !important;
    border:0 !important;
    border-top:1px solid var(--line) !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:opacity .18s ease, visibility .18s ease;
  }

  .site-nav.is-open .nav-links{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .nav-links li{
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    flex:0 0 auto !important;
    background:var(--paper) !important;
  }

  .nav-links a{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:22px 0 !important;
    font-size:19px !important;
    line-height:1.2 !important;
    color:var(--ink) !important;
    background:var(--paper) !important;
    border-bottom:1px solid var(--line) !important;
  }

  .nav-links a[aria-current="page"]{
    color:var(--signal) !important;
  }
}