/* =========================================================
   kura — website styles
   Everything about the look (fonts, colours, spacing) lives here.
   ========================================================= */

/* ---------- FONT ----------
   "kura Marist" = the real Marist font.
   1) If Marist is installed on this computer, it is used.
   2) If the licensed files are in the "fonts" folder, everyone sees Marist.
   3) Otherwise visitors see Newsreader (free look-alike).            */
@font-face {
  font-family: "kura Marist";
  font-weight: 350;
  font-display: swap;
  src: local("ABC Marist Book"), local("ABCMarist-Book"),
       local("ABC Marist Unlicensed Trial Book"), local("ABCMaristUnlicensedTrial-Book"),
       url("fonts/ABCMarist-Book.woff2") format("woff2");
}
@font-face {
  font-family: "kura Marist";
  font-weight: 400;
  font-display: swap;
  src: local("ABC Marist Regular"), local("ABCMarist-Regular"),
       local("ABC Marist Unlicensed Trial Regular"), local("ABCMaristUnlicensedTrial-Regular"),
       url("fonts/ABCMarist-Regular.woff2") format("woff2");
}

/* Sizes scale with the window exactly like Cargo:
   the smaller of 1.08% of the width or 1.44% of the height */
html {
  font-size: min(1.08vw, 1.44vh);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #f5f5f5;
  color: rgba(0, 0, 0, 0.85);
  font-family: "kura Marist", "Newsreader", Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.35rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:active { opacity: 0.7; }

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

/* ---------- header (logo + menu) on inner pages ---------- */
.site-header {
  position: relative;
  padding: 1.5rem 1.5rem 0;
  height: 5.2rem;
}

.site-header .logo {
  position: absolute;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%);
  width: 4.6rem;
}

.site-header nav {
  position: absolute;
  right: 1.5rem;
  top: 3.3rem;
  display: flex;
  gap: 2.07rem;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 350;
  color: #000;
}

.site-header nav a.active { color: #000; }

main { padding: 1.5rem; }

/* ---------- home page ---------- */
body.home {
  background: #111 url("images/home-background.webp") center / cover no-repeat;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.home .logo {
  position: absolute;
  left: 50%;
  top: 2.95rem;
  transform: translateX(-50%);
  width: 8.47rem;
}

.home nav {
  position: absolute;
  left: 9.5rem;
  top: 36.9rem;
  display: flex;
  gap: 5rem;
  font-size: 1.68rem;
  line-height: 1.2;
  font-weight: 350;
  color: #fff;
}

/* ---------- archives: 6 columns of cards ---------- */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3.5rem;
  align-items: center;
}

/* ---------- geneva / barcelona: info + 4 photos per row ---------- */
.city-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
  align-items: start;
  margin-bottom: 0.8rem;
}
.city-row .info { grid-column: span 2; }

/* ---------- about ---------- */
.about p { margin: 0; }
.about .text {
  font-size: 1.35rem;
  line-height: 1.1;
}
.about .num { margin-bottom: 1.35rem; }

.about .free {
  display: flex;
  align-items: flex-start;
}

.about .block-1 { margin-top: 0; }
.about .gallery-1 { margin-top: 1.4rem; }
.about .gallery-1 img:nth-child(1) { width: 34.6%; }
.about .gallery-1 img:nth-child(2) { width: 23.9%; }

.about .two-col {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 0.1rem;
  margin-top: 0;
  align-items: start;
}
.about .two-col .text { padding-right: 0.5rem; }

.about .block-3 { margin-top: 2.5rem; margin-bottom: 0.4rem; }
.about .gallery-2 { margin-top: 0; }
.about .gallery-2 img:nth-child(1) { width: 23.2%; margin-left: 12.66%; position: relative; z-index: 1; }
.about .gallery-2 img:nth-child(2) { width: 26.59%; margin-left: -0.69%; position: relative; z-index: 2; }
.about .gallery-2 img:nth-child(3) { width: 20%; }

.about .gallery-3 { margin-top: 4.5rem; margin-bottom: 3rem; }
.about .block-4 { margin-bottom: 4rem; }
.contact-link { border-bottom: 1px solid currentColor; }
.about .gallery-3 img:nth-child(1) { width: 30.2%; }
.about .gallery-3 img:nth-child(2) { width: 11.19%; margin-left: 2.85%; }


/* ---------- one page per model ---------- */
.model {
  display: grid;
  grid-template-columns: 6fr 1fr 5fr;
  align-items: start;
  padding-top: 2rem;
}
.model-photos { grid-column: 1; }
.main-photo { width: 100%; max-width: 46rem; background: #e8e8e8; }
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.8rem;
}
.thumb {
  padding: 0; border: 0; background: none; cursor: pointer;
  width: 6.2rem; opacity: 0.55; transition: opacity .15s;
}
.thumb:hover, .thumb.is-on { opacity: 1; }
.thumb img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; }

