:root {
  --paper: #fffaf0;
  --paper-deep: #eadfc9;
  --ink: #241b20;
  --ink-soft: #4e3d3d;
  --sage: #87956d;
  --terra: #b95f4c;
  --burgundy: #6e3040;
  --line: rgba(73, 52, 48, .22);
  --serif: Baskerville, 'Palatino Linotype', Georgia, serif;
  --sans: 'Avenir Next', 'Trebuchet MS', sans-serif;
  --mono: 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 12% 8%, rgba(185,95,76,.1), transparent 24rem), radial-gradient(circle at 92% 25%, rgba(135,149,109,.12), transparent 26rem), var(--paper); color: var(--ink); font-family: var(--sans); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 2rem)); min-height: 100vh; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem) 0; }
.page { min-height: calc(100vh - clamp(2.5rem, 8vw, 6rem)); padding: clamp(1.25rem, 4vw, 3rem); background: rgba(255,250,240,.9); border: 1px solid var(--line); box-shadow: .5rem .7rem 1.5rem rgba(55,39,31,.08); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); font: italic 1.4rem var(--serif); text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.back { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border: 1px solid var(--line); background: rgba(238,228,210,.5); color: var(--ink); font-size: .8rem; text-decoration: none; }
.back:hover { border-color: rgba(110,48,64,.45); background: rgba(255,249,237,.72); }
.eyebrow { color: var(--sage); font: 500 10px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.spread { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); margin: 2.5rem 0 2rem; border: 1px solid rgba(73,52,48,.15); background: rgba(255,253,247,.66); }
.panel { min-width: 0; padding: clamp(2rem, 5vw, 4.8rem); }
.intro { display: flex; flex-direction: column; justify-content: center; }
h1 { max-width: 10ch; margin: 1rem 0 1.8rem; color: var(--burgundy); font: 400 clamp(3.2rem, 6vw, 5.6rem)/.86 var(--serif); letter-spacing: -.045em; }
h2 { margin: .8rem 0 1.25rem; color: var(--burgundy); font: italic clamp(2rem, 4vw, 2.8rem)/1 var(--serif); }
h3 { margin: 0 0 .55rem; color: var(--burgundy); font: italic clamp(1.6rem, 3vw, 2.15rem)/1 var(--serif); }
p { max-width: 68ch; color: var(--ink-soft); font-size: .96rem; line-height: 1.72; }
p + p { margin-top: 1rem; }
.mantra { margin-top: 2rem; padding: 1.1rem 0 1.1rem 1.25rem; border-left: 2px solid var(--terra); color: var(--ink); font: italic 1.18rem/1.45 var(--serif); }
.founder { border-left: 1px solid rgba(73,52,48,.2); box-shadow: inset .7rem 0 1.2rem -.9rem rgba(50,35,29,.25); }
.founder-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin: 1.4rem 0 2.2rem; }
.portrait { width: 132px; height: 132px; overflow: hidden; flex: 0 0 132px; border-radius: 50%; border: 1px solid rgba(110,48,64,.3); background: #cdbb9d; box-shadow: inset 0 0 0 .4rem rgba(255,253,247,.25), .25rem .4rem .8rem rgba(69,49,40,.12); }
.portrait img { width: 216px; height: 216px; max-width: none; object-fit: cover; transform: translate(-42px, -10px); }
.name { margin: 0 0 .55rem; color: var(--burgundy); font: italic clamp(1.65rem, 3vw, 2.15rem)/1 var(--serif); }
.roles { display: flex; flex-wrap: wrap; gap: .35rem; color: var(--ink-soft); font: 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.roles span + span::before { content: '·'; margin-right: .35rem; color: var(--terra); }
.signature { color: var(--burgundy); font: italic 1.25rem var(--serif); }
.button { display: inline-flex; align-items: center; gap: .55rem; margin-top: .8rem; padding: .8rem 1rem; border: 1px solid var(--line); color: var(--burgundy); font-size: .82rem; text-decoration: none; }
.button:hover { border-color: rgba(110,48,64,.45); background: rgba(255,249,237,.72); }
.privacy { max-width: 48ch; font-size: .72rem; }
.contact { width: min(100%, 640px); margin: clamp(3rem, 10vw, 8rem) auto; }
.contact h1 { max-width: 12ch; }
.contact-link { display: inline-flex; align-items: center; gap: .6rem; margin: .8rem 0 1.4rem; color: var(--burgundy); font: italic 1.35rem var(--serif); text-decoration: underline; text-underline-offset: 5px; }
.contact-link:hover { color: var(--terra); }
.small { font-size: .86rem; }
.footer { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 760px) {
  .shell { width: min(100% - 1rem, 620px); padding: .5rem 0; }
  .page { min-height: calc(100vh - 1rem); padding: 1rem; }
  .top { align-items: flex-start; }
  .spread { display: block; margin-top: 2rem; }
  .panel { padding: 2rem 1.25rem; }
  .founder { border-top: 1px solid rgba(73,52,48,.2); border-left: 0; box-shadow: inset 0 .7rem 1.2rem -.9rem rgba(50,35,29,.25); }
  h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .portrait { width: 118px; height: 118px; flex-basis: 118px; }
  .portrait img { width: 194px; height: 194px; transform: translate(-38px, -9px); }
  .footer { flex-direction: column; }
}