/* Neutral wireframe palette: white, soft grays, no black */
  :root {
    --bg: #FFFFFF;
    --text: #8A8A8A;      /* main text, soft but readable */
    --strong: #6E6E6E;    /* hover and emphasis */
    --line: #D6D6D6;      /* borders, underlines */
    --display: #D2D2D2;   /* big wordmark and page titles */
    --tint: #F4F4F4;      /* section bands, image backgrounds */
    --tint-2: #EBEBEB;    /* buttons, tags */
    --olive: #7D805B;
    --clay: #C18B6B;
    --on-color: #FFFFFF;  /* text on colored sections */
    --track: 0.6em;           /* tracking 600, used on all uppercase text */
    --font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
  }
  button, input { font-family: inherit; color: inherit; }
  img { display: block; max-width: 100%; }
  :focus-visible { outline: 1px solid var(--strong); outline-offset: 3px; }
  h1, h2, h3 { margin: 0; font-weight: 300; }
  p { margin: 0; }

  .link-btn { background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; text-align: left; }
  .link-btn:hover { color: var(--strong); }


  /* ---------- HERO ---------- */
  .hero { min-height: 100svh; display: flex; flex-direction: column; }
  .hero-body {
    margin-top: auto;
    display: grid;
    grid-template-columns: minmax(200px, 22%) 1fr;
    gap: 20px;
    align-items: end;
    padding: 0 28px 28px;
  }
  .hero-left { display: flex; flex-direction: column; gap: 12px; }
  .explore {
    display: inline-flex; justify-content: space-between; align-items: center; gap: 16px;
    font-weight: 400; font-size: 14px; letter-spacing: 0.01em;
    border: none; border-bottom: 1px solid var(--line); background: none; padding: 0 0 4px; cursor: pointer;
  }
  .explore:hover { color: var(--strong); }
  .hero-left img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
  .hero-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .hero-text { max-width: 30ch; margin-left: 48%; font-size: 14px; }
  .placeholder-block { border: 1px dashed var(--line); height: 160px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text); }

  /* ---------- SECTIONS ---------- */
  .section { padding: 56px 28px; }
  .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
  .section-head h2 { font-size: 18px; font-weight: 400; line-height: 1.3; }
  .arrow-link { font-weight: 400; font-size: 13px; border: none; background: none; border-bottom: 1px solid var(--line); padding: 0 0 2px; cursor: pointer; }
  .arrow-link:hover { color: var(--strong); }

  .preview-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 12px; }
  .preview-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
  .preview-grid img:first-child { grid-row: span 2; aspect-ratio: auto; }

  .shop-band { background: var(--olive); color: var(--on-color); }
  .shop-band .arrow-link:hover { color: #fff; }
  .shop-band .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; }
  .shop-band h2 { font-size: 18px; font-weight: 400; line-height: 1.3; }
  .shop-band p { max-width: 36ch; margin-bottom: 16px; }

  .newsletter { background: var(--clay); color: var(--on-color); }
  .newsletter .inner { max-width: 560px; }
  .newsletter h2 { font-size: 18px; font-weight: 400; margin-bottom: 12px; line-height: 1.3; }
  .newsletter form { display: flex; gap: 8px; margin-top: 16px; }
  .newsletter input { flex: 1; min-width: 0; background: transparent; border: 1px solid var(--on-color); padding: 10px; font-size: 14px; color: var(--on-color); }
  .newsletter input::placeholder { color: var(--on-color); opacity: 0.7; opacity: 0.6; }
    .newsletter button { background: transparent; color: var(--on-color); border: 1px solid var(--on-color); cursor: pointer; padding: 10px 16px; font-size: 14px; }
  .newsletter button:hover { background: var(--on-color); color: var(--clay); }
  .newsletter .note { font-size: 12px; opacity: 0.7; margin-top: 10px; }

  /* ---------- PAGE TITLES ---------- */
  .page { padding: 40px 28px 96px; }
  .page-title { font-size: 14px; font-weight: 300; color: var(--strong); line-height: 1.3; margin-bottom: 40px; text-transform: uppercase; letter-spacing: var(--track); }

  /* ---------- GALLERY ---------- */
  .masonry { display: flex; gap: 12px; align-items: flex-start; }
  .m-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .m-col img { width: 100%; display: block; }

  /* ---------- ABOUT ---------- */
  .about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 96px; }
  .about-intro p { max-width: 44ch; }
  .lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .list-col h2 { font-size: 20px; font-weight: 400; margin-bottom: 12px; }
  .list-col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .list-col li { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .list-col .extra { display: none; }
  .list-col.expanded .extra { display: list-item; }
  .expand-btn { margin-top: 12px; }

  /* ---------- SHOP ---------- */
  .shop-intro { display: flex; justify-content: space-between; align-items: end; gap: 28px; flex-wrap: wrap; margin-bottom: 32px; }
  .shop-intro p { max-width: 40ch; }
  .filters { display: flex; gap: 8px; flex-wrap: wrap; }
  .filters button { border: 1px solid var(--line); background: none; padding: 6px 14px; cursor: pointer; font-size: 13px; font-weight: 400; }
  .filters button.active, .filters button:hover { background: var(--tint-2); color: var(--strong); }

  .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 16px; }
  .shop-item { cursor: pointer; background: none; border: none; padding: 0; text-align: left; }
  .shop-item .frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tint); margin-bottom: 12px; }
  .frame img, .frame .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.35s ease; }
  .frame .second { opacity: 0; }
  .shop-item:hover .frame .second, .shop-item:focus-visible .frame .second { opacity: 1; }
  .ph { display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--tint-2); color: var(--text); }
  .tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--bg); color: var(--text); font-size: 10px; font-weight: 400; padding: 4px 8px; text-transform: uppercase; letter-spacing: var(--track); }
  .item-row { display: flex; justify-content: space-between; gap: 12px; font-weight: 400; }
  .item-sub { font-size: 13px; opacity: 0.7; }

  .shop-footer { background: var(--clay); color: var(--on-color); padding: 48px 28px; display: grid; grid-template-columns: repeat(4, auto) 1fr; gap: 12px 32px; align-items: end; font-size: 14px; }
  .shop-footer span { cursor: pointer; }
  .shop-footer span:hover { text-decoration: underline; }
  .shop-footer .vat { justify-self: end; opacity: 0.8; font-size: 13px; }

  /* ---------- CONTACT ---------- */
  .contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
  .contact-info { display: flex; flex-direction: column; gap: 20px; }
  .contact-info a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
  .contact-info a:hover { color: var(--strong); }
  .contact-info .k { font-size: 11px; text-transform: uppercase; letter-spacing: var(--track); opacity: 0.7; margin-bottom: 4px; }
  .contact-form { display: flex; flex-direction: column; gap: 16px; }
  .contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
  .contact-form input, .contact-form select, .contact-form textarea { font-family: inherit; font-size: 14px; color: var(--strong); padding: 10px; border: 1px solid var(--line); background: var(--bg); }
  .contact-form textarea { min-height: 160px; resize: vertical; }
  .contact-form button { align-self: flex-start; padding: 12px 24px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: var(--track); color: var(--strong); }
  .contact-form button:hover { background: var(--tint); }

  /* ---------- PRODUCT ---------- */
  .back-link { margin-bottom: 28px; font-size: 14px; font-weight: 400; }
  .product { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
  .main-photo { position: relative; aspect-ratio: 4 / 5; background: var(--tint); overflow: hidden; }
  .main-photo img, .main-photo .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .photo-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
  .photo-thumbs button { position: relative; aspect-ratio: 1; padding: 0; border: 2px solid transparent; background: var(--tint); cursor: pointer; overflow: hidden; }
  .photo-thumbs button img, .photo-thumbs button .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; font-size: 10px; }
  .photo-thumbs button.current { border-color: var(--strong); }

  .product-info { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
  .product-info h1 { font-size: 18px; font-weight: 400; line-height: 1.3; }
  .product-info .price { font-size: 14px; font-weight: 400; margin-top: 8px; }
  .status { align-self: flex-start; font-size: 12px; font-weight: 400; padding: 4px 10px; background: var(--tint-2); color: var(--text); }
  .status.out { background: var(--bg); border: 1px solid var(--line); }
  .product-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14px; border-top: 1px solid var(--line); padding-top: 16px; }
  .product-info dt { opacity: 0.6; }
  .product-info dd { margin: 0; }
  .buy-btn { width: 100%; padding: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--strong); font-weight: 400; font-size: 14px; cursor: pointer; }
  .buy-btn:hover { background: var(--tint); }
  .notify { background: var(--tint); border: 1px solid var(--line); padding: 16px; }
  .notify p { font-size: 14px; margin-bottom: 12px; }
  .notify form { display: flex; gap: 8px; }
  .notify input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; }
  .notify button { padding: 12px 16px; border: 1px solid var(--line); background: var(--tint-2); color: var(--strong); font-weight: 400; cursor: pointer; font-size: 13px; }
  .notify button:hover { background: var(--tint); }
  .small-note { font-size: 12px; opacity: 0.7; }

  .also-like { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 32px; }
  .also-like h2 { font-size: 18px; font-weight: 400; margin-bottom: 24px; }
  .also-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }


  /* ---------- PHOTO HERO (home) ---------- */
  .photo-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: #FCE3D1; }
  .photo-hero picture, .photo-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* Anchored to the top of the photo */
  .photo-hero .hero-img { object-fit: cover; object-position: 50% 0%; }
  .hero-shade { position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); pointer-events: none; }

  .hero-brand { background: none; border: none; color: inherit; cursor: pointer; padding: 0; display: flex; }
  .hero-brand svg { height: 18px; width: auto; display: block; }
  .hero-nav { display: flex; gap: 20px 40px; flex-wrap: wrap; justify-content: center; }
  .hero-nav button, .hero-nav a { background: none; border: none; padding: 0; cursor: pointer; color: inherit; text-decoration: none; font-size: 11px; letter-spacing: var(--track); margin-right: calc(-1 * var(--track)); text-transform: uppercase; font-weight: 300; }
  .hero-nav button:hover, .hero-nav a:hover { opacity: 0.7; }

  .hero-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "left emblem right"; align-items: center; gap: 28px; padding: 0 28px; }
  .hero-side.left { grid-area: left; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .side-mark svg { height: 15px; width: auto; display: block; }
  .side-sub, .side-l2 { margin-left: 3.5em; }
  .hero-emblems { grid-area: emblem; }
  .hero-aside { grid-area: right; display: flex; align-items: center; gap: 28px; justify-self: start; }
  .hero-side { font-size: 13px; letter-spacing: var(--track); text-transform: uppercase; font-weight: 300; line-height: 1.6; }
  .hero-side.left { justify-self: end; }
  .hero-side.right { justify-self: start; display: flex; flex-direction: column; gap: 4px; }
  .hero-emblems { display: flex; flex-direction: column; gap: 16px; }
  .vector-ph { border: 1px dashed rgba(243, 237, 227, 0.8); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; letter-spacing: 0.05em; padding: 8px; }
  .hero-emblems svg { height: min(19vh, 210px); width: auto; display: block; }
  .jaguar svg { height: min(10vh, 110px); width: auto; display: block; }
  .vase svg { height: 56px; width: auto; display: block; }

  .hero-cta { position: absolute; left: 0; right: 0; bottom: 6vh; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .hero-cta button { background: none; border: none; color: inherit; cursor: pointer; font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; font-weight: 300; }
  .hero-cta button:hover { opacity: 0.7; }

  @media (max-width: 700px) {
      .hero-nav { gap: 10px 18px; padding: 0 16px; }
    .hero-nav button, .hero-nav a { font-size: 10px; }
    .hero-center { grid-template-columns: 1fr 1fr; grid-template-areas: "emblem emblem" "left right"; gap: 20px 16px; top: 50%; padding: 0 16px; }
    .hero-emblems { justify-self: center; }
    .hero-aside { gap: 12px; flex-direction: column; align-items: flex-start; }
    .jaguar svg { height: min(5vh, 45px); }
    .side-mark svg { height: 10px; }
    .hero-side { font-size: 10px; }
    .hero-emblems svg { height: min(15vh, 125px); }
    .vase svg { height: 44px; }
  }


  /* ---------- SITE FOOTER ---------- */
  .site-footer { background: var(--clay); color: #FCE3D1; padding: 80px 56px 40px; }
  .ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; }
  .ft-logo svg { width: 200px; height: auto; display: block; margin-bottom: 32px; }
  .ft-news input { width: 100%; max-width: 340px; background: transparent; border: 1px solid #FCE3D1; color: #FCE3D1; padding: 14px 16px; font-size: 14px; font-family: inherit; }
  .ft-news input::placeholder { color: #FCE3D1; opacity: 0.8; }
  .ft-news button { display: block; margin-top: 20px; background: none; border: none; border-bottom: 1px solid #FCE3D1; color: #FCE3D1; padding: 0 0 6px; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: var(--track); }
  .ft-news .done { font-size: 13px; }
  .ft-social { display: flex; gap: 36px; margin-top: 40px; }
  .ft-social a { color: #FCE3D1; display: flex; }
  .ft-social a:hover, .ft-col a:hover, .ft-col button:hover, .ft-news button:hover { opacity: 0.7; }
  .ft-col h3 { font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: var(--track); margin-bottom: 28px; }
  .ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  .ft-col li, .ft-col a, .ft-col button { font-size: 11px; text-transform: uppercase; letter-spacing: var(--track); color: #FCE3D1; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; text-align: left; }
  .ft-bottom { margin-top: 72px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; opacity: 0.8; }
  @media (max-width: 800px) {
    .site-footer { padding: 56px 24px 32px; }
    .ft-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
    .ft-first { grid-column: 1 / -1; }
  }

  /* ---------- FIXED HEADER ---------- */
  .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 28px 20px; color: #FCE3D1; background: transparent; border-bottom: 1px solid transparent; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; will-change: transform; }
  .site-header.solid { background: rgba(255, 255, 255, 0.97); color: var(--strong); border-bottom-color: var(--line); }
  .no-hero { padding-top: var(--header-h, 110px); }

  /* ---------- PAGE HEADER IMAGE + TITLE BAR ---------- */
  .page-hero { position: relative; height: 47vh; min-height: 280px; overflow: hidden; background: var(--tint); }
  .page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Soft shade at the top so the light menu stays readable on bright photos */
  .page-hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)); pointer-events: none; }
  .title-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 28px; border-bottom: 1px solid var(--line); }
  .title-bar h1 { grid-column: 2; font-size: 14px; font-weight: 300; color: var(--strong); text-transform: uppercase; letter-spacing: var(--track); margin-right: calc(-1 * var(--track)); }
  .title-bar .tb-left { grid-column: 1; grid-row: 1; display: flex; gap: 12px; align-items: center; }
  .title-bar .tb-right { grid-column: 3; justify-self: end; font-size: 13px; }
  .view-toggle { background: none; border: none; padding: 2px; cursor: pointer; color: var(--line); display: flex; }
  .view-toggle.active, .view-toggle:hover { color: var(--strong); }

  /* Shop title + filters stick under the header once they reach it */
  .shop-sticky { position: sticky; top: calc(var(--header-h, 110px) - 1px); z-index: 40; background: var(--bg); }

  /* ---------- SHOP GRID (1px gaps, left aligned text) ---------- */
  .filter-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; padding: 22px 28px; border-bottom: 1px solid var(--line); }
  .filter-row button { background: none; border: none; border-bottom: 1px solid transparent; padding: 0 0 4px; cursor: pointer; font-size: 13px; color: var(--text); }
  .filter-row button.active, .filter-row button:hover { color: var(--strong); border-bottom-color: var(--strong); }
  .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
  .shop-grid .shop-item { box-shadow: 0 0 0 1px var(--line); background: var(--bg); display: flex; flex-direction: column; }
  .shop-grid .frame { margin-bottom: 0; }
  .item-text { padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text); }
  .item-text .name { color: var(--strong); }
  .shop-grid.small { grid-template-columns: repeat(6, 1fr); }
  .shop-grid.small .item-text { display: none; }
  .shop-grid.small .tag { font-size: 9px; padding: 2px 5px; top: 6px; left: 6px; }
  .shop-grid.also { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 800px) {
    .hero-body { grid-template-columns: 1fr; }
    .hero-right { order: -1; }
    .hero-text { margin-left: 0; }
    .preview-grid { grid-template-columns: 1fr 1fr; }
    .preview-grid img:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 5; }
    .shop-band .inner, .about-intro, .product, .contact-layout { grid-template-columns: 1fr; }
    .lists { grid-template-columns: 1fr; }
    .shop-grid, .shop-grid.also { grid-template-columns: repeat(2, 1fr); }
    .shop-grid.small { grid-template-columns: repeat(3, 1fr); }
    .title-bar { grid-template-columns: auto 1fr auto; }
    .page-hero { height: 37vh; min-height: 215px; }
    .product-info { position: static; }
    .shop-footer { grid-template-columns: 1fr 1fr; }
    .shop-footer .vat { justify-self: start; grid-column: 1 / -1; }
  }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- PUBLISHED SITE ADDITIONS ---------- */
.coming-soon { text-align: center; padding: 64px 0 32px; font-size: 12px; text-transform: uppercase; letter-spacing: var(--track); color: var(--strong); }
.text-page { max-width: 640px; margin: 0 auto; }
.text-page p { margin-bottom: 16px; line-height: 1.7; }
.text-page a, .contact-form .small-note a, .ft-col a, .ft-news a, .notify a { color: inherit; }
.ft-col li a { text-decoration: none; }
.frame picture, .main-photo picture, .photo-thumbs picture { display: contents; }
.m-col picture { display: block; }
button:disabled { opacity: 0.5; cursor: default; }