/* =====================================================
   ASPEKU — Art Portfolio
   Tweak the variables below to customise the whole page.
   ===================================================== */
:root {
  --bg: #FAF0E6;            /* page background (Linen) */
  --ink: #2b2624;           /* main text colour */
  --tile-radius: 18px;      /* rounded corners on artwork tiles */
  --tile-gap: 16px;         /* space between tiles */
  --navbar-height: 80px;
  --clear-logo: 280px;      /* viewport-top offset that clears the hanging logo
                               (updated per breakpoint with the logo sizes) */
  --max-width: 1080px;      /* content width */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

/* Custom rabbit-knight cursor (96px copy of assets/cursor-image.png;
   the hotspot 25 19 is the sword tip).
   (cursor-32.png is kept in assets/ if a smaller cursor is wanted back.) */
html, body {
  cursor: url("assets/cursor-96.png") 25 19, auto;
}

/* ===== Hover cursor =====
   Interactive things swap the rabbit knight for the version with its
   sword drawn, so it's clear they can be clicked. */
a,
button,
.tile,
.proj-tile--zoomable,
.navbar__links a,
.project-nav__flag {
  cursor: url("assets/cursor-hover-96.png") 21 7, pointer;
}

/* ===== Navbar ===== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;

  /* linen at the top dissolving to nothing, so the bar melts into the page */
  background: linear-gradient(to bottom, rgba(250, 240, 230, 0.95) 40%, rgba(250, 240, 230, 0));
}

.navbar__logo-link { display: flex; align-self: flex-start; padding-top: 6px; }

.navbar__logo { height: 256px; width: auto; display: block; }

/* Text fallback inserted by script.js when the logo PNG is missing */
.navbar__logo-text {
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-decoration: none;
  color: var(--ink);
}

/* One hanging-sign PNG per link, kept at the image's natural
   aspect ratio (1286x820 = 1.568) so nothing stretches.
   Signs hang from the top of the bar, tabs dangling below it. */
.navbar__links {
  align-self: flex-start;
  display: flex;
  gap: 12px;
}

