@charset "UTF-8";
/* Khoi portfolio overrides on top of Hyperspace (HTML5 UP, CC BY 3.0).
   Layout comes from the template (sidebar, full-height sections, spotlights). This file restyles it:
   "Paper & Katana", a bright, technical light theme. Paper-white base, sumi-ink type, one vermilion accent,
   steel/graphite neutrals, hairline grids, mono micro-labels, square edges and a few diagonal cuts.
   It also carries the structural/a11y work from UIUX_NOTES.md: KPI tiles, case structure, funnel cards,
   galleries, timeline, sticky CTA, lightbox, skip link, focus, tap targets and reduced motion.
   Contrast (WCAG AA, measured): ink #0E0F11 19.2:1 on paper; graphite #2B2E33 13.6:1; steel #565C63 6.1:1 on mist;
   vermilion #D0231A 5.3:1 on paper / 4.9:1 on mist; on the ink band: #C9CDD2 / #FF4A3D >= 5.7:1. */
:root{
  color-scheme:light;
  --paper:#FFFFFF; --mist:#F3F4F6; --ink:#0E0F11; --graphite:#2B2E33; --steel:#565C63;
  --line:#DADDE1; --line-2:#C4C8CD; --grid:rgba(14,15,17,.055);
  --red:#D0231A; --red-on-ink:#FF4A3D; --on-ink:#C9CDD2;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body-font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
}

/* ---------- base: undo the template's dark palette ---------- */
html{background:var(--paper)}
body{background:var(--paper);-webkit-font-smoothing:antialiased}
body,input,select,textarea{color:var(--graphite);font-family:var(--body-font)}
h1,h2,h3,h4,h5,h6{color:var(--ink);text-wrap:balance}
strong,b{color:var(--ink)}
a{border-bottom:1px solid var(--line-2);color:inherit}
a:hover{color:var(--red);border-bottom-color:var(--red)}
.lede{max-width:48em}
h3.sub{margin:2.4em 0 .7em;font-family:var(--mono);font-size:.72em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:.8em}
h3.sub:after{content:'';flex:1 1 auto;height:1px;background:var(--line)}
::selection{background:var(--red);color:#fff}

/* section bands: paper / mist, one ink band at the end (contact + footer) */
.wrapper.style1,.wrapper.style3,.wrapper.style3-alt{background-color:var(--paper)}
.wrapper.style2{background-color:var(--mist)}
.wrapper.style1-alt{background-color:var(--ink)}
.wrapper{position:relative}
/* every band gets a thin top hairline: the page reads as one ruled sheet */
#wrapper > .wrapper + .wrapper{border-top:1px solid var(--line)}

/* ---------- display type ---------- */
h1,h2,.spotlights h3.case-title{font-family:var(--display);font-stretch:75%;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(2.1em,3.6vw,3.2em);line-height:1.02;text-transform:uppercase;margin:0 0 .55em;font-weight:900}
@media screen and (max-width:736px){h2{font-size:2.15em}}

/* mono section index above each h2; one kanji beside the heading as a faint ornament (decorative; empty alt text where supported) */
#work .work-head h2:before,#growth h2:before,#skills h2:before,#experience h2:before,#platform h2:before,#samples h2:before,#contact h2:before{
  display:flex;align-items:center;gap:.7em;font-family:var(--mono);font-stretch:100%;font-size:max(.24em,12px);font-weight:500;letter-spacing:.18em;color:var(--steel);text-transform:uppercase;margin-bottom:1.3em;line-height:1}
#work .work-head h2:before{content:"02 / 08";content:"02 / 08" / ""}
#work .work-head h2:after{content:"\5B9F\7E3E";content:"\5B9F\7E3E" / ""}
#growth h2:before{content:"03 / 08";content:"03 / 08" / ""}
#growth h2:after{content:"\9053";content:"\9053" / ""}
#experience h2:before{content:"05 / 08";content:"05 / 08" / ""}
#experience h2:after{content:"\6B74";content:"\6B74" / ""}
#platform h2:before{content:"06 / 08";content:"06 / 08" / ""}
#platform h2:after{content:"\8A08";content:"\8A08" / ""}
#samples h2:before{content:"07 / 08";content:"07 / 08" / ""}
#samples h2:after{content:"\6848";content:"\6848" / ""}
#contact h2:before{content:"08 / 08";content:"08 / 08" / "";color:var(--on-ink)}
#contact h2:after{content:"\7E01";content:"\7E01" / ""}
/* katana mark: a short red bar under each section heading (a background, so ::after is free for the kanji) */
#work .work-head h2,#growth h2,#skills h2,#experience h2,#platform h2,#samples h2,#contact h2{padding-bottom:.32em;background:linear-gradient(var(--red),var(--red)) left bottom/3.2rem 5px no-repeat}
#work .work-head h2:after,#growth h2:after,#skills h2:after,#experience h2:after,#platform h2:after,#samples h2:after,#contact h2:after{
  display:inline-block;margin-left:.4em;font-family:"Yu Gothic","Hiragino Sans","Noto Sans CJK JP","Noto Sans JP","Microsoft YaHei",sans-serif;font-weight:700;font-size:max(.44em,1.4rem);letter-spacing:.05em;color:var(--steel);opacity:.4;vertical-align:.3em;line-height:1}
