:root {
	--mmj-cream: #fdefd5;
	--mmj-paper: #fffaf0;
	--mmj-espresso: #3d2214;
	--mmj-deep-brown: #150d04;
	--mmj-mocha: #6e3b1d;
	--mmj-cinnamon: #a55424;
	--mmj-plum: #6b3658;
	--mmj-aubergine: #321b2b;
	--mmj-orange: #c8672d;
	--mmj-brass: #b78945;
}

body, button, input, select, textarea { font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", Arial, sans-serif; }
body {
	background-color: var(--mmj-cream);
	background-image: linear-gradient(rgba(74,42,24,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(74,42,24,.025) 1px, transparent 1px);
	background-size: 32px 32px;
}
h1 { font-size: clamp(3.2rem, 5.5vw, 4.7rem); }
h2 { font-size: clamp(2.45rem, 4.5vw, 3.9rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
h1, h2, h3, h4, h5, h6 { font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", Arial, sans-serif; }
a { font-style: normal; }
em { color: var(--mmj-plum); font-weight: 400; }
.mmj-icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; }

.site-header { position: sticky; top: 0; background: rgba(253,239,213,.94); backdrop-filter: blur(14px); }
.site-header .masthead { width: 100%; max-width: none; margin: 0; padding: .7rem clamp(1rem,2.25vw,3rem); }
.masthead { grid-template-columns: clamp(240px,21vw,400px) minmax(0,1fr); gap: clamp(1rem,1.6vw,2rem); }
.site-logo { display: block; justify-self: start; width: 100%; max-width: 400px; line-height: 0; }
.site-logo img { display: block; width: 100%; max-width: none; max-height: none; height: auto; object-fit: contain; }
.primary-nav { min-width: 0; }
.primary-nav ul { flex-wrap: nowrap; justify-content: flex-end; gap: clamp(.5rem,.85vw,1rem); }
.primary-nav a { white-space: nowrap; font-family: inherit; font-size: .72rem; font-style: normal; font-weight: 750; line-height: 1; letter-spacing: .075em; text-transform: uppercase; }
.primary-nav a:hover, .primary-nav a:focus { color: var(--mmj-plum); }
.button, .text-link { font-style: normal; letter-spacing: .07em; text-transform: uppercase; }

.salon-hero { position: relative; overflow: hidden; min-height: 720px; padding: clamp(4rem,7vw,7rem) 0 4rem; background: var(--mmj-cream); }
.salon-hero::before { content: ""; position: absolute; width: 420px; height: 420px; left: -170px; bottom: -210px; border: 1px solid rgba(107,54,88,.26); border-radius: 50%; box-shadow: 0 0 0 45px rgba(107,54,88,.05), 0 0 0 90px rgba(107,54,88,.035); }
.salon-hero__ornament { position: absolute; right: -4rem; top: 2rem; color: rgba(107,54,88,.08); transform: rotate(-18deg); }
.salon-hero__ornament .mmj-icon { width: 24rem; height: 24rem; stroke-width: .5; }
.salon-hero__grid { display: grid; grid-template-columns: minmax(360px,.82fr) minmax(500px,1.18fr); gap: clamp(2rem,5vw,6rem); align-items: center; }
.salon-hero__copy { position: relative; z-index: 3; }
.salon-hero__copy h1 { margin: .25rem 0 1.4rem; max-width: 680px; letter-spacing: -.04em; }
.salon-hero__copy p { max-width: 590px; font-size: 1.12rem; }
.eyebrow, .section-kicker { font-family: inherit; font-style: normal; letter-spacing: .11em; text-transform: uppercase; }
.section-kicker { display: flex; align-items: center; gap: .5rem; color: var(--mmj-cinnamon); font-size: .87rem; font-weight: 700; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--mmj-espresso); font-style: normal; font-weight: 750; }

.salon-collage { position: relative; min-height: 580px; }
.salon-photo { position: absolute; margin: 0; background: var(--mmj-paper); box-shadow: 0 24px 65px rgba(44,22,12,.24); }
.salon-photo img { width: 100%; height: 100%; object-fit: cover; }
.salon-photo--main { inset: 0 0 3rem 5rem; transform: rotate(1.4deg); border: 10px solid var(--mmj-paper); }
.salon-photo--main figcaption { position: absolute; right: 1rem; bottom: 1rem; padding: .45rem .7rem; background: rgba(253,239,213,.93); color: var(--mmj-espresso); font-size: .75rem; font-style: italic; }
.salon-photo--small { z-index: 2; width: 36%; height: 50%; left: 0; bottom: 0; transform: rotate(-6deg); border: 8px solid var(--mmj-paper); }

.mocha-ribbon { overflow: hidden; background: var(--mmj-aubergine); color: var(--mmj-cream); border-block: 1px solid var(--mmj-brass); }
.mocha-ribbon__track { width: max-content; display: flex; align-items: center; gap: 1.3rem; padding: .85rem 0; animation: mmj-ribbon 32s linear infinite; font-style: italic; }
.mocha-ribbon__track span { white-space: nowrap; }
.mocha-ribbon .mmj-icon { color: var(--mmj-brass); }
@keyframes mmj-ribbon { to { transform: translateX(-50%); } }

.room-section, .departments-section, .attention-section, .salon-wall { padding: clamp(5rem,10vw,9rem) 0; }
.room-intro { display: grid; grid-template-columns: .55fr 1fr; gap: 3rem; align-items: start; margin-bottom: 3.5rem; }
.room-intro h2 { margin: 0; max-width: 800px; }
.room-grid { display: grid; grid-template-columns: 1.55fr .65fr; gap: 2.5rem; align-items: start; }
.room-feature { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--mmj-paper); box-shadow: 0 18px 50px rgba(61,34,20,.13); }
.room-feature__image { position: relative; min-height: 520px; overflow: hidden; }
.room-feature__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.room-feature:hover .room-feature__image img { transform: scale(1.035); }
.photo-tag { position: absolute; left: 0; bottom: 1.2rem; padding: .55rem .85rem; background: var(--mmj-plum); color: #fff; font-size: .75rem; font-style: italic; }
.room-feature__copy { align-self: center; padding: clamp(2rem,4vw,4rem); }
.room-feature__copy h3 { margin: .35rem 0 1rem; }
.room-notes { display: grid; gap: 2rem; }
.side-observation { position: relative; padding: 2.2rem; background: var(--mmj-cream); border: 1px solid rgba(61,34,20,.22); border-left: 6px solid var(--mmj-brass); box-shadow: 8px 10px 0 rgba(107,54,88,.1); }
.side-observation .mmj-icon { width: 2rem; height: 2rem; margin-bottom: .8rem; color: var(--mmj-plum); }
.side-observation span { color: var(--mmj-cinnamon); font-size: .75rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.side-observation .section-kicker .mmj-icon { width: 1.2em; height: 1.2em; margin: 0; }
.side-observation p { margin: .7rem 0 0; font-size: 1.2rem; line-height: 1.48; }
.mini-story { padding: 2rem; background: var(--mmj-plum); color: var(--mmj-cream); }
.mini-story .mmj-icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; color: var(--mmj-brass); }
.mini-story .section-kicker { color: var(--mmj-brass); }
.mini-story .section-kicker .mmj-icon { width: 1.2em; height: 1.2em; margin: 0; }
.mini-story h3, .mini-story h3 a { color: var(--mmj-cream); }

.watch-section { padding: clamp(5rem,9vw,8rem) 0; background: var(--mmj-aubergine); color: var(--mmj-cream); }
.watch-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2.5rem,6vw,6rem); align-items: center; }
.watch-copy h2, .watch-copy p { color: var(--mmj-cream); }
.watch-copy h2 { margin: .5rem 0 1.2rem; }
.video-window { position: relative; display: block; overflow: hidden; border: 10px solid var(--mmj-cream); box-shadow: 24px 24px 0 var(--mmj-plum); }
.video-window img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .8s ease; }
.video-window:hover img { transform: scale(1.03); }
.play-button { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 2px solid var(--mmj-cream); border-radius: 50%; background: rgba(107,54,88,.86); color: #fff; font-size: 1.7rem; box-shadow: 0 0 0 12px rgba(253,239,213,.15); transition: transform .25s ease; }
.video-window:hover .play-button { transform: translate(-50%,-50%) scale(1.08); }
.video-caption { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .8rem; background: var(--mmj-cream); color: var(--mmj-espresso); font-size: .8rem; font-style: italic; }
.mmj-feature-media { position: relative; display: block; width: 100%; }
.mmj-feature-media iframe, .mmj-feature-media video { display: block; width: 100%; aspect-ratio: 16/9; height: auto; border: 0; object-fit: cover; }
.mmj-feature-media--card { overflow: hidden; }
.mmj-feature-media--card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .55s ease; }
.story-card.featured .mmj-feature-media--card img { aspect-ratio: 16/10; }
.mmj-feature-media--card:hover img { transform: scale(1.035); }
.mmj-media-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; display: grid; place-items: center; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(107,54,88,.9); color: #fff; box-shadow: 0 0 0 8px rgba(253,239,213,.22); }
.article-featured .mmj-feature-media video, .article-featured .mmj-feature-media iframe { max-height: 760px; }
.button--cream { background: var(--mmj-cream); border-color: var(--mmj-cream); color: var(--mmj-aubergine); }