.navbar__links a {
  --sign-h: 96px;
  height: var(--sign-h);
  width: calc(var(--sign-h) * 1.568);
  background-image: url("assets/home page/navbar-ui.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: calc(var(--sign-h) * 0.03); /* optical centre of the cream panel */
  color: #4a2c1e;
  text-decoration: none;
  /* bold medieval webfont, loads for all visitors via Google Fonts */
  font-family: "Grenze Gotisch", "Blackadder ITC", serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

/* ===== Hero ===== */
.hero {
  max-width: var(--max-width);   /* same width as the tiles grid below */
  margin: 0 auto;
  padding: 72px 24px 48px;
  text-align: center;
}

/* Cropped to 16:9 by the fixed aspect-ratio frame; object-position
   picks which band of the portrait image shows (higher % = lower band). */
.hero__illustration {
  width: 100%;
  aspect-ratio: 2.25 / 1;   /* desktop: trimmed band ending just below the necklace */
  object-fit: cover;
  object-position: 50% 25%;
  border-radius: var(--tile-radius);
  box-shadow: 0 12px 32px rgba(43, 38, 36, 0.18);
  margin-bottom: 24px;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 8px;
  font-weight: normal;
}

.hero__text {
  font-size: 1.15rem;
  margin: 0 auto;
  max-width: 34em;
  opacity: 0.8;
}

/* ===== Work grid ===== */
.work {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Rows are HALF a column width: plain tiles span 2 rows (perfect square),
     tall tiles span 3 (a roomier 2:3 — close to portrait artwork ratios). */
  --cell: calc((min(100vw, var(--max-width)) - 48px - 3 * var(--tile-gap)) / 4);
  grid-auto-rows: calc((var(--cell) - var(--tile-gap)) / 2);
  grid-auto-flow: dense;   /* fills gaps left by bigger tiles */
  gap: var(--tile-gap);
}

.tile {
  display: block;
  grid-row: span 2;        /* 2 half-rows = square */
  text-decoration: none;
  color: inherit;
  border-radius: var(--tile-radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(43, 38, 36, 0.18);
}

/* Size variants — spans are in half-row units (2 = square height) */
.tile--wide { grid-column: span 2; }                   /* ~2:1 */
.tile--tall { grid-row: span 3; }                      /* ~2:3 */
.tile--big  { grid-column: span 2; grid-row: span 4; } /* large square */

/* Real artwork images */
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Coloured placeholder blocks — delete once real images are in */
.tile__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 24px;
  font-size: 0.9rem;
  opacity: 0.6;
}

/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(43, 38, 36, 0.55);
}

.lightbox[hidden] { display: none; }

/* upright rectangle, centred on the page — sized from its height so it
   always fits the viewport, with the width following at a 4:5 ratio */
.lightbox__dialog {
  position: relative;
  --dialog-h: min(880px, 92vh);
  /* height follows the artwork: landscape pieces make a shorter window
     instead of leaving dead space between the image and its details */
  height: auto;
  max-height: var(--dialog-h);
  width: min(calc(var(--dialog-h) * 0.8), 100%);
  background: var(--bg);
  border-radius: var(--tile-radius);
  box-shadow: 0 24px 64px rgba(43, 38, 36, 0.35);
  padding: 32px;
  /* artwork on top, its details stacked underneath */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* the full artwork, uncropped — its box hugs the picture, so the details
   sit right beneath it whatever shape the piece is. It shrinks first when
   the window runs out of room, keeping the text fully readable. */
.lightbox__image {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
}

/* the details keep their full height — the artwork above gives up space
   instead, so nothing has to be scrolled to be read */
.lightbox__info {
  min-width: 0;
  flex: 0 0 auto;
  max-height: calc(var(--dialog-h) * 0.62);   /* safety valve for very long text */
  display: flex;
  flex-direction: column;
  overflow: auto;
  scrollbar-width: thin;
}

/* long entries scroll — fade the bottom edge so it's clear there's more */
.lightbox__info.is-scrollable {
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}

.lightbox__title {
  margin: 0 0 12px;
  font-weight: normal;
  font-size: 1.15rem;
  text-align: center;
  flex-shrink: 0;   /* long titles wrap in full, never squeezed or clipped */
}

.lightbox__description {
  margin: 0 0 20px;
  font-size: 0.98rem;
  opacity: 0.85;
  text-align: justify;
  hyphens: auto;    /* keeps justified lines from opening ugly word gaps */
}

.lightbox__meta {
  margin: 0 0 6px;
  font-size: 0.92rem;
}

.lightbox__close {
  position: absolute;
  top: 8px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.7;
}

.lightbox__close:hover { opacity: 1; }

/* stacked layout on small screens */
@media (max-width: 720px) {
  .lightbox__dialog {
    height: auto;
    width: min(480px, 100%);
    max-height: 88vh;
    padding: 24px;
  }
}

/* ===== Floating contact badge (bottom-right corner) ===== */
.floating-corner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;   /* under the navbar (100) and the lightbox (200) */
  width: min(230px, 42vw);
  animation: heroFloat 5s ease-in-out infinite;
  /* it's a button only so clicking can toggle the size */
  background: none;
  border: none;
  padding: 0;
  transition: width 0.35s ease;
}

/* click to enlarge, click again to shrink (toggled in script.js) */
.floating-corner--big {
  width: min(430px, 80vw);
}


/* hidden on phones */
@media (max-width: 720px) {
  .floating-corner { display: none; }
}

.floating-corner img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(43, 38, 36, 0.3));
}

/* ===== Responsive =====
   The logo scales down in steps so it never collides with the signs. */
@media (max-width: 1600px) {
  .navbar__links a { --sign-h: 80px; font-size: 1rem; }
}

@media (max-width: 1220px) {
  :root { --clear-logo: 216px; }
  .navbar__logo { height: 192px; }
  .navbar__links a { --sign-h: 64px; font-size: 0.88rem; }
}

@media (max-width: 950px) {
  :root { --clear-logo: 168px; }
  .navbar { padding: 0 16px; }
  .navbar__logo { height: 144px; }
  .navbar__links { gap: 10px; }
  .navbar__links a { --sign-h: 54px; font-size: 0.75rem; }
}

@media (max-width: 760px) {
  :root { --clear-logo: 136px; }
  .navbar__logo { height: 112px; }
  .navbar__links a { --sign-h: 48px; font-size: 0.68rem; }
}

@media (max-width: 720px) {
  /* phones keep the taller 16:9 hero crop */
  .hero__illustration {
    aspect-ratio: 16 / 9;
    object-position: 50% 29%;
  }

  /* always at least 2 tiles per row: big/wide/tall flatten to squares */
  .work__grid {
    grid-template-columns: repeat(2, 1fr);
    --cell: calc((100vw - 48px - var(--tile-gap)) / 2);
  }
  .tile--wide, .tile--tall, .tile--big { grid-column: auto; grid-row: span 2; }
}

@media (max-width: 640px) {
  :root { --clear-logo: 104px; }
  .navbar__logo { height: 80px; }
  /* too narrow for four signs — plain readable links in a 2x2 block */
  .navbar__links {
    align-self: center;
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 18px;
    justify-items: end;
  }
  .navbar__links a {
    height: auto;
    width: auto;
    background: none;
    padding: 0;
    font-size: 0.85rem;
  }
}

/* ===== About page ===== */
/* Illuminated frame: the text is positioned in container-relative units
   (cqw = 1% of the frame's width), so it stays locked onto the artwork's
   drawn lines at every screen size. */
.about-hero {
  position: relative;
  width: min(960px, 92vw);
  /* top margin starts the frame below the hanging logo */
  margin: calc(var(--clear-logo) - var(--navbar-height)) auto 0;
  aspect-ratio: 1400 / 1175;
  background-image: url("assets/about/web/hero-text-ui.png");
  background-size: 100% 100%;
  container-type: inline-size;
}

/* the first letter, sitting in the artwork's blue square */
.about-hero__dropcap {
  position: absolute;
  left: 8.2%;
  top: 9.1%;
  width: 19.4%;
  height: 27.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15cqw;
  color: #FAF0E6;
}

/* positions measured from the artwork: 15 ruled lines, 53.6px apart
   at the image's 1400px reference width (1px there = 1/14 cqw) */
.about-hero__text {
  position: absolute;
  left: 11.3%;
  right: 12.1%;
  top: 13.4%;
  font-size: 2.5cqw;
  line-height: 3.829cqw;
  color: #4a2c1e;
}

/* invisible box the size of the blue square, so the first five lines
   of text wrap beside it exactly like the artwork's short lines */
.about-hero__text::before {
  content: "";
  float: left;
  width: 19.4cqw;
  height: 19.1cqw;
}

.about-hero__body { margin: 0; }

/* one blank ruled line before the contact line */
.about-hero__enquiries { margin-top: 3.829cqw; }

/* the artist "sticker" overlapping the frame's bottom-right corner */
.about-hero__badge {
  position: absolute;
  right: 0;
  bottom: -23.6cqw;
  width: 52cqw;
}

/* pennant bunting bridging the two sections (top margin leaves room
   for the sticker hanging below the frame) */
.about-separator {
  display: block;
  width: min(1080px, 96vw);
  height: auto;
  margin: calc(min(960px, 92vw) * 0.26) auto 28px;
}

.exhibitions {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 80px;
  text-align: center;
}

.exhibitions h2 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 20px;
}

/* "Events:" / "Exhibitions:" group labels — left-aligned with the list */
.exhibitions h3 {
  max-width: 34em;
  margin: 24px auto 8px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: bold;
}

/* left-aligned list, centred as a block on the page */
.exhibitions ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 34em;
  text-align: left;
}

.exhibitions li { margin-bottom: 10px; }

/* ===== Projects page ===== */
.projects-layout {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto;
  /* top padding starts the content below the hanging logo; the left
     padding holds the space the pinned navigator occupies */
  padding: calc(var(--clear-logo) - var(--navbar-height)) 24px 80px;
  padding-left: calc(24px + 190px + 36px);
}

