/* ==========================================================================
   LOOM Atelier — main stylesheet
   Values are taken from the Figma frames (1920px wide, 200px side margins).
   ========================================================================== */

:root {
	--loom-bg: #121311;
	--loom-bg-alt: #191918;
	--loom-bg-deep: #0e0e0d;
	--loom-surface: #1d1d1b;
	--loom-surface-2: #161615;
	--loom-line: rgba(236, 230, 220, 0.12);
	--loom-line-strong: rgba(236, 230, 220, 0.22);
	--loom-text: #ece6dc;
	--loom-text-soft: #c9c2b6;
	--loom-muted: #9d978d;
	--loom-dim: #6f6a63;
	--loom-gold: #c4a87b;
	--loom-gold-text: #b99c6d;
	--loom-on-gold: #1b1915;

	--loom-serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
	--loom-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--loom-script: 'Pinyon Script', 'Snell Roundhand', cursive;

	--loom-max: 1660px;
	--loom-gutter: clamp(20px, 5vw, 64px);
	/* Header heights: tall at rest, compact once scrolled. The body spacer and
	   the anchor offsets are derived from these, so they never drift apart. */
	--loom-header-tall: clamp(96px, 8.4vw, 162px);
	--loom-header-short: 84px;
	--loom-section: clamp(36px, 3.3vw, 64px);
	--loom-gap: clamp(16px, 1.3vw, 24px);
	--loom-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	padding-top: calc(var(--loom-header-tall) + 1px); /* room for the fixed header */
	background: var(--loom-bg);
	color: var(--loom-text);
	font-family: var(--loom-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; transition: color 0.25s var(--loom-ease), opacity 0.25s var(--loom-ease); }
a:hover { color: var(--loom-gold); }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--loom-serif);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.005em;
	color: var(--loom-text);
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--loom-gold); color: var(--loom-on-gold); }

:focus-visible { outline: 1px solid var(--loom-gold); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	z-index: 1000; top: 12px; left: 12px;
	padding: 10px 16px; background: var(--loom-gold); color: var(--loom-on-gold);
}
.loom-hp { position: absolute !important; left: -9999px !important; }

.container {
	width: min(var(--loom-max), 100% - 2 * var(--loom-gutter));
	margin-inline: auto;
}

/* ---------- Type ---------- */
.display-1 {
	font-size: clamp(2.75rem, 5vw, 6rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
}
.display-2 {
	font-size: clamp(2.25rem, 3.15vw, 3.75rem);
	line-height: 1.1;
}
.display-3 {
	font-size: clamp(1.9rem, 2.2vw, 2.5rem);
	line-height: 1.15;
}

.loom-eyebrow {
	margin: 0 0 clamp(14px, 1.3vw, 24px);
	font-family: var(--loom-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--loom-gold-text);
}

.italic-line {
	font-family: var(--loom-serif);
	font-style: italic;
	font-size: clamp(1.35rem, 1.45vw, 1.75rem);
	line-height: 1.3;
	color: var(--loom-muted);
}
.italic-line--lg { font-size: clamp(1.6rem, 2vw, 2.4rem); color: var(--loom-text-soft); }

.lead {
	font-size: 15px;
	line-height: 1.7;
	color: var(--loom-muted);
}

.caption,
.caption-row {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--loom-muted);
}
.caption { margin-top: 18px; }
.caption-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(28px, 4vw, 70px);
}

/* ---------- Buttons & links ---------- */
.loom-btn,
.button,
button.button,
input[type="submit"].loom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	min-height: 66px;
	padding: 0 26px;
	background: var(--loom-gold);
	color: var(--loom-on-gold);
	font-family: var(--loom-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.3s var(--loom-ease), color 0.3s var(--loom-ease);
}
.loom-btn .loom-icon { width: 18px; height: 18px; transition: transform 0.3s var(--loom-ease); }
.loom-btn:hover,
.button:hover { background: #d4bb93; color: var(--loom-on-gold); }
.loom-btn:hover .loom-icon { transform: translateX(4px); }

.loom-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--loom-line-strong);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--loom-text);
	cursor: pointer;
}
.loom-link .loom-icon { width: 15px; height: 15px; color: var(--loom-gold); transition: transform 0.3s var(--loom-ease); }
.loom-link:hover { color: var(--loom-gold); border-color: var(--loom-gold); }
.loom-link:hover .loom-icon--arrow-right { transform: translateX(4px); }
.loom-link:hover .loom-icon--arrow-up { transform: translate(2px, -2px); }

/* ---------- Media & placeholders ---------- */
.media { position: relative; overflow: hidden; background: var(--loom-surface); }
.media > img,
.media > picture,
.media > .loom-ph {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
/* <picture> is a plain wrapper: the <img> inside it does the covering. */
.media > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.loom-ph {
	display: block;
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(214, 190, 150, 0.22), transparent 60%),
		radial-gradient(90% 80% at 80% 90%, rgba(120, 92, 60, 0.28), transparent 65%),
		linear-gradient(160deg, #2a2621 0%, #1c1a17 55%, #151412 100%);
}
.media--hero { aspect-ratio: 970 / 541; }
.media--portrait { aspect-ratio: 313 / 478; }
.media--note { aspect-ratio: 532 / 280; }
.media--landscape { aspect-ratio: 811 / 327; }
.media--square { aspect-ratio: 585 / 630; }
.media--ritual { aspect-ratio: 833 / 700; }
.media--cta { aspect-ratio: 1 / 1; }
.media--cta-sm { aspect-ratio: 501 / 509; }
.media--world { aspect-ratio: 858 / 688; }
.media--seeing { aspect-ratio: 858 / 580; }
.media--contact { aspect-ratio: 648 / 350; }
.media--product { aspect-ratio: 760 / 700; }
.media--article { aspect-ratio: 16 / 8; }

/* ---------- Sections ---------- */
.section { padding-block: var(--loom-section); }
.section--alt { background: var(--loom-bg-alt); }

.section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
	align-items: end;
	gap: 32px 64px;
	margin-bottom: clamp(40px, 3.4vw, 64px);
}
.section-head__title--narrow { max-width: 11.5em; }
.section-head__text {
	max-width: 470px;
	justify-self: end;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--loom-muted);
	padding-bottom: 8px;
}
.section-head__text--lg { font-size: clamp(15px, 1vw, 18px); max-width: 600px; }
.section-head--link { grid-template-columns: 1fr auto; }
.section-head--baseline { align-items: end; }
.section-head--baseline .section-head__text { justify-self: start; }

/* ---------- Header ---------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: rgba(14, 14, 13, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--loom-line);
	transition: background-color 0.3s var(--loom-ease);
}
.admin-bar .site-header { top: 32px; }
.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--loom-header-tall);
	transition: min-height 0.35s var(--loom-ease);
}
.site-header.is-scrolled .site-header__inner { min-height: var(--loom-header-short); }
/* Anchor targets clear the compact header (it is compact by the time a
   jump finishes), instead of landing underneath it. */
[id] { scroll-margin-top: calc(var(--loom-header-short) + 26px); }
.site-header__toggle { display: none; }

.site-nav__list,
.site-tools {
	display: flex;
	align-items: center;
	gap: clamp(18px, 1.6vw, 32px);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.site-nav__list a,
.site-tools a,
.site-tools span { color: var(--loom-text); }
.site-nav__list a:hover,
.site-tools a:hover { color: var(--loom-gold); }
.site-nav .current-menu-item > a { color: var(--loom-gold); }
.site-tools { justify-content: flex-end; }
.site-tools__locale { color: var(--loom-text-soft) !important; }
.site-tools__search { display: inline-flex; color: var(--loom-text); }
.site-tools__search .loom-icon { width: 18px; height: 18px; }

/* Logo */
.loom-logo { margin: 0; line-height: 1; text-align: center; }
.loom-logo__link { display: inline-flex; flex-direction: column; align-items: center; color: var(--loom-text); }
.loom-logo__link:hover { color: var(--loom-text); }
.loom-logo__img { max-height: clamp(70px, 6.2vw, 120px); width: auto; transition: max-height 0.35s var(--loom-ease); }
.site-header.is-scrolled .loom-logo__img { max-height: 64px; }
.loom-logo__script {
	font-family: var(--loom-script);
	font-size: clamp(44px, 3.9vw, 76px);
	line-height: 0.95;
	letter-spacing: 0.01em;
	transition: font-size 0.35s var(--loom-ease);
}
.loom-logo__word {
	margin-top: 4px;
	font-family: var(--loom-sans);
	font-size: clamp(11px, 0.75vw, 14px);
	font-weight: 400;
	letter-spacing: 0.55em;
	text-indent: 0.55em;
	text-transform: uppercase;
}
.loom-logo__sub {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	font-size: 6.5px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--loom-text-soft);
}
.loom-logo__sub::before,
.loom-logo__sub::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: 0.6; }
.site-header.is-scrolled .loom-logo__script { font-size: 44px; }

/* Search drawer */
.site-search { border-top: 1px solid var(--loom-line); padding-block: 22px; }
.search-form { display: flex; align-items: center; border-bottom: 1px solid var(--loom-line-strong); }
.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	background: transparent;
	border: 0;
	font-family: var(--loom-serif);
	font-size: clamp(1.4rem, 2vw, 2rem);
	color: var(--loom-text);
	outline: none;
}
.search-form__input::placeholder { color: var(--loom-dim); }
.search-form__submit { color: var(--loom-gold); }

/* Mobile drawer */
.site-drawer {
	position: fixed;
	inset: 0;
	z-index: 45;
	padding: 130px var(--loom-gutter) 40px;
	background: var(--loom-bg-deep);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 0.4s var(--loom-ease), transform 0.55s var(--loom-ease);
}
.site-drawer.is-open { opacity: 1; transform: none; }
.site-drawer__list { display: grid; gap: 14px; }
.site-drawer__list a { font-family: var(--loom-serif); font-size: 2.2rem; line-height: 1.2; }
.site-drawer__list--small { margin-top: 40px; gap: 10px; }
.site-drawer__list--small a { font-family: var(--loom-sans); font-size: 15px; color: var(--loom-muted); }
body.drawer-open { overflow: hidden; }

/* The links rise in one after another. transform needs a block box, and the
   delays live only on .is-open so closing is one quick movement, not a queue. */
.site-drawer__list a {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s var(--loom-ease), transform 0.6s var(--loom-ease);
}
.site-drawer.is-open .site-drawer__list a { opacity: 1; transform: none; }
.site-drawer.is-open .site-drawer__list li:nth-child(1) a { transition-delay: 0.10s; }
.site-drawer.is-open .site-drawer__list li:nth-child(2) a { transition-delay: 0.17s; }
.site-drawer.is-open .site-drawer__list li:nth-child(3) a { transition-delay: 0.24s; }
.site-drawer.is-open .site-drawer__list li:nth-child(4) a { transition-delay: 0.31s; }
.site-drawer.is-open .site-drawer__list li:nth-child(5) a { transition-delay: 0.38s; }
.site-drawer.is-open .site-drawer__list li:nth-child(6) a { transition-delay: 0.45s; }
.site-drawer.is-open .site-drawer__list--small li:nth-child(1) a { transition-delay: 0.34s; }
.site-drawer.is-open .site-drawer__list--small li:nth-child(2) a { transition-delay: 0.40s; }
.site-drawer.is-open .site-drawer__list--small li:nth-child(3) a { transition-delay: 0.46s; }
.site-drawer.is-open .site-drawer__list--small li:nth-child(4) a { transition-delay: 0.52s; }

/* Hamburger turns into a cross. */
.site-header__toggle { position: relative; }
.site-header__toggle .loom-icon { transition: opacity 0.25s var(--loom-ease), transform 0.4s var(--loom-ease); }
.site-header__toggle-cross {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -12px;
	opacity: 0;
	transform: rotate(-90deg) scale(0.6);
}
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars { opacity: 0; transform: rotate(90deg) scale(0.6); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-cross { opacity: 1; transform: none; }

/* ---------- Home: hero ---------- */
.hero { padding-block: clamp(24px, 2.85vw, 55px) clamp(28px, 2.3vw, 44px); }
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.415fr) minmax(0, 0.585fr);
	gap: clamp(32px, 4vw, 80px);
	align-items: start;
}
.hero__copy { padding-top: clamp(0px, 2.2vw, 44px); }
.hero__title { margin-bottom: clamp(22px, 1.8vw, 34px); }
.hero__text { max-width: 470px; margin-bottom: clamp(28px, 2.3vw, 44px); font-size: 15px; color: var(--loom-muted); }
.hero__scroll {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 14px;
	margin-top: clamp(28px, 2.3vw, 44px);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--loom-muted);
}
.hero__scroll .loom-icon { width: 14px; height: 14px; color: var(--loom-gold); }

/* ---------- Statement ---------- */
.statement { padding-block: clamp(28px, 2.7vw, 52px); }
.statement__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr);
	gap: 40px clamp(40px, 5vw, 100px);
	align-items: start;
}
.statement__aside .loom-eyebrow { margin-bottom: 14px; }
.statement__text {
	font-family: var(--loom-serif);
	font-size: clamp(1.6rem, 2.1vw, 2.55rem);
	line-height: 1.28;
	color: var(--loom-text);
}
.statement--world .statement__text { font-size: clamp(1.8rem, 2.55vw, 3.05rem); line-height: 1.2; }
.statement__sub { margin-top: clamp(24px, 2.3vw, 44px); font-size: 15px; color: var(--loom-muted); max-width: 1180px; }
.statement--world .statement__grid { align-items: center; }

/* ---------- Collection ---------- */
.collection { background: var(--loom-bg); padding-bottom: 0; }
.collection--archive { padding-bottom: var(--loom-section); }
.product-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 48px var(--loom-gap);
	margin: 0 !important;
	padding: 0 !important;
}
/* Fewer than five (a fragrance page excludes itself) keeps a full row, no gap. */
.product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.product-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-grid--1 { grid-template-columns: minmax(0, 320px); }
.product-grid::before,
.product-grid::after { display: none !important; }
.product-grid__item { width: auto !important; margin: 0 !important; float: none !important; }

.product-card__media { display: block; margin-bottom: 22px; }
.product-card__media img { transition: transform 1.2s var(--loom-ease); }
.product-card:hover .product-card__media img { transform: scale(1.035); }
.product-card__badge {
	position: absolute;
	top: 14px; left: 14px;
	padding: 5px 12px;
	background: rgba(40, 38, 34, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #e9e3d8;
}
.product-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product-card__name {
	font-size: clamp(1.6rem, 1.8vw, 2.15rem);
	text-transform: uppercase;
	letter-spacing: 0.005em;
	line-height: 1.05;
}
.product-card__price { font-size: 16px; font-weight: 500; color: var(--loom-text-soft); white-space: nowrap; }
.product-card__type,
.product-card__accords {
	margin-top: 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--loom-muted);
}
.product-card__text { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--loom-muted); }
.product-card__accords { margin-top: 10px; color: var(--loom-gold-text); }

.collection__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: clamp(48px, 4.2vw, 80px);
	padding-block: clamp(20px, 1.6vw, 30px) clamp(28px, 2.2vw, 42px);
	border-top: 1px solid var(--loom-line);
}

.loom-admin-note { padding: 24px; border: 1px dashed var(--loom-line-strong); color: var(--loom-muted); font-size: 14px; }

/* ---------- Notes ---------- */
.notes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 1.6vw, 30px); }
.note .media { margin-bottom: clamp(20px, 1.6vw, 30px); }
.note__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.note__head .note__label { margin: 0; white-space: nowrap; }
.note__title { font-size: clamp(1.6rem, 1.75vw, 2.1rem); }
.notes--product .note__label { margin: 0 0 14px; font-size: 12px; }
.notes--product .note__title { font-size: clamp(1.75rem, 2vw, 2.4rem); }
.note__text { margin-top: 18px; font-size: 14.5px; color: var(--loom-muted); max-width: 540px; }
.notes__footer {
	margin-top: clamp(40px, 3.4vw, 64px);
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--loom-muted);
}

/* ---------- Landscape banner ---------- */
.landscape {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(460px, 33vw, 640px);
	overflow: hidden;
	text-align: center;
	isolation: isolate;
}
.landscape__bg { position: absolute; inset: 0; z-index: -1; }
.landscape__bg img,
.landscape__bg .loom-ph { width: 100%; height: 100%; object-fit: cover; }
.landscape__bg::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12, 11, 10, 0.55), rgba(12, 11, 10, 0.62));
}
.landscape__inner { padding-block: 40px; }
.landscape .display-2 { font-size: clamp(2.5rem, 3.6vw, 4.25rem); line-height: 1.12; }
.landscape__text { max-width: 640px; margin: 28px auto 0; font-size: 15px; color: var(--loom-text-soft); }
.landscape__foot {
	margin-top: clamp(40px, 3.4vw, 64px);
	font-size: 13px; font-weight: 500;
	letter-spacing: 0.035em; text-transform: uppercase;
	color: var(--loom-text-soft);
}

/* ---------- Restraint (image + numbered list) ---------- */
.restraint__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.385fr) minmax(0, 0.615fr);
	gap: clamp(36px, 5.8vw, 112px);
	align-items: center;
}
.restraint--world .restraint__grid { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); gap: clamp(36px, 5.7vw, 112px); }
.restraint__copy .display-2 { margin-bottom: clamp(22px, 1.8vw, 34px); }
.restraint__copy .lead { max-width: 960px; }
.numbered { margin-top: clamp(24px, 2.2vw, 40px); border-top: 1px solid var(--loom-line); }
.numbered__item {
	display: grid;
	grid-template-columns: 50px 1fr;
	padding-block: clamp(18px, 1.5vw, 26px);
	border-bottom: 1px solid var(--loom-line);
}
.numbered__item:last-child { border-bottom: 0; }
.numbered__num { padding-top: 4px; font-size: 13px; color: var(--loom-gold-text); }
.numbered__title { font-size: clamp(1.45rem, 1.45vw, 1.75rem); }
.numbered__text { margin-top: 8px; font-size: 14px; color: var(--loom-muted); }
.restraint__copy .loom-link { margin-top: 12px; }

