/* Plinth — classic architecture portfolio
   Drawing-sheet palette: cool paper, graphite line, one oxidised-copper
   accent used the way an architect uses a single coloured pencil. */
:root {
  --brand: #3E6B5E;
  --brand-deep: #2B4E44;
  --brand-soft: #DDE7E2;
  --brand-ink: #FFFFFF;

  --paper: #EDEEEA;
  --ink: #1D1E1C;
  --pencil: #75786F;
  --rule: #C6C8C1;

  --sans: 'Jost', 'Futura', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.6; font-weight: 400; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* ---------- header ---------- */
.header { border-bottom: 1px solid var(--ink); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.logo { font-weight: 500; font-size: 1.05rem; letter-spacing: .5em; text-transform: uppercase; text-decoration: none; }
.nav { display: flex; gap: 38px; font-size: .95rem; }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--brand); }
.header-meta { justify-self: end; font-family: var(--mono); font-size: .76rem; color: var(--pencil); }

/* ---------- hero: the drawing sheet ---------- */
.hero { padding: 72px 0 88px; }
.hero h1 { font-weight: 300; font-size: clamp(2.2rem, 4.6vw, 4.1rem); line-height: 1.08; letter-spacing: -.015em; max-width: 19ch; margin-bottom: 52px; }
.sheet { position: relative; border: 1px solid var(--ink); background: #F4F5F1; padding: 28px 28px 0; }
.elevation { display: block; width: 100%; height: auto; color: var(--ink); }
.draw path, .draw line, .draw rect, .draw circle, .draw polyline { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.draw .heavy { stroke-width: 2.6; }
.draw .mid { stroke-width: 1.5; }
.draw .fine { stroke-width: .9; }
.draw .accent { stroke: var(--brand); }
.notes { opacity: 0; transition: opacity .8s ease; }
.sheet.drawn .notes { opacity: 1; }
.title-block { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); margin: 20px -28px 0; }
.title-block div { padding: 12px 16px 14px; border-left: 1px solid var(--ink); }
.title-block div:first-child { border-left: 0; }
.title-block dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); }
.title-block dd { font-weight: 500; font-size: .98rem; }

/* ---------- index table ---------- */
.index { padding: 88px 0; border-top: 1px solid var(--ink); position: relative; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 36px; }
.section-head h2, .studio h2, .contact h2 { font-weight: 300; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.01em; }
.section-head p { color: var(--pencil); max-width: 46ch; }
.works { width: 100%; border-collapse: collapse; font-size: 1rem; }
.works th { text-align: left; font-family: var(--mono); font-weight: 400; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); padding: 0 12px 12px 0; border-bottom: 1px solid var(--ink); }
.works td { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.works td:first-child { font-family: var(--mono); font-size: .82rem; color: var(--pencil); width: 90px; }
.works td:nth-child(2) { font-size: 1.28rem; font-weight: 400; }
.works td:nth-child(5) { font-family: var(--mono); font-size: .86rem; }
.works tbody tr { cursor: default; transition: background .2s; }
.works tbody tr:hover, .works tbody tr:focus-within { background: var(--brand-soft); }
.works a { text-decoration: none; }
.works a:hover { color: var(--brand); }
.status { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; }
.status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 1.5px solid currentColor; border-radius: 50%; }
.status.done::before { background: currentColor; }
.status.site { color: var(--brand); }
.peek { position: absolute; top: 0; left: 0; width: 220px; padding: 10px; background: #F4F5F1; border: 1px solid var(--ink); pointer-events: none; opacity: 0; transform: translate(-9999px, 0); transition: opacity .15s; z-index: 5; }
.peek.show { opacity: 1; }
.peek svg { display: block; width: 100%; height: auto; color: var(--ink); }
.peek p { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pencil); margin-top: 6px; }

/* ---------- featured ---------- */
.featured { padding: 88px 0; background: var(--brand-soft); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.featured-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.plan { background: #F4F5F1; border: 1px solid var(--ink); padding: 24px; color: var(--ink); }
.plan svg { display: block; width: 100%; height: auto; }
.plan figcaption { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; color: var(--pencil); margin-top: 8px; }
.label { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.featured h2 { font-weight: 300; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; margin-bottom: 20px; }
.featured-copy > p:not(.label) { margin-bottom: 26px; font-size: 1.05rem; }
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; padding: 10px 0; border-top: 1px solid var(--rule); font-weight: 400; }
.facts th { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pencil); width: 34%; }

/* ---------- studio ---------- */
.studio { padding: 96px 0; }
.studio-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 48px; }
.big { font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.4; margin-bottom: 44px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.principles div { border-top: 2px solid var(--ink); padding-top: 14px; }
.principles h3 { font-weight: 500; font-size: 1.05rem; margin-bottom: 6px; }
.principles p { color: var(--pencil); font-size: .95rem; }

/* ---------- contact / footer ---------- */
.contact { padding: 88px 0 110px; border-top: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.contact-grid { display: grid; gap: 40px; }
.contact h2 { max-width: 20ch; }
.title-block-lg { grid-template-columns: repeat(4, 1fr); margin: 0; border: 1px solid var(--paper); }
.title-block-lg div { border-color: var(--paper); padding: 16px 18px 18px; }
.title-block-lg dt { color: #a9aca4; }
.title-block-lg a { color: inherit; }
.title-block-lg a:hover { color: #9fc8b9; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr auto; }
  .header-meta { display: none; }
  .section-head, .featured-grid, .studio-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
  .title-block { grid-template-columns: repeat(3, 1fr); }
  .title-block div:nth-child(4) { border-left: 0; }
  .title-block div:nth-child(n+4) { border-top: 1px solid var(--ink); }
  .title-block-lg { grid-template-columns: 1fr 1fr; }
  .title-block-lg div:nth-child(3) { border-left: 0; }
  .title-block-lg div:nth-child(n+3) { border-top: 1px solid var(--paper); }
  .works thead { display: none; }
  .works, .works tbody, .works tr, .works td { display: block; }
  .works tr { padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr auto; gap: 2px 14px; }
  .works td { border: 0; padding: 0; }
  .works td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .works td:nth-child(3), .works td:nth-child(4) { grid-column: 2; font-size: .9rem; color: var(--pencil); }
  .works td:nth-child(5) { grid-column: 3; grid-row: 1; }
  .works td:nth-child(6) { grid-column: 2; }
  .peek { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .nav { gap: 20px; font-size: .9rem; }
  .logo { letter-spacing: .3em; }
  .sheet { padding: 14px 14px 0; }
  .title-block { margin: 14px -14px 0; grid-template-columns: 1fr 1fr; }
  .title-block div:nth-child(n) { border-left: 1px solid var(--ink); border-top: 1px solid var(--ink); }
  .title-block div:nth-child(odd) { border-left: 0; }
  .title-block div:nth-child(-n+2) { border-top: 0; }
  .title-block-lg { grid-template-columns: 1fr; }
  .title-block-lg div:nth-child(n) { border-left: 0; border-top: 1px solid var(--paper); }
  .title-block-lg div:first-child { border-top: 0; }
  .hero, .index, .featured, .studio, .contact { padding-top: 56px; padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}