/* ================================================
   STUDIO BOOKMARK — Exact replica stylesheet
   Colors: body #351f21 | text #ffeed2 | tan #c1ac68
   Fonts: Suisse Intl Mono (body/nav) | Greek Oldstyle Regular (headings)
   ================================================ */

@font-face {
  font-family: "Suisse Intl Mono";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/SuisseIntlMono-Regular.woff") format("woff");
}

@font-face {
  font-family: "Quadrant Text Mono";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/QuadrantTextMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Greek Oldstyle Regular";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/GreekOldstyle.woff") format("woff");
}

@font-face {
  font-family: "Garamond Nova Pro Cd";
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/SoftMaker-GaramondNovaProCd-Light.woff") format("woff");
}

@font-face {
  font-family: "Paint Store J N L";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/PaintStoreJNL-Regular.woff") format("woff");
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }

/* --- Base --- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Shared horizontal page gutter — nav + all content reference this,
   so the logo/CART always align with page content at every width. */
:root { --gutter: 6rem; }
@media (max-width: 1024px) { :root { --gutter: 2rem; } }
@media (max-width: 768px)  { :root { --gutter: 1.5rem; } }

body {
  font-family: "Suisse Intl Mono", "Courier New", monospace;
  background-color: #351f21;
  color: #ffeed2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

a:active { opacity: 0.7; }

/* --- Navigation --- */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  background: transparent;
  mix-blend-mode: normal;
}

/* =====================================================
   Project image placeholders — gradient + project name centered.
   Used in the home hero (.slide-placeholder) and the work grid
   (.portfolio-thumb-placeholder) until real imagery arrives.
   ===================================================== */
.slide-placeholder,
.portfolio-thumb-placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 238, 210, 0.05), transparent 60%),
    radial-gradient(140% 100% at 80% 90%, rgba(193, 172, 104, 0.18), transparent 65%),
    linear-gradient(160deg, #3b3420 0%, #2a2618 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slide-placeholder::after,
.portfolio-thumb-placeholder::after {
  content: attr(data-label);
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 238, 210, 0.55);
  text-align: center;
  padding: 0 2rem;
}

.portfolio-thumb-placeholder {
  aspect-ratio: 16 / 10;
}

.portfolio-item-year {
  display: inline-block;
  margin-left: 0.5rem;
  color: rgba(255, 238, 210, 0.55);
}

/* Both the name text and the AH mark live in the SAME grid cell, so the
   nav-logo slot keeps a constant width (sized to the wider of the two — the
   text). Visibility toggles between them without any reflow, so the rest of
   the nav doesn't shift when you scroll. */
.nav-logo {
  display: inline-grid;
  align-items: center;
  text-decoration: none;
  /* one row, one column — both children sit in the same cell */
}

.nav-name,
.nav-mark {
  grid-column: 1;
  grid-row: 1;
}

.nav-name {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffeed2;
  white-space: nowrap;
  visibility: visible;
}

.nav-mark {
  width: 48px;
  height: auto;
  justify-self: start;
  visibility: hidden;
  /* AH.svg fill is black; invert turns it cream-white over dark backgrounds. */
  filter: invert(96%) sepia(8%) saturate(540%) hue-rotate(335deg) brightness(101%) contrast(95%);
}

/* Scrolled past the top: swap visibility — slot width is unchanged. */
body.scrolled .nav-name { visibility: hidden; }
body.scrolled .nav-mark { visibility: visible; }

.nav-links {
  display: flex;
  gap: 6rem;
  list-style: none;
}

.nav-links a {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffeed2;
  text-decoration: none;
}

.nav-links a.active,
.nav-links a:hover {
  text-decoration: underline;
}

.nav-cart {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffeed2;
  text-decoration: underline;
  cursor: pointer;
}

/* --- HERO SLIDESHOW --- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;        /* fallback for older browsers */
  height: 100dvh;       /* fills the visible viewport, accounting for mobile browser chrome */
  overflow: hidden;
  background-color: #3b3420;
}

.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------------
   ADAPTIVE NAV COLOR
   The nav is fixed at the top. As you scroll, different sections pass
   beneath it. JS (mobile-nav.js) detects which section is currently
   under the nav and toggles body.nav-light when that section has a
   LIGHT background — flipping nav, captions, and arrows to dark ink so
   they stay legible. Default (no class) = cream over dark backgrounds.
   ---------------------------------------------------------------- */
body.nav-light .nav-name,
body.nav-light .nav-links a,
body.nav-light .nav-cart,
body.nav-light .slide-caption-left,
body.nav-light .slide-caption-right,
body.nav-light .slide-caption-left a,
body.nav-light .slide-caption-right a,
body.nav-light .slide-arrow {
  color: #1f1c1d;
}

body.nav-light .slide-arrow svg,
body.nav-light .nav-menu-toggle svg {
  stroke: #1f1c1d;
}

/* AH mark is a black SVG inverted to cream by default; on light
   backgrounds, leave it black. */
body.nav-light .nav-mark {
  filter: none;
}

/* When the full-screen menu overlay is OPEN, its background is dark, so the
   close (×) toggle must stay cream regardless of the section's nav-light
   theme. Placed after the nav-light rule to win on source order. */
body.nav-open .nav-menu-toggle svg {
  stroke: #ffeed2;
}

.slide-caption-left {
  position: absolute;
  bottom: 10%;
  left: var(--gutter);
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.041em;
  line-height: 1.75;
  text-transform: uppercase;
  color: #ffeed2;
}

.slide-caption-left a {
  text-decoration: underline;
  color: #ffeed2;
}

.slide-caption-right {
  position: absolute;
  bottom: 10%;
  right: var(--gutter);
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.041em;
  line-height: 1.75;
  text-transform: uppercase;
  text-align: right;
  color: #ffeed2;
}

.slide-caption-right a {
  display: block;
  text-decoration: underline;
  color: #ffeed2;
}

/* Slideshow arrows */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ffeed2;
  font-family: "Suisse Intl Mono", monospace;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  padding: 1rem;
  z-index: 10;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.slide-arrow:hover { opacity: 1; }

.slide-arrow.prev { left: 1rem; }
.slide-arrow.next { right: 1rem; }

/* --- ABOUT SECTION --- */
.section-about {
  background-color: #c1ac68;
  color: #351f21;
  padding: 14rem var(--gutter) 4rem;
  display: flex;
  align-items: flex-start;
}

.about-text {
  font-family: "Quadrant Text Mono", "Courier New", monospace;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  line-height: 1.2;
  letter-spacing: 0;
  max-width: 1100px;
  color: #351f21;
}

.about-text .underline {
  text-decoration: underline;
}

/* --- REACH OUT --- */
.section-reach-out {
  background-color: #c1ac68;
  color: #351f21;
  padding: 4rem var(--gutter) 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.reach-out-img {
  width: 230px;
  height: 230px;
  object-fit: cover;
  filter: sepia(0.3) contrast(1.1);
}

.reach-out-link {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #351f21;
}

/* --- PORTFOLIO GRID (matches live: padding 15rem/6rem, gutter 1.6rem) --- */
.portfolio-page {
  padding: 15rem var(--gutter) 3rem;
  background-color: #351f21;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.6rem;
  row-gap: 1.6rem;
  width: 100%;
}

.portfolio-item {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}

.portfolio-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.portfolio-item:hover img { transform: scale(1.03); }

.portfolio-item-label {
  margin-top: 0.5em;
  padding-top: 13px;
  margin-bottom: 2em;
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.032em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
}

/* --- STUDIO PAGE --- */
.studio-page {
  background-color: #351f21;
  min-height: 100vh;
  padding: 10rem var(--gutter) 8rem;
}

.studio-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
  gap: 4rem;
  align-items: start;
}

.studio-col h3 {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
  font-weight: 400;
  margin-bottom: 2rem;
}

.studio-col p {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.041em;
  color: #ffeed2;
  margin-bottom: 1.5rem;
}

.studio-col ul {
  list-style: none;
  padding: 0;
}

.studio-col ul li {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.041em;
  color: #ffeed2;
}

.studio-col a {
  color: #ffeed2;
  text-decoration: underline;
}

/* --- SHOP PAGE --- */
.shop-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  padding-top: 0;
}

.shop-panel {
  position: relative;
  overflow: hidden;
}

.shop-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shop-panel-label {
  position: absolute;
  bottom: 2.5rem;
  left: 3rem;
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffeed2;
  line-height: 2;
}

.shop-panel-label a {
  display: block;
  text-decoration: underline;
  color: #ffeed2;
}

.shop-products {
  background-color: #351f21;
  padding: 6rem var(--gutter);
}

.shop-products h3 {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
  font-weight: 400;
  margin-bottom: 4rem;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.5rem;
}

.product-card {}

.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

.product-name {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffeed2;
  line-height: 1.6;
}

.product-sold-out {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 238, 210, 0.45);
  margin-top: 0.25rem;
}

/* --- PROJECT DETAIL PAGE --- */
.project-page {
  background-color: #351f21;
  min-height: 100vh;
  padding: 9rem var(--gutter) 6rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2rem;
}

.project-back {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
  align-self: flex-start;
}

.project-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.project-title {
  font-family: "Suisse Intl Mono", monospace;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffeed2;
  margin: 0;
}

.project-client {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 238, 210, 0.6);
  margin: 0;
}

.project-hero {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  margin: 1rem 0;
}

.project-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  margin-top: 1rem;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.project-meta-block h4 {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
  margin: 0 0 0.75rem 0;
}

.project-meta-block p,
.project-meta-block ul li {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.041em;
  color: #ffeed2;
  margin: 0;
}

.project-meta-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.project-description p {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #ffeed2;
  max-width: 70ch;
  margin: 0;
}

.project-cta {
  display: inline-block;
  margin-top: 1.75rem;
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
}

@media (max-width: 768px) {
  .project-page { padding: 7rem var(--gutter) 3rem; gap: 1.5rem; }
  .project-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .project-hero { aspect-ratio: 4/3; }
}

/* --- JOURNAL PAGE --- */
.journal-page {
  background-color: #351f21;
  min-height: 100vh;
  padding: 14rem var(--gutter) 8rem;
  display: flex;
  justify-content: center;
}

.journal-post {
  max-width: 460px;
  margin-bottom: 6rem;
  text-align: left;
}

.journal-post h2 {
  font-family: "Suisse Intl Mono", monospace;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.35;
  color: #ffeed2;
  text-decoration: underline;
  margin-bottom: 1rem;
}

.journal-post .meta {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 238, 210, 0.6);
  margin-bottom: 0.75rem;
}

.journal-post .summary {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.041em;
  color: #ffeed2;
  margin-bottom: 1rem;
}

.journal-post .read-more {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: underline;
  color: #ffeed2;
}

/* --- FOOTER --- */
footer {
  background-color: #351f21;
  color: #ffeed2;
  padding: 4rem var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  border-top: 1px solid rgba(255, 238, 210, 0.08);
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.041em;
}

footer h4 {
  font-weight: 400;
  text-decoration: underline;
  margin-bottom: 0.5rem;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

footer a {
  color: #ffeed2;
  text-decoration: underline;
  display: block;
}

footer a:hover { opacity: 0.7; }

footer ul {
  list-style: none;
  padding: 0;
}

footer p { color: rgba(255, 238, 210, 0.75); }

#live-clock { color: rgba(255, 238, 210, 0.75); letter-spacing: 0.05em; }

/* Home page: footer continues the tan section from About + Reach Out */
body.home footer {
  background-color: #c1ac68;
  color: #351f21;
  border-top: none;
}

body.home footer a { color: #351f21; }
body.home footer p { color: #351f21; }
body.home #live-clock { color: #351f21; }

/* =====================================================
   MOBILE NAV — hamburger + overlay (hidden on desktop)
   ===================================================== */
.nav-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.nav-menu-toggle svg {
  width: 26px;
  height: 26px;
  stroke: #ffeed2;
  stroke-width: 1.25;
  fill: none;
  stroke-linecap: square;
}

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(53, 31, 33, 0.98);
  z-index: 9000;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.mobile-nav.active { display: flex; }

/* Rotate the + into × when the menu is open (no transition) */
body.nav-open .nav-menu-toggle svg {
  transform: rotate(45deg);
}

.mobile-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.mobile-nav-links a {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 18px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffeed2;
  text-decoration: none;
}

.mobile-nav-cart {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffeed2;
  text-decoration: underline;
  margin-top: 1rem;
}

/* (legacy close button removed — the same toggle now rotates 45° to close) */

/* Show hamburger / hide desktop links at ≤ 768px */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cart { display: none; }
  .nav-menu-toggle { display: flex; }
}

/* =====================================================
   SCULPTOR SERIES SUB-SITE (cream theme)
   ===================================================== */
body.ss {
  background-color: #fffef3;
  color: #1f1c1d;
}

body.ss nav.ss-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  background: transparent;
}

body.ss .nav-logo img {
  width: 48px;
  height: auto;
}

body.ss .ss-wordmark {
  display: block;
  max-width: 360px;
  flex: 0 1 auto;
}

body.ss .ss-wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

body.ss .ss-nav-spacer {
  width: 48px;
}

/* On SS pages, the mobile-nav toggle inherits dark color */
body.ss .nav-menu-toggle svg { stroke: #1f1c1d; }

body.ss .mobile-nav { background: rgba(255, 254, 243, 0.98); }
body.ss .mobile-nav-links a { color: #1f1c1d; }
body.ss .mobile-nav-cart { color: #1f1c1d; }

/* About page layout */
.ss-about {
  padding: 12rem var(--gutter) 6rem;
  max-width: 980px;
  margin: 0 auto;
}

.ss-heading {
  font-family: "Greek Oldstyle Regular", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #1f1c1d;
  margin: 0 0 3rem;
}

.ss-body p {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: #1f1c1d;
  max-width: 60ch;
  margin: 0 0 1.5rem;
}

.ss-body p a {
  color: #1f1c1d;
  text-decoration: underline;
}

.ss-desk {
  margin: 5rem 0 0;
  max-width: 360px;
}

.ss-desk-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(180deg, #ede7d8 0%, #d6cdbd 100%);
  border: 1px solid rgba(31, 28, 29, 0.1);
}

.ss-desk figcaption {
  font-family: "Suisse Intl Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.7;
  color: #1f1c1d;
  margin-top: 0.75rem;
}

.ss-desk figcaption span {
  color: rgba(31, 28, 29, 0.55);
}

/* SS sage/grey footer */
.ss-footer {
  background-color: #647273;
  color: rgba(0, 0, 0, 0.8);
  padding: 4rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  font-family: "Suisse Intl Mono", monospace;
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.041em;
  border-top: none;
}

.ss-footer h4 {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ss-footer p { color: rgba(0, 0, 0, 0.8); margin: 0; }

.ss-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ss-footer a {
  color: rgba(0, 0, 0, 0.8);
  text-decoration: underline;
  display: block;
}

@media (max-width: 768px) {
  body.ss .ss-wordmark { max-width: 200px; }
  body.ss .nav-logo img { width: 38px; }
  .ss-footer { grid-template-columns: 1fr; gap: 2rem; padding: 3rem var(--gutter); }
}

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
  nav { padding: 1.2rem var(--gutter); }
  .nav-links { gap: 3rem; }
  .slide-caption-left, .slide-caption-right { left: var(--gutter); right: var(--gutter); }
  .slide-caption-left { right: auto; }
  .slide-caption-right { left: auto; }
  .section-about { padding: 10rem var(--gutter) 3rem; }
  .section-reach-out { padding: 3rem var(--gutter) 6rem; }
  .portfolio-page { padding: 10rem var(--gutter) 5rem; }
  .studio-page { padding: 9rem var(--gutter) 5rem; }
  .studio-grid { grid-template-columns: 1fr 1fr; gap: 3rem 2.5rem; }
  .shop-products { padding: 4rem var(--gutter); }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
  .journal-page { padding: 10rem var(--gutter) 5rem; }
  .project-page { padding: 9rem var(--gutter) 5rem; }
  footer { padding: 3rem var(--gutter); gap: 2rem; }
}

/* Mobile ≤ 768px */
@media (max-width: 768px) {
  nav {
    padding: 1rem var(--gutter);
    align-items: center;
  }
  .nav-logo img { width: 52px; }
  .nav-links { gap: 1.5rem; flex-wrap: wrap; }
  .nav-links a { font-size: 11px; letter-spacing: 0.1em; }
  .nav-cart { font-size: 11px; }

  /* Hero — full screen on mobile (dvh accounts for the address bar) */
  .hero { height: 100vh; height: 100dvh; }
  .slide-caption-left, .slide-caption-right {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 6%;
    font-size: 11px;
    text-align: left;
  }
  .slide-caption-right { text-align: right; }
  .slide-arrow { font-size: 18px; padding: 0.75rem; }
  .slide-arrow.prev { left: 0.25rem; }
  .slide-arrow.next { right: 0.25rem; }

  /* About */
  .section-about { padding: 6rem var(--gutter) 2rem; min-height: 0; }
  .about-text { font-size: clamp(1.5rem, 7vw, 2.25rem); line-height: 1.25; }
  .section-reach-out { padding: 2rem var(--gutter) 5rem; }
  .reach-out-img { width: 180px; height: 180px; }

  /* Portfolio — 1 column on mobile */
  .portfolio-page { padding: 15rem var(--gutter) 3rem; }
  .portfolio-grid {
    grid-template-columns: 1fr;
    column-gap: 1.6rem;
    row-gap: 1.6rem;
  }
  .portfolio-item img { aspect-ratio: 3 / 2; }

  /* Studio */
  .studio-page { padding: 7rem var(--gutter) 4rem; }
  .studio-grid { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Shop */
  .shop-hero {
    grid-template-columns: 1fr;
    height: auto;
  }
  .shop-panel { height: 60vh; }
  .shop-panel-label { left: var(--gutter); bottom: 1.5rem; }
  .shop-products { padding: 3rem var(--gutter); }
  .shop-products h3 { margin-bottom: 2.5rem; }
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
  }

  /* Journal */
  .journal-page { padding: 7rem var(--gutter) 3rem; }
  .journal-post { max-width: 100%; }
  .journal-post h2 { font-size: 1.25rem; }

  /* Footer — stack to 2 columns */
  footer {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    padding: 2.5rem 1.25rem;
  }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
  .nav-links { gap: 1rem; }
  .product-grid { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; }
  .about-text { font-size: clamp(1.4rem, 8vw, 2rem); }
}