/* Measured from christinewu.io (Carbonmade, colorScheme=superLight, fontScheme=sans, siteWidth=narrow) */
:root {
  --ink: #333;
  --ink-50: rgba(51, 51, 51, 0.5);
  --ink-30: rgba(51, 51, 51, 0.3);
  --rule: rgba(51, 51, 51, 0.12);
  --accent: #bc7d41;  /* tile orange, sampled from the About photo */
  --green: #2e4b48;   /* tile green, sampled from the About photo */
  --band: #f8f8f8;
  --field: #fafafa;
  --sans: "Karla", helvetica, arial, sans-serif;
  --serif: "Merriweather", Georgia, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; font-weight: 400; }

/* Menu toggle + overlay */
.nav-toggle {
  position: fixed; top: 32px; left: 32px; z-index: 30;
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink);
}
.has-cover .nav-toggle { color: #fff; }
.nav-toggle span { position: absolute; left: 3px; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .3s, top .3s; }
.nav-toggle span:nth-child(1) { top: 6px; }
.nav-toggle span:nth-child(2) { top: 13px; }
.nav-toggle span:nth-child(3) { top: 20px; }
.nav-open .nav-toggle { color: #fff; }
.nav-open .nav-toggle span:nth-child(1) { top: 13px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 13px; transform: rotate(-45deg); }

.nav-list {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(46, 75, 72, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding-top: 32px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.nav-open .nav-list { opacity: 1; visibility: visible; }
.nav-list a { color: #fff; font-size: 24px; line-height: 28.8px; border-bottom: 1px solid transparent; }
.nav-list a:hover, .nav-list a[aria-current="page"] { border-bottom-color: var(--accent); }

/* Cover (About, Contact, Project) */
.cover {
  position: relative; color: #fff; text-align: center;
  background: #7a7a7a center / cover no-repeat;
}
.cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(42, 42, 42, 0.5), rgba(42, 42, 42, 0.7)); }
.cover-content { position: relative; padding: 72px 16px; }
.cover h1 { font: 700 32px/32px var(--sans); }
.cover h1.serif { font: 900 32px/1.25 var(--serif); }
/* Close X — Carbonmade .coverDivider: circle draws in and the X turns half a turn on hover */
.cover-divider { display: block; width: 42px; height: 42px; margin: 33px auto 37px; stroke: #fff; }
.cover-divider svg { display: block; width: 42px; height: 42px; transform: rotate(-90deg); opacity: 0.5; transition: opacity .5s ease; }
.cover-divider.opaque svg, .cover-divider:hover svg, .cover-divider:focus-visible svg { opacity: 1; }
.cover-divider .circle, .cover-divider .x { stroke-width: 1; fill: none; }
.cover-divider .circle { stroke-dasharray: 116; stroke-dashoffset: 116; transition: stroke-dashoffset .8s ease; }
.cover-divider:hover .circle, .cover-divider:focus-visible .circle { stroke-dashoffset: 0; }
.cover-divider .x { transform-origin: 21px 21px; transition: transform .8s ease; }
.cover-divider:hover .x, .cover-divider:focus-visible .x { transform: rotate(180deg); }

/* Closing the page: the cover folds up and the content drops away before leaving for Work */
body.closing .cover { transform: translateY(-100%); transition: transform .5s cubic-bezier(.6, 0, .4, 1); }
body.closing main > :not(.cover), body.closing .social, body.closing .site-foot { opacity: 0; transform: translateY(40px); transition: opacity .35s ease, transform .35s ease; }
body.closing .cover-divider .x { transform: rotate(270deg); }
@media (prefers-reduced-motion: reduce) { body.closing * { transition: none !important; } }
.cover .details { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.cover .details .pin { display: inline-flex; align-items: center; gap: 6px; }
.cover .resume {
  display: inline-block; margin-top: 37px; padding: 0 12px 12px;
  font-size: 12px; line-height: 19.2px; letter-spacing: 2px; text-transform: uppercase;
}
.cover .resume:hover { text-decoration: underline; text-underline-offset: 6px; }
.cover .status { display: inline-block; margin: 16px 0 32px; padding: 0 4px 8px; border-bottom: 1px solid #fff; }
.cover .summary { max-width: 560px; margin: 0 auto; }
.cover .facts { list-style: none; max-width: 560px; margin: 32px auto 0; padding: 0; }
.cover .facts span { color: rgba(255, 255, 255, 0.5); margin-right: 8px; }
.about-cover { min-height: 560px; }

/* Home */
.home-head { text-align: center; padding: 72px 16px 88px; }
/* Logo from the Squarespace site: the Y mark + bold site title (#siteTitle: 700, .55px, #000) */
.logo { display: flex; justify-content: center; align-items: center; gap: 14px; height: 40px; font: 700 34px/40px var(--sans); letter-spacing: .55px; color: #000; }
.logo-mark { width: 40px; height: 40px; }
.tagline { font-size: 16px; line-height: 20.8px; padding-top: 13px; }
.grid { width: 960px; max-width: calc(100% - 32px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: #e9e9e9 center / cover no-repeat; overflow: hidden; }
.thumb-content {
  position: absolute; inset: 0; background: rgba(188, 125, 65, 0.92); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 47px; padding: 24px 24px 34px;
  opacity: 0; transition: opacity .5s linear;
}
.thumb:hover .thumb-content, .thumb:focus-visible .thumb-content { opacity: 1; }
.thumb-title { font-size: 18px; line-height: 28.8px; text-align: center; }
.thumb-link { font-size: 10.4px; line-height: 16.64px; letter-spacing: 2px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; }

/* Text column + label blocks (About, Contact) */
.col { width: 768px; max-width: calc(100% - 32px); margin: 0 auto; }
.lead { padding-top: 128px; font-size: 20.8px; line-height: 33.28px; letter-spacing: -0.208px; }
.block { margin: 128px auto; padding-left: 160px; }
.block h4 { float: left; margin: 0 0 16px -160px; color: var(--ink-50); }
.block::after { content: ""; display: block; clear: both; }
.line-item { margin-bottom: 16px; }
.line-item:last-child { margin-bottom: 0; }
.line-item .title { display: block; }
.line-item strong { font-weight: 700; }
.line-item em { font-style: italic; }
.line-item .dates { font-style: italic; }
.line-item .description { color: var(--ink-50); }
.list .item { display: block; }

.social { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 24px 0; display: flex; justify-content: center; }
.social a { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; margin: 9px 0; }
.social svg { width: 14px; height: 14px; }

.u-link { border-bottom: 1px solid var(--ink-30); }
.u-link:hover { border-bottom-color: var(--ink); }
.contact-rows { margin: 86px auto 0; }
.contact-rows .row { display: flex; align-items: baseline; margin-bottom: 32px; }
.contact-rows h4 { width: 160px; flex: none; color: var(--ink-50); }

/* Contact form band */
.band { background: var(--band); padding: 96px 0 220px; }
.recipient { padding: 16px; }
.field { display: block; margin-top: 32px; }
.field input, .field textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink-30); border-radius: 0;
  background: var(--field); color: var(--ink); font: 20.8px/1.6 var(--sans); padding: 12px 16px;
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(51, 51, 51, 0.3); }
.field input:focus, .field textarea:focus { border-bottom-color: var(--ink); }
.field textarea { height: 240px; resize: vertical; display: block; }
.submit { margin-top: 32px; width: 155px; height: 48px; border: 0; background: var(--accent); color: #fff; font: 16px var(--sans); cursor: pointer; }
.submit:disabled { opacity: 0.5; cursor: default; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Project */
.project { width: 640px; max-width: calc(100% - 32px); margin: 0 auto; padding-top: 96px; }
.project h3 { font-size: 20px; line-height: 32px; text-align: center; margin: 32px 0; }
.project h3:first-child { margin-top: 0; }
.project p { margin-bottom: 16px; }
.project b { font-weight: 700; }
.figure { display: block; width: 960px; max-width: calc(100% - 32px); margin: 64px auto; }
.figure .img { aspect-ratio: 16 / 7; background: #e9e9e9; border: 1px solid #ccc; }
.figure figcaption { margin-top: 19px; font-size: 12.8px; line-height: 20.48px; color: var(--ink-50); text-align: center; }
.next-project { text-align: center; padding: 64px 16px 0; }
.next-project a { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

/* Footer */
.site-foot { text-align: center; font-size: 13.6px; line-height: 14.96px; padding: 128px 16px 33px; }
.social + .site-foot { padding-top: 136px; }

@media (max-width: 767px) {
  .nav-toggle { top: 16px; left: 16px; }
  .grid { grid-template-columns: 1fr; gap: 24px; }
  .block { padding-left: 0; margin: 80px auto; }
  .block h4 { float: none; margin: 0 0 16px; }
  .lead { padding-top: 80px; }
  .contact-rows .row { flex-direction: column; }
}
.line-item .sep { margin: 0 8px; font-style: normal; }
.lead-next { padding-top: 16px; }

.line-item .proj { display: block; color: var(--ink); margin-top: 12px; }
.line-item .proj:first-child { margin-top: 8px; }
.line-item .proj-note { display: block; margin-top: 12px; }
.line-item .pt { display: block; }

/* Case-study body: lists and real figures */
.project ul, .project ol { margin: 0 0 16px; padding-left: 20px; }
.project li { margin-bottom: 8px; }
.project li ul { margin: 8px 0 0; }
.project + .project { padding-top: 0; }
.figure img { width: 100%; height: auto; }
.figure.pair .pair-imgs { display: flex; justify-content: center; align-items: flex-start; gap: 40px; }
.figure.pair img { width: auto; max-width: calc(50% - 20px); max-height: 720px; }
.figure + .project { padding-top: 0; }

/* Case-study pieces: narrow/medium figures, tile rows, persona */
.figure.narrow img { width: 300px; margin: 0 auto; }
.figure.medium img { width: 640px; max-width: 100%; margin: 0 auto; }
.tiles { width: 960px; max-width: calc(100% - 32px); margin: 64px auto; display: grid; gap: 40px; justify-content: center; }
.tiles-1 { grid-template-columns: minmax(0, 180px); }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 240px)); }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
.tile { text-align: center; }
.tile img { width: 100%; height: auto; margin: 0 auto 16px; }
.tiles.icons .tile img { width: 120px; }
.tiles.screens .tile img { width: 220px; }
.tile strong { display: block; font-weight: 700; }
.tile p { margin: 4px 0 0; color: var(--ink-50); }
.persona { display: flex; gap: 32px; align-items: flex-start; }
.persona img { width: 120px; flex: none; }
.persona strong { display: block; font-size: 20px; line-height: 32px; margin-bottom: 8px; }
.persona ul { margin: 0; }
.project .note { color: var(--ink-50); }
@media (max-width: 767px) {
  .tiles-3, .tiles-6 { grid-template-columns: 1fr 1fr; gap: 24px; }
  .persona { flex-direction: column; }
}
.figure.small img { width: 400px; max-width: 100%; margin: 0 auto; }

/* Case-study rows: the old portfolio's 12-column block layout, at the 960px figure width */
.case .row { width: 960px; max-width: calc(100% - 32px); margin: 64px auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; align-items: start; }
.case .project + .row, .case .row + .project { margin-top: 64px; }
.case .row + .project { padding-top: 0; }
.cell figure { margin: 0; }
.cell figure + figure { margin-top: 40px; }
.cell img { display: block; width: 100%; height: auto; }
.cell figcaption { margin-top: 12px; font-size: 12.8px; line-height: 20.48px; color: var(--ink-50); text-align: center; }
.cell.long-cap figcaption { max-width: 640px; margin: 24px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink); text-align: left; }
.cell.long-cap figcaption b { font-weight: 700; }
.cell.icon img { width: auto; max-width: 160px; margin: 0 auto; }
.cell.icon figcaption, .cell.screen figcaption { font-size: 16px; line-height: 1.6; color: var(--ink); }
.cell.icon figcaption b, .cell.screen figcaption b { font-weight: 700; }
.cell.drop { margin-top: 140px; }
.cell.text h3 { font-size: 20px; line-height: 32px; margin: 0 0 24px; }
.cell.text p { margin: 0 0 16px; }
.cell.text b { font-weight: 700; }
.cell.text ul, .cell.text ol { margin: 0 0 16px; padding-left: 20px; }
.cell.text li { margin-bottom: 8px; }
.cell.text figure { margin-top: 32px; }
.row.six { column-gap: 20px; }
@media (max-width: 767px) {
  .case .row { grid-template-columns: 1fr; margin: 40px auto; }
  .case .cell { grid-column: 1 / -1 !important; }
  .cell.drop { margin-top: 0; }
  .case .row.six { grid-template-columns: 1fr 1fr; }
  .case .row.six .cell { grid-column: auto !important; }
}
.cell.fit img { width: auto; max-width: 100%; max-height: 720px; margin: 0 auto; }

/* ---------- Two-column layout: cover on the left (sticky), content on the right ---------- */
.side-social { position: relative; display: flex; justify-content: center; padding: 0 0 40px; }
.side-social a { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; }
.side-social svg { width: 14px; height: 14px; }

@media (min-width: 1024px) {
  .split { display: flex; align-items: flex-start; }
  .split-side {
    position: sticky; top: 0; flex: none; width: 40%; height: 100vh; min-height: 0 !important;
    display: flex; flex-direction: column; justify-content: center; overflow: hidden;
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
  }
  .split-side .cover-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 72px 32px; }
  .split-side .side-social { flex: none; }
  .split-main { flex: 1; min-width: 0; }

  /* About: the portrait fits the tall column as it is */
  .split-side.about-cover { background-image: url(cover-about-portrait.jpg) !important; background-position: 68% 30% !important; }

  /* right column: text and rows keep their measures but never touch the column edge */
  .split-main .col { max-width: calc(100% - 96px); }
  .split-main .lead { padding-top: 120px; }
  .split-main .lead.lead-next { padding-top: 16px; }
  .split-main article.case > .row:first-child { margin-top: 120px; }
  .split-main .block:last-child { margin-bottom: 0; }
  .split-main .project, .split-main .case .row, .split-main .figure { max-width: calc(100% - 96px); }
  .split-main article.case > .project:first-child { padding-top: 120px; }
  .split-main .site-foot { padding-top: 120px; }

  /* Work pages: once the reader scrolls, the cover column narrows and the content widens */
  .shrink.scrolled .split-side { width: 24%; }
  .split-side .summary, .split-side .facts { max-height: 480px; transition: opacity .3s ease, max-height .6s ease, margin .6s ease; }
  .shrink.scrolled .split-side .summary, .shrink.scrolled .split-side .facts { opacity: 0; max-height: 0; margin: 0; overflow: hidden; }
  .split-side h1.serif { transition: font-size .6s ease; }
  .shrink.scrolled .split-side h1.serif { font-size: 26px; }

  /* close: the column slides away to the left, content fades */
  body.closing .split-side { transform: translateX(-100%); transition: transform .5s cubic-bezier(.6, 0, .4, 1); }
  body.closing .split-main { opacity: 0; transform: translateY(40px); transition: opacity .35s ease, transform .35s ease; }
}
@media (max-width: 1023px) {
  .side-social { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: 24px; }
}

/* Work home: the name and tagline take the left column on a quiet band; the grid fills the right */
.light-side { background: var(--band); color: var(--ink); }
.light-side::before { display: none; }
.light-side .cover-content { padding: 72px 16px 88px; }
.light-side .cover-divider { stroke: var(--ink); }
.light-side .tagline { transition: opacity .3s ease; }
@media (min-width: 1024px) {
  .split-main > .grid { margin-top: 120px; max-width: calc(100% - 96px); }
  .shrink.scrolled .light-side .tagline { opacity: 0; }
  .light-side .logo { flex-wrap: wrap; height: auto; row-gap: 8px; }
}
@media (min-width: 1024px) {
  .split-main { min-height: 100vh; display: flex; flex-direction: column; }
  .split-main > .site-foot { margin-top: auto; }
}
@media (max-width: 1023px) { .split-main > .grid { margin-top: 24px; } }
.light-side .tagline { margin-top: 24px; }

/* Contact: address block in the left column, the form alone on the right */
.side-contact { margin: 0; display: grid; gap: 4px; }
.side-contact dt { color: var(--ink-50); }
.side-contact dt + dd + dt { margin-top: 20px; }
.side-contact dd { margin: 0; }
.split-main .band { background: none; padding: 0 0 120px; }
@media (min-width: 1024px) { .split-main .contact-form { margin-top: 120px; } }
@media (max-width: 1023px) { .split-main .contact-form { margin-top: 40px; } }
.light-side .facts span { color: var(--ink-50); }
.cell.native img { width: auto; max-width: 100%; margin: 0 auto; }
.project blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 2px solid var(--accent); }
.project code { font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--band); padding: 1px 6px; border-radius: 4px; }
/* Work home: the Previous group, and its mark on the project page */
.grid-label { width: 960px; max-width: calc(100% - 32px); margin: 96px auto 24px; font-size: 16px; color: var(--ink-50); }
@media (min-width: 1024px) { .split-main > .grid-label { max-width: calc(100% - 96px); } }
.eyebrow { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-50); margin-bottom: 16px; }
.callout { background: #f6fff6; padding: 96px 48px; text-align: center; font-size: 20.8px; line-height: 1.6; }
.cell.side-facts p { color: var(--ink); }
.project .dots { text-align: center; color: var(--ink-50); letter-spacing: 4px; }
.split-main > .grid-label + .grid { margin-top: 0; }
/* Reserved slot: shown, not clickable, until the project page exists */
.thumb.reserved { background: var(--band); display: flex; align-items: center; justify-content: center; text-align: center; cursor: default; }
.reserved-content { padding: 24px; }
.reserved-content .thumb-title { color: var(--ink); font-weight: 700; }
.reserved-content p { margin-top: 8px; color: var(--ink-50); }
.thumb.reserved { cursor: pointer; }

/* Process figure — phases left to right, one dot per milestone (after Christine Wu's) */
.process { width: 960px; max-width: calc(100% - 32px); margin: 48px auto 64px; }
@media (min-width: 1024px) { .split-main .process { max-width: calc(100% - 96px); } }
.process .phases { display: flex; }
.process .phase { flex: var(--n) 1 0; min-width: 0; border-left: 1px solid var(--rule); padding: 0 0 24px; }
.process h4 { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-50); padding: 0 12px; margin-bottom: 16px; }
.process .steps { display: flex; }
.process .step { flex: 1 1 0; min-width: 0; position: relative; padding: 0 12px; }
.process .dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); position: relative; z-index: 1; margin-bottom: 12px; }
/* the line runs from each dot to the next one */
.process .step::before { content: ""; position: absolute; top: 5.5px; left: 18px; right: -18px; height: 1px; background: var(--accent); }
.process .phase:has(+ .phase .step) .step:last-child::before, .process .step:not(:last-child)::before { right: -18px; }
.process .phase:not(:has(~ .phase .step)) .step:last-child::before { display: none; }
.process .step b { display: block; font-size: 13px; font-weight: 700; }
.process .step p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-50); }
.process .time { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-50); margin-top: 8px; }
@media (max-width: 767px) {
  .process .phases, .process .steps { flex-direction: column; }
  .process .phase { padding-bottom: 16px; }
  .process .step { margin-bottom: 12px; }
  .process .step::before { display: none; }
}
.thumb.reserved.empty { cursor: default; }
.split-main > .grid-label:first-child { margin-top: 120px; }
.grid-label:first-of-type { margin-top: 120px; }
/* Work home: cards sit edge to edge, across and down */
.split-main > .grid { gap: 0; }
/* two lanes on one set of phases: the first version, and its iteration underneath */
.process.lanes .lane { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); font-weight: 700; margin: 0 0 12px; }
.process.lanes .phases + .lane { margin-top: 8px; padding-top: 24px; }
.process .step.gap::before { left: -12px; }