/* the wooden pole with one flag per collection hanging off it;
   sticky so it stays put while the gallery scrolls, with enough top
   offset to sit clear of the main navbar */
/* pinned to the page's left edge so it always hangs under the logo,
   whatever the window width */
.project-nav {
  position: fixed;
  left: 24px;
  top: var(--clear-logo);   /* stays clear of the hanging logo */
  width: 190px;
  flex: none;
  padding-top: 24px;   /* lets the pole's knob poke above the first flag */
}

.project-nav__pole {
  position: absolute;
  left: 6px;
  top: -14px;
  height: calc(100% + 130px);   /* bigger pole, standing past the flags */
  width: auto;
  z-index: 1;              /* pole renders on top of the flags */
  pointer-events: none;    /* without blocking clicks on them */
}

.project-nav__flags {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-left: 22px;   /* flag edges tuck behind the pole's shaft centre */
}

.project-nav__flag {
  width: 100%;
  aspect-ratio: 600 / 248;
  background-image: url("assets/projects/web/flag-red.png");
  background-size: 100% 100%;
  border: none;
  padding: 2% 24% 4% 8%;   /* keeps the label off the notched right edge */
  font-family: Georgia, serif;
  font-weight: bold;
  font-size: 0.8rem;
  line-height: 1.25;
  color: #FAF0E6;
  text-align: center;
}

/* the chosen project's flag turns green */
.project-nav__flag.is-active {
  background-image: url("assets/projects/web/flag-green.png");
}

.project-content { flex: 1; }

/* wide banner above the grid: first artwork of the chosen collection */
.project-hero {
  position: relative;
  aspect-ratio: 3 / 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 48px;   /* breathing room before the writing starts */
}

.project-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.project-hero__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 8%;
  text-align: center;
  color: #FAF0E6;
  font-weight: bold;
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  /* the little glow under the letters */
  text-shadow:
    0 3px 16px rgba(255, 216, 130, 0.9),
    0 6px 34px rgba(255, 216, 130, 0.55),
    0 1px 3px rgba(43, 38, 36, 0.55);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  align-items: start;
}

/* ===== Shop banner =====
   The artwork is a transparent PNG of two creatures holding a cloth;
   the title is placed on the cloth itself. */
.shop-hero {
  position: relative;
  /* the PNG carries an empty strip above the artwork (80px of its 711),
     so pull it up by that much to close the gap under the navbar */
  margin-top: -5%;
  margin-bottom: 24px;
}

/* the shop banner is decorative, so its column starts higher than the
   projects one — the navigator still clears the logo on its own */
.shop-layout { padding-top: calc(var(--clear-logo) - var(--navbar-height) - 48px); }

.shop-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* centred on the cloth: the fabric spans 51%-85% of the artwork's
   height at the middle column, so 68% sits in its middle */
.shop-hero__title {
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Grenze Gotisch", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.5vw, 3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a2c1e;
}

/* ===== Shop items ===== */
.shop-note {
  margin: 0 0 16px;
  text-align: center;
  font-style: italic;
  opacity: 0.8;
}

/* shown when the shopper returns from a completed Square checkout */
.checkout-thanks {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(138, 155, 98, 0.55);
  background: rgba(138, 155, 98, 0.16);
  text-align: center;
}

.checkout-thanks[hidden] { display: none; }

.shop-item__price.is-pending {
  font-weight: normal;
  font-style: italic;
  opacity: 0.7;
}

.shop-item__stock {
  margin-left: 10px;
  font-weight: normal;
  font-size: 0.85rem;
  opacity: 0.7;
}

.basket__offer {
  margin: 10px 0 0;
  text-align: right;
  font-size: 0.9rem;
  color: #B5402F;
}

.basket__ship {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.9rem;
}

.basket__ship select {
  font: inherit;
  padding: 3px 6px;
  border: 1px solid rgba(43, 38, 36, 0.35);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
}

.basket__postage {
  margin: 6px 0 0;
  text-align: right;
  font-size: 0.9rem;
  opacity: 0.8;
}

.basket__postage[hidden] { display: none; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 16px;
}

.shop-item {
  display: flex;
  flex-direction: column;
}

