:root{--bg:#f7f8fb;--surface:#fff;--ink:#0b1220;--muted:#5b6474;--line:#dfe3ea;--accent:#149fd7;--accent-soft:#e6f7fd;--dark:#0a101b;--shadow:0 24px 60px rgba(11,18,32,.10)}
[data-theme="dark"]{--bg:#0b111c;--surface:#111927;--ink:#f5f8fc;--muted:#9aa7b9;--line:#263143;--accent:#39bdf2;--accent-soft:#102b3b;--dark:#050912;--shadow:0 24px 60px rgba(0,0,0,.32)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 "DM Sans",sans-serif;transition:background .3s,color .3s}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.site-header{height:82px;width:min(1280px,calc(100% - 48px));margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:5}.brand span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--bg);font:800 14px/1 Manrope,sans-serif;letter-spacing:.04em}.site-header nav{display:flex;gap:36px;font-weight:600;font-size:14px}.site-header nav a,.text-link{position:relative}.site-header nav a:after,.text-link:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .2s}.site-header nav a:hover:after,.text-link:hover:after{right:0}.header-actions{display:flex;align-items:center;gap:12px}.theme-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer}.moon,[data-theme="dark"] .sun{display:none}[data-theme="dark"] .moon{display:inline}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:14px 20px;border-radius:10px;background:var(--ink);color:var(--bg);font-weight:700}.button-small{padding:10px 16px;font-size:14px}.button span,.text-link span,.contact-link span{color:var(--accent)}.hero{padding:104px 0 56px}.eyebrow,.section-index,.project-number,.label{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted)}.eyebrow span{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)}.hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:90px;align-items:end;margin:32px 0 96px}.hero h1,.section-heading h2,.about-grid h2,.contact h2{font-family:Manrope,sans-serif;letter-spacing:-.05em;line-height:1.02;margin:0}.hero h1{font-size:clamp(54px,7vw,96px);max-width:880px}.hero h1 em,.contact h2 em{font-style:normal;color:var(--accent)}.hero-intro{padding-bottom:8px}.hero-intro>p{font-size:18px;color:var(--muted);margin:0 0 32px}.hero-links{display:flex;align-items:center;gap:28px}.text-link{font-weight:700}.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0}.hero-meta div{display:flex;flex-direction:column;gap:3px}.hero-meta div+div{border-left:1px solid var(--line);padding-left:30px}.hero-meta span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:700}.hero-meta strong{font-size:15px}.work-section{background:var(--ink);color:var(--bg);padding:120px 0}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:100px;align-items:end;margin-bottom:56px}.section-index{color:var(--accent);margin:0 0 18px}.section-heading h2,.about-grid h2{font-size:clamp(38px,5vw,62px);max-width:760px}.section-heading>p{color:#9daabd;max-width:460px;margin:0}.project-card{border:1px solid #303a49;border-radius:24px;padding:28px;background:#111926;box-shadow:0 24px 80px rgba(0,0,0,.24)}.project-topline{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.project-number{color:#78879a;margin:0 0 4px}.project-card h3{font:700 32px/1.1 Manrope,sans-serif;margin:0;color:#fff}.segmented{display:flex;padding:4px;border-radius:10px;background:#080d15}.segmented button{border:0;background:transparent;color:#91a0b5;padding:9px 18px;border-radius:7px;cursor:pointer;font-weight:700}.segmented button.active{background:#263346;color:#fff}.project-frame{height:min(62vw,650px);overflow:hidden;border-radius:14px;background:#0a101b}.project-frame img{display:block;width:100%;height:auto;object-fit:cover;object-position:top;transition:opacity .2s}.project-details{display:grid;grid-template-columns:2fr 1fr 1fr;gap:42px;padding:30px 4px 4px}.project-details p{margin:0;color:#a7b1bf}.project-details .project-summary>p:last-child{color:#fff;font-size:18px;max-width:580px}.label{color:#5acbf6!important;margin-bottom:10px!important}.experience{padding:120px 0}.experience .section-heading>p{color:var(--muted)}.timeline{border-top:1px solid var(--line)}.timeline article{display:grid;grid-template-columns:.55fr 1fr 1.4fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}.timeline time,.timeline article>p,.timeline div p{color:var(--muted)}.timeline h3{font:700 19px/1.3 Manrope,sans-serif;margin:0}.timeline p{margin:3px 0 0}.about-section{background:var(--surface);padding:120px 0}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:110px}.about-copy>p{font-size:20px;color:var(--muted);margin:0 0 24px}.skill-groups{margin-top:56px;border-top:1px solid var(--line)}.skill-groups>div{padding:20px 0;border-bottom:1px solid var(--line)}.skill-groups p{margin:0}.education{padding:110px 0}.education-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}.education article{border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--surface)}.education span{font-size:13px;color:var(--accent);font-weight:700}.education h3{font:700 20px/1.25 Manrope,sans-serif;margin:30px 0 6px}.education p{margin:0;color:var(--muted)}.contact{background:var(--dark);color:#fff;padding:110px 0}.contact-row{display:flex;align-items:end;justify-content:space-between;gap:48px}.contact h2{font-size:clamp(42px,6vw,76px)}.contact-link{font-size:18px;font-weight:700;border-bottom:1px solid #485264;padding-bottom:6px;white-space:nowrap}footer{display:flex;justify-content:space-between;gap:24px;padding:28px 0;color:var(--muted);font-size:13px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media (max-width:900px){.site-header nav{display:none}.hero{padding-top:72px}.hero-grid,.section-heading,.about-grid{grid-template-columns:1fr;gap:38px}.hero-grid{margin-bottom:64px}.hero-meta{grid-template-columns:1fr;gap:18px}.hero-meta div+div{border-left:0;padding-left:0}.project-details{grid-template-columns:1fr 1fr}.project-summary{grid-column:1/-1}.timeline article{grid-template-columns:1fr}.timeline article{gap:8px}.education-grid{grid-template-columns:1fr}.contact-row{align-items:flex-start;flex-direction:column}.contact-link{white-space:normal}}
@media (max-width:600px){.wrap,.site-header{width:min(100% - 28px,1180px)}.site-header{height:68px}.button-small{display:none}.hero{padding:58px 0 40px}.hero h1{font-size:46px}.hero-links{align-items:flex-start;flex-direction:column;gap:18px}.hero-grid{margin-bottom:54px}.work-section,.experience,.about-section{padding:80px 0}.project-card{padding:14px;border-radius:18px}.project-topline{align-items:flex-start;gap:20px}.project-card h3{font-size:24px}.segmented button{padding:7px 11px}.project-frame{height:64vw}.project-details{grid-template-columns:1fr;gap:22px;padding:24px 4px 6px}.project-summary{grid-column:auto}.about-grid{gap:30px}.education{padding:78px 0}.contact{padding:80px 0}.contact-link{font-size:16px}footer{flex-direction:column;gap:4px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}

/* Smart Extract: one desktop preview and two evenly aligned mobile previews. */
.project-card + .project-card{margin-top:32px}
.project-link{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid #665633;border-radius:4px;color:#fff;font-size:14px;font-weight:700;transition:background .2s}
.project-link:hover{background:#342d1e}
.project-link span{color:#d5ad4c}
.smart-gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.smart-gallery figure{margin:0;min-width:0}
.smart-gallery-main{overflow:hidden;border-radius:8px;background:#f5f7fa;border:1px solid #3b3425}
.smart-gallery-main img{display:block;width:100%;height:auto;object-fit:contain}
.smart-mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.smart-mobile-preview{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:20px;padding:30px 20px 24px;border:1px solid #3b3425;border-radius:8px;background:#1d1d1d;min-width:0}
.smart-mobile-preview img{display:block;width:100%;max-width:230px;height:390px;object-fit:contain;object-position:center}
.smart-mobile-preview figcaption{color:#c3c4c6;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center}
@media(max-width:600px){
 .project-topline{flex-wrap:wrap;gap:18px}
 .project-link{font-size:12px;padding:9px 12px}
 .smart-gallery,.smart-mobile-grid{gap:10px}
 .smart-mobile-preview{padding:14px 8px;gap:12px}
 .smart-mobile-preview img{height:auto;aspect-ratio:9/17;max-width:230px}
 .smart-mobile-preview figcaption{font-size:9px;letter-spacing:.04em}
}

/* Oklahoma-inspired editorial details, kept restrained for a developer portfolio. */
:root {
  --accent: #b88a24;
  --accent-soft: #f4ead2;
}

[data-theme="dark"] {
  --accent: #d5ad4c;
  --accent-soft: #332916;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: -20vw;
  right: -12vw;
  width: 58vw;
  height: 58vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 138, 36, .11), transparent 66%);
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: none;
  padding-inline: max(24px, calc((100vw - 1280px) / 2));
  border-top: 3px solid var(--accent);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand span {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 28px/1 "Cormorant Garamond", serif;
  letter-spacing: -.03em;
}

.site-header nav {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 13px;
}

.site-header nav a {
  transition: color .2s ease;
}

.site-header nav a.active {
  color: var(--accent);
}

.site-header nav a.active::after {
  right: 0;
}

.button {
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: #111;
}

.button span { color: #111; }

.theme-button {
  border-radius: 2px;
}

.hero {
  padding-top: 118px;
}

.hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: start;
}

.hero-headline {
  position: sticky;
  top: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100svh - 112px);
  padding-block: 42px;
}

.hero-headline .eyebrow {
  margin: 0 0 32px;
}

.hero-headline .hero-actions {
  margin-top: 42px;
}

.hero-rail {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.hero-portrait {
  position: relative;
  width: 100%;
  height: clamp(430px, 58vh, 560px);
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 30px;
  background: #151515;
  box-shadow: 0 28px 70px rgba(11, 18, 32, .16);
}

.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11);
  pointer-events: none;
}

.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 53% center;
  transition: transform .6s ease, filter .4s ease;
}

.hero-portrait:hover img {
  transform: scale(1.025);
  filter: saturate(.92) contrast(1.04);
}

.hero-portrait figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(16, 16, 16, .62);
  color: #f7f4ed;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero h1,
.section-heading h2,
.about-grid h2,
.contact h2 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: .94;
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(58px, 6.6vw, 92px);
}

.hero h1 em,
.contact h2 em {
  color: var(--accent);
}

.eyebrow,
.section-index,
.project-number,
.label {
  letter-spacing: .2em;
}

.hero-actions {
  padding: 0;
}

.hero-actions .hero-links {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 18px 28px;
}

.hero-actions .button {
  width: fit-content;
}

.about-grid .about-lead {
  max-width: 520px;
  margin: 54px 0 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.12;
}

.hero-meta {
  padding: 28px 0;
}

@media (min-width: 901px) {
  .hero {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100svh - 82px);
    padding: 34px 0 26px;
  }

  .hero-grid {
    min-height: 0;
    margin: 0 0 22px;
    align-items: center;
  }

  .hero-headline {
    position: static;
    min-height: 0;
    padding-block: 0;
  }

  .hero-portrait {
    height: min(52vh, 520px);
  }

  .hero-meta {
    padding: 18px 0;
  }
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: 90px;
  align-items: start;
}

.contact-copy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 38px;
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  padding: 30px;
  border: 1px solid rgba(213, 173, 76, .28);
  background: rgba(255, 255, 255, .035);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field-wide,
.contact-submit,
.form-note {
  grid-column: 1 / -1;
}

.form-field label {
  color: #d5ad4c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  border-radius: 0;
  outline: 0;
  padding: 11px 0 12px;
  background: transparent;
  color: #fff;
  font: inherit;
  resize: vertical;
  transition: border-color .2s ease, background-color .2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: #778194; }

.form-field input:focus,
.form-field textarea:focus { border-color: #d5ad4c; }

.contact-submit {
  justify-self: start;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: #d5ad4c;
  color: #111;
}

.form-note {
  margin: -8px 0 0;
  color: #8993a4;
  font-size: 12px;
}

.work-section {
  background: #151515;
  border-top: 1px solid #342d1e;
}

.project-card {
  border-color: #3b3425;
  border-radius: 2px;
  background: rgba(24, 24, 24, .82);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(213, 173, 76, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.project-card h3 {
  font: 600 44px/1 "Cormorant Garamond", serif;
}

.project-frame {
  border-radius: 2px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}

.segmented,
.segmented button,
.segmented button.active {
  border-radius: 2px;
}

.segmented button.active {
  background: var(--accent);
  color: #111;
}

.label { color: #d5ad4c !important; }

.timeline article {
  position: relative;
}

.timeline article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42px;
  height: 1px;
  background: var(--accent);
}

.education article {
  border-radius: 2px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  box-shadow: 0 18px 44px rgba(11, 18, 32, .05), inset 0 2px 0 var(--accent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact {
  border-top: 1px solid #3b3425;
  background: #151515;
}

.contact-link {
  border-color: var(--accent);
}

/* Strong contrast and quiet, intentional text interactions. */
.work-section .section-heading h2 {
  color: #f7f4ed;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}

.work-section .section-heading > p {
  color: #c8cfda;
}

.work-section .project-number {
  color: #b7bfca;
}

.section-heading h2 {
  position: relative;
  width: fit-content;
  transition: color .3s ease, transform .3s ease, text-shadow .3s ease;
}

.section-heading h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 18px;
  background: var(--accent);
  transition: width .35s ease;
}

.section-heading:hover h2 {
  transform: translateX(5px);
  text-shadow: 0 8px 28px rgba(184, 138, 36, .16);
}

.section-heading:hover h2::after {
  width: 104px;
}

.work-section .section-heading:hover h2 {
  color: #fff;
}

.hero h1 em {
  display: inline-block;
  transition: transform .3s ease, text-shadow .3s ease;
}

.hero h1:hover em {
  transform: translateY(-3px);
  text-shadow: 0 10px 32px rgba(184, 138, 36, .2);
}

.timeline h3,
.skill-groups p:last-child,
.education h3 {
  transition: color .25s ease, transform .25s ease;
}

.timeline article:hover h3,
.skill-groups > div:hover p:last-child,
.education article:hover h3 {
  color: var(--accent);
  transform: translateX(4px);
}

.education article {
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.education article:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-4px);
  box-shadow: 0 24px 52px rgba(11, 18, 32, .09), inset 0 2px 0 var(--accent);
}

.work-photos {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  margin-top: 72px;
}

.work-photos figure {
  height: 420px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 20px;
  background: var(--dark);
}

.work-photos figure:last-child {
  margin-top: 54px;
}

.work-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease, filter .35s ease;
}

.work-photos figure:first-child img { object-position: center 48%; }
.work-photos figure:last-child img { object-position: center 42%; }

.work-photos figure:hover img {
  transform: scale(1.025);
  filter: contrast(1.035) saturate(.94);
}

@media (prefers-reduced-motion: reduce) {
  .section-heading h2,
  .section-heading h2::after,
  .hero h1 em,
  .timeline h3,
  .skill-groups p:last-child,
  .education h3,
  .education article {
    transition: none;
  }
}

@media (max-width: 900px) {
  .site-header { padding-inline: 24px; }
  .hero-actions { max-width: none; }
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-headline { position: static; min-height: auto; padding-block: 0; }
  .hero-portrait { height: clamp(430px, 62vh, 560px); }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 600px) {
  .site-header { padding-inline: 14px; }
  .brand span { font-size: 24px; }
  .hero { padding-top: 70px; }
  .hero h1 { font-size: 48px; }
  .hero-portrait { height: 430px; min-height: 0; border-radius: 22px; }
  .hero-actions { padding: 0; }
  .contact-form { grid-template-columns: 1fr; padding: 22px; }
  .form-field { grid-column: 1; }
  .project-card h3 { font-size: 34px; }
  .work-photos { grid-template-columns: 1fr; gap: 14px; margin-top: 48px; }
  .work-photos figure { height: 360px; border-radius: 16px; }
  .work-photos figure:last-child { margin-top: 0; }
}

/* A compact editorial hero with aligned page gutters. */
.site-header{padding-inline:max(24px,calc((100% - 1180px)/2));gap:24px}
.hero h1{font-size:clamp(54px,5.3vw,76px);line-height:1.04;letter-spacing:-.035em;max-width:680px}
.headline-code,.hero h1 .headline-pretty{display:block}
.hero h1 .headline-pretty{margin-top:.22em;font-style:italic;color:#967019}
[data-theme="dark"] .hero h1 .headline-pretty{color:#d5ad4c}
.hero-headline .eyebrow{font-size:10px;letter-spacing:.15em;margin-bottom:26px}
.hero-headline .hero-actions{margin-top:32px}
.hero-portrait{border-radius:12px}
@media(min-width:901px){
 .hero{height:auto;min-height:calc(100svh - 82px);padding:44px 0 26px}
 .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.8fr);gap:64px;margin:0 0 40px}
 .hero-portrait{height:clamp(350px,49vh,480px)}
}
@media(max-width:900px){
 .hero{padding-top:56px}
 .hero-grid{margin-top:0;gap:38px}
 .hero h1{font-size:clamp(52px,8vw,72px)}
}
@media(max-width:600px){
 .site-header{width:100%;padding-inline:14px}
 .hero h1{font-size:clamp(40px,10.8vw,62px)}
 .hero-headline .eyebrow{font-size:9px;letter-spacing:.1em}
 .hero-actions .hero-links{gap:20px;font-size:13px}
 .hero-portrait{height:380px}
}

/* Experience accordion retains the closed-row composition. */
.timeline .experience-item{display:block;padding:0}
.timeline .experience-item::before{width:42px;transition:width .45s ease;pointer-events:none}
.timeline .experience-item.is-open::before{width:100%}
.experience-toggle{display:grid;grid-template-columns:.55fr 1fr 1.4fr;gap:40px;align-items:start;width:100%;padding:34px 0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.experience-date,.experience-summary{color:var(--muted)}
.experience-role{display:block}
.role-title{display:block;font:700 19px/1.3 Manrope,sans-serif;transition:color .25s ease}
.experience-summary{display:block;margin-top:3px}
.experience-toggle:hover .role-title,.is-open .role-title{color:var(--accent)}
.experience-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}
.experience-panel{padding:0 0 34px calc((100% - 80px)*.55/2.95 + 40px);color:var(--muted)}
.experience-panel ul{margin:0;padding-left:20px;max-width:780px}
.experience-panel li{padding-left:6px;margin:0 0 12px}
.experience-panel li:last-child{margin-bottom:0}
.experience-panel li::marker{color:var(--accent)}
@media(max-width:900px){.experience-toggle{grid-template-columns:1fr;gap:8px}.experience-panel{padding-left:0}}
@media(prefers-reduced-motion:reduce){.timeline .experience-item::before,.role-title{transition:none}}

/* Personal portfolio story. */
.portfolio-current{font-size:12px;letter-spacing:.08em;color:#d5ad4c;white-space:nowrap}
.portfolio-story{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;padding:38px;background:#20201e;border:1px solid #3b3425;border-radius:8px;align-items:center}
.portfolio-story-copy h4{margin:18px 0 26px;font:600 clamp(32px,3.2vw,46px)/1.08 "Cormorant Garamond",serif;letter-spacing:-.025em;color:#f7f4ed}
.portfolio-story-copy h4 em{color:#d5ad4c;font-weight:500}
.portfolio-story-copy>p:not(.label){margin:0 0 18px;color:#c8c9cc;line-height:1.8;font-size:15px}
.portfolio-story-copy>p:last-child{margin-bottom:0}
.portfolio-story-image{margin:0;min-width:0}
.portfolio-story-image img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px}
.portfolio-story-image figcaption{margin-top:14px;font-size:12px;line-height:1.6;color:#aaa8a1}
@media(max-width:900px){.portfolio-story{gap:28px;padding:26px;grid-template-columns:1fr}.portfolio-story-image img{aspect-ratio:16/10;object-position:center 42%}}
@media(max-width:600px){.portfolio-story{padding:20px}.portfolio-story-copy h4{font-size:34px}.portfolio-story-copy>p:not(.label){font-size:14px}}

/* Fine-pointer cursor; native text selection and touch interactions remain intact. */
.custom-cursor{display:none;position:fixed;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--accent);pointer-events:none;z-index:2147483647;opacity:0;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(255,255,255,.3);transition:background-color .15s,box-shadow .15s;contain:layout style}
@media(hover:hover) and (pointer:fine){
 html.cursor-active,html.cursor-active *{cursor:none!important}
 html.cursor-active input,html.cursor-active textarea,html.cursor-active [contenteditable="true"]{cursor:text!important}
 .custom-cursor{display:block}
 .custom-cursor.is-visible{opacity:1}
 .custom-cursor.is-inverse{background:#151515;box-shadow:0 0 0 2px #f7f4ed}
}
@media(prefers-reduced-motion:reduce){.custom-cursor{transition:none}}
@media(forced-colors:active){.custom-cursor{display:none!important}html.cursor-active,html.cursor-active *{cursor:auto!important}}

/* Explicit dark-section colours do not depend on the page theme. */
.work-section{color:#f7f4ed}
.portfolio-project{min-width:0;overflow:hidden}
.portfolio-story-copy,.portfolio-story-image{min-width:0}
.portfolio-story-copy>p{max-width:62ch}
.portfolio-story-image img{max-width:100%;height:auto}
.portfolio-project .portfolio-current{color:#d5ad4c}
section[id]{scroll-margin-top:100px}

/* The outer panel clips like a drawer; spacing stays inside its moving edge. */
.experience-panel{padding-top:0;padding-bottom:0;overflow:hidden;min-height:0}
.experience-panel ul{padding-bottom:34px}
/* A static warm wash adds depth without competing with the hero content. */
body::before{display:none}
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0 calc((1180px - 100vw)/2);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 83% 35%,rgba(184,138,36,.14),transparent 56%),radial-gradient(ellipse at 15% 88%,rgba(184,138,36,.045),transparent 52%)}
[data-theme="dark"] .hero::before{background:radial-gradient(ellipse at 83% 35%,rgba(213,173,76,.105),transparent 58%),radial-gradient(ellipse at 15% 88%,rgba(213,173,76,.035),transparent 52%)}
@media(max-width:1228px){.hero::before{inset:0 -24px}}
@media(max-width:600px){.hero::before{inset:0 -14px}}

.toddler-project{color:#f7f4ed;min-width:0}
.toddler-intro{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;padding:16px 0 30px}
.toddler-intro h4{margin:0;font:600 clamp(32px,3.6vw,48px)/1.08 "Cormorant Garamond",serif;letter-spacing:-.025em}
.toddler-intro h4 em{color:#d5ad4c}
.toddler-intro p{margin:0 0 14px;color:#c8c9cc;font-size:15px;line-height:1.8}
.toddler-intro p:last-child{margin-bottom:0}
.toddler-art-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.toddler-art-grid figure{margin:0;min-width:0}
.toddler-art-frame{height:410px;padding:18px;background:#fff;border-radius:10px;overflow:hidden;display:flex;justify-content:center}
.toddler-art-frame.toddler-letters{background:#e5f5ff}
.toddler-art-frame img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain;border-radius:6px}
.toddler-art-grid figcaption{padding-top:12px;color:#b9bec7;font-size:12px}
@media(max-width:700px){.toddler-intro{grid-template-columns:1fr;gap:20px}.toddler-art-grid{gap:12px}.toddler-art-frame{height:280px;padding:8px}.toddler-project .project-topline{flex-wrap:wrap;gap:14px}}
@media(max-width:430px){.toddler-art-grid{grid-template-columns:1fr}.toddler-art-frame{height:340px}}

.experience-project-link{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--accent);padding:5px 0}
.experience-project-link:hover{color:var(--accent)}
.experience-project-link:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.experience-project-link>span[aria-hidden]{color:var(--accent)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Give project labels room above the title on every card. */
.project-topline .project-number{margin:0 0 16px;line-height:1.5}

/* Compact Smart Extract gallery: desktop preview with mobile screens alongside. */
.smart-gallery{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:18px;align-items:start}
.smart-gallery-main{align-self:start;background:#171d25}
.smart-mobile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.smart-mobile-preview{padding:8px 6px 10px;gap:10px;background:#171d25}
.smart-mobile-preview img{width:100%;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain}
.smart-mobile-preview figcaption{font-size:9px;letter-spacing:.04em;line-height:1.5}
@media(max-width:800px){
 .smart-gallery{grid-template-columns:1fr;gap:14px}
 .smart-mobile-grid{width:min(100%,380px);justify-self:center;gap:14px}
 .smart-mobile-preview{padding:8px;gap:10px}
 .smart-mobile-preview figcaption{font-size:10px}
}

.prompt-playground{padding:80px 0 100px}
.playground-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}
.playground-heading h2{margin:0;font:600 clamp(36px,4.5vw,58px)/1.05 "Cormorant Garamond",serif;letter-spacing:-.035em}
.playground-heading>p{color:var(--muted);margin:0;font-size:14px}
.playground-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}
.prompt-choices{display:grid;gap:10px}
.prompt-choices button{display:flex;align-items:center;gap:16px;min-height:60px;width:100%;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:6px;color:var(--ink);text-align:left;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
.prompt-choices button>span:first-child{font:12px/1.2 monospace;color:var(--muted)}
.prompt-check{margin-left:auto;color:var(--accent)}
.prompt-choices button:hover,.prompt-choices button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.prompt-choices button:focus-visible,.console-footer button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.prompt-console{background:#151a23;color:#f7f4ed;border:1px solid #343a46;border-radius:10px;overflow:hidden;min-width:0}
.console-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid #343a46;font:12px/1.5 monospace;color:#bbc1cd}
.console-topline>span:first-child{display:flex;align-items:center;gap:8px}
.console-dot{width:7px;height:7px;border-radius:50%;background:#d5ad4c}
.prompt-response{padding:28px;min-height:244px}
.prompt-request{margin:0 0 22px;color:#d5ad4c;font:12px/1.6 monospace}
.prompt-response h3{font:600 30px/1.15 "Cormorant Garamond",serif;margin:0 0 14px;color:#fff}
.prompt-response>p:last-child{color:#c5cbd5;line-height:1.75;margin:0;font-size:15px}
.console-footer{padding:16px 22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #343a46;font-size:11px;color:#a9b2c1}
.console-footer button{padding:0;background:transparent;color:#d5ad4c;border:0;cursor:pointer;font-size:12px}
.prompt-unlocked{margin:0 28px 26px;padding:18px 0 0;border-top:1px solid #665633}
.prompt-unlocked p{color:#f7f4ed;font-size:14px;margin:0 0 12px}
.prompt-unlocked a{color:#d5ad4c;font-size:14px}
@media(max-width:760px){.playground-grid{grid-template-columns:1fr}.playground-heading{display:block}.playground-heading>p{margin-top:18px}.prompt-playground{padding:48px 0 70px}.prompt-response{min-height:210px;padding:22px}}
@media(prefers-reduced-motion:reduce){.prompt-choices button{transition:none}}

/* Compact project navigation, matched to the original editorial palette. */
[hidden]{display:none!important}
.project-tabs{display:flex;gap:10px;margin:0 0 38px;border-bottom:1px solid #494133;padding-bottom:16px}
.project-tabs button{display:flex;gap:12px;align-items:center;justify-content:center;padding:15px 22px;background:transparent;color:#c8c9cc;border:1px solid #494133;border-radius:5px;font:600 14px/1.4 Manrope,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.project-tabs button>span{font:11px monospace;opacity:.65}
.project-tabs button:hover{border-color:#d5ad4c;color:#fff}
.project-tabs button[aria-selected="true"]{background:#d5ad4c;border-color:#d5ad4c;color:#151515}
.project-tabs button:focus-visible,[role="tabpanel"]:focus-visible{outline:2px solid #d5ad4c;outline-offset:5px}
.work-section [role="tabpanel"]{margin-top:0;padding:36px 28px 28px;border-top:1px solid #3b3425}
.prompt-faq{max-width:900px;margin-inline:auto}
.faq-status{display:flex;justify-content:space-between;gap:15px;margin-bottom:20px;color:var(--muted);font:12px/1.5 monospace}
.faq-status>span:first-child{display:flex;align-items:center;gap:9px}
.prompt-item{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface);transition:border-color .2s}
.prompt-item:has([aria-expanded="true"]){border-color:var(--accent)}
.prompt-question{margin:0;font:inherit}
.prompt-choices .prompt-question button{border:0;border-radius:0;background:transparent;min-height:70px;font:600 15px/1.5 Manrope,sans-serif}
.prompt-choices button[aria-expanded="true"]{background:var(--accent-soft)}
.prompt-choices button:focus-visible{outline-offset:-4px}
.prompt-check{font-size:22px;font-weight:400}
.faq-answer-inner{padding:8px 56px 26px}
.faq-answer-title{font:600 29px/1.2 "Cormorant Garamond",serif;color:var(--ink);margin:12px 0}
.faq-answer-inner>p:last-child{color:var(--muted);font-size:15px;line-height:1.8;margin:0;max-width:70ch}
.faq-footer{display:flex;justify-content:space-between;gap:14px;padding:18px 0;color:var(--muted);font-size:11px}
.faq-footer button{font:inherit;color:var(--ink);border:0;border-bottom:1px solid var(--accent);background:none;cursor:pointer}
.faq-unlocked{border-top:1px solid var(--accent);padding-top:16px;font-size:14px}
.interactive-depth{transition:transform .25s ease-out;will-change:auto}
.button>span,.project-link>span,.experience-project-link>span[aria-hidden]{display:inline-block;transition:transform .2s}
.button:hover>span,.project-link:hover>span,.experience-project-link:hover>span[aria-hidden]{transform:translate(2px,-2px)}
@media(max-width:600px){.project-tabs{gap:6px;margin-bottom:28px}.project-tabs button{flex:1;min-width:0;padding:12px 7px;font-size:11px;gap:5px}.project-tabs button>span{display:none}.faq-answer-inner{padding:4px 20px 22px}.prompt-choices .prompt-question button{font-size:13px;padding:15px 14px;gap:10px}.faq-answer-title{font-size:26px}.faq-footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.interactive-depth,.project-tabs button,.button>span,.project-link>span,.experience-project-link>span[aria-hidden]{transition:none!important;transform:none!important}}

/* Pointer-driven light and magnetic controls replace repeated entrance motion. */
.reveal{transform:none;transition:opacity .5s ease}
.magnetic-control{transition:translate .18s ease-out,box-shadow .25s}
.magnetic-control:hover{box-shadow:0 8px 32px rgba(184,138,36,.18)}
.pointer-light{position:relative;isolation:isolate}
.pointer-light::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(360px circle at var(--light-x,50%) var(--light-y,50%),rgba(213,173,76,.14),transparent 72%);transition:opacity .25s}
.pointer-light.is-lit::after{opacity:1}
.fluency-wrap{margin-top:64px}
.fluency-card{display:grid;grid-template-columns:160px 1fr;gap:36px;padding:44px;background:#191a1c;border:1px solid #4c4331;border-radius:12px;color:#f7f4ed;overflow:hidden}
.fluency-mark{width:140px;height:140px;border:1px solid #76613b;border-radius:50%;display:grid;place-items:center;position:relative;font:italic 66px/1 "Cormorant Garamond",serif;color:#d5ad4c;align-self:center;transition:rotate .4s}
.fluency-mark span{position:absolute;right:4px;top:0;font:28px/1 sans-serif;background:#191a1c;padding:6px}
.fluency-card:hover .fluency-mark{rotate:-8deg}
.fluency-copy .section-index{margin:0 0 18px;color:#d5ad4c;font-size:10px}
.fluency-copy h3{font:500 clamp(28px,3vw,41px)/1.2 "Cormorant Garamond",serif;letter-spacing:-.015em;margin:0;color:#f7f4ed}
.fluency-copy h3 em{color:#d5ad4c}
.fluency-aside{color:#aaa9a4;font-size:13px;margin:17px 0 24px}
.fluency-toggle{color:#f7f4ed;background:none;border:0;border-bottom:1px solid #9d7c35;padding:6px 0;font-size:12px;cursor:pointer;min-height:40px}
.fluency-toggle span{display:inline-block;color:#d5ad4c;margin-left:12px;transition:rotate .3s}
.fluency-toggle[aria-expanded="true"] span{rotate:90deg}
.fluency-toggle:focus-visible{outline:2px solid #d5ad4c;outline-offset:5px}
#fluency-translation{border-top:1px solid #494133;margin-top:22px;padding-top:18px;max-width:60ch}
#fluency-translation p{font-size:15px;line-height:1.8;color:#deded8;margin:0 0 12px}
#fluency-translation>span{font-size:11px;color:#d5ad4c}
@media(max-width:600px){.fluency-wrap{margin-top:40px}.fluency-card{grid-template-columns:1fr;padding:26px;gap:25px}.fluency-mark{width:76px;height:76px;font-size:39px}.fluency-mark span{font-size:19px;right:-5px;padding:3px}.fluency-copy h3{font-size:31px}.headline-play{padding-right:17px}.headline-scramble{right:17px}.headline-spark{font-size:15px}}
@media(prefers-reduced-motion:reduce){.magnetic-control{translate:none!important}.fluency-mark,.headline-spark,.fluency-toggle span{transition:none;rotate:none!important}.pointer-light::after{display:none}}

/* Restore real breathing room inside every tab panel. */
@media(max-width:600px){.work-section [role="tabpanel"]{padding:26px 18px 20px}}
/* A distinct, one-time hero sequence; layout stays fixed throughout. */
.hero-word-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em;perspective:700px}
.hero-word{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.headline-pretty{position:relative;width:fit-content;padding-bottom:.12em}
.headline-pretty::after{content:"";position:absolute;left:0;bottom:0;width:calc(100% - 22px);height:2px;background:linear-gradient(90deg,var(--accent),#edce7c,transparent);transform-origin:left}
.hero-replay{display:inline-flex;align-items:center;gap:8px;padding:6px 0;background:none;border:0;color:var(--muted);font-size:11px;cursor:pointer;min-height:32px}
.hero-replay span{font-size:20px;color:var(--accent)}
.hero-replay:hover{color:var(--ink)}
.hero-replay:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
@media(prefers-reduced-motion:no-preference){
 .hero-intro-playing .hero-word{animation:hero-word-in .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.08s + var(--word)*.09s)}
 .hero-intro-playing .headline-pretty{animation:hero-gold-in .95s cubic-bezier(.2,1,.3,1) .65s both}
 .hero-intro-playing .headline-pretty::after{animation:hero-underline .75s cubic-bezier(.2,1,.3,1) 1.2s both}
 .hero-intro-playing .hero-rail{animation:hero-photo-wipe 1.2s cubic-bezier(.16,1,.3,1) .22s both}
 .hero-intro-playing .hero-portrait img{animation:hero-photo-focus 1.6s cubic-bezier(.16,1,.3,1) .22s both}
 .hero-intro-playing .hero-portrait figcaption{animation:hero-caption-in .6s ease-out 1.05s both}
 .hero-intro-playing .hero-actions{animation:hero-controls-in .55s ease-out 1.05s both}
 .hero-intro-playing .hero-meta{animation:hero-controls-in .55s ease-out 1.2s both}
}
@keyframes hero-word-in{from{transform:translateY(115%) rotateX(-65deg) rotateZ(4deg);opacity:0}to{transform:translateY(0) rotateX(0) rotateZ(0);opacity:1}}
@keyframes hero-gold-in{0%{clip-path:inset(0 100% 0 0);opacity:.3;filter:blur(5px)}100%{clip-path:inset(0 -3% -15% 0);opacity:1;filter:blur(0)}}
@keyframes hero-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hero-photo-wipe{from{clip-path:inset(0 0 100% 0 round 12px);transform:perspective(1100px) rotateY(-12deg) scale(.94)}to{clip-path:inset(-15% -15% -15% -15% round 12px);transform:perspective(1100px) rotateY(0) scale(1)}}
@keyframes hero-photo-focus{from{transform:scale(1.18);filter:saturate(.25)}to{transform:scale(1);filter:saturate(1)}}
@keyframes hero-caption-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes hero-controls-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-replay{display:none}.hero-word,.hero-rail,.headline-pretty,.hero-portrait img,.hero-portrait figcaption,.hero-actions,.hero-meta{animation:none!important}.headline-pretty::after{animation:none!important}}

.hero.pointer-light::after{inset:0 -12px;background:radial-gradient(420px circle at var(--light-x,50%) var(--light-y,50%),rgba(213,173,76,.12),transparent 72%)}

.hero h1 .headline-pretty{max-width:100%;overflow-wrap:normal;position:relative;line-height:1.08}.hero-headline .hero-actions{margin-top:36px}

/* Difference blending inverts the pixels beneath the cursor, including glyphs. */
.custom-cursor,.custom-cursor.is-inverse{
 width:24px;height:24px;background:#fff;border:1px solid #fff;
 mix-blend-mode:difference;box-shadow:none;isolation:auto;
 transition:width .18s ease,height .18s ease;
}
@media(prefers-reduced-motion:reduce){.custom-cursor{transition:none}}

/* Controls stay anchored on hover; colour and border feedback remain. */
a.button,button,.magnetic-control{translate:none!important;transform:none!important}
.button:hover>span,.project-link:hover>span,.experience-project-link:hover>span[aria-hidden]{transform:none}

/* An explicit disclosure cue without changing the experience layout. */
.experience-toggle{position:relative;padding-right:38px}
.experience-chevron{position:absolute;right:4px;top:36px;color:var(--accent);display:grid;place-items:center;width:24px;height:24px;transition:rotate .25s ease}
.experience-toggle[aria-expanded="true"] .experience-chevron{rotate:180deg}
@media(prefers-reduced-motion:reduce){.experience-chevron{transition:none}}