/* Chapters: a band opens each one; the left column lists them and marks the one being read */
.chapter { width: 960px; max-width: calc(100% - 32px); margin: 120px auto 64px; padding: 56px 48px; background: var(--band); border-left: 4px solid var(--accent); scroll-margin-top: 24px; }
@media (min-width: 1024px) { .split-main .chapter { max-width: calc(100% - 96px); } }
.case > .chapter:first-child { margin-top: 120px; }
.chapter-no { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
.chapter-title { font: 900 32px/1.25 var(--serif); margin-bottom: 12px; }
.chapter-line { font-size: 18px; line-height: 1.6; max-width: 640px; }
.chapter-facts { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.chapter-facts span { color: var(--ink-50); margin-right: 8px; }
.chapter + .project { padding-top: 0; }

.chapter-nav { list-style: none; margin: 40px auto 0; padding: 0; text-align: left; display: inline-grid; gap: 10px; }
.chapter-nav a { display: flex; gap: 12px; align-items: baseline; color: var(--ink-50); transition: color .3s; }
.chapter-nav a span { font-size: 12px; font-weight: 700; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; display: inline-grid; place-items: center; flex: none; }
.chapter-nav a:hover, .chapter-nav a.on { color: var(--ink); }
.chapter-nav a.on span { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 1023px) { .chapter-nav { display: none; } .chapter { padding: 40px 24px; } }
html { scroll-behavior: smooth; }
#process { scroll-margin-top: 140px; }
.light-side .facts a.u-link { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* NCS feature tour: problem → solution beside the key screen, the rest as tiles */
.tour-head { scroll-margin-top: 24px; }
.tour-head h3 { margin-top: 96px; }
.ps-row { align-items: center; }
.cell.ps .ps-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.cell.ps .ps-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 16px 0 4px; }
.cell.ps .ps-label:first-of-type { margin-top: 0; }
.cell.ps p { font-size: 15px; line-height: 1.6; }
.cell.fit.tall img { max-height: 560px; }
.cell figure img { border: 1px solid var(--rule); }
.row.tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
.tile-fig { margin: 0; }
.tile-fig img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 1px solid var(--rule); display: block; }
.tile-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-50); text-align: left; }
.tile-fig figcaption b { color: var(--ink); }
@media (max-width: 767px) { .row.tile-grid { grid-template-columns: 1fr 1fr; } }
.thumb-content { gap: 20px; padding: 32px 40px; }
.thumb-brief { max-width: 320px; font-size: 15px; line-height: 1.55; text-align: center; color: rgba(255, 255, 255, 0.92); }
.thumb { box-shadow: inset 0 0 0 1px var(--rule); background-color: #fafafa; }

/* Process figure, after Christine Wu's: phases are full-height columns, one coloured line per lane */
.pp { width: 960px; max-width: calc(100% - 32px); margin: 48px auto 64px; }
@media (min-width: 1024px) { .split-main .pp { max-width: calc(100% - 96px); } }
.pp-scroll { overflow-x: auto; }
.pp-grid { display: grid; min-width: 720px; column-gap: 0; row-gap: 28px; position: relative; }
.pp-phase { grid-row: 1 / -1; border-left: 1px solid var(--rule); margin-bottom: -8px; }
.pp-head { grid-row: 1; font-size: 15px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-50); padding: 0 12px 4px; }
.pp-line { align-self: start; height: 3px; margin-top: 7px; background: var(--c); margin-left: 18px; margin-right: calc(100% / 999); position: relative; }
.pp-step { align-self: start; position: relative; padding: 0 12px; }
.pp-dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--c); position: relative; z-index: 1; margin-bottom: 12px; }
.pp-step p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-50); }
.pp-step p b { color: var(--ink); font-weight: 700; }
.pp-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-top: 20px; font-size: 12px; color: var(--ink-50); }
.pp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.pp-time { letter-spacing: 1px; text-transform: uppercase; }
#process { scroll-margin-top: 140px; }
.pp-step.pp-link::after { content: ""; position: absolute; top: 6.5px; left: 20px; height: 3px; width: calc(var(--span) * 100%); background: var(--c); }
.thumb { box-shadow: none; }


