:root {
  --bg: #0e0e0e;
  --fg: #ecebe8;
  --muted: #9a9893;
  --line: #2a2a2a;
  --accent: #c9a96e;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 300 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* header + menu */
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; background: rgba(14,14,14,.86); backdrop-filter: blur(8px); }
.home .site-header { position: fixed; inset: 0 0 auto 0; background: linear-gradient(rgba(0,0,0,.55), transparent); backdrop-filter: none; }
.brand { white-space: nowrap; font: 400 1.5rem/1 var(--serif); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
nav a { text-decoration: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; transition: opacity .2s; }
nav a:hover, nav .active > a { opacity: 1; color: var(--accent); }
.has-sub { position: relative; }
.has-sub ul { position: absolute; top: 100%; left: -16px; display: none; flex-direction: column; gap: 0; padding: 12px 0; background: #151515; border: 1px solid var(--line); min-width: 200px; }
.has-sub ul a { display: block; padding: 6px 16px; }
.has-sub:hover ul, .has-sub:focus-within ul { display: flex; }
.menu-toggle { display: none; background: none; border: 0; width: 32px; height: 24px; position: relative; cursor: pointer; }
.menu-toggle span { position: absolute; left: 4px; right: 4px; height: 1px; background: var(--fg); transition: transform .3s; }
.menu-toggle span:first-child { top: 8px; } .menu-toggle span:last-child { top: 15px; }
.menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 760px) {
  .site-header { padding: 14px 16px; backdrop-filter: none; background: rgba(14,14,14,.95); }
  .home .site-header { background: linear-gradient(rgba(0,0,0,.55), transparent); }
  .menu-toggle { display: block; z-index: 2; }
  nav { position: fixed; inset: 0; height: 100vh; overflow-y: auto; padding: 80px 0 40px; background: rgba(10,10,10,.97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .menu-open nav { opacity: 1; pointer-events: auto; }
  nav ul { flex-direction: column; align-items: center; gap: 18px; }
  nav a { font-size: 1rem; }
  .has-sub ul { position: static; display: flex; background: none; border: 0; padding: 6px 0 0; align-items: center; min-width: 0; }
  .has-sub ul a { font-size: .8rem; padding: 2px 0; }
}
/* Rock'n H header: the full menu needs about 1,200px, so narrower screens (tablets included) get the menu button.
   Scoped to the header so the photography sidebar keeps its own menu on tablets. */
@media (max-width: 1199px) {
  .site-header { padding: 14px 16px; backdrop-filter: none; background: rgba(14,14,14,.95); }
  .home .site-header { background: linear-gradient(rgba(0,0,0,.55), transparent); }
  .site-header .menu-toggle { display: block; z-index: 2; }
  .site-header nav { position: fixed; inset: 0; height: 100vh; overflow-y: auto; padding: 80px 0 40px; background: rgba(10,10,10,.97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s; }
  .menu-open .site-header nav { opacity: 1; pointer-events: auto; }
  .site-header nav ul { flex-direction: column; align-items: center; gap: 18px; }
  .site-header nav a { font-size: 1rem; }
  .site-header .has-sub ul { position: static; display: flex; background: none; border: 0; padding: 6px 0 0; align-items: center; min-width: 0; }
  .site-header .has-sub ul a { font-size: .8rem; padding: 2px 0; }
}

/* home hero animation */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; text-align: center; }
.slides, .slide { position: absolute; inset: 0; }
.slide { background: center/cover no-repeat; opacity: 0; transform: scale(1.12); transition: opacity 2s ease, transform 9s ease-out; }
.slide.on { opacity: 1; transform: scale(1); }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,.15), rgba(0,0,0,.6)); }
.hero-text { position: relative; z-index: 1; padding: 0 16px; }
.reveal { margin: 0; font: 300 clamp(2.4rem, 8vw, 6rem)/1.05 var(--serif); letter-spacing: .12em; text-transform: uppercase; }
.reveal span { display: inline-block; opacity: 0; transform: translateY(.4em); filter: blur(6px); animation: rise 1.2s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.3s + var(--i) * .06s); }
.tagline { margin: 18px 0 0; letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; opacity: 0; animation: fade 1.4s 1.6s forwards; }
.hero-cta { display: inline-block; margin-top: 36px; padding: 12px 28px; border: 1px solid rgba(255,255,255,.6); text-decoration: none; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; opacity: 0; animation: fade 1.4s 2.1s forwards; transition: background .3s, color .3s; }
.hero-cta:hover { background: var(--fg); color: var(--bg); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reveal span, .tagline, .hero-cta { animation: none; opacity: 1; transform: none; filter: none; } .slide { transition: opacity 1s; transform: none; } }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px; padding: 4px; }
.card { position: relative; aspect-ratio: 4/5; overflow: hidden; text-decoration: none; background: #1a1a1a; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease, opacity .6s; opacity: .85; }
.card:hover img { transform: scale(1.05); opacity: 1; }
.card::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events: none; }
.card span { z-index: 1; position: absolute; left: 24px; bottom: 20px; font: 400 1.6rem var(--serif); letter-spacing: .05em; text-shadow: 0 1px 12px rgba(0,0,0,.6); }

/* page heads + prose */
.page-head { max-width: 900px; margin: 0 auto; padding: 72px 16px 40px; text-align: center; }
.page-head h1 { margin: 0; font: 300 clamp(2rem, 5vw, 3.4rem)/1.1 var(--serif); letter-spacing: .06em; }
.intro { color: var(--muted); max-width: 640px; margin: 16px auto 0; }
.prose { max-width: 1000px; margin: 0 auto 80px; padding: 0 16px; }
.prose.with-image { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
@media (max-width: 760px) { .prose.with-image { grid-template-columns: 1fr; } }
.prose > div { max-width: 680px; }
.prose:not(.with-image) > div { margin: 0 auto; }
.prose h2, .prose h3 { font: 400 1.8rem var(--serif); }
.note { color: var(--muted); font-style: italic; }

/* galleries */
.gallery { padding: 0 32px 80px; }
.layout-masonry { columns: 3 320px; column-gap: 24px; }
.layout-masonry .photo { break-inside: avoid; margin: 0 0 24px; }
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.layout-grid .photo { margin: 0; }
.layout-grid .photo img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.layout-single { max-width: 1600px; margin: 0 auto; }
.layout-single .photo { margin: 0 0 48px; }
@media (max-width: 760px) { .gallery { padding: 0 16px 60px; } }
.photo .open { all: unset; cursor: zoom-in; display: block; width: 100%; }
.photo img { width: 100%; transition: opacity .4s; }
.photo .open:hover img { opacity: .88; }
.photo figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); }
.photo figcaption strong { color: var(--fg); font-weight: 400; }
.edition { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 8px; font-size: .78rem; letter-spacing: .04em; color: var(--muted); }
.buy { padding: 6px 14px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; letter-spacing: .15em; text-transform: uppercase; font-size: .7rem; transition: background .2s, color .2s; }
.buy:hover { background: var(--accent); color: var(--bg); }
.sold-out span { opacity: .6; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(5,5,5,.97); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 92vw; text-align: center; }
.lightbox img { max-height: 82vh; max-width: 92vw; margin: 0 auto; animation: fade .4s; }
.lightbox figcaption { margin-top: 14px; color: var(--muted); font-size: .85rem; }
.lightbox figcaption strong { color: var(--fg); font-weight: 400; }
.lightbox .edition { justify-content: center; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--fg); font: 300 2.6rem/1 var(--serif); cursor: pointer; padding: 16px; opacity: .7; }
.lightbox button:hover { opacity: 1; }
.lb-close { top: 8px; right: 12px; } .lb-prev { left: 8px; } .lb-next { right: 8px; }

