/**
 * Riśo Events — the front-end stylesheet.
 *
 * Every value here is taken from the approved design canvas
 * (Riso Events Website.dc.html). The canvas drew its sections with inline
 * styles; this file carries the identical values under the theme's own class
 * names, so the rendered page matches the canvas section for section.
 *
 * Order follows the page: tokens, primitives, header, then each section in the
 * order front-page.php prints them, then footer, lightbox and inner pages.
 */

/* =========================================================================
   1. Tokens
   ====================================================================== */

:root {
	/* Surfaces */
	--riso-ivory: #f7f4ef; /* page ground */
	--riso-cream: #fffdf9; /* light copy, lifted panels */
	--riso-oat: #f0ebe1; /* moodboards */
	--riso-stone: #e9e3d8; /* image placeholder, hairlines on light */
	--riso-sand: #e4d9c6;

	/* Ink */
	--riso-ink: #14110f;
	--riso-ink-deep: #0f0d0c;
	--riso-ink-soft: #1d1916;
	--riso-muted: #6b6259;

	/* Gold */
	--riso-gold: #b08d57;
	--riso-gold-light: #e9cfa6;
	--riso-gold-pale: #f6e3c4;

	/* Type */
	--riso-serif: 'Cormorant Garamond', 'Times New Roman', times, serif;
	--riso-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Motion — long and eased, never snappy. */
	--riso-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--riso-ease-soft: cubic-bezier(0.22, 0.9, 0.24, 1);

	--riso-gutter: 32px;
}

/* =========================================================================
   2. Base
   ====================================================================== */

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

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

body {
	margin: 0;
	background: var(--riso-ivory);
	color: var(--riso-ink);
	font-family: var(--riso-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.riso-no-scroll {
	overflow: hidden;
}

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

/* The default link, in running prose, on the ivory ground — gold, going to ink
   under the pointer.

   Wrapped in :where() so it carries no specificity at all. Plain `a:hover`
   scores (0,1,1), which beats the (0,1,0) of any component that paints its own
   link colour: the case-study cards, the hero's scroll cue and the skip link
   are all anchors on a dark ground, and all three had their colour dragged to
   near-black the moment the pointer touched them. On the case cards that made
   the couple's name disappear into the photograph. The suite's discipline
   cards carry a hand-written `.riso-cap:hover` colour purely to win that
   fight — which is the sign the base rule, not each component, was wrong.

   At zero specificity these stay the default for anything that has not said
   otherwise, and any component rule now wins without restating a hover colour.
   Both halves must be wrapped: leaving `a` at (0,0,1) would let it outrank a
   :where()-wrapped hover, and no link would change colour at all. */
:where(a) {
	color: var(--riso-gold);
	text-decoration: none;
	transition: color 0.5s ease;
}

:where(a:hover) {
	color: var(--riso-ink);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 300;
	line-height: 1.14;
}

p {
	margin: 0;
}

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

::selection {
	background: var(--riso-sand);
	color: var(--riso-ink);
}

:focus-visible {
	outline: 1px solid var(--riso-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);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.riso-skip {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--riso-ink);
	color: var(--riso-cream);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: top 0.3s ease;
}

.riso-skip:focus {
	top: 16px;
	color: var(--riso-cream);
}

.riso-page {
	width: 100%;
	overflow-x: hidden;
	background: var(--riso-ivory);
}

/* =========================================================================
   3. Primitives
   ====================================================================== */

/* The canvas gives each section its own measure; these are those measures. */
.riso-shell {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding-inline: var(--riso-gutter);
}

.riso-shell--wide {
	max-width: 1500px;
}

.riso-shell--narrow {
	max-width: 1240px;
}

.riso-shell--tight {
	max-width: 940px;
}

.riso-display {
	font-family: var(--riso-serif);
	font-weight: 300;
	line-height: 1.1;
	font-size: clamp(32px, 4vw, 60px);
}

.riso-display--m {
	font-size: clamp(32px, 4vw, 60px);
}

.riso-display--s {
	font-size: clamp(30px, 3.6vw, 54px);
}

.riso-display--xs {
	font-size: clamp(30px, 3.2vw, 50px);
}

/* The letter-spaced micro-label that opens nearly every section. */
.riso-eyebrow {
	margin: 0 0 24px;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--riso-gold);
}

.riso-eyebrow--tick {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 30px;
}

.riso-tickmark {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
	background: var(--riso-gold);
}

/* A centred label flanked by two fading hairlines. */
.riso-rule-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0 0 30px;
	font-size: 10px;
	letter-spacing: 0.46em;
	text-transform: uppercase;
	color: var(--riso-gold);
}

.riso-rule-label--small {
	gap: 14px;
	margin: 0 0 24px;
	padding: 0 26px;
	font-size: 9px;
	letter-spacing: 0.42em;
	white-space: nowrap;
}

.riso-rule {
	display: block;
	flex: 1 1 auto;
	height: 1px;
	max-width: clamp(28px, 6vw, 80px);
	background: linear-gradient(to right, rgba(176, 141, 87, 0), var(--riso-gold));
}

.riso-rule--r {
	background: linear-gradient(to left, rgba(176, 141, 87, 0), var(--riso-gold));
}

.riso-rule-label--small .riso-rule {
	max-width: 60px;
}

/* Section headers */
.riso-head-split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: clamp(40px, 5vw, 72px);
}

.riso-head-split__note {
	max-width: 38ch;
	margin: 0;
	color: var(--riso-muted);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
}

.riso-head-split h2 {
	max-width: 15ch;
}

/* The portfolio header is a two-track grid rather than a flex row. */
.riso-head-split--end {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	align-items: end;
	gap: clamp(30px, 6vw, 100px);
	margin-bottom: clamp(42px, 5vw, 72px);
}

.riso-head-split--end .riso-head-split__note {
	max-width: 46ch;
	line-height: 1.95;
}

.riso-head-split--end h2 {
	max-width: 16ch;
}

.riso-head-centre {
	text-align: center;
	margin: 0 auto clamp(46px, 5vw, 80px);
}

.riso-prose {
	margin: 0 0 20px;
	color: var(--riso-muted);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.95;
}

.riso-prose:last-child {
	margin-bottom: 0;
}

.riso-pullquote {
	margin: 34px 0 0;
	padding-left: 26px;
	border-left: 1px solid var(--riso-gold);
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: 23px;
	line-height: 1.6;
	color: var(--riso-ink);
}

/* Buttons */
.riso-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 19px 34px;
	border: 0;
	background: var(--riso-sand);
	color: var(--riso-ink);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.4s ease, color 0.4s ease;
}

.riso-btn:hover {
	background: var(--riso-gold);
	color: var(--riso-cream);
}

.riso-btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

.riso-btn-ghost {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 16px 30px;
	border: 1px solid rgba(233, 207, 166, 0.4);
	color: var(--riso-gold-light);
	font-size: 10px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

.riso-btn-ghost:hover {
	background: var(--riso-gold-light);
	border-color: var(--riso-gold-light);
	color: var(--riso-ink);
}

.riso-underline {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--riso-gold);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--riso-ink);
}

.riso-underline:hover {
	color: var(--riso-gold);
}

/* On dark ground the same link inverts. */
.riso-chapter .riso-underline {
	gap: 0;
	padding: 0 0 6px;
	border-bottom-color: rgba(255, 253, 249, 0.5);
	color: var(--riso-cream);
}

.riso-chapter .riso-underline:hover {
	border-bottom-color: var(--riso-cream);
}

/* Gold diamonds pinned to the corners of a hairline frame. */
.riso-corners::before,
.riso-corners::after {
	content: '';
	position: absolute;
	width: 9px;
	height: 9px;
	background: var(--riso-gold);
	transform: rotate(45deg);
	pointer-events: none;
	z-index: 1;
}

.riso-corners::before {
	top: -5px;
	left: -5px;
}

.riso-corners::after {
	bottom: -5px;
	right: -5px;
}

/* The suite frame carries all four corners rather than two. */
.riso-corners--diag {
	/* The brands plate keeps only the opposing pair. */
}

/* =========================================================================
   4. Header
   ====================================================================== */

/* Over the hero the bar is fully transparent — the photograph runs edge to
   edge behind it. Readability comes from the hero's own top scrim and the
   text-shadow on the links below, which is why the design carries one. */
.riso-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	padding: 26px 0;
	background: transparent;
	box-shadow: none;
	transition: background 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease;
}

/* Past the hero it becomes the solid ivory plate. */
.riso-site-header.is-scrolled,
.riso-site-header.is-solid {
	padding: 14px 0;
	background: rgba(247, 244, 239, 0.96);
	box-shadow: 0 1px 0 rgba(20, 17, 15, 0.08);
}

.riso-header-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 40px;
}

.riso-nav {
	display: flex;
	align-items: center;
	gap: 40px;
}

.riso-nav-right {
	justify-content: flex-end;
}

.riso-site-header .riso-nav,
.riso-site-header .riso-menu {
	gap: clamp(18px, 2.5vw, 40px);
}

.riso-menu {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.riso-site-header .riso-nav a {
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 253, 249, 0.9);
	/* Holds the light labels legible against whatever the hero is showing. */
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
	transition: color 0.5s ease, text-shadow 0.5s ease;
}

.riso-site-header.is-scrolled .riso-nav a,
.riso-site-header.is-solid .riso-nav a {
	color: var(--riso-ink);
	text-shadow: none;
}

.riso-site-header .riso-menu a:hover {
	color: var(--riso-gold);
}

/* Both marks sit in the DOM and cross-fade, so the swap never flashes empty. */
.riso-logo {
	position: relative;
	display: block;
	justify-self: center;
	height: 56px;
	transition: height 0.5s ease;
}

.riso-site-header.is-scrolled .riso-logo,
.riso-site-header.is-solid .riso-logo {
	height: 38px;
}

.riso-logo img {
	height: 100%;
	width: auto;
	transition: opacity 0.5s ease;
}

.riso-logo__dark {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.riso-site-header.is-scrolled .riso-logo__light,
.riso-site-header.is-solid .riso-logo__light {
	opacity: 0;
}

.riso-site-header.is-scrolled .riso-logo__dark,
.riso-site-header.is-solid .riso-logo__dark {
	opacity: 1;
}

/* The enquire chip is solid in both header states. The selector has to outrank
   `.riso-site-header .riso-nav a` above, which would otherwise paint the label
   cream and leave it unreadable on the sand plate. */
.riso-site-header .riso-nav a.riso-enquire,
.riso-site-header .riso-enquire {
	padding: 12px 22px;
	border-radius: 1px;
	background: var(--riso-sand);
	color: var(--riso-ink);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	white-space: nowrap;
	/* It has its own solid plate, so it needs no shadow to stay readable. */
	text-shadow: none;
	transition: background 0.5s ease, color 0.5s ease;
}

.riso-site-header .riso-nav a.riso-enquire:hover,
.riso-site-header .riso-enquire:hover {
	background: var(--riso-gold);
	color: var(--riso-cream);
}

/* Burger — two bars that cross into an X. */
.riso-burger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.riso-burger__bar {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 1px;
	background: var(--riso-cream);
	transition: transform 0.45s var(--riso-ease), background 0.5s ease;
}

.riso-burger__bar:nth-child(2) {
	transform: translateY(-4px);
}

.riso-burger__bar:nth-child(3) {
	transform: translateY(4px);
}

.riso-site-header.is-scrolled .riso-burger__bar,
.riso-site-header.is-solid .riso-burger__bar {
	background: var(--riso-ink);
}

.riso-burger[aria-expanded='true'] .riso-burger__bar:nth-child(2) {
	transform: rotate(45deg);
}

.riso-burger[aria-expanded='true'] .riso-burger__bar:nth-child(3) {
	transform: rotate(-45deg);
}

/* Drawer — the canvas simply hides the links on a narrow screen; this keeps
   them reachable without changing the desktop bar at all. */
.riso-drawer {
	position: fixed;
	inset: 0;
	z-index: 59;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 24px 40px;
	background: rgba(15, 13, 12, 0.97);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.riso-drawer[hidden] {
	display: none;
}

.riso-drawer.is-open {
	opacity: 1;
}

.riso-drawer nav {
	text-align: center;
}

.riso-drawer ul {
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}

.riso-drawer li + li {
	margin-top: 22px;
}

.riso-drawer a {
	color: var(--riso-cream);
	font-family: var(--riso-serif);
	font-size: 28px;
}

.riso-drawer a:hover {
	color: var(--riso-gold-light);
}

.riso-drawer__cta {
	display: inline-block;
	padding: 14px 30px;
	background: var(--riso-sand);
	color: var(--riso-ink) !important;
	font-family: var(--riso-sans) !important;
	font-size: 10px !important;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/* =========================================================================
   5. Hero
   ====================================================================== */

/* Full bleed: the photograph runs to all four edges, with no dark inset frame
   between it and the window. */
.riso-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: min(620px, 100vh);
	padding: 0;
	background: var(--riso-ink-deep);
	overflow: hidden;
}

.riso-hero__stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--riso-ink-deep);
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.riso-hero__stage.is-dragging {
	cursor: grabbing;
}

/* Slides are stacked and moved horizontally by the script; the first carries
   .is-active so the hero is correct even if JavaScript never runs. */
.riso-hero__slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	will-change: transform;
	z-index: 0;
	transform: translate3d(100%, 0, 0);
	transition: transform 1.05s cubic-bezier(0.66, 0.02, 0.2, 1);
}

.riso-hero__slide[data-riso-viewport="mobile"],
.riso-hero__dot[data-riso-viewport="mobile"] {
	display: none;
}

.riso-hero__slide.is-active {
	z-index: 1;
	transform: translate3d(0, 0, 0);
}

/* While dragging, and while a slide teleports round the far side, no easing. */
.riso-hero__stage.is-dragging .riso-hero__slide,
.riso-hero__stage.is-initializing .riso-hero__slide,
.riso-hero__slide.is-warping {
	transition: none;
}

.riso-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
	transition: transform 1.2s ease, filter 0.8s ease;
}

/* The scrim exists to carry type, not to set a mood — so it is dark only where
   there is type. The top band holds the white nav; the bottom is a shorter,
   lighter ramp because the caption bar lays its own gradient over that edge
   anyway, and stacking two was what made the foot of every photograph read as
   mud. Between them it is all but clear, which is where the photography is. */
.riso-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(15, 13, 12, 0.32) 0%,
		rgba(15, 13, 12, 0.02) 26%,
		rgba(15, 13, 12, 0.03) 68%,
		rgba(15, 13, 12, 0.38) 100%
	);
}

/* Two jobs: a soft edge on the frame, and a wash down the right rail so the
   INSTAGRAM label keeps its footing on the bright frames — it sits at mid
   height, which the scrim above deliberately leaves clear. */
.riso-hero__vignette {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		to left,
		rgba(15, 13, 12, 0.3) 0,
		rgba(15, 13, 12, 0) clamp(70px, 7vw, 110px)
	);
	box-shadow: inset 0 0 110px 8px rgba(15, 13, 12, 0.12);
}

/* The rail is a fixed-width column down the right edge; only the words inside
   it turn, so the column keeps its own geometry. */
.riso-hero__follow {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 4;
	width: clamp(44px, 4vw, 64px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.riso-hero__follow-turn {
	display: flex;
	align-items: center;
	gap: 16px;
	transform: rotate(90deg);
	transform-origin: center;
	white-space: nowrap;
}

.riso-hero__follow-rule {
	display: block;
	flex: 0 0 auto;
	width: 34px;
	height: 1px;
	background: rgba(233, 207, 166, 0.7);
}

.riso-hero__follow-label {
	font-size: 9px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--riso-gold-light);
}

.riso-hero__follow a {
	font-size: 9px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.7);
}

.riso-hero__follow a:hover {
	color: var(--riso-gold-light);
}

.riso-hero__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	pointer-events: none;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	padding: clamp(26px, 3vw, 44px) clamp(24px, 4vw, 56px);
	background: linear-gradient(to top, rgba(15, 13, 12, 0.85), rgba(15, 13, 12, 0));
}

.riso-hero__meta {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.riso-hero__index {
	flex: 0 0 auto;
	font-family: var(--riso-serif);
	font-size: 14px;
	letter-spacing: 0.28em;
	color: var(--riso-gold-light);
}

.riso-hero__caption {
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.78);
	transition: opacity 0.5s ease;
}

.riso-hero__dots {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
	pointer-events: auto;
}

.riso-hero__dot {
	display: block;
	padding: 12px 4px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.riso-hero__dot span {
	display: block;
	width: 8px;
	height: 2px;
	background: rgba(255, 253, 249, 0.4);
	transition: width 0.6s ease, background 0.6s ease;
}

.riso-hero__dot.is-active span {
	width: 26px;
	background: var(--riso-gold-light);
}

.riso-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 30px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	transform: translateX(-50%);
	color: var(--riso-cream);
	font-size: 9px;
	letter-spacing: 0.38em;
	text-transform: uppercase;
	white-space: nowrap;
}

.riso-hero__scroll-line {
	display: block;
	width: 1px;
	height: 54px;
	background: linear-gradient(to bottom, rgba(255, 253, 249, 0.2), var(--riso-cream));
}

/* =========================================================================
   6. The Riśo Suite (capabilities)
   ====================================================================== */

/* The suite is the first thing under the hero, so it takes the hero's own
   ground — --riso-ink-deep, the colour the caption bar fades into — rather than
   the slightly lighter --riso-ink. The two sections then meet with no tonal
   step at the seam, and the accents below are the hero's: gold-light for
   anything that carries meaning, cream for the copy. */
.riso-suite {
	position: relative;
	padding: clamp(70px, 8vw, 120px) clamp(20px, 4vw, 64px);
	background: var(--riso-ink-deep);
	color: var(--riso-cream);
	overflow: hidden;
}

.riso-suite__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 30%;
	opacity: 0.16;
	filter: grayscale(0.35) contrast(1.05);
}

/* A warm brow at the top edge — the same gold the hero's scrim carries — going
   fully dark by the time it reaches the type. The middle stop is opaque enough
   that the photograph behind never sits under a word. */
.riso-suite__wash {
	position: absolute;
	inset: 0;
	background: radial-gradient(115% 75% at 50% 0%, rgba(176, 141, 87, 0.22) 0%, rgba(15, 13, 12, 0.95) 56%, #0f0d0c 100%);
}

.riso-suite__frame {
	position: relative;
	border: 1px solid rgba(233, 207, 166, 0.3);
	padding: clamp(52px, 7vw, 110px) clamp(22px, 4vw, 72px);
}

/* The suite frame carries a gold diamond at each of its four corners. Two come
   from .riso-corners (top-left, bottom-right); the other two are real spans,
   because a pseudo-element pair cannot cover four corners. */
.riso-corner {
	position: absolute;
	width: 9px;
	height: 9px;
	background: var(--riso-gold);
	transform: rotate(45deg);
	pointer-events: none;
	z-index: 1;
}

.riso-corner--tr {
	top: -5px;
	right: -5px;
}

.riso-corner--bl {
	bottom: -5px;
	left: -5px;
}

.riso-suite__inner {
	max-width: 1440px;
	margin: 0 auto;
}

.riso-suite__head {
	text-align: center;
	max-width: 1040px;
	margin: 0 auto clamp(56px, 6.5vw, 100px);
}

/* The shared eyebrow is drawn in --riso-gold, which was picked against the
   ivory page ground. On this dark ground it is the hero's gold-light that
   reads, so the label and its two hairlines take that instead. */
.riso-suite__head .riso-rule-label {
	color: var(--riso-gold-light);
}

.riso-suite__head .riso-rule {
	background: linear-gradient(to right, rgba(233, 207, 166, 0), rgba(233, 207, 166, 0.7));
}

.riso-suite__head .riso-rule--r {
	background: linear-gradient(to left, rgba(233, 207, 166, 0), rgba(233, 207, 166, 0.7));
}

/* The heading is filled with the gold gradient rather than a flat colour. */
.riso-suite__title {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: clamp(32px, 4.6vw, 72px);
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-wrap: balance;
	background: linear-gradient(180deg, var(--riso-gold-pale) 0%, var(--riso-gold-light) 42%, var(--riso-gold) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Cream at the hero caption's own strength (0.78) — at 0.58 this paragraph
   read as grey mist against the ink. */
.riso-suite__intro {
	max-width: 60ch;
	margin: 30px auto 0;
	color: rgba(255, 253, 249, 0.78);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.95;
}

.riso-suite__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(28px, 3.4vw, 54px) clamp(22px, 3vw, 56px);
}

.riso-cap {
	position: relative;
	flex: 0 1 230px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding: 30px 18px 26px;
	text-align: center;
	color: var(--riso-gold-light);
	transition: background 0.7s ease;
}

.riso-cap:hover {
	background: rgba(233, 207, 166, 0.05);
	color: var(--riso-gold-light);
}

/* The ring is drawn as a fine horizontal rule pattern, not a flat fill. */
.riso-cap__ring {
	position: relative;
	width: clamp(104px, 8.6vw, 132px);
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(233, 207, 166, 0.5);
	border-radius: 50%;
	background-image: repeating-linear-gradient(
		0deg,
		rgba(233, 207, 166, 0.3) 0px,
		rgba(233, 207, 166, 0.3) 1px,
		rgba(15, 13, 12, 0) 1px,
		rgba(15, 13, 12, 0) 6px
	);
	transition: border-color 0.7s ease, transform 0.9s var(--riso-ease), box-shadow 0.7s ease;
}

.riso-cap:hover .riso-cap__ring {
	border-color: var(--riso-gold-light);
	transform: translateY(-6px);
	box-shadow: 0 26px 50px -28px rgba(233, 207, 166, 0.75);
}

.riso-cap__ring-inner {
	position: absolute;
	inset: 7px;
	border: 1px solid rgba(233, 207, 166, 0.22);
	border-radius: 50%;
}

.riso-cap__disc {
	width: 60%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* Punched out of the section ground, so it has to be the same ink the
	   section is now painted in or it shows as a lighter disc. */
	background: var(--riso-ink-deep);
	color: var(--riso-gold-light);
	box-shadow: 0 0 0 1px rgba(233, 207, 166, 0.38);
}

.riso-cap__disc i {
	font-size: clamp(30px, 2.8vw, 40px);
	line-height: 1;
}

/* The numeral sits on the ring, punched out of the dark ground. */
.riso-cap__num {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 10px;
	background: var(--riso-ink-deep);
	font-family: var(--riso-serif);
	font-size: 11px;
	letter-spacing: 0.3em;
	color: rgba(233, 207, 166, 0.9);
}

.riso-cap__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.riso-cap__label {
	font-family: var(--riso-serif);
	font-size: clamp(20px, 1.6vw, 25px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.02em;
	transition: color 0.5s ease;
}

.riso-cap:hover .riso-cap__label {
	color: var(--riso-cream);
}

.riso-cap__tick {
	display: block;
	width: 22px;
	height: 1px;
	background: rgba(233, 207, 166, 0.55);
}

/* The dimmest type on the page was here: 10px, uppercase, tracked at 0.24em and
   set at 0.42 alpha, which is under 3.5:1 on ink — legible on the design canvas
   at 200%, not on a phone. Lifted to the strength the hero gives its own micro
   type so the discipline notes read at a glance. */
.riso-cap__note {
	max-width: 22ch;
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.24em;
	line-height: 1.9;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.66);
}

/* =========================================================================
   7. Chapter films
   ====================================================================== */

.riso-chapters {
	display: flex;
	width: 100%;
	height: clamp(420px, 58vh, 620px);
	overflow: hidden;
	background: var(--riso-ink);
}

.riso-chapter {
	position: relative;
	flex: 1;
	overflow: hidden;
	cursor: pointer;
	border-right: 1px solid rgba(255, 253, 249, 0.14);
	transition: flex 1.15s var(--riso-ease-soft);
}

.riso-chapter:last-child {
	border-right: 0;
}

.riso-chapter.is-open {
	flex: 2.6;
}

.riso-chapter__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transform: scale(1.01);
	filter: brightness(0.62) saturate(0.85);
	transition: transform 1.6s var(--riso-ease-soft), filter 1.1s ease;
}

.riso-chapter.is-open .riso-chapter__photo {
	transform: scale(1.06);
	filter: brightness(.84) saturate(.98);
}

.riso-chapter__scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at center, rgba(20, 17, 15, 0.28) 0%, rgba(20, 17, 15, 0.08) 42%, rgba(20, 17, 15, 0.32) 100%),
		linear-gradient(
			to bottom,
			rgba(20, 17, 15, 0.58) 0%,
			rgba(20, 17, 15, 0.38) 32%,
			rgba(20, 17, 15, 0.56) 68%,
			rgba(20, 17, 15, 0.86) 100%
		);
}

/* The copy block is centred in the panel, not pinned to its foot. */
.riso-chapter__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 40px 32px;
	text-align: center;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}

.riso-chapter__kicker {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--riso-sand);
}

.riso-chapter__title {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: clamp(26px, 2.6vw, 44px);
	color: var(--riso-cream);
}

/* Closed panels keep the copy in the DOM at zero height. */
.riso-chapter__reveal {
	max-width: 44ch;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.9s ease, opacity 0.7s ease;
}

.riso-chapter.is-open .riso-chapter__reveal {
	max-height: 260px;
	opacity: 1;
}

.riso-chapter__text {
	margin: 0 0 22px;
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: 19px;
	line-height: 1.65;
	color: rgba(255, 253, 249, 0.88);
}

/* On a phone the panels stack, and every one shows its copy. */
@media (max-width: 860px) {
	.riso-chapters {
		flex-direction: column;
		height: auto;
	}

	.riso-chapter {
		flex: 1 1 auto;
		min-height: 330px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 253, 249, 0.14);
	}

	.riso-chapter.is-open {
		flex: 1 1 auto;
	}

	.riso-chapter__photo {
		transform: scale(1.02);
		filter: brightness(0.72) saturate(0.95);
	}

	.riso-chapter__reveal {
		max-height: 260px;
		opacity: 1;
	}
}

/* =========================================================================
   8. Case studies
   ====================================================================== */

.riso-cases {
	padding: clamp(90px, 11vw, 160px) 0;
	background: var(--riso-ivory);
}

.riso-cases__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(16px, 1.8vw, 30px);
}

.riso-case {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--riso-stone);
	color: var(--riso-cream);
}

.riso-case__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	transition: transform 1.6s var(--riso-ease);
}

.riso-case:hover .riso-case__img {
	transform: scale(1.07);
}

.riso-case__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 17, 15, 0.9) 0%, rgba(20, 17, 15, 0.15) 55%, rgba(20, 17, 15, 0.35) 100%);
}

.riso-case__inset {
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(233, 207, 166, 0.35);
	pointer-events: none;
}

.riso-case__code {
	position: absolute;
	top: 38px;
	left: 38px;
	font-family: var(--riso-serif);
	font-size: clamp(30px, 2.6vw, 42px);
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--riso-gold-light);
}

.riso-case__body {
	position: absolute;
	left: 38px;
	right: 38px;
	bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.riso-case__couple {
	font-family: var(--riso-serif);
	font-size: clamp(23px, 2vw, 30px);
	font-weight: 400;
}

.riso-case__note {
	font-size: 13px;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(255, 253, 249, 0.72);
}

.riso-case__more {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--riso-gold-light);
}

.riso-case__more-rule {
	display: block;
	width: 26px;
	height: 1px;
	background: var(--riso-gold-light);
	transition: width 0.6s var(--riso-ease);
}

.riso-case:hover .riso-case__more-rule {
	width: 52px;
}

/* =========================================================================
   9. Welcome / about — the studio in its own words
   ====================================================================== */

/* The opening statement, straight after the hero. Deliberately the mirror of
   the founders' block below: the same measure and the same rhythm, with the
   photograph on the other side and on the page ground rather than the lifted
   cream, so two two-column blocks on one page read as a pair instead of a
   repeat. */
.riso-welcome {
	padding: clamp(90px, 11vw, 170px) 0;
	background: var(--riso-ivory);
	color: var(--riso-ink);
}

.riso-welcome__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(48px, 6vw, 110px);
	align-items: center;
}

.riso-welcome__copy {
	min-width: 0;
}

.riso-welcome__copy .riso-eyebrow {
	margin-bottom: 26px;
}

/* Carries .riso-display--m, the same scale the founders' block uses, because
   this block is that block mirrored — a different heading size across the two
   would read as a mistake rather than a pair. Only the spacing below it and the
   wrap belong here. */
.riso-welcome__heading {
	margin: 0 0 32px;
	text-wrap: balance;
}

.riso-welcome__signature {
	margin: clamp(26px, 2.6vw, 36px) 0 0;
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.5;
	color: var(--riso-gold);
}

.riso-welcome__figure {
	position: relative;
	margin: 0;
}

/* Square rather than the founders' 4/5, and anchored to the top, for one
   reason: the plates are all a little wider than 4/5, so that frame crops their
   sides and keeps every pixel of their height — and the archway plate carries
   the studio's own caption burned into its last forty-odd pixels. A frame
   squarer than the plate crops the height instead, and anchoring it at the top
   takes the whole of that off the bottom while keeping the carved arch the
   copy is talking about. */
.riso-welcome__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;
	background: var(--riso-stone);
}

/* Stacked, the photograph is a full-height plate under a wall of text. Give it
   a landscape crop instead so the statement stays the point of the section. */
@media (max-width: 780px) {
	.riso-welcome__figure img {
		aspect-ratio: 3 / 2;
	}
}

.riso-about {
	padding: clamp(90px, 11vw, 170px) 0;
	background: var(--riso-cream);
}

.riso-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(48px, 6vw, 110px);
	align-items: center;
}

.riso-about__figure {
	position: relative;
	margin: 0;
}

.riso-about__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--riso-stone);
}

/* The credit is punched into the foot of the portrait on the page ground. */
.riso-about__credit {
	position: absolute;
	right: -1px;
	bottom: -1px;
	padding: 22px 28px 0 28px;
	background: var(--riso-cream);
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--riso-gold);
}

.riso-about__copy {
	min-width: 0;
}

.riso-about__copy .riso-eyebrow {
	margin-bottom: 26px;
}

.riso-about__copy .riso-display {
	margin: 0 0 32px;
}

.riso-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px;
	padding-top: 38px;
	border-top: 1px solid var(--riso-stone);
}

.riso-pillar__num {
	margin: 0 0 8px;
	font-family: var(--riso-serif);
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--riso-gold);
}

.riso-pillar__label {
	margin: 0;
	font-size: 11px;
	font-weight: 300;
	line-height: 1.7;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--riso-ink);
}

/* =========================================================================
   10. Services — a dark section with a hairline grid
   ====================================================================== */

/* Tighter than the other full-bleed sections on purpose: the cards carry their
   own generous padding, so the section does not need to as well. */
.riso-services {
	padding: clamp(64px, 7vw, 108px) 0;
	background: var(--riso-ink);
	color: var(--riso-cream);
}

.riso-services .riso-display {
	color: var(--riso-cream);
}

.riso-services .riso-head-centre {
	margin-bottom: clamp(38px, 4.4vw, 64px);
}

/* The hairlines between cards are each card's own 1px ring meeting its
   neighbour's across the 1px gap. Painting them on the container instead would
   light up the empty cells of a part-filled last row as a solid grey block. */
.riso-services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	/* The grid always runs the full measure of the section, whatever the column
	   count — a short list makes its cards wider, not the grid narrower. */
	max-width: 1200px;
	margin: 0 auto;
	gap: 1px;
	background: var(--riso-ink);
	border: 1px solid rgba(255, 253, 249, 0.14);
}

/* Once there is room for them, pin the columns to the count the template
   worked out, so the bottom row is never left part-empty. */
@media (min-width: 900px) {
	.riso-services__grid {
		grid-template-columns: repeat(var(--riso-svc-cols, 3), minmax(0, 1fr));
	}
}

.riso-service {
	position: relative;
	display: flex;
	min-height: clamp(230px, 15vw, 292px);
	padding: clamp(30px, 2.6vw, 44px);
	overflow: hidden;
	background: var(--riso-ink);
	color: var(--riso-cream);
	box-shadow: 0 0 0 1px rgba(255, 253, 249, 0.14);
	isolation: isolate;
}

/* The room behind the words. Held right back so the copy always leads, and
   brought up on hover — the same restraint the partner rows use. */
.riso-service__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	opacity: 0.46;
	filter: grayscale(0.4) brightness(0.78);
	transform: scale(1.05);
	transition: opacity 0.9s ease, filter 0.9s ease, transform 1.5s var(--riso-ease);
}

.riso-service:hover .riso-service__photo {
	opacity: 0.72;
	filter: grayscale(0) brightness(0.86);
	transform: scale(1);
}

/* Weighted to the left, where the copy sits, so the room stays visible in the
   open corner without ever competing with the words. */
.riso-service__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(20, 17, 15, 0.95) 0%,
		rgba(20, 17, 15, 0.86) 40%,
		rgba(20, 17, 15, 0.52) 100%
	);
	transition: background 0.9s ease;
}

.riso-service:hover .riso-service__wash {
	background: linear-gradient(
		100deg,
		rgba(20, 17, 15, 0.92) 0%,
		rgba(20, 17, 15, 0.8) 42%,
		rgba(20, 17, 15, 0.4) 100%
	);
}

/* A hairline that steps inward as the card wakes up. */
.riso-service__frame {
	position: absolute;
	inset: 13px;
	border: 1px solid rgba(233, 207, 166, 0);
	pointer-events: none;
	transition: inset 0.8s var(--riso-ease), border-color 0.7s ease;
}

.riso-service:hover .riso-service__frame {
	inset: 20px;
	border-color: rgba(233, 207, 166, 0.34);
}

.riso-service__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.riso-service__num {
	margin: 0 0 22px;
	font-family: var(--riso-serif);
	font-size: 15px;
	letter-spacing: 0.14em;
	color: var(--riso-gold);
}

.riso-service__title {
	margin: 0 0 18px;
	max-width: 18ch;
	font-family: var(--riso-serif);
	font-weight: 400;
	font-size: clamp(23px, 2vw, 30px);
	line-height: 1.28;
	color: var(--riso-cream);
	transition: color 0.6s ease;
}

.riso-service:hover .riso-service__title {
	color: var(--riso-gold-light);
}

.riso-service__body {
	margin: 0;
	/* Wide enough to settle on two lines at this card width. */
	max-width: 54ch;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
	color: rgba(255, 253, 249, 0.62);
	transition: color 0.6s ease;
}

.riso-service:hover .riso-service__body {
	color: rgba(255, 253, 249, 0.78);
}

/* The gold rule at the foot, drawn out by the auto margin above it. */
.riso-service__more {
	display: block;
	margin-top: auto;
	padding-top: clamp(16px, 1.8vw, 26px);
}

.riso-service__more-rule {
	display: block;
	width: 26px;
	height: 1px;
	background: var(--riso-gold);
	transition: width 0.8s var(--riso-ease), background 0.6s ease;
}

.riso-service:hover .riso-service__more-rule {
	width: 78px;
	background: var(--riso-gold-light);
}

/* Why Riśo — a concise bridge from the service list to the lived benefit. */
.riso-why {
	padding: clamp(84px, 10vw, 150px) 0;
	background: var(--riso-ivory);
	color: var(--riso-ink);
}

.riso-why__inner {
	text-align: center;
}

.riso-why__eyebrow {
	margin-bottom: clamp(28px, 3vw, 42px);
	color: var(--riso-gold);
}

.riso-why__heading {
	max-width: 1000px;
	margin: 0 auto;
	font-family: var(--riso-serif);
	font-size: clamp(34px, 4vw, 58px);
	font-weight: 300;
	line-height: 1.12;
	text-wrap: balance;
}

.riso-why__heading em {
	font-weight: 300;
	color: #74785b;
}

.riso-why__body {
	max-width: 880px;
	margin: clamp(30px, 3vw, 42px) auto 0;
	font-size: clamp(16px, 1.35vw, 20px);
	font-weight: 300;
	line-height: 1.8;
	color: var(--riso-muted);
	text-wrap: balance;
}

.riso-why__closing {
	margin: clamp(28px, 3vw, 40px) 0 0;
	font-family: var(--riso-serif);
	font-size: clamp(24px, 2.2vw, 34px);
	font-style: italic;
	color: var(--riso-ink);
}

@media (max-width: 600px) {
	.riso-why {
		padding: 72px 0 78px;
	}

	.riso-why__heading {
		font-size: clamp(31px, 9vw, 42px);
		line-height: 1.16;
	}

	.riso-why__body {
		font-size: 16px;
		line-height: 1.7;
	}
}

/* =========================================================================
   11. The detail quote band
   ====================================================================== */

.riso-band {
	position: relative;
	height: clamp(380px, 52vh, 560px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 32px;
	overflow: hidden;
}

/* Centred rather than the old `center 60%`, which was cut for the sage
   tablescape. The vows books lie across the middle of their plate, and an
   upright plate in a wide band is already losing most of its height — drop the
   anchor and the lettering goes with it. */
.riso-band__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
}

.riso-band__wash {
	position: absolute;
	inset: 0;
	background: rgba(20, 17, 15, 0.42);
}

.riso-band__inner {
	position: relative;
}

.riso-band__marks {
	margin: 0 0 26px;
	font-size: 13px;
	letter-spacing: 0.9em;
	color: var(--riso-sand);
}

.riso-band__quote {
	max-width: 20ch;
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(28px, 3.6vw, 52px);
	line-height: 1.28;
	color: var(--riso-cream);
}

/* =========================================================================
   12. Portfolio marquee
   ====================================================================== */

.riso-portfolio {
	padding: clamp(90px, 11vw, 170px) 0 clamp(70px, 8vw, 110px);
	overflow: hidden;
}

.riso-portfolio .riso-shell--wide {
	max-width: 1560px;
}

