/*!
 * robinwood.fyi — production stylesheet.
 *
 * Ported from the design handoff (Robinwood-Site-Design-Handoff.zip, 2026-09-21).
 * Values are the designer's; only the asset paths and formatting changed.
 *
 * Palette tokens come from the handoff's visual specification table.
 * Typography is Georgia (editorial) + Arial/Helvetica (body), deliberately kept
 * as system fonts so the page needs no font service and has no render-blocking
 * webfont fetch. See CLAUDE.md before substituting.
 *
 * Canvas c2 is NOT loaded on this site — this design is self-contained.
 */

:root {
	--paper:  #f5f1e8;  /* warm ivory — main paper background */
	--ink:    #20392e;  /* forest green — body text, dark panels */
	--muted:  #58645b;  /* muted green — supporting copy */
	--copper: #a64f2c;  /* primary buttons */
	--gold:   #e0af78;  /* italic headings on dark backgrounds */
	--line:   #d9d9cc;  /* fine rule — dividers */
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 95px;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 3px solid #cb7c38;
	outline-offset: 5px;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
h2 {
	font-size: clamp(31px, 3.25vw, 46px);
	line-height: 1.2;
	letter-spacing: -1.3px;
}
h2 em { color: #8e5438; }
p  { font-weight: 400; }
em { font-weight: 400; }

.wrap {
	width: min(1240px, calc(100% - 112px));
	margin-inline: auto;
}

.skip {
	position: fixed;
	top: -80px;
	left: 15px;
	z-index: 20;
	background: var(--paper);
	padding: 12px;
}
.skip:focus { top: 10px; }

/* ---- Header ---------------------------------------------------------- */
header {
	height: 91px;
	padding: 0 4.2%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	background: var(--paper);
	position: relative;
	z-index: 10;
	border-bottom: 1px solid #d9d9cc;
}
.brand { width: 223px; flex-shrink: 0; }
.brand img { width: 100%; }

nav { display: flex; align-items: center; gap: 34px; font-size: 13px; }
nav > a { transition: color .2s; }
nav > a:hover { color: var(--copper); }
.nav-visit { border: 1px solid #a7b0a4; border-radius: 3px; padding: 11px 18px; }
.nav-visit span { margin-left: 18px; }
.menu-toggle { display: none; }

/* ---- Hero ------------------------------------------------------------ */
.hero {
	position: relative;
	min-height: 640px;
	height: calc(100vh - 91px);
	max-height: 850px;
	color: var(--paper);
	background: #17211c url('/img/woodland.jpg') center 57% / cover no-repeat;
	display: flex;
	align-items: center;
}
.hero-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(9,24,19,.89), rgba(10,25,20,.64) 31%, rgba(10,25,20,.05) 72%),
		linear-gradient(0deg, rgba(9,20,15,.75), transparent 23%);
}
.hero-content {
	position: relative;
	padding: 45px 0 95px;
	margin-left: 8%;
	max-width: 670px;
}
.hero h1 {
	font-size: clamp(62px, 6.6vw, 99px);
	line-height: 1.02;
	letter-spacing: -3.3px;
	margin: 25px 0 24px;
}
.hero h1 em { color: #edc392; }
.hero-description { font-size: 18px; line-height: 1.8; color: #e7e6d8; }
.hero-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 32px;
	font-size: 13px;
}
.hero-bottom {
	position: absolute;
	bottom: 26px;
	left: 4.2%;
	right: 4.2%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #ffffff35;
	padding-top: 22px;
	font-size: 9px;
	letter-spacing: 1.6px;
}
.hero-bottom a { font-size: 12px; letter-spacing: 0; }
.hero-bottom a span { margin-left: 20px; }

/* ---- Shared bits ----------------------------------------------------- */
.eyebrow {
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 600;
	line-height: 1.6;
	color: #825237;
}
.eyebrow.light { color: #e7bb88; }
.tiny-leaf { font-size: 25px; vertical-align: -3px; margin-right: 10px; }

.button {
	display: inline-flex;
	gap: 34px;
	align-items: center;
	padding: 16px 22px;
	border-radius: 3px;
	transition: background .2s;
}
.copper { background: #a64f2c; color: #fff5e9; }
.copper:hover { background: #873f22; }

.quiet-link { border-bottom: 1px solid #ffffff65; padding-block: 7px; }
.quiet-link span { margin-left: 10px; }

.text-link {
	display: inline-flex;
	gap: 32px;
	font-size: 12px;
	border-bottom: 1px solid #9caa9d;
	padding-block: 11px;
	margin-top: 20px;
}
.light-link { color: #f2d4ae; }

/* ---- Intro ----------------------------------------------------------- */
.intro {
	display: grid;
	grid-template-columns: 1fr 2.25fr;
	gap: 50px;
	padding-block: 82px;
	border-bottom: 1px solid var(--line);
}
.intro > .eyebrow { padding-top: 10px; }
.intro p:not(.eyebrow) {
	max-width: 665px;
	margin-top: 24px;
	color: var(--muted);
	line-height: 1.9;
}

/* ---- Explore / destinations ------------------------------------------ */
.explore { padding-block: 76px 85px; }
.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: 35px;
}
.section-heading .eyebrow { margin-bottom: 12px; }
.section-number {
	font-size: 10px;
	letter-spacing: 1.7px;
	color: var(--muted);
	padding-bottom: 7px;
}
.section-intro {
	max-width: 730px;
	color: var(--muted);
	font-size: 14px;
	margin: -14px 0 30px;
}

.explore-layout {
	display: grid;
	grid-template-columns: 1.04fr 1fr;
	gap: 64px;
	align-items: center;
}
.island-art { position: relative; }
.island-art img { width: 100%; border-radius: 3px; }
.island-art figcaption { font-size: 10px; color: var(--muted); margin-top: 10px; }

.destination-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
	margin-bottom: 36px;
}
.destination-buttons button {
	display: flex;
	text-align: left;
	align-items: center;
	gap: 11px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
	padding: 12px 4px;
	color: var(--muted);
	cursor: pointer;
	font-size: 12px;
	transition: background .2s, color .2s;
}
.destination-buttons button span { font-size: 9px; color: #85785e; }
.destination-buttons button[aria-pressed="true"] {
	color: var(--ink);
	border-bottom: 2px solid var(--copper);
	font-weight: bold;
	background: #e8e7db;
}
.destination-buttons button:hover { background: #e8e7db; }

.destination-detail { min-height: 213px; }
.destination-detail h3 { font-size: 32px; line-height: 1.25; margin: 10px 0 14px; }
.destination-detail > p:not(.eyebrow) { color: var(--muted); font-size: 14px; max-width: 430px; }
.place-note { margin-top: 18px; font-size: 12px; color: #825237; display: flex; gap: 10px; }

/* ---- Beat Barn ------------------------------------------------------- */
.barn {
	background: var(--ink);
	color: var(--paper);
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}
.barn-art { overflow: hidden; }

/* The handoff's object-fit:cover cropped ~37% of this image's width at desktop
   widths, clipping the "THE BEAT BARN" lettering baked into the artwork — which
   the brief explicitly said must not happen. Showing it at its natural 4:3 and
   centring the row keeps the title intact; any leftover column height falls back
   to the forest-green panel behind it. */
.barn-art img { width: 100%; height: auto; }
.barn-copy { padding: 70px clamp(30px, 6vw, 95px); }
.barn-copy h2 { margin-top: 20px; font-size: clamp(38px, 3.6vw, 53px); }
.barn-copy h2 em { color: var(--gold); }
.barn-copy > p:not(.eyebrow) { color: #d2d9cc; margin-top: 22px; font-size: 14px; line-height: 1.9; }

.event-note {
	display: flex;
	gap: 18px;
	margin-top: 29px;
	border-top: 1px solid #ffffff28;
	padding-top: 23px;
}
.music-icon { font-size: 25px; color: var(--gold); }
.event-note strong { font-size: 12px; font-weight: 500; }
.event-note p { font-size: 11px; line-height: 1.7; color: #c0cbbe; margin-top: 5px; }

/* ---- Story ----------------------------------------------------------- */
.story {
	padding-block: 90px;
	display: grid;
	grid-template-columns: .85fr 1.4fr;
	align-items: center;
	gap: 90px;
}
.story-mark img { width: 240px; margin: auto; }
.story-mark > p {
	font-size: 9px;
	letter-spacing: 2px;
	text-align: center;
	margin-top: 18px;
	color: #825237;
}
.story h2 { margin: 14px 0 23px; }
.story p:not(.eyebrow) { color: var(--muted); margin-bottom: 13px; font-size: 14px; line-height: 1.9; }

details { border-top: 1px solid var(--line); margin-top: 24px; }
summary {
	padding: 17px 0;
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
summary::-webkit-details-marker { display: none; }
summary span { font-size: 20px; font-weight: 400; }
details[open] summary span { transform: rotate(45deg); }
details p { font-size: 13px; }

/* ---- Visit ----------------------------------------------------------- */
.visit {
	padding-block: 64px;
	background: linear-gradient(110deg, #1a3127, #314b3a);
	color: var(--paper);
}
.visit-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	align-items: center;
	gap: 100px;
}
.visit h2 { font-size: 49px; margin: 16px 0 21px; }
.visit h2 em { color: var(--gold); }
.visit p { font-size: 14px; color: #d4dcca; }

.visit-card {
	background: var(--paper);
	color: var(--ink);
	padding: 28px 32px;
	border-radius: 3px;
}
.draft-tag { font-size: 9px; letter-spacing: 1.5px; color: #825237; }
.visit-card h3 { font-size: 27px; margin: 9px 0 10px; }
.visit-card > p { font-size: 12px; color: var(--muted); margin-bottom: 23px; }

.visit-button { width: 100%; justify-content: space-between; font-size: 13px; margin-bottom: 20px; }
.address-label {
	display: block;
	font-size: 8px;
	letter-spacing: 1.5px;
	color: var(--muted);
	margin-bottom: 7px;
}
#region-address {
	width: 100%;
	border: 1px solid var(--line);
	padding: 10px 9px;
	background: #ecece2;
	color: var(--ink);
	font: 10px monospace;
	border-radius: 2px;
}
.copy-address {
	border: 0;
	border-bottom: 1px solid #bac3b5;
	background: transparent;
	padding: 9px 0;
	color: var(--ink);
	font-size: 11px;
	cursor: pointer;
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.copy-status { font-size: 11px !important; min-height: 18px; margin: 5px 0 0 !important; }

/* ---- Footer ---------------------------------------------------------- */
footer {
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.footer-brand { width: 165px; }
footer > p { font: italic 19px Georgia, serif; color: #6a776a; }
footer > div { text-align: right; font-size: 12px; }
footer small { display: block; font-size: 9px; color: var(--muted); margin-top: 4px; }

/* ---- 404 ------------------------------------------------------------- */
.notfound { padding-block: 110px 130px; text-align: center; }
.notfound h1 { font-size: clamp(42px, 5vw, 66px); line-height: 1.1; letter-spacing: -2px; margin: 18px 0 20px; }
.notfound h1 em { color: #8e5438; }
.notfound p { color: var(--muted); max-width: 440px; margin: 0 auto 30px; }

/* ---- Responsive ------------------------------------------------------ */
@media (min-width: 1600px) {
	.hero-content { margin-left: max(8%, calc((100vw - 1240px) / 2)); }
}

@media (max-width: 1000px) {
	.wrap { width: calc(100% - 64px); }
	nav { gap: 20px; font-size: 12px; }
	.brand { width: 190px; }
	.hero-content { margin-left: 6%; }
	.explore-layout { gap: 35px; }
	.destination-buttons { gap: 0 10px; }
	.destination-buttons button { font-size: 11px; }
	.barn-copy { padding: 45px 35px; }
	.story { gap: 45px; }
	.visit-layout { gap: 45px; }
	.intro { gap: 25px; grid-template-columns: 1fr 2.8fr; }
	.section-number { display: none; }
}

@media (max-width: 720px) {
	html { scroll-padding-top: 25px; }
	header { height: 78px; padding: 0 22px; }
	.brand { width: 177px; }
	.menu-toggle {
		display: flex;
		align-items: center;
		gap: 12px;
		border: 1px solid #bcc3b7;
		background: transparent;
		padding: 7px 12px;
		color: var(--ink);
		font-size: 12px;
	}
	nav {
		display: none;
		position: absolute;
		top: 78px;
		left: 0;
		right: 0;
		background: var(--paper);
		padding: 20px 24px;
		box-shadow: 0 10px 20px #0002;
	}
	nav.open { display: flex; align-items: stretch; flex-direction: column; gap: 15px; }
	nav .nav-visit { display: flex; justify-content: space-between; }

	.wrap { width: calc(100% - 44px); }

	.hero { height: 710px; min-height: 0; max-height: none; background-position: 58% center; }
	.hero-shade {
		background:
			linear-gradient(90deg, #0a1a15df, #0a1a1570),
			linear-gradient(0deg, #0a1a1599, transparent 30%);
	}
	.hero-content { margin: 0; padding: 25px 25px 95px; width: 100%; }
	.hero h1 { font-size: 65px; letter-spacing: -2.7px; margin-top: 26px; }
	.hero .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
	.tiny-leaf { margin-right: 4px; }
	.hero-description { font-size: 16px; }
	.hero-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
	.hero-bottom { left: 25px; right: 25px; font-size: 8px; letter-spacing: 1px; }
	.hero-bottom a { font-size: 0; }
	.hero-bottom a span { font-size: 19px; margin: 0; }

	.intro { display: block; padding-block: 49px; }
	.intro h2 { margin-top: 18px; font-size: 30px; letter-spacing: -1px; }
	.intro p:not(.eyebrow) { font-size: 14px; }

	.explore { padding-block: 49px; }
	.section-heading h2 { font-size: 34px; }
	.explore-layout { grid-template-columns: 1fr; gap: 28px; }
	.island-art { max-width: 500px; margin: auto; }
	.destination-buttons button { font-size: 12px; }
	.destination-detail { min-height: 0; }

	.barn { grid-template-columns: 1fr; }
	.barn-art img { height: auto; }
	.barn-copy { padding: 42px 26px; }
	.barn-copy h2 { font-size: 44px; }

	.story { grid-template-columns: 1fr; gap: 35px; padding-block: 50px; }
	.story-mark img { width: 170px; }
	.story-mark > p { font-size: 8px !important; }
	.story h2 { font-size: 32px; }

	.visit { padding-block: 45px; }
	.visit-layout { grid-template-columns: 1fr; gap: 30px; }
	.visit h2 { font-size: 44px; }
	.visit-card { padding: 24px; }

	footer { padding-block: 28px; flex-wrap: wrap; gap: 17px; }
	footer > p { display: none; }
	.footer-brand { width: 135px; }
	footer > div { font-size: 11px; }

	.notfound { padding-block: 70px 80px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}