@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* Homepage refinement pass */

/* A single typeface gives the portfolio a calmer, more precise voice. */
body,
body * {
  font-family: 'DM Sans', Arial, sans-serif !important;
}

body {
  letter-spacing: .02em;
}

#cursor {
  background: #000;
  mix-blend-mode: normal;
  box-shadow: 0 0 0 1px #000;
}

#cursor.is-hovering {
  background: #fff;
  mix-blend-mode: difference;
  box-shadow: none;
}

h1, h2, h3,
.project-name,
.hobby-grid strong {
  letter-spacing: .01em !important;
}

.kicker,
.number,
.meta,
.scroll-note,
.copyright,
nav {
  letter-spacing: .06em !important;
}
#nav { padding: 28px 32px; }

.home-dot {
  width: 28px;
  height: 28px;
}

nav {
  gap: 28px;
  font: 500 13px 'DM Mono', monospace;
  letter-spacing: .04em;
}

.section-head {
  display: block;
  margin-bottom: 10vw;
}

.intro {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 500;
  max-width: none;
  white-space: nowrap;
}

/* Reuse the homepage display type for key section titles. */
.section-head h2,
.future .project-name,
.about-teaser h2 {
  font-weight: 600;
}

.scroll-note {
  font: 500 13px 'DM Mono', monospace;
  letter-spacing: .04em;
}

/* Keep project names prominent without overpowering the supporting metadata. */
.project-card .project-name {
  font-size: clamp(2rem, 4.25vw, 4.8rem) !important;
  line-height: .95;
}

.project-card .meta {
  line-height: 1.7;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}

/* Project detail routes are standalone views, not continuation sections. */
body:has(.detail:target) #site > section:not(.detail) {
  display: none;
}

body:has(.detail:target) .detail:target {
  display: block;
  min-height: 100vh;
}

body:has(.resume:target) #site > section:not(.resume) {
  display: none;
}

body:has(.resume:target) .resume:target {
  display: block;
  min-height: 100vh;
}

/* Resume: keep academic and professional records equally legible. */
.resume { font-family:'DM Sans',Arial,sans-serif; }
.resume .cv-grid { max-width:1200px; gap:clamp(42px,8vw,130px); padding-top:clamp(18px,2vw,28px); }
.resume .cv-column { display:grid; gap:clamp(22px,3vw,38px); }
.resume .cv-grid h3 { margin:0; font:600 clamp(15px,1.2vw,18px)/1.42 'DM Sans',Arial,sans-serif; letter-spacing:0; }
.resume .cv-entry { padding-top:16px; border-top:1px solid var(--line); }
.resume .cv-entry p { max-width:none; margin:0; font:400 clamp(15px,1.2vw,18px)/1.42 'DM Sans',Arial,sans-serif; }
.resume .cv-entry .cv-entry-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:baseline; }
.resume .cv-entry b { font-weight:600; }
.resume .cv-entry .cv-entry-head span { color:var(--muted); font-size:12px; letter-spacing:.04em; white-space:nowrap; }
.resume .cv-entry .cv-entry-head + p { margin-top:6px; }
.resume .skills { border-top:0; padding-top:0; }
.resume > h2,
.resume .skills h2,
.resume .hobbies h2 { font-size:clamp(2.75rem,5.5vw,6rem)!important; font-weight:600!important; line-height:.9!important; letter-spacing:-.04em!important; }
.resume .skills h2 { margin:0; padding-bottom:clamp(18px,2vw,28px); border-bottom:1px solid var(--ink); }
.resume .skills p { max-width:1100px; margin:clamp(22px,3vw,36px) 0 0; font:600 clamp(15px,1.2vw,18px)/1.42 'DM Sans',Arial,sans-serif; letter-spacing:0; }
.resume .hobby-grid em { align-self:flex-end; text-align:right; }
.resume .hobby-grid > .hobby-gallery { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:14px; justify-content:stretch; padding:18px; }
.resume .hobby-gallery .hobby-media-carousel { width:100%; min-height:0; height:100%; background:#282828; }
.resume .hobby-gallery .carousel-track { height:100%; }
.resume .hobby-gallery .carousel-slide { height:100%; min-height:0; background:#282828; }
.resume .hobby-gallery .carousel-slide img { object-fit:cover; }
.resume .hobby-gallery .carousel-controls { right:10px; bottom:10px; }
.resume-contact-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; margin-top:clamp(72px,11vw,150px); padding:clamp(22px,3vw,38px) 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font:600 clamp(24px,3.4vw,48px)/1 'DM Sans',Arial,sans-serif; letter-spacing:-.035em; transition:background .25s,color .25s,padding .25s; }
.resume-contact-cta span { font-size:1.08em; transition:transform .25s ease; }
.resume-contact-cta:hover,.resume-contact-cta:focus-visible { padding-inline:clamp(16px,2vw,28px); background:var(--ink); color:var(--paper); }
.resume-contact-cta:hover span,.resume-contact-cta:focus-visible span { transform:translate(5px,-5px); }
.contact .contact-links a { gap:12px; align-items:center; padding:14px 0; transition:background .25s,color .25s,padding .25s; }
.contact .contact-link-icon { display:grid; place-items:center; width:18px; height:18px; flex:0 0 18px; }
.contact .contact-link-icon svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.contact .contact-link-label { flex:1; }
.contact .contact-link-arrow { font-size:1.08em; transition:transform .25s ease; }
.contact .contact-links a:hover,.contact .contact-links a:focus-visible { padding-inline:clamp(12px,1.5vw,22px); background:var(--ink); color:var(--paper); }
.contact .contact-links a:hover .contact-link-arrow,.contact .contact-links a:focus-visible .contact-link-arrow { transform:translate(5px,-5px); }

@media (max-width:700px) {
  .resume .cv-grid { gap:42px; }
  .resume .cv-entry .cv-entry-head { grid-template-columns:1fr; gap:4px; }
  .resume .cv-entry .cv-entry-head span { font-size:11px; }
}

@keyframes project-detail-enter {
  from { opacity: 0; transform: translateY(12vh); }
  to { opacity: 1; transform: translateY(0); }
}

body.project-entering .detail:target {
  animation: project-detail-enter 1s cubic-bezier(.22, .8, .25, 1) both;
}

/* Bridge portfolio: a paced sequence of drawings, following the reference layout. */
.bridge-intro { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; column-gap:7vw; row-gap:0; margin-bottom:clamp(88px,12vw,180px); font-family:'DM Sans',Arial,sans-serif!important; }.bridge-intro .back { grid-column:1; grid-row:1; justify-self:start; align-self:end; margin:0; }.bridge-meta { grid-column:2; grid-row:1; justify-self:end; align-self:end; margin:0; padding:8px 12px; background:var(--paper); color:#000; font:500 12px/1.2 'DM Sans',Arial,sans-serif!important; }.bridge-intro h2 { grid-column:1; grid-row:2; margin:clamp(48px,6vw,86px) 0 0; align-self:start; font:600 clamp(4rem,9vw,9.5rem)/.84 'DM Sans',Arial,sans-serif!important; letter-spacing:.005em!important; }.bridge-location { grid-column:2; grid-row:2; margin:clamp(48px,6vw,86px) 0 0; align-self:end; justify-self:end; text-align:right; font:400 clamp(15px,1.25vw,20px)/1.3 'DM Sans',Arial,sans-serif!important; }.bridge-keywords { grid-column:1 / -1; grid-row:3; margin:clamp(42px,5vw,72px) 0 0; padding-top:clamp(18px,2vw,28px); border-top:1px solid var(--line); font:400 clamp(14px,1.2vw,18px)/1.5 'DM Sans',Arial,sans-serif!important; }.bridge-keywords b { font-weight:600; margin-right:8px; }.bridge-intro .project-copy { grid-column:1 / -1; margin:clamp(28px,3.5vw,52px) 0 0; width:100%; max-width:none; font:400 clamp(15px,1.25vw,20px)/1.42 'DM Sans',Arial,sans-serif!important; }.bridge-intro .project-copy p { margin:0; }.bridge-intro .project-copy p + p { margin-top:1.15em; }
.bridge-portfolio { display: grid; gap: clamp(24px, 4vw, 58px); }
.artwork { margin: 0; min-width: 0; }.artwork-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.artwork-stack { display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,58px); }
.levelup-plan-grid { display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr); gap:clamp(14px,2.4vw,32px); align-items:start; }
.levelup-plan-aside { display:grid; gap:clamp(14px,2.4vw,32px); }
.levelup-plan-grid .artwork-button,.levelup-drawing-pair .artwork-button,.levelup-scene-pair .artwork-button { height:auto; }
.levelup-plan-grid .artwork-button img,.levelup-drawing-pair .artwork-button img,.levelup-scene-pair .artwork-button img { width:100%; height:auto; max-height:none; object-fit:fill; }
.artwork-stack .artwork-button img { max-height:none; width:100%; object-fit:fill; }
.artwork-context-stack .artwork-button img { object-fit:contain; background:#f8f8f6; }
.artwork-button,
.artwork-button *,
.artwork-button:hover,
.artwork-button:focus-visible { cursor:none !important; }
.archive-section { margin-top:clamp(76px,12vw,170px); padding-top:clamp(20px,3vw,40px); border-top:1px solid var(--line); }.archive-heading { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(18px,2.4vw,32px); }.archive-heading .kicker { margin:0; }.archive-heading h3 { margin:0; font:600 clamp(2.6rem,5vw,5.6rem)/.9 'DM Sans',Arial,sans-serif!important; letter-spacing:.01em!important; }.media-carousel { position:relative; overflow:hidden; background:#e7e7e3; outline-offset:5px; }.carousel-track { display:flex; transition:transform .48s cubic-bezier(.22,.8,.25,1); will-change:transform; }.carousel-slide { flex:0 0 100%; width:100%; height:clamp(300px,56vw,760px); margin:0; display:grid; place-items:center; background:#e7e7e3; }.carousel-slide img { display:block; width:100%; height:100%; object-fit:cover; }.carousel-controls { position:absolute; z-index:2; right:16px; bottom:16px; display:flex; align-items:center; gap:12px; padding:7px; background:rgba(17,17,17,.86); color:#fff; }.carousel-arrow { width:34px; height:30px; padding:0; border:0; background:transparent; color:#fff; font:400 21px/1 'DM Sans',Arial,sans-serif; cursor:none; }.carousel-arrow:hover,.carousel-arrow:focus-visible { background:#fff; color:#111; }.carousel-count { min-width:54px; text-align:center; font:500 10px 'DM Sans',Arial,sans-serif; letter-spacing:.08em; }.media-carousel:focus-visible { outline:1px solid #111; }
.archive-galleries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,48px); }.archive-galleries .archive-section { margin-top:clamp(76px,12vw,170px); }.archive-galleries .carousel-slide { height:clamp(280px,34vw,560px); }.carousel-slide img { cursor:none; object-fit:cover; object-position:center; }
.bridge-intro + .archive-galleries { margin-top:clamp(56px,8vw,110px); }.bridge-intro + .archive-galleries .archive-section { margin-top:0; }
.bridge-intro + .archive-galleries { padding-bottom:clamp(64px,9vw,130px); border-bottom:1px solid var(--line); margin-bottom:clamp(64px,9vw,130px); }
.archive-galleries .archive-heading h3 { font-size:clamp(24px,2.8vw,40px)!important; }
.carousel-controls { right:12px; bottom:12px; gap:4px; padding:5px 6px; opacity:0; transform:translateY(8px); transition:opacity .25s,transform .25s; }.media-carousel:hover .carousel-controls,.media-carousel:focus-within .carousel-controls { opacity:1; transform:translateY(0); }.carousel-arrow { width:28px; height:24px; font-size:16px; }.carousel-count { min-width:46px; font-size:9px; }
@media (max-width:700px){.archive-galleries { grid-template-columns:1fr; gap:0; }.archive-heading { display:block; }.archive-heading h3 { margin-top:12px; }.carousel-slide,.archive-galleries .carousel-slide { height:62vw; min-height:260px; }.carousel-controls { right:10px; bottom:10px; }.carousel-arrow { width:30px; }}
@media (max-width:700px){.carousel-controls { opacity:1; transform:none; }}
.lightbox-image { width:auto; height:auto; max-width:none; max-height:none; object-fit:contain; }
.lightbox-caption { display:none; }.lightbox-nav { position:absolute; z-index:3; top:50%; width:48px; height:64px; transform:translateY(-50%); border:0; background:rgba(255,255,255,.12); color:#fff; font:400 32px/1 'DM Sans',Arial,sans-serif; cursor:none; opacity:0; transition:opacity .2s,background .2s; }.lightbox:hover .lightbox-nav,.lightbox-nav:focus-visible { opacity:1; }.lightbox-nav:hover { background:#fff; color:#111; }.lightbox-previous { left:20px; }.lightbox-next { right:20px; }.lightbox:not(.has-gallery) .lightbox-nav { display:none; }.lightbox-page { position:absolute; z-index:3; left:50%; bottom:24px; margin:0; transform:translateX(-50%); color:rgba(255,255,255,.42); font:500 10px/1 'DM Sans',Arial,sans-serif; letter-spacing:.12em; pointer-events:none; }
.artwork-button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #e7e7e3; cursor: zoom-in; text-align: left; overflow: hidden; }.artwork-button img { display: block; width: 100%; max-height: 76vh; object-fit: contain; transition: transform .45s cubic-bezier(.22, .8, .25, 1), filter .35s; }.artwork-hero .artwork-button img { max-height: none; }
.artwork-button span { position: absolute; right: 12px; bottom: 12px; padding: 7px 9px; background: rgba(17,17,17,.86); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .07em; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }.artwork-button:hover img,.artwork-button:focus-visible img { transform: scale(1.018); filter: brightness(.92); }.artwork-button:hover span,.artwork-button:focus-visible span { opacity: 1; transform: translateY(0); }
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(8,8,8,.96); color: #fff; }.lightbox.is-open { display: block; }.lightbox-close { position: absolute; z-index: 2; top: 24px; right: 28px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.65); background: transparent; color: #fff; font: 600 12px 'DM Sans',sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }.lightbox-caption,.lightbox-hint { position: absolute; z-index: 2; left: 28px; margin: 0; font-size: 11px; letter-spacing: .06em; }.lightbox-caption { top: 30px; }.lightbox-hint { bottom: 24px; color: rgba(255,255,255,.65); }.lightbox-stage { width: 100%; height: 100%; padding: 76px 6vw 54px; display: grid; place-items: center; overflow: hidden; cursor: grab; }.lightbox-stage.is-panning { cursor: grabbing; }.lightbox-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; user-select: none; pointer-events: none; will-change: transform; }
@media (max-width:700px){.bridge-intro { display:flex; flex-direction:column; gap:26px; margin-bottom:70px; }.bridge-intro .back { order:0; }.bridge-meta { order:1; align-self:flex-start; }.bridge-intro h2 { order:2; font-size:clamp(4.3rem,20vw,7rem); }.bridge-location { order:3; align-self:flex-start; text-align:left; }.bridge-keywords { order:4; }.bridge-intro .project-copy { order:5; }.artwork-pair,.levelup-plan-grid { grid-template-columns:1fr; gap:20px; }.levelup-plan-grid .artwork-button img { height:auto; object-fit:fill; }.lightbox-close { top:16px; right:16px; }.lightbox-caption { top:21px; left:16px; max-width:55%; }.lightbox-hint { left:16px; bottom:16px; }.lightbox-stage { padding:64px 16px 45px; }}

@media (max-width:700px){.project-switch { margin-top:72px; padding-bottom:28px; gap:14px; }.project-switch a { max-width:46%; font-size:10px; line-height:1.45; align-items:center; }.project-switch b { display:none; }}

.detail .back,
.resume .back {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  transition: background .2s, color .2s;
}

.detail .back:hover,
.detail .back:focus-visible,
.resume .back:hover,
.resume .back:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.project-switch {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(96px, 14vw, 200px);
  padding: 20px 0 clamp(28px, 4vw, 58px);
  border-top: 1px solid var(--line);
}

.project-switch a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.project-switch a:not(:only-child):last-child,
.project-switch.has-next:not(.has-previous) a { margin-left:auto; text-align:right; justify-content:flex-end; }
.project-switch b { font-weight: 700; }
.project-switch span { font-size: 18px; line-height: .7; transition: transform .2s ease; }
.project-switch a:first-child:hover span,.project-switch a:first-child:focus-visible span { transform: translateX(-5px); }
.project-switch a:last-child:hover span,.project-switch a:last-child:focus-visible span { transform: translateX(5px); }

@media (max-width: 700px) {
  #nav { padding: 20px; }

  .home-dot {
    width: 22px;
    height: 22px;
  }

  nav {
    gap: 13px;
    font-size: 11px;
  }

  .intro {
    font-size: clamp(22px, 7vw, 30px);
    white-space: normal;
  }

  .scroll-note { font-size: 11px; }

  .project-card .project-name {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
  }
}


/* Inline arrow language — prevents iOS and Android from substituting emoji glyphs. */
.ui-arrow-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.project-card .arrow,
.about-teaser .big-arrow,
.contact-link-arrow,
.contact-links a > span,
#entry .enter span,
.scroll-note span {
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.project-card .arrow .ui-arrow-icon { width: 1.15em; height: 1.15em; }
.about-teaser .big-arrow .ui-arrow-icon { width: .95em; height: .95em; stroke-width: 1.55; }
.carousel-arrow .ui-arrow-icon,
.lightbox-nav .ui-arrow-icon,
.project-switch span .ui-arrow-icon { width: .86em; height: .86em; }

/* Touch interactions only apply inside the full-screen image viewer. */
.lightbox-stage { touch-action: none; overscroll-behavior: contain; }
.lightbox-image { transition: transform .18s cubic-bezier(.22, .8, .25, 1); }
.lightbox-stage.is-gesturing .lightbox-image { transition: none; }

@media (hover: none), (pointer: coarse) {
  .lightbox-hint::after { content: ' · Pinch to zoom · Swipe to browse'; }
  .lightbox-nav { opacity: .78; }
}


/* Navigation readability over imagery. */
#nav nav a {
  color: #fff;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 600;
  letter-spacing: .055em;
  mix-blend-mode: difference;
}

.contact .contact-links a {
  justify-content: flex-start;
}

.contact .contact-link-label {
  text-align: left !important;
}

.project-about-cta {
  margin-top: clamp(72px, 12vw, 164px);
  margin-bottom: clamp(20px, 3vw, 42px);
}

@media (max-width: 700px) {
  #nav nav {
    gap: 12px;
  }

  #nav nav a {
    font-size: clamp(11px, 3.1vw, 13px);
    font-weight: 600;
    letter-spacing: .04em;
  }

  .contact .contact-link-label {
    text-align: left !important;
  }

  .project-about-cta {
    margin-top: 70px;
    font-size: clamp(24px, 8vw, 40px);
  }
}


/* Navigation stays black on light areas and inverts only over dark content. */
#nav {
  color: #fff;
  mix-blend-mode: difference;
}

#nav nav a {
  color: #fff !important;
  mix-blend-mode: normal !important;
}

#nav .home-dot {
  background: #fff;
  mix-blend-mode: normal;
}

#nav nav a:hover,
#nav nav a:focus-visible {
  border-color: currentColor;
}

/* Keep each contact label anchored to the left, regardless of viewport width. */
.contact .contact-links a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  justify-content: initial;
  column-gap: 12px;
}

.contact .contact-link-label {
  display: block !important;
  width: 100%;
  place-items: initial !important;
  align-self: stretch;
  justify-self: stretch;
  text-align: left !important;
}