/* Design system: wine, ivory, stone; editorial serif with quiet functional type. */
:root {
  color-scheme: light;
  --ivory: #f5f2eb;
  --wine: #542638;
  --ink: #302d29;
  --muted: #70685f;
  --rule: #d5cec3;
  --stone: #d5cabb;
  --gutter: clamp(28px, 5.55vw, 96px);
}
* { box-sizing: border-box; }
html { background: var(--ivory); }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--wine); color: var(--ivory); }
.page { min-height: 100svh; padding: 0 var(--gutter); display: flex; flex-direction: column; max-width: 1920px; margin: auto; }
.masthead { min-height: 154px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--rule); }
.wordmark { color: var(--wine); display: flex; flex-direction: column; align-items: center; width: fit-content; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; letter-spacing: .24em; line-height: 1.35; }
.wordmark-secondary { font-size: 12px; letter-spacing: .48em; padding-top: 5px; }
.edition, .footer-descriptor { color: var(--muted); font-size: 11px; letter-spacing: .1em; line-height: 1.8; }
main { flex: 1; min-height: 570px; position: relative; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; }
.introduction { position: relative; z-index: 1; padding: 70px 0 96px; }
.eyebrow { display: flex; align-items: center; gap: 15px; color: var(--wine); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 42px; }
.eyebrow span { height: 1px; width: 32px; background: var(--wine); }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(40px, 4.55vw, 82px); font-weight: 400; line-height: 1.17; letter-spacing: -.055em; margin: 0; white-space: nowrap; }
h1 em { color: var(--wine); font-weight: 400; }
.launch { color: var(--muted); font-size: 14px; letter-spacing: .025em; line-height: 1.8; margin: 32px 0 0; }
.composition { width: 100%; max-width: 490px; justify-self: end; padding: 20px 0; }
.composition svg { display: block; width: 100%; height: auto; }
.guide { stroke: var(--rule); stroke-width: .7; stroke-dasharray: 2 6; }
.fine { stroke: #aa9c8c; stroke-width: .8; }
.plane-stone { fill: var(--stone); }
.plane-wine { fill: var(--wine); }
.inset { stroke: #ae8790; stroke-width: .6; }
.warm-line { stroke: #c09c89; stroke-width: .7; }
.cross { stroke: #998978; stroke-width: .8; }
footer { min-height: 103px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.contact { color: var(--wine); font-size: 12px; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 24px; min-height: 44px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color 180ms ease; }
.contact:hover { text-decoration-color: currentColor; }
.contact:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
.footer-note { color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.footer-descriptor { display: none; }
@media (min-width: 1600px) { main { min-height: 680px; } .composition { max-width: 560px; } }
@media (max-width: 1000px) {
  .masthead { min-height: 130px; }
  main { min-height: 530px; grid-template-columns: 1.35fr 1fr; }
  h1 { font-size: clamp(36px, 4.8vw, 48px); }
  .edition { font-size: 9px; letter-spacing: .04em; }
}
/* Mobile reorders the emphasis into a vertical editorial composition. */
@media (max-width: 680px) {
  .masthead { min-height: 119px; justify-content: center; }
  .wordmark { font-size: 22px; }
  .wordmark-secondary { font-size: 10px; }
  .edition { display: none; }
  main { display: flex; flex-direction: column; align-items: stretch; min-height: auto; }
  .introduction { padding: 53px 0 0; }
  .eyebrow { font-size: 9px; margin-bottom: 28px; }
  h1 { font-size: clamp(31px, 7.85vw, 52px); line-height: 1.23; letter-spacing: -.055em; }
  .launch { font-size: 12px; margin-top: 23px; }
  .composition { width: 66%; max-width: 290px; align-self: flex-end; margin: 12px 0 15px; padding: 0; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; padding: 22px 0 24px; }
  .footer-descriptor { display: block; margin: 0; font-size: 9px; letter-spacing: .08em; }
  .contact { font-size: 11px; gap: 13px; max-width: 100%; }
  .contact span { overflow-wrap: anywhere; }
  .contact svg { flex-shrink: 0; width: 14px; }
  .footer-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }