/* Kris McIntosh Ceramics. Shared styles for every page. */

:root {
  --color-page: #ECEEE8;        /* cool white page background */
  --color-accent: #1E3557;      /* navy text and logo (chosen over the orange-red #D93A1F) */
  --color-line: color-mix(in srgb, var(--color-accent) 25%, transparent);   /* soft divider */
  --color-wash: color-mix(in srgb, var(--color-accent) 6%, transparent);    /* hover tint */
  --color-tag: #8A7458;         /* thin brown border around pictures */
  --color-backdrop: #E4DCCF;    /* warm tone shown while a picture loads */
  --color-panel: #FFFFFF;       /* hero photo panel */

  --font-serif: "Besley", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --font-sans: "Inter", system-ui, sans-serif;

  --gutter: 40px;
  --left-col: 43%;              /* logo and text column, matches the hero split */
}

* { box-sizing: border-box; }

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

/* Pages cross-fade into each other in browsers that support it */
@view-transition { navigation: auto; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll { overflow: hidden; }

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

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.page { max-width: 1440px; margin: 0 auto; position: relative; }

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-page);
}

.skip-link:focus { top: 8px; }

/* Type */

.label {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

a.label:hover { text-decoration: underline; text-underline-offset: 4px; }

.lead {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 32px;
  font-weight: 400;
  margin: 0;
}

.body-small { font-size: 14px; line-height: 22px; margin: 0; }

.h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.02em;
  margin: 0;
}

.h-section {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
}

.site-header .logo { display: block; flex-shrink: 0; }
.site-header .logo img { display: block; height: 64px; width: auto; }

.menu-btn { display: none; }

.site-nav { display: flex; align-items: center; gap: 48px; }
.site-nav ul { display: flex; gap: 48px; list-style: none; margin: 0; padding: 0; }
.site-nav li, .site-nav > a { display: flex; align-items: center; height: 20px; }

/* Underline draws in from the left on hover and focus */
.site-nav a { position: relative; }
.site-nav a:hover { text-decoration: none; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Home: the header and the hero share one navy screen with white text and
   logo, then the page continues on the usual cool white. The photo's backdrop
   was repainted the same navy, so the pieces look set straight on the page. */

.hero-band {
  --color-accent: #FFFFFF;
  --color-page: #1E3557;
  --color-line: rgba(255, 255, 255, 0.25);
  --color-wash: rgba(255, 255, 255, 0.08);
  background: #1E3557;
  color: var(--color-accent);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: calc(max(560px, 100svh) - 104px);
  padding: 16px var(--gutter) 32px;
}

.hero-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.hero-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 1160px);
  max-height: calc(max(560px, 100svh) - 104px - 48px - clamp(28px, 5.5vw, 72px) - 24px - 60px);
}

.hero > a { display: inline-flex; align-items: center; min-height: 44px; }

/* Pictures the admin's Edit Site can resize and move. The .place wrapper keeps
   the picture's spot in the layout; --w and --x (saved on the wrapper by the
   admin) are the picture's width and left offset as a share of that spot,
   snapped to a 12 column grid. Without them the picture is laid out as
   usual. On phones the picture always fills the width. */
.place { display: block; width: 100%; min-width: 0; }
.place > :first-child { margin-left: auto; margin-right: auto; }
.place[style] > :first-child { width: var(--w); max-width: 100%; max-height: none; margin-left: var(--x); margin-right: auto; }

/* Sections */


.section { padding: 96px var(--gutter) 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}

/* Pictures of pieces: warm backdrop, thin brown border */

.piece { margin: 0; }

.piece-img {
  border: 1px solid var(--color-tag);
  background: var(--color-backdrop);
  overflow: hidden;
}

.piece-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, opacity 0.4s ease; }

/* Pictures fade in over the warm backdrop once loaded (only when scripts run) */
.js .piece-img img { opacity: 0; }
.js .piece-img img.is-loaded { opacity: 1; }

.piece figcaption, .piece-caption { padding: 10px 0 0 4px; }

.piece-detail {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 20px;
  margin: 2px 0 0;
}

/* The whole picture is a button (gallery) or a link (home) */
.piece-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
}

a.piece-open { cursor: pointer; }

.piece-open:hover img, .piece-open:focus-visible img { transform: scale(1.04); }

/* Home featured pieces: a row you can scroll or step through */

.featured-section { padding-top: 64px; }

.carousel-controls { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-accent);
  background: transparent;
  cursor: pointer;
  border-radius: 0;
}

.icon-btn:hover { background: var(--color-accent); color: var(--color-page); }
.icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--color-accent); }

.carousel-track {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* room for focus rings */
  padding: 4px;
  margin: -4px;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track .piece { flex: 0 0 calc((100% - 34px) / 3); scroll-snap-align: start; }

/* Sized from the screen height so the heading, pictures, and captions fit on one screen */
.carousel-track .piece-img { aspect-ratio: 1 / 1; max-height: clamp(280px, calc(100svh - 270px), 620px); }

.featured-foot { display: flex; justify-content: flex-end; padding-top: 20px; }

/* Home closing section */

.closing { display: flex; flex-direction: column; gap: 28px; padding: 120px var(--gutter) 0; }
.closing .lead { max-width: 560px; }
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-page);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
}

.cta.cta-outline { background: transparent; color: var(--color-accent); }
.cta, .tabs a, .dropdown-btn, .chip, .icon-btn, .filter-open { transition: transform 0.15s ease, opacity 0.15s ease; }
a.cta:hover, button.cta:hover { text-decoration: none; opacity: 0.88; transform: translateY(-2px); }
.tabs a:hover, .dropdown-btn:hover, .chip:hover { transform: translateY(-2px); }
.cta:active, .tabs a:active, .dropdown-btn:active, .chip:active, .icon-btn:active { transform: translateY(1px); }

/* Gallery */

.gallery-intro {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 32px;
  padding: 56px var(--gutter) 40px;
}

/* The line of text sits right beside the title, level with its last line */
.gallery-intro .body-small { padding-bottom: 8px; }
@media (min-width: 1280px) { .gallery-intro .body-small { white-space: nowrap; } }

/* Current Work / Archive switch */
.tabs { display: flex; }

.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  border: 1px solid var(--color-accent);
  font-size: 12px;
  white-space: nowrap;
}

.tabs a + a { border-left: 0; }
.tabs a[aria-current="page"] { background: var(--color-accent); color: var(--color-page); }
.tabs a[aria-current="page"]:hover { text-decoration: none; }

/* Filter bar stays at the top of the screen while the grid scrolls */
.filter-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0 var(--gutter);
  background: var(--color-page);
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
}

.filter-open, .sheet-head, .sheet-foot, .sheet-backdrop { display: none; }

.filter-sections { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.filter-title { font-size: 12px; margin-right: 16px; }

.dropdown { position: relative; }

.dropdown-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--color-accent);
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
}

.dropdown-btn svg { transition: transform 0.15s; }
.dropdown-btn[aria-expanded="true"] { background: var(--color-accent); color: var(--color-page); }
.dropdown-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown-btn.has-selection { box-shadow: inset 0 -3px 0 var(--color-tag); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  min-width: 250px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
  background: var(--color-page);
  border: 1px solid var(--color-accent);
}

.dropdown-panel[hidden] { display: none; }

/* The filters sit on the right on wide screens, so their lists open leftwards */
@media (min-width: 1024px) {
  .dropdown-panel { left: auto; right: 0; }
}

.dropdown-group-title { padding: 10px 14px 4px; font-size: 11px; opacity: 0.8; }

.dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.dropdown-option:hover { background: var(--color-wash); }
.dropdown-option input { accent-color: var(--color-accent); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.dropdown-option .count { margin-left: auto; font-family: var(--font-mono); font-size: 12px; opacity: 0.8; }
.dropdown-option.is-empty { opacity: 0.4; cursor: default; }

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-accent);
}

.search input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.search input::placeholder { color: var(--color-accent); opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:focus-within { box-shadow: 0 0 0 1px var(--color-accent); }

/* Active filters as removable chips */
.filter-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px var(--gutter) 0;
}

.result-count { font-size: 12px; margin: 0 8px 0 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--color-tag);
  background: transparent;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
  border-radius: 0;
}

.chip:hover { background: rgba(138, 116, 88, 0.14); }
.chip-clear { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }

/* Four smaller cards per row on desktop */
.piece-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 16px;
  padding: 16px var(--gutter) 0;
}

/* Square frames, so wide pieces are not cut off at the sides */
.piece-grid .piece-img { aspect-ratio: 1 / 1; }
.piece[hidden], .empty-state[hidden] { display: none; }
.piece-grid .label { font-size: 12px; }
.piece-grid .piece-detail { font-size: 13px; line-height: 18px; }
.empty-state { grid-column: 1 / -1; padding: 64px 0; text-align: center; }

/* Collections page: each collection is a tight mosaic, two large pictures then four small */

.collection-jump { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 0 var(--gutter) 8px; }
.collection-jump a { display: inline-flex; align-items: center; min-height: 44px; }