.departments-section { background: var(--mmj-paper); }
.department-header { display: grid; grid-template-columns: 1.2fr .65fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.department-header h2 { margin: .35rem 0 0; }
.department-collage { display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: repeat(2,minmax(280px,390px)); gap: 1.5rem; }
.department-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: end; padding: 2rem; color: #fff; text-decoration: none; isolation: isolate; }
.department-panel::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(24,12,8,.88)); }
.department-panel img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.department-panel:hover img { transform: scale(1.05); }
.department-panel--tall { grid-row: span 2; }
.department-icon { position: absolute; top: 1.3rem; right: 1.3rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--mmj-cream); color: var(--mmj-plum); }
.department-icon .mmj-icon { width: 1.9rem; height: 1.9rem; }
.department-title { color: inherit; font-size: clamp(2rem,4vw,3.4rem); font-style: normal; font-weight: 750; line-height: 1; }
.department-subtitle { max-width: 500px; margin-top: .65rem; color: inherit; font-size: 1rem; }
.department-panel--paper { justify-content: center; background: var(--mmj-cream); color: var(--mmj-espresso); border: 1px solid rgba(61,34,20,.25); }
.department-panel--paper::before { content: ""; position: absolute; inset: 16px; border: 1px solid rgba(61,34,20,.19); }
.department-panel--paper::after, .department-panel--plum::after { display: none; }
.archive-stamp { align-self: start; margin-top: 1.25rem; padding: .35rem .55rem; border: 2px solid var(--mmj-cinnamon); color: var(--mmj-cinnamon); font-size: .7rem; letter-spacing: .12em; transform: rotate(-3deg); }
.department-panel--plum { justify-content: center; background: var(--mmj-plum); color: var(--mmj-cream); }

.attention-section { background: var(--mmj-cream); overflow: hidden; }
.attention-layout { display: grid; grid-template-columns: .55fr 1.45fr; gap: 4rem; }
.attention-title { position: sticky; top: 8rem; align-self: start; }
.attention-title h2 { margin: .4rem 0 1rem; }
.attention-clippings { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.clipping { position: relative; min-height: 280px; padding: 2.2rem; background: var(--mmj-paper); border: 1px solid rgba(61,34,20,.2); box-shadow: 8px 10px 0 rgba(61,34,20,.08); }
.clipping:nth-child(2n) { transform: rotate(1.2deg); }
.clipping:nth-child(3n) { transform: rotate(-1.4deg); }
.clipping::before { content: ""; position: absolute; width: 75px; height: 18px; left: 50%; top: -9px; transform: translateX(-50%); background: rgba(183,137,69,.25); }
.clipping h3 { margin: .75rem 0; }
.clipping h3 a { color: var(--mmj-espresso); text-decoration: none; }
.clipping-date { color: var(--mmj-cinnamon); font-size: .74rem; font-style: italic; }

.salon-wall { background: var(--mmj-aubergine); color: var(--mmj-cream); text-align: center; }
.salon-wall__header { width: min(100%,820px); margin: 0 auto 4rem; }
.salon-wall h2, .salon-wall p { color: var(--mmj-cream); }
.salon-wall h2 { margin: .4rem 0 1rem; }
.portrait-wall { display: grid; grid-template-columns: .8fr 1.2fr .8fr; gap: 2.5rem; align-items: center; margin-bottom: 3rem; }
.portrait-frame { margin: 0; padding: 12px; background: var(--mmj-brass); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.portrait-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 8px solid var(--mmj-espresso); }
.portrait-frame figcaption { padding: .7rem .5rem .25rem; color: var(--mmj-aubergine); font-size: .78rem; font-style: italic; }
.portrait-frame--one { transform: rotate(-2deg); }
.portrait-frame--two { transform: translateY(-1rem); }
.portrait-frame--three { transform: rotate(2.5deg); }

.pour-section { padding: 5rem 0; background: var(--mmj-plum); color: var(--mmj-cream); }
.pour-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; }
.pour-grid h2, .pour-grid p { color: var(--mmj-cream); }
.pour-grid h2 { margin: .25rem 0 .6rem; }
.pour-grid p { margin: 0; }
.pour-cup { width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid var(--mmj-brass); border-radius: 50%; color: var(--mmj-brass); }
.pour-cup .mmj-icon { width: 3.5rem; height: 3.5rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.reveal { opacity: 1; transform: none; }
}
@media (max-width: 1080px) {
	.masthead { grid-template-columns: 1fr auto; }
	.site-logo { width: min(360px,100%); max-width: 360px; }
}
@media (max-width: 1050px) {
	.salon-hero__grid { grid-template-columns: 1fr 1fr; }
	.salon-collage { min-height: 500px; }
	.room-feature { grid-template-columns: 1fr; }
	.room-feature__image { min-height: 420px; }
	.room-grid { grid-template-columns: 1fr .55fr; }
	.watch-grid { grid-template-columns: 1fr; }
	.department-header, .attention-layout { grid-template-columns: 1fr; gap: 2rem; }
	.attention-title { position: static; }
}
@media (max-width: 780px) {
	.site-logo { width: min(290px,100%); max-width: 290px; }
	h1 { font-size: clamp(2.85rem,12vw,4.2rem); }
	h2 { font-size: clamp(2.25rem,9vw,3.5rem); }
	.salon-hero { padding-top: 3rem; }
	.salon-hero__grid, .room-intro, .room-grid, .pour-grid { grid-template-columns: 1fr; }
	.salon-collage { min-height: 520px; margin-top: 1rem; }
	.salon-photo--main { inset: 0 0 4rem 2.5rem; }
	.salon-photo--main img { object-position: 76% center; }
	.department-collage { grid-template-columns: 1fr; grid-template-rows: none; }
	.department-panel, .department-panel--tall { min-height: 420px; grid-row: auto; }
	.department-panel--paper, .department-panel--plum { min-height: 320px; }
	.attention-clippings { grid-template-columns: 1fr; }
	.portrait-wall { grid-template-columns: 1fr; width: min(100%,430px); margin-inline: auto; }
	.portrait-frame { transform: none; }
	.pour-grid { text-align: center; justify-items: center; }
}