/* Layout idea: warm black ground (no green or blue tint), full-bleed photographs for statements, one content column
   (1280px) whose edges every image and text block share. Green and blue come only from the photographs.
   One accent (muted yellow). Sketch cards use Jonathan's pen-and-red-marker style on paper. */
:root {
  color-scheme: dark;
  --ink: #0E0D0B;
  --surface: #1A1815;
  --line: #2F2C27;
  --paper: #F3EFE7;
  --soft: #D8D2C7;
  --stone: #ADA699;
  --sun: #E2C46B;
  --ember: #C8492D;
  --sheet: #F2EDE3;
  --pen: #1B1A17;
  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Architects Daughter", "Segoe Print", "Comic Sans MS", cursive;
  --col: 1280px;
  --gutter: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); }
body { font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: var(--paper); text-underline-offset: 3px; }
a:hover { color: var(--sun); }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.muted { color: var(--stone); }
.small { font-size: 14px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun); }
.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.86; letter-spacing: -0.005em; margin: 0; }
.d-xl { font-size: clamp(60px, 10.5vw, 180px); }
.d-l { font-size: clamp(50px, 7.4vw, 124px); }
.d-m { font-size: clamp(38px, 5vw, 82px); }
.d-s { font-size: clamp(30px, 3.2vw, 52px); line-height: 0.92; }
.lede { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 48ch; margin: 0; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 1.1em; color: var(--soft); }
.prose h2, .prose h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 34px; line-height: 0.95; margin: 1.4em 0 0.5em; color: var(--paper); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); }
.todo { background: rgba(226, 196, 107, 0.16); color: var(--sun); padding: 0 5px; font-size: 0.86em; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; font-weight: 600; text-decoration: none; border: 1px solid var(--paper); background: transparent; color: var(--paper); }
.btn:hover { border-color: var(--sun); color: var(--sun); }
.btn.solid { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn.solid:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Header: Works and Services always in the bar */
.top { position: fixed; inset: 0 0 auto; z-index: 30; transition: background 0.3s; }
.top.solid { background: rgba(14, 13, 11, 0.95); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 20px; padding-block: 16px; }
.logo { display: block; line-height: 0; flex: 0 0 auto; }
.logo img { height: 26px; width: auto; }
.mainnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.mainnav > a, .mainnav > .dd > button { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; font-size: 16px; background: none; border: 0; color: var(--paper); }
.mainnav > a.here, .mainnav .dd.here > button { color: var(--sun); }
.mainnav .wide { display: inline-flex; }
.dd { position: relative; }
.dd > button::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dd-menu { position: absolute; left: -12px; top: 100%; min-width: 320px; background: var(--surface); border: 1px solid var(--line); padding: 10px 0; display: none; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.dd.open .dd-menu { display: block; }
.dd-menu a { display: flex; justify-content: space-between; gap: 16px; padding: 9px 20px; text-decoration: none; font-size: 15px; }
.dd-menu a small { color: var(--stone); font-size: 13px; }
.dd-menu hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.dd-menu .label { padding: 6px 20px 2px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.top .cta { min-height: 44px; padding: 0 16px; margin-left: 8px; }
.menu-btn { display: none; min-height: 44px; min-width: 44px; padding: 0 14px; background: transparent; border: 1px solid rgba(243, 239, 231, 0.5); align-items: center; gap: 8px; }
.menu-btn span.bars { width: 16px; height: 10px; border-block: 2px solid currentColor; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8, 7, 6, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.panel { position: fixed; inset: 0 0 0 auto; z-index: 41; width: min(460px, 100%); background: var(--surface); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; padding: 16px var(--gutter) 32px; overflow-y: auto; }
.menu-open .scrim { opacity: 1; pointer-events: auto; }
.menu-open .panel { transform: none; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.panel nav { display: flex; flex-direction: column; }
.panel nav a { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 40px; line-height: 1; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.panel nav a small { font-family: var(--body); font-size: 13px; font-weight: 500; text-transform: none; color: var(--stone); }
.panel nav a.here { color: var(--sun); }
.panel .foot { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; font-size: 15px; color: var(--stone); }

/* Scenes */
.scene { position: relative; overflow: hidden; display: flex; }
.scene > .bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.scene > .shade { position: absolute; inset: 0; pointer-events: none; }
.scene > .in { position: relative; width: 100%; }
.hero { min-height: max(720px, min(100vh, 1000px)); align-items: flex-end; }
.hero .shade { background: linear-gradient(180deg, rgba(14, 13, 11, 0.72) 0%, rgba(14, 13, 11, 0) 26%, rgba(14, 13, 11, 0) 42%, rgba(14, 13, 11, 0.94) 100%); }
.hero .in { padding-block: 140px 56px; display: flex; flex-direction: column; gap: 22px; }
.tall { min-height: 760px; align-items: flex-end; }
.tall .shade { background: linear-gradient(180deg, rgba(14, 13, 11, 0) 36%, rgba(14, 13, 11, 0.92) 100%); }
.tall .in { padding-block: 0 64px; display: flex; flex-direction: column; gap: 16px; }
.side .shade { background: linear-gradient(90deg, rgba(14, 13, 11, 0.94) 0%, rgba(14, 13, 11, 0.6) 55%, rgba(14, 13, 11, 0.25) 100%); }
.side { align-items: center; min-height: 680px; }
.side .in { padding-block: 96px; display: flex; flex-direction: column; gap: 18px; }

/* Story and project rows */
.chapter { padding-block: clamp(80px, 10vw, 136px); display: flex; flex-direction: column; gap: clamp(56px, 8vw, 112px); }
.chapter-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px 64px; align-items: end; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 32px 64px; align-items: center; }
.pair .copy { display: flex; flex-direction: column; gap: 14px; max-width: 54ch; }
.pair .copy h2, .pair .copy h3 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 52px); line-height: 0.92; }
.pair .copy p { margin: 0; color: var(--soft); }
.pair figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pair img, .ratio { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pair .portrait img { aspect-ratio: 4 / 5; }
.pair figure.tall { width: min(100%, 520px); justify-self: center; }
.pair .tall img { aspect-ratio: 3 / 4; }
.meta { font-size: 14px; color: var(--stone); }
.quote { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 5vw, 84px); line-height: 0.9; max-width: 18ch; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 20px; }
.flow li { padding-top: 14px; border-top: 2px solid var(--sun); display: flex; flex-direction: column; gap: 4px; }
.flow b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; text-transform: uppercase; }
.strip { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
.strip > * { flex: 0 0 min(320px, 78vw); scroll-snap-align: start; }

/* Sketch cards in Jonathan's style: pen on paper, a red marker accent, hand lettering */
.sketch { aspect-ratio: 4 / 3; background: var(--sheet); display: flex; align-items: center; justify-content: center; padding: 18px; }
.sketch svg { width: 100%; height: 100%; }
.sketch text { font-family: var(--hand); }
.concept { margin: 0; background: transparent; padding: 0; }
.concept img { width: 100%; height: auto; aspect-ratio: auto; }
.sketchbook img { aspect-ratio: auto; max-height: 640px; width: auto; margin-inline: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }

/* Before and after slider */
.ba { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); user-select: none; touch-action: pan-y; }
.ba.portrait { aspect-ratio: 4 / 5; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.ba .after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--paper); transform: translateX(-1px); pointer-events: none; }
.ba .handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 2px; }
.ba .lab { position: absolute; top: 14px; padding: 4px 10px; background: rgba(14, 13, 11, 0.8); font-size: 13px; font-weight: 600; }
.ba .lab.l { left: 14px; }
.ba .lab.r { right: 14px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* Cards and grids: one grid for works, journal and art */
.grid { display: grid; gap: 40px 24px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 28px 20px; }
.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--paper); background: none; border: 0; padding: 0; text-align: left; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.card.tallcard img { aspect-ratio: 4 / 5; }
.card.art img { aspect-ratio: 4 / 5; object-fit: contain; padding: 14px; }
.card .t { font-weight: 600; font-size: 18px; line-height: 1.3; }
.card:hover .t { color: var(--sun); }
.card .noimg { aspect-ratio: 4 / 3; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--stone); font-size: 13px; }
.badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); color: var(--stone); }
.badge.hot { border-color: var(--sun); color: var(--sun); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: transparent; color: var(--paper); display: inline-flex; align-items: center; text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Works story */
.timeline { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); }
.timeline .pair .copy .yr { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; color: var(--sun); }
.link-line { margin: 0; padding-left: 16px; border-left: 2px solid var(--sun); color: var(--paper) !important; font-style: italic; }
.soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.soon div { border: 1px dashed var(--line); padding: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Page headers */
.page-head { padding-top: 150px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; }
.page-head .sub { font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); margin: 0; }