.collection { padding: 24px var(--gutter) 56px; scroll-margin-top: 16px; }
.collection-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0 20px; border-top: 1px solid var(--color-accent); }
.collection-text { max-width: 560px; margin: -4px 0 24px; font-size: 14px; line-height: 22px; }

/* The first piece of a collection is shown whole, with the description beside it */
/* The pictures of a collection share one narrower column, so they stay lined up and stay sharp */
.collection-lead, .mosaic { max-width: 900px; margin-left: auto; margin-right: auto; }
.collection-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; align-items: start; margin-bottom: 6px; }
.collection-lead figure { margin: 0; }
.collection-lead .piece-img { display: inline-block; border: 0; background: none; vertical-align: top; }
.collection-lead .piece-img img { display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(360px, calc(100svh - 220px), 600px); }
.collection-text { max-width: 400px; margin: 0; font-family: var(--font-serif); font-size: 19px; line-height: 29px; }

.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mosaic-tile { margin: 0; min-width: 0; }
.mosaic-tile.is-large { grid-column: span 2; }
.mosaic-tile.is-wide { grid-column: 1 / -1; }
.mosaic .piece-img { aspect-ratio: 1 / 1; border: 0; }
.mosaic .is-wide .piece-img { aspect-ratio: var(--ratio); }
.mosaic figcaption, .collection-lead figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 6px 18px; }
.mosaic figcaption .label, .collection-lead figcaption .label { font-size: 11px; }
.mosaic-detail { opacity: 0.6; text-align: right; }
.mosaic-tile:not(.is-large):not(.is-wide) .mosaic-detail { display: none; }

/* A collection arranged by hand in the admin: boxes placed in percent of the column */
.collection-canvas { position: relative; max-width: 900px; margin: 0 auto; }
.canvas-item { position: absolute; margin: 0; }
.canvas-item .piece-img { border: 0; background: none; }
.canvas-item .piece-img img { display: block; width: 100%; height: auto; object-fit: fill; }
.canvas-item figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 10px 6px 0; }
.canvas-item figcaption .label { font-size: 11px; }
p.canvas-item { max-width: none; }

/* Piece page: title and description on the left, picture in the middle, details on the right */

/* The page fills one screen and the content sits at the bottom of it, so the
   picture, the details, the button, and previous/next all end on one line */
.piece-page { display: flex; flex-direction: column; min-height: calc(max(620px, 100svh) - 104px); padding: 4px var(--gutter) 40px; }
.piece-layout { margin-top: auto; }

.piece-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; }

.piece-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, auto) minmax(220px, 1fr);
  gap: 48px;
  align-items: start;
}

.piece-frame { display: flex; justify-content: center; }

.piece-frame img {
  width: auto;
  height: auto;
  max-width: min(100%, 46vw);
  max-height: clamp(320px, calc(100svh - 300px), 680px);
}

.piece-text { display: flex; flex-direction: column; align-self: stretch; }
.piece-inquire { margin-top: auto; align-self: flex-start; }
.piece-title, .piece-by { font-family: var(--font-serif); font-size: 26px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
.piece-by { opacity: 0.4; margin-top: 2px; }
.piece-blurb { font-size: 14px; line-height: 22px; margin: 28px 0 40px; max-width: 340px; }

.piece-subhead { margin: 0; padding: 8px 0 12px; }
.piece-table { margin: 0; border-bottom: 1px solid var(--color-line); }
.piece-row { display: grid; grid-template-columns: 44% 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--color-line); font-size: 14px; line-height: 22px; }
.piece-row dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.piece-row dd { margin: 0; }

/* Tablet and phone: picture first, then the title and description, then the details */
@media (max-width: 899px) {
  .piece-page { min-height: 0; }
  .piece-layout { margin-top: 0; grid-template-columns: 1fr; gap: 24px; }
  .piece-frame { order: -1; }
  .piece-frame img { max-width: 100%; }
  .piece-blurb { margin: 14px 0 24px; max-width: 560px; }
}

.piece-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 20px; padding-top: 32px; }
.piece-nav { display: flex; gap: 36px; }
.piece-nav a, .piece-top a { display: inline-flex; align-items: center; min-height: 44px; }

/* About */

.about-main {
  display: grid;
  grid-template-columns: var(--left-col) 1fr;
  align-items: start;
  padding: 48px var(--gutter) 0 0;
}

.bio { display: flex; flex-direction: column; gap: 32px; padding: 0 80px 0 var(--gutter); }
.bio h1 { margin: 0; font-weight: 400; }

.bio-text p { margin: 0 0 16px; }
.bio-text p:last-child { margin-bottom: 0; }

