@font-face { font-family: "Instrument Serif"; src: url("InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url("InstrumentSerif-Italic.ttf") format("truetype"); font-display: swap; }

:root {
  --canvas: #F3EFE7; --paper: #FBF9F4; --hairline: #E3DCCF;
  --ink: #111B2B; --ink2: #586271; --ink3: #8A919B;
  --tern: #C8392A; --night: #0B1320; --night2: #131D2E; --ice: #EEF1F4;
  --serif: "Instrument Serif", "New York", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--tern); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

header.site { display: flex; align-items: center; justify-content: space-between; padding: 28px 0; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand svg { width: 42px; height: auto; transform: rotate(14deg); color: var(--ink); }
.brand span { font: 34px/1 var(--serif); }
nav a { color: var(--ink2); margin-left: 22px; font-size: 15px; }

.signage { font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); font-stretch: condensed; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 40px 0 80px; }
.hero h1 { font: 88px/.98 var(--serif); letter-spacing: -.01em; margin: 18px 0 18px; }
.hero h1 em { color: var(--tern); }
.hero p.lede { font-size: 20px; color: var(--ink2); max-width: 30em; margin: 0 0 30px; }
.badge { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 14px; font-weight: 600; }
.badge small { display: block; font-weight: 400; opacity: .7; font-size: 12px; }
.phone { width: 100%; max-width: 330px; justify-self: center; border-radius: 44px; overflow: hidden; box-shadow: 0 30px 60px rgba(17,27,43,.18), 0 0 0 10px #111B2B; background: #111B2B; }
.phone img { display: block; width: 100%; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 70px 0; }
.trio figure { margin: 0; }
.trio .phone { max-width: 290px; box-shadow: 0 20px 40px rgba(17,27,43,.14), 0 0 0 8px #111B2B; border-radius: 38px; }
.trio h2 { font: 38px/1.05 var(--serif); margin: 28px 0 8px; }
.trio p { color: var(--ink2); margin: 0; }

.mail { background: var(--paper); border: 1px solid var(--hairline); border-radius: 28px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 20px 0 80px; }
.mail h2 { font: 48px/1 var(--serif); margin: 12px 0 14px; }
.mail code { font: 600 15px/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--canvas); border: 1px solid var(--hairline); padding: 10px 14px; border-radius: 10px; display: inline-block; }
.airmail { display: inline-block; width: 34px; height: 18px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--tern) 0 7px, #fff 7px 10px, #2A4B8D 10px 17px, #fff 17px 20px); vertical-align: middle; margin-right: 8px; }
.mail ul { padding-left: 1.1em; color: var(--ink2); }
.mail li { margin: 6px 0; }

.story { background: var(--night); color: var(--ice); padding: 110px 0; position: relative; overflow: hidden; }
.story::before { content: ""; position: absolute; inset: -40% 40% 40% -20%; background: radial-gradient(closest-side, rgba(95,211,176,.14), transparent); }
.story .wrap { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.story svg { width: 100%; max-width: 360px; color: var(--ice); transform: rotate(14deg); }
.story h2 { font: 64px/1 var(--serif); margin: 0 0 18px; }
.story p { color: #9BA8B9; font-size: 19px; }
.story em { font-family: var(--serif); font-size: 26px; color: var(--ice); }

footer.site { padding: 50px 0 70px; color: var(--ink3); font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer.site a { color: var(--ink2); margin-right: 18px; }

.doc { max-width: 720px; margin: 20px auto 80px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 24px; padding: 48px 52px; }
.doc h1 { font: 56px/1 var(--serif); margin: 0 0 6px; }
.doc h2 { font: 30px/1.1 var(--serif); margin: 36px 0 8px; }
.doc p, .doc li { color: #2C3646; }
.doc .updated { color: var(--ink3); font-size: 14px; margin-bottom: 30px; }

@media (max-width: 860px) {
  .hero, .story .wrap, .mail { grid-template-columns: 1fr; }
  .hero h1 { font-size: 60px; }
  .trio { grid-template-columns: 1fr; gap: 60px; }
  .mail { padding: 30px; }
  .doc { padding: 30px 24px; margin: 10px 12px 60px; }
  nav a { margin-left: 14px; }
}
@media (prefers-color-scheme: dark) {
  :root { --canvas: #0B1320; --paper: #131D2E; --hairline: #26344A; --ink: #EEF1F4; --ink2: #9BA8B9; --ink3: #687689; --tern: #F0604C; }
  .badge { background: var(--ice); color: var(--night); }
  .doc p, .doc li { color: #C9D2DD; }
  .mail code { background: var(--night); }
}