:root {
  /* Reference: future-assemblies.com. Cargo rem normalized to a 12.5px base. */
  --body-size: .9375rem;
  --heading-size: 2rem;
  --small-heading-size: 1.015625rem;
  --gutter: 1.5625rem;
  --project-columns: minmax(0, 1fr) minmax(0, 24%) minmax(0, 1.8fr);
  --page-margin: 1.171875rem;
  --page-margin-x: clamp(20px, 6vw, 112px);
  --leading: 1.25;
  --ink: rgba(0, 0, 0, .85);
  --muted: rgba(0, 0, 0, .4);
  --line: rgba(0, 0, 0, .2);
  --mono: var(--font-body);
  font-family: var(--font-body);
  font-synthesis: none;
  color: var(--ink);
  background: #fff;
}
* { box-sizing: border-box; }
/* Full-bleed elements (100vw breakout) overshoot by the scrollbar's width; clip that sliver instead of showing a horizontal scrollbar. */
html { overflow-x: hidden; }
body { margin: 0; padding: 0 var(--page-margin-x); font-size: var(--body-size); line-height: var(--leading); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.skip-link { position: absolute; left: var(--page-margin-x); top: -100px; padding: 12px; background: #222; color: #fff; z-index: 10; }
/* Every page shares the project tab's content width and centering. */
.site-header, main, .site-footer, .about-toolbar { max-width: 1200px; margin-inline: auto; }
.skip-link:focus { top: 12px; }
.site-header { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; align-items: start; padding: var(--page-margin) 0; }
.brand { grid-column: span 2; display: inline-flex; align-items: center; gap: 12px; width: fit-content; font-size: var(--heading-size); font-weight: 600; line-height: 1; letter-spacing: 0; }
.brand-mark { display: flex; gap: 4px; flex-shrink: 0; }
.brand-mark i { display: block; width: 14px; height: 14px; background: currentColor; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.intro { display: grid; grid-template-columns: var(--project-columns); gap: var(--gutter); align-items: start; padding: 0 10px 28px; }
.intro h1 { grid-column: 3; text-align: left; min-width: 0; }
h1 { max-width: 529px; font-size: var(--heading-size); font-weight: 400; line-height: 1; letter-spacing: 0; margin: 0; }
.work { scroll-margin-top: var(--page-margin); }
.work-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding-bottom: 22px; }
.filters { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; font-family: var(--font-body); }

.filters button, .about-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0; cursor: pointer; font-style: normal !important; font-synthesis: none; font-variation-settings: 'slnt' 0, 'ital' 0; font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: 0; color: #716c69; }
.filters button:hover, .about-tab:hover { color: var(--ink); }
.filters button[aria-pressed=true] { color: var(--ink); border-bottom-color: currentColor; }
.about-tab { flex-shrink: 0; margin-left: auto; font-family: var(--font-body); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Project index: edge-to-edge image tiles (after kaizhang.io); captions fade in on hover or keyboard focus. */
.project-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.project-card { position: relative; display: block; overflow: hidden; color: #fff; }
.project-card[hidden] { display: none; }
.project-image-wrap { position: relative; overflow: hidden; aspect-ratio: 32 / 25; background: #f4f4f4; }
.project-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.project-card:hover .project-img, .project-card:focus-visible .project-img { transform: scale(1.03); }
.project-caption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 40px 16px 14px; background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .65)); opacity: 0; transition: opacity .25s; }
.project-card:hover .project-caption, .project-card:focus-visible .project-caption { opacity: 1; }
.project-card:focus-visible { outline-offset: -4px; }
.project-year { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; opacity: .7; }
.project-title { margin: 0; font-size: 16px; line-height: 1.2; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; }
.project-medium { margin: 0; font-size: 13px; line-height: 1.3; opacity: .8; }
.project-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; color: var(--muted); }
/* Touch screens have no hover, so the caption sits under the image instead. */
@media (hover: none) {
  .project-card { color: var(--ink); }
  .project-caption { position: static; opacity: 1; background: none; padding: 10px 0 20px; }
  .project-year, .project-medium { color: var(--muted); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .project-img, .project-caption { transition: none; }
}
.site-footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); border-top: 1px solid var(--line); padding: var(--page-margin) 0; margin-top: 25px; font-size: var(--body-size); color: var(--muted); }
.footer-links { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 10px 25px; }