/* ---------- Ritual ---------- */
.ritual__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0;
	align-items: center;
}
.ritual__copy { padding-right: clamp(0px, 5vw, 96px); }
.ritual__copy .display-2 { margin-bottom: clamp(20px, 1.8vw, 34px); }
.ritual__copy .lead { margin-bottom: clamp(20px, 1.6vw, 30px); }
.ritual__list li { padding-block: clamp(16px, 1.4vw, 24px); border-top: 1px solid var(--loom-line); max-width: 560px; }
.ritual__list li:first-child { max-width: none; }
.ritual__title { font-size: clamp(1.35rem, 1.35vw, 1.65rem); }
.ritual__list p { margin-top: 6px; font-size: 14px; color: var(--loom-muted); }
.ritual--reverse .ritual__grid { grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr); gap: clamp(36px, 5.6vw, 110px); }
.ritual--reverse .ritual__media { order: -1; }
.ritual--reverse .ritual__copy { padding-right: 0; }
.ritual--reverse .ritual__list li { max-width: none; }
.ritual--reverse .media--ritual { aspect-ratio: 720 / 680; }

/* ---------- Journal ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(20px, 2.1vw, 40px); }
.post-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-card__media { display: block; margin-bottom: 26px; }
.post-card__media img { transition: transform 1.2s var(--loom-ease); }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card .loom-eyebrow { margin-bottom: 14px; }
.post-card__title { font-size: clamp(1.6rem, 1.75vw, 2.1rem); }
.post-card__excerpt { margin: 16px 0 22px; font-size: 14.5px; color: var(--loom-muted); }
.pagination { margin-top: 64px; display: flex; gap: 18px; font-size: 14px; }
.pagination .current { color: var(--loom-gold); }

/* ---------- Reviews ---------- */
.reviews { background: var(--loom-bg-alt); }
.reviews .section-head { grid-template-columns: 1fr minmax(0, 0.48fr); }
.reviews__score { justify-self: start; padding-bottom: 6px; }
.reviews__score-row { display: flex; align-items: center; gap: 12px; }
.reviews__number { font-family: var(--loom-serif); font-size: clamp(1.75rem, 1.8vw, 2.1rem); line-height: 1; }
.reviews__note { margin-top: 8px; font-size: 13px; color: var(--loom-muted); }
.loom-stars { display: inline-flex; gap: 4px; color: var(--loom-gold); font-size: 15px; line-height: 1; }
.loom-stars .is-off { opacity: 0.25; }
.reviews .section-head .loom-stars { font-size: 20px; gap: 6px; }

.reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.4vw, 28px); }
.review-card {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 1.9vw, 36px);
	background: var(--loom-surface-2);
	min-height: 300px;
}
.review-card__mark { font-family: var(--loom-serif); font-size: 44px; line-height: 0.6; height: 24px; color: var(--loom-gold); }
.review-card__quote {
	flex: 1;
	margin: 18px 0 30px;
	font-family: var(--loom-serif);
	font-style: italic;
	font-size: clamp(1.15rem, 1.05vw, 1.3rem);
	line-height: 1.55;
	color: var(--loom-text-soft);
}
.review-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.review-card__name { display: block; font-size: 13.5px; font-weight: 500; color: var(--loom-text); }
.review-card__meta { display: block; font-size: 12.5px; color: var(--loom-muted); }
.review-card .loom-stars { font-size: 12px; gap: 3px; }

.reviews__empty {
	margin-top: clamp(4px, 0.8vw, 12px);
	max-width: 640px;
	font-size: clamp(15px, 1vw, 18px);
	line-height: 1.65;
	color: var(--loom-muted);
}
.reviews__write { margin-top: 48px; }
.reviews__write summary { list-style: none; }
.reviews__write summary::-webkit-details-marker { display: none; }
.reviews__form { max-width: 720px; margin-top: 32px; }

/* ---------- CTA ---------- */
.cta--home { padding-top: var(--loom-section); }
.cta__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
	gap: clamp(36px, 5.2vw, 100px);
	align-items: center;
}
.cta__grid--world { grid-template-columns: minmax(0, 0.33fr) minmax(0, 0.67fr); }
.cta__copy .display-2 { margin-bottom: clamp(24px, 2vw, 40px); }
.cta--home .display-2 { font-size: clamp(2.5rem, 3.6vw, 4.25rem); }
.cta__copy .lead { max-width: 1040px; margin-bottom: clamp(28px, 2.3vw, 44px); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.cta__note { font-size: 13.5px; color: var(--loom-muted); }
.cta--world { background: var(--loom-bg); }

/* ---------- Page hero (Our world / Contact) ---------- */
.page-hero { padding-block: clamp(24px, 2.25vw, 45px) clamp(32px, 3vw, 60px); }
.page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
	gap: clamp(32px, 6vw, 110px);
	align-items: center;
}
.page-hero__copy .display-1 { margin-bottom: clamp(24px, 2.2vw, 42px); }
.page-hero__text { max-width: 720px; font-size: 15px; color: var(--loom-muted); }
.page-hero__copy .italic-line { margin: clamp(28px, 2.4vw, 46px) 0 22px; }
.page-hero__grid--contact { grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr); align-items: start; }
.page-hero__grid--contact .display-1 { font-size: clamp(2.75rem, 5.3vw, 6.4rem); }
.page-hero--contact .page-hero__text { max-width: 660px; }