/* Project data */
.data { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); border-top: 2px solid var(--sun); margin: 0; }
.data div { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.data dt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.data dd { margin: 0; font-size: 17px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0 32px; }
.facts li { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.facts li b { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); padding-top: 3px; }

/* Lists */
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { border-bottom: 1px solid var(--line); }
.list a { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 18px 0; text-decoration: none; align-items: baseline; }
.list a .t { font-size: 19px; font-weight: 500; }

/* Steps, services, FAQ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; padding-top: 16px; border-top: 2px solid var(--sun); display: flex; flex-direction: column; gap: 8px; }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--sun); }
.steps h3 { margin: 0; font-size: 20px; }
.steps p { margin: 0; color: var(--soft); font-size: 16px; }
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.svc article { background: var(--surface); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.svc article.lead { outline: 1px solid var(--sun); }
.svc .svc-pic { position: relative; margin: -32px -32px 4px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.svc .svc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc .svc-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.62) 100%); }
.svc .svc-pic h3 { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 1; color: #fff; }
.svc .svc-pic .badge { position: absolute; left: 16px; top: 16px; z-index: 1; }
.svc h3 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 36px; line-height: 0.95; }
.svc p { margin: 0; color: var(--soft); }
.svc dl { margin: 8px 0 0; display: grid; gap: 10px; }
.svc dt { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.svc dd { margin: 0; }
.svc .fee { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--sun); }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { padding: 20px 0; font-weight: 600; font-size: 19px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::after { content: "+"; color: var(--sun); font-size: 24px; line-height: 1; }
details.faq[open] summary::after { content: "–"; }
details.faq p { margin: 0 0 20px; color: var(--soft); max-width: 66ch; }

/* Press slide-through: everything is there, it fades off at the edge */
.slider { position: relative; }
.slide-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 14px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%); }
.slider.at-end .slide-track { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 100%); }
.slide-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.slide-nav { display: flex; gap: 8px; }
.slide-nav button { min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--line); color: var(--paper); font-size: 18px; }
.press-card { width: 280px; min-height: 210px; background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--paper); }
.press-card .y { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--sun); }
.press-card p { margin: 0; font-size: 15px; color: var(--soft); }
.press-card .go { margin-top: auto; font-size: 14px; font-weight: 600; }
.press-card:hover .go { color: var(--sun); }
.press-card.has-pic { padding-top: 0; }
.press-card.has-pic img { width: calc(100% + 44px); margin: 0 -22px 6px; aspect-ratio: 4 / 3; object-fit: cover; }
.book-card { width: 200px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--paper); }
.book-card .cover { aspect-ratio: 2 / 3; background: var(--sheet); color: var(--pen); padding: 20px 16px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 6px 0 0 rgba(0, 0, 0, 0.18); }
.book-card .cover b { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 0.9; }
.book-card .cover span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.book-card:hover .t { color: var(--sun); }
.subnav { position: sticky; top: 76px; z-index: 5; background: rgba(14, 13, 11, 0.95); border-block: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; }
.subnav a { min-height: 48px; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none; color: var(--stone); white-space: nowrap; }
.subnav a:hover { color: var(--paper); }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 46%), 1fr)); gap: 8px; }
.feed a { position: relative; display: block; }
.feed img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.feed span { position: absolute; left: 8px; bottom: 8px; font-size: 12px; background: rgba(14, 13, 11, 0.8); padding: 2px 8px; }

