/* Raven's Roost — theme-wide aesthetics ported from the design prototype */

:root {
	--rr-ink: var(--wp--preset--color--ink, #1a1714);
	--rr-ink-soft: var(--wp--preset--color--ink-soft, #3a342e);
	--rr-paper: var(--wp--preset--color--paper, #f3ece0);
	--rr-paper-warm: var(--wp--preset--color--paper-warm, #ece2cf);
	--rr-paper-deep: var(--wp--preset--color--paper-deep, #e0d3b8);
	--rr-cherry: var(--wp--preset--color--cherry, #b53a2b);
	--rr-pine: var(--wp--preset--color--pine, #2b3a2e);
	--rr-mute: var(--wp--preset--color--mute, #807468);
	--rr-rule: rgba(26, 23, 20, 0.13);
	--rr-shadow: 0 1px 0 rgba(26, 23, 20, .06), 0 14px 40px -20px rgba(26, 23, 20, .25);
}

html, body { overflow-x: hidden; }
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Paper grain — fixed full-viewport overlay */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
	opacity: .35;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}
.wp-site-blocks,
.wp-block-template-part,
main { position: relative; z-index: 2; }

/* Display + mono helpers */
.is-display, .has-display-font-family { font-family: "IM Fell English", "IM Fell DW Pica", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.is-mono, .has-mono-font-family { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* Eyebrow micro-label (group block with class `rr-eyebrow`) */
.rr-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rr-ink-soft);
}
.rr-eyebrow::before {
	content: "";
	width: 32px; height: 1px;
	background: currentColor;
	display: inline-block;
}

/* Buffalo plaid panels */
.rr-plaid {
	background-color: #1a1714;
	background-image:
		linear-gradient(45deg, transparent 46%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.05) 54%, transparent 54%),
		linear-gradient(-45deg, transparent 46%, rgba(255,255,255,.05) 46%, rgba(255,255,255,.05) 54%, transparent 54%),
		repeating-conic-gradient(#b53a2b 0% 25%, #1a1714 0% 50%);
	background-size: 48px 48px, 48px 48px, 96px 96px;
}
.rr-plaid-strong {
	background-color: #1a1714;
	background-image:
		linear-gradient(45deg, transparent 46%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.08) 54%, transparent 54%),
		linear-gradient(-45deg, transparent 46%, rgba(255,255,255,.08) 46%, rgba(255,255,255,.08) 54%, transparent 54%),
		repeating-conic-gradient(#b53a2b 0% 25%, #1a1714 0% 50%);
	background-size: 28px 28px, 28px 28px, 56px 56px;
}

/* Sticky topbar */
.rr-topbar {
	position: sticky; top: 0; z-index: 30;
	background: rgba(243, 236, 224, .86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rr-rule);
}
.rr-brand-stamp {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	text-decoration: none;
	color: inherit;
}
.rr-brand-stamp img {
	display: block;
	width: 100%; height: 100%;
	object-fit: contain;
}
.rr-brand-name {
	font-family: "IM Fell English", serif;
	font-size: 20px;
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--rr-ink);
}
.rr-brand-name:hover { color: var(--rr-cherry); }
.rr-brand-name small {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-size: 9.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rr-mute);
	margin-top: 1px;
}
.rr-nav-link {
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rr-ink-soft);
	transition: color .2s;
	text-decoration: none;
	white-space: nowrap;
}
.rr-nav-link:hover { color: var(--rr-cherry); }
.rr-cart-pill {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--rr-ink); color: var(--rr-paper);
	padding: 9px 16px;
	border-radius: 999px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}
.rr-cart-pill::before {
	content: "";
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--rr-cherry);
}

/* Hero collage */
.rr-hero-image {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 560px;
	margin-left: auto;
	width: 100%;
}
.rr-hero-image .rr-panel {
	position: absolute;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--rr-shadow);
}
.rr-hero-image .rr-plaid-card { top: -20px; left: -20px; width: 58%; height: 58%; }
.rr-hero-image .rr-shirt-card { bottom: 0; right: 0; width: 78%; height: 82%; background: var(--rr-paper-warm); }
.rr-hero-image .rr-shirt-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-hero-image .rr-logo-badge {
	position: absolute;
	bottom: -16px; left: 6%;
	width: 110px; height: 110px;
	border-radius: 50%;
	background: var(--rr-paper);
	display: grid; place-items: center;
	box-shadow: var(--rr-shadow);
	transform: rotate(-6deg);
	z-index: 3;
	padding: 14px;
	border: 1px solid var(--rr-rule);
}
.rr-hero-image .rr-logo-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rr-hero-image .rr-tape {
	position: absolute;
	top: 10%; right: -22px;
	width: 120px; height: 28px;
	background: rgba(181, 58, 43, .85);
	transform: rotate(12deg);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
	z-index: 4;
	display: grid; place-items: center;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #fff;
}

/* Hero italic accent and ampersand */
.rr-hero-headline .italic { font-style: italic; color: var(--rr-cherry); }

/* Marquee */
.rr-marquee {
	border-top: 1px solid var(--rr-rule);
	border-bottom: 1px solid var(--rr-rule);
	overflow: hidden;
	background: var(--rr-paper-warm);
	padding: 18px 0;
}
.rr-marquee-track {
	display: flex; gap: 56px;
	white-space: nowrap;
	animation: rr-scroll 38s linear infinite;
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: 28px;
	color: var(--rr-ink);
}
.rr-marquee-track span { display: inline-flex; align-items: center; gap: 56px; }
.rr-marquee-track .rr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rr-cherry); display: inline-block; }
@keyframes rr-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Section head */
.rr-section-num {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--rr-mute);
}
.rr-section-title .it,
.rr-display .it { font-style: italic; color: var(--rr-cherry); }