.photo figcaption { padding-top: 12px; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; }
/* Keeps the portrait photo, its caption, and the header on one screen */
.about-main .photo img { max-height: clamp(320px, calc(100svh - 280px), 760px); object-fit: cover; }

.studio {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  align-items: end;
  padding: 96px var(--gutter) 0;
}

.studio-details { display: flex; flex-direction: column; gap: 28px; padding: 0 0 28px 64px; }
.studio-details .label { font-size: 12px; display: block; margin-bottom: 4px; }
.studio-details p { margin: 0; }
.studio .place { grid-column: 1; }

/* Contact */

.contact-intro { display: flex; flex-direction: column; gap: 20px; padding: 56px var(--gutter) 0; }
.contact-intro .lead { max-width: 640px; }

.contact-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 80px;
  align-items: start;
  padding: 48px var(--gutter) 0;
}

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.form-row .label { font-size: 12px; }
.form-row .optional { opacity: 0.8; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-size: 13px; }

.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--color-accent);
  border-radius: 0;
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  -webkit-appearance: none;
  appearance: none;
}

.form-row select {
  padding-right: 32px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231E3557' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 12px center;
  cursor: pointer;
}

.form-row textarea { min-height: 180px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.form-hp { position: absolute; left: -9999px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-actions .cta { min-height: 48px; padding: 12px 24px; font-size: 13px; }
.form-note { font-size: 13px; line-height: 20px; margin: 0; }
.form-status { padding: 16px; border: 1px solid var(--color-tag); margin: 0; }
.form-status[hidden] { display: none; }

.contact-aside { display: flex; flex-direction: column; gap: 28px; }
.contact-aside .label { font-size: 12px; display: block; margin-bottom: 4px; }
.contact-aside p { margin: 0; }
.contact-aside .contact-email { font-family: var(--font-serif); font-size: 18px; line-height: 26px; overflow-wrap: anywhere; }

.contact-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 96px var(--gutter) 0; }
.contact-info h2 { margin: 0 0 8px; font-weight: 400; }
.contact-info p { margin: 0; font-size: 14px; line-height: 22px; }

/* 404 */

.not-found { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 96px var(--gutter) 0; }

/* Footer */

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 140px var(--gutter) 40px;
}

.site-footer .footer-name { font-family: var(--font-serif); font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 16px 48px; list-style: none; margin: 0; padding: 0; }

/* Back to top */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 15;
  background: var(--color-page);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.to-top.is-shown { opacity: 1; visibility: visible; }

/* Tablet: three cards per row */

@media (max-width: 1023px) {
  .piece-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-intro { grid-template-columns: 1fr auto; gap: 16px 24px; }
  .gallery-intro .h-display { grid-column: 1 / -1; }
  .gallery-intro .body-small { padding-bottom: 0; }
  .filter-bar { flex-wrap: wrap; }
  .search { flex: 1 1 100%; width: auto; }
  .carousel-track .piece { flex-basis: calc((100% - 17px) / 2); }
}