/* Social icons */
.social { display: flex; flex-wrap: wrap; gap: 8px; }
.social a { width: 44px; height: 44px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--paper); }
.social a:hover { border-color: var(--sun); color: var(--sun); }
.social svg { width: 20px; height: 20px; }

/* Journal */
.swipe { position: fixed; inset: 0; z-index: 55; background: var(--ink); display: flex; flex-direction: column; }
.swipe-top { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--gutter); gap: 12px; }
.swipe-card { flex: 1; position: relative; overflow: hidden; touch-action: pan-y; }
.swipe-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease, opacity 0.25s ease; }
.swipe-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px var(--gutter) 28px; background: linear-gradient(180deg, rgba(14, 13, 11, 0) 0%, rgba(14, 13, 11, 0.94) 60%); display: flex; flex-direction: column; gap: 10px; }
.swipe-card .cap h2 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 6vw, 80px); line-height: 0.9; max-width: 16ch; }
.swipe-card .cap p { margin: 0; color: var(--soft); max-width: 60ch; }
.swipe-bar { display: flex; justify-content: space-between; gap: 12px; padding: 12px var(--gutter) 20px; }
.more { display: flex; justify-content: center; padding-top: 24px; }

/* Art and shop */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(8, 7, 6, 0.96); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.lightbox img { max-height: 76vh; width: auto; }
.lightbox .row { justify-content: center; }
.price { font-variant-numeric: tabular-nums; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; background: var(--paper); color: var(--ink); padding: 12px 18px; font-weight: 600; max-width: calc(100% - 32px); }

