/* marjoa — shared styles
   Layout: quiet gallery. Bold lowercase logo centred, light airy ground,
   generous whitespace, one olive accent taken from the glaze. */
/* Fonts are served from this site (fonts/), not from Google. Jost is one variable file for weights 300-700. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/jost-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/jost-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Reenie Beanie"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/reenie-beanie.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f8f7f4;         /* very light warm white, the page ground */
  --surface: #efede8;    /* image placeholders, panels */
  --ink: #2b2623;        /* text */
  --muted: #6a635b;      /* captions and secondary text */
  --line: #e4e1da;       /* hairlines */
  --accent: #6d6b34;     /* olive glaze green */

  --font-logo: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 2.1rem;
  --step-4: clamp(2.2rem, 5.2vw, 3.3rem);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ---------- Header ---------- */
.site-header {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 28px 18px;
}
/* Temporary logo: lowercase, tight, bold. Replace with the real one later. */
.logo {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 3.8rem);
  letter-spacing: -0.045em;
  text-transform: none;
  text-decoration: none;
  line-height: 1;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 36px;
}
.nav a {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding-block: 10px 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- Common type ---------- */
.eyebrow {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0; }
.lede { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.4; letter-spacing: -0.015em; font-weight: 300; }
.draft-note {
  display: inline-block;
  font-size: var(--step--1);
  color: var(--muted);
  border: 1px dashed var(--line);
  padding: 4px 10px;
  border-radius: 2px;
}

main { padding-block: 16px 96px; }

.button {
  display: inline-block;
  justify-self: start;
  font: inherit;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  padding: 12px 26px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.button:hover { background: transparent; color: var(--ink); }

/* ---------- Home ---------- */
.hero { display: grid; gap: 24px; }
.hero-media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
/* To use a video instead of a photo, swap the <img> for a <video> (see index.html);
   the same rules apply to both. */
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 78%;
  transition: transform var(--dur-slow) var(--ease);
}
.hero-media:hover img,
.hero-media:hover video { transform: scale(1.02); }
.hero-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.hero-caption p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.2; font-weight: 300; letter-spacing: -0.015em; }

@media (max-width: 680px) {
  .hero-media { aspect-ratio: 4 / 5; }
}

/* ---------- Ceramics page ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 48px 32px;
  padding-top: 24px;
}
.piece {
  display: grid;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.piece-img {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  overflow: hidden;
  background: var(--surface);
}
.piece-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease); }
/* second photo fades in on hover */
.piece-img img + img { position: absolute; inset: 0; opacity: 0; }
.piece:hover .piece-img img + img,
.piece:focus-visible .piece-img img + img { opacity: 1; }
.piece-name { font-family: var(--font-body); font-weight: 400; font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }

/* ---------- Piece preview dialog ---------- */
dialog {
  border: 0;
  padding: 0;
  width: min(940px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(43, 38, 35, .22);
}
dialog::backdrop { background: rgba(43, 38, 35, .4); }
.detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.detail-media { display: grid; gap: 8px; align-content: start; min-width: 0; }
.detail-media .piece-img { aspect-ratio: 4 / 5; }
.thumbs { display: flex; gap: 8px; padding: 0 8px 8px; }
.thumbs button {
  width: 64px;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid transparent;
  background: var(--surface);
  cursor: pointer;
  opacity: .6;
  transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.detail-body {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(24px, 4vw, 48px);
  min-width: 0;
}
.specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0; font-size: .92rem; }
.specs dt { color: var(--muted); letter-spacing: .08em; }
.specs dd { margin: 0; }
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  line-height: 1;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
}

@media (max-width: 680px) {
  .detail { grid-template-columns: 1fr; }
}

/* ---------- About page ---------- */
.about {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  padding-block: 24px 64px;
}
.about > * { min-width: 0; }
.portrait {
  aspect-ratio: 4 / 5;
  max-width: 100%;
  overflow: hidden;
  background: var(--surface);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.prose { display: grid; gap: 20px; max-width: 34rem; }

@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; }
}

