/* Self-hosted Google Fonts (latin subset, OFL) */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/poppins-400-latin.woff2?v=3dc5d0c5) format('woff2'); }
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-latin.woff2?v=23aab0b2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin.woff2?v=3692732c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2?v=36d91239) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-latin.woff2?v=691bb6da) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Chanakan Nimae — portfolio
   Desktop: every section is a 16:9 slide laid out in the PDF's own 1440×810
   coordinate space (1 unit = 1px of the original slide), scaled to the viewport.
   Mobile (≤820px): the same content reflows into a readable single column. */

:root {
  --dark-top: #2e2f33;
  --dark-bot: #202125;
  --light: #ececec;
  --red: #a3172b;
  --mfu: #b4434f;
  --paw: #e37940;
  --chop: #efcea0;
  --chop-ink: #4a2a1a;
  --white: #f7f7f7;
  --display: "Anton", "Bebas Neue", sans-serif;
  --body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 48px; }
body { margin: 0; background: var(--dark-bot); color: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid #f0b75a; outline-offset: 3px; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: #fff; color: #111; font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s ease-out; }
.skip:focus { transform: none; }
main:focus { outline: none; }
html.is-locked { overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: 48px;
  display: flex; align-items: center; gap: 24px; padding: 0 28px;
  background: rgba(24,24,27,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.nav__brand { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-decoration: none; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { font-size: 13px; font-weight: 500; color: #c9c9c9; text-decoration: none; }
.nav__links a:hover { color: #fff; }
.nav__links a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.nav__links a { padding: 15px 0 13px; }
.nav__pdf { font-size: 12.5px; font-weight: 700; text-decoration: none; padding: 8px 12px 8px 16px; border-radius: 999px; background: var(--red); color: #fff; }
.dl { position: relative; }
.dl summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.dl summary::-webkit-details-marker { display: none; }
.dl summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease-out; }
.dl[open] summary svg { transform: rotate(180deg); }
.dl__menu { position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px; padding: 6px; border-radius: 14px;
  background: #1b1b1e; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 40px -12px rgba(0,0,0,.6); z-index: 60; }
.dl__menu a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; color: #f2f2f2; text-decoration: none; }
.dl__menu a:hover, .dl__menu a:focus-visible { background: rgba(255,255,255,.08); }
.dl__menu strong { font-size: 14.5px; font-weight: 700; }
.dl__menu span { font-size: 12.5px; color: #b5b5b5; }
.nav__pdf:hover { background: #c01f35; }
.nav__toggle { display: none; }
html:not(.js) .nav__toggle { display: none !important; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3ccf7a; box-shadow: 0 0 0 3px rgba(60,207,122,.22); flex: none; }
.nav__avail { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: #e6e6e6; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); white-space: nowrap; }
.nav__avail:hover { border-color: rgba(255,255,255,.4); color: #fff; }
@media (max-width: 1340px) { .nav__avail { display: none; } }
.nav__brand, .nav__links a, .nav__pdf { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1040px) { .nav { gap: 16px; padding: 0 20px; } .nav__links { gap: 14px; } .nav__links a { font-size: 12.5px; } }
.avail { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #e6e6e6; }
.avail--dark { color: #2d2d2d; }
.avail--dark .dot { background: #1f9d55; box-shadow: 0 0 0 3px rgba(31,157,85,.18); }

/* Project notes under each slide */
.note { padding: clamp(28px, 3.4vw, 48px) 0 clamp(36px, 4vw, 56px); background: #eeeeee; color: #1d1d1d; }
.note__inner { max-width: 1360px; margin: 0 auto; padding: 0 clamp(20px, 4.6vw, 67px); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px clamp(28px, 4vw, 64px); border-top: 1px solid rgba(0,0,0,.1); padding-top: clamp(22px, 2.6vw, 34px); }
.note h3 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.note p { font-size: 16px; line-height: 1.6; max-width: 58ch; color: #333; }
.note--mfu h3 { color: #8f0a1b; }
.note--paw h3 { color: #b8461a; }
.note--chop { background: #efefef; }
.note--chop h3 { color: #8a4b23; }
.note--dark { background: var(--dark-bot); color: #f2f2f2; }
.note--dark .note__inner { border-top-color: rgba(255,255,255,.12); }
.note--dark h3 { color: #f2788a; }
.note--dark p { color: #d6d6d6; }

/* Contact headline */
.contact-head { max-width: 1360px; margin: 0 auto; padding: 36px 40px 0; }
#internship { scroll-margin-top: 72px; }
.contact-head h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; color: #1d1d1d; margin: 12px 0 8px; max-width: 22ch; }
.contact-head p:last-child { font-size: 16px; color: #3a3a3a; }

/* ---------- Slide system ---------- */
.s { container-type: inline-size; position: relative; }
.slide {
  --u: calc(100vw / 1440);
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
}
@supports (width: 1cqw) { .slide { --u: calc(100cqw / 1440); } }
.a {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w, auto) * var(--u));
}
.a > img { width: 100%; }
img.a { max-width: none; }
.f { font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u)); }
.slide--image > img, .slide--image > .shot img { width: 100%; height: 100%; object-fit: cover; }

/* Backgrounds sampled from the PDF */
.dark .slide {
  background-color: var(--dark-bot);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.05) 2px, transparent 2px),
    linear-gradient(180deg, var(--dark-top) 0%, #26272b 15%, #222224 40%, var(--dark-bot) 100%);
  background-size: calc(30 * var(--u)) calc(30 * var(--u)), calc(30 * var(--u)) calc(30 * var(--u)), 100% 100%;
}
.light .slide {
  color: #1d1d1d;
  background-image:
    linear-gradient(rgba(0,0,0,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.018) 1px, transparent 1px),
    var(--grad);
  background-size: calc(30 * var(--u)) calc(30 * var(--u)), calc(30 * var(--u)) calc(30 * var(--u)), 100% 100%;
}
.theme-mfu { --grad: linear-gradient(180deg, #b4434f 0%, #c05863 8%, #c66974 15%, #c6757e 23%, #cf8b94 30%, #d29da3 38%, #ddb6bb 45%, #e0c3c7 52%, #e7d8db 60%, #ececec 67%, #eeeeee 100%); }
.theme-paw { --grad: linear-gradient(180deg, #e37940 0%, #e9885b 8%, #ec946c 15%, #e69a78 23%, #eaa98d 30%, #e8b5a0 38%, #efc9b6 45%, #e9d0c5 52%, #ecdfd9 60%, #ececec 67%, #eeeeee 100%); }
.theme-chop { --grad: linear-gradient(180deg, #efcea0 0%, #eed3a8 8%, #eed4af 15%, #edd9b8 23%, #ecdbc1 30%, #eedfca 38%, #ede1d1 45%, #eee8dc 52%, #eeebe4 60%, #ececec 67%, #efefef 100%); }

/* ---------- Shared type ---------- */
.b7 { font-weight: 700; }
.red { color: var(--red); }
.hd { font-weight: 700; white-space: nowrap; }
.just { text-align: justify; }
.center { text-align: center; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0; color: #fff; }
.vertical { writing-mode: vertical-rl; transform: rotate(180deg); height: calc(var(--h) * var(--u)); display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.eyebrow { font-weight: 800; color: #fff; letter-spacing: .01em; }
.spaced { text-transform: uppercase; letter-spacing: .31em; color: #fff; white-space: nowrap; }
.on-color { color: #fff; }
/* Description + subtitle: deep tint of each project's colour for legible contrast over the fade */
.theme-mfu .on-color, .theme-mfu .spaced { color: #5c0d18; }
.theme-paw .on-color, .theme-paw .spaced { color: #5e2410; }
.brown { color: var(--chop-ink); }
.rule { height: calc(2 * var(--u)); background: #8f0a1b; }
.theme-paw .rule { background: #ed6325; }
.vline { width: 1px; height: calc(var(--h) * var(--u)); background: rgba(0,0,0,.12); }
.hline { height: 1px; background: rgba(0,0,0,.09); }
.shot { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot--full { width: 100%; height: 100%; }
.shot { position: absolute; overflow: hidden; }
.shot:not(.a) { position: relative; }
.shot::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(20,20,22,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.9); transition: opacity .2s ease-out, transform .25s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.shot:hover::after, .shot:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .shot::after { opacity: .9; transform: none; width: 28px; height: 28px; top: 8px; right: 8px; background-size: 14px; } }
.phones-m { display: none; }

.hero-m { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid var(--red); }
.btn:hover { background: #c01f35; border-color: #c01f35; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.contact-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1360px; margin: 0 auto; padding: 28px 40px 40px; }
.contact-bar a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 14px; background: #fff; color: #1d1d1d; text-decoration: none; font-weight: 700; font-size: 16px; overflow-wrap: anywhere; box-shadow: 0 10px 24px -16px rgba(0,0,0,.35); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.contact-bar a:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(0,0,0,.45); }
.contact-bar span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5f5f5f; }
.contact-bar .contact-bar__pdf { background: var(--red); color: #fff; }
.contact-bar .contact-bar__pdf span { color: rgba(255,255,255,.8); }
#contact { background: #e9e3e3; color: #1d1d1d; }
img[data-zoom] { cursor: zoom-in; }
.flip { transform: scaleX(-1); }

/* Desktop keeps the PDF's own line breaks */
.slide p, .slide .card p { white-space: nowrap; }
.jl { display: block; white-space: nowrap; text-align: justify; text-align-last: justify; }
.spec > b { display: block; margin-bottom: calc(7 * var(--u)); }
.spec span { display: block; }
.spec i { font-style: normal; }
.spec .w5 { font-weight: 500; }

/* ---------- About ---------- */
.display-img img, .hello img { width: 100%; }
#hello { scroll-margin-top: calc(48px + 58 * var(--u)); }
.slide--about p + p { margin-top: calc(12 * var(--u)); }
.slide--about .tight + p, .slide--about p.mt { margin-top: calc(12 * var(--u)); }
.slide--about .b7 + .tight { margin-top: calc(12 * var(--u)); }
.slide--about p.b7 + p:not(.tight) { margin-top: 0; }
.slide--about { color: #ececec; }
.contact li { display: flex; align-items: center; gap: calc(18 * var(--u)); height: calc(38.5 * var(--u)); }
.contact svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; color: #fff; }
.contact a { text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.tools { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(16 * var(--u)); row-gap: calc(13 * var(--u)); }
.tools img { width: 100%; }
.bullets li { list-style: disc; }
.bullets { padding-left: calc(14 * var(--u)); }
.langs p { margin: 0; }

/* ---------- UI design projects ---------- */
.title-img img { width: 100%; }
.meta { display: grid; grid-template-columns: calc(100 * var(--u)) 1fr; color: #2a2a2a; }
.meta > div:first-child { border-right: 1px solid rgba(0,0,0,.18); }
.meta > div:last-child { padding-left: calc(34 * var(--u)); }
.meta h3 { font-weight: 700; margin-bottom: calc(8 * var(--u)); }
.toolrows span { display: flex; align-items: center; gap: calc(9 * var(--u)); height: calc(20.5 * var(--u)); }
.toolrows img { width: calc(15 * var(--u)); }
.cards { display: grid; grid-template-columns: repeat(3, calc(283 * var(--u))); column-gap: calc(16.5 * var(--u)); }
.card {
  height: calc(88 * var(--u)); background: #fff; border-radius: calc(16 * var(--u));
  display: flex; align-items: center; gap: calc(9 * var(--u)); padding-left: calc(13 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.05);
}
.card img { width: calc(64 * var(--u)); flex: none; }
.card h4 { font-size: calc(12.9 * var(--u)); line-height: calc(15 * var(--u)); font-weight: 700; margin-bottom: calc(6 * var(--u)); }
.card p { font-size: calc(11.7 * var(--u)); line-height: calc(12.2 * var(--u)); color: #2b2b2b; padding-right: calc(10 * var(--u)); }
.type-row { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); margin-top: calc(20 * var(--u)); }
.aa { font-weight: 700; letter-spacing: -.02em; color: #1d1d1d; }
.type-row p { color: #6b6b6b; margin-top: calc(1 * var(--u)); }
.type-row b { color: #1d1d1d; }
.palette { display: flex; gap: calc(13.6 * var(--u)); margin-top: calc(21 * var(--u)); }
.palette li { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u)); color: #8a8a8a; width: calc(52 * var(--u)); }
.palette li::before { content: ""; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: var(--c); }

/* ---------- Photobook / photography ---------- */
.book { display: grid; grid-template-columns: calc(452 * var(--u)) calc(452 * var(--u)); column-gap: calc(51 * var(--u)); row-gap: calc(39 * var(--u)); }
.book .shot img { width: 100%; box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.45); }

/* ---------- Experience ---------- */
.exp-text { color: #e8e8e8; }
.exp-text .year { font-size: calc(18.5 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 700; color: #fff; margin-bottom: calc(26 * var(--u)); }
.exp-text .role { margin-bottom: calc(36 * var(--u)); }
.exp--b .exp-text .role { margin-bottom: calc(37 * var(--u)); }
.exp-text .b7 { color: #fff; }

/* ---------- Thank you ---------- */
.hotspots .a { height: calc(var(--h) * var(--u)); }
.hotspots a { display: block; width: 100%; height: 100%; border-radius: 6px; }
.hotspots a:hover, .hotspots a:focus-visible { background: rgba(255,255,255,.18); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }

/* ---------- Footer / lightbox ---------- */
.footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 28px; background: #18181b; color: #9a9a9a; font-size: 13px; }
.footer a { text-decoration: none; color: #ddd; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a:hover { color: #fff; text-decoration: underline; }
.lightbox { padding: 0; border: 0; background: transparent; width: 100vw; height: 100vh; max-width: none; max-height: none; overflow: hidden; }
.lightbox::backdrop { background: rgba(10,10,12,.94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; }
.lightbox__img { max-width: 92vw; max-height: calc(100vh - 110px); width: auto; height: auto; border-radius: 4px; }
.lightbox__cap { display: flex; gap: 16px; align-items: baseline; justify-content: center; color: #cfcfcf; font-size: 14px; max-width: 80ch; text-align: center; }
.lightbox__count { color: #8f8f8f; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lightbox__btn, .lightbox__close { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lightbox__btn:hover, .lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__close { top: 16px; right: 18px; font-size: 20px; }
.lightbox.is-single .lightbox__btn { display: none; }
.lightbox.is-loading .lightbox__img { filter: blur(2px); }
.lightbox.is-error .lightbox__text::after { content: " — the full-size image couldn't load. Check your connection and try again."; color: #f2a0aa; }


/* ---------- Resume ---------- */
.resume { background: radial-gradient(120% 90% at 20% 30%, #b81d33 0%, #a3172b 45%, #84101f 100%); }
.resume__inner { max-width: 1100px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) clamp(20px, 4.6vw, 67px);
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.resume__sheet { perspective: 1200px; }
.resume__paper { position: relative; display: block; width: 100%; border-radius: 6px; overflow: hidden;
  transform: rotate(-2.2deg); box-shadow: 0 34px 60px -22px rgba(0,0,0,.55), 0 8px 18px -8px rgba(0,0,0,.4);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }
.resume__paper img { width: 100%; height: auto; display: block; }
.resume__paper:hover, .resume__paper:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.01); box-shadow: 0 40px 80px -24px rgba(0,0,0,.85), 0 10px 24px -10px rgba(0,0,0,.6); }
.resume__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 8vw, 112px); line-height: .9; color: #fff; margin: 0 0 28px; }
.resume .btn { background: #fff; border-color: #fff; color: #1d1d1d; }
.resume .btn:hover { background: #f1e6e7; border-color: #f1e6e7; }
.resume .btn--ghost { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.resume .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.resume :focus-visible { outline-color: #fff; }
.resume__lede { font-size: 17px; line-height: 1.55; color: #cfcfcf; max-width: 40ch; margin: 0 0 28px; }
.facts { margin: 0 0 34px; border-top: 1px solid rgba(255,255,255,.12); }
.facts > div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.facts dt { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f2788a; padding-top: 3px; }
.facts dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: #ececec; }
.resume__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn__meta { font-weight: 500; opacity: .78; margin-left: 10px; font-size: 13px; }
@media (max-width: 820px) {
  .resume__inner { grid-template-columns: 1fr; padding: 48px 20px 56px; gap: 28px; }
  .resume__sheet { order: 2; max-width: 300px; }
  .resume__paper { transform: rotate(-1.2deg); }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .resume__title { font-size: clamp(48px, 15vw, 72px); }
}
@media (prefers-reduced-motion: reduce) { .resume__paper { transition: none; } }

/* =========================================================
   Mobile reflow
   ========================================================= */
@media (max-width: 820px) {
  .nav { padding: 0 8px 0 16px; gap: 10px; }
  .nav__toggle {
    display: grid; place-items: center; width: 44px; height: 44px; margin: 0;
    border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer;
  }
  .nav__toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .nav__toggle path { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; transform-origin: 12px 12px; }
  .nav.is-open .l1 { transform: translateY(5px) rotate(45deg); }
  .nav.is-open .l2 { opacity: 0; }
  .nav.is-open .l3 { transform: translateY(-5px) rotate(-45deg); }
  .nav__links {
    display: flex !important; flex-direction: column; gap: 0; margin: 0;
    position: fixed; top: 48px; left: 0; right: 0;
    padding: 8px 16px 20px; background: rgba(24,24,27,.97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 40px -12px rgba(0,0,0,.6);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease-out, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s .28s;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease-out, transform .28s cubic-bezier(.2,.8,.2,1); }
  .nav__links a {
    font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
    font-size: 30px; line-height: 1; color: #f2f2f2; padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a:active, .nav__links a:focus-visible { color: #e0475b; }
  br.d { display: none; }
  .jl { display: inline; width: auto !important; white-space: normal; }
  .slide p, .slide .card p { white-space: normal; }
  .dl { margin-left: auto; }

  .slide:not(.slide--image) {
    --u: 1px;
    aspect-ratio: auto; overflow: visible;
    display: flex; flex-direction: column; gap: 14px;
    padding: 48px 20px 56px;
  }
  .slide:not(.slide--image) .a { position: static; width: auto; }
  .slide:not(.slide--image) .f { font-size: clamp(15px, calc(var(--fs) * .62px), 50px); line-height: 1.5; }
  .light .slide, .dark .slide { background-size: 24px 24px, 24px 24px, 100% 100%; }
  .decor, .vline, .hline, .rule { display: none !important; }
  .hd { font-size: 18px !important; line-height: 1.3 !important; margin-top: 14px; }
  .display { font-size: clamp(44px, 13vw, 64px) !important; line-height: 1 !important; text-align: left; }
  .vertical { writing-mode: horizontal-tb; transform: none; height: auto; display: block; }
  .eyebrow { font-size: 18px !important; }
  .spaced { white-space: normal; letter-spacing: .22em; font-size: 12px !important; }

  .hero-role, .hero-tag { display: none; }   /* too small on phones; repeated in large type just below */
  /* Cover: real-text intro under the cover image */
  .hero-m { display: block; padding: 22px 20px 34px; background: #18181b; }
  .hero-m .avail { margin-bottom: 14px; }
  .hero-m__role { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #b9b9b9; margin-bottom: 10px; }
  .hero-m__name { font-family: var(--display); text-transform: uppercase; font-size: clamp(52px, 16vw, 72px); line-height: .92; color: #fff; margin-bottom: 14px; }
  .hero-m__tag { font-size: 15px; line-height: 1.5; color: #d9d9d9; max-width: 34ch; margin-bottom: 20px; }
  .hero-m__cta { display: flex; gap: 10px; flex-wrap: wrap; }

  /* About */
  #hello { scroll-margin-top: 64px; order: -3; }
  .slide--about > p.b7 { order: -2; }
  .slide--about { padding-top: 36px !important; }
  .about-photo { order: -1; margin-top: 8px !important; width: calc(100% + 40px) !important; max-width: none; margin: 0 -20px; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
  .hello { max-width: 360px; margin: 8px 0 0 -6px; }
  .display-img { max-width: 340px; }
  .display-img--v img { display: none; }
  .display-img--v .sr { position: static; width: auto; height: auto; clip: auto; font-family: var(--display); font-size: clamp(44px, 13vw, 64px); text-transform: uppercase; color: #fff; }
  .slide--about p + p, .slide--about p.mt { margin-top: 10px; }
  .slide--about .just { text-align: left; }
  .contact li { height: 40px; }
  .tools { grid-template-columns: repeat(6, 40px); gap: 10px; }

  /* Projects */
  .title-img { max-width: 260px; }
  .meta { grid-template-columns: 1fr 1.2fr; font-size: 14px; line-height: 1.6; }
  .toolrows span { height: 26px; }
  .toolrows img { width: 18px; }
  .slide:not(.slide--image) .shot { position: relative; left: auto; top: auto; margin: 8px 0; }
  .shot--phones > img { display: none; }
  .phones-m { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; max-width: 520px; margin: 0 auto; }
  .phones-m i { display: block; aspect-ratio: 247.5 / 468; background: transparent no-repeat; background-size: 400% 100%; }
  .phones-m.is-in i, html:not(.js) .phones-m i { background-image: var(--src); }
  .phones-m i:nth-child(2) { background-position: 33.333% 0; }
  .phones-m i:nth-child(3) { background-position: 66.667% 0; }
  .phones-m i:nth-child(4) { background-position: 100% 0; }
  .cards { grid-template-columns: 1fr; row-gap: 12px; }
  .card { height: auto; padding: 14px 14px 14px 10px; gap: 14px; }
  .card h4 { font-size: 15px; line-height: 1.3; }
  .card p { font-size: 14px; line-height: 1.45; }
  .type-row p { font-size: 13px; line-height: 1.5; margin-top: 0; }
  .aa { font-size: 52px !important; line-height: 1 !important; }
  .palette { gap: 12px; flex-wrap: wrap; }
  .palette li { font-size: 11px; }

  /* Branding */
  .theme-chop .slide .a:not(h3) { margin-bottom: 4px; }

  /* Book */
  .book { grid-template-columns: 1fr; row-gap: 16px; }

  /* Experience */
  .exp { display: flex; flex-direction: column; gap: 12px; }
  .exp--b { margin-top: 32px; }
  .exp--b .exp-text { order: -1; }
  .exp-text .year { font-size: 26px; margin-bottom: 4px; }
  .exp-text .role { margin-bottom: 6px; color: #b5b5b5; }
  .exp img { border-radius: 4px; }

  /* Thank you */
  .slide--thanks .hotspots { display: none; }
  .contact-bar { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .contact-head { padding: 28px 20px 0; }
  .note__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav__links, .nav__toggle path { transition: none !important; } }

@media print {
  .nav, .skip, .lightbox, .shot::after, .hero-m, .contact-bar__pdf { display: none !important; }
  body { background: #fff; }
  .s { break-inside: avoid; page-break-inside: avoid; }
  .slide { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .note { break-inside: avoid; }
}

/* Cover role line (replaces the lettering removed from the photo) */
.hero-role, .hero-tag { font-family: 'Poppins', var(--body); font-weight: 400; color: #ececec; letter-spacing: 0; margin: 0; }
.hero-role { text-align: right; }
.hero-tag { text-wrap: pretty; }