/* Appointments */
.book { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 48px 64px; align-items: start; }
.types { display: grid; gap: 12px; }
.type { text-align: left; background: var(--surface); border: 1px solid var(--line); padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; color: var(--paper); }
.type[aria-pressed="true"] { border-color: var(--sun); box-shadow: inset 0 0 0 1px var(--sun); }
.type b { font-size: 20px; }
.type .muted { grid-column: 1 / -1; }
.type .price { color: var(--sun); font-weight: 600; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { font-size: 12px; color: var(--stone); text-align: center; padding-bottom: 4px; }
.cal button { min-height: 46px; background: var(--surface); border: 1px solid var(--line); color: var(--paper); font-variant-numeric: tabular-nums; }
.cal button[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal button[aria-pressed="true"] { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slots button { min-height: 44px; padding: 0 16px; background: transparent; border: 1px solid var(--line); color: var(--paper); font-variant-numeric: tabular-nums; }
.slots button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; color: var(--stone); }
.field input, .field textarea, .field select { min-height: 50px; padding: 12px 14px; background: transparent; border: 1px solid #55504A; color: var(--paper); font: inherit; }
.field select option { background: var(--surface); }
.field textarea { min-height: 120px; resize: vertical; }
.summary { border-top: 2px solid var(--sun); }
.summary div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.note { background: var(--surface); padding: 16px 18px; font-size: 15px; color: var(--soft); border-left: 2px solid var(--sun); }
.stripe { display: flex; flex-direction: column; gap: 14px; background: var(--surface); padding: 24px; }

/* Business case table */
.cmp { width: 100%; min-width: 620px; border-collapse: collapse; border-top: 2px solid var(--sun); font-variant-numeric: tabular-nums; }
.cmp th, .cmp td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); font-weight: 600; }
.cmp tbody th { font-weight: 500; color: var(--soft); }
.ba .after svg, .ba > svg { position: absolute; inset: 0; }

/* Art: justified rows keep each picture's own shape; postcards are small cards in a sideways row */
.just { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.jt { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; text-align: left; color: var(--paper); min-width: 0; }
.jt img { width: 100%; height: auto; }
.jt:hover .meta { color: var(--sun); }
.jfill { flex: 1000 1 0; }
.mini { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; width: min-content; gap: 6px; padding: 0; border: 0; background: none; color: var(--paper); text-align: left; }
.mini img { height: 240px; width: auto; max-width: none; } /* the picture sets the card width; a long caption wraps under it */
.mini:hover .meta { color: var(--sun); }
.case-pic svg { width: 100%; height: auto; display: block; }
.case-pic { width: 100%; max-width: 420px; justify-self: center; margin-inline: auto; }  /* Aaron, 10 Nov: the Fable set picture was far too big */
.card.soon { cursor: default; }
a.card.soon { cursor: pointer; }
.card .soon-pic { aspect-ratio: 4 / 3; border: 1.5px dashed var(--stone); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(127, 127, 127, 0.08) 14px 28px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--stone); font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 22px; line-height: 1; }
.card.soon.sq .soon-pic { aspect-ratio: 1 / 1; }
.search { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.search input { min-height: 52px; padding: 0 16px; background: transparent; border: 1px solid #55504A; color: var(--paper); font: inherit; font-size: 18px; }
.search input:focus { border-color: var(--sun); outline: none; }
/* Instagram feed */
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 46%), 1fr)); gap: 8px; }
.ig { position: relative; display: block; overflow: hidden; }
.ig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.3s; }
.ig:hover img { transform: scale(1.03); }
.igrid.ig3 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 960px; }
.ig-t { position: absolute; top: 8px; left: 8px; font-size: 12px; font-weight: 600; background: rgba(14, 13, 11, 0.8); padding: 2px 8px; }
.ig-c { position: absolute; left: 8px; bottom: 8px; font-size: 12px; background: rgba(14, 13, 11, 0.8); padding: 2px 8px; }