.riso-marquee {
	width: 100%;
	overflow: hidden;
	cursor: grab;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.riso-marquee.is-dragging {
	cursor: grabbing;
}

.riso-marquee__track {
	display: flex;
	width: max-content;
	gap: 18px;
	padding: 8px 0 22px;
	animation: riso-portfolio-flow 62s linear infinite;
}

.riso-marquee:hover .riso-marquee__track {
	animation-play-state: paused;
}

/* While a drag is in progress the script drives the offset itself. */
.riso-marquee.is-dragging .riso-marquee__track,
.riso-marquee.is-manual .riso-marquee__track {
	animation: none;
}

@keyframes riso-portfolio-flow {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.riso-frame {
	position: relative;
	flex: 0 0 clamp(260px, 27vw, 430px);
	height: clamp(390px, 44vw, 610px);
	margin: 0;
	overflow: hidden;
	background: var(--riso-stone);
	cursor: zoom-in;
}

.riso-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.25s var(--riso-ease), filter 0.7s ease;
}

.riso-frame:hover img {
	transform: scale(1.055);
	filter: brightness(0.82);
}

.riso-frame__caption {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: flex-end;
	gap: 18px;
	padding: 70px 24px 23px;
	color: var(--riso-cream);
	background: linear-gradient(to top, rgba(15, 13, 12, 0.9), rgba(15, 13, 12, 0));
}

.riso-frame__caption span {
	font-family: var(--riso-serif);
	font-size: 15px;
	color: var(--riso-gold-light);
}

.riso-frame__caption strong {
	font-size: 10px;
	font-weight: 300;
	line-height: 1.55;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.riso-portfolio__foot {
	display: flex;
	justify-content: flex-end;
	max-width: 1560px;
	margin: clamp(24px, 3vw, 42px) auto 0;
}

/* =========================================================================
   13. Process
   ====================================================================== */

.riso-process {
	padding: clamp(70px, 9vw, 140px) 0;
	background: var(--riso-cream);
}

.riso-process .riso-head-centre {
	margin-bottom: clamp(46px, 5vw, 80px);
}

.riso-process__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
	/* The closing rule under the last step. */
	border-bottom: 1px solid var(--riso-stone);
}

.riso-step {
	display: grid;
	grid-template-columns: 90px minmax(180px, 1fr) 2.2fr;
	gap: clamp(20px, 3vw, 56px);
	align-items: baseline;
	padding: clamp(26px, 2.6vw, 40px) 0;
	border-top: 1px solid var(--riso-stone);
}

.riso-step__num {
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: 28px;
	color: var(--riso-gold);
}

.riso-step__title {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 400;
	font-size: clamp(22px, 2.1vw, 32px);
	line-height: 1.25;
}

.riso-step__body {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.95;
	color: var(--riso-muted);
}

@media (max-width: 760px) {
	.riso-step {
		grid-template-columns: 56px 1fr;
		align-items: start;
	}

	.riso-step__body {
		grid-column: 2;
	}
}

/* =========================================================================
   14. Moodboards
   ====================================================================== */

.riso-mood {
	padding: clamp(80px, 10vw, 150px) 0;
	background: var(--riso-oat);
}

.riso-mood__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(36px, 4.5vw, 80px);
	align-items: center;
}

.riso-mood__copy .riso-eyebrow {
	margin-bottom: 26px;
}

.riso-mood__copy .riso-display {
	margin: 0 0 30px;
}

.riso-mood__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 36px;
	margin-top: 40px;
}

/* On the moodboards a tag is a ruled word, not a boxed chip. */
.riso-mood__tags .riso-tag {
	display: inline-block;
	padding: 0 0 8px;
	border: 0;
	border-bottom: 1px solid var(--riso-gold);
	font-size: 11px;
	font-weight: 300;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--riso-ink);
}

.riso-mood__boards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(12px, 1.4vw, 22px);
}

.riso-mood__boards img {
	width: 100%;
	aspect-ratio: 3 / 4;
	height: auto;
	object-fit: cover;
	background: #fff;
}

/* =========================================================================
   15. Partners — hotels, cities, tickers, word band
   ====================================================================== */

.riso-partners {
	position: relative;
	background: var(--riso-ink);
	color: var(--riso-cream);
	overflow: hidden;
}

.riso-partners__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0.12;
	filter: grayscale(0.4);
}

.riso-partners__wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, #14110f 0%, rgba(20, 17, 15, 0.9) 40%, #14110f 100%);
}

.riso-partners__body {
	position: relative;
	padding: clamp(80px, 10vw, 140px) clamp(24px, 5vw, 80px) clamp(50px, 6vw, 80px);
}

.riso-partners__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(56px, 7vw, 120px);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0;
}

.riso-partners__col {
	min-width: 0;
}

.riso-partners__col--right {
	display: flex;
	flex-direction: column;
}

.riso-partners__col .riso-display {
	margin: 0 0 22px;
	color: var(--riso-cream);
}

.riso-partners__col .riso-eyebrow--tick {
	color: var(--riso-gold);
}

.riso-partners__intro {
	max-width: 44ch;
	margin: 0 0 44px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.95;
	color: rgba(255, 253, 249, 0.55);
}

.riso-partners__filler {
	flex: 1;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 44px 0 0;
}

/* --- Hotels --- */

.riso-hotels {
	position: relative;
	display: flex;
	flex-direction: column;
}

.riso-hotel {
	position: relative;
}

.riso-hotel__row {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 18px 0;
	border: 0;
	border-top: 1px solid rgba(255, 253, 249, 0.12);
	background: transparent;
	color: rgba(255, 253, 249, 0.9);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.riso-hotels__end {
	display: block;
	border-top: 1px solid rgba(255, 253, 249, 0.12);
}

.riso-hotel__num {
	flex: 0 0 auto;
	min-width: 26px;
	font-family: var(--riso-serif);
	font-size: 11px;
	letter-spacing: 0.26em;
	color: rgba(233, 207, 166, 0.55);
}

.riso-hotel__name {
	flex: 1;
	font-family: var(--riso-serif);
	font-size: clamp(20px, 1.7vw, 27px);
	font-weight: 300;
	letter-spacing: 0.02em;
	transition: color 0.5s ease;
}

.riso-hotel__row:hover .riso-hotel__name,
.riso-hotel__row[aria-expanded='true'] .riso-hotel__name {
	color: var(--riso-gold-light);
}

/* The rule runs from the name to the edge of the column, the way an index
   leads the eye across — a short stub just floated there unattached. */
.riso-hotel__rule {
	flex: 1 1 auto;
	min-width: 24px;
	height: 1px;
	background: linear-gradient(to right, rgba(233, 207, 166, 0.28), rgba(233, 207, 166, 0.1));
	transition: background 0.6s ease;
}

.riso-hotel__row:hover .riso-hotel__rule {
	background: linear-gradient(to right, var(--riso-gold), rgba(176, 141, 87, 0.3));
}

/* The hover preview floats over the empty right half of the list — no layout
   shift, and it lines up with whichever row the cursor is on. */
.riso-hotel__preview {
	position: absolute;
	right: 4px;
	top: 50%;
	z-index: 6;
	width: clamp(180px, 44%, 290px);
	pointer-events: none;
	opacity: 0;
	transform: translateY(-50%) scale(0.97);
	transition: opacity 0.5s ease, transform 0.7s var(--riso-ease-soft);
}

.riso-hotel:hover .riso-hotel__preview {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.riso-hotel__preview .riso-hotel__shot {
	border: 1px solid rgba(233, 207, 166, 0.3);
	box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 0.85);
}

.riso-hotel__shot {
	position: relative;
	overflow: hidden;
	background: var(--riso-ink-soft);
}

.riso-hotel__shot img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	object-position: center;
	max-height: 260px;
}

.riso-hotel__shot--wide {
	border: 1px solid rgba(233, 207, 166, 0.18);
}

.riso-hotel__shot--wide img {
	aspect-ratio: 16 / 9;
	height: auto;
}

.riso-hotel__shot-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(15, 13, 12, 0.74), rgba(15, 13, 12, 0) 58%);
}

.riso-hotel__shot-meta {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.riso-hotel__shot--wide .riso-hotel__shot-meta {
	left: 16px;
	right: 16px;
	bottom: 12px;
}

.riso-hotel__shot-brand {
	font-size: 8px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--riso-gold-light);
}

.riso-hotel__shot--wide .riso-hotel__shot-brand {
	font-size: 9px;
}

.riso-hotel__shot-venue {
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: 13px;
	line-height: 1.25;
	color: rgba(255, 253, 249, 0.82);
}

.riso-hotel__shot--wide .riso-hotel__shot-venue {
	font-size: 15px;
}

/* The tap-to-expand panel, used where there is no hover. */
.riso-hotel__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.7s var(--riso-ease);
}

.riso-hotel.is-open .riso-hotel__panel {
	grid-template-rows: 1fr;
}

.riso-hotel__panel-inner {
	min-height: 0;
	overflow: hidden;
	padding: 0 4px;
}

.riso-hotel__caption {
	max-width: 52ch;
	margin: 14px 0 0;
	padding-bottom: 22px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.85;
	color: rgba(255, 253, 249, 0.5);
}

@media (hover: hover) and (pointer: fine) {
	.riso-hotel__panel {
		display: none;
	}
}

@media not all and (hover: hover) {
	.riso-hotel__preview {
		display: none;
	}
}

/* --- Cities --- */

.riso-cities {
	display: block;
}

.riso-cities__count {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 22px;
}

.riso-cities__number {
	font-family: var(--riso-serif);
	font-size: clamp(56px, 6vw, 88px);
	line-height: 0.9;
	color: var(--riso-gold-light);
}

.riso-cities__label {
	font-size: 9px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.45);
}

.riso-cities__stem {
	display: none;
}

.riso-cities__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 3vw, 48px);
	row-gap: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.riso-city {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	padding: 18px 0;
	border-top: 1px solid rgba(255, 253, 249, 0.12);
}

.riso-city:nth-last-child(-n + 2) {
	border-bottom: 1px solid rgba(255, 253, 249, 0.12);
}

.riso-city__name {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--riso-serif);
	font-size: clamp(22px, 2vw, 31px);
	font-weight: 300;
	color: var(--riso-cream);
	transition: color 0.5s ease;
}

.riso-city:hover .riso-city__name {
	color: var(--riso-gold-light);
}

.riso-city__name i {
	font-size: 0.62em;
	color: var(--riso-gold);
	opacity: 0.9;
}

/* A small gold lozenge, turned on its point. */
.riso-city__dot {
	flex: 1 1 auto;
	width: auto;
	height: 1px;
	background: linear-gradient(to right, rgba(233, 207, 166, 0.28), rgba(233, 207, 166, 0.1));
	transform: none;
}

/* Keep the closing line visually attached to the city list. On wide screens
   it aligns with the names rather than the count rail. */
.riso-cities__note {
	margin: 38px 0 0;
	padding-bottom: 4px;
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: 20px;
	color: var(--riso-gold);
}

/* --- Brand tickers --- */

/* The partner wall, running the full width of the section. */
.riso-brandband {
	position: relative;
	padding: clamp(30px, 4vw, 52px) 0 clamp(26px, 3.4vw, 42px);
	border-top: 1px solid rgba(233, 207, 166, 0.16);
}

.riso-brandband .riso-rule-label--small {
	padding: 0;
	margin-bottom: clamp(24px, 3vw, 38px);
}

.riso-brandband .riso-rule {
	max-width: 200px;
}

.riso-brands {
	position: relative;
	border: 1px solid rgba(233, 207, 166, 0.18);
	padding: 26px 0 28px;
}

.riso-ticker {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.riso-brands .riso-ticker:first-of-type {
	margin: 0 0 12px;
}

/* Across the full measure the fade only needs to soften the two edges, not
   swallow a logo at each end. */
.riso-ticker--brands {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.riso-ticker__track {
	display: flex;
	width: max-content;
	align-items: center;
}

.riso-ticker:hover .riso-ticker__track {
	animation-play-state: paused;
}

.riso-ticker__track--fwd {
	animation: riso-marquee 38s linear infinite;
}

.riso-ticker__track--rev {
	animation: riso-marquee-rev 46s linear infinite;
}

.riso-ticker__track--words {
	animation: riso-marquee 46s linear infinite;
}

@keyframes riso-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@keyframes riso-marquee-rev {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0);
	}
}

/* The light plate keeps each partner's supplied artwork readable unaltered —
   the marks are dark-on-transparent and would disappear against the ink. */
.riso-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: clamp(88px, 8vw, 104px);
	padding: 0 clamp(24px, 2.4vw, 38px);
	margin-right: clamp(14px, 1.4vw, 20px);
	border: 1px solid rgba(233, 207, 166, 0.22);
	background: var(--riso-cream);
	transition: border-color 0.6s ease, transform 0.7s var(--riso-ease), box-shadow 0.6s ease;
}

.riso-brand:hover {
	border-color: rgba(176, 141, 87, 0.55);
	transform: translateY(-3px);
	box-shadow: 0 22px 40px -26px rgba(0, 0, 0, 0.8);
}

/* One box for every mark, whatever shape the supplied file is, so a wide
   wordmark and a square crest sit at the same optical weight. */
.riso-brand img {
	width: clamp(132px, 11vw, 168px);
	height: clamp(40px, 3.4vw, 52px);
	object-fit: contain;
	opacity: 0.92;
	transition: opacity 0.5s ease;
}

.riso-brand:hover img {
	opacity: 1;
}