/* Menu open: the close sits under Work · About · Contact, not in the corner */
.nav-open .nav-toggle { opacity: 0; pointer-events: none; }
.nav-close { margin-top: 28px; width: 42px; height: 42px; padding: 0; border: 0; background: none; cursor: pointer; }
.nav-close svg { display: block; width: 42px; height: 42px; stroke: #fff; stroke-width: 1.5; fill: none; transition: transform .6s ease; }
.nav-close:hover svg, .nav-close:focus-visible svg { transform: rotate(90deg); }
/* card hover wash: the theme's deep green */
.thumb-content { background: rgba(46, 75, 72, 0.92); }
.split-main > .grid.all { gap: 4px; margin-top: 120px; }
/* Work home: a narrower name column, so each project card is larger */
@media (min-width: 1024px) {
  .split-page:not(.shrink-off) .split-side.light-side:has(.tagline) { width: 30%; }
  .shrink.scrolled .split-side.light-side:has(.tagline) { width: 24%; }
}

/* Project brief and process: set apart from the story below */
.brief { width: 960px; max-width: calc(100% - 32px); margin: 120px auto 0; padding: 48px 0; background: var(--band); border-radius: 4px; }
.brief .project { padding-top: 0; }
.brief .project h3 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-50); margin: 0 0 20px; }
.brief .project p { font-size: 18px; line-height: 1.65; }
.process-block { width: 960px; max-width: calc(100% - 32px); margin: 24px auto 0; padding: 40px 0 8px; border: 1px solid var(--rule); border-radius: 4px; }
.process-block .project { padding-top: 0; }
.process-block .project h3 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-50); margin: 0 0 12px; }
.process-block .pp { margin: 24px auto 32px; }
.process-block + * { margin-top: 120px; }
.process-block + .project, .process-block + .row { margin-top: 120px; }
@media (min-width: 1024px) {
  .split-main .brief, .split-main .process-block { max-width: calc(100% - 96px); }
  .split-main article.case > .brief:first-child, .split-main article.case > .process-block:first-child { margin-top: 120px; }
}
@media (max-width: 767px) { .brief, .process-block { padding-left: 0; padding-right: 0; } }
.process-block + .project { padding-top: 0; }

/* Iteration opener: no side bar; its colour and phases match its line on the process timeline */
.chapter { border-left: 0; padding: 56px 56px 48px; }
.chapter-no { color: var(--c); display: flex; align-items: center; gap: 10px; }
.chapter-no .it-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); display: inline-block; }
.it-strip { margin-top: 28px; max-width: 640px; }
.it-cells { display: grid; grid-template-columns: repeat(5, 1fr); }
.it-ph { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-30); padding-bottom: 10px; border-left: 1px solid var(--rule); padding-left: 8px; }
.it-ph.on { color: var(--ink-50); }
.it-track { position: relative; height: 12px; }
.it-line { position: absolute; top: 4px; height: 3px; background: var(--c); border-radius: 2px;
  left: calc(var(--s) * 20% + 8px); width: calc((var(--e) - var(--s)) * 20% + 12% ); }
.it-line::before, .it-line::after { content: ""; position: absolute; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.it-line::before { left: -2px; } .it-line::after { right: -2px; }

/* Iteration mark: number and title only, no panel */
.chapter { background: none; padding: 0; margin: 120px auto 40px; border: 0; }
.chapter-title { font-size: 28px; margin: 6px 0 0; }

/* Password gate for a private iteration */
.lock { width: 960px; max-width: calc(100% - 32px); margin: 0 auto 120px; padding: 56px 48px; background: var(--band); border-radius: 4px; text-align: center; }
@media (min-width: 1024px) { .split-main .lock { max-width: calc(100% - 96px); } }
.lock-title { font-size: 20px; font-weight: 700; }
.lock-line { color: var(--ink-50); margin-top: 8px; }
.lock-form { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.lock-form input { width: 260px; max-width: 60vw; padding: 12px 14px; font: 16px var(--sans); border: 1px solid var(--ink-30); border-radius: 4px; background: #fff; }
.lock-form input:focus { outline: none; border-color: var(--green); }
.lock-form button { padding: 12px 20px; font: 16px var(--sans); color: #fff; background: var(--green); border: 0; border-radius: 4px; cursor: pointer; }
.lock-error { color: #b42318; margin-top: 12px; }