/* Pine dividers */
.rr-pine-divider {
	height: 22px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 22' preserveAspectRatio='none'><path fill='%231a1714' d='M0,22 L8,12 L12,18 L18,8 L24,16 L30,6 L36,18 L44,10 L52,18 L58,4 L66,16 L72,10 L80,18 L88,6 L96,16 L104,10 L112,18 L120,4 L128,16 L136,10 L142,18 L150,8 L158,18 L166,6 L174,16 L182,10 L188,18 L196,4 L204,16 L212,8 L220,18 L228,10 L236,18 L244,6 L252,16 L260,8 L268,18 L276,4 L284,16 L292,10 L300,18 L308,6 L316,18 L324,10 L332,18 L340,4 L348,16 L356,10 L364,18 L372,8 L380,16 L388,10 L396,18 L404,4 L412,16 L420,10 L428,18 L436,8 L444,18 L452,6 L460,18 L468,10 L476,18 L484,4 L492,16 L500,10 L508,18 L516,8 L524,18 L532,6 L540,16 L548,10 L556,18 L564,4 L572,16 L580,10 L588,18 L596,8 L600,18 L600,22 Z'/></svg>") repeat-x center / 600px 22px;
	opacity: .85;
}

/* Field Notes dark section: pine silhouette top edge into dark plaid */
.rr-field {
	background: var(--rr-ink);
	color: var(--rr-paper);
	position: relative;
	overflow: hidden;
}
.rr-field::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 60px;
	pointer-events: none;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 60' preserveAspectRatio='none'><path fill='%23f3ece0' d='M0,60 L0,42 L30,28 L42,40 L60,18 L78,38 L96,22 L120,42 L140,30 L160,40 L180,20 L200,38 L220,28 L246,44 L266,32 L286,42 L308,22 L330,40 L352,28 L376,42 L398,32 L420,18 L444,38 L466,24 L490,40 L514,30 L540,42 L562,22 L588,40 L612,30 L636,42 L660,26 L686,40 L710,28 L734,42 L758,32 L782,18 L808,38 L832,28 L856,42 L880,30 L906,40 L930,22 L956,40 L980,30 L1004,42 L1028,26 L1054,40 L1080,28 L1104,42 L1128,30 L1152,18 L1178,38 L1202,28 L1226,42 L1252,32 L1276,40 L1300,22 L1326,40 L1352,30 L1376,42 L1402,26 L1428,40 L1454,28 L1480,42 L1506,30 L1532,40 L1558,22 L1582,40 L1600,32 L1600,60 Z'/></svg>") center top / 100% 60px no-repeat;
}
.rr-field h2 .it { font-style: italic; color: #e69e8e; }
.rr-field .rr-eyebrow { color: #e0d3b8aa; }
.rr-field .rr-eyebrow::before { background: #e0d3b8aa; }

/* Newsletter signup pill */
.rr-signup {
	display: flex;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	padding: 6px 6px 6px 22px;
	align-items: center;
	max-width: 460px;
}
.rr-signup input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--rr-paper);
	font: inherit;
	padding: 14px 0;
	outline: none;
	font-size: 15px;
}
.rr-signup input::placeholder { color: #e0d3b888; }
.rr-signup button {
	background: var(--rr-cherry);
	color: #fff;
	border: 0;
	padding: 12px 22px;
	border-radius: 999px;
	font: inherit;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	font-weight: 600;
}
.rr-signup button:hover { background: #c9412f; }

/* Field-aside quote card */
.rr-quote-card {
	position: relative;
	aspect-ratio: 5/4;
	border-radius: 6px;
	overflow: hidden;
	padding: 36px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.rr-quote-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.55) 100%);
	z-index: 0;
	pointer-events: none;
}
.rr-quote-card > * { position: relative; z-index: 1; }
.rr-quote-card .rr-q {
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: 28px;
	line-height: 1.25;
	color: var(--rr-paper);
	max-width: 380px;
	text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
.rr-quote-card .rr-by {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rr-paper);
	opacity: .85;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* Story drop-cap */
.rr-dropcap p:first-of-type::first-letter {
	font-family: "IM Fell English", serif;
	font-size: 64px;
	float: left;
	line-height: 0.85;
	padding: 6px 10px 0 0;
	color: var(--rr-cherry);
}
.rr-signature {
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: 32px;
	color: var(--rr-ink);
}
.rr-signature small {
	display: block;
	font-family: "JetBrains Mono", monospace;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rr-mute);
	margin-top: 4px;
}

/* Story collage */
.rr-story-images {
	position: relative;
	aspect-ratio: 5/6;
}
.rr-story-images .rr-a,
.rr-story-images .rr-b {
	position: absolute;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--rr-shadow);
}
.rr-story-images .rr-a { top: 0; left: 0; width: 70%; height: 72%; }
.rr-story-images .rr-b { bottom: 0; right: 0; width: 64%; height: 58%; }
.rr-story-images img { width: 100%; height: 100%; object-fit: cover; }