/* Oberoi supplied the reverse mark — pure white artwork on transparent, drawn
   for a dark ground. Every other partner supplied a dark one, which is what the
   cream card above is for, so this single logo arrived invisible: a white plate
   with nothing on it. The file has no colour in it at all (measured: zero
   chroma, every ink pixel above 224 luminance), so inverting it yields the
   black version of the same artwork rather than a false colour — the dark-ink
   counterpart the card expects.

   If the studio is ever sent Oberoi's dark mark, replace the file and delete
   this rule: inverting a dark logo would turn it white and hide it again. */
.riso-brand img[src*='oberoi'] {
	filter: invert(1);
}

.riso-brand span {
	width: 152px;
	text-align: center;
	white-space: nowrap;
	font-family: var(--riso-sans);
	font-weight: 300;
	font-size: 17px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(20, 17, 15, 0.62);
	transition: color 0.5s ease;
}

.riso-brand:hover span {
	color: var(--riso-gold);
}

/* This line is not decoration — it is the attribution CC BY and CC BY-SA
   require for the five property photographs, naming each photographer and
   licence. At 0.3 alpha on this ink it measured 2.7:1 at 10px, which is not a
   credit anyone can actually read. Lifted to 6.3:1: still quiet, still clearly
   subordinate to the marks above it, but legible. */
.riso-credits {
	max-width: 92ch;
	margin: clamp(24px, 3vw, 36px) auto 0;
	text-align: center;
	font-size: 10px;
	font-weight: 300;
	line-height: 1.9;
	letter-spacing: 0.02em;
	color: rgba(255, 253, 249, 0.55);
}

/* --- The word band --- */

.riso-wordband {
	position: relative;
	padding: 26px 0;
	border-top: 1px solid rgba(233, 207, 166, 0.18);
	border-bottom: 1px solid rgba(233, 207, 166, 0.18);
}

.riso-word {
	display: flex;
	align-items: center;
	gap: 44px;
	flex: 0 0 auto;
	padding-right: 44px;
	font-family: var(--riso-serif);
	font-size: clamp(18px, 1.6vw, 24px);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(233, 207, 166, 0.7);
	white-space: nowrap;
}

.riso-word__dot {
	width: 5px;
	height: 5px;
	background: rgba(233, 207, 166, 0.5);
	transform: rotate(45deg);
}

/* =========================================================================
   16. Testimonial
   ====================================================================== */

.riso-testimonial {
	padding: clamp(88px, 9vw, 138px) 32px;
	text-align: center;
	background: var(--riso-ivory);
}

.riso-testimonial figure {
	width: 100%;
	margin: 0 auto;
}

.riso-testimonial__mark {
	margin: 0 0 6px;
	font-family: var(--riso-serif);
	font-size: 76px;
	line-height: 1;
	color: var(--riso-gold);
}

.riso-testimonial__quote {
	margin: 0;
	max-width: 940px;
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: clamp(24px, 2.9vw, 42px);
	line-height: 1.42;
	text-wrap: pretty;
}

.riso-testimonial__author {
	margin: 34px 0 0;
	font-size: 10px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

/* =========================================================================
   17. Press — photo tiles with the copy laid over
   ====================================================================== */

.riso-press {
	padding: clamp(20px, 2vw, 34px) 0 clamp(90px, 11vw, 160px);
}

.riso-press .riso-head-centre {
	margin-bottom: clamp(40px, 5vw, 70px);
}

.riso-press__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(14px, 1.6vw, 26px);
}

.riso-press__card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--riso-stone);
	box-shadow: 0 18px 46px -34px rgba(20, 17, 15, 0.65);
}

.riso-press__card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.72);
	transition: filter 1s ease, transform 1.3s var(--riso-ease);
}

.riso-press__card:hover img {
	filter: grayscale(0) brightness(0.82);
	transform: scale(1.05);
}

.riso-press__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	padding: clamp(24px, 2.4vw, 38px);
	background: linear-gradient(to top, rgba(20, 17, 15, 0.92) 0%, rgba(20, 17, 15, 0.42) 48%, rgba(20, 17, 15, 0.08) 100%);
}

.riso-press__kicker {
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--riso-sand);
}

.riso-press__title {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 400;
	font-size: clamp(21px, 1.8vw, 28px);
	line-height: 1.3;
	color: var(--riso-cream);
}

.riso-press__note {
	margin: 0;
	font-family: var(--riso-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(255, 253, 249, 0.6);
}

.riso-press__controls {
	display: none;
}

/* =========================================================================
   18. Instagram grid
   ====================================================================== */

.riso-social {
	padding: 0 0 clamp(80px, 10vw, 140px);
}

.riso-social__head {
	text-align: center;
	padding: 0 32px clamp(34px, 4vw, 54px);
}

.riso-social__head .riso-eyebrow {
	margin-bottom: 22px;
}

.riso-social__handle {
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: clamp(28px, 3.2vw, 48px);
	letter-spacing: 0.02em;
	color: var(--riso-ink);
}

.riso-social__handle:hover {
	color: var(--riso-gold);
}

.riso-social__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2px;
}

.riso-social__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--riso-stone);
}

.riso-social__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--riso-ease), filter 0.8s ease;
}

.riso-social__tile:hover img {
	transform: scale(1.07);
	filter: brightness(0.78);
}

/* =========================================================================
   19. Contact
   ====================================================================== */

.riso-contact {
	padding: clamp(90px, 11vw, 170px) 0;
	background: var(--riso-ink);
	color: var(--riso-cream);
}

.riso-contact__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	gap: clamp(50px, 6vw, 110px);
}

.riso-contact__copy .riso-eyebrow {
	margin-bottom: 26px;
}

.riso-contact__copy .riso-display {
	max-width: 14ch;
	margin: 0 0 30px;
	color: var(--riso-cream);
}

.riso-contact__intro {
	max-width: 44ch;
	margin: 0 0 50px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.95;
	color: rgba(255, 253, 249, 0.62);
}

.riso-contact__details {
	display: flex;
	flex-direction: column;
	gap: 26px;
	margin: 0;
}

.riso-contact__details > div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.riso-contact__details dt {
	font-size: 10px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.45);
}

.riso-contact__details dd {
	margin: 0;
	font-family: var(--riso-serif);
	font-size: 26px;
	color: var(--riso-cream);
}

.riso-contact__details dd a {
	color: var(--riso-cream);
}

.riso-contact__details dd a:hover {
	color: var(--riso-gold);
}

/* --- The form --- */

.riso-contact__panel {
	position: relative;
	border: 1px solid rgba(255, 253, 249, 0.16);
	padding: clamp(30px, 3.4vw, 56px);
}

.riso-form {
	display: grid;
	gap: 26px;
}

.riso-form.is-hidden,
.riso-form__done.is-hidden {
	display: none;
}

/* The honeypot must be reachable by a bot and invisible to a person. */
.riso-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.riso-field {
	display: grid;
	gap: 10px;
}

.riso-field__label {
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.5);
}

.riso-field input,
.riso-field textarea,
.riso-field select {
	width: 100%;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 253, 249, 0.28);
	border-radius: 0;
	background: transparent;
	color: var(--riso-cream);
	font-size: 16px;
	font-weight: 300;
	outline: none;
	transition: border-color 0.5s ease;
	appearance: none;
	-webkit-appearance: none;
}

.riso-field textarea {
	resize: vertical;
	line-height: 1.7;
}

.riso-field select {
	cursor: pointer;
	/* A gold chevron, so the native arrow does not fight the palette. */
	background-image: linear-gradient(45deg, transparent 50%, var(--riso-gold) 50%),
		linear-gradient(135deg, var(--riso-gold) 50%, transparent 50%);
	background-position: calc(100% - 12px) calc(50% + 1px), calc(100% - 7px) calc(50% + 1px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 28px;
}

.riso-field select option {
	background: var(--riso-cream);
	color: var(--riso-ink);
}

.riso-field input:focus,
.riso-field textarea:focus,
.riso-field select:focus {
	border-bottom-color: var(--riso-gold);
}

.riso-field input::placeholder,
.riso-field textarea::placeholder {
	color: rgba(255, 253, 249, 0.3);
}

.riso-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.riso-form .riso-btn {
	margin-top: 12px;
}

.riso-form__error {
	margin: 0;
	color: #e2a08a;
	font-size: 12px;
	letter-spacing: 0.04em;
}

.riso-form__error[hidden] {
	display: none;
}

.riso-form__done {
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
	animation: riso-fade 0.7s ease both;
}

@keyframes riso-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes riso-rise {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.riso-form__seal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1px solid var(--riso-gold);
	border-radius: 50%;
	font-family: var(--riso-serif);
	font-size: 24px;
	color: var(--riso-gold);
}

.riso-form__thanks {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: 34px;
	color: var(--riso-cream);
}

.riso-form__thanks-note {
	max-width: 34ch;
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.9;
	color: rgba(255, 253, 249, 0.62);
}

/* =========================================================================
   20. Footer
   ====================================================================== */

.riso-footer {
	padding: clamp(50px, 6vw, 80px) 32px 40px;
	background: var(--riso-ink-deep);
	color: rgba(255, 253, 249, 0.6);
}

.riso-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	max-width: 1400px;
	margin: 0 auto;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 253, 249, 0.12);
}

.riso-footer__logo {
	display: block;
	line-height: 0;
}

.riso-footer__logo img {
	height: 52px;
	width: auto;
}

.riso-footer__nav .riso-menu {
	flex-wrap: wrap;
	gap: 34px;
}

.riso-footer a {
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.6);
}

.riso-footer a:hover {
	color: var(--riso-cream);
}

.riso-footer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

.riso-footer__meta a {
	letter-spacing: 0.2em;
	text-transform: none;
}

.riso-footer__legal {
	max-width: 1400px;
	margin: 26px auto 0;
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.34);
}

/* =========================================================================
   21. Lightbox
   ====================================================================== */

.riso-lightbox {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(24px, 5vw, 80px);
	background: rgba(15, 13, 12, 0.94);
	animation: riso-fade 0.4s ease both;
}

.riso-lightbox[hidden] {
	display: none;
}

.riso-lightbox__img {
	max-width: 100%;
	max-height: 82vh;
	object-fit: contain;
	animation: riso-rise 0.6s var(--riso-ease) both;
}

.riso-lightbox__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 34px;
	margin: 0;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 253, 249, 0.7);
}

.riso-lightbox__close {
	position: absolute;
	top: 28px;
	right: 32px;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 253, 249, 0.35);
	background: transparent;
	color: var(--riso-cream);
	font-size: 16px;
	cursor: pointer;
	transition: border-color 0.45s ease, color 0.45s ease;
}

.riso-lightbox__close:hover {
	border-color: var(--riso-gold);
	color: var(--riso-gold);
}

.riso-lightbox__prev,
.riso-lightbox__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	padding: 12px;
	border: 0;
	background: transparent;
	color: rgba(255, 253, 249, 0.7);
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.45s ease;
}

.riso-lightbox__prev:hover,
.riso-lightbox__next:hover {
	color: var(--riso-cream);
}

.riso-lightbox__prev {
	left: 24px;
}

.riso-lightbox__next {
	right: 24px;
}

/* =========================================================================
   22. Inner pages — posts, archives, search, 404, comments
   ====================================================================== */

/* Away from the hero the header is solid, so content must clear it. */
.riso-inner .riso-main {
	padding-top: 108px;
}

/* --- The masthead every inner page opens with --- */

.riso-page-head {
	padding: clamp(56px, 7vw, 104px) 0 clamp(30px, 4vw, 52px);
	text-align: center;
}

.riso-page-head__intro {
	max-width: 52ch;
	margin: 22px auto 0;
	color: var(--riso-muted);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.95;
}

/* A short gold rule closing the masthead, echoing the section labels. */
.riso-page-head__rule {
	display: block;
	width: 46px;
	height: 1px;
	margin: clamp(28px, 3.4vw, 44px) auto 0;
	background: var(--riso-gold);
}

.riso-page-hero {
	max-width: 1560px;
	margin: 0 auto;
	padding-inline: var(--riso-gutter);
}

.riso-page-hero img {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	background: var(--riso-stone);
}

/* A page whose body copy leads straight into a designed section wants less
   air beneath it than a standalone article. */
.riso-entry--tight {
	padding-bottom: clamp(30px, 4vw, 56px);
}

/* --- Client quotes, from [riso_testimonials] --- */

.riso-quotes {
	display: grid;
	gap: clamp(22px, 3vw, 34px);
	margin: clamp(32px, 4vw, 48px) 0;
}

.riso-quote {
	margin: 0;
	padding-left: 26px;
	border-left: 1px solid var(--riso-gold);
}

.riso-quote__body {
	margin: 0;
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: clamp(19px, 1.8vw, 24px);
	line-height: 1.55;
	color: var(--riso-ink);
}

