/* voyn. — minimalist, static, single-page website */
:root {
  --paper: #f7f4ee;
  --paper-deep: #eee6db;
  --paper-mid: #f2ebe1;
  --ink: #30231e;
  --ink-muted: #66574c;
  --accent: #94745c;
  --line: #d8cbbb;
  --max: 1220px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: #d5bda8; color: var(--ink); }
.page-width { width: min(calc(100% - 112px), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; transform: translateY(-130%); z-index: 30; padding: 12px 20px; background: white; }
.skip-link:focus { transform: translateY(0); }

.site-header { height: 100px; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.nav-row { height: 100%; display:flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: baseline; font-size: 37px; line-height: 1; padding-top: 7px; }
/* Only the voyn. identity uses Special Elite. Every final dot is a coffee bean. */
.brand-lettering, .brand-inline { display: inline-flex; align-items: baseline; font-family: "Special Elite", "Courier New", monospace; font-weight: 400; font-style: normal; letter-spacing: -.07em; white-space: nowrap; }
.brand-lettering .bean-dot, .brand-inline .bean-dot { display: inline-block; width: .23em; height: .32em; margin-left: -.025em; transform: translateY(.08em) rotate(10deg); flex: none; overflow: visible; }
.brand-inline { font-size: 1.06em; color:var(--ink); letter-spacing: -.055em; vertical-align: baseline; }
.brand-inline .bean-dot { width: .23em; height: .30em; margin-left: -.015em; transform: translateY(.045em) rotate(10deg); }
.brand-lettering { line-height:1; }

.site-nav { display: flex; align-items: center; gap: 39px; font-size: 13px; font-weight: 500; letter-spacing: 0.015em; }
.site-nav a { transition: color .18s ease; }
.site-nav a:hover { color: var(--accent); }

.hero { min-height: min(810px, calc(100svh - 100px)); display:flex; }
.hero-wrap { width: min(calc(100% - 112px), var(--max)); display:flex; flex-direction:column; justify-content: space-between; }
.hero-meta { display:flex; justify-content:space-between; padding: 34px 0 0; font-size: 11px; letter-spacing:.15em; text-transform:uppercase; font-weight:650; }
.hero-body { display:grid; grid-template-columns: 1.48fr .52fr; gap: 48px; align-items:center; margin-block: 80px 90px; }
.hero-main h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(62px, 6.2vw, 107px); line-height: 1.08; letter-spacing: -.057em; font-weight:400; margin: 0 0 29px; }
.hero-main h1 em, .section-heading h2 em, .visit-grid h2 em { font-weight:400; font-style: italic; }
.hero-main p { max-width: 515px; color:var(--ink-muted); font-size: clamp(16px, 1.45vw, 19px); line-height:1.82; margin: 0 0 32px; }
.text-link { width: fit-content; display: inline-flex; gap:13px; align-items:center; padding-bottom: 6px; border-bottom: 1px solid currentColor; text-transform:none; font-size: 14px; font-weight: 600; transition: color .18s, gap .18s; }
.text-link:hover { color:var(--accent); gap:19px; }
.hero-side { justify-self: end; width: min(100%, 280px); aspect-ratio: 3/4; border:1px solid var(--line); display:grid; place-items:center; transform: translateY(12px); }
.hero-side-inner { display:flex; flex-direction:column; align-items:center; justify-content:space-between; width: 100%; height:100%; padding: 27px 15px; }
.side-top, .side-bottom { font-size: 9px; letter-spacing:.25em; font-weight:700; }
.hero-letter { font-size:clamp(49px, 5.8vw, 77px); color:#8c6c57; line-height:1.1; transform:translateY(5px); }
.hero-brand { letter-spacing:-.065em; }
.hero-bottom { display:flex; justify-content:space-between; border-top: 1px solid var(--line); padding: 20px 0 25px; color: var(--ink-muted); font-size:12px; }
.hero-bottom a { font-weight:600; }

.section-block { padding: 146px 0 156px; }
.two-column { display:grid; grid-template-columns: 1fr 1fr; gap:clamp(70px, 10vw, 185px); }
.eyebrow { display:flex; align-items:center; gap:12px; text-transform:uppercase; font-size: 11px; font-weight:700; letter-spacing:.19em; margin: 0 0 34px; }
.dot { width:6px; height:6px; display:inline-block; border-radius:50%; background:#a87f62; flex-shrink:0; }
.section-heading h2, .visit-grid h2 { font-family:Georgia, "Times New Roman",serif; font-size:clamp(43px, 4.4vw, 72px); letter-spacing:-.057em; line-height:1.18; font-weight:400; margin: 0; }
.copy { font-size: 16px; color: var(--ink-muted); line-height: 1.92; }
.copy p { margin: 0 0 24px; }
.copy p:first-child { color:var(--ink); }
.copy p:last-child { margin-bottom: 0; }
.story-section { background: #efe9e1; }
.signature { font-family: Georgia, serif; color:var(--ink) !important; font-style:italic; padding-top: 17px; font-size: 16px; }
.signature > span:not(.brand-inline) { padding-inline:4px; }
.name-note { margin-top:39px; padding:27px 0 0 20px; border-top:1px solid #d4c8ba; border-left:2px solid #b7987e; }
.name-note-label { margin:0 0 8px !important; color:#856a55 !important; text-transform:uppercase; font-size:10px; font-weight:700; letter-spacing:.17em; line-height:1.4; }
.name-note h3 { font-size:20px; line-height:1.4; font-family:Georgia, serif; font-weight:400; margin:0 0 9px; color:var(--ink); }
.name-note h3 .brand-inline { font-size:1em; }
.name-note p:last-child { margin:0; font-size:14px; line-height:1.85; }
.name-note p em { font-weight:600; font-style:normal; }

.coffee-section { background: var(--paper); border-bottom: 1px solid var(--line); }
.coffee-tasting { border-top: 1px solid var(--line); margin-top: 60px; max-width:390px; display:flex; flex-direction:column; padding-top:21px; gap:10px; }
.coffee-tasting span:first-child { font-size:11px; letter-spacing:.14em; font-weight:650; text-transform:uppercase; }
.coffee-tasting strong { font-family:Georgia, serif; font-size:clamp(37px, 3vw, 48px); font-weight:400; line-height:1.2; letter-spacing:-.04em; }
.coffee-tasting span:last-child { font-size:12px; color:var(--ink-muted); }
.inline-link { text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:4px; color:var(--ink); }
.inline-link:hover { color:var(--accent); }
.coffee-copy .text-link { margin-top:14px; color:var(--ink); }
.coffee-copy strong { color: var(--ink); font-weight:650; }

.visit-section { background:var(--paper); padding-bottom:150px; }
.visit-section > .page-width > .eyebrow { margin-bottom:26px; }
.visit-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:100px; }
.visit-grid h2 { font-size:clamp(62px, 6vw, 98px); }
.visit-note { font-size: 16px; color:var(--ink-muted); margin-top:23px; }
.visit-details { padding-top: 10px; display:grid; grid-template-columns: 1fr; gap: 36px; }
.visit-details h3 { font-size: 11px; letter-spacing:.17em; font-weight:750; text-transform:uppercase; margin:0 0 12px; }
.visit-details address { font-style:normal; line-height:1.7; margin-bottom:17px; }
.visit-details .text-link { font-size:13px; }
.email-link { display:inline-block; font-size:clamp(17px, 1.8vw, 22px); font-family:Georgia,serif; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; overflow-wrap:anywhere; }
.contact-note { color: var(--ink-muted); margin-top:10px; font-size:13px; }

.site-footer { color:#f5ede5; background: var(--ink); padding: 48px 0 27px; }
.footer-grid { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.footer-mark { font-size:32px; --bean-crease:var(--ink); }
.footer-grid span { font-size:12px; color:#d4c6b8; }
.legal { display:flex; justify-content:space-between; gap:15px; flex-wrap:wrap; margin-top:44px; padding-top:24px; border-top:1px solid #625349; font-size:10px; line-height:1.8; color:#c2b4a7; }

@media (min-width: 1600px) { .hero { min-height: 750px; } }
@media (max-width: 960px) {
  .page-width, .hero-wrap { width: min(calc(100% - 64px), var(--max)); }
  .hero { min-height:700px; }
  .hero-body { grid-template-columns:1.55fr .45fr; gap:22px; }
  .hero-side { width: 220px; }
  .hero-letter { font-size: 57px; }
  .two-column { gap:55px; }
  .section-block { padding-block: 115px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 48px; }
  .page-width, .hero-wrap { width:calc(100% - 42px); }
  .site-header { height:74px; }
  .wordmark { font-size:30px; }
  .site-nav { gap: 17px; font-size: 11px; }
  .site-nav a:nth-child(2) { display:none; }
  .hero { min-height: calc(100svh - 74px); }
  .hero-meta { padding-top:25px; align-items:flex-start; gap:25px; font-size:9px; line-height:1.6; }
  .hero-meta span:last-child { text-align:right; }
  .hero-body { display:block; margin:85px 0 66px; }
  .hero-main h1 { font-size: clamp(57px, 12vw, 86px); letter-spacing:-.059em; margin-bottom:29px; }
  .name-note { margin-top:32px; padding-left:16px; }
  .hero-main p { font-size:16px; line-height:1.8; max-width:500px; }
  .hero-side { display:none; }
  .hero-bottom { padding-top:16px; padding-bottom:19px; font-size:10px; }
  .section-block { padding:88px 0 96px; }
  .two-column, .visit-grid { grid-template-columns:1fr; gap:36px; }
  .section-heading h2 { font-size:clamp(44px, 10vw, 62px); }
  .eyebrow { margin-bottom:24px; }
  .copy { font-size:15px; line-height:1.88; }
  .copy p { margin-bottom:20px; }
  .coffee-tasting { margin-top:31px; }
  .visit-grid h2 { font-size:clamp(64px, 14vw, 85px); }
  .visit-details { padding-top:0; gap:31px; }
  .site-footer { padding-top:31px; }
  .footer-grid { align-items:flex-start; flex-direction:column; gap:7px; }
  .footer-grid span { font-size:11px; }
  .legal { margin-top:25px; flex-direction:column; gap:3px; }
}
@media (max-width: 360px) {
  .site-nav { gap:12px; font-size:10px; }
  .hero-main h1 { font-size:54px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}