/* Process step */
.rr-step { padding-top: 28px; border-top: 1px solid var(--rr-ink); }
.rr-step .rr-step-n {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: var(--rr-mute);
}
.rr-step h3 { margin: 18px 0 14px; max-width: 220px; }

/* Stat row */
.rr-stat .n {
	font-family: "IM Fell English", serif;
	font-size: 38px;
	line-height: 1;
	color: var(--rr-ink);
}
.rr-stat .l {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rr-mute);
	margin-top: 8px;
	display: block;
}

/* Section default padding */
.rr-section { padding: 96px 0; position: relative; z-index: 2; }
@media (max-width: 700px) { .rr-section { padding: 64px 0; } }

/* Shirt cards (used by Featured Shirts block) */
.rr-shirts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
@media (max-width: 980px) { .rr-shirts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rr-shirts-grid { grid-template-columns: 1fr; } }
.rr-card {
	position: relative;
	display: block;
	background: var(--rr-paper-warm);
	border-radius: 6px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform .35s ease;
}
.rr-card:hover { transform: translateY(-4px); }
.rr-card-image {
	aspect-ratio: 1/1;
	overflow: hidden;
	position: relative;
}
.rr-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s ease;
	display: block;
}
.rr-card:hover .rr-card-image img { transform: scale(1.04); }
.rr-corner-tag {
	position: absolute;
	top: 14px; left: 14px;
	background: var(--rr-paper);
	color: var(--rr-ink);
	padding: 6px 10px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 3px;
	z-index: 2;
}
.rr-corner-tag.rr-tag-new { background: var(--rr-cherry); color: #fff; }
.rr-card-meta {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rr-card-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}
.rr-card-title {
	font-family: "IM Fell English", Georgia, serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	margin: 0 0 6px;
	color: var(--rr-ink);
}
.rr-card-sub {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rr-mute);
}
.rr-card-price {
	font-family: "IM Fell English", Georgia, serif;
	font-size: 22px;
	white-space: nowrap;
	color: var(--rr-ink);
}
.rr-card-swatches {
	display: flex; gap: 6px; margin-top: 10px;
}
.rr-sw {
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 1px solid var(--rr-rule);
}