.riso-quote__author {
	margin-top: 12px;
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

/* --- The closing call to action --- */

.riso-cta {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.riso-cta__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 60%;
}

.riso-cta__wash {
	position: absolute;
	inset: 0;
	background: rgba(20, 17, 15, 0.72);
}

.riso-cta__inner {
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	padding: clamp(72px, 9vw, 130px) var(--riso-gutter);
}

.riso-cta__title {
	margin: 0;
	font-family: var(--riso-serif);
	font-weight: 300;
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1.2;
	color: var(--riso-cream);
}

.riso-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 3vw, 34px);
	margin-top: clamp(30px, 4vw, 46px);
}

/* The email link sits on dark ground here. */
.riso-underline--light {
	border-bottom-color: rgba(233, 207, 166, 0.5);
	color: var(--riso-gold-light);
}

.riso-underline--light:hover {
	border-bottom-color: var(--riso-gold-light);
	color: var(--riso-cream);
}

.riso-entry-head {
	padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 52px);
	background: var(--riso-cream);
	text-align: center;
}

.riso-entry-head__meta {
	margin-top: 18px;
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

.riso-entry-hero {
	max-width: 1560px;
	margin: 0 auto;
	padding-inline: var(--riso-gutter);
}

.riso-entry-hero img {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
	background: var(--riso-stone);
}

.riso-entry {
	padding: clamp(44px, 6vw, 80px) 0 clamp(90px, 11vw, 160px);
}

/* Long-form copy is held to a readable measure and centred, rather than run to
   the full width of the shell. A breakout grid — one narrow reading column
   flanked by two flexible margins — so a block that opts out (.riso-page-grid,
   .riso-page-cta, .alignfull) can still span the full shell instead of being
   capped to the 68ch column like its neighbouring paragraphs. */
.riso-entry__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(68ch, 100%) minmax(0, 1fr);
	color: var(--riso-ink);
	font-size: 17px;
	line-height: 1.85;
}

.riso-entry__content > * {
	grid-column: 2;
}

.riso-page-lead {
	margin: 0 0 clamp(48px, 6vw, 78px);
	font-family: var(--riso-serif);
	font-size: clamp(25px, 3vw, 40px);
	font-weight: 300;
	line-height: 1.4;
}

.riso-page-kicker {
	font-size: 10px;
	letter-spacing: .38em;
	text-transform: uppercase;
	color: var(--riso-gold);
}

/* Full-bleed within the reading column's shell — see the breakout grid on
   .riso-entry__content above. */
.riso-page-grid,
.riso-page-cta,
.riso-entry__content .alignfull {
	grid-column: 1 / -1;
}

.riso-page-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(30px, 4vw, 56px) clamp(28px, 4vw, 64px);
	max-width: none;
	margin: 42px 0 74px;
	padding-top: clamp(34px, 4vw, 48px);
	border-top: 1px solid var(--riso-stone);
	counter-reset: riso-page-card;
}

.riso-page-card {
	counter-increment: riso-page-card;
	padding: 0;
}

.riso-page-card::before {
	display: block;
	margin: 0 0 10px;
	counter-reset: none;
	content: counter(riso-page-card, upper-roman) '.';
	font-family: var(--riso-serif);
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--riso-gold);
}

.riso-page-card h2 { margin: 0 0 14px; font-family: var(--riso-serif); font-size: clamp(21px, 2vw, 26px); font-weight: 400; }
.riso-page-card p, .riso-page-card li { color: var(--riso-muted); }

.riso-page-cta {
	margin-top: clamp(54px, 7vw, 90px);
	padding: clamp(42px, 6vw, 70px);
	text-align: center;
	background: var(--riso-ink);
	color: var(--riso-cream);
}

.riso-page-cta h2 { margin: 0 0 16px; font-family: var(--riso-serif); font-size: clamp(30px, 4vw, 50px); font-weight: 300; }
.riso-page-cta a { display: inline-block; margin-top: 20px; padding: 14px 25px; border: 1px solid var(--riso-gold-light); color: var(--riso-gold-light); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease; }
.riso-page-cta a:hover { background: var(--riso-gold-light); border-color: var(--riso-gold-light); color: var(--riso-ink); }

@media (max-width: 720px) {
	.riso-page-grid { grid-template-columns: 1fr; gap: 34px; }
}

.riso-entry__content > * + * {
	margin-top: 22px;
}

.riso-entry__content h2,
.riso-entry__content h3,
.riso-entry__content h4 {
	margin-top: 44px;
	font-size: clamp(22px, 2.2vw, 32px);
}

.riso-entry__content h3 {
	font-size: clamp(20px, 1.9vw, 26px);
}

.riso-entry__content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.riso-entry__content blockquote {
	margin: 32px 0;
	padding-left: 26px;
	border-left: 1px solid var(--riso-gold);
	font-family: var(--riso-serif);
	font-style: italic;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.5;
}

.riso-entry__content figure {
	margin-inline: 0;
}

.riso-entry__content figcaption {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

.riso-entry__content ul,
.riso-entry__content ol {
	padding-left: 22px;
}

.riso-entry__content li + li {
	margin-top: 8px;
}

.riso-entry__content pre {
	padding: 20px;
	overflow-x: auto;
	background: var(--riso-ink);
	color: var(--riso-cream);
	font-size: 13px;
}

.riso-entry__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.riso-entry__content th,
.riso-entry__content td {
	padding: 10px 12px;
	border: 1px solid var(--riso-stone);
	text-align: left;
}

.riso-entry__content .alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.riso-entry__content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

/* --- Post/archive cards --- */

.riso-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(22px, 3vw, 40px);
}

.riso-card {
	display: flex;
	flex-direction: column;
	background: var(--riso-cream);
}

.riso-card__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--riso-stone);
}

.riso-card__thumb img {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	transition: transform 1.1s var(--riso-ease);
}

.riso-card:hover .riso-card__thumb img {
	transform: scale(1.05);
}

/* The subject, pinned to the photograph rather than stacked above the title. */
.riso-card__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 9px 14px;
	background: var(--riso-ink);
	color: var(--riso-gold-light);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.riso-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(22px, 2.4vw, 30px);
}

.riso-card__title {
	margin-bottom: 12px;
	font-size: clamp(20px, 1.9vw, 26px);
	line-height: 1.24;
}

.riso-card__title a {
	color: var(--riso-ink);
}

.riso-card__title a:hover {
	color: var(--riso-gold);
}

.riso-card__excerpt {
	color: var(--riso-muted);
	font-size: 14px;
	line-height: 1.85;
}

/* Pushed to the foot so cards in a row line their meta up. */
.riso-card__meta {
	margin: auto 0 0;
	padding-top: 18px;
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

/* --- A single Journal entry --- */

.riso-post__head {
	padding: clamp(48px, 6vw, 84px) 0 clamp(26px, 3.4vw, 42px);
	text-align: center;
}

.riso-post__head .riso-eyebrow a {
	color: inherit;
}

.riso-post__head .riso-eyebrow a:hover {
	color: var(--riso-ink);
}

.riso-post__meta {
	margin-top: 20px;
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

.riso-post__hero {
	max-width: 1560px;
	margin: 0 auto;
	padding-inline: var(--riso-gutter);
}

.riso-post__hero img {
	width: 100%;
	max-height: 640px;
	object-fit: cover;
	background: var(--riso-stone);
}

.riso-post__hero figcaption {
	margin-top: 12px;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--riso-muted);
	text-align: center;
}

/* The opening paragraph is set larger, the way a magazine sets a lede. */
.riso-entry__content--lede > p:first-of-type {
	font-family: var(--riso-serif);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.6;
	color: var(--riso-ink);
}

.riso-post__by {
	margin-top: clamp(34px, 4vw, 52px);
	padding-top: 24px;
	border-top: 1px solid var(--riso-stone);
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

/* --- Further reading --- */

.riso-related {
	padding: clamp(56px, 7vw, 96px) 0;
	background: var(--riso-cream);
	border-top: 1px solid var(--riso-stone);
}

.riso-related .riso-card {
	background: var(--riso-ivory);
}

/* --- The Journal lead --- */

.riso-lead {
	padding: 0 0 clamp(40px, 5vw, 66px);
}

.riso-lead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}

.riso-lead__figure {
	display: block;
	overflow: hidden;
	background: var(--riso-stone);
}

.riso-lead__figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	transition: transform 1.2s var(--riso-ease);
}

.riso-lead__figure:hover img {
	transform: scale(1.04);
}

.riso-lead__title {
	margin: 0 0 18px;
	font-size: clamp(26px, 3vw, 42px);
	line-height: 1.16;
}

.riso-lead__title a {
	color: var(--riso-ink);
}

.riso-lead__title a:hover {
	color: var(--riso-gold);
}

.riso-lead__excerpt {
	margin: 0 0 20px;
	max-width: 46ch;
	color: var(--riso-muted);
	font-size: 15px;
	line-height: 1.9;
}

.riso-lead__meta {
	margin: 0 0 24px;
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

/* --- Subject filter --- */

.riso-filter {
	padding: clamp(18px, 2.4vw, 26px) 0;
	border-top: 1px solid var(--riso-stone);
	border-bottom: 1px solid var(--riso-stone);
}

.riso-filter__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px clamp(18px, 2.4vw, 32px);
}

.riso-filter__label {
	font-size: 9px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--riso-gold);
}

.riso-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.riso-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--riso-stone);
	color: var(--riso-ink);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

a.riso-filter__chip:hover,
.riso-filter__chip.is-current {
	background: var(--riso-ink);
	border-color: var(--riso-ink);
	color: var(--riso-cream);
}

.riso-filter__count {
	font-family: var(--riso-serif);
	font-size: 12px;
	color: var(--riso-gold);
}

a.riso-filter__chip:hover .riso-filter__count,
.riso-filter__chip.is-current .riso-filter__count {
	color: var(--riso-gold-light);
}

/* --- Pagination --- */

.riso-pagination {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 5vw, 68px);
}

.riso-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.riso-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--riso-stone);
	color: var(--riso-ink);
	font-size: 11px;
	letter-spacing: 0.14em;
	transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

.riso-pagination .page-numbers:hover,
.riso-pagination .page-numbers.current {
	background: var(--riso-ink);
	border-color: var(--riso-ink);
	color: var(--riso-cream);
}

/* --- Portfolio gallery (the "riso_project" archive) --- */

.riso-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 30px);
	padding: clamp(20px, 3vw, 40px) 0 clamp(70px, 8vw, 120px);
}

.riso-gallery__card {
	display: block;
}

.riso-gallery__frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--riso-stone);
}

.riso-gallery__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	transition: transform 1.6s var(--riso-ease), filter 0.7s ease;
}

.riso-gallery__card:hover .riso-gallery__frame img {
	transform: scale(1.06);
	filter: brightness(0.93);
}

/* A caption, not a heading — it borrowed .riso-display's hero-scale clamp
   (30–50px, ink black) before, which read as a stray headline crowding the
   photo grid instead of a quiet name under it. The fading hairline above is
   the same gold gradient every eyebrow on the site opens with (.riso-rule),
   so the plate under each frame reads as a designed label, not bare text. */
.riso-gallery__title {
	position: relative;
	margin: 26px 2px 0;
	padding-top: 16px;
	font-family: var(--riso-serif);
	font-size: clamp(19px, 1.5vw, 24px);
	font-weight: 400;
	letter-spacing: 0.015em;
	color: var(--riso-gold);
	transition: color 0.4s ease;
}

.riso-gallery__title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 1px;
	background: linear-gradient(to right, var(--riso-gold), rgba(176, 141, 87, 0));
	transition: width 0.5s var(--riso-ease);
}

.riso-gallery__card:hover .riso-gallery__title::before {
	width: 64px;
}

.riso-gallery__card:hover .riso-gallery__title {
	color: var(--riso-ink);
}

@media (max-width: 900px) {
	.riso-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.riso-gallery {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* --- Album detail (a single "riso_project") --- */

.riso-album-video {
	padding: clamp(20px, 3vw, 36px) 0;
}

.riso-album-video video,
.riso-album-video iframe {
	width: 100%;
	max-height: 75vh;
	background: var(--riso-ink);
}

.riso-album-video iframe {
	aspect-ratio: 16 / 9;
	max-height: none;
}

.riso-album-photos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	padding: clamp(20px, 3vw, 40px) 0 clamp(70px, 8vw, 120px);
}

.riso-album-photos a {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--riso-stone);
	cursor: zoom-in;
}

.riso-album-photos img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--riso-ease), filter 0.6s ease;
}

.riso-album-photos a:hover img {
	transform: scale(1.05);
	filter: brightness(0.9);
}

@media (max-width: 900px) {
	.riso-album-photos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.riso-album-photos {
		grid-template-columns: 1fr;
	}
}

.riso-album-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding-bottom: clamp(70px, 8vw, 120px);
	text-align: center;
}

.riso-album-pagination p {
	margin: 0;
}

/* --- Post navigation --- */

.riso-post-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 30px;
	border-top: 1px solid var(--riso-stone);
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* --- Sidebar & widgets --- */

.riso-with-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.riso-widget {
	margin-bottom: 38px;
	font-size: 14px;
}

.riso-widget__title {
	margin-bottom: 16px;
	font-family: var(--riso-sans);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--riso-gold);
}

