/* yellowbrickurban.com — Personal design system: Bebas Neue / DM Sans / DM Mono,
   black, white, one yellow, 3px structural rules, square corners. */
:root {
  --black: #000000;
  --white: #FFFFFF;
  --yellow: #E9BF1A;
  --yellow-ink: #8A6D00;
  --ink-muted: #555555;
  --line-soft: #D9D9D9;
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --gutter: clamp(1.25rem, calc(0.50rem + 3.00vw), 3rem);
  --nav-h: 3.5rem;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-padding-top: calc(var(--nav-h) + 1rem); }
body { font-family: var(--font-body); font-weight: 300; color: var(--black); background: var(--white); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.mono { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.display { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.92; }

/* NAV */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: stretch; justify-content: space-between; background: var(--white); border-bottom: 3px solid var(--black); padding-left: var(--gutter); }
.nav-brand { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0.08em; display: flex; align-items: center; white-space: nowrap; transition: color 0.15s; }
.nav-brand .lockup { line-height: 1; white-space: nowrap; }
.nav-brand .mark { display: inline-block; height: 0.71em; width: auto; vertical-align: baseline; margin-right: 0.32em; }
.nav-brand:hover { color: var(--yellow-ink); }
.nav-links { display: flex; }
.nav-links a { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; padding: 0 1.5rem; border-left: 1px solid var(--black); transition: background 0.15s, color 0.15s; }
.nav-links a:hover { background: var(--black); color: var(--white); }
.nav-links a[aria-current="page"] { background: var(--yellow); color: var(--black); }

/* FOOTER */
.footer { border-top: 3px solid var(--black); position: relative; padding: 0.9rem var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.6rem 1.5rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer a { transition: color 0.15s; }
.footer a:hover { color: var(--yellow-ink); }
.footer .muted { color: var(--ink-muted); }

/* BUTTONS */
.btn { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; padding: 0.7rem 1.3rem; border: 2px solid var(--black); background: var(--yellow); color: var(--black); cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn:hover { background: var(--black); color: var(--yellow); }

/* LANDING */
body:has(.landing) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.landing { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hero { position: relative; flex: 1; min-height: 14rem; overflow: hidden; border-bottom: 3px solid var(--black); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.badge { position: relative; z-index: 1; display: inline-flex; align-items: stretch; margin: clamp(1rem, calc(0.40rem + 2.25vw), 2.2rem) var(--gutter); background: var(--white); border: 3px solid var(--black); }
.hero h1 { display: flex; align-items: flex-start; padding: 0.9rem 1.2rem 0.6rem; font-size: clamp(2.2rem, min(8.5vw, 13vh), 9.5rem); }
.badge-links { display: flex; flex-direction: column; border-left: 3px solid var(--black); min-width: 12rem; }
.badge-links a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 1.2rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.15s; }
.badge-links a + a { border-top: 1px solid var(--black); }
.badge-links a:hover { background: var(--yellow); }
.hero h1 .name span { display: block; }
/* Bebas Neue: cap height 0.71em; at line-height 0.92 the first cap top sits 0.05em below the line top. Mark spans cap top of line 1 to baseline of line 2: 0.71 + 0.92 = 1.63em. */
.hero h1 .mark { height: 1.63em; width: auto; flex: none; margin: 0.05em 0.24em 0 0; }
.hero h1 .y { color: var(--yellow); -webkit-text-stroke: 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.trio a { padding: 1.2rem var(--gutter) 1.3rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-size: clamp(1.5rem, min(3.4vw, 5vh), 3rem); letter-spacing: 0.04em; transition: background 0.15s; }
.trio a + a { border-left: 3px solid var(--black); }
.trio a:hover { background: var(--yellow); }
.trio .arr { font-family: var(--font-mono); font-size: 1rem; }

/* PAGE HEADER */
.page-head { padding: clamp(2.5rem, calc(1.00rem + 5.25vw), 5rem) var(--gutter) clamp(1.5rem, calc(0.60rem + 3.00vw), 2.5rem); border-bottom: 3px solid var(--black); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 1.5rem 3rem; align-items: end; }
.page-head h1 { font-size: clamp(3.6rem, calc(1.44rem + 7.50vw), 9rem); }
.page-head p { font-size: 1.02rem; line-height: 1.65; }
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.jump a { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--yellow); padding-bottom: 0.15rem; }
.jump a:hover { color: var(--yellow-ink); }

/* SPECIALTIES */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.area { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); gap: 0 3rem; padding: 0 var(--gutter); border-bottom: 3px solid var(--black); }
.area-head { position: sticky; top: var(--nav-h); align-self: start; padding: 1.6rem 0; display: flex; flex-direction: column; gap: 0.7rem; }
.area-head h2 { font-size: clamp(2.2rem, calc(0.88rem + 3.38vw), 3.6rem); }
.area-head p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-muted); }
.projects { padding: 0; }
.proj { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 4.6rem; gap: 1.6rem; padding: 1.4rem 0; border-bottom: 1px solid var(--black); align-items: start; }
.proj:last-child { border-bottom: none; }
.no-thumbs .proj { grid-template-columns: minmax(0, 1fr) 4.6rem; }
.proj-thumb { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--black); background: var(--black); }
.proj-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: filter 0.4s; }
.proj-thumb.type { display: flex; align-items: flex-end; padding: 0.7rem; color: var(--yellow); font-family: var(--font-display); font-size: 1.6rem; line-height: 0.9; letter-spacing: 0.03em; }
.proj:hover .proj-thumb img, .proj-thumb.keep img { filter: none; }
.proj-body { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.proj-body h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, calc(0.68rem + 1.95vw), 2.3rem); letter-spacing: 0.03em; line-height: 0.95; transition: color 0.15s; }
.proj-meta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.proj-credit { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-muted); }
.proj-body p { font-size: 0.95rem; line-height: 1.65; max-width: 46rem; }
.proj-go { width: 4.6rem; height: 2.2rem; perspective: 420px; display: block; }
.proj-go .brick { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(.3,.7,.3,1); }
.proj-go .face { position: absolute; left: 0; width: 100%; top: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: center / 100% 100% no-repeat; }
.proj-go .stretcher { height: 1.4rem; transform: translateY(-50%); background-image: url("brick-stretcher.svg"); }
.proj-go .bed { height: 2.2rem; transform: translateY(-50%) rotateX(180deg); background-image: url("brick-bed.svg"); }
.proj:hover .proj-go .brick, .proj:focus-visible .proj-go .brick { transform: rotateX(180deg); }
@media (prefers-reduced-motion: reduce) { .proj-go .brick { transition: none; } }
.proj:hover h3 { color: var(--yellow-ink); }

/* SERVICES */
.tracks { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 3px solid var(--black); }
.track { padding: 1.8rem var(--gutter) 2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.track + .track { border-left: 3px solid var(--black); background: var(--black); color: var(--white); }
.track h2 { font-size: clamp(2rem, calc(0.80rem + 2.70vw), 3rem); }
.track p { font-size: 0.98rem; line-height: 1.6; max-width: 32rem; }
.svc { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); gap: 1rem 3rem; padding: 2rem var(--gutter); border-bottom: 3px solid var(--black); }
.svc h2 { font-size: clamp(2.2rem, calc(0.88rem + 3.38vw), 3.6rem); }
.svc ul { list-style: none; }
.svc li { display: grid; grid-template-columns: minmax(10rem, 18rem) minmax(0, 1fr); gap: 0.4rem 2rem; padding: 0.9rem 0; border-top: 1px solid var(--black); }
.svc li:last-child { border-bottom: 1px solid var(--black); }
.svc li b { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.03em; line-height: 1; }
.svc li span { font-size: 0.95rem; line-height: 1.6; }
/* SERVICES: three specialties side by side; one opens its list across the full width */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 3px solid var(--black); }
.svc-intro { padding: clamp(2rem, calc(1rem + 3vw), 3.2rem) var(--gutter) clamp(1.8rem, calc(1rem + 2vw), 2.6rem); border-bottom: 3px solid var(--black); }
.svc-lead { font-size: clamp(2.2rem, calc(1.1rem + 3vw), 4.6rem); max-width: 30ch; margin-bottom: 0.8rem; }
.svc-sub { font-size: clamp(1.1rem, calc(0.95rem + 0.5vw), 1.35rem); line-height: 1.55; max-width: 46rem; margin-bottom: 1.8rem; }
/* The two ways sit side by side inside the intro, divided by a hairline; they carry no fill or hover, so they read as text. */
.svc-modes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--black); }
.svc-modes > div { padding: 1.2rem 2rem 0 0; }
.svc-modes > div + div { padding-left: 2rem; border-left: 1px solid var(--black); }
.svc-modes h2 { font-size: clamp(1.6rem, calc(1rem + 1.2vw), 2.2rem); margin-bottom: 0.5rem; }
.svc-modes p { font-size: 1rem; line-height: 1.6; max-width: 34rem; }
@media (max-width: 720px) {
  .svc-modes { grid-template-columns: 1fr; }
  .svc-modes > div { padding-right: 0; }
  .svc-modes > div + div { padding-left: 0; border-left: none; border-top: 1px solid var(--black); margin-top: 1.2rem; }
}
/* Each specialty stacks its name, its statement and the brick button; the buttons line up along the bottom of the row. */
.svc-tab { grid-row: 1; grid-column: var(--col); display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem;
  padding: 1.8rem var(--gutter) 1.8rem; text-align: left; font: inherit; color: inherit; background: var(--white); border: 0; cursor: pointer; transition: background 0.15s; }
.svc-tab + .svc-panel + .svc-tab { border-left: 3px solid var(--black); }
.svc-name { font-size: clamp(2.2rem, calc(0.88rem + 3.38vw), 3.6rem); }
.svc-sum { font-size: 0.98rem; line-height: 1.6; color: var(--ink-muted); max-width: 30rem; }
.svc-go { margin-top: auto; padding-top: 0.6rem; box-sizing: content-box; }
.svc-tab .svc-go { display: block; }
.svc-tab:hover { background: var(--yellow); }
.svc-tab:hover .face, .svc-tab[aria-expanded="true"] .face { box-shadow: inset 0 0 0 1.5px var(--black); }
.svc-tab:hover .svc-sum, .svc-tab[aria-expanded="true"] .svc-sum { color: var(--black); }
.svc-tab[aria-expanded="true"] { background: var(--yellow); }
.svc-tab[aria-expanded="true"] .brick, .svc-tab:focus-visible .brick { transform: rotateX(180deg); }
.svc-tab:focus-visible { outline: 2px solid var(--black); outline-offset: -5px; }
.svc-panel { grid-row: 2; grid-column: 1 / -1; padding: 0.4rem var(--gutter) 2.2rem; border-top: 3px solid var(--black); }
.svc-grid:not(.js) .svc-panel { grid-row: auto; }
.svc-panel[hidden] { display: none; }
.svc-panel ul { list-style: none; }
.svc-panel li { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr); gap: 0.4rem 3rem; padding: 1rem 0; border-bottom: 1px solid var(--black); }
.svc-panel li b { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.03em; line-height: 1; }
.svc-panel li span { font-size: 1rem; line-height: 1.6; max-width: 44rem; }
.svc-ex { display: table; margin-top: 0.45rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 2px solid var(--yellow); transition: color 0.15s; }
.svc-ex:hover { color: var(--yellow-ink); }
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-tab, .svc-panel { grid-row: auto; grid-column: 1; }
  .svc-tab + .svc-panel + .svc-tab { border-left: none; border-top: 3px solid var(--black); }
  .svc-panel li { grid-template-columns: 1fr; }
}

.cta { padding: 2.2rem var(--gutter) 2.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--yellow); }
.cta h2 { font-size: clamp(2rem, calc(0.80rem + 3.00vw), 3.2rem); }
.cta .btn { background: var(--black); color: var(--yellow); }
.cta .btn:hover { background: var(--white); color: var(--black); }

/* PROFILE: a full-height photo pane, as on the writer site; the name opens the first sentence like a drop cap */
.profile { display: grid; grid-template-columns: minmax(16rem, 36%) minmax(0, 1fr) minmax(0, 0.85fr); grid-template-areas: "photo bio facts";
  min-height: calc(100vh - var(--nav-h)); min-height: calc(100dvh - var(--nav-h)); border-bottom: 3px solid var(--black); }
