@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
body.is-locked { overflow: hidden; }
/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   Calderimi — type-led boutique.
   There is no product photography to work with, so the page is
   built from type, rules and space rather than pretending
   otherwise. Warm paper, ink, one clay accent.
   ============================================================ */
:root {
  --paper:   #faf7f2;
  --paper-2: #f2ece2;
  --card:    #ffffff;
  --ink:     #1a1614;
  --body:    #524a44;
  --dim:     #6d635b;
  --clay:    #9c5a3c;
  --clay-2:  #7c4529;
  --clay-pale:#f4e7de;
  --hair:    #e2d9cc;

  --display: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --wrap: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body { background:var(--paper); color:var(--body); font-family:var(--sans); font-weight:300; font-size:1.05rem; line-height:1.78;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--clay-2); text-underline-offset:4px; }
a:hover { color:var(--ink); }
h1,h2,h3 { font-family:var(--display); font-weight:500; color:var(--ink); line-height:1.16; letter-spacing:-.015em; }
:focus-visible { outline:2px solid var(--clay); outline-offset:4px; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:300; background:var(--ink); color:var(--paper); padding:.7rem 1.2rem; font-size:.85rem; text-decoration:none; }
.skip-link:focus { top:1rem; color:var(--paper); }
.eyebrow { display:block; font-size:.68rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase; color:var(--clay-2); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(250,247,242,.94); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease); }
.site-header.is-stuck { border-bottom-color:var(--hair); }
.header-inner { display:flex; align-items:center; gap:1.5rem; min-height:78px; position:relative; }
.brand { margin-right:auto; display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:34px; width:auto; }
.nav { display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.25rem); }
.nav a { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding-block:.4rem; position:relative; }
.nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="true"]::after { transform:scaleX(1); }
.nav-toggle { display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:23px; height:1px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:23px; height:1px; background:var(--ink); transition:transform .3s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top:-7px; } .nav-toggle span::after { top:7px; }
.site-header.is-open .nav-toggle span { background:transparent; }
.site-header.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.site-header.is-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
@media (max-width:820px) {
  .nav-toggle { display:inline-flex; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-top:1px solid var(--hair); padding:0 var(--gutter) 1.25rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--ease), visibility .35s; }
  .site-header.is-open .nav { max-height:70vh; visibility:visible; overflow-y:auto; }
  .nav a { font-size:.9rem; padding:1rem 0; border-bottom:1px solid var(--hair); }
  .nav a::after { display:none; }
}

/* ---------- Opening ---------- */
.opening { padding-block:clamp(3.5rem,10vw,7rem) clamp(3rem,8vw,5.5rem); text-align:center; }
.opening img.mark { height:clamp(64px,13vw,120px); width:auto; margin:0 auto clamp(1.5rem,4vw,2.5rem); }
.opening h1 { font-size:clamp(1.7rem,4.4vw,3rem); max-width:19ch; margin-inline:auto; }
.opening p { margin:1.3rem auto 0; max-width:46ch; }
.opening .where { margin-top:2.5rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim); }

/* ---------- Category index ---------- */
.section { padding-block:clamp(3rem,8vw,6rem); }
.section--paper2 { background:var(--paper-2); }
.sec-head { max-width:46rem; margin-bottom:clamp(1.75rem,4vw,2.75rem); }
.sec-head h2 { margin-top:1rem; font-size:clamp(1.6rem,3.6vw,2.4rem); }
.sec-head p { margin-top:.9rem; }

.index { border-top:1px solid var(--hair); }
.index li { list-style:none; border-bottom:1px solid var(--hair); }
.index .row { display:grid; grid-template-columns:3.5rem 1fr auto; gap:1.25rem; align-items:baseline; padding:1.15rem 0; }
.index .n { font-family:var(--display); font-size:.8rem; color:var(--clay); letter-spacing:.08em; }
.index .name { font-family:var(--display); font-size:clamp(1.25rem,3vw,1.9rem); color:var(--ink); }
.index .sub { font-size:.85rem; color:var(--dim); text-align:right; }
@media (max-width:620px) { .index .row { grid-template-columns:2.5rem 1fr; } .index .sub { grid-column:2; text-align:left; margin-top:-.4rem; } }

/* ---------- Detail band ---------- */
.band { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.band > div { background:var(--card); padding:1.6rem 1.7rem; }
.band svg { width:22px; height:22px; stroke:var(--clay); fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.85rem; }
.band h3 { font-size:1.05rem; }
.band p { margin-top:.35rem; font-size:.9rem; color:var(--dim); }

/* ---------- Visit ---------- */
.visit { text-align:center; }
.visit h2 { font-size:clamp(1.8rem,4.6vw,3rem); }
.visit .addr { margin-top:1.4rem; font-family:var(--display); font-size:clamp(1.15rem,2.6vw,1.6rem); color:var(--ink); }
.visit .lines { margin-top:2rem; display:grid; gap:.55rem; justify-items:center; }
.visit .lines a { font-family:var(--display); font-size:clamp(1.2rem,3vw,1.75rem); color:var(--ink); text-decoration:none; }
.visit .lines a:hover { color:var(--clay-2); }
.social { display:flex; gap:.6rem; justify-content:center; margin-top:2.25rem; }
.social a { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--hair); padding:.6rem 1.2rem; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-decoration:none; transition:border-color .2s var(--ease), color .2s var(--ease); }
.social a:hover { border-color:var(--clay); color:var(--clay-2); }
.social svg { width:15px; height:15px; fill:currentColor; }

/* ---------- Footer ---------- */
.site-footer { padding-block:2.25rem; font-size:.78rem; letter-spacing:.06em; color:var(--dim); border-top:1px solid var(--hair); }
.footer-inner { display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between; }
.site-footer img { height:26px; width:auto; }
.footer-links { display:flex; gap:1.4rem; list-style:none; flex-wrap:wrap; }
.site-footer a { color:var(--ink); text-decoration:none; }
.site-footer a:hover { color:var(--clay-2); }
.visit .mt-h { margin-top:1rem; }