.riso-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.riso-widget li {
	padding: 8px 0;
	border-bottom: 1px solid var(--riso-stone);
}

.riso-widget a {
	color: var(--riso-ink);
}

.riso-widget a:hover {
	color: var(--riso-gold);
}

/* --- Search form --- */

.riso-search {
	display: flex;
	gap: 10px;
}

.riso-search input[type='search'] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid var(--riso-sand);
	border-radius: 0;
	background: transparent;
	font-size: 15px;
}

.riso-search input[type='search']:focus {
	outline: 0;
	border-bottom-color: var(--riso-gold);
}

.riso-search button {
	flex: 0 0 auto;
	padding: 0 22px;
	border: 0;
	background: var(--riso-sand);
	color: var(--riso-ink);
	font-size: 9px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.45s ease, color 0.45s ease;
}

.riso-search button:hover {
	background: var(--riso-gold);
	color: var(--riso-cream);
}

/* --- 404 --- */

.riso-404 {
	padding: clamp(96px, 14vw, 190px) 0;
	text-align: center;
}

.riso-404__code {
	font-family: var(--riso-serif);
	font-size: clamp(76px, 15vw, 190px);
	line-height: 0.9;
	color: var(--riso-gold);
	opacity: 0.32;
}

.riso-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin-top: 40px;
}

.riso-404 .riso-search {
	max-width: 420px;
	margin: 36px auto 0;
}

/* --- Comments --- */

.riso-comments {
	margin-top: clamp(48px, 6vw, 78px);
	padding-top: clamp(34px, 4vw, 52px);
	border-top: 1px solid var(--riso-stone);
}

.riso-comments__title {
	margin-bottom: 30px;
	font-size: clamp(22px, 2.2vw, 30px);
}

.riso-comments ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.riso-comments .children {
	margin-left: clamp(18px, 3vw, 40px);
	padding-left: clamp(14px, 2vw, 24px);
	border-left: 1px solid var(--riso-stone);
	list-style: none;
}

.riso-comments .comment-body {
	padding: 22px 0;
	border-bottom: 1px solid var(--riso-stone);
}

.riso-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.riso-comments .comment-author img {
	border-radius: 50%;
}

.riso-comments .comment-meta {
	margin-bottom: 12px;
	font-size: 10px;
	letter-spacing: 0.18em;
	color: var(--riso-muted);
}

.riso-comments .comment-content {
	font-size: 15px;
	line-height: 1.85;
}

.riso-comments .comment-reply-link {
	font-size: 9px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.riso-comments .comment-form {
	display: grid;
	gap: 18px;
	max-width: 620px;
}

.riso-comments .comment-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 9px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--riso-muted);
}

.riso-comments .comment-form input[type='text'],
.riso-comments .comment-form input[type='email'],
.riso-comments .comment-form input[type='url'],
.riso-comments .comment-form textarea {
	width: 100%;
	padding: 13px 0;
	border: 0;
	border-bottom: 1px solid var(--riso-sand);
	border-radius: 0;
	background: transparent;
	font-size: 15px;
}

.riso-comments .comment-form textarea {
	resize: vertical;
}

.riso-comments .comment-form input:focus,
.riso-comments .comment-form textarea:focus {
	outline: 0;
	border-bottom-color: var(--riso-gold);
}

.riso-comments .form-submit input {
	padding: 19px 34px;
	border: 0;
	background: var(--riso-sand);
	color: var(--riso-ink);
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.4s ease, color 0.4s ease;
}

.riso-comments .form-submit input:hover {
	background: var(--riso-gold);
	color: var(--riso-cream);
}

/* WordPress alignment/caption classes the editor emits. */
.alignleft {
	float: left;
	margin: 6px 26px 20px 0;
}

.alignright {
	float: right;
	margin: 6px 0 20px 26px;
}

.wp-caption {
	max-width: 100%;
}

.sticky,
.gallery-caption,
.bypostauthor {
	/* Required by the theme review; no visual treatment needed here. */
	display: block;
}

/* =========================================================================
   23. Responsive
   ====================================================================== */

@media (max-width: 1100px) {
	.riso-hotel__preview {
		display: none;
	}

	/* With no floating preview there is no hover affordance, so show the panel. */
	.riso-hotel__panel {
		display: grid !important;
	}
}

@media (max-width: 980px) {
	.riso-with-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.riso-hero__follow {
		display: none;
	}
}

/* The six desktop links plus the mark measure ~950px together. Below that the
   logo is squeezed out of proportion and the right-hand nav eventually runs off
   the screen, so the drawer takes over well above phone widths. */
@media (max-width: 1200px) {
	/* The tracks must be allowed to shrink below their content, or the hidden
	   left-hand nav keeps its full width and pushes the burger off screen. */
	.riso-header-inner {
		padding: 0 clamp(18px, 4vw, 32px);
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

	/* The canvas hides the desktop links on a narrow screen; the drawer keeps
	   them reachable without changing the bar. */
	.riso-nav-left {
		visibility: hidden;
		width: 0;
		overflow: hidden;
	}

	.riso-nav-right {
		gap: 0;
	}

	.riso-nav-right .riso-menu,
	.riso-nav-right .riso-enquire {
		display: none;
	}

	.riso-burger {
		display: block;
		flex: 0 0 auto;
	}
}

@media (max-width: 760px) {

	.riso-field-row {
		grid-template-columns: 1fr;
	}

	.riso-cities__count {
		margin-bottom: 18px;
	}

	.riso-cities__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 18px;
	}

	.riso-city {
		justify-content: flex-start;
		gap: 10px;
		padding: 16px 0;
	}

	.riso-city__name {
		gap: 7px;
		font-size: clamp(18px, 5vw, 23px);
	}

	.riso-city__dot {
		flex: 0 0 auto;
		width: 4px;
		height: 4px;
		margin-left: auto;
		background: rgba(233, 207, 166, 0.55);
		transform: rotate(45deg);
	}

	.riso-city:last-child {
		grid-column: 1 / -1;
		width: calc(50% - 9px);
		justify-self: center;
	}

	.riso-cities__stem {
		display: none;
	}

	.riso-cities__note {
		margin-left: 0;
	}

	.riso-pillars {
		grid-template-columns: 1fr;
	}

	.riso-case__code {
		top: 24px;
		left: 24px;
	}

	.riso-case__body {
		left: 24px;
		right: 24px;
		bottom: 26px;
	}

	.riso-footer__inner {
		flex-direction: column;
		text-align: center;
	}

	.riso-footer__nav .riso-menu,
	.riso-footer__meta {
		justify-content: center;
	}

	.riso-footer__legal {
		text-align: center;
	}
}

/* Very short windows: the scroll cue costs the caption row its air. */
@media (max-height: 620px) {
	.riso-hero__scroll {
		display: none;
	}
}

/* =========================================================================
   23b. Phones
   ------------------------------------------------------------------------
   A single column everywhere would make this page roughly 22,000px long, so
   the picture grids stay two across. Anything tappable is brought up to a
   44px target, and the sections lose the vertical air they only need on a
   wide screen.
   ====================================================================== */

@media (max-width: 760px) {
	/* --- Vertical rhythm --- */

	.riso-cases,
	.riso-about,
	.riso-testimonial,
	.riso-contact {
		padding: clamp(56px, 13vw, 84px) 0;
	}

	.riso-services,
	.riso-process,
	.riso-mood {
		padding: clamp(52px, 12vw, 76px) 0;
	}

	.riso-suite {
		padding: clamp(52px, 12vw, 76px) 18px;
	}

	.riso-partners__body {
		padding: clamp(56px, 13vw, 84px) 20px clamp(36px, 8vw, 52px);
	}

	.riso-press {
		padding: 0 0 clamp(56px, 13vw, 84px);
	}

	.riso-social {
		padding: 0 0 clamp(52px, 12vw, 76px);
	}

	.riso-head-centre,
	.riso-head-split,
	.riso-head-split--end {
		margin-bottom: clamp(28px, 7vw, 42px);
	}

	/* --- Picture grids stay two across --- */

	.riso-press__grid,
	.riso-social__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Press headlines need editorial width; narrow two-up cards turn every
	   heading into an unreadable vertical stack. */
	.riso-press__grid {
		display: flex;
		gap: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		overscroll-behavior-inline: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-inline: 1px;
	}

	.riso-press__grid::-webkit-scrollbar { display: none; }

	.riso-press__card {
		flex: 0 0 100%;
		aspect-ratio: 4 / 3;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.riso-press__body {
		gap: 10px;
		padding: clamp(24px, 7vw, 34px);
	}

	.riso-press__title {
		max-width: 22ch;
		font-size: clamp(22px, 6vw, 28px);
		line-height: 1.2;
	}

	.riso-press__controls {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20px;
		margin-top: 20px;
	}

	.riso-press__controls button {
		width: 40px;
		height: 40px;
		border: 1px solid rgba(176, 141, 87, .45);
		border-radius: 50%;
		background: transparent;
		color: var(--riso-ink);
		cursor: pointer;
	}

	.riso-press__controls p {
		min-width: 58px;
		margin: 0;
		font-size: 10px;
		letter-spacing: .24em;
		color: var(--riso-muted);
		text-align: center;
	}

	.riso-cases__grid,
	.riso-mood__boards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	/* Two disciplines to a row rather than seven stacked. */
	.riso-suite__grid {
		gap: 26px 14px;
	}

	.riso-cap {
		flex: 0 1 calc(50% - 7px);
		padding: 16px 6px 12px;
		gap: 14px;
	}

	.riso-cap__ring {
		width: clamp(84px, 26vw, 104px);
	}

	.riso-cap__disc i {
		font-size: clamp(24px, 7vw, 30px);
	}

	.riso-suite__frame {
		padding: clamp(30px, 8vw, 44px) 16px;
	}

	/* --- The services cards --- */

	.riso-service {
		min-height: 0;
		padding: 28px 24px;
	}

	.riso-service__photo {
		opacity: 0.5;
	}

	/* --- The hero photograph ---
	 * Full bleed, edge to edge and all the way down: the photograph is the
	 * first thing the site says, and a hero that stops short of the fold reads
	 * as a banner instead.
	 *
	 * The height is svh, not vh. `100vh` on a phone is the viewport with the
	 * address bar *retracted*, which is taller than what is actually on screen
	 * — so a 100vh hero pushes its own caption bar and dots below the fold, and
	 * the photograph appears to run off the bottom. `100svh` is the small
	 * viewport height, measured with the bar showing, so the hero fills exactly
	 * what the visitor can see and the caption sits on the bottom edge. It also
	 * does not resize when the bar slides away mid-scroll, which dvh would.
	 *
	 * min-height is overridden because the base rule's 620px floor is taller
	 * than a small phone's screen, which would reintroduce the same overhang.
	 *
	 * The frames are composed wide — 2:1 and 16:9 — so a window this tall and
	 * narrow shows about a quarter of each one across. That is what the
	 * horizontal half of each slide's object-position is for: see the focal
	 * points in inc/defaults.php, which put the couple inside that quarter. */
	@media (orientation: portrait) {
		.riso-hero {
			height: 100vh;
			height: 100svh;
			min-height: 0;
		}

	}

	/* --- The hero caption bar ---
	 * On a wide screen the caption sits left and the dots right. There is no
	 * room for that side by side on a phone, so the row wrapped — and the dots
	 * landed exactly where the absolutely-positioned scroll cue sits, leaving
	 * the caption, the dots and the words SCROLL DOWN printed over each other.
	 * They stack in a defined order instead, and the cue steps aside. */
	.riso-hero__bar {
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 14px;
		padding-bottom: 26px;
	}

	.riso-hero__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		width: 100%;
	}

	.riso-hero__caption {
		line-height: 1.6;
	}

	.riso-hero__scroll {
		display: none;
	}

	/* Phones get the supplied portrait sequence; desktop keeps the landscape
	 * sequence. Both sets use the same carousel interaction. */
	.riso-hero__slide[data-riso-viewport="desktop"],
	.riso-hero__dot[data-riso-viewport="desktop"] {
		display: none;
	}

	.riso-hero__slide[data-riso-viewport="mobile"],
	.riso-hero__dot[data-riso-viewport="mobile"] {
		display: block;
	}

	.riso-hero__stage {
		cursor: grab;
		touch-action: pan-y;
	}

	/* --- Tap targets --- */

	.riso-hero__dot {
		padding: 14px 9px;
	}

	.riso-hero__dots {
		gap: 0;
		margin-left: -9px; /* Pull the first dot's padding back to the edge. */
	}

	.riso-field input,
	.riso-field textarea,
	.riso-field select,
	.riso-search input[type='search'],
	.riso-comments .comment-form input,
	.riso-comments .comment-form textarea {
		padding: 14px 0;
		/* 16px stops iOS zooming the page when a field takes focus. */
		font-size: 16px;
		min-height: 46px;
	}

	.riso-btn,
	.riso-search button,
	.riso-comments .form-submit input {
		min-height: 50px;
		width: 100%;
		justify-content: center;
	}

	.riso-footer__meta a,
	.riso-footer__nav .riso-menu a,
	.riso-contact__details dd a,
	.riso-underline {
		display: inline-block;
		padding-block: 8px;
	}

	.riso-drawer a {
		display: inline-block;
		padding-block: 6px;
	}

	/* --- Odds and ends --- */

	.riso-portfolio__foot {
		justify-content: flex-start;
		padding-inline: var(--riso-gutter);
	}

	/* The Journal lead stacks; its photograph leads. */
	.riso-lead__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.riso-filter__inner {
		gap: 12px 16px;
	}

	.riso-post__hero img {
		max-height: 420px;
	}

	.riso-band__quote,
	.riso-testimonial__quote {
		max-width: none;
	}

	.riso-hotel__name {
		font-size: 19px;
	}

	.riso-city__name {
		font-size: 22px;
	}

	.riso-cities__number {
		font-size: 48px;
	}

	.riso-page-head {
		padding: clamp(40px, 10vw, 64px) 0 clamp(22px, 5vw, 34px);
	}

	.riso-entry {
		padding: clamp(32px, 8vw, 48px) 0 clamp(56px, 13vw, 84px);
	}

	.riso-cta__inner {
		padding: clamp(52px, 12vw, 76px) var(--riso-gutter);
	}
}

/* Narrow phones: the picture grids fall to one column, where two would leave
   each frame too small to read. */
@media (max-width: 430px) {
	/* Case studies are feature cards and want the full width; the moodboards
	   are small reference frames and stay paired. */
	.riso-cases__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.riso-hero__bar {
		padding-inline: 20px;
	}

	.riso-hero__caption {
		font-size: 9px;
		letter-spacing: 0.24em;
	}
}

/* =========================================================================
   24. Scroll reveal — a shared, gentle entrance for the repeating cards
   ====================================================================== */

/* Only an active observer opts cards into animation. Content stays visible
   when the interaction script is blocked or motion is reduced. */
.riso-reveal {
	transition: opacity 0.9s var(--riso-ease-soft), transform 0.9s var(--riso-ease-soft);
}

.riso-reveal:not(.is-in-view) {
	opacity: 0;
	transform: translateY(22px);
}

.riso-reveal.is-in-view {
	opacity: 1;
	transform: none;
}

.riso-page-grid .riso-page-card:nth-child(2) { transition-delay: 0.08s; }
.riso-page-grid .riso-page-card:nth-child(3) { transition-delay: 0.16s; }
.riso-page-grid .riso-page-card:nth-child(4) { transition-delay: 0.24s; }

.riso-gallery__card:nth-child(2),
.riso-cases__grid .riso-case:nth-child(2) { transition-delay: 0.08s; }
.riso-gallery__card:nth-child(3),
.riso-cases__grid .riso-case:nth-child(3) { transition-delay: 0.16s; }

/* A nav link's underline grows in from the left on hover — the Enquire chip
   already has its own solid hover treatment and sits this out. */
.riso-site-header .riso-nav a:not(.riso-enquire) {
	position: relative;
}

.riso-site-header .riso-nav a:not(.riso-enquire)::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -6px;
	height: 1px;
	background: currentColor;
	transition: right 0.45s var(--riso-ease);
}

.riso-site-header .riso-nav a:not(.riso-enquire):hover::after {
	right: 0;
}

/* =========================================================================
   25. Reduced motion
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.riso-reveal:not(.is-in-view) {
		opacity: 1;
		transform: none;
	}
	html {
		scroll-behavior: auto;
	}

	.riso-ticker__track,
	.riso-marquee__track {
		animation: none !important;
	}

	.riso-hero__stage img {
		transform: none !important;
		transition: none !important;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Print: the photography is decorative, the words are not. */
@media print {
	.riso-reveal:not(.is-in-view) {
		opacity: 1;
		transform: none;
	}
	.riso-site-header,
	.riso-drawer,
	.riso-hero,
	.riso-marquee,
	.riso-lightbox,
	.riso-social,
	.riso-wordband {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}


/* Keep keyboard controls legible without changing the card layout. */
.riso-frame:focus-visible { outline: 2px solid var(--riso-gold); outline-offset: -4px; }
.riso-marquee:focus-within .riso-marquee__track { animation-play-state: paused; }
.riso-press__controls button:disabled { opacity: .4; cursor: default; }
.riso-field [aria-invalid="true"] { border-color: #d89a83; }
/* Wedding stories: the photographs lead, with the names below the faces. */
.riso-cases__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.riso-case { aspect-ratio: auto; background: transparent; color: var(--riso-ink); }
.riso-case__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--riso-stone); }
.riso-case__photo .riso-case__img { object-position: center 65%; }
.riso-case__body { position: static; padding: 24px 0 8px; gap: 12px; }
.riso-case__note { color: var(--riso-muted); }
.riso-case__more { color: var(--riso-ink); font-size: 9px; letter-spacing: .2em; }
.riso-case__more-rule { background: var(--riso-gold); }
.riso-case__couple { line-height: 1.15; font-size: clamp(27px, 2.1vw, 36px); }
.riso-case__inset { inset: 12px; }
.riso-wedding { padding: 32px 0 0; }
.riso-wedding__back { margin-bottom: 28px; font-size: 12px; }
.riso-wedding__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.riso-wedding__portrait { margin: 0; overflow: hidden; background: var(--riso-stone); }
.riso-wedding__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 650px; object-fit: cover; object-position: center 65%; }
.riso-wedding__copy { min-width: 0; }
.riso-wedding__copy h1 { margin: 18px 0 22px; line-height: 1.07; }
.riso-wedding__lede { font-family: var(--riso-serif); font-size: clamp(22px, 2.1vw, 29px); line-height: 1.5; margin-bottom: 28px; }
.riso-wedding__details { margin: 0 0 30px; padding-top: 20px; border-top: 1px solid var(--riso-stone); }
.riso-wedding__details div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; margin-bottom: 12px; }
.riso-wedding__details dt { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--riso-muted); }
.riso-wedding__details dd { margin: 0; font-size: 13px; line-height: 1.7; }
.riso-wedding__copy > .riso-underline { display: inline-block; margin: 18px; font-size: 12px; }
.riso-wedding__story { margin: 38px 0 0; border-block: 1px solid var(--riso-stone); }
.riso-wedding__story summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; padding: 22px 0; list-style: none; font-family: var(--riso-serif); font-size: 25px; }
.riso-wedding__story summary::-webkit-details-marker { display: none; }
.riso-wedding__story[open] summary span { transform: rotate(45deg); }
.riso-wedding__story .riso-entry__content { max-width: 760px; padding: 10px 0 32px; margin-inline: auto; }
.riso-wedding__gallery { padding: 60px 0 0; scroll-margin-top: 110px; }
.riso-wedding__gallery .riso-head-split { margin-bottom: 30px; }
.riso-wedding__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.riso-wedding__photos a { display: block; position: relative; overflow: hidden; background: var(--riso-stone); }
.riso-wedding__photos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.riso-wedding__photos a:hover img { transform: scale(1.04); }
.riso-wedding__expand { position: absolute; right: 12px; bottom: 12px; background: var(--riso-ivory); color: var(--riso-ink); width: 32px; height: 32px; display: grid; place-items: center; }
.riso-wedding__gallery-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.riso-wedding__gallery-foot > span { color: var(--riso-muted); font-family: var(--riso-serif); font-style: italic; font-size: 19px; }
.riso-wedding__film { padding-top: 50px; scroll-margin-top: 110px; }
.riso-wedding__film video, .riso-wedding__film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; margin-top: 24px; background: var(--riso-ink); }
.riso-wedding__next { padding: 50px 0; margin-top: 60px; border-top: 1px solid var(--riso-stone); display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }
.riso-wedding__next > div { flex: 1 1 320px; }
.riso-wedding__next h2 { margin: 12px 0 0; }
.riso-wedding__next > .riso-underline { font-size: 12px; }
@media (max-width: 1100px) { .riso-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 22px; } }
@media (max-width: 760px) {
 .riso-wedding { padding-top: 24px; }
 .riso-wedding__intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .riso-wedding__portrait img { aspect-ratio: 4 / 3; object-position: center 75%; }
 .riso-wedding__copy h1 { font-size: clamp(38px, 10vw, 54px); }
 .riso-wedding__copy .riso-btn { padding-inline: 16px; }
 .riso-wedding__gallery { padding-top: 40px; }
 .riso-wedding__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
 .riso-wedding__photos img { aspect-ratio: 1; }
 .riso-wedding__gallery-foot .riso-btn { width: 100%; white-space: normal; line-height: 1.8; padding-inline: 12px; letter-spacing: .16em; }
 .riso-wedding__story summary { font-size: 23px; }
 .riso-wedding__next { margin-top: 40px; }
}
@media (max-width: 480px) {
 .riso-cases__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
 .riso-case__photo { aspect-ratio: 4 / 3; }
 .riso-case__body { padding-top: 18px; }
}
/* Keep original compositions intact in the album preview. */
.riso-wedding__photos img { object-fit: contain; background: #ebe6de; }
.riso-case__img[src*="ruhani-manav-ceremony-card"],
.riso-wedding__portrait img[src*="ruhani-manav-ceremony-card"] { transform: scale(1.12); transform-origin: 50% 85%; }
.riso-case:hover .riso-case__img[src*="ruhani-manav-ceremony-card"] { transform: scale(1.16); }
.riso-wedding__gallery-foot button[hidden] { display: none; }
/* Complete inner pages, using the existing ivory, ink and gold system. */
.riso-inner .riso-entry--tight { padding: 22px 0 48px; }
.riso-inner .riso-page-head { padding-bottom: 28px; }
.riso-contact-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin-top: 32px; }
.riso-contact-routes h2 { font-size: 26px; margin-top: 0; }
.riso-service-detail { padding-top: 30px; padding-bottom: 60px; }
.riso-service-detail__back { font-size: 12px; margin: 0 0 30px; }
.riso-service-detail__head { max-width: 900px; margin-bottom: 44px; }
.riso-service-detail__head h1 { margin-top: 16px; }
.riso-service-detail__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(32px,6vw,84px); align-items: start; }
.riso-service-detail__grid figure { margin: 0; position: sticky; top: 112px; }
.riso-service-detail__grid figure img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.riso-service-detail__grid figcaption { margin-top: 14px; font-family: var(--riso-serif); font-style: italic; font-size: 19px; color: var(--riso-muted); }
.riso-service-detail__grid .riso-entry__content > :first-child { margin-top: 0; }
.riso-service-detail__grid h2 { font-size: 29px; }
.riso-service-detail__links { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--riso-stone); }
.riso-service-detail__links .riso-underline { font-size: 12px; }
.riso-faq { padding-top: 56px; padding-bottom: 64px; max-width: 1000px; }
.riso-faq h2 { margin: 14px 0 32px; }
.riso-faq details { border-top: 1px solid var(--riso-stone); padding: 22px 0; }
.riso-faq details:last-child { border-bottom: 1px solid var(--riso-stone); }
.riso-faq summary { cursor: pointer; font-family: var(--riso-serif); font-size: 25px; line-height: 1.3; }
.riso-faq details p { max-width: 760px; margin: 18px 0 0; color: var(--riso-muted); font-size: 15px; line-height: 1.8; }
.riso-form__privacy { font-size: 12px; line-height: 1.8; color: rgba(255,253,249,.75); margin: 0 0 20px; }
.riso-form__privacy a { color: var(--riso-gold-light); text-decoration: underline; text-underline-offset: 3px; }
.riso-footer__policies { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 18px 0 0; font-size: 10px; letter-spacing: .12em; color: var(--riso-gold-light); }
.riso-press__card:focus-visible { outline: 2px solid var(--riso-gold); outline-offset: 4px; }
@media(max-width:760px) {
 .riso-contact-routes,.riso-service-detail__grid { grid-template-columns: minmax(0,1fr); }
 .riso-service-detail__grid figure { position: static; }
 .riso-service-detail__grid figure img { aspect-ratio: 4/3; }
 .riso-service-detail__head { margin-bottom: 26px; }
 .riso-service-detail__head h1 { font-size: clamp(36px,9vw,52px); }
 .riso-faq summary { font-size: 23px; }
 .riso-service-detail__links .riso-btn { white-space: normal; line-height: 1.8; padding-inline: 18px; }
}

/* The Suite tiles are full, keyboard-accessible service links. */
#riso-suite { scroll-margin-top: 110px; }
a.riso-cap { text-decoration: none; }
a.riso-cap:focus-visible {
 outline: 1px solid var(--riso-gold-light);
 outline-offset: 4px;
 background: rgba(233, 207, 166, 0.05);
 color: var(--riso-gold-light);
}
a.riso-cap:focus-visible .riso-cap__ring { transform: translateY(-4px); }

.riso-cap__disc svg { width: clamp(30px, 2.8vw, 40px); height: auto; overflow: visible; }