@media (max-width: 899px) {
  :root { --gutter: 24px; }

  .site-header { padding: 16px var(--gutter); }
  .site-header .logo img { height: 48px; }
  .site-nav, .site-nav ul { gap: 28px; }
  .site-nav li, .site-nav > a { height: 44px; }


  .h-display { font-size: 40px; line-height: 44px; }
  .h-section { font-size: 26px; line-height: 32px; }
  .section { padding-top: 72px; }
  .closing { padding-top: 88px; }

  .about-main { grid-template-columns: 1fr; padding: 48px var(--gutter) 0; gap: 40px; }
  .about-main .photo img { max-height: none; }
  .bio { padding: 0; }
  .studio { grid-template-columns: 1fr; padding: 72px var(--gutter) 0; gap: 32px; }
  .studio .photo { grid-column: 1; max-width: 400px; }
  .studio-details { padding: 0; }

  .contact-main { grid-template-columns: 1fr; gap: 48px; }
  .contact-info { grid-template-columns: 1fr 1fr; padding-top: 72px; }

  .site-footer { flex-direction: column; align-items: flex-start; padding-top: 96px; }
  .site-footer li a, .site-footer li span { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer ul { gap: 0 40px; }

}

/* Phone: two cards per row, menu button, filters in a bottom sheet */

@media (max-width: 559px) {
  .place[style] > :first-child { width: 100% !important; margin-left: 0 !important; }
  :root { --gutter: 16px; }

  .label { font-size: 12px; }
  .lead { font-size: 19px; line-height: 28px; }

  .site-header { flex-wrap: wrap; padding: 10px var(--gutter); }
  .site-header .logo img { height: 40px; }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-accent);
    background: transparent;
    cursor: pointer;
    border-radius: 0;
  }

  .menu-btn[aria-expanded="true"] { background: var(--color-accent); color: var(--color-page); }

  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav { flex: 1 1 100%; display: block; padding: 10px 0 0; }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
  .site-nav ul { display: block; }
  .site-nav li, .site-nav > a { display: flex; height: 52px; border-top: 1px solid var(--color-line); }
  .site-nav li a { display: flex; align-items: center; width: 100%; height: 100%; }
  .site-nav a { font-size: 14px; }


  .contact-intro { padding-top: 32px; }
  .form-pair { grid-template-columns: 1fr; }
  .contact-info { grid-template-columns: 1fr; gap: 28px; }
  .form-actions .cta { width: 100%; justify-content: center; }

  .carousel-track .piece { flex-basis: 78%; }
  .carousel-track .piece-img { max-height: none; }
  .featured-foot { justify-content: flex-start; }
  .closing-actions .cta { min-height: 48px; }

  .gallery-intro { grid-template-columns: 1fr; padding: 32px var(--gutter) 24px; gap: 16px; }
  .tabs a { flex: 1; justify-content: center; min-height: 48px; padding: 10px 6px; font-size: 11px; }

  .collection { padding: 16px var(--gutter) 40px; }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic figcaption { padding: 8px 2px 14px; }
  .collection-lead { grid-template-columns: 1fr; }
  .collection-lead .piece-img img { max-height: none; }
  .collection-text { font-size: 18px; line-height: 27px; padding-bottom: 20px; }

  .filter-bar { padding: 10px 0; gap: 8px; flex-wrap: nowrap; }
  .search { flex: 1 1 auto; min-height: 44px; }
  .search { min-width: 0; }
  .filter-sections { min-height: 0; flex: 1 1 auto; }
  /* 16px stops iOS from zooming the page when the search box is tapped */
  .search input { font-size: 16px; letter-spacing: 0; }
  .search svg { display: none; }
  .search { padding: 0 10px; }

  .filter-open {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--color-accent);
    background: var(--color-accent);
    color: var(--color-page);
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
  }

  .sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(21, 17, 14, 0.5); }
  .sheet-backdrop.is-open { display: block; }

  .filter-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    max-height: 86svh;
    background: var(--color-page);
    border-top: 1px solid var(--color-accent);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
  }

  .filter-sheet.is-open { transform: none; visibility: visible; }

  .sheet-head, .sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px var(--gutter); }
  .sheet-head { border-bottom: 1px solid var(--color-line); }
  .sheet-foot { border-top: 1px solid var(--color-line); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sheet-close, .sheet-clear { min-height: 44px; padding: 0 4px; border: 0; background: none; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  .sheet-apply { flex: 1; justify-content: center; min-height: 48px; font-size: 13px; }

  .filter-sections { display: block; overflow-y: auto; padding: 4px 0 12px; }
  .filter-title { display: none; }
  .dropdown { position: static; }

  /* In the sheet, each section is a plain heading with its options always open */
  .dropdown-btn { width: 100%; border: 0; padding: 16px var(--gutter) 4px; font-size: 13px; pointer-events: none; }
  .dropdown-btn[aria-expanded="true"] { background: transparent; color: var(--color-accent); }
  .dropdown-btn.has-selection { box-shadow: none; }
  .dropdown-btn svg { display: none; }
  .dropdown-panel, .dropdown-panel[hidden] { display: block; position: static; max-height: none; border: 0; padding: 0; }
  .dropdown-option { min-height: 48px; padding: 8px var(--gutter); font-size: 16px; }
  .dropdown-option input { width: 22px; height: 22px; }
  .dropdown-group-title { padding: 12px var(--gutter) 2px; }

  .filter-meta { padding-top: 12px; }
  .chip { min-height: 44px; padding: 4px 12px; font-size: 14px; }

  .piece-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }

  .piece-frame img { max-height: none; }
  .piece-title, .piece-by { font-size: 22px; line-height: 27px; }
  .piece-actions { padding-top: 32px; }
  .piece-inquire { width: 100%; justify-content: center; min-height: 48px; }
  .piece-nav { width: 100%; justify-content: space-between; }
  .piece figcaption { padding-left: 2px; }

  .to-top { right: 12px; bottom: 12px; }
}

/* People who ask for less motion get none */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .piece-img img { opacity: 1; }
  .piece-open:hover img, .piece-open:focus-visible img { transform: none; }
}