.model-info {
  grid-column: 3;
  position: sticky;
  top: 2rem;
  font-size: 1.2rem;
  line-height: 1.35;
}
.model-info p { margin: 0 0 1.1rem; }
.model-info .crumb { color: rgba(0,0,0,.45); margin-bottom: 2rem; }
.model-info h1 {
  font-weight: 350;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  color: #000;
}
.model-info .price { font-size: 1.5rem; margin-bottom: 0.4rem; color: #000; }
.model-info .size { color: rgba(0,0,0,.6); margin-bottom: 1.8rem; }
.model-info .desc { max-width: 34rem; }
/* size picker, button, fold-out sections (ring pages) */
.sizes { margin-top: 2.2rem; max-width: 34rem; }
.sizes-label { margin-bottom: 0.9rem !important; }
.sizes-label.needs-size { color: #000; text-decoration: underline; }
.guide-toggle { margin-left: 0.8rem; border-bottom: 1px solid currentColor; }
.size-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.size-opt {
  font: inherit; color: inherit; background: none; cursor: pointer;
  min-width: 3.2rem; padding: 0.7rem 0.4rem;
  border: 1px solid transparent;
}
.size-opt:hover { border-color: rgba(0,0,0,.25); }
.size-opt.is-on { border-color: #000; color: #000; }
.size-guide { margin-top: 1.2rem; display: flex; gap: 0.8rem; align-items: flex-start; }
.size-guide img:first-child { width: 70%; }
.size-guide img:last-child { width: 26%; }

.buy { margin-top: 2rem; max-width: 34rem; }
.buy[hidden] { display: none; }
.buy-btn {
  display: block;
  text-align: center;
  font-size: inherit;
  color: #f5f5f5;
  background: #000;
  padding: 1.25rem 1rem;
  transition: opacity .15s;
}
.buy-btn:hover { opacity: 0.85; }
.buy .secure { margin-top: 0.8rem; color: rgba(0,0,0,.45); }

.acc { margin-top: 2.6rem; max-width: 34rem; border-top: 1px solid rgba(0,0,0,.85); }
.acc details { border-bottom: 1px solid rgba(0,0,0,.85); }
.acc summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between;
  padding: 1rem 0;
  color: #000;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; }
.acc details[open] summary::after { content: "–"; }
.acc details p { margin: 0 0 1rem !important; }
.acc details a { border-bottom: 1px solid currentColor; }

.model-nav {
  display: flex;
  justify-content: space-between;
  max-width: 34rem;
  margin-top: 3rem;
  color: rgba(0,0,0,.45);
}
.model-nav a:hover, .crumb a:hover { color: #000; }

/* =========================================================
   Phones and small screens
   ========================================================= */
@media (max-width: 768px) {
  html { font-size: 2.6vw; }
  body { font-size: 15px; }
  .about .text { font-size: 15px; }
  .model-info { font-size: 12px; }
  .model-info h1, .model-info .price { font-size: 15px; }
  .size-opt { min-width: 3.6rem; }

  .site-header { height: auto; padding: 1.2rem 1rem 0; text-align: center; }
  .site-header .logo { position: static; transform: none; margin: 0 auto; width: 7rem; }
  .site-header nav {
    position: static;
    justify-content: center;
    margin-top: 1.2rem;
    gap: 2.2rem;
    font-size: 15px;
  }
  main { padding: 1.2rem 1rem; }

  .home .logo { width: 9rem; top: 2rem; }
  .home nav {
    left: 0; right: 0; top: auto; bottom: 14%;
    justify-content: center;
    gap: 2.6rem;
    font-size: 15px;
  }

  .archive-grid { grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }

  .city-row { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 3rem; }
  .city-row .info { grid-column: auto; }


  .about .free { flex-direction: column; gap: 1rem; }
  .about .free img { width: 100% !important; margin-left: 0 !important; }
  .about .two-col { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .about .two-col .text { padding-top: 0; }
  .about .block-3 { margin-top: 3rem; margin-bottom: 1rem; }
  .about .gallery-3 { margin-top: 3rem; }

  .model { grid-template-columns: 1fr; padding-top: 0.5rem; }
  .model-info { grid-column: 1; position: static; margin-top: 2rem; }
  .model-info .crumb { margin-bottom: 1.4rem; }
  .thumb { width: calc((100% - 2.4rem) / 4); }
  .main-photo { max-width: none; }
}
.model-info .price + .desc { margin-top: 1.8rem; }
.model-info .ship { display: none; }
.thumbs:has(> :only-child) { display: none; }
.size-guide[hidden] { display: none; }

/* ring page info column: 20% smaller (computer screens) */
@media (min-width: 769px) {
  .model-info { zoom: 0.8; }
}
/* no blue outline after a mouse click (keyboard focus still visible) */
.model-info :focus:not(:focus-visible) { outline: none; }

/* city pages: "add to cart" hint on pieces you can buy online */
.city-row .info { position: relative; display: block; }
.shop-hint {
  position: absolute;
  left: 5%;
  top: 31%;
  width: 41%;
  aspect-ratio: 220 / 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.96rem;
  color: #000;
  border: 1px solid #000;
  transition: background .15s, color .15s;
}
.city-row .info:hover .shop-hint { background: #000; color: #f5f5f5; }
.shop-hint[hidden] { display: none !important; }
@media (max-width: 768px) { .shop-hint { font-size: 10px; } }

/* ring pages: sideways strip of Barcelona pieces */
.strip { padding: 4rem 1.5rem 3rem; }
.strip-title { margin: 0 0 1.4rem; font-size: 1.2rem; color: rgba(0,0,0,.45); }
.strip-row {
  display: flex;
  gap: 3.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.35) transparent;
}
.strip-card { flex: 0 0 calc((100% - 6 * 3.5rem) / 6.4); scroll-snap-align: start; }
.strip-card img { width: 100%; }
.strip-card:hover { opacity: 0.8; }
@media (max-width: 768px) {
  .strip { padding: 3rem 1rem 2rem; }
  .strip-title { font-size: 12px; }
  .strip-row { gap: 0.8rem; }
  .strip-card { flex-basis: 38%; }
}