/* keep price / size / stepper / button on the same lines across a row:
   the grid already makes the cards equal height, so reserve a steady
   slot for the name and size, and drop the controls to the bottom */

.shop-item__image {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(43, 38, 36, 0.12);
}

/* products with more than one photo */
.shop-item__image.has-gallery { cursor: url("assets/cursor-hover-96.png") 21 7, pointer; }

.shop-item__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.shop-item__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(250, 240, 230, 0.65);
  box-shadow: 0 1px 3px rgba(43, 38, 36, 0.45);
}

.shop-item__dots span.is-on { background: #B5402F; }

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

/* slot still waiting on its picture */
.shop-item__image.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 38, 36, 0.04);
  border: 1px dashed rgba(43, 38, 36, 0.28);
  box-shadow: none;
  font-size: 0.85rem;
  opacity: 0.55;
}

.shop-item__image.is-empty img { display: none; }

.shop-item__name {
  margin: 10px 0 2px;
  font-size: 0.95rem;
  min-height: 2.7em;   /* two lines — keeps the price line level */
}

.shop-item__price {
  margin: 0 0 8px;
  margin-top: auto;   /* price + size + stepper + button ride the card's base */
  font-weight: bold;
}

/* size picker on a print card — fixed-height slot so the row lines up
   whether it holds a dropdown, a "Size: A4" line, or nothing */
.shop-item__size {
  display: flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 8px;
  font-size: 0.88rem;
  opacity: 0.85;
}

.shop-item__size select {
  margin-left: 4px;
  padding: 2px 4px;
  border: 1px solid rgba(43, 38, 36, 0.35);
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--ink);
}

.shop-item__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* hidden must beat the display:flex above */
.shop-item__controls[hidden] { display: none; }

.qty-step {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(43, 38, 36, 0.35);
  border-radius: 6px;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
}

.qty-step:hover { background: rgba(43, 38, 36, 0.07); }

.qty-input {
  width: 46px;
  padding: 3px;
  border: 1px solid rgba(43, 38, 36, 0.35);
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: center;
  color: var(--ink);
}

.shop-item__add {
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: #B5402F;
  color: #FAF0E6;
  font-family: "Grenze Gotisch", Georgia, serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.shop-item__add:hover { background: #9c3527; }

/* ===== Product pop-up ===== */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(43, 38, 36, 0.55);
}

.product-modal[hidden] { display: none; }

.product-modal__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 28px;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 24px 64px rgba(43, 38, 36, 0.35);
}

.product-modal__close {
  position: absolute;
  top: 6px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.7;
}

.product-modal__close:hover { opacity: 1; }

.product-modal__gallery {
  position: relative;
  margin-bottom: 16px;
  border-radius: 9px;
  overflow: hidden;   /* keeps a zoomed photo inside its frame */
}

.product-modal__gallery img {
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  display: block;
  border-radius: 9px;
}

.product-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(250, 240, 230, 0.85);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(43, 38, 36, 0.25);
}

.product-modal__arrow.is-prev { left: 8px; }
.product-modal__arrow.is-next { right: 8px; }
.product-modal__arrow[hidden] { display: none; }

.product-modal__info h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: bold;
}

.product-modal__price {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: bold;
}

.product-modal__desc {
  margin: 0 0 10px;
  text-align: justify;
  hyphens: auto;
}

.product-modal__materials {
  margin: 0 0 14px;
  font-size: 0.92rem;
}

.product-modal__materials[hidden] { display: none; }

.product-modal__size {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.product-modal__size select {
  margin-left: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(43, 38, 36, 0.35);
  border-radius: 6px;
  background: var(--bg);
  font: inherit;
  color: var(--ink);
}

.product-modal__size[hidden] { display: none; }

/* ===== Basket ===== */
.basket-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  background: #B5402F;
  color: #FAF0E6;
  font-family: "Grenze Gotisch", Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(43, 38, 36, 0.3);
  transition: transform 0.2s ease;
}

.basket-button.is-bumped { transform: scale(1.12); }

.basket-button__count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 11px;
  background: #FAF0E6;
  color: #B5402F;
  font-size: 0.9rem;
  text-align: center;
}

