:root{color-scheme:light;--paper:#f4f0e9;--ink:#242320;--soft:#59544c;--line:#d6cfc2;--orange:#ff6414;--dark:#1a1a1a}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 Arial,sans-serif}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible{outline:3px solid #a33a00;outline-offset:4px}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3{margin:0}
h1,h2,h3{font-family:Georgia,serif;font-weight:400;line-height:1.04;letter-spacing:-.04em}
h1{font-size:clamp(2.75rem,6vw,6rem)}
h2{font-size:clamp(2.45rem,4.1vw,4.6rem)}
h3{font-size:clamp(1.6rem,2.5vw,2.5rem)}
.wrap{width:min(1264px,calc(100% - 96px));margin-inline:auto}
.skip{position:absolute;left:12px;top:0;transform:translateY(-150%);background:white;padding:12px;z-index:5}
.skip:focus{transform:none}
.preview{padding:5px 24px;background:#e7e0d5;text-align:center;color:#4d453b;font-size:.78rem;letter-spacing:.07em}
.header{background:#090909;color:white}
.header .wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{width:240px}
nav{display:flex;gap:clamp(14px,3vw,42px);flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
nav a:hover{color:#ff9357}
.kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;font-weight:bold}
.kicker::before{content:"";display:inline-block;width:17px;height:3px;background:var(--orange);vertical-align:middle;margin-right:12px}
.hero{padding-block:60px 78px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:center}
.hero h1{font-size:clamp(2.45rem,5.15vw,5.75rem);line-height:1.06}
.hero-copy{display:grid;gap:25px}
.hero-copy p:not(.kicker){max-width:36ch;font-size:1.125rem;color:var(--soft)}
.hero figure{max-width:590px;justify-self:end;width:100%}
.hero img{width:100%}
figcaption{padding-top:10px;color:var(--soft);font-size:.94rem}
.button{justify-self:start;display:inline-flex;align-items:center;min-height:48px;background:var(--dark);color:white;padding:8px 21px;text-decoration:none}
.button:hover{background:#41403a}
.block{padding-block:72px}
.block-head{display:grid;gap:14px;margin-bottom:35px}
.project-band{background:#e9e2d7}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.project-card{display:block;text-decoration:none}
.project-cover{display:flex;aspect-ratio:1.55;overflow:hidden;background:#d6cfc2}
.project-cover img{width:100%;height:100%;object-fit:cover}
.project-cover.pair{gap:4px}
.project-cover.pair img{width:calc(50% - 2px);object-position:center 59%}
.project-card h3{margin:13px 0 6px}
.project-card h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.project-card:hover h3{text-decoration-thickness:2px}
.project-card p,.services p,.intro p:not(.kicker){color:var(--soft)}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.services article{border-top:1px solid var(--line);padding-top:20px}
.services h3{margin-bottom:12px}
.about{display:grid;grid-template-columns:minmax(180px,310px) minmax(0,550px);gap:7%;align-items:center}
.about h2{margin-block:15px}
.about img{width:100%}
.contact{background:var(--dark);color:var(--paper)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:end}
.contact p{margin-top:12px}
.contact address{font-style:normal}
.contact address a{display:inline-flex;align-items:center;min-height:44px}
.contact .contact-primary{background:var(--paper);color:var(--ink);margin-top:18px}
.contact .contact-primary:hover{background:#ded3c2}
.contact .contact-email{margin-top:8px;overflow-wrap:anywhere}
.contact a:focus-visible,.header a:focus-visible{outline-color:#ff9357}
footer{padding-block:24px;color:var(--soft);font-size:.88rem}
.intro{padding-block:32px 36px;display:grid;gap:12px}
.back-link{justify-self:start;display:inline-flex;align-items:center;min-height:44px}
.intro .kicker{letter-spacing:.09em}
.intro p:not(.kicker){max-width:62ch;font-size:1.125rem}
.detail{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:start;padding-bottom:54px}
.detail-three{grid-template-columns:repeat(3,minmax(0,267px))}
.detail-attic figure:nth-child(2){max-width:340px}
.detail img,.project-plan img{max-width:100%}
.detail figcaption{max-width:36ch}
.project-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;padding:30px 0 58px;border-top:1px solid var(--line)}
.project-end{background:#e9e2d7;padding-block:33px}
.project-end .wrap{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.project-end h2{font-size:clamp(1.9rem,3vw,3.2rem);margin-top:8px}
.project-end h2 a{display:inline-flex;align-items:center;min-height:44px;text-decoration-thickness:1px}
@media(max-width:760px){
 .wrap{width:calc(100% - 40px)}
 .header .wrap{flex-direction:column;align-items:stretch;gap:8px;padding-top:12px}
 .brand{align-self:flex-start}
 .brand img{width:210px}
 nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #45413b;font-size:.92rem}
 nav a{justify-content:center;min-height:48px}
 .hero{grid-template-columns:minmax(0,1fr);gap:30px;padding-block:38px 44px}
 .hero-copy{gap:17px}
 .hero figure{justify-self:start}
 .block{padding-block:46px}
 .block-head{margin-bottom:25px}
 .project-grid,.services,.contact .wrap,.detail,.about,.project-plan{grid-template-columns:minmax(0,1fr)}
 .project-grid{gap:33px}
 .about img{max-width:240px}
 .intro{padding-block:20px 26px}
 .detail,.project-plan{gap:22px;padding-bottom:34px}
 .detail-three{grid-template-columns:repeat(2,minmax(0,1fr))}
 .detail-three figure:last-child{grid-column:1 / -1}
 .project-end .wrap{align-items:start;flex-direction:column}
}

.hero h1 span{display:block}
.hero-image{overflow:hidden;background:var(--line)}
.header nav a{position:relative}
.header nav a::after{
  content:"";
  position:absolute;
  inset:auto 0 6px;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
}
.header nav a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.project-card:focus-visible h3{color:#8d380d}

@media (prefers-reduced-motion:no-preference){
  .hero-copy > :is(.kicker,p,.button){
    animation:content-in 400ms cubic-bezier(.2,.65,.3,1) 100ms both;
  }
  .hero-copy > p:not(.kicker){animation-delay:90ms}
  .hero-copy > .button{animation-delay:100ms}
  .hero-copy > .button:focus-visible{animation:none}
  .hero h1 span{
    animation:headline-in 380ms cubic-bezier(.17,.76,.28,1) both;
  }
  .hero h1 span:nth-child(2){animation-delay:60ms}
  .hero h1 span:nth-child(3){animation-delay:90ms}
  .hero-image{
    animation:photo-in 450ms ease-out both;
  }
  .hero figcaption{animation:content-in 350ms ease-out 110ms both}

  .intro h1{animation:headline-in 380ms cubic-bezier(.17,.76,.28,1) both}
  .reveal-in:not(:focus-within){
    animation:content-in 400ms cubic-bezier(.2,.65,.3,1) both;
  }
  .project-card.reveal-in:nth-child(2){animation-delay:65ms}
  .project-card.reveal-in:nth-child(3){animation-delay:130ms}
  .header nav a::after{transition:transform 260ms cubic-bezier(.2,.65,.3,1)}
  .button{transition:background-color 210ms ease,color 210ms ease}
  .project-cover img{transition:transform 550ms cubic-bezier(.2,.65,.3,1)}
  .project-card:focus-visible .project-cover:not(.pair) img{transform:scale(1.018)}
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project-card:hover .project-cover:not(.pair) img{transform:scale(1.018)}
}

@keyframes headline-in{
  from{opacity:.75;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes photo-in{
  from{opacity:.72}
  to{opacity:1}
}
@keyframes content-in{
  from{opacity:.75;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans.ttf") format("truetype");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --paper: #faf8f3;
  --ink: #272722;
  --soft: #59564e;
  --line: #dad3c6;
  --dark: #37362f;
}

body { font-family: "DM Sans", Arial, sans-serif; }
h1, h2, h3 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -.055em;
}

.preview { background: #efe9dd; }
.header {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.header nav a:hover { color: #8d380d; }
.header a:focus-visible { outline-color: #a33a00; }

.hero {
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 5%;
}

.hero h1 { font-size: clamp(2.1rem, 3.65vw, 3.85rem); }
.hero figure { max-width: 640px; }
.project-band, .project-end { background: #f0ece3; }
.contact {
  background: #eae1d4;
  color: var(--ink);
}

.contact .contact-primary {
  background: #87360f;
  color: white;
}
.contact .contact-primary:hover { background: #6d2c0c; }
.contact a:focus-visible { outline-color: #a33a00; }

@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero h1 { font-size: clamp(2.1rem, 6.2vw, 3.4rem); }
  .header nav { border-top-color: var(--line); }
}

@font-face {
  font-family: Outfit;
  src: url("fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Urbanist;
  src: url("fonts/Urbanist-1.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Poppins;
  src: url("fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.65; }
h1, h2, h3 { font-family: Outfit, Arial, sans-serif; font-weight: 400; }
.button { font-family: Arial, sans-serif; font-size: .94rem; font-weight: 400; }
h1, h2, h3 { letter-spacing: -.025em; overflow-wrap: anywhere; }
.kicker { font-family: Arial, sans-serif; font-size: .74rem; font-weight: 400; letter-spacing: .12em; }
.header nav { gap: clamp(10px, 1.8vw, 26px); justify-content: end; }
.header nav a[aria-current="page"] { color: #8d380d; }
.header .brand { flex: 0 0 auto; }
.category-links, .site-footer div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.category-links { margin-block: 12px 28px; }
.category-links a, .site-footer a { display: inline-flex; min-height: 44px; align-items: center; }
.category-links a { border-bottom: 1px solid #ab5b31; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.intro { padding-top: 42px; }
.intro h1 { max-width: 19ch; font-size: clamp(2.2rem, 4.4vw, 4.1rem); }
.category-block { border-top: 1px solid var(--line); }
.category-block h2, .gallery-section h2 { margin-bottom: 26px; }
.project-card h3 { font-size: clamp(1.45rem, 2.3vw, 2.25rem); }
.source-copy { max-width: 68ch; overflow-wrap: anywhere; }
.source-copy p, .source-copy ul { margin-block: 0 1em; }
.source-copy :is(h2,h3,h4) { margin-block: 1.2em .5em; }
.source-copy h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.source-copy h3 { font-size: 1.35rem; }
.source-note { padding: 12px 16px; border-left: 3px solid var(--orange); background: #f0ece3; margin-bottom: 24px; }
.reading { padding-bottom: 32px; }
.reading:empty { display: none; }
.legal-copy { padding-top: 42px; }
.legal-copy h1 { margin-bottom: 24px; }
.legal-copy p { margin-bottom: .6em; }
.project-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 5%; align-items: start; }
.project-feature figure { background: #eee8df; }
.project-feature img { margin-inline: auto; max-height: 540px; width: auto; object-fit: contain; }
.gallery-section { padding-block: 42px 54px; }
.gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 24px; align-items: start; }
.gallery figure a { display: grid; place-items: center; aspect-ratio: 1.3; background: #eee8df; }
.gallery img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery figure a:hover { background: #e5dacb; }
.detail-end { padding-bottom: 42px; }
@media (max-width: 900px) {
  .header .wrap { flex-direction: column; align-items: stretch; padding-top: 12px; gap: 8px; }
  .header .brand { align-self: flex-start; }
  .header nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; justify-content: start; border-top: 1px solid var(--line); }
  .header nav a { justify-content: center; min-height: 48px; font-size: .9rem; }
  .gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .project-feature { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .gallery { gap: 20px 12px; }
  .gallery figcaption { font-size: .85rem; overflow-wrap: anywhere; }
  .header nav a { justify-content: flex-start; font-size: .82rem; }
  .header nav { grid-template-columns: 1fr 1.25fr 1.3fr .8fr; }
}

@media (max-width: 760px) {
  .header nav { display: flex; gap: 0 14px; }
  .header nav a { min-height: 44px; }
}

/* Dark surfaces frame the portfolio and tie it to the original wordmark. */
:root {
  --charcoal: #25221f;
  --on-dark: #f7f2e9;
  --orange-on-dark: #ff9b61;
  --dark: #1e1b18;
}

.header {
  background: #090909;
  color: var(--on-dark);
  border-bottom-color: #39342e;
}

.header nav { border-top-color: #39342e; }
.header nav a:hover,
.header nav a[aria-current="page"] { color: var(--orange-on-dark); }

.project-band {
  background: var(--charcoal);
  color: var(--on-dark);
}

.project-band .category-links a { border-bottom-color: #b75b2e; }
.project-band a:hover,
.project-band .project-card:focus-visible h3 { color: var(--orange-on-dark); }
.header a:focus-visible,
.project-band a:focus-visible { outline-color: var(--orange-on-dark); }

.office-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 400px);
  gap: clamp(30px, 7vw, 112px);
  align-items: start;
  padding-block: clamp(48px, 7vw, 106px);
}

.office-profile-copy { max-width: 60ch; }
.office-profile h1 {
  font-size: clamp(2.4rem, 4.5vw, 4.3rem);
  margin-block: 14px 10px;
}

.office-profile-role {
  color: var(--soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 24px;
}

.office-profile-portrait {
  justify-self: end;
  width: 100%;
  max-width: 400px;
  border-top: 3px solid var(--orange);
}
.office-profile-portrait img { width: 100%; }
.office-profile-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #87360f;
}

@media (max-width: 760px) {
  .office-profile { grid-template-columns: minmax(0, 1fr); }
  .office-profile-portrait { justify-self: start; }
}

.office-profile {
  grid-template-areas: "heading portrait" "copy portrait";
  column-gap: clamp(30px, 7vw, 112px);
  row-gap: 0;
}
.office-profile-heading { grid-area: heading; max-width: 60ch; }
.office-profile-copy { grid-area: copy; }
.office-profile-portrait { grid-area: portrait; }

@media (max-width: 760px) {
  .office-profile {
    grid-template-areas: "heading" "portrait" "copy";
    row-gap: 24px;
  }
  .office-profile-role { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
}

/* Modest hierarchy and wider leading for long portfolio texts. */
h2 { font-size: clamp(1.9rem, 3.1vw, 3.25rem); }
.project-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.85rem); }
.hero-copy p:not(.kicker), .intro p:not(.kicker) { font-size: 1rem; }
.office-profile-portrait { border-top-width: 1px; }

.drawing-section {
  background: #050505;
  color: #f5f0e9;
  padding-block: clamp(46px, 7vw, 104px);
}
.drawing-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(24px, 6vw, 84px);
  align-items: center;
}
.drawing-copy h2 { margin-block: 14px; }
.drawing-copy p:not(.kicker) { max-width: 36ch; color: #d0c6ba; margin-bottom: 18px; }
.drawing-copy a, .drawing-replay {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #ff9b61;
}
.drawing-replay {
  display: flex;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .87rem;
  color: #c9bfb3;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.drawing-replay[hidden] { display: none; }
.drawing-copy :focus-visible { outline: 2px solid #ff9b61; outline-offset: 4px; }
.drawing-image { position: relative; background: #101010; }
.drawing-image img { width: 100%; }
.drawing-image canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.drawing-figure figcaption { color: #c9bfb3; }
@media (prefers-reduced-motion: no-preference) {
  .drawing-image img, .drawing-image canvas { transition: opacity 400ms ease; }
  .is-drawing .drawing-image img { opacity: 0; transition-duration: 120ms; }
  .is-drawing .drawing-image canvas { opacity: 1; transition-duration: 120ms; }
}
@media (max-width: 760px) {
  .drawing-layout { grid-template-columns: minmax(0, 1fr); }
}

.drawing-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 0 14px;
}

.drawing-choices[hidden] { display: none; }
.drawing-choices button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #625950;
  background: transparent;
  color: #f5f0e9;
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}

.drawing-choices button[aria-pressed="true"] {
  border-color: #ff9b61;
  color: #ffaf80;
}

.drawing-replay[aria-disabled="true"] { opacity: .6; cursor: default; }
.drawing-image { aspect-ratio: 640 / 453; }
.drawing-image img, .drawing-image canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.drawing-image {
  background: #0b0a09;
  border: 1px solid #322820;
}
.is-drawing .drawing-image {
  background-color: #0b0a09;
  background-image: linear-gradient(#241c16 1px, transparent 1px), linear-gradient(90deg, #241c16 1px, transparent 1px);
  background-size: 28px 28px;
}
.drawing-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: #df8b54;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.is-drawing .drawing-progress { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .drawing-image img, .drawing-image canvas { transition-duration: 620ms; }
}

.project-band { background: #0b0a09; }
.project-band .drawing-section {
  background: transparent;
  border-block: 1px solid #3a312a;
  padding-block: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(28px, 4.5vw, 64px);
}
.drawing-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(1.75rem, 2.7vw, 2.65rem);
}
.drawing-stage { min-width: 0; }
.drawing-figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.drawing-replay { min-height: 36px; }
.drawing-copy a { text-underline-offset: .25em; }
.drawing-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 12px);
  margin: 8px 0 0;
}
.drawing-choices button {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 5px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid #5c5046;
  color: #d1c6b8;
}
.drawing-choices button img {
  width: 100%;
  aspect-ratio: 1.65;
  height: auto;
  object-fit: contain;
  background: #e8dfd1;
  opacity: .65;
}
.drawing-choices button:is(:hover, [aria-pressed="true"]) img { opacity: 1; }
.drawing-choices button span { font-size: clamp(.68rem, 1.1vw, .82rem); overflow-wrap: anywhere; }
.drawing-stage :focus-visible { outline: 2px solid #ff9b61; outline-offset: 3px; }
.featured-projects-title { margin-bottom: 22px; font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
@media (max-width: 760px) {
  .drawing-layout { gap: 18px; }
  .drawing-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project-band .drawing-layout {
  display: block;
  padding-block: clamp(28px, 5vw, 64px);
}

.drawing-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px 24px;
  margin-bottom: 25px;
}

.drawing-copy h3 {
  grid-column: 1;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.drawing-copy p:not(.kicker) {
  grid-column: 1;
  margin: 0;
  max-width: 58ch;
}

.drawing-copy a { grid-column: 2; grid-row: 1 / 3; }
.drawing-stage { display: grid; gap: 20px; }

.drawing-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 26px);
}

.drawing-label {
  color: #dfbca5;
  font-size: .76rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.drawing-image,
.drawing-reference-image {
  aspect-ratio: 4 / 3;
  border: 1px solid #3d3129;
  background: #15110e;
}

.drawing-reference-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drawing-reference figcaption { color: #c9bfb3; }

.drawing-choices {
  width: min(100%, 780px);
  margin: 0;
}
.drawing-choices button img { aspect-ratio: 2.05; }

@media (prefers-reduced-motion: no-preference) {
  .drawing-reference-image img { transition: opacity 650ms ease; }
  .is-drawing .drawing-reference-image img { opacity: .65; }
}

@media (max-width: 680px) {
  .drawing-copy { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
  .drawing-copy a { grid-column: 1; grid-row: auto; justify-self: start; }
  .drawing-pair { grid-template-columns: 1fr; gap: 14px; }
  .drawing-stage .drawing-choices { grid-row: 1; }
}

/* The drawing and its project reference share one frame in the portfolio. */
.project-band .drawing-layout {
  padding-block: clamp(22px, 3vw, 40px);
  margin-bottom: clamp(28px, 3vw, 46px);
}

.drawing-copy h3 { font-size: clamp(1.65rem, 3vw, 2.7rem); }
.drawing-copy { margin-bottom: 18px; }
.drawing-stage { gap: 16px; }

.drawing-choices {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 6px;
}

.drawing-choices button {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 5px 10px 5px 5px;
  min-height: 44px;
  border: 1px solid #45382f;
  gap: 8px;
}
.drawing-choices button img {
  width: 36px;
  height: 30px;
  object-fit: contain;
  aspect-ratio: auto;
}
.drawing-choices button[aria-pressed="true"] { background: #261a13; }
.drawing-choices button span { font-size: .77rem; }

.drawing-pair {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1px;
  border: 1px solid #3d3129;
  background: #3d3129;
}
.drawing-pair figure {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #15110e;
}
.drawing-pair .drawing-label { margin: 0; padding: 10px 14px; }
.drawing-pair .drawing-image,
.drawing-pair .drawing-reference-image { border: 0; }
.drawing-pair .drawing-image { aspect-ratio: 1.64; }
.drawing-pair .drawing-reference-image { aspect-ratio: auto; height: 100%; min-height: 0; }
.drawing-pair figcaption {
  min-height: 54px;
  padding: 8px 14px;
  border-top: 1px solid #3d3129;
  display: flex;
  align-items: center;
}
.drawing-replay { min-height: 36px; }

@media (max-width: 680px) {
  .drawing-pair { grid-template-columns: minmax(0, 1fr); }
  .drawing-pair .drawing-image { aspect-ratio: 4 / 3; }
  .drawing-pair .drawing-reference-image { aspect-ratio: 3 / 2; height: auto; }
}

.drawing-pair figure { grid-template-columns: minmax(0, 1fr); }
.drawing-pair .drawing-image,
.drawing-pair .drawing-reference-image { min-width: 0; overflow: hidden; }
@media (min-width: 681px) {
  .drawing-pair .drawing-image,
  .drawing-pair .drawing-reference-image {
    aspect-ratio: auto;
    height: clamp(280px, 35vw, 480px);
  }
}