@media (max-width: 1070px) { .pair > :not(.copy) { order: -1; } }

.sketch-scene { min-height: 760px; }
.sketch-scene .shade { background: linear-gradient(90deg, rgba(14, 13, 11, 0.55) 0%, rgba(14, 13, 11, 0.7) 55%, rgba(14, 13, 11, 0.9) 100%); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 40px 64px; align-items: center; }
.sk-grid .float { width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .scene .float { transform: none !important; } }

/* Threads: projects joined by one line, in time order */
.chain > .card { position: relative; padding-top: 26px; }
.chain > .card::before { content: ""; position: absolute; top: 6px; left: 0; right: -24px; height: 2px; background: var(--sun); opacity: 0.55; }
.chain > .card:last-child::before { right: auto; width: 14px; }
.chain > .card::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); }
.grid.chain { overflow: hidden; }
.card .why { color: var(--stone); font-size: 15px; line-height: 1.45; }
#threadbox .card { animation: thread-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1.15) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes thread-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #threadbox .card { animation: none; } }
.meta .when { color: var(--stone); }

/* Footer */
.footer { border-top: 1px solid var(--line); }
.footer-in { padding-block: 64px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 32px; font-size: 15px; }
.footer-in nav { display: flex; flex-direction: column; gap: 6px; }
.footer-in nav a { text-decoration: none; color: var(--stone); }
.footer-in nav a:hover { color: var(--sun); }
.newsletter { display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter input { flex: 1 1 200px; min-height: 50px; padding: 0 14px; background: transparent; border: 1px solid #55504A; color: var(--paper); font: inherit; }

/* Prototype controls: not part of the site */
.proto { position: fixed; left: 12px; bottom: 12px; z-index: 35; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #F4EFD8; color: #1C1A10; padding: 6px; font-size: 13px; font-family: var(--body); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); max-width: calc(100% - 24px); }
.proto b { padding: 0 6px; letter-spacing: 0.06em; }
.proto button { min-height: 34px; padding: 0 10px; border: 1px solid #1C1A10; background: transparent; color: #1C1A10; }
.proto-index { position: fixed; left: 12px; bottom: 64px; z-index: 36; background: #F4EFD8; color: #1C1A10; padding: 16px 18px; width: min(340px, calc(100% - 24px)); max-height: 70vh; overflow-y: auto; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); }
.proto-index a { color: #1C1A10; display: block; padding: 4px 0; }

@media (max-width: 1100px) {
  .mainnav .wide { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  .top-in { gap: 6px; }
  .logo img { height: 19px; }
  .top .cta { display: none; }
  .mainnav > a, .mainnav > .dd > button { padding: 0 8px; font-size: 15px; }
  .menu-btn { padding: 0 10px; }
  .menu-btn .lbl { display: none; }
  .dd-menu { position: fixed; left: 8px; right: 8px; top: 64px; min-width: 0; }
  .list a { grid-template-columns: 1fr; gap: 2px; }
  .facts li { grid-template-columns: 1fr; gap: 4px; }
  .panel nav a { font-size: 36px; }
  .subnav { top: 64px; }
  .grid.journal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; }
  .mini img { height: 180px; }
  .jt { flex-basis: 100% !important; }
  .grid.journal .t { font-size: 13px; }
  .grid.journal .meta, .grid.journal .badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene > .bg { transform: none !important; }
  .panel, .scrim, .top, .swipe-card img { transition: none; }
}

/* Story versions (round 10, 8 Nov): A journey, B five ideas, C room to city, D pictures first, E question and answer */
.num { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 9vw, 150px); line-height: 0.8; color: var(--sun); }
.num.small-num { font-size: 56px; }
/* A: the journey */
.journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.jstep { display: grid; grid-template-columns: minmax(150px, 0.3fr) 1fr; gap: 20px 48px; padding-top: 44px; border-top: 1px solid var(--line); }
.jyr { position: sticky; top: 100px; align-self: start; font-family: var(--display); font-weight: 900; font-size: clamp(52px, 6.4vw, 112px); line-height: 0.82; color: var(--sun); }
.jbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px 48px; align-items: start; }
.jbody figure { margin: 0; }
.jbody img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jbody .portrait img { aspect-ratio: 4 / 5; }
.jpics.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jpics.two img { aspect-ratio: 3 / 4; }
.jbody .copy { display: flex; flex-direction: column; gap: 14px; max-width: 54ch; }
.jbody .copy h3 { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 3vw, 48px); line-height: 0.92; }
.jbody .copy p { margin: 0; color: var(--soft); }
.jquote { margin: 0; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 32px); line-height: 0.95; color: var(--paper) !important; }
.bridge { grid-column: 2; margin: 0; padding: 36px 0 44px; font-size: clamp(19px, 1.6vw, 22px); color: var(--sun); font-style: italic; }
/* B: five ideas */
.idea { min-height: 86vh; }
.idea.right .shade { background: linear-gradient(270deg, rgba(14, 13, 11, 0.94) 0%, rgba(14, 13, 11, 0.6) 55%, rgba(14, 13, 11, 0.25) 100%); }
.idea.right .in > .stack { align-self: flex-end; max-width: 640px; }
.proof { padding-block: 40px 96px; display: flex; flex-direction: column; gap: 18px; }
/* C: room to city */
.scalebar { position: sticky; top: 76px; z-index: 20; background: rgba(14, 13, 11, 0.94); border-block: 1px solid var(--line); }
.scalebar ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.scalebar ol::-webkit-scrollbar { display: none; }
.scalebar a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; text-decoration: none; color: var(--stone); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; }
.scalebar a span { font-family: var(--display); font-weight: 800; font-size: 20px; }
.scalebar a.on { color: var(--sun); border-bottom-color: var(--sun); }
.scale { scroll-margin-top: 126px; }
.scale-head { display: flex; flex-direction: column; gap: 14px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px 48px; align-items: start; }
.cols p { margin: 0; color: var(--soft); max-width: 54ch; }
/* D: pictures first */
.full { min-height: 100vh; min-height: 100svh; align-items: flex-end; }
.full .shade { background: linear-gradient(180deg, rgba(14, 13, 11, 0) 42%, rgba(14, 13, 11, 0.9) 100%); }
.full .in { padding-block: 0 72px; display: flex; flex-direction: column; gap: 14px; }
/* E: question and answer */
.counts { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; }
.counts div { display: flex; flex-direction: column; gap: 6px; }
.counts b { font-family: var(--display); font-weight: 900; font-size: clamp(72px, 9vw, 140px); line-height: 0.8; color: var(--sun); }
.moves .card img.contain { object-fit: contain; padding: 14px; }
/* Version switch in the prototype bar */
.proto .pv { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-right: 4px; }
.proto .pv a { min-height: 34px; min-width: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #1C1A10; color: #1C1A10; text-decoration: none; }
.proto .pv a[aria-current] { background: #1C1A10; color: #F4EFD8; }
.proto .pv i { font-style: normal; font-weight: 600; padding-left: 4px; }
@media (max-width: 760px) {
  .jstep { grid-template-columns: 1fr; gap: 16px; }
  .jyr { position: static; }
  .bridge { grid-column: 1; padding-block: 24px 32px; }
  .idea .shade, .idea.right .shade { background: linear-gradient(180deg, rgba(14, 13, 11, 0.35) 0%, rgba(14, 13, 11, 0.92) 100%); }
  .idea.right .in > .stack { align-self: stretch; }
  .scalebar { top: 72px; }
}
/* Fix (8 Nov): ".side .in" made the sketch scene a column, so the sketch filled the screen. Sketch and text sit side by side. */
.scene .in.sk-grid { display: grid; }
.sk-grid .float { max-width: 560px; justify-self: center; }
@media (max-width: 640px) {
  .proto { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .proto > *, .proto .pv { flex: 0 0 auto; }
  .proto .pv { flex-wrap: nowrap; }
}
@media (max-width: 640px) { .grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; } .grid.two-up .t { font-size: 15px; } }

/* Round 11 (8 Nov): story part one (beliefs, one project slider) and Works as part two */
.believe { gap: clamp(48px, 6vw, 80px); }
.steps.beliefs h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 0.95; }
.slider-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.work-track > .card { width: min(300px, 74vw); }
.tags { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); border: 1px solid rgba(226, 196, 107, 0.45); padding: 3px 8px; }
.page-head .back { font-size: 15px; align-self: flex-start; }
.press-card .kind { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sun); border: 1px solid rgba(226, 196, 107, 0.45); padding: 2px 7px; }
.steps.beliefs { grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
@media (max-width: 640px) { .slider-bar .slide-nav { display: none; } .slider-bar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } .slider-bar .chips .chip { flex: 0 0 auto; } }