.p-photo { grid-area: photo; position: relative; overflow: hidden; background: var(--black); border-right: 3px solid var(--black); }
.p-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(100%) contrast(1.05); transition: filter 0.4s; }
.p-photo:hover img { filter: none; }
.prose.p-bio { grid-area: bio; display: block; padding: 2.6rem var(--gutter) 2.6rem; max-width: none; }
.p-bio p { max-width: 38rem; }
.p-bio p + p { margin-top: 1rem; }
/* The name opens the first sentence on the same line, in display type, with the body text running on after it. */
.p-first .p-name { display: inline; font-size: clamp(2rem, calc(1.2rem + 1.6vw), 3rem); line-height: 1; letter-spacing: 0.03em; white-space: nowrap; margin-right: 0.12em; }
.p-facts { grid-area: facts; padding: 2.6rem var(--gutter) 2.6rem; border-left: 3px solid var(--black); }
.area { scroll-margin-top: calc(-1rem - 3px); }
.terms { padding: 2.4rem var(--gutter) 3.2rem; display: block; max-width: calc(44rem + 2 * var(--gutter)); }
.terms h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.03em; line-height: 1; margin: 2rem 0 0.6rem; }
.terms p + p, .terms p + ul, .terms ul + p { margin-top: 0.7rem; }
.terms ul { padding-left: 1.2rem; }
.terms li { font-size: 1.02rem; line-height: 1.7; margin-top: 0.3rem; }
@media (max-width: 1200px) {
  .profile { grid-template-columns: minmax(15rem, 38%) minmax(0, 1fr); grid-template-areas: "photo bio" "photo facts"; grid-template-rows: auto 1fr; }
  .p-facts { border-left: none; padding-top: 0; }
}
@media (max-width: 720px) {
  .profile { grid-template-columns: 1fr; grid-template-areas: "photo" "bio" "facts"; grid-template-rows: auto; min-height: 0; }
  .p-photo { height: min(100vw, 30rem); border-right: none; border-bottom: 3px solid var(--black); }
  .p-bio { padding-top: 1.8rem; }
}
.prose { display: flex; flex-direction: column; gap: 1rem; max-width: 38rem; }
.prose p { font-size: 1.02rem; line-height: 1.75; }
.prose a { border-bottom: 2px solid var(--yellow); transition: color 0.15s; }
.prose a:hover { color: var(--yellow-ink); }
.facts { display: grid; grid-template-columns: 9rem minmax(0, 1fr); border-top: 1px solid var(--black); }
.facts dt, .facts dd { padding: 0.75rem 0; border-bottom: 1px solid var(--black); }
.facts dt { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; padding-right: 1rem; padding-top: 0.95rem; }
.facts dd { font-size: 0.95rem; line-height: 1.55; }
.facts dd a { border-bottom: 2px solid var(--yellow); }
.facts dd a:hover { color: var(--yellow-ink); }
.facts dd + dd { grid-column: 2; }

/* PROJECT DETAIL */
.d-head { padding: clamp(2.2rem, calc(0.88rem + 4.50vw), 4.5rem) var(--gutter) 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 1rem 3rem; align-items: end; }
.d-head h1 { font-size: clamp(3.2rem, calc(1.28rem + 6.75vw), 8rem); }
.d-head .proj-meta { margin-top: 0.8rem; }
.d-head p { font-size: 1.05rem; line-height: 1.65; }
.d-hero { border-top: 3px solid var(--black); border-bottom: 3px solid var(--black); max-height: 42rem; overflow: hidden; }
.d-hero img { width: 100%; height: 100%; max-height: 42rem; object-fit: cover; filter: grayscale(100%) contrast(1.1); transition: filter 0.4s; }
.d-hero:hover img { filter: none; }
.d-body { display: grid; grid-template-columns: minmax(14rem, 24rem) minmax(0, 44rem); gap: 2rem clamp(2rem, calc(0.80rem + 3.75vw), 5rem); padding: 2.4rem var(--gutter) 3rem; }
.d-body aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
.d-body .prose { max-width: 44rem; }
.figs { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
.figs figure { display: flex; flex-direction: column; gap: 0.5rem; }
.figs img { border: 1px solid var(--line-soft); width: 100%; }
.figs figcaption { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.sources { margin-top: 1.8rem; padding-top: 1rem; border-top: 1px solid var(--black); display: flex; flex-direction: column; gap: 0.5rem; }
.sources h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: 0.04em; }
.sources li { font-size: 0.85rem; line-height: 1.5; list-style: none; }
.sources a { border-bottom: 2px solid var(--yellow); }
.sources a:hover { color: var(--yellow-ink); }
.pn { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--black); }
.pn a { padding: 1.3rem var(--gutter) 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; color: var(--black); transition: background 0.15s; }
.pn a + a { border-left: 3px solid var(--black); text-align: right; }
.pn a:hover, .pn a:hover * { background: var(--yellow); color: var(--black); }
.pn .t { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.03em; line-height: 1; }