/* ---------- A way of seeing ---------- */
.seeing__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
	gap: clamp(36px, 6vw, 112px);
	align-items: center;
}
.seeing__copy .display-2 { margin-bottom: clamp(22px, 1.8vw, 34px); }
.seeing__copy .lead + .lead { margin-top: 22px; }
.seeing__copy .loom-link { margin-top: clamp(28px, 2.3vw, 44px); }

/* ---------- Contact ---------- */
.contact { padding-bottom: var(--loom-section); }
.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
	gap: clamp(36px, 5.5vw, 106px);
	align-items: start;
}
.contact__guide .display-3 { font-size: clamp(2rem, 2.6vw, 3.1rem); margin-bottom: clamp(24px, 2vw, 40px); }
.guide { border-top: 1px solid var(--loom-line); }
.guide__item { padding-block: clamp(18px, 1.5vw, 26px); border-bottom: 1px solid var(--loom-line); }
.guide__title { display: flex; align-items: baseline; gap: 18px; font-size: clamp(1.5rem, 1.6vw, 1.9rem); margin-bottom: 12px; }
.guide__num { font-family: var(--loom-sans); font-size: 11px; color: var(--loom-muted); position: relative; top: -0.6em; }
.guide__item p { font-size: 14.5px; color: var(--loom-muted); }
.contact__guide .italic-line { margin-top: clamp(22px, 1.8vw, 34px); }

.contact__panel { background: var(--loom-surface); padding: clamp(28px, 2.5vw, 48px); }
.contact__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: clamp(24px, 1.8vw, 34px); }
.contact__panel-head .display-3 { font-size: clamp(2rem, 2.2vw, 2.6rem); }
.contact__required { font-size: 12px; color: var(--loom-muted); }

.loom-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field { position: relative; margin: 0 0 26px; }
.field label {
	display: block;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	color: var(--loom-text-soft);
}
.field input,
.field select,
.field textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.comment-form select {
	width: 100%;
	min-height: 60px;
	padding: 16px 18px;
	background: rgba(10, 10, 9, 0.35);
	border: 1px solid var(--loom-line-strong);
	border-radius: 0;
	font-size: 15px;
	color: var(--loom-text);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.25s var(--loom-ease);
}
.field textarea,
.comment-form textarea { min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--loom-dim); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--loom-gold); }
.field select { padding-right: 48px; cursor: pointer; }
.field select option { background: var(--loom-surface); }
.field__chevron { position: absolute; right: 18px; top: 52px; width: 16px; height: 16px; color: var(--loom-muted); pointer-events: none; }
.field__hint { display: block; margin-top: 12px; font-size: 12.5px; color: var(--loom-muted); }
.field--check { display: flex; align-items: flex-start; gap: 14px; }
.field--check input {
	flex: 0 0 18px;
	width: 18px; height: 18px; min-height: 0;
	margin-top: 1px;
	padding: 0;
	border: 1px solid var(--loom-line-strong);
	background: transparent;
	cursor: pointer;
}
.field--check input:checked { background: var(--loom-gold); border-color: var(--loom-gold); box-shadow: inset 0 0 0 3px var(--loom-surface); }
.field--check label { margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--loom-muted); }
.field--check a { text-decoration: underline; text-underline-offset: 2px; }
.loom-form__submit { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 8px; }
.loom-form__submit .loom-btn { min-height: 64px; gap: 44px; }
.loom-form__note { max-width: 260px; font-size: 12.5px; color: var(--loom-muted); }
.form-message { margin-bottom: 24px; padding: 16px 18px; border: 1px solid var(--loom-gold); color: var(--loom-text); font-size: 14px; }
.form-message.is-error { border-color: #b06a5a; }

.care__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 54px); }
.care__item { padding-top: clamp(24px, 1.8vw, 34px); border-top: 1px solid var(--loom-line); }
.care__title { font-size: clamp(1.6rem, 1.75vw, 2.1rem); margin-bottom: 18px; }
.care__item p { font-size: 14.5px; color: var(--loom-muted); }

.strip { padding-block: clamp(20px, 1.7vw, 32px); }
.strip__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--loom-bg-deep); padding-top: clamp(28px, 2.4vw, 46px); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr); gap: 48px; }
.site-footer__title { font-size: clamp(1.8rem, 1.8vw, 2.15rem); margin-bottom: 18px; }
.site-footer__text { max-width: 470px; font-size: 14px; color: var(--loom-muted); }
.loom-news {
	display: flex;
	align-items: center;
	max-width: 470px;
	margin-top: 28px;
	border-bottom: 1px solid var(--loom-line-strong);
}
.loom-news input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	background: transparent;
	border: 0;
	outline: none;
	font-size: 14px;
	color: var(--loom-text);
}
.loom-news input::placeholder { color: var(--loom-text-soft); }
.loom-news button { color: var(--loom-gold); padding: 8px 0 8px 12px; }
.loom-news button .loom-icon { width: 18px; height: 18px; }
.loom-news__msg { margin-top: 12px; font-size: 13px; color: var(--loom-gold); }
.loom-news__msg.is-error { color: #d39585; }
.site-footer__note { max-width: 470px; margin-top: 18px; font-size: 12.5px; color: var(--loom-muted); }

.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 6px; }
.site-footer__col .loom-eyebrow { font-size: 12.5px; margin-bottom: 14px; }
.site-footer__list { display: grid; gap: 10px; font-size: 14px; color: var(--loom-text-soft); }
.site-footer__list a { display: inline-flex; align-items: center; gap: 4px; color: var(--loom-text-soft); }
.site-footer__list a:hover { color: var(--loom-gold); }
.site-footer__list .loom-icon { width: 12px; height: 12px; }
.site-footer__locale { margin-top: 10px; }

.site-footer__brand { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 3.4vw, 64px); padding-bottom: clamp(24px, 2vw, 40px); }
.loom-logo--footer { text-align: left; }
.loom-logo--footer .loom-logo__script { font-size: clamp(48px, 3.9vw, 76px); }
.site-footer__tagline { font-family: var(--loom-serif); font-style: italic; font-size: clamp(1.3rem, 1.35vw, 1.6rem); color: var(--loom-text-soft); }
.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding-block: 28px 32px;
	border-top: 1px solid var(--loom-line);
	font-size: 12.5px;
	color: var(--loom-muted);
}
.site-footer__legal { display: flex; gap: 32px; }
.site-footer__legal a { color: var(--loom-muted); }

/* ---------- Articles & pages ---------- */
.article__head { padding-block: clamp(28px, 3vw, 60px) clamp(16px, 1.5vw, 28px); max-width: 1100px; }
.article__title { margin-bottom: 24px; }
.article__dek { font-family: var(--loom-serif); font-style: italic; font-size: clamp(1.35rem, 1.6vw, 1.9rem); color: var(--loom-text-soft); max-width: 820px; }
.article__media { margin-bottom: clamp(48px, 4.5vw, 88px); }
.article__body { width: min(780px, 100% - 2 * var(--loom-gutter)); margin-inline: auto; }
.article__foot { padding-block: 28px var(--loom-section); }
.page-default__head { padding-block: clamp(28px, 2.5vw, 48px) clamp(16px, 1.5vw, 28px); }
.page-default { padding-bottom: var(--loom-section); }
/* Long-form pages (privacy, terms) read as one centred column: the heading
   used to sit at the page edge while .article__body centred itself, so the two
   never lined up. Both now share the same measure and centre together. */
.page-default:not(.page-default--shop) .page-default__head,
.page-default:not(.page-default--shop) .entry-content {
	width: min(820px, 100% - 2 * var(--loom-gutter));
	max-width: none;
	margin-inline: auto;
}
.page-default:not(.page-default--shop) .entry-content > h2 { margin-top: clamp(36px, 3vw, 56px); }

.entry-content { font-size: 17px; line-height: 1.8; color: var(--loom-text-soft); }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { font-size: clamp(1.9rem, 2.4vw, 2.6rem); margin-top: 1.8em; color: var(--loom-text); }
.entry-content h3 { font-size: clamp(1.5rem, 1.8vw, 2rem); margin-top: 1.6em; color: var(--loom-text); }
.entry-content a { color: var(--loom-gold); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul { list-style: disc; padding-left: 1.2em; }
.entry-content ol { list-style: decimal; padding-left: 1.2em; }
.entry-content blockquote {
	margin: 2em 0;
	padding-left: 28px;
	border-left: 1px solid var(--loom-gold);
	font-family: var(--loom-serif);
	font-style: italic;
	font-size: 1.5em;
	line-height: 1.45;
	color: var(--loom-text);
}
.entry-content img { height: auto; }
.entry-content figcaption { margin-top: 12px; font-size: 13px; color: var(--loom-muted); }
.entry-content .alignwide { width: min(1200px, 100vw - 2 * var(--loom-gutter)); margin-left: 50%; transform: translateX(-50%); }
.entry-content .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

.comment-list { margin: 32px 0 48px; display: grid; gap: 28px; }
.comment-list .comment-body { padding-bottom: 24px; border-bottom: 1px solid var(--loom-line); font-size: 15px; color: var(--loom-text-soft); }
.comment-form { display: grid; gap: 20px; }
.comment-form label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.035em; text-transform: uppercase; color: var(--loom-text-soft); }
.comment-form .form-submit { margin: 0; }
.comment-form-cookies-consent { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--loom-muted); }
.comment-form-cookies-consent label { margin: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }

.notfound__inner { max-width: 980px; padding-block: clamp(20px, 3vw, 60px); }
.notfound .display-1 { margin-bottom: 28px; }
.notfound__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 44px; }

/* ---------- Reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--loom-ease), transform 1s var(--loom-ease); }
	.js .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1280px) {
	.product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.site-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	:root { --loom-header-tall: 84px; }
	.site-header__inner { grid-template-columns: auto 1fr auto; gap: 16px; min-height: 84px; }
	.site-header__toggle { display: inline-flex; color: var(--loom-text); }
	.site-nav { display: none; }
	.loom-logo { justify-self: center; }
	.loom-logo__script { font-size: 44px; }
	.loom-logo__sub { display: none; }
	.site-tools { gap: 16px; }
	.site-tools__locale { display: none; }

	.hero__grid,
	.page-hero__grid,
	.page-hero__grid--contact,
	.restraint__grid,
	.restraint--world .restraint__grid,
	.ritual__grid,
	.ritual--reverse .ritual__grid,
	.seeing__grid,
	.cta__grid,
	.cta__grid--world,
	.contact__grid { grid-template-columns: 1fr; }

	.ritual__grid,
	.ritual--reverse .ritual__grid { gap: 40px; }
	.ritual__copy { padding-right: 0; }
	.ritual__media { order: -1; }
	.ritual__list li { max-width: none; }
	.cta__grid--world .media { max-width: 520px; }

	.statement__grid { grid-template-columns: 1fr; }
	.section-head,
	.reviews .section-head,
	.section-head--link { grid-template-columns: 1fr; align-items: start; }
	.section-head__text { justify-self: start; }
	.notes__grid,
	.reviews__grid,
	.care__grid { grid-template-columns: 1fr 1fr; }
	.post-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* Below 600px WordPress makes the admin bar position:absolute, so it scrolls
   away with the page. Holding the fixed header 46px down would leave a strip
   of scrolling content above it. */
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
}

@media (max-width: 680px) {
	body { font-size: 15px; }
	.product-grid { grid-template-columns: 1fr 1fr; gap: 36px 14px; }
	.product-card__row { flex-direction: column; gap: 4px; }
	.product-card__name { font-size: 1.45rem; }
	.notes__grid,
	.reviews__grid,
	.care__grid,
	.post-grid,
	.post-grid--2 { grid-template-columns: 1fr; }
	.collection__foot,
	.strip__inner,
	.site-footer__brand,
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
	.site-footer__cols { grid-template-columns: 1fr 1fr; }
	.loom-form__row { grid-template-columns: 1fr; }
	.loom-form__submit { flex-direction: column; align-items: flex-start; }
	.caption-row { flex-direction: column; gap: 6px; margin-top: 16px; }
	.site-tools__bag { font-size: 13px; }
	.note__head { flex-direction: column; gap: 6px; }
}

/* ------------------------------------------------------------------ *
 * Touch targets.
 *
 * Several controls are small by design — the search icon is 18px, the
 * footer links sit on a 23px line, the bag label is 21px tall. On a
 * touch screen that is under the 24px minimum WCAG 2.5.8 asks for, and
 * well under what is comfortable to hit with a thumb.
 *
 * Nothing is resized, because that would change the approved design.
 * Instead an invisible pseudo-element carries the extra hit area, so
 * the control stays exactly where and how it looks while the tappable
 * region grows around it.
 *
 * Expansion never exceeds half the measured gap to the next control,
 * so two neighbouring targets cannot overlap and steal each other's
 * taps. Measured gaps: footer list 10px, product links 16px.
 * ------------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 900px) {
	.site-header__toggle,
	.site-tools__search,
	.site-tools__bag,
	.show-password-input,
	.hero__scroll,
	.product-summary__rating,
	.product-summary__strip,
	.product-summary__links a,
	.site-footer__list a,
	.site-footer__legal a,
	.woocommerce-LostPassword a { position: relative; }

	/* Isolated controls: a full 44x44 target. */
	.site-header__toggle::after,
	.site-tools__search::after,
	.site-tools__bag::after,
	.show-password-input::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* In-flow links: grow into the surrounding gap only. */
	.hero__scroll::after,
	.product-summary__rating::after,
	.product-summary__strip::after,
	.product-summary__links a::after,
	.site-footer__legal a::after,
	.woocommerce-LostPassword a::after {
		content: '';
		position: absolute;
		inset-block: -8px;
		inset-inline: 0;
	}

	.site-footer__list a::after {
		content: '';
		position: absolute;
		inset-block: -5px;
		inset-inline: 0;
	}
}