#contact h2:after{color:var(--on-ink)}

/* ---------- accessibility: skip link + visible focus ---------- */
.skip-link{position:fixed;left:1em;top:-4em;z-index:10002;background:var(--ink);color:#fff!important;border:0;padding:.7em 1.2em;border-radius:0;font-weight:700;font-size:.8em}
.skip-link:focus{top:1em}
#wrapper:focus{outline:0}
a:focus-visible,button:focus-visible,.button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red)!important;outline-offset:3px}
#sidebar nav a:focus-visible{outline:2px solid var(--red)!important;outline-offset:2px}
#contact a:focus-visible,#contact .button:focus-visible,#footer a:focus-visible{outline-color:var(--red-on-ink)!important}

/* ---------- buttons: square, ink, red on hover ---------- */
input[type="submit"],input[type="reset"],input[type="button"],.button{
  font-size:max(.62em,12px);padding:0 2.6em;border-radius:0;border:1px solid var(--ink)!important;color:var(--ink)!important;background-color:transparent;font-family:var(--mono);letter-spacing:.14em;font-weight:700;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
input[type="submit"]:after,input[type="reset"]:after,input[type="button"]:after,button:after,.button:after{display:none}
.button:hover{border-color:var(--red)!important;color:var(--red)!important;background-color:transparent}
.button.primary{background-color:var(--ink);color:#fff!important;border-color:var(--ink)!important}
.button.primary:hover{background-color:var(--red);border-color:var(--red)!important;color:#fff!important}
.button.primary:before{content:'';display:inline-block;width:.55em;height:.55em;background:var(--red);margin-right:1em;vertical-align:.05em}
.button.primary:hover:before{background:#fff}

/* ---------- sidebar (desktop) / top bar (tablet) ---------- */
#sidebar{background:var(--paper);border-right:1px solid var(--line);text-align:left;padding:2.5em 2.2em .5em}
@media screen and (min-width:1281px){
  /* plain paper + hairline edge; name block, nav and CTAs stacked from the top as one unit */
  #sidebar > .inner{justify-content:flex-start;padding-top:96px}
  #sidebar:before{content:"L\00EA  Quang Kh\00F4i";content:"L\00EA  Quang Kh\00F4i" / "";position:absolute;top:30px;left:2.2rem;font-family:var(--display);font-stretch:70%;font-weight:900;font-size:26px;text-transform:uppercase;color:var(--ink);line-height:1.1}
  #sidebar:after{content:"Growth \00B7  Performance \00B7  Data";content:"Growth \00B7  Performance \00B7  Data" / "";position:absolute;top:66px;left:2.2rem;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
}
#sidebar nav ul{counter-reset:nav}
#sidebar nav > ul > li{counter-increment:nav;margin-top:.15em}
#sidebar nav a{font-family:var(--mono);font-size:max(.66em,12px);font-weight:500;letter-spacing:.14em;color:var(--steel);padding:.95em 0 .95em 1.1em;border:0}
#sidebar nav a:before{content:counter(nav,decimal-leading-zero);position:static;display:inline-block;width:2.6em;height:auto;background:none;border-radius:0;color:#8A9097;font-weight:700}
#sidebar nav a:after{background:var(--red)!important;background-image:none!important;left:0;right:auto;top:50%;bottom:auto;width:3px;height:0;max-width:none;border-radius:0;transform:translateY(-50%);transition:height .2s ease}
#sidebar nav a:hover{color:var(--ink)}
#sidebar nav a.active{color:var(--ink);font-weight:700}
#sidebar nav a.active:before{color:var(--red)}
#sidebar nav a.active:after{height:1.4em}
/* top-bar mode (737-1280px): keep all 7 labels on one line instead of clipping them */
@media screen and (max-width:1280px){
  #sidebar{border-right:0;border-bottom:1px solid var(--line);padding:0;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  #sidebar nav ul{justify-content:center}
  #sidebar nav ul li{margin:0 0 0 1.6em}
  #sidebar nav ul li:first-child{margin-left:0}
  #sidebar nav a{white-space:nowrap;padding:0;font-size:max(.6em,12px)}
  #sidebar nav a:before{width:auto;margin-right:.6em}
  #sidebar nav a:after{top:auto;bottom:0;left:0;width:100%;height:3px;max-width:0;transform:none;transition:max-width .2s ease}
  #sidebar nav a.active:after{height:3px;max-width:100%}
}
@media screen and (max-width:980px){
  #sidebar nav ul li{margin-left:1em}
  #sidebar nav a{letter-spacing:.08em}
  #sidebar nav a:before{display:none}
}

/* footer: part of the ink band */
#footer{background:var(--ink);color:var(--on-ink)}
#footer > .inner{display:flex;align-items:center;gap:1.2em;flex-wrap:wrap}
#footer > .inner .menu{color:var(--on-ink);font-family:var(--mono);font-size:max(.68em,12px);letter-spacing:.06em;margin:0}
#footer > .inner .menu li{border-left-color:rgba(255,255,255,.18)}
#footer > .inner a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
#footer > .inner a:hover{color:var(--red-on-ink);border-bottom-color:var(--red-on-ink)}

/* ---------- hanko seal (inline SVG, used twice: hero portrait + footer) ---------- */
.hanko{display:block;width:4.2em;height:4.2em;transform:rotate(-5deg)}
.hanko rect{fill:var(--red)}
.hanko rect.hk-in{fill:none;stroke:#fff;stroke-width:1.6}
.hanko text{fill:#fff;font-family:var(--display);font-stretch:75%;font-weight:900;font-size:18.5px;text-anchor:middle;letter-spacing:0}
.hanko.small{width:2.6em;height:2.6em;flex:none}

/* ---------- always-visible contact / CV ---------- */
#cta{position:fixed;z-index:10001;display:flex;gap:.5em}
#cta .button{font-size:.66em;font-weight:700;height:auto;min-height:44px;line-height:1.2;padding:1.1em 1.4em;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.1em}
#cta .button:not(.primary),#cta .button:not(.primary):hover{background:var(--paper)}
@media screen and (min-width:1281px){
  /* desktop: pinned to the bottom of the left sidebar */
  #cta{left:0;top:calc(96px + 2.5em + 22.3em);width:18em;padding:0 2.2em 0 calc(2.2em + 1.1rem);justify-content:flex-start;flex-wrap:wrap}
}
@media screen and (min-width:1281px) and (max-height:600px){#cta{display:none}}
@media screen and (max-width:1280px) and (min-width:737px){
  /* tablet: the sidebar is a top bar; CTA floats bottom-right */
  #cta{right:1.2em;bottom:1.2em;padding:.45em;border-radius:0;background:var(--paper);border:1px solid var(--ink);box-shadow:6px 6px 0 rgba(14,15,17,.12)}
}
@media screen and (max-width:736px){
  /* phone: the template hides the sidebar entirely, so a bottom bar keeps contact + CV one tap away */
  #cta{left:0;right:0;bottom:0;padding:.6em 1em calc(.6em + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--ink)}
  #cta .button{flex:1 1 0;padding:1.1em .8em}
  body{padding-bottom:4.4em}
}

/* ---------- intro (hero) ---------- */
#intro{
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:4em 4em,4em 4em;background-position:-1px -1px;background-attachment:scroll;background-repeat:repeat;overflow:hidden}
#intro > .inner{position:relative}
#intro h1{font-size:clamp(3.2em,7.4vw,6.4em);line-height:.94;margin:.05em 0 .38em;text-transform:uppercase;font-weight:900;font-stretch:68%;letter-spacing:-.005em;position:relative;padding-top:.1em;padding-bottom:.3em}
/* the one motion moment: a red slash drawn under the name (static at rest, off with reduced motion) */
#intro h1:after{content:'';position:absolute;left:0;bottom:0;width:min(100%,4.6em);height:6px;background:var(--red);transform-origin:left center;transform:skewX(-40deg);animation:katana .9s cubic-bezier(.77,0,.18,1) .35s both}
@keyframes katana{from{transform:skewX(-40deg) scaleX(0)}to{transform:skewX(-40deg) scaleX(1)}}
#intro .role{font-family:var(--mono);font-size:.72em;letter-spacing:.2em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:1.4em;display:flex;align-items:center;gap:.8em}
#intro .role:before{content:'';width:2.2em;height:2px;background:var(--red);display:inline-block}
#intro p{font-size:1.12em}
#intro .thesis{max-width:34em;color:var(--graphite);line-height:1.7}
#intro .portrait{float:right;width:min(270px,30%);aspect-ratio:3/4;border-radius:0;overflow:visible;margin:.4em 10px 2.2em 2.4em;border:0;max-width:100%;position:relative;padding:0}
#intro .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;border:1px solid var(--ink)}
/* crop marks on the portrait: technical-sheet corners */
#intro .portrait:before{content:'';position:absolute;inset:-10px;pointer-events:none;
  background:
    linear-gradient(var(--ink),var(--ink)) top left/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) top right/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/1px 14px no-repeat,
    linear-gradient(var(--ink),var(--ink)) bottom right/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/1px 14px no-repeat}
#intro .portrait .hanko{position:absolute;left:-1.5em;bottom:-1.5em;width:4.4em;height:4.4em}
#intro ul.actions{flex-wrap:wrap;row-gap:1em;margin-bottom:1.4em}
#intro .status{font-family:var(--mono);font-size:max(.72em,13px);letter-spacing:.04em;color:var(--steel);margin:0}
#intro .status:before{content:'';display:inline-block;width:.6em;height:.6em;border-radius:0;background:#1F9D55;margin-right:.7em;vertical-align:.02em}
@media screen and (max-width:736px){
  /* phones: role, name and KPIs reach the first screen; the portrait follows, smaller */
  #intro > .inner{display:flex;flex-direction:column}
  #intro .role{order:1}
  #intro h1{order:2}
  #intro .kpis{order:3;margin:.6em 0 2.4em}
  #intro .portrait{order:4;float:none;width:min(46%,190px);margin:.4em 0 2.4em 1.5em}
  #intro .thesis{order:5}
  #intro ul.actions{order:6}
  #intro .status{order:7}
  #intro p,#intro .thesis{font-size:1.02em}
  #intro h1{font-size:clamp(2.9em,15vw,4.2em);line-height:1.04}
}

/* KPI row: numbers as the hero, ruled like a data sheet */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:2.2em 0 2.4em;clear:both;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);counter-reset:kpi;background:rgba(255,255,255,.88)}
.kpi{border:0;border-left:1px solid var(--line);border-radius:0;padding:1.1em 1.2em 1.2em;background:transparent;counter-increment:kpi;position:relative;min-width:0}
.kpi:first-child{border-left:0;padding-left:0}
.kpi:before{content:"K/" counter(kpi,decimal-leading-zero);display:block;font-family:var(--mono);font-size:max(.6em,12px);letter-spacing:.14em;color:var(--steel);margin-bottom:.7em}
.kpi b{display:block;font-family:var(--display);font-stretch:70%;font-weight:900;font-size:2.7em;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;line-height:1}
.kpi:first-child b{color:var(--red)}
.kpi span{font-size:.74em;line-height:1.5;color:var(--steel);display:block;margin-top:.55em}
@media screen and (max-width:980px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){border-left:0;padding-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
}
@media screen and (max-width:480px){.kpi{padding:.9em .8em 1em}.kpi b{font-size:2.2em}}

/* ---------- case studies (spotlights) ---------- */
#work > .work-head{padding-bottom:1.6em}
#work > .work-head p{max-width:44em;margin-bottom:1em}
.spotlights{counter-reset:case}
.spotlights > section:nth-child(n),.spotlights > section:nth-of-type(even){background-color:var(--paper)}
.spotlights > section{border-top:1px solid var(--line);counter-increment:case}
.spotlights > section > .content{padding-top:3.2em;padding-bottom:2.6em}
.spotlights > section .content .inner{max-width:46em}
.case-meta{font-family:var(--mono);font-size:max(.64em,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:.9em;display:flex;align-items:center;gap:.9em;flex-wrap:wrap}
.case-meta:before{content:"CASE\00A0" counter(case,decimal-leading-zero);color:#fff;background:var(--ink);padding:.3em .6em;letter-spacing:.14em;font-weight:700}
.spotlights h3.case-title{font-size:2.1em;line-height:1.05;margin:0 0 .35em;font-weight:800}
.case-role{display:block;font-family:var(--mono);font-size:.7em;font-weight:700;letter-spacing:.06em;color:var(--red);margin-bottom:1.4em}
.case-story{margin:0 0 1.2em;padding:0}
.case-story > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:.2em 1.2em;padding:.8em 0;border-top:1px solid var(--line)}
.case-story > div:last-child{border-bottom:1px solid var(--line)}
.case-story dt{font-family:var(--mono);font-size:max(.6em,12px);letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);padding-top:.5em}
.case-story dd{margin:0;font-size:.9em;line-height:1.65;color:var(--graphite)}
/* the result row uses the full width so the number tiles sit on one line */
.case-story > div.res{grid-template-columns:1fr;gap:.7em}
.case-story > div.res dt{padding-top:0;color:var(--red)}
@media screen and (max-width:736px){.case-story > div{grid-template-columns:1fr}.case-story dt{padding-top:0}}
.spotlights > section .content ul.did{margin:0;padding-left:1.1em}
.spotlights > section .content ul.did li{padding-left:.2em}
.spotlights > section .content ul.did li::marker{color:var(--red)}
.case-nums{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;margin:.1em 0 0;border-top:2px solid var(--ink);border-left:1px solid var(--line)}
/* 12-col grid: 3 tiles = 3 x 4, 4 tiles = 4 x 3, 5 tiles = 3 x 4 + 2 x 6 (no stranded cell) */
.case-nums > div{grid-column:span 4}
.case-nums > div:first-child:nth-last-child(4),.case-nums > div:first-child:nth-last-child(4) ~ div{grid-column:span 3}
.case-nums > div:first-child:nth-last-child(5) ~ div:nth-child(n+4){grid-column:span 6}
@media screen and (max-width:736px){
  .case-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-nums > div,.case-nums > div:first-child:nth-last-child(4),.case-nums > div:first-child:nth-last-child(4) ~ div,.case-nums > div:first-child:nth-last-child(5) ~ div:nth-child(n+4){grid-column:span 1}
  .case-nums > div:last-child:nth-child(odd){grid-column:1 / -1!important}
}
.case-nums div{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:.7em .9em .65em;background:var(--paper);min-width:0}
.case-nums div b{display:block;font-family:var(--display);font-stretch:72%;font-weight:800;font-size:1.65em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em}
.case-nums div span{display:block;font-size:.74em;line-height:1.45;color:var(--steel);margin-top:.25em}
.case-tags{display:flex;flex-wrap:wrap;gap:.4em;margin:0 0 1em;padding:0;list-style:none}
.case-tags li{font-family:var(--mono);font-size:max(.58em,12px);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:0;padding:.25em .75em;line-height:1.8;color:var(--graphite)}
.case-tags li:before{content:'#';color:var(--red);margin-right:.25em}
.honest{font-size:.95em;color:var(--graphite);border-left:3px solid var(--red);padding-left:.9em;margin:0}
.spotlights > section .content ul.actions{margin-bottom:1em}
/* image column: zoom cursor + a visible "enlarge" hint */
.spotlights > section > .image{cursor:zoom-in;border-bottom:0;background-color:var(--mist)}
.spotlights > section > .image:after{content:'Enlarge \2922';position:absolute;right:.9em;top:.9em;font-family:var(--mono);font-size:max(.58em,12px);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--ink);border:0;border-radius:0;padding:.5em .9em}
.spotlights > section > .image:hover:after,.spotlights > section > .image:focus-visible:after{background:var(--red)}
/* 16:9 proposal covers: shown whole, top-aligned, ~90% of the column, with a hard ink offset shadow on grid paper.
   main.js copies the <img> into a background and hides it; for .fit the <img> itself is shown instead. */
.spotlights > section > .image.fit{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)!important;background-size:2em 2em!important;background-position:0 0!important;background-repeat:repeat!important;background-color:var(--paper);padding:2.4em 1.4em}
.spotlights > section > .image.fit img{display:block!important;width:100%;height:auto;border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.spotlights > section > .image.fit:hover img{box-shadow:8px 8px 0 var(--red)}
/* desktop: the image column is cut on a diagonal, like a blade stroke */
@media screen and (min-width:981px){
  .spotlights > section > .image{clip-path:polygon(0 0,100% 0,calc(100% - 3.5em) 100%,0 100%)}
  .spotlights > section > .image.fit{padding-right:2.6em}
}
@media screen and (max-width:980px){
  .spotlights > section > .image{height:auto!important;min-height:0!important;aspect-ratio:16/10;border-bottom:1px solid var(--line)}
  .spotlights > section > .image.tall{aspect-ratio:4/3;background-position:center 30%!important}
  .spotlights > section > .image.fit{aspect-ratio:auto;padding:1.6em 1.6em 2.2em}
}
@media screen and (max-width:736px){
  .spotlights > section > .content{padding:2em 1.25em 1.5em}
  .spotlights h3.case-title{font-size:1.75em}
}

/* ---------- growth model ---------- */
.funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:2.2em 0;border-top:2px solid var(--ink);border-left:1px solid var(--line);counter-reset:stage}
@media screen and (max-width:980px){.funnel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:736px){.funnel{grid-template-columns:1fr}}
.stage{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:1.4em 1.4em 1.3em;background:var(--paper);min-width:0;display:flex;flex-direction:column;counter-increment:stage;position:relative}
.stage:before{content:counter(stage,decimal-leading-zero);position:absolute;top:1.1em;right:1.2em;font-family:var(--mono);font-size:max(.62em,12px);font-weight:700;color:#8A9097;letter-spacing:.1em}
.stage .ico{width:40px;height:40px;border-radius:0;display:grid;place-items:center;background:transparent;border:1px solid var(--ink);margin-bottom:1em}
.stage .ico svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter}
.stage:hover .ico{background:var(--ink)}
.stage:hover .ico svg{stroke:#fff}
.stage h3{margin:.25em 0 .2em;font-size:1.05em;line-height:1.3}
.stage .tag{font-family:var(--mono);font-size:max(.6em,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700}
.stage p{font-size:.85em;margin:.6em 0 1em;color:var(--graphite)}
/* proof pinned to the bottom of each card so the numbers line up across a row */
.stage .proof{font-family:var(--mono);font-weight:700;color:var(--ink);font-size:.82em;margin-top:auto;padding-top:.8em;display:block;border-top:1px solid var(--ink);font-variant-numeric:tabular-nums}
.glossary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2em;margin:1.6em 0 0;font-size:.78em}
@media screen and (max-width:980px){.glossary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:480px){.glossary{grid-template-columns:1fr}}
.glossary div{border-top:1px solid var(--ink);padding-top:.7em}
.glossary dt{color:var(--ink);font-family:var(--mono);font-weight:700}
.glossary dd{color:var(--steel);display:block;margin:0}

/* ---------- galleries ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;margin:1.5em 0 2em}
.gallery.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery.six{grid-template-columns:repeat(6,minmax(0,1fr));gap:.8em}
@media screen and (max-width:1280px){.gallery.six{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media screen and (max-width:980px){.gallery,.gallery.four{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery.six{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:480px){.gallery,.gallery.four,.gallery.six{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}.shot span{font-size:max(.66em,12px);padding:.55em .6em}.shot .go{padding:0 .9em .7em}}
.shot{all:unset;box-sizing:border-box;display:flex;flex-direction:column;cursor:zoom-in;border:1px solid var(--line-2);border-radius:0;overflow:hidden;background:var(--paper);min-width:0;position:relative;transition:border-color .15s ease,box-shadow .15s ease}
a.shot{cursor:pointer}
.shot,button.shot{border:1px solid var(--line-2)!important;color:var(--graphite)!important}
.shot:hover,button.shot:hover{border-color:var(--ink)!important}
.shot:hover{border-color:var(--ink);box-shadow:5px 5px 0 var(--red);color:inherit}
.shot:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;max-width:100%;border-bottom:1px solid var(--line)}
.props .shot img{aspect-ratio:16/9;object-position:center}
.certs .shot img{object-fit:contain;background:#fff;aspect-ratio:4/3;object-position:center}
.shot span{display:block;font-size:.72em;line-height:1.5;padding:.7em .9em;color:var(--graphite)}
.certs .shot span{font-size:max(.64em,12px);padding:.6em .7em}
.shot .go{font-style:normal;font-family:var(--mono);font-size:max(.58em,12px);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--red);padding:0 1.1em .9em;margin-top:auto}
.shot:hover .go{color:var(--ink)}
.gallery.dash .shot:first-child{grid-column:span 2;grid-row:span 2}
.gallery.dash .shot:first-child img{aspect-ratio:auto;flex:1 1 auto;height:0;min-height:12em}
/* 8 tiles with a 2x2 lead leave one hole in the grid; the last tile fills it */
.gallery.dash .shot:last-child{grid-column:span 2}
.gallery.dash .shot:last-child img{aspect-ratio:auto;flex:1 1 auto;height:0;min-height:10em}
@media screen and (max-width:480px){.gallery.dash .shot:first-child,.gallery.dash .shot:last-child{grid-column:span 2;grid-row:auto}.gallery.dash .shot:first-child img,.gallery.dash .shot:last-child img{aspect-ratio:16/10;height:auto;flex:none;min-height:0}}
.note{font-size:.78em;color:var(--steel);font-style:normal;border-left:3px solid var(--line-2);padding-left:.9em}

/* certificates: six strongest visible, the rest behind a toggle */
details.more{margin:-.8em 0 2em}
details.more > summary{display:inline-flex;align-items:center;gap:.7em;min-height:44px;padding:0 1.2em;cursor:pointer;list-style:none;font-family:var(--mono);font-size:max(.64em,12px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);background:var(--paper)}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary:before{content:"+";color:var(--red);font-size:1.3em;line-height:1}
details.more[open] > summary:before{content:"\2212"}
details.more > summary:hover{color:var(--red);border-color:var(--red)}
details.more > summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}
details.more .gallery{margin-top:1.2em}