/* contact form */
.contact { display: grid; gap: 18px; margin-top: 32px; }
.contact label { display: grid; gap: 6px; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.contact input, .contact textarea { font: inherit; color: var(--fg); background: #151515; border: 1px solid var(--line); padding: 12px 14px; letter-spacing: normal; text-transform: none; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--accent); }
.contact button { justify-self: start; font: inherit; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; padding: 12px 28px; background: var(--fg); color: var(--bg); border: 0; cursor: pointer; }
.hp { display: none; }

.draft-banner { position: sticky; top: 0; z-index: 30; background: var(--accent); color: #111; text-align: center; font-size: .8rem; padding: 6px 16px; letter-spacing: .05em; }
.site-footer { border-top: 1px solid var(--line); padding: 32px 16px; text-align: center; color: var(--muted); font-size: .75rem; letter-spacing: .05em; }
.home .site-footer { border: 0; }
.draft-banner + .site-header { top: 33px; }

/* ===== Entrance (stand-in for the coin intro) ===== */
.side-entrance .doors { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.door { padding: 18px 32px; border: 1px solid rgba(255,255,255,.7); text-decoration: none; font: 400 1.4rem var(--serif); letter-spacing: .08em; transition: background .3s, color .3s; }
.door:hover, .door:focus-visible { background: var(--fg); color: var(--bg); }

/* ===== Photography side: white, quiet, sidebar of galleries ===== */
.side-photo { --bg: #fff; --fg: #222; --muted: #8a8a8a; --line: #e6e6e6; --accent: #000; background: var(--bg); color: var(--fg); }
.side-photo .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; padding: 48px 32px; overflow-y: auto; }
.side-photo .sidebar .brand { display: block; white-space: normal; font: 400 1.35rem/1.25 var(--serif); letter-spacing: .02em; text-transform: none; text-decoration: none; margin-bottom: 40px; }
.side-photo .sidebar nav ul { display: block; margin: 0 0 28px; }
.side-photo .sidebar nav a { display: block; padding: 3px 0; font-size: .82rem; letter-spacing: .02em; text-transform: none; color: var(--muted); opacity: 1; }
.side-photo .sidebar nav a:hover, .side-photo .sidebar nav .active > a { color: var(--fg); }
.side-photo .sidebar .nav-other a { font-size: .75rem; }
.side-photo .sidebar .menu-toggle { display: none; }
.side-photo main { margin-left: 240px; padding: 48px 48px 0 16px; min-height: calc(100vh - 80px); }
.side-photo .site-footer { margin-left: 240px; border: 0; color: #b5b5b5; text-align: left; padding: 24px 16px 32px; }
.side-photo .page-head { text-align: left; margin: 0; padding: 0 0 24px; }
.side-photo .page-head h1 { font: 400 1.6rem var(--serif); letter-spacing: .02em; }
.side-photo .prose { margin: 0 0 80px; padding: 0; }
.side-photo .prose:not(.with-image) > div { margin: 0; }
.side-photo .contact input, .side-photo .contact textarea { background: #fafafa; }
.side-photo .contact button { background: #222; color: #fff; }

.feature { position: relative; height: calc(100vh - 140px); }
.feature-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left top; opacity: 0; transition: opacity 1.6s ease; }
.feature-img.on { opacity: 1; }

.slideshow { user-select: none; }
.stage { position: relative; margin: 0; height: calc(100vh - 150px); display: flex; align-items: center; justify-content: flex-start; }
.stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .35s ease; }
.stage img.fading { opacity: .15; }
.stage .prev, .stage .next { position: absolute; top: 0; bottom: 0; width: 50%; background: none; border: 0; padding: 0; z-index: 1; }
.stage .prev { left: 0; cursor: w-resize; } .stage .next { right: 0; cursor: e-resize; }
.ss-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 0; font-size: .78rem; color: var(--muted); }
.ss-controls { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.ss-controls button, .ss-thumbs { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--muted); cursor: pointer; }
.ss-controls button:hover, .ss-thumbs:hover { color: var(--fg); }
.ss-prev, .ss-next { font-size: 1.1rem !important; line-height: 1; }
.ss-edition .edition { justify-content: flex-start; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); min-width: 0; gap: 12px; padding-bottom: 60px; }
.thumbs .ss-thumbs { grid-column: 1 / -1; justify-self: end; font-size: .78rem; }
/* Square tiles with the photo fitted inside. The photo is positioned absolutely so a tall photo can't stretch
   its tile (and the page) on iPhone and iPad, where percentage heights inside aspect-ratio boxes don't resolve. */
.thumb { all: unset; cursor: pointer; position: relative; min-width: 0; aspect-ratio: 1; background: #f6f6f6; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.thumb:hover img, .thumb:focus-visible img { opacity: .75; }

@media (max-width: 860px) {
  .side-photo .sidebar { position: sticky; z-index: 20; bottom: auto; width: auto; padding: 14px 16px; background: rgba(255,255,255,.96); display: flex; align-items: center; justify-content: space-between; }
  .side-photo .sidebar .brand { margin: 0; font-size: 1.15rem; }
  .side-photo .sidebar .menu-toggle { display: block; width: auto; height: auto; font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
  .side-photo .sidebar nav { position: fixed; inset: 56px 0 0 0; height: auto; padding: 24px 16px; background: #fff; display: block; opacity: 0; pointer-events: none; transition: opacity .25s; overflow-y: auto; }
  .side-photo.menu-open .sidebar nav { opacity: 1; pointer-events: auto; }
  .side-photo .sidebar nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
  .side-photo .sidebar nav a { font-size: 1rem; padding: 6px 0; }
  .side-photo main { margin-left: 0; padding: 8px 16px 0; }
  .side-photo .site-footer { margin-left: 0; }
  .stage { height: auto; max-height: 75vh; }
  .feature { height: 70vh; }
  .feature-img { object-position: center top; }
  .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

/* ===== Rock'n H side ===== */
.side-rock .site-header { position: sticky; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; padding: 0 32px 80px; }
.shop-item { margin: 0; }
[hidden] { display: none !important; }
.stage { height: auto; min-height: 0; }
/* Every photo fills the same display area, so small files show at the same size as large ones. */
.stage img { height: calc(100vh - 150px); width: auto; max-width: 100%; max-height: none; object-fit: contain; object-position: left center; }
.stage img { height: calc(100dvh - 150px); }
/* Phones held sideways: fit the photo and its controls into the part of the screen the browser actually shows
   (dvh shrinks when the tab bar or toolbar is showing; vh doesn't). */
@media (orientation: landscape) and (max-height: 500px) {
  .stage img { height: calc(100vh - 110px); height: calc(100dvh - 110px); }
  .side-photo main { padding-top: 12px; }
}
@media (max-width: 760px) { .stage img { width: 100%; height: auto; max-height: 75vh; object-position: center; } }

/* ===== Rock'n H: light fine-art print shop ===== */
.side-rock { --bg: #faf8f4; --fg: #1d1b18; --muted: #75706a; --line: #e4dfd6; --accent: #1d1b18; background: var(--bg); color: var(--fg); }
.side-rock .site-header { background: rgba(250,248,244,.96); border-bottom: 1px solid var(--line); backdrop-filter: none; }
.side-rock .brand { color: var(--fg); }
.side-rock .brand img { height: 44px; width: auto; }
.side-rock nav a { color: var(--fg); opacity: .75; }
.side-rock nav a:hover, .side-rock nav .active > a { color: var(--fg); opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
.side-rock .has-sub ul { background: var(--bg); border-color: var(--line); }
.side-rock .nav-switch a { opacity: .55; }
.side-rock .menu-toggle span { background: var(--fg); }
@media (max-width: 1199px) {
  .side-rock .site-header { background: var(--bg); }
  /* Full-screen menu: solid background so nothing shows through, and every item the same size. */
  .side-rock nav { background: var(--bg); height: 100dvh; z-index: 1; }
  .side-rock .has-sub { display: flex; flex-direction: column; align-items: center; }
  .side-rock .has-sub ul { background: none; gap: 14px; padding-top: 14px; }
  .side-rock .has-sub ul a { font-size: 1rem; padding: 0; color: var(--muted); }
}
.side-rock .site-footer { border-top: 1px solid var(--line); }
.rk-btn { display: inline-block; padding: 14px 30px; background: var(--fg); color: var(--bg); text-decoration: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--fg); transition: background .2s, color .2s; }
.rk-btn:hover { background: transparent; color: var(--fg); }
.rk-btn.light { background: #fff; color: #111; border-color: #fff; }
.rk-btn.light:hover { background: transparent; color: #fff; }
.rk-btn.disabled { opacity: .45; pointer-events: none; }
.rk-hero { position: relative; min-height: 78vh; display: grid; place-items: end center; padding-bottom: 7vh; text-align: center; background: #333 center/cover no-repeat; color: #fff; }
.rk-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)); }
.rk-hero-text { position: relative; padding: 0 16px; max-width: 760px; }
.rk-hero h1 { margin: 0 0 12px; font: 400 clamp(2.4rem, 6vw, 4.4rem)/1.05 var(--serif); letter-spacing: .04em; }
.rk-hero p { margin: 0 0 28px; font-size: 1.05rem; }
.rk-section { max-width: 1280px; margin: 0 auto; padding: 64px 32px 24px; }
.rk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.rk-head h1, .rk-head h2 { margin: 0; font: 400 clamp(1.6rem, 3vw, 2.2rem) var(--serif); }
.rk-head a, .rk-count { font-size: .85rem; color: var(--muted); }
@media (max-width: 760px) { .rk-head > a { display: none; } }
.rk-intro { margin: -12px 0 28px; text-align: left; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 28px; }
.product-card { text-decoration: none; display: grid; gap: 6px; }
.pc-img { position: relative; aspect-ratio: 4 / 3; background: #efebe4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-img img { max-width: 88%; max-height: 88%; object-fit: contain; box-shadow: 0 4px 18px rgba(0,0,0,.12); transition: transform .5s ease; }
.product-card:hover .pc-img img { transform: scale(1.03); }
.pc-title { margin-top: 8px; font-size: .95rem; }
.product-card:hover .pc-title { text-decoration: underline; text-underline-offset: 4px; }
.pc-price { font-size: .85rem; color: var(--muted); }
.badge { position: absolute; left: 10px; bottom: 10px; background: var(--fg); color: var(--bg); font-size: .7rem; padding: 3px 10px; border-radius: 20px; letter-spacing: .05em; }
.price .badge { position: static; margin-left: 8px; vertical-align: middle; }
.rk-statement { max-width: 760px; margin: 0 auto; padding: 72px 16px; text-align: center; }
.rk-statement h2, .rk-artist h2, .rk-newsletter h2 { font: 400 1.9rem var(--serif); margin: 0 0 16px; }
.rk-statement div { color: var(--muted); margin-bottom: 28px; }
.rk-cards .card span { color: #fff; }
.rk-artist { max-width: 1100px; margin: 0 auto; padding: 72px 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; align-items: center; }
.rk-artist:not(:has(img)) { grid-template-columns: 1fr; max-width: 760px; }
@media (max-width: 760px) { .rk-artist { grid-template-columns: 1fr; padding: 48px 16px; } .rk-section { padding: 48px 16px 16px; } }
.rk-newsletter { border-top: 1px solid var(--line); padding: 64px 16px; text-align: center; }
.newsletter { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 520px; margin: 0 auto; }
.newsletter label { flex: 1 1 240px; }
.newsletter .form-status { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .85rem; }
.sr { position: relative; } .sr { font-size: 0 !important; }
/* The hidden "Email" label wraps the box; give the box its own size so typed text and the placeholder show. */
.newsletter .sr input { width: 100%; box-sizing: border-box; font-size: 1rem; }
.side-rock .contact input, .side-rock .contact textarea { background: #fff; color: var(--fg); }
.side-rock .contact button { background: var(--fg); color: var(--bg); }
.product { max-width: 1280px; margin: 0 auto; padding: 48px 32px 80px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 56px; align-items: start; }
.product-img { background: #efebe4; padding: 6%; display: flex; justify-content: center; position: sticky; top: 100px; }
.product-img img { max-height: 70vh; width: auto; box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.product-info h1 { margin: 4px 0 8px; font: 400 2.2rem/1.15 var(--serif); }
.crumb { margin: 0; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.crumb a { text-decoration: none; }
.price { font-size: 1.15rem; margin: 0 0 6px; }
.edition-line { margin: 0 0 24px; color: var(--muted); font-size: .9rem; }
.sizes { border: 0; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.sizes legend { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.size input { position: absolute; opacity: 0; }
.size span { display: inline-block; padding: 8px 16px; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; font-size: .85rem; }
.size input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.size input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; }
.product-info .rk-btn { width: 100%; text-align: center; }
.product-desc { margin-top: 28px; }
.product-details { border-top: 1px solid var(--line); padding: 14px 0; margin-top: 20px; }
.product-details + .product-details { margin-top: 0; }
.product-details summary { cursor: pointer; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.product-details p { color: var(--muted); font-size: .92rem; }
@media (max-width: 860px) { .product { grid-template-columns: 1fr; gap: 28px; padding: 24px 16px 60px; } .product-img { position: static; } }
.side-rock .page-head { padding-top: 64px; }

/* Rock'n H: purchase choices and cart */
.choice { border: 0; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.choice legend { font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.size-list { display: flex; flex-wrap: wrap; gap: 8px; }
.qty { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); margin: 0 0 20px; }
.qty input { width: 64px; padding: 8px; font: inherit; color: var(--fg); background: #fff; border: 1px solid var(--line); }
.buy-form .rk-btn { width: 100%; cursor: pointer; font-family: inherit; }
.added { font-size: .9rem; color: var(--muted); min-height: 1.4em; }
.nav-cart .cart-count { font-size: .75em; }
.cart { max-width: 900px; }
.cart-line { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-line img { width: 96px; height: 96px; object-fit: contain; background: #efebe4; }
.cl-title { text-decoration: none; font-size: 1rem; }
.cl-opt { margin: 4px 0 10px; color: var(--muted); font-size: .85rem; }
.cart-line .qty { margin: 0; }
.cl-remove { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; font-size: .8rem; margin-left: 12px; }
.cart-summary { margin: 28px 0 0 auto; max-width: 380px; }
.cart-summary .row { display: flex; justify-content: space-between; margin: 0 0 8px; }
.cart-summary .total { font-size: 1.15rem; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.cart-summary .ship-to { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 10px; }
.cart-summary .ship-to select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); background: transparent; color: inherit; max-width: 60%; }
.cart-summary .ship-missing { font-size: .9rem; margin: 4px 0 12px; }
.ship-request { margin: 8px 0 0; }
.ship-request .rk-btn { margin-top: 10px; }
.cart-note { color: var(--muted); font-size: .85rem; }
#paypal-buttons { margin-top: 20px; }
.checkout-off { color: var(--muted); font-size: .9rem; }
.cart-done { padding: 40px 0; }
.cart-done h2 { font: 400 1.9rem var(--serif); }
@media (max-width: 600px) { .cart-line { grid-template-columns: 72px 1fr; } .cart-line img { width: 72px; height: 72px; } .cl-price { grid-column: 2; } }

/* Photography side: sub-menus (e.g. Pocket Pictures) and their cover grid */
/* Sub-menus stay folded until the parent is clicked (open on the parent's own pages). */
.nav-sub-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1), opacity .35s ease, visibility 0s linear .45s; }
.nav-parent.open > .nav-sub-wrap { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1), opacity .35s ease .05s; }
.nav-sub-wrap > ul { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .nav-sub-wrap, .nav-parent.open > .nav-sub-wrap { transition: none; } }
.side-photo .sidebar nav ul.nav-sub { margin: 0 0 0 12px; padding: 0; }
.side-photo .sidebar nav .nav-sub li:first-child { padding-top: 2px; } .side-photo .sidebar nav .nav-sub li:last-child { padding-bottom: 8px; }
.side-photo .sidebar nav .nav-sub a { font-size: .76rem; padding: 2px 0; }
.sub-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px; padding: 8px 0 40px; }
.sub-card { display: block; color: var(--muted); text-decoration: none; font-size: .82rem; letter-spacing: .02em; }
.sub-card img, .sub-card .sub-blank { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f1f0ee; margin-bottom: 10px; transition: opacity .3s; }
.sub-card:hover { color: var(--fg); }
.sub-card:hover img { opacity: .85; }
@media (max-width: 760px) { .sub-index { grid-template-columns: 1fr 1fr; gap: 16px; } .side-photo .sidebar nav .nav-sub a { font-size: .9rem; } }

/* Rock'n H print page: click the photo to see it larger. Only opacity and transform animate, so the motion stays smooth. */
.product-img img.zoom { cursor: zoom-in; outline: none; }
.rk-full { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: #faf8f4; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; cursor: zoom-out; }
.rk-full.open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.rk-full img { width: 100vw; height: 100vh; object-fit: contain; }
.rk-full .full-close { position: absolute; top: 12px; right: 16px; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #222; font: 300 34px/1 sans-serif; cursor: pointer; opacity: .6; }
.rk-full .full-close:hover { opacity: 1; }
html.full-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .rk-full, .rk-full.open { transition: none; } }

/* Statement page for a parent gallery (e.g. The Space Between) */
.statement { max-width: 640px; padding: 12vh 0 80px; opacity: 0; animation: statement-in 1.2s ease .1s forwards; }
.statement h1 { font: 400 2.4rem/1.15 var(--serif); letter-spacing: .01em; margin: 0 0 36px; }
.statement-text p { font: 400 1.22rem/1.75 var(--serif); color: var(--fg); margin: 0 0 1.3em; }
.statement-text p:last-child { margin-top: 2em; }
@keyframes statement-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .statement { animation: none; opacity: 1; } }
@media (max-width: 760px) { .statement { padding: 32px 0 48px; } .statement h1 { font-size: 1.9rem; } .statement-text p { font-size: 1.1rem; } }
.edition-note { font-size: .9rem; color: var(--muted, #777); margin: 4px 0 12px; min-height: 1em; }
.print-info { margin-top: 40px; }
.print-info h2 { font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; margin: 0 0 12px; }
.print-info-link { margin-top: 24px; font-size: .9rem; }
.share { margin-top: 22px; }
.share-btn { background: none; border: 1px solid var(--line); padding: 8px 18px; font: inherit; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: inherit; }
.share-btn:hover { border-color: currentColor; }
.share-menu { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: .9rem; }
.share-menu[hidden] { display: none; }
.share-menu button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.story-logo { float: right; width: 130px; height: auto; margin: 0 0 16px 28px; }
@media (max-width: 600px) { .story-logo { width: 95px; margin-left: 18px; } }
.prose h2 { clear: both; }
/* Home hero: the title sits on the buffet's doors in the room photo and the button on the floor below it.
   Phones show the full height of the photo (cropped at the sides); wider screens show the whole photo. */
.rk-hero { display: block; padding: 0; }
.rk-hero::before { background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.3) 70%, rgba(0,0,0,.12) 85%, rgba(0,0,0,.25)); }
.rk-hero-text { position: absolute; left: 50%; transform: translateX(-50%); top: 65.5%; bottom: 6%; width: min(94%, 420px); max-width: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; }
.rk-hero h1 { margin: 0 0 6px; font-size: 2.4rem; line-height: 1; }
.rk-hero p { margin: 0; font-size: .95rem; }
.rk-hero .rk-btn { margin-top: auto; }
@media (max-width: 699px) { .rk-hero-text { top: 64%; } .rk-hero p .by { display: block; } }
@media (min-width: 700px) {
  .rk-hero { min-height: 0; aspect-ratio: 16 / 9; }
  .rk-hero-text { width: 46%; }
  .rk-hero h1 { margin-bottom: .5vw; font-size: clamp(2.4rem, 4.6vw, 6rem); }
  .rk-hero p { font-size: clamp(.9rem, 1.15vw, 1.4rem); }
  .rk-hero .rk-btn { padding: clamp(10px, .95vw, 18px) clamp(22px, 2.1vw, 40px); font-size: clamp(.7rem, .78vw, .95rem); }
}
/* Tablets held upright: a taller hero (the room cropped at the sides, like on phones) so the title, line and button
   have room on the buffet instead of squeezing into a short strip. */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .rk-hero { aspect-ratio: 4 / 3; }
  .rk-hero-text { top: 64%; bottom: 5%; width: 54%; }
  .rk-hero h1 { margin-bottom: 8px; font-size: clamp(2.6rem, 6vw, 4rem); }
  .rk-hero p { max-width: 17em; font-size: clamp(.95rem, 1.9vw, 1.2rem); line-height: 1.35; text-wrap: balance; }
  .rk-hero .rk-btn { padding: 12px 28px; font-size: .74rem; }
}
.nav-ig { display: flex; align-items: center; }
.nav-ig a { display: inline-flex; align-items: center; margin-top: -2px; }
.side-rock nav > ul { align-items: center; }
.nav-ig svg { display: block; }
@media (max-width: 1199px) {
  /* Phone menu: Instagram icon in the lower right corner. */
  .nav-ig { position: absolute; right: 24px; bottom: 28px; }
  .nav-ig svg { width: 26px; height: 26px; }
}
.rk-rooms { display: grid; gap: 32px; max-width: 1280px; margin: 0 auto; padding: 40px 32px 64px; }
@media (max-width: 760px) { .rk-rooms { gap: 16px; padding: 24px 16px 40px; } }
.rk-rooms img { display: block; width: 100%; height: auto; }
.rk-rooms-row { grid-template-columns: repeat(var(--n, 2), 1fr); }
.rk-rooms-row img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 560px) { .rk-rooms-row { grid-template-columns: 1fr; } }
.statement-text p:only-child { margin-top: 0; }
.statement-next { display: inline-block; margin-top: 28px; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .75; }
.statement-next:hover { opacity: 1; }

/* Intro pages: on phones, the way to the photographs is a bar fixed at the foot of the screen. */
.statement-nav.phone-only { display: none; }
@media (max-width: 760px) {
  body:has(.statement-nav) { padding-bottom: 120px; }
  .statement-nav, .statement-nav.phone-only { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
  .statement-nav .statement-next { margin: 0; padding: 10px 14px; border: 1px solid var(--muted); opacity: 1; font-size: .72rem; }
}

/* Photography home on phones: the slideshow and the gallery list below it, centred together on the screen. */
.home-menu { display: none; }
@media (max-width: 860px) {
  .photo-home main { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: center; }
  .photo-home .feature { height: 46vw; margin: 0; }
  .photo-home .feature-img { object-position: center; }
  .home-menu { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 0 16px; }
  .home-menu a { font: 400 1.7rem/1.1 var(--serif); color: var(--fg); text-decoration: none; }
  .home-menu .small { font: 400 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .hm-rule { width: 40px; border-top: 1px solid var(--line); margin: 6px 0; }
}