* { box-sizing: border-box; }
body { margin:0; background:var(--paper) url('../assets/textures/paper-grain.png') repeat; color:var(--ink); font-family:var(--font-sans); }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
.entry-header { height:65px; margin:0 4vw; display:flex; align-items:center; gap:26px; border-bottom:1px solid var(--line); }
.brand { font-family:var(--font-brush); font-size:30px; }
.header-note,.contact,.eyebrow,.professional,.action-note,footer { font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; }
.header-note { color:var(--muted); font-size:9px; }
.contact { margin-left:auto; }
.intro { text-align:center; padding:32px 20px 30px; }
.intro .eyebrow { margin:0 0 8px; letter-spacing:.2em; }
h1 { font-family:var(--font-display); font-size:clamp(38px,5.3vw,76px); font-weight:400; letter-spacing:-.045em; margin:0; line-height:1.15; }
h1 span { font-family:var(--font-biswas-brush); color:var(--blue); font-size:1.14em; letter-spacing:0; }
.professional { font-size:9px; color:var(--muted); margin:14px 0 0; }
.intro-summary { max-width:760px; margin:0 auto 12px; padding:0 24px; color:var(--ink-light); font-size:16px; line-height:1.6; text-align:center; }
.routes { max-width:1160px; margin:0 auto 20px; display:grid; grid-template-columns:1fr 1fr; gap:72px; padding:0 32px; }
.route { min-width:0; position:relative; }
.story-route { padding:30px 0 16px; display:flex; flex-direction:column; }
.story-intro .eyebrow { color:var(--blue); font-size:9px; margin:0 0 14px; }
h2 { font-size:clamp(29px,2.7vw,38px); letter-spacing:-.045em; line-height:1.2; margin:0 0 15px; }
.story-intro h2 span { color:var(--blue); }
.description { font-size:14px; line-height:1.8; color:var(--ink-light); margin:0; max-width:370px; }
.story-memories { position:relative; height:232px; margin:21px 0 23px; }
.memory { position:absolute; margin:0; padding:7px 7px 11px; background:#fff; box-shadow:0 6px 18px #1112; transition:transform .3s; }
.memory img { width:100%; aspect-ratio:1.18; object-fit:cover; display:block; }
.memory figcaption { font-family:var(--font-mono); font-size:8px; padding:10px 2px 0; }
.memory-rov { width:43%; left:3%; top:9%; transform:rotate(-7deg); }
.memory-team { width:31%; left:44%; bottom:0; transform:rotate(7deg); }
.memory-team img { aspect-ratio:4/3; }
.hand-note { position:absolute; right:0; top:8%; font-family:var(--font-brush); font-size:17px; line-height:1.3; color:var(--blue); transform:rotate(5deg); }
.route-action { display:flex; align-items:center; gap:20px; margin-top:auto; }
.entry-button { display:inline-flex; align-items:center; gap:27px; background:var(--blue); color:#fff; padding:15px 21px; border-radius:30px; font-size:13px; font-weight:700; box-shadow:0 5px 15px #1254f521; transition:background .2s,transform .2s; }
.entry-button span { font-size:18px; }
.action-note { font-size:8px; color:var(--muted); max-width:90px; line-height:1.7; }
.portfolio-route { padding:0 0 16px 38px; border-left:1px solid var(--line); display:flex; flex-direction:column; }
.route-divider { position:absolute; left:0; top:43%; z-index:4; transform:translate(-50%,-50%); padding:8px 0; background:var(--paper); color:var(--blue); font:700 12px/1 var(--font-mono); letter-spacing:.12em; }
.portrait-stage { height:325px; position:relative; margin:18px 0 18px; }
.portrait,.portrait-highlight { position:absolute; width:100%; height:100%; object-fit:contain; object-position:center bottom; bottom:0; left:0; }
.portrait-highlight { overflow:visible; }
.portrait { z-index:1; }
.crown { width:47px; position:absolute; left:29%; top:-20px; transform:rotate(-28deg); }
.glance-copy { padding-top:8px; }
.glance-copy h2 { font-size:29px; margin-bottom:8px; }
.glance-copy .description { max-width:330px; font-size:13px; }
.overview-link { display:inline-flex; align-items:center; gap:21px; padding:11px 0 5px; margin-top:10px; border-bottom:1px solid currentColor; font-size:13px; font-weight:600; }
.route:is(:hover,:focus-visible) .entry-button { background:#0b3dbb; transform:translateY(-2px); }
.route:is(:hover,:focus-visible) .memory-rov { transform:rotate(-4deg) translateY(-3px); }
.route:is(:hover,:focus-visible) .memory-team { transform:rotate(4deg) translateY(-3px); }
.portfolio-route:is(:hover,:focus-visible) .overview-link { color:var(--blue); }
footer { display:flex; justify-content:space-between; gap:20px; margin:0 4vw; padding:19px 0; border-top:1px solid var(--line); font-size:8px; color:var(--muted); }
@media(min-width:1600px) { .routes { max-width:1280px; gap:90px; }.portrait-stage { height:365px; }.story-memories { height:270px; } }
@media(max-width:1000px) { .routes { gap:35px; }.portfolio-route { padding-left:24px; }.portrait-stage { height:295px; }.story-memories { height:205px; }.hand-note { font-size:14px; }.route-action { gap:12px; }.entry-button { font-size:12px; padding:14px 17px; gap:15px; }.action-note { font-size:7px; }.professional { font-size:8px; } }
@media(max-width:640px) { .entry-header { height:58px; margin:0 22px; }.header-note { display:none; }.intro { padding:26px 22px 18px; }h1 { font-size:34px; }h1 span { display:block; font-size:1.5em; line-height:1; }.professional { font-size:7px; line-height:1.7; max-width:260px; margin:13px auto 0; }.routes { grid-template-columns:1fr; padding:0 25px; gap:30px; max-width:460px; }.story-route { padding:22px 0 0; }.story-intro h2 { font-size:31px; }.description { font-size:13px; }.story-memories { height:200px; margin:12px 0 18px; }.hand-note { font-size:14px; }.memory figcaption { font-size:7px; }.portfolio-route { border-left:0; border-top:1px solid var(--line); padding:22px 0 10px; }.portrait-stage { height:275px; margin-top:20px; }.crown { left:29%; }.glance-copy h2 { font-size:27px; }footer { margin:0 25px; flex-direction:column; font-size:7px; gap:8px; }.action-note { max-width:none; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }
/* Keep the two choices within the visible viewport, including browser chrome on mobile. */
html,body{min-height:100%;}
body{height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
.entry-header,footer{flex:none;}
main{flex:1;min-height:0;display:flex;flex-direction:column;}
.routes{flex:1;min-height:0;width:100%;}
@media (min-width:641px) and (max-height:900px){
 .intro{padding-top:16px;padding-bottom:14px;}
 .story-route{padding-top:16px;padding-bottom:10px;}
 .story-memories{height:clamp(105px,22vh,195px);margin:10px 0 12px;}
 .portrait-stage{height:clamp(165px,35vh,285px);margin:5px 0 8px;}
 footer{padding-top:10px;padding-bottom:10px;}
}
@media (max-width:640px){
 .entry-header{height:47px;}
 .intro{padding:10px 18px 8px;}
 .intro .eyebrow{font-size:8px;margin-bottom:3px;}
 h1{font-size:29px;line-height:1;}
 h1 span{font-size:1.38em;}
 .professional{font-size:6px;line-height:1.35;margin-top:6px;}
 .routes{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:8px;max-width:450px;padding:0 22px;}
 .story-route{padding:8px 0 7px;min-height:0;}
 .story-intro .eyebrow{font-size:7px;margin-bottom:5px;}
 .story-intro h2{font-size:clamp(22px,6.4vw,27px);margin-bottom:6px;}
 .description{font-size:11px;line-height:1.4;}
 .story-memories{height:auto;flex:1;min-height:0;margin:5px 0;overflow:hidden;}
 .memory-rov{width:31%;left:5%;top:2%;}
 .memory-team{width:25%;left:40%;bottom:2%;}
 .memory{padding:4px 4px 6px;}
 .memory figcaption{font-size:6px;padding-top:4px;}
 .hand-note{right:6%;top:10%;font-size:11px;}
 .route-action{gap:10px;}
 .entry-button{padding:9px 13px;font-size:11px;gap:12px;}
 .entry-button span{font-size:15px;}
 .action-note{font-size:6px;}
 .portfolio-route{padding:7px 0 3px;min-height:0;}
 .portrait-stage{flex:1;min-height:0;height:auto;margin:1px 0 2px;}
 .crown{width:32px;top:0;}
 .glance-copy{padding-top:0;}
 .glance-copy h2{font-size:23px;margin:0 0 3px;}
 .glance-copy .description{font-size:10px;line-height:1.35;}
 .overview-link{font-size:11px;margin-top:3px;padding:5px 0 3px;}
 footer{padding:5px 0 7px;gap:3px;font-size:6px;}
}
@media (max-width:640px) and (max-height:720px){
 .intro{padding-top:6px;padding-bottom:3px;}
 h1{font-size:26px;}
 .professional{margin-top:4px;}
 .story-route{padding-top:5px;padding-bottom:4px;}
 .story-intro h2{font-size:22px;margin-bottom:3px;}
 .story-intro .description{font-size:10px;line-height:1.25;}
 .story-memories{margin:2px 0;}
 .memory-rov{width:26%;}.memory-team{width:21%;}
 .portfolio-route{padding-top:4px;}
 .glance-copy .description{font-size:9px;}
 footer{padding-top:3px;padding-bottom:3px;}
}
@media (max-width:640px) and (max-height:620px){
 .entry-header{height:42px;}
 .intro{padding:4px 18px 2px;}
 .intro .eyebrow{font-size:7px;}
 h1{font-size:24px;}
 .professional{font-size:5px;margin-top:3px;}
 .story-memories{display:none;}
 .story-route{justify-content:space-evenly;}
 .story-intro h2{font-size:21px;}
 .route-action{margin-top:6px;}
 .portrait-stage{max-height:145px;}
 .glance-copy h2{font-size:20px;}
 .action-note{display:none;}
 footer span:last-child{display:none;}
}
@media (min-width:641px) and (max-height:900px){.memory-rov{width:clamp(130px,33%,170px)}.memory-team{width:clamp(105px,25%,135px);left:42%}}
@media (min-width:641px) and (max-height:700px){.entry-header{height:50px}.intro{padding:8px 20px 6px}.intro .eyebrow{font-size:8px;margin-bottom:3px}h1{font-size:clamp(38px,6vh,50px)}h1 span{font-size:1.05em}.professional{font-size:7px;margin-top:4px}.story-route{padding-top:8px}.story-intro .eyebrow{margin-bottom:6px}.story-intro h2{font-size:29px;margin-bottom:5px}.story-intro .description{font-size:11px;line-height:1.45}.story-memories{height:130px;margin:5px 0 8px}.memory-rov{width:125px}.memory-team{width:90px;left:37%}.hand-note{font-size:13px}.portrait-stage{height:205px;margin:0 0 5px}.glance-copy h2{font-size:24px}.glance-copy .description{font-size:11px}.overview-link{font-size:11px;margin-top:4px;padding-top:5px}footer{padding:5px 0}}

/* Let the choices fill the page; keep supporting copy readable. */
.entry-header{min-height:65px}
.header-note,.contact{font-size:14px}
.intro{padding:22px 20px 18px}
.intro .eyebrow{font-size:16px}
.professional{font-size:14px;font-weight:700}
.professional{margin-top:9px}
.routes{max-width:1500px;gap:clamp(45px,5vw,90px);padding:0 clamp(30px,3vw,55px)}
.story-route{padding-top:20px}
.story-intro .eyebrow{font-size:14px;margin-bottom:11px}
.story-intro h2{font-size:clamp(34px,2.7vw,46px)}
.description,.glance-copy .description{font-size:clamp(16px,1vw,18px);line-height:1.55;max-width:540px}
.story-memories{flex:1;min-height:130px;max-height:330px;margin:15px 0 18px}
.memory figcaption{font-size:14px}
.memory-rov{width:clamp(190px,42%,260px);left:2%}
.memory-team{width:clamp(160px,36%,230px);left:48%}
.hand-note{font-size:20px}
.entry-button{font-size:16px;padding:16px 23px}
.action-note{font-size:14px;max-width:155px}
.portfolio-route{padding-left:clamp(30px,3vw,55px);justify-content:center}
.portrait-stage{flex:1;min-height:0;max-height:420px;height:auto;margin:0 0 12px}
.crown{width:55px;left:23%;top:-32px}
.glance-copy h2{font-size:clamp(30px,2.4vw,40px)}
.overview-link{font-size:16px}
footer{font-size:14px;padding:10px 0}
@media (min-width:641px) and (max-height:760px){
 .entry-header{min-height:54px;height:54px}
 .intro{padding:10px 20px 8px}
 h1{font-size:clamp(42px,6.2vh,60px)}
 .professional{margin-top:4px}
 .story-route{padding-top:8px}
 .story-memories{margin:8px 0 10px;max-height:165px}
 .memory-rov{width:clamp(130px,30%,155px);top:0}
 .memory-team{width:clamp(105px,24%,125px)}
 .portrait-stage{max-height:290px}
 footer{padding:5px 0}
}
@media (max-width:900px){
 .routes{gap:30px;padding:0 30px}
 .portfolio-route{padding-left:28px}
 .description,.glance-copy .description{font-size:16px}
 .story-memories{max-height:260px}
 .memory-rov{width:45%;min-width:145px}
 .memory-team{width:33%;min-width:110px;left:47%}
 .hand-note{font-size:15px}
}
@media (max-width:640px){
 .entry-header{height:52px;min-height:52px}
 .contact{font-size:11px}
 .intro{padding:10px 18px 7px}
 .intro .eyebrow{font-size:11px}
 h1{font-size:clamp(31px,8vw,43px)}
 .professional{font-size:10px;line-height:1.3;max-width:330px;margin-top:5px}
 .routes{gap:7px;padding:0 22px;margin-bottom:5px}
 .story-route{padding:7px 0 5px}
 .story-intro .eyebrow{font-size:11px;margin-bottom:4px}
 .story-intro h2{font-size:clamp(25px,7vw,32px);margin-bottom:4px}
 .description,.glance-copy .description{font-size:14px;line-height:1.4}
 .story-memories{min-height:0;max-height:none;margin:6px 0}
 .memory-rov{width:32%;min-width:0;left:3%;top:0}
 .memory-team{width:27%;min-width:0;left:43%;bottom:0}
 .memory figcaption{font-size:8px}
 .hand-note{font-size:14px;right:4%;top:10%}
 .entry-button{font-size:14px;padding:10px 15px}
 .action-note{font-size:9px;max-width:105px}
 .portfolio-route{padding:5px 0 3px}
 .portrait-stage{max-height:none;margin:0 0 3px}
 .crown{width:37px;top:0}
 .glance-copy h2{font-size:27px}
 .glance-copy .description{font-size:13px}
 .overview-link{font-size:14px}
 footer{font-size:9px;padding:5px 0}
}
@media (max-width:640px) and (max-height:710px){
 .entry-header{height:45px;min-height:45px}
 .intro{padding:5px 15px 3px}
 h1{font-size:clamp(29px,7vw,36px)}
 .professional{font-size:9px;margin-top:3px}
 .story-route{padding-top:4px}
 .story-intro h2{font-size:25px}
 .story-memories{margin:3px 0}
 .memory-rov{width:27%}
 .memory-team{width:22%}
 .glance-copy h2{font-size:25px}
 footer{font-size:8px;padding:3px 0}
}
@media (max-width:640px) and (max-height:590px){
 .story-memories,.action-note{display:none}
 .story-route{justify-content:space-evenly}
 .route-action{margin-top:8px}
 .portrait-stage{max-height:145px}
 footer span:last-child{display:none}
}
@media (max-width:640px) and (max-height:520px){
 .intro{padding:3px 14px}
 h1{font-size:26px;white-space:nowrap}
 h1 span{display:inline;font-size:1.13em}
 .professional{font-size:9px;max-width:none}
 footer{display:none}
 .routes{margin-bottom:0}
 .portrait-stage{max-height:100px}
}

/* On phones, keep both routes visible while giving each a deliberate composition. */
@media (max-width:640px){
 .intro{padding-bottom:12px}
 .professional{font-size:11px;line-height:1.4}
 .routes{grid-template-rows:minmax(0,1.07fr) minmax(0,.93fr);gap:0;padding:0 25px;margin:0 auto 12px}
 .story-route{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:8px 0 14px}
 .story-intro h2{font-size:clamp(27px,7vw,32px)}
 .story-intro .description{max-width:340px}
 .story-memories{height:auto;min-height:0;margin:9px 0 10px;overflow:visible}
 .memory-rov{width:42%;left:2%;top:3%}
 .memory-team{width:39%;left:50%;bottom:0}
 .memory figcaption{display:none}
 .hand-note{font-size:15px;right:1%;top:8%}
 .route-action{margin:0}
 .action-note{font-size:10px;max-width:115px}
 .portfolio-route{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:4px;padding:12px 0 0;border-top:1px solid var(--line)}
 .glance-copy{grid-column:1;grid-row:1;align-self:center;min-width:0}
 .glance-copy h2{font-size:clamp(26px,6.8vw,31px);line-height:1.12;margin:0 0 9px}
 .glance-copy .description{font-size:14px;line-height:1.45}
 .overview-link{font-size:14px;margin-top:12px;line-height:1.3}
 .portrait-stage{grid-column:2;grid-row:1;align-self:center;min-height:0;max-height:210px;height:clamp(150px,24vh,210px);margin:0}
 .crown{z-index:2;left:9%;top:5%;width:37px}
 footer{display:none}
}
@media (max-width:640px) and (max-height:710px){
 .intro{padding-bottom:5px}
 .routes{margin-bottom:5px}
 .story-route{padding:4px 0 8px}
 .story-intro h2{font-size:25px}
 .story-memories{margin:4px 0}
 .memory-rov{width:34%}
 .memory-team{width:31%}
 .portfolio-route{padding-top:7px}
 .glance-copy h2{font-size:24px;margin-bottom:4px}
 .glance-copy .description{font-size:13px;line-height:1.3}
 .overview-link{margin-top:5px}
}
@media (max-width:640px) and (max-height:590px){
 .story-route{grid-template-rows:auto auto;align-content:center;gap:11px}
 .story-memories{display:none}
 .action-note{display:none}
 .portrait-stage{height:clamp(115px,23vh,150px)}
}
@media (max-width:640px) and (max-height:520px){
 .intro{padding:3px 14px 5px}
 .professional{font-size:10px}
 .routes{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
 .glance-copy .description{display:none}
}

/* Match the two mobile choices: copy on the left, a visual on the right. */
@media (max-width:640px){
 .intro{text-align:left;padding:18px 25px 20px}
 .intro .eyebrow{font-size:12px;margin-bottom:7px}
 .intro h1{font-size:clamp(28px,7.8vw,38px);line-height:1.05;white-space:normal}
 .intro h1 span{display:inline;font-size:1.12em}
 .professional{font-size:12px;line-height:1.5;max-width:360px;margin:10px 0 0}
 .intro-summary{max-width:520px;margin:0 9px 8px;padding:0 16px 12px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;text-align:left}
 .routes{grid-template-rows:auto minmax(220px,1fr)}
 .story-route{grid-template-columns:minmax(158px,1.15fr) minmax(0,.85fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:16px 10px;padding:18px 0 24px}
 .story-intro{grid-column:1;grid-row:1}
 .story-intro .eyebrow{font-size:12px;line-height:1.5;margin-bottom:8px}
 .story-intro h2{font-size:clamp(25px,6.8vw,31px);line-height:1.12;margin-bottom:10px}
 .story-intro .description{font-size:14px;line-height:1.5}
 .story-memories{display:block;grid-column:2;grid-row:1 / 3;align-self:center;width:100%;height:210px;min-height:210px;margin:0;overflow:visible}
 .memory-rov{width:92%;left:0;top:5%;bottom:auto;transform:rotate(-7deg)}
 .memory-team{width:94%;left:5%;top:auto;bottom:6%;transform:rotate(7deg)}
 .memory img{aspect-ratio:1.05}
 .memory-team img{aspect-ratio:4 / 3}
 .hand-note,.action-note{display:none}
 .route-action{grid-column:1;grid-row:2;margin:0}
 .entry-button{font-size:14px;padding:12px 13px;gap:8px;white-space:nowrap}
 .entry-button span{font-size:17px}
 .portfolio-route{align-items:start;padding-top:12px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:12px}
 .route-divider{left:50%;top:0;transform:translate(-50%,-50%);padding:0 10px}
 .portfolio-route .portrait-stage{grid-column:1;align-self:center;transform:translateY(-28px)}
 .portfolio-route .glance-copy{grid-column:2;align-self:center;transform:translateY(-10px)}
 .glance-copy .description{display:block;font-size:14px;line-height:1.45}
}
@media (max-width:640px) and (max-height:680px){
 body{height:auto;min-height:100svh;overflow:auto}
 .routes{flex:none}
}

/* Keep the story collage clear of its note and action, and the portrait clear of the intro. */
@media (min-width:641px){
  .memory-rov{top:0}
  .memory-team{width:clamp(145px,32%,205px);bottom:4%}
  .hand-note{top:-3%;right:2%;font-size:15px}
  .crown{top:0}
}

/* Phones need natural document scrolling; keep the viewport-locked composition on tablets and desktop. */
@media (max-width:700px){
  body{height:auto;min-height:100svh;overflow-x:hidden;overflow-y:auto;display:block}
  main{display:block;flex:none;min-height:0}
  .routes{flex:none;min-height:auto;grid-template-rows:auto auto}
}

/* A single, scannable work sample between the introduction and the routes. */
.entry-proof{display:flex;align-items:center;justify-content:center;gap:16px;flex:none;align-self:center;margin:0 24px 10px;padding:7px 15px;background:#ffffffa6;border:1px solid var(--line);box-shadow:0 3px 12px #1111110a;transition:border-color .2s,transform .2s}
.entry-proof:hover{border-color:var(--blue);transform:translateY(-2px)}
.proof-project{font:700 10px/1.3 var(--font-mono);letter-spacing:.07em;color:var(--blue);white-space:nowrap}
.proof-project span{font-size:13px}
.proof-metric{display:flex;align-items:baseline;gap:5px;white-space:nowrap;padding-left:16px;border-left:1px solid var(--line)}
.proof-metric strong{font:700 17px/1 var(--font-sans);letter-spacing:-.04em;color:var(--ink)}
.proof-metric small{font:10px/1.2 var(--font-mono);color:var(--muted)}
footer{justify-content:flex-start}
@media(min-width:701px){.intro{padding-bottom:18px}.intro-summary{margin-bottom:8px}}
@media(max-width:700px){.entry-proof{align-self:stretch;justify-content:space-between;gap:6px;margin:0 25px 8px;padding:9px 11px}.proof-project{font-size:9px}.proof-metric{display:block;padding-left:8px}.proof-metric strong{display:block;font-size:16px}.proof-metric small{font-size:8px}.intro-summary{border-bottom:0;padding-bottom:0}}
@media(min-width:701px){.story-memories .memory{max-height:calc(100% - 18px);display:flex;flex-direction:column}.story-memories .memory img{min-height:0;flex:1;object-fit:cover}.story-memories .memory figcaption{flex:none}}