/* architecture strip: a mono pipeline */
.arch{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin:1.6em 0;font-family:var(--mono);font-size:max(.68em,12px);letter-spacing:.02em}
.arch span{border:1px solid var(--line-2);border-radius:0;padding:.55em .85em;background:var(--paper);color:var(--graphite)}
.arch span.hot{border-color:var(--ink);background:var(--ink);color:#fff}
.arch{gap:.5em 0}
.arch i{display:none}
.arch span{position:relative;margin-left:1.7em}
.arch span:first-of-type{margin-left:0}
.arch span:not(:first-of-type):before{content:"\2192";content:"\2192" / "";position:absolute;left:-1.35em;top:50%;transform:translateY(-50%);color:var(--red);font-weight:700}
.arch i:last-of-type + span:before{content:"+";content:"+" / ""}

/* ---------- experience ---------- */
.timeline{margin:2em 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:11em minmax(0,1fr);gap:.3em 1.5em;padding:1.1em 0;border-top:1px solid var(--line)}
.timeline li:first-child{border-top:0}
.timeline li:last-child{border-bottom:1px solid var(--line)}
@media screen and (max-width:736px){.timeline li{grid-template-columns:1fr}.timeline h3 small{display:block;margin-top:.15em}.timeline h3 small .sep{display:none}}
.timeline .when{font-family:var(--mono);font-size:.74em;font-weight:500;color:var(--ink);padding-top:.2em;font-variant-numeric:tabular-nums}
.timeline li:first-child .when{color:var(--red);font-weight:700}
.timeline h3{margin:0;font-size:1em}
.timeline h3 small{font-weight:400;color:var(--steel);font-size:.85em;letter-spacing:0}
.timeline p{margin:.3em 0 0;font-size:.86em;color:var(--graphite)}
.pill{display:inline-block;font-family:var(--mono);font-size:max(.56em,12px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--red);color:var(--red);border-radius:0;padding:0 .6em;margin-left:.6em;vertical-align:middle;line-height:1.8}
#experience ul.actions{margin-top:2em}
.chips{display:flex;flex-wrap:wrap;gap:.45em;margin:.8em 0 0;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-size:max(.66em,12px);border:1px solid var(--line-2);border-radius:0;padding:.3em .8em;color:var(--graphite);background:var(--paper)}

/* ---------- contact: the one ink band, entered on a diagonal cut ---------- */
#contact{background-color:var(--ink);color:var(--on-ink);border-top:0!important;margin-top:-3vw;padding-top:3vw;clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);z-index:1}
#contact h2,#contact h3,#contact strong,#contact b{color:#fff}
#contact .lede{color:var(--on-ink)}
#contact .button{font-size:.66em;letter-spacing:.1em;border-color:rgba(255,255,255,.7)!important;color:#fff!important;background-color:transparent}
#contact .button:hover{border-color:var(--red-on-ink)!important;color:var(--red-on-ink)!important}
#contact .button.primary{background-color:var(--red);border-color:var(--red)!important;color:#fff!important}
#contact .button.primary:before{background:#fff}
#contact .button.primary:hover{background-color:#fff;border-color:#fff!important;color:var(--ink)!important}
#contact .button.primary:hover:before{background:var(--red)}
#contact .split > *{border-color:rgba(255,255,255,.16)!important}
#contact ul.actions{flex-wrap:wrap;row-gap:1em}
ul.contact a{border-bottom-color:rgba(255,255,255,.35);color:#fff;display:inline-block;padding:.35em 0;min-height:44px;line-height:1.6;font-family:var(--mono);font-size:.95em}
ul.contact a:hover{color:var(--red-on-ink);border-bottom-color:var(--red-on-ink)}
ul.contact h3{margin-bottom:0;font-family:var(--mono);font-size:max(.64em,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink)!important;font-weight:500}
ul.contact > li{margin-top:1em;border-top-color:rgba(255,255,255,.16)}
ul.contact span{color:#fff}
#wrapper + #footer{border-top:1px solid rgba(255,255,255,.12)}

/* ---------- lightbox ---------- */
dialog#lb{border:1px solid var(--ink);padding:0;background:var(--paper);border-radius:0;max-width:min(1400px,96vw);max-height:94vh;color:var(--ink)}
dialog#lb::backdrop{background:rgba(14,15,17,.86)}
dialog#lb img{display:block;max-width:100%;max-height:84vh;margin:0 auto}
dialog#lb p{display:flex;justify-content:space-between;align-items:center;gap:1em;margin:0;padding:.4em 1em;font-family:var(--mono);font-size:.7em;color:var(--graphite);border-top:1px solid var(--line)}
dialog#lb button{border:0!important;color:var(--red)!important;all:unset;cursor:pointer;color:var(--red);font-weight:700;min-height:44px;min-width:44px;padding:0 .6em;display:inline-flex;align-items:center;justify-content:center;border-radius:0}
dialog#lb button:hover{color:var(--ink)!important}
dialog#lb button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Keep every section readable at rest (thumbnails, skimming recruiters): no hidden-until-scroll content */
.spotlights > section.inactive > .content > .inner,
body.is-preload .spotlights > section > .content > .inner,
.wrapper.fade-up.inactive > .inner,
body.is-preload .wrapper.fade-up > .inner,
.wrapper.fade-up > .inner{opacity:1!important;transform:none!important}
.spotlights > section.inactive > .image:before,
body.is-preload .spotlights > section > .image:before{opacity:0!important}
/* hero sized to content on very tall screens */
#intro.fullscreen{min-height:min(100vh,900px)!important}

/* ad-performance strips: wide screenshots (with daily trend charts) shown uncropped at full width */
.perf-title{margin:2.4em 0 .4em;font-family:var(--mono);font-size:.72em;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.8em}
.perf-title:after{content:'';flex:1 1 auto;height:1px;background:var(--line)}
.perf-title + .lede{font-size:.88em;color:var(--steel);margin-bottom:.8em}
/* one strip per row so KPI values stay legible */
.perf{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2em;margin:1em 0 1.5em}
.perf .shot img{aspect-ratio:auto;object-fit:contain;object-position:center;height:auto;width:100%;background:#fff}
.perf.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.perf.three .shot img{aspect-ratio:16/10;object-fit:cover;object-position:top left}
@media screen and (max-width:980px){.perf.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media screen and (max-width:480px){.perf.three{grid-template-columns:1fr}}
.perf .shot span{font-family:var(--mono);font-size:max(.66em,12px);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ---------- case-study carousels (replace the template's narrow image column) ---------- */
.spotlights > section{display:block!important}
.spotlights > section > .content{width:100%!important;max-width:none}
.spotlights > section > .carousel{margin:2.6em 3em 0}
@media screen and (max-width:736px){.spotlights > section > .carousel{margin:1.6em 1.25em 0}}
.carousel{position:relative;background:var(--paper);border:1px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.carousel .track{position:relative}
.carousel .slide{display:none;margin:0}
.carousel .slide.on{display:block;animation:slideIn .45s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.carousel .shot{display:block;width:100%;border:0;border-radius:0;background:#fff;padding:0;cursor:zoom-in}
.carousel .shot img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:contain;object-position:center;background:#fff;max-width:100%}
.carousel figcaption{display:flex;gap:.8em;align-items:baseline;border-top:1px solid var(--ink);padding:.75em 1em;font-family:var(--mono);font-size:max(.62em,12px);letter-spacing:.06em;color:var(--graphite);background:var(--paper);padding-right:7.5em}
.carousel figcaption b{color:var(--red);font-weight:700}
.carousel .nav{position:absolute;bottom:0;width:3.2em;height:2.9em;border:0;border-left:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font-size:.8em;line-height:1;padding:0;cursor:pointer;box-shadow:none}
.carousel .nav.prev{right:3.2em}
.carousel .nav.next{right:0}
.carousel .nav:hover,.carousel .nav:focus-visible{background:var(--ink);color:#fff}
.carousel .dots{position:absolute;top:.8em;right:.8em;display:flex;gap:.4em}
.carousel .dots button{width:1.6em;height:.35em;padding:0;border:0;border-radius:0;background:rgba(14,15,17,.22);cursor:pointer;box-shadow:none;min-height:0}
.carousel .dots button[aria-current="true"]{background:var(--red)}
.carousel.single .nav,.carousel.single .dots{display:none}
.carousel.single figcaption{padding-right:1em}
@media (prefers-reduced-motion:reduce){.carousel .slide.on{animation:none}}
/* template forces white text/transparent bg on every <button>; restore carousel controls */
.carousel .nav{color:var(--ink)!important;background-color:var(--paper)!important;box-shadow:none!important;border-left:1px solid var(--ink)!important;border-top:1px solid var(--ink)!important;font-family:var(--mono)!important;font-size:1em!important;letter-spacing:0!important;height:2.9em!important;line-height:2.9em!important;text-align:center;display:block}
.carousel .nav:hover,.carousel .nav:focus-visible{color:#fff!important;background-color:var(--ink)!important}
.carousel .dots button{height:.35em!important;line-height:0!important;box-shadow:none!important;background-color:rgba(14,15,17,.22)!important}
.carousel .dots button[aria-current="true"]{background-color:var(--red)!important}

/* ---------- skills: infinite marquee rows (duplicated list, translate -50%, edge fade, pause on hover) ---------- */
#skills h2:before{content:"04 / 08";content:"04 / 08" / ""}
#skills h2:after{content:"\6280";content:"\6280" / ""}
#skills{overflow:hidden}
.marquees{display:grid;gap:.9em;padding:0 0 4.5em}
.marquee{display:grid;grid-template-columns:11em minmax(0,1fr);align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.mq-label{font-family:var(--mono);font-size:max(.62em,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700;padding:0 1.2em 0 3em}
.mq-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee[data-dir="right"] .mq-track{animation-direction:reverse;animation-duration:40s}
.marquee:nth-child(3) .mq-track{animation-duration:34s}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
.mq-track ul{display:flex;gap:0;margin:0;padding:0;list-style:none}
.mq-track li{display:flex;align-items:baseline;gap:.55em;padding:.85em 1.6em;border-right:1px solid var(--line);font-family:var(--display);font-stretch:75%;font-weight:800;font-size:1.35em;line-height:1;color:var(--ink);white-space:nowrap;text-transform:uppercase;letter-spacing:.01em;transition:color .2s,background-color .2s}
.mq-track li i{font-style:normal;font-family:var(--mono);font-stretch:100%;font-weight:700;font-size:max(.42em,11px);color:var(--red);letter-spacing:.08em}
.mq-track li:hover{background:var(--ink);color:#fff}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media screen and (max-width:736px){.marquee{grid-template-columns:1fr}.mq-label{padding:.8em 1.25em 0}.mq-track li{font-size:1.1em;padding:.75em 1.2em}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;width:auto}.mq-track ul[aria-hidden]{display:none}.mq-track ul{flex-wrap:wrap}.mq-viewport{-webkit-mask-image:none;mask-image:none}}