:root {
  --ink: #29251f;
  --soft-ink: #71685c;
  --paper: #f3ecdf;
  --white: #fffaf1;
  --line: rgba(75, 61, 44, .2);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 5; padding: .75rem 1rem; color: white; background: var(--ink); }
.skip-link:focus { top: 1rem; }
.site-header { position: absolute; z-index: 3; top: 0; left: 0; width: 100%; color: white; }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 5rem)); min-height: 100px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; font-size: .62rem; font-weight: 700; letter-spacing: .08em; }
.brand-name { font-size: .7rem; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
.header-nav { display: flex; align-items: center; gap: 2.5rem; }
.header-nav a { color: inherit; font-size: .72rem; text-decoration: none; }
.header-nav a:hover, .header-nav a:focus-visible { opacity: .65; }
.nav-menu { display: inline-flex; align-items: center; gap: .7rem; }
.nav-menu span { display: block; width: 17px; height: 1px; background: currentColor; }
.nav-menu span:nth-child(2) { margin-top: 5px; margin-left: -17px; }
.nav-menu span:nth-child(3) { margin-top: 10px; margin-left: -17px; }
.nav-menu b { margin-left: .8rem; font-weight: 400; }
.hero { position: relative; min-height: min(850px, 100vh); color: white; overflow: hidden; background: #27352e; }
.hero-image { position: absolute; inset: 0; background: url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=2200&q=85") center / cover; transform: scale(1.02); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,20,17,.72), rgba(13,20,17,.22) 65%, rgba(13,20,17,.1)), linear-gradient(0deg, rgba(13,20,17,.55), transparent 45%); }
.hero-content { position: relative; z-index: 1; width: min(1280px, calc(100% - 5rem)); margin: 0 auto; padding-top: clamp(11rem, 29vh, 17rem); }
.eyebrow, .card-kicker { margin: 0 0 1.4rem; font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { max-width: 790px; margin: 0 0 1.7rem; font-family: var(--serif); font-size: clamp(4rem, 8.8vw, 8.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }
.hero-copy { max-width: 360px; margin: 0; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.7; }
.circle-link { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 100px; height: 100px; margin-top: 3rem; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: white; font-size: .64rem; text-decoration: none; transition: background .25s, color .25s; }
.circle-link b { margin-top: .5rem; font-size: 1rem; font-weight: 400; }
.circle-link:hover, .circle-link:focus-visible { color: var(--ink); background: white; }
.hero-footer { position: absolute; z-index: 1; right: 0; bottom: 2rem; left: 0; display: flex; justify-content: space-between; width: min(1280px, calc(100% - 5rem)); margin: 0 auto; color: rgba(255,255,255,.7); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.directory-section { width: min(1280px, calc(100% - 5rem)); margin: 0 auto; padding: clamp(6rem, 12vw, 12rem) 0 7rem; }
.section-intro { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 2rem; align-items: end; margin-bottom: 4rem; }
.section-intro .eyebrow { align-self: start; color: var(--soft-ink); }
.section-intro h2 { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 5.8vw, 6.2rem); font-weight: 500; letter-spacing: -.045em; line-height: .96; }
.section-intro > p:last-child { max-width: 250px; margin: 0 0 .35rem; color: var(--soft-ink); font-size: .82rem; line-height: 1.75; }
.project-feature { position: relative; display: block; min-height: min(690px, 65vw); color: white; overflow: hidden; text-decoration: none; }
.project-image { position: absolute; inset: 0; background: url("https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&w=1800&q=85") center / cover; transition: transform .7s cubic-bezier(.2,.65,.3,1); }
.project-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,26,20,.75), transparent 60%); }
.project-feature:hover .project-image, .project-feature:focus-visible .project-image { transform: scale(1.04); }
.project-meta, .project-title { position: absolute; z-index: 1; }
.project-meta { top: 2rem; right: 2.2rem; left: 2.2rem; display: flex; justify-content: space-between; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.project-title { right: 2.2rem; bottom: 2.3rem; left: 2.2rem; }
.project-title .card-kicker { margin-bottom: .8rem; }
.project-title h3 { margin: 0 0 1.2rem; font-family: var(--serif); font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 500; letter-spacing: -.04em; line-height: .95; }
.card-link { display: inline-flex; align-items: center; gap: .8rem; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
.card-link b { font-size: 1rem; font-weight: 400; }
.coming-soon { display: grid; grid-template-columns: 1fr 2fr 1.1fr 40px; gap: 2rem; align-items: end; padding: 4rem 0; border-bottom: 1px solid var(--line); }
.coming-number { align-self: start; color: var(--soft-ink); font-size: .7rem; letter-spacing: .12em; }
.coming-soon .card-kicker { margin-bottom: 1rem; color: var(--soft-ink); }
.coming-soon h3 { margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 4vw, 4.2rem); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.coming-soon > p { max-width: 250px; margin: 0; color: var(--soft-ink); font-size: .82rem; line-height: 1.75; }
.coming-arrow { justify-self: end; font-size: 1.6rem; }
.machine-index { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 2rem; align-items: end; padding: 4rem 0; border-bottom: 1px solid var(--line); }
.machine-index .card-kicker { margin-bottom: 1rem; color: var(--soft-ink); }
.machine-index h3 { margin: 0; font-family: var(--serif); font-size: clamp(2.3rem, 4vw, 4.2rem); font-weight: 500; letter-spacing: -.04em; line-height: .98; }
.machine-index > p { max-width: 250px; margin: 0; color: var(--soft-ink); font-size: .82rem; line-height: 1.75; }
.machine-links { display: grid; gap: .8rem; justify-self: stretch; }
.machine-links a { display: flex; justify-content: space-between; padding-bottom: .7rem; border-bottom: 1px solid var(--line); font-size: .7rem; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.machine-links b { font-size: 1rem; font-weight: 400; }
.principles { display: flex; justify-content: space-between; width: min(1280px, calc(100% - 5rem)); margin: 0 auto; padding: 1.3rem 0 4rem; color: var(--soft-ink); border-top: 1px solid var(--line); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.site-footer { display: flex; justify-content: space-between; width: min(1280px, calc(100% - 5rem)); margin: 0 auto; padding: 2rem 0 3rem; border-top: 1px solid var(--line); color: var(--soft-ink); font-size: .68rem; }
@media (max-width: 720px) {
  .site-header-inner, .hero-content, .hero-footer, .directory-section, .principles, .site-footer { width: calc(100% - 2.5rem); }
  .site-header-inner { min-height: 78px; }
  .header-nav { gap: 1rem; }
  .header-nav > a:not(.nav-menu) { display: none; }
  .nav-menu b { display: none; }
  .hero { min-height: 760px; }
  .hero-image { background-position: 62% center; }
  .hero-content { padding-top: 11rem; }
  .hero h1 { font-size: clamp(3.6rem, 15vw, 6rem); }
  .hero-footer { bottom: 1.3rem; }
  .section-intro { display: block; margin-bottom: 2.5rem; }
  .section-intro h2 { margin-bottom: 1.5rem; font-size: clamp(3rem, 14vw, 5rem); }
  .section-intro > p:last-child { max-width: 310px; }
  .project-feature { min-height: 580px; }
  .project-meta { top: 1.4rem; right: 1.3rem; left: 1.3rem; }
  .project-title { right: 1.3rem; bottom: 1.6rem; left: 1.3rem; }
  .project-title h3 { font-size: clamp(3rem, 14vw, 5rem); }
  .coming-soon { grid-template-columns: 42px 1fr 24px; gap: 1rem; padding: 2.8rem 0; }
  .coming-soon > p { grid-column: 2 / 3; margin-top: .3rem; }
  .coming-arrow { grid-column: 3; grid-row: 1; }
  .machine-index { display: block; padding: 2.8rem 0; }
  .machine-index > p { max-width: 310px; margin: 1.5rem 0 2rem; }
  .principles { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 2.5rem; }
  .site-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .site-footer span:last-child { grid-column: 2; text-align: right; }
}