/* Buttons reused via classes */
.rr-btn-primary {
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--rr-ink); color: var(--rr-paper);
	padding: 16px 26px;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	transition: transform .2s, background .2s;
	text-decoration: none;
}
.rr-btn-primary:hover { background: var(--rr-cherry); transform: translateY(-1px); color: var(--rr-paper); }
.rr-btn-ghost {
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--rr-ink);
	padding: 16px 4px;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--rr-ink);
	text-decoration: none;
}

/* v1.2 compat: native-block conversions of former wp:html chunks */

.rr-hero-headline em { font-style: italic; color: var(--rr-cherry); }

.wp-block-button.rr-btn-primary,
.wp-block-button.rr-btn-ghost { padding: 0; background: transparent; }

.wp-block-button.rr-btn-primary > .wp-block-button__link,
.wp-block-button.rr-btn-primary > a.wp-block-button__link {
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--rr-ink); color: var(--rr-paper);
	padding: 16px 26px;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	transition: transform .2s, background .2s;
	text-decoration: none;
	border: none;
}
.wp-block-button.rr-btn-primary > .wp-block-button__link:hover {
	background: var(--rr-cherry); transform: translateY(-1px); color: var(--rr-paper);
}
.wp-block-button.rr-btn-ghost > .wp-block-button__link,
.wp-block-button.rr-btn-ghost > a.wp-block-button__link {
	display: inline-flex; align-items: center; gap: 10px;
	background: transparent; color: var(--rr-ink);
	padding: 16px 4px;
	border-radius: 0;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--rr-ink);
	text-decoration: none;
}

.rr-signature .rr-signature-line {
	font-family: "IM Fell English", serif;
	font-style: italic;
	font-size: 32px;
	color: var(--rr-ink);
	margin: 0;
}
.rr-signature .rr-signature-credit {
	font-family: "JetBrains Mono", monospace;
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rr-mute);
	margin: 4px 0 0;
}

/* Heading-as-stat: native h3.n inside .rr-stat keeps the original number look */
.rr-stat h3.n.wp-block-heading { margin: 0; }
.rr-stat p.l { margin: 4px 0 0; }

/* v1.2.3 hero stats kept inline on mobile - tighten spacing so 3 cols fit narrow phones. */
@media (max-width: 781px) {
	.rr-hero-stats { gap: 12px !important; }
	.rr-hero-stats > .wp-block-column { padding: 0; }
	.rr-hero-stats .rr-stat .n { font-size: 26px; }
	.rr-hero-stats .rr-stat .l { font-size: 10px; letter-spacing: 0.12em; margin-top: 6px; }
}

/* v1.2.7 topbar fits narrow phones with the simplified Shop/Account/Cart row. */
@media (max-width: 781px) {
	.rr-topbar { padding-left: 14px !important; padding-right: 14px !important; }
	.rr-brand-stamp { width: 34px; height: 34px; }
	.rr-brand-name { font-size: 15px; line-height: 1; }
	.rr-brand-name small { display: none; }
	.rr-nav-link { font-size: 11px; letter-spacing: 0.08em; }
	.rr-nav-right { gap: 10px !important; }
	.rr-cart-pill { padding: 6px 10px; font-size: 10px; letter-spacing: 0.06em; gap: 6px; }
	.rr-cart-pill::before { width: 5px; height: 5px; }
}
/* Even tighter at very narrow widths: drop the brand name text, keep just the logo + actions. */
@media (max-width: 420px) {
	.rr-brand-name { display: none; }
	.rr-nav-right { gap: 8px !important; }
}

/* v1.2.1 mobile/desktop reorder + visibility utilities.
   Apply via any block's sidebar -> Advanced -> Additional CSS class(es).
   `order` only acts inside flex parents (core/columns, core/buttons). */
@media (max-width: 781px) {
	.rr-m-first  { order: -1; }
	.rr-m-last   { order: 99; }
	.rr-m-hidden { display: none !important; }
}
@media (min-width: 782px) {
	.rr-d-first  { order: -1; }
	.rr-d-last   { order: 99; }
	.rr-d-hidden { display: none !important; }
}