/* Round 12 (8 Nov): Works "a closer look" slides and status filter */
.feat { display: flex; flex-direction: column; gap: 12px; margin-top: calc(-1 * clamp(36px, 6vw, 84px)); }
.feat-track { gap: 16px; }
.fcard { flex: 0 0 300px; display: flex; flex-direction: column; gap: 8px; color: var(--paper); text-decoration: none; }
.fcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fcard .t { font-weight: 600; font-size: 17px; }
.fcard .why { color: var(--stone); font-size: 15px; line-height: 1.45; }
.fcard .flow { font-size: 13px; margin: 2px 0 0; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fcard .flow li { padding-top: 8px; }
.fcard .flow b { font-size: 18px; }
.fcard:hover .t { color: var(--sun); }
@media (max-width: 640px) { .fcard { flex-basis: 250px; } }
.chip .muted { margin-left: 6px; } /* the count beside a chip label: All 24, 2012 147 */

/* Round 13 (9 Nov): small picture slider without links (Future Ngapuh buildings) */
.mini-slider { margin-top: 0; }
figure.fcard { margin: 0; }
/* 360° view (GreenHouse concept, 9 Nov) */
.pano { width: 100%; aspect-ratio: 16 / 9; background: #111; cursor: grab; touch-action: none; overflow: hidden; }
.pano:active { cursor: grabbing; }
.pano canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .pano { aspect-ratio: 4 / 3; } }
/* Drawing sheets keep their own proportions (Ngapuh Nest drawing, 9 Nov) */
.pair figure.sheet img { aspect-ratio: auto; object-fit: contain; }
/* "How it started": early sketches on the project pages (9 Nov) */
.sk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.sk-row figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sk-row img { width: 100%; height: 300px; object-fit: contain; background: var(--sheet); padding: 12px; box-sizing: border-box; }

/* Titles and project names link to the project (9 Nov) */
.tlink { color: inherit; text-decoration: none; }
.tlink:hover, .tlink:focus-visible { color: var(--sun); }
.plink { color: inherit; text-decoration: underline; text-decoration-color: var(--sun); text-underline-offset: 3px; }
.plink:hover { color: var(--sun); }
/* Drawing sets (Aaron, 9 Nov): wider cards, the whole drawing on white, tap to open */
.fcard.dwg { flex-basis: min(520px, 82vw); cursor: zoom-in; }
.fcard.dwg img { aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: 8px; }
.fcard.dwg .why { color: var(--paper); font-weight: 600; font-size: 15px; }
/* 3D fly-around (Aaron, 9 Nov) */
.m3d .m3d-stage { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(#f5f1ea, #e6e0d6); overflow: hidden; touch-action: none; }
.m3d .m3d-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m3d .m3d-stage canvas { display: block; width: 100%; height: 100%; }
.m3d .m3d-go { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 640px) { .m3d .m3d-stage { aspect-ratio: 4 / 3; } }

.shop-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; align-items: start; }  /* Aaron, 10 Nov: the Fable set, and something new coming soon beside it */
.shop-two .shop-fable { gap: 14px; }
.shop-two .shop-fable .case-pic { max-width: none; }