.basket {
  position: fixed;
  right: 24px;
  bottom: 82px;
  z-index: 150;
  width: min(360px, calc(100vw - 48px));
  max-height: 70vh;
  overflow: auto;
  padding: 20px;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 14px 40px rgba(43, 38, 36, 0.35);
}

.basket[hidden] { display: none; }

.basket__title {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: bold;
}

.basket__empty { opacity: 0.6; font-style: italic; }

.basket__row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(43, 38, 36, 0.15);
}

.basket__name { font-size: 0.92rem; margin-bottom: 4px; }

.basket__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.basket__qty { min-width: 18px; text-align: center; }
.basket__line { margin-left: auto; font-weight: bold; }

.basket__remove {
  border: none;
  background: none;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.5;
}

.basket__remove:hover { opacity: 1; }

.basket__total {
  margin: 14px 0 12px;
  font-size: 1.05rem;
  text-align: right;
}

.basket__checkout {
  width: 100%;
  padding: 11px;
  border: none;
  border-radius: 9px;
  background: #B5402F;
  color: #FAF0E6;
  font-family: "Grenze Gotisch", Georgia, serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.basket__checkout:disabled { opacity: 0.45; }
.basket__checkout:not(:disabled):hover { background: #9c3527; }

.basket__note {
  margin: 10px 0 0;
  font-size: 0.82rem;
  opacity: 0.75;
}

@media (max-width: 720px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Laid-out project page (sections of text, grids and dividers) ===== */
.project-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.proj-text {
  max-width: 62em;
  margin: 0 auto;
  text-align: justify;
  hyphens: auto;
}

.proj-text p { margin: 0 0 1em; }
.proj-text p:last-child { margin-bottom: 0; }

.proj-text.is-centered { text-align: center; }
.proj-text p.is-bold { font-weight: bold; }
.proj-text p.is-center { text-align: center; }

/* reserved space for copy that hasn't been written yet */
.proj-text.is-placeholder {
  width: 100%;
  padding: 28px;
  border: 1px dashed rgba(43, 38, 36, 0.28);
  border-radius: 10px;
  text-align: center;
  font-style: italic;
  opacity: 0.5;
}

/* titled block of writing that goes with a set of images */
.proj-caption {
  max-width: 62em;
  margin: 0 auto;
  margin-bottom: -8px;   /* sits close to the images it introduces */
}

.proj-caption h3 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

.proj-caption__subtitle {
  margin: 0 0 12px;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
}

.proj-caption__desc {
  margin: 0 0 10px;
  text-align: justify;
  hyphens: auto;
}

/* a quoted passage set in from the main text */
.proj-caption__quote {
  margin: 0 0 6px;
  padding-left: 1.6em;
  border-left: 2px solid rgba(43, 38, 36, 0.25);
  text-align: justify;
  hyphens: auto;
  font-style: italic;
}

.proj-caption__cite {
  margin: 0 0 10px;
  padding-left: 1.6em;
  font-size: 0.88rem;
  opacity: 0.75;
}

.proj-caption__meta {
  margin: 0 0 2px;
  font-size: 0.92rem;
}

.proj-caption a { color: #B5402F; }

/* a titled paragraph with a picture standing beside it */
.proj-textimage {
  max-width: 62em;
  margin: 0 auto;
}

.proj-textimage h3 {
  margin: 0 0 12px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

.proj-textimage__row {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 20px;
  align-items: start;
}

.proj-textimage__text {
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

/* credits list closing the project */
.proj-biblio {
  max-width: 62em;
  margin: 0 auto;
}

.proj-biblio h3 {
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.proj-biblio h4 {
  margin: 18px 0 6px;
  font-size: 0.95rem;
  font-weight: bold;
}

.proj-biblio ul {
  margin: 0;
  padding-left: 1.4em;
  font-size: 0.9rem;
}

.proj-biblio li { margin-bottom: 4px; }

/* empty gap matching a heading's footprint */
.proj-spacer {
  height: 32px;
  margin-bottom: -8px;
}

/* a title standing above the images it belongs to */
.proj-heading {
  max-width: 62em;
  margin: 0 auto -8px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

/* medium / year / link on one line */
.proj-caption__metarow {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 22px;
}

/* small print sitting under the images it describes
   (after the base rules so these win) */
.proj-caption--small {
  font-size: 12px;
  margin-top: -18px;
  margin-bottom: 0;
}

.proj-caption--small h3 { font-size: 1.1em; margin-bottom: 5px; }
.proj-caption--small .proj-caption__desc { margin-bottom: 6px; }
.proj-caption--small .proj-caption__meta { font-size: 1em; margin-bottom: 0; }

.proj-divider {
  width: 100%;
  height: 0;
  margin: 8px 0;
  border: none;
  border-top: 1px solid rgba(43, 38, 36, 0.28);
}

.proj-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 16px;
}

.proj-tile {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(43, 38, 36, 0.12);
}

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

/* tiles that open the pop-up */
.proj-tile--zoomable {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.proj-tile--zoomable:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(43, 38, 36, 0.22);
}

.proj-tile--portrait { aspect-ratio: 2 / 3; }
.proj-tile--wide     { aspect-ratio: 16 / 9; }
.proj-tile--square   { aspect-ratio: 1 / 1; }
.proj-tile--photo    { aspect-ratio: 1.41 / 1; }

/* takes the picture's own shape, so nothing is cropped */
.proj-tile--natural { aspect-ratio: auto; }
.proj-tile--natural img { height: auto; }

/* two wide tiles stacked at the left, one upright tile beside them.
   The column split is set so the upright tile lands on the posters'
   2:3 shape once it stretches to the stack's height. */
.proj-duo {
  display: grid;
  grid-template-columns: 1.21fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.proj-duo__stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
}

.proj-tile--duo-tall {
  aspect-ratio: auto;
  position: relative;
}

.proj-tile--duo-tall img {
  position: absolute;
  inset: 0;
}

/* an upright tile on the left, two squares stacked beside it on the right.
   The column ratio is set so the left tile lands on the posters' own 2:3
   shape once it stretches to the height of the two stacked squares. */
.proj-split {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
  align-items: stretch;
}

/* the two squares set the height; the wide tile stretches to match */
.proj-split__stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 16px;
}

/* the wide tile's image is taken out of the flow so it can't inflate the
   row — the tile simply stretches to whatever height the squares set */
.proj-split .proj-tile--split-wide {
  aspect-ratio: auto;
  position: relative;
}

.proj-split .proj-tile--split-wide img {
  position: absolute;
  inset: 0;
}

/* image slots waiting on a file */
.proj-tile.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 38, 36, 0.04);
  border: 1px dashed rgba(43, 38, 36, 0.28);
  box-shadow: none;
  font-size: 0.85rem;
  opacity: 0.55;
}

.proj-tile.is-empty img { display: none; }

@media (max-width: 720px) {
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-duo { grid-template-columns: 1fr; }
  .proj-tile--duo-tall { aspect-ratio: 2 / 3; }
  .proj-tile--duo-tall img { position: static; }
  .proj-split { grid-template-columns: 1fr; }
  .proj-split__stack { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}

.project-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(43, 38, 36, 0.12);
}

@media (max-width: 720px) {
  .projects-layout { flex-direction: column; padding-left: 24px; }
  .project-nav { position: static; flex: none; width: 100%; padding-top: 0; }
  .project-nav__pole { display: none; }
  .project-nav__flags {
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 0;
  }
  /* phone flags carry their own mini pole on the left */
  .project-nav__flag {
    width: 46%;
    aspect-ratio: 600 / 276;
    background-image: url("assets/projects/web/flag-red-phone.png");
    /* centre the label in the cloth: clear the mini pole (left) and the
       notched tail (right). % padding is relative to the flags row, which
       is ~1/0.46 wider than one flag, hence the small numbers. */
    padding: 3% 10% 4% 4%;
    font-size: 0.68rem;
    line-height: 1.15;
  }
  .project-nav__flag.is-active {
    background-image: url("assets/projects/web/flag-green-phone.png");
  }
}