@media (max-width: 1000px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .intro h1 { grid-column: 2; }
  .project-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-toolbar { gap: 20px; }
  .filters { gap: 12px 24px; }
}
@media (max-width: 600px) {
  :root { --page-margin: 1rem; --gutter: 1rem; --heading-size: 1.875rem; }
  .site-header { grid-template-columns: 1fr; row-gap: 18.75px; }
  .brand { grid-column: 1; font-size: 26px; }
  .intro { grid-template-columns: 1fr; padding: 20px 0 30px; }
  .intro h1 { grid-column: 1; }
  h1 { line-height: 1.1; }
  .work-toolbar { gap: 12px; }
  .filters { gap: 10px 20px; }
  .filters button, .about-tab { font-size: 16px; }

  .project-list { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { grid-column: 1; gap: 12px 20px; }
}

/* About page uses the same quiet editorial grid as the homepage. */
.about-toolbar { display: flex; justify-content: flex-end; font-size: 18px; font-weight: 700; }
.about-toolbar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.about-content { padding-bottom: 64px; }
.about-intro { display: grid; grid-template-columns: var(--project-columns); gap: var(--gutter); padding: 56px 0 54px; }
.about-intro h1 { grid-column: 3; max-width: 560px; margin: 0; font-size: 24px; line-height: 1.25; font-weight: 400; }
.about-grid { display: grid; grid-template-columns: var(--project-columns); gap: var(--gutter); border-top: 1px solid var(--line); padding-top: 14px; }
.about-photo-wrap { grid-column: 1; }
.about-photo { display: block; width: 100%; max-height: 340px; object-fit: cover; object-position: top; filter: grayscale(100%); }
.about-copy { grid-column: 3; max-width: 560px; font-size: 15px; line-height: 1.45; }
.about-copy p { margin: 0 0 20px; }
@media (max-width: 600px) {
  .about-toolbar { font-size: 16px; }
  .about-intro { grid-template-columns: 1fr; padding: 30px 0 34px; }
  .about-intro h1 { grid-column: 1; font-size: 21px; max-width: none; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-photo-wrap, .about-copy { grid-column: 1; }
  .about-photo { max-height: 280px; }
}











.brand-image { display: block; width: 320px; max-width: 100%; height: auto; }
.site-name { grid-column: 1 / 3; margin: 14px 0 0 calc(var(--logo-width, 320px) * .105 + 16px); font-size: var(--small-heading-size); line-height: 1.3; font-weight: 600; }
.home-slideshow { position: relative; width: 100vw; margin: 0 calc(50% - 50vw) 36px; background: #f4f4f4; }
/* Same framing as the cover on each project page: full width, the covers' own 2560:1111 proportion, no crop. */
.hero-slides { position: relative; aspect-ratio: 2560 / 1111; }
.hero-slide { display: block; position: absolute; inset: 0; }
.hero-slide[hidden] { display: none; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide:focus-visible { outline-offset: -6px; }
.hero-dots { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.78); }
.hero-dot { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(0,0,0,.55); border-radius: 50%; background: transparent; cursor: pointer; }
.hero-dot[aria-current="true"] { background: #1e1919; }
.hero-dot:hover { background: rgba(30,25,25,.5); }
@media (max-width: 600px) { .brand-image { width: 320px; } }

/* Align the introduction with the wordmark rather than its symbol. */
/* Logo and name are shared by every page's header. */
body { --logo-width: 320px; }
.brand { transform: translate(-8px, 8px); }
.brand-image { width: var(--logo-width); }
.home-page .intro { padding-right: 0; align-items: end; }
.site-name { margin-top: 12px; font-size: 18px; line-height: 1.2; transform: translate(10px, 4px); }
/* Text reads left-aligned; the block shrinks to its longest line so it still meets the right edge. */
.home-page .intro h1 { justify-self: end; width: fit-content; max-width: 100%; font-size: 22px; line-height: 1.3; text-align: left; }
@media (max-width: 600px) {
  body { --logo-width: 320px; }
  .home-page .intro h1 { width: 100%; text-align: left; }
  .site-name { font-size: 16px; transform: none; }
  .site-name { grid-column: 1; margin-left: 0; }
}

/* Arrow icons as SVG masks, so phones don't swap them for emoji glyphs; they take the link color. */
.icon { display: inline-block; width: .75em; height: .75em; vertical-align: -.05em; background: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; }
.icon-ext { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M3 9 9 3M4 3h5v5'/%3E%3C/svg%3E"); }
.icon-back { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M10.5 6H2M5.5 2.5 2 6l3.5 3.5'/%3E%3C/svg%3E"); }

/* The row between the header and the first image is one shared box on every page: the index
   tagline, the project page's "all projects" and the about page's "projects" sit at the bottom of
   it, so the slideshow and the project cover start at the same height. Tagline: 3 lines × 22px × 1.3. */
:root { --subheader-height: 85.8px; --subheader-gap: 28px; }
.home-page .intro, .detail-toolbar, .about-toolbar {
  box-sizing: content-box;
  min-height: var(--subheader-height);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: var(--subheader-gap);
}
.detail-toolbar, .about-toolbar { align-items: flex-end; line-height: 1; }