@media (max-width: 960px) {
  .nav-links a { padding: 0 1rem; font-size: 0.75rem; }
  .page-head, .d-head { grid-template-columns: 1fr; }
  .area { grid-template-columns: 1fr; }
  .area-head { position: static; padding: 1.6rem 0 0.4rem; }
  .d-body { grid-template-columns: 1fr; }
  .d-body aside { position: static; }
  .svc { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav { flex-direction: column; height: auto; padding: 0.55rem 1rem 0; align-items: center; gap: 0.35rem; }
  .nav-brand { font-size: clamp(1rem, calc(0.40rem + 3.45vw), 1.3rem); }
  .nav-links { width: 100%; justify-content: center; border-top: 1px solid var(--black); }
  .nav-links a { flex: 1; justify-content: center; padding: 0.55rem 0.4rem; font-size: 0.75rem; letter-spacing: 0.06em; }
  .nav-links a:first-child { border-left: none; }
  html { scroll-padding-top: 6rem; }
  .trio { grid-template-columns: 1fr; }
  .trio a { padding: clamp(0.5rem, 2vh, 1.2rem) var(--gutter); }
  .trio a + a { border-left: none; border-top: 3px solid var(--black); }
  .badge { display: flex; flex-direction: column; margin: 1rem; }
  .badge-links { flex-direction: row; border-left: none; border-top: 3px solid var(--black); min-width: 0; }
  .badge-links a { justify-content: center; padding: 0.75rem 0.3rem; font-size: 0.75rem; letter-spacing: 0.06em; }
  .badge-links a span { display: none; }
  .badge-links a + a { border-top: none; border-left: 1px solid var(--black); }
  .proj { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
  .proj-go { display: none; }
  .no-thumbs .proj { grid-template-columns: 1fr; }
  .tracks { grid-template-columns: 1fr; }
  .track + .track { border-left: none; }
  .svc li { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 7rem minmax(0, 1fr); }
  .pn { grid-template-columns: 1fr; }
  .pn a + a { border-left: none; border-top: 3px solid var(--black); text-align: left; }
}
@media (max-height: 520px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
  .trio a { padding: 0.5rem 1rem; font-size: 1.3rem; }
  .trio a + a { border-top: none; border-left: 3px solid var(--black); }
  .badge { display: inline-flex; flex-direction: row; margin: 0.8rem var(--gutter); }
  .badge-links { flex-direction: column; border-top: none; border-left: 3px solid var(--black); min-width: 9rem; }
  .badge-links a { justify-content: space-between; padding: 0 0.9rem; }
  .badge-links a span { display: inline; }
  .badge-links a + a { border-left: none; border-top: 1px solid var(--black); }
  .hero h1 { font-size: clamp(1.8rem, 12vh, 4rem); padding: 0.5rem 0.8rem 0.3rem; }
  .landing ~ .footer { padding: 0.4rem var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.role { margin-bottom: 2.2rem; padding-bottom: 1.8rem; border-bottom: 3px solid var(--black); }
.role h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, calc(0.72rem + 2.25vw), 2.4rem); letter-spacing: 0.03em; line-height: 1; }
.role-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0.5rem 0 1rem; }
.role ul { list-style: none; }
.role li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-top: 1px solid var(--black); font-size: 1rem; line-height: 1.6; }
.role li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.9rem; height: 0.45rem; background: var(--yellow); border: 1.5px solid var(--black); }

/* brick motif */
/* One yellow brick in the wall, as in the mark: second brick of the top course. */
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24' viewBox='0 0 64 24'%3E%3Cpath d='M0 .75H64M0 12H64M0 23.25H64M16 .75V12M48 .75V12M0 12V23.25M32 12V23.25M64 12V23.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x 0 0 / 64px 24px, linear-gradient(var(--yellow), var(--yellow)) no-repeat 80.75px 1.5px / 30.5px 9.75px; }
.footer { padding-top: calc(24px + 0.9rem); }
.landing ~ .footer { padding-top: 0.9rem; }
.landing ~ .footer::before { display: none; }
.area + .area { border-top: none; }
.area { position: relative; }
.proj-thumb.type { background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24' viewBox='0 0 64 24'%3E%3Cpath d='M0 .75H64M0 12H64M0 23.25H64M16 .75V12M48 .75V12M0 12V23.25M32 12V23.25M64 12V23.25' fill='none' stroke='%23262626' stroke-width='1.5'/%3E%3C/svg%3E") repeat 0 0 / 64px 24px; }