/* Typography: Sora body copy; Faculty Glyphic headings and navigation. */
/* Buttons and links share the same text baseline and box in every state. */
header nav{align-items:center}
header nav a,header nav button{box-sizing:border-box;align-items:center;align-content:center;line-height:1.4;padding:12px 0;margin:0;border:0;vertical-align:middle}
/* A shared moving window reveals orange as it crosses each navigation word. */
header nav.travel-highlight .header-label{clip-path:none!important;transition:none;mask-image:linear-gradient(to right,#000 0 var(--cut-start),transparent var(--cut-start) var(--cut-end),#000 var(--cut-end) 100%);-webkit-mask-image:linear-gradient(to right,#000 0 var(--cut-start),transparent var(--cut-start) var(--cut-end),#000 var(--cut-end) 100%)}
header nav.travel-highlight .header-fill{clip-path:none!important;transition:none;mask-image:linear-gradient(to right,transparent 0 var(--cut-start),#000 var(--cut-start) var(--cut-end),transparent var(--cut-end) 100%);-webkit-mask-image:linear-gradient(to right,transparent 0 var(--cut-start),#000 var(--cut-start) var(--cut-end),transparent var(--cut-end) 100%)}
header .name,header .monogram{white-space:nowrap;max-width:none;flex-shrink:0}
@media(max-width:700px){header{gap:16px}header .name,header .monogram{font-size:12px}}
@media(max-width:380px){header{gap:12px}header nav{gap:12px}header .name,header .monogram,header nav a,header nav button{font-size:10px}}
h1,h2,h3,h4,h5,h6,.glass-overlay h3,dialog h2,.intro h1,.chapter h2,header a,nav,nav a,nav button,.monogram,.script,.signature,.subtitle,figcaption,.contact-label,.project-navigation span,.project-navigation strong{font-family:Faculty Glyphic,Arial,sans-serif}

/* Current page navigation uses the orange accent. */
header nav a[aria-current]:not([aria-current="false"]),header nav button[aria-current="true"]{color:var(--accent)!important}
/* Previous project fills from the right; Next project retains its left origin. */
.project-navigation a.previous-project::before{transform-origin:right}


/* Fit complete project and About imagery within the visible viewport. */
.hero img,.image-panel img,.paired img,.portrait img{width:auto;max-width:100%;height:auto;max-height:max(80px,calc(100svh - 180px))!important;object-fit:contain;margin-inline:auto}
@media(max-width:700px){.hero img,.image-panel img,.paired img,.portrait img{max-height:max(80px,calc(100svh - 160px))!important}}

/* One shared format for the site title on every page. */
header .name,header .monogram{font-family:Faculty Glyphic,Arial,sans-serif;font-size:12px;font-weight:500;letter-spacing:-.035em;line-height:1.4;text-transform:uppercase;white-space:nowrap;max-width:none;flex-shrink:0}
@media(max-width:380px){header .name,header .monogram{font-size:10px}}
/* Soft homepage title reveal; orange hover fill remains independent. */
header .monogram{opacity:1;transform:translateY(0);visibility:visible;transition:background-size .45s cubic-bezier(.22,1,.36,1),opacity .6s ease,transform .6s ease,visibility 0s}
body.home-landing header .monogram{opacity:0;transform:translateY(-4px);visibility:hidden;pointer-events:none;transition:background-size .45s cubic-bezier(.22,1,.36,1),opacity .6s ease,transform .6s ease,visibility 0s .6s}
@media(prefers-reduced-motion:reduce){header .monogram,body.home-landing header .monogram{transition:none;transform:none}}

/* Solid glyphs with complementary clipping: no gradient or doubled edges. */
header .name,header .monogram,header nav a,header nav button{display:grid;position:relative;background:none!important;color:#fff!important;-webkit-text-fill-color:currentColor;text-shadow:none;-webkit-text-stroke:0}
header nav a::after,header nav button::after{display:none}
header .header-label,header .header-fill{grid-area:1/1;font:inherit;letter-spacing:inherit;line-height:inherit;text-transform:inherit;background:none;-webkit-text-fill-color:currentColor;text-shadow:none;-webkit-text-stroke:0;pointer-events:none;transition:clip-path .45s cubic-bezier(.22,1,.36,1)}
header .header-label{color:#fff;clip-path:inset(0 0 0 0)}
header .header-fill{color:var(--accent);clip-path:inset(0 100% 0 0)}
header a:hover .header-label,header button:hover .header-label,header a:focus-visible .header-label,header button:focus-visible .header-label,header nav [aria-current]:not([aria-current="false"]) .header-label{clip-path:inset(0 0 0 100%)}
header a:hover .header-fill,header button:hover .header-fill,header a:focus-visible .header-fill,header button:focus-visible .header-fill,header nav [aria-current]:not([aria-current="false"]) .header-fill{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){header .header-label,header .header-fill{transition:none}}
/* Vector cursor: straight edges, solid orange, no outline or shadow. */
@media (hover:hover) and (pointer:fine){html.orange-cursor,html.orange-cursor body,html.orange-cursor body *{cursor:none!important}}
.orange-pointer{position:fixed;top:0;left:0;width:16px;height:16px;background:#ff4b24;clip-path:polygon(0 0,100% 37.5%,54.1667% 54.1667%,37.5% 100%);pointer-events:none;z-index:2147483647;visibility:hidden;border:0;outline:0;box-shadow:none;filter:none;transition:none}
/* Slim orange scrollbar with square corners and an unobtrusive track. */
html,body,body *{scrollbar-width:none;scrollbar-color:#ff4b24 transparent}
html.project-scroll,.about-page .detail-scroll{scrollbar-width:thin}
@supports selector(::-webkit-scrollbar){
  html.project-scroll,.about-page .detail-scroll{scrollbar-width:auto;scrollbar-color:auto}
  ::-webkit-scrollbar{display:none;width:0;height:0}
  html.project-scroll::-webkit-scrollbar,.about-page .detail-scroll::-webkit-scrollbar{display:block;width:6px;height:6px}
  ::-webkit-scrollbar-track{background:transparent;margin-top:var(--scrollbar-top,104px)}
  ::-webkit-scrollbar-thumb{background:#ff4b24;border:0;border-radius:0;box-shadow:none}
  ::-webkit-scrollbar-button{display:none;width:0;height:0}
  ::-webkit-scrollbar-corner{background:transparent}
  .about-page .detail-scroll::-webkit-scrollbar-track{margin-top:0}
}
/* Running project draft image layouts. */
.image-panel.moodboard img{width:100%;max-width:100%;max-height:none!important;margin:0}
.sketch-spread .image-panel img{width:100%;max-height:none!important;margin:0}
.image-panel.final img{width:100%;max-height:none!important;margin:0}

/* An in-page scrollbar lets the custom pointer remain above the track. */
html.page-scrollbar,html.page-scrollbar body,html.page-scrollbar .detail-scroll{scrollbar-width:none!important}
html.page-scrollbar::-webkit-scrollbar,html.page-scrollbar .detail-scroll::-webkit-scrollbar{display:none!important;width:0!important}
.page-scroll-track{position:fixed;right:0;width:6px;background:transparent;z-index:2147483600;touch-action:none;user-select:none}
.page-scroll-thumb{position:absolute;top:0;left:0;width:6px;background:#ff4b24;border-radius:0}
.orange-pointer::after{content:'';position:absolute;inset:0;background:#000;clip-path:inset(var(--overlap-top,100%) var(--overlap-right,0px) var(--overlap-bottom,0px) var(--overlap-left,0px))}
.windbreaker-edge{margin-right:0!important;margin-left:0!important;padding:0!important}
.image-panel.windbreaker-edge img{margin-left:auto!important;margin-right:0!important}

/* Preserve the reading order with a loose sketchbook composition. */
.development-spread{padding-top:20px;padding-bottom:20px;gap:0}
.sketch-row img{max-height:85%;position:relative}
.sketch-row:nth-child(1) img:nth-child(1){transform:translate(-4%,18px)}
.sketch-row:nth-child(1) img:nth-child(2){transform:translate(0,-20px)}
.sketch-row:nth-child(1) img:nth-child(3){transform:translate(4%,30px)}
.sketch-row:nth-child(2) img:nth-child(1){transform:translate(0,-18px)}
.sketch-row:nth-child(2) img:nth-child(2){transform:translate(-2%,28px)}
.sketch-row:nth-child(2) img:nth-child(3){transform:translate(1%,-30px)}
.sketch-row:nth-child(2) img:nth-child(4){transform:translate(2%,22px)}
.sketch-row:nth-child(2) img:nth-child(5){transform:translate(0,-12px)}
.sketch-row:nth-child(3) img:nth-child(1){transform:translate(0,-15px)}
.sketch-row:nth-child(3) img:nth-child(2){transform:translate(0,20px)}
.sketch-row:nth-child(3) img:nth-child(3){transform:translate(0,-25px)}
.sketch-row:nth-child(3) img:nth-child(4){transform:translate(0,18px)}
.sketch-row:nth-child(3) img:nth-child(5){transform:translate(0,-12px)}
.sketch-row:nth-child(3) img:nth-child(6){transform:translate(0,24px)}
@media(max-width:700px){.sketch-row img{max-height:80%}.development-spread{padding-top:25px;padding-bottom:25px}}

/* One rectangular sketchbook page: independent placement, no row tracks. */
.development-spread.sketchbook-page{display:block;position:relative;height:auto;aspect-ratio:1.95;max-height:calc(100svh - 135px);width:94vw;margin:25px auto 70px;padding:0;overflow:visible}
.sketchbook-page>img{position:absolute;display:block;object-fit:contain;max-width:none;max-height:none;transform:none!important}
.sketchbook-page>img:nth-child(1){left:0%;top:0%;width:18%;height:28%}
.sketchbook-page>img:nth-child(2){left:21%;top:7%;width:19%;height:28%}
.sketchbook-page>img:nth-child(3){left:43%;top:0%;width:19%;height:26%}
.sketchbook-page>img:nth-child(4){left:64%;top:2%;width:20%;height:33%}
.sketchbook-page>img:nth-child(5){left:85%;top:14%;width:15%;height:26%}
.sketchbook-page>img:nth-child(6){left:1%;top:32%;width:19%;height:30%}
.sketchbook-page>img:nth-child(7){left:22%;top:43%;width:17%;height:20%}
.sketchbook-page>img:nth-child(8){left:41%;top:29%;width:21%;height:37%}
.sketchbook-page>img:nth-child(9){left:65%;top:40%;width:16%;height:26%}
.sketchbook-page>img:nth-child(10){left:83%;top:46%;width:17%;height:24%}
.sketchbook-page>img:nth-child(11){left:0%;top:68%;width:26%;height:31%}
.sketchbook-page>img:nth-child(12){left:27%;top:70%;width:19%;height:27%}
.sketchbook-page>img:nth-child(13){left:48%;top:67%;width:27%;height:31%}
.sketchbook-page>img:nth-child(14){left:78%;top:74%;width:22%;height:24%}
@media(max-width:700px){.development-spread.sketchbook-page{width:98vw;max-height:calc(100svh - 110px);margin:15px auto 40px}}

/* Shared text-only project return control. */
html.project-scroll{scroll-behavior:smooth}
.back-to-top{display:grid;position:relative;width:max-content;margin:24px auto;padding:12px 0;border:0;background:none;color:#fff;font:14px Faculty Glyphic,Arial,sans-serif;text-align:center;text-decoration:none}
.back-to-top::before{display:none}
.back-to-top>span{grid-area:1/1;transition:clip-path .45s cubic-bezier(.22,1,.36,1)}
.back-to-top .top-label{color:#fff;clip-path:inset(0 0 0 0)}
.back-to-top .top-fill{color:var(--accent);clip-path:inset(0 100% 0 0)}
.back-to-top:hover .top-label,.back-to-top:focus-visible .top-label{clip-path:inset(0 0 0 100%)}
.back-to-top:hover .top-fill,.back-to-top:focus-visible .top-fill{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){html.project-scroll{scroll-behavior:auto}.back-to-top>span{transition:none}}

/* Outlined project buttons flank the text-only return control. */
.project-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,4vw,64px);width:92%;margin:40px auto;background:transparent;border:0}
.project-navigation a.next-project{border:1px solid #fff;min-height:96px;padding:18px 24px;justify-content:center;gap:8px}
.project-navigation a.next-project strong{font-size:clamp(18px,2vw,26px)}
.project-navigation a.next-project::before,.project-navigation a.previous-project::before{transform-origin:left}
.project-navigation a.back-to-top{display:grid;align-self:center;min-height:0;width:max-content;margin:0;padding:12px 0;border:0;background:none;font:14px Faculty Glyphic,Arial,sans-serif}
.project-navigation a.back-to-top::before{display:none}
.project-navigation a.back-to-top>span{grid-area:1/1}
@media(max-width:700px){.project-navigation{width:92%;gap:12px;margin:28px auto;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.project-navigation a.next-project{padding:14px 10px;min-height:100px}.project-navigation a.next-project strong{font-size:16px}.project-navigation a.next-project span{font-size:10px}.project-navigation a.back-to-top{font-size:12px}}

/* Compact navigation: a single orange stroke traces the rectangle on hover. */
.project-navigation a.next-project{width:min(100%,260px);min-height:64px;padding:12px 16px;border:0;gap:5px;overflow:visible;justify-self:end;background:transparent}
.project-navigation a.previous-project{justify-self:start}
.project-navigation a.next-project span{font-size:12px;line-height:1.3}
.project-navigation a.next-project strong{font-size:15px;line-height:1.3;font-weight:450}
.project-navigation a.next-project::before,.project-navigation a.next-project::after{display:none}
.project-navigation a.next-project:hover,.project-navigation a.next-project:focus-visible{background:transparent}
.button-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.button-outline rect{fill:none;stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke}
.button-outline .outline-base{opacity:.45}
.button-outline .outline-trace{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.next-project:hover .outline-trace,.next-project:focus-visible .outline-trace{stroke-dashoffset:0}
@media(max-width:700px){.project-navigation a.next-project{min-height:64px;padding:10px;gap:5px}.project-navigation a.next-project span{font-size:10px}.project-navigation a.next-project strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.button-outline .outline-trace{transition:none}}

/* Invisible at rest; the same stroke draws and retracts along the perimeter. */
.button-outline .outline-base{display:none}
.button-outline rect{width:calc(100% - 1px);height:calc(100% - 1px);vector-effect:none}
.button-outline .outline-trace{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
.next-project:hover .outline-trace,.next-project:focus-visible .outline-trace{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.button-outline .outline-trace{transition:none}}