/* ---------- Contact page ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 6vw, 80px);
  padding-block: 24px 64px;
}
.contact > * { min-width: 0; }
.contact .prose { align-self: start; }
form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
label { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
input, select, textarea {
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--muted);
  padding: 10px 2px;
  border-radius: 0;
  width: 100%;
}
textarea { min-height: 140px; resize: vertical; border: 1px solid var(--muted); padding: 12px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
.form-status { font-size: .92rem; color: var(--accent); }

@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 28px 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer a { display: inline-flex; color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.site-footer a:hover { color: var(--ink); }
.site-footer svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.direct { margin: 0; color: var(--muted); }
.direct a { color: var(--ink); text-underline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 680px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
}

/* ---------- Filters (Ceramics) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 4px 28px; padding-top: 12px; }
.filters button {
  font: inherit; font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
  background: none; border: 0; border-bottom: 1px solid transparent; color: var(--muted);
  padding: 12px 0 8px; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filters button:hover { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.piece[hidden] { display: none; }
@media (max-width: 680px) { .filters { gap: 0 22px; } .grid { padding-top: 12px; } }

/* ---------- Phone / touch polish ---------- */
.nav a { padding-block: 14px 10px; min-height: 44px; }
.filters button { padding: 14px 0 10px; min-height: 44px; }
.site-footer a { padding: 11px; margin: -11px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.intro .big { margin: 0; }
dialog { overscroll-behavior: contain; }
@media (max-width: 680px) { .nav { gap: 0 28px; } }
img { height: auto; }
.piece-img img, .portrait img, .teaser img, .thumbs button img, .hero-media img { height: 100%; }

/* ---------- Less template, more studio (preview) ---------- */
/* Browser surfaces in the site's own colours: text selection and the text cursor. */
::selection { background: #e4e0cf; color: var(--ink); }
input, textarea { caret-color: var(--accent); }

/* 2. No small wide-tracked capitals: lowercase menu like the logo, normal case elsewhere. */
.nav a { font-size: 1rem; letter-spacing: .01em; text-transform: lowercase; }
.filters button { font-size: .95rem; letter-spacing: .01em; text-transform: lowercase; }
.piece-name, .teaser .piece .piece-name, .teaser span { font-size: .95rem; letter-spacing: 0; text-transform: none; }
label { font-size: .9rem; letter-spacing: 0; text-transform: none; }
.button { font-size: .95rem; letter-spacing: .01em; text-transform: none; }
.site-footer { font-size: .9rem; letter-spacing: 0; text-transform: none; }

/* 5. Pop-up: thin line instead of a big soft shadow, a plain "Close" word instead of a round ×. */
dialog { box-shadow: none; border: 1px solid var(--line); }
dialog::backdrop { background: rgba(248, 247, 244, .88); }
/* Close: a thin × (no circle, no frame), with a full 44 px tap area. */
.detail-bar { position: absolute; top: 6px; right: 6px; z-index: 1; }
.close {
  position: static;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 0;
  color: var(--ink);
}

/* Pop-up on a phone: no floating box. It fills the screen like a quiet page of one piece:
   photo edge to edge in its full 3:4, text on the same 16 px edge as the rest of the site,
   and a thin × over the photo that stays in the corner while scrolling. */
@media (max-width: 680px) {
  dialog {
    width: 100%; max-width: 100%;
    height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh;
    margin: 0; border: 0;
  }
  /* The × floats over the photo and stays in the corner while scrolling (zero-height sticky row). */
  .detail-bar {
    position: sticky; top: 0;
    height: 0;
    display: flex; justify-content: flex-end; align-items: flex-start;
    padding: 0 4px;
  }
  .detail-bar .close { margin-top: max(4px, env(safe-area-inset-top)); flex: none; }
  .detail-media .piece-img { aspect-ratio: 3 / 4; }
  .thumbs { padding: 0 16px; }
  .detail-body { padding: 24px 16px 48px; }
}

/* ---------- Motion ----------
   One tempo for the whole site: three durations and one soft ease-out curve.
   Kept quiet on purpose: fades and very small moves, nothing bounces. */
:root {
  --dur-fast: 200ms;   /* colours, lines, small hover changes */
  --dur: 420ms;        /* pop-up, page change */
  --dur-slow: 700ms;   /* photos appearing while scrolling, photo zoom on hover */
  --ease: cubic-bezier(.22, .61, .36, 1);   /* soft ease-out */
  --ease-in: cubic-bezier(.4, 0, 1, 1);     /* for things leaving */
}

/* 1. Page changes: the browser fades the old page into the new one (no script needed).
   The header with logo and menu stays still. Browsers without support simply change page as before. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: var(--dur-fast); }
::view-transition-old(root) { animation: vt-out 180ms var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in var(--dur) var(--ease) 60ms both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

/* 2. Appearing while scrolling. motion.js adds .reveal only to elements that start below the screen,
   so nothing you see on arrival is ever hidden, and without the script everything is simply visible. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* 3. Pop-up: opens with a soft fade and a tiny zoom, closes the same way, a little faster. */
dialog[open] { animation: dialog-in var(--dur) var(--ease); }
dialog[open]::backdrop { animation: fade-in var(--dur) var(--ease); }
dialog.is-closing { animation: dialog-out 260ms var(--ease-in) forwards; }
dialog.is-closing::backdrop { animation: fade-out 260ms var(--ease-in) forwards; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
.teaser a img { transition: transform var(--dur-slow) var(--ease); }

/* Filtering the gallery: the pieces that stay or come back fade in instead of jumping. */
.piece.is-filtered-in { animation: fade-in var(--dur) var(--ease); }
#detail-img { transition: opacity var(--dur-fast) var(--ease); }
#detail-img.is-swapping { opacity: 0; }

/* 4. Hover: only on devices with a mouse, so taps on a phone never leave things "stuck". */
.nav a, .filters button { transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.intro .more, .direct a, .close { transition: text-underline-offset var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover:not([aria-current="page"]), .filters button:hover:not([aria-pressed="true"]) { border-bottom-color: var(--line); }
  .piece:hover .piece-img img, .teaser a:hover img { transform: scale(1.02); }
  .intro .more:hover, .direct a:hover, .close:hover { text-underline-offset: 6px; }
  .close:hover { opacity: .7; }
  .thumbs button:hover { opacity: .9; }
}

/* Reduce motion: no page fade, no pop-up animation, everything visible at once. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Where am I + Send button (2026-11-02) ---------- */
/* Current page in the menu and the chosen filter: darker, slightly heavier, with a firmer line
   sitting close under the word, so it reads at a glance. Same ink colour, no new colours. */
.nav a, .filters button { border-bottom-width: 2px; }
.nav a { padding-block: 14px 4px; margin-bottom: 6px; }
.filters button { padding: 14px 0 4px; margin-bottom: 6px; }
.nav a[aria-current="page"], .filters button[aria-pressed="true"] { font-weight: 500; color: var(--ink); border-bottom-color: var(--ink); }

/* Send message: a thin ink outline instead of a heavy black block, like the hairlines and the
   message box around it. Fills in on hover, fades while sending. */
.button { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 12px 30px; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--ink); color: var(--bg); } }
.button:disabled { opacity: .45; cursor: default; }

/* ---------- Footer links, privacy page, cookie banner ---------- */
.footer-links { display: flex; gap: 24px; margin-right: auto; margin-left: 32px; }
@media (max-width: 600px) { .footer-links { margin-left: 0; order: 3; width: 100%; } }
.form-note { font-size: .85rem; color: var(--muted); }
.form-note a, .legal a, .consent a { color: inherit; text-underline-offset: 3px; }

.legal { max-width: 40rem; padding-block: 24px 64px; display: grid; gap: 18px; }
.legal h2 { font-size: var(--step-2); margin-top: 20px; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal .muted { color: var(--muted); font-size: .9rem; }

.consent {
  position: fixed; z-index: 50;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 34rem; margin-inline: auto;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(43, 38, 35, .08);
  padding: 20px 22px;
  display: grid; gap: 16px;
  font-size: .92rem; line-height: 1.5;
  animation: consent-in var(--dur) var(--ease) both;
}
.consent-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.consent-actions .button { justify-self: auto; }
@keyframes consent-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }