/* La Boite à Lumière, Montpellier photo studio & lab
   Treatment B (two-colour poster), revised a third time on direct operator
   instruction: no photographs on the page for now, only designed
   placeholders (the hero and both work samples that used to carry real
   harvested photos are now slots, matching the one placeholder the page
   already had) - and a gray panel band, lifted from the actual observed
   shelving/wall grey (#C8C4BC), inserted between sections so the page reads
   as considered spaces rather than one continuous scroll. Ink/paper base,
   one blue-grey accent (#3f5966, deepened from the observed #8A9BA8 wall)
   used only for tappable things, and one second-colour rule lifted from the
   actual roofline of the shopping centre (#E07A3A) used purely as a
   decorative stripe, never as a CTA colour. Hard-edged rectangles, hairline
   dividers, tracked uppercase - no shadows, no gradients, no rounded cards -
   except in the "travail" section, where the placeholder cards are turned a
   couple of degrees off true, because the product this business sells is a
   printed photograph, even before the photograph itself is in hand. A
   viewfinder-corner motif (drawn in CSS, no image) repeats on the hero slot
   and before every heading, tying that one departure back to the rest of
   the page. */

:root {
  --paper: #faf8f5;
  --ink: #1a1a1a;
  --line: #ddd7ca;
  --accent: #3f5966;      /* deepened from the observed #8a9ba8 wall colour, for AA contrast on paper */
  --accent-soft: #8a9ba8; /* the actual observed hex, decorative only */
  --fascia: #e07a3a;      /* observed roofline stripe, CC Mas Drevon exterior - decorative only, never a CTA colour */
  --grey: #c8c4bc;        /* observed interior slatwall/shop-wall grey, used to separate sections */
  --panel: #f0ede7;       /* --grey lightened toward paper, for panel backgrounds */

  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 2rem;
  --sp-4: 4rem;

  --fs-display: clamp(2.75rem, 10vw, 5.25rem);
  --fs-tagline: clamp(1.1rem, 4.5vw, 1.75rem);
  --fs-heading: clamp(1.4rem, 4vw, 2.1rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-eyebrow: 0.8rem;

  --measure: 34rem;
}

@font-face {
  font-family: 'Studio Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/dancingscript-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Studio Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Studio Sans';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/montserrat-900.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Studio Sans', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

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

.wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--sp-2);
}

/* ---- awning stripe: the one detail lifted straight off their roofline ---- */
.awning-stripe {
  height: 6px;
  background: var(--fascia);
}

/* ---- header ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 3px 0 -2px var(--line);
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  font-weight: 900;
  min-height: 44px;
  padding: 0.4em 0;
}
.brand-mark img { width: 2.25rem; height: 2.25rem; }
.brand-mark span { font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1em;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-weight: 900;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  min-height: 44px;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.header-call:hover { background: var(--ink); color: var(--paper); }

/* ---- hero: two hard-edged rectangles, no gap ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}
.hero-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink);
}
/* hero-photo--slot: no photograph placed yet, on direct operator
   instruction - a designed placeholder in the observed shelving grey,
   rather than an empty box, so the space still reads as considered */
.hero-photo--slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(200, 196, 188, 0.16) 0px,
    rgba(200, 196, 188, 0.16) 2px,
    transparent 2px,
    transparent 16px
  );
}
.hero-photo--slot .slot-mark--large {
  font-family: 'Studio Script', cursive;
  font-size: clamp(3rem, 9vw, 4.5rem);
  color: var(--grey);
  line-height: 1;
}
.hero-photo-caption {
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--paper);
  opacity: 0.75;
  max-width: 14rem;
}
/* viewfinder corner marks: the one drawn motif, repeated small before every
   section heading below - a mark from the trade itself, not decoration for
   its own sake */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--paper), var(--paper)) top left / 24px 2px no-repeat,
    linear-gradient(var(--paper), var(--paper)) top left / 2px 24px no-repeat,
    linear-gradient(var(--paper), var(--paper)) top right / 24px 2px no-repeat,
    linear-gradient(var(--paper), var(--paper)) top right / 2px 24px no-repeat,
    linear-gradient(var(--paper), var(--paper)) bottom left / 24px 2px no-repeat,
    linear-gradient(var(--paper), var(--paper)) bottom left / 2px 24px no-repeat,
    linear-gradient(var(--paper), var(--paper)) bottom right / 24px 2px no-repeat,
    linear-gradient(var(--paper), var(--paper)) bottom right / 2px 24px no-repeat;
  opacity: 0.85;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  animation: rise 450ms ease-out both;
}
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.hero-text h1 {
  font-family: 'Studio Script', cursive;
  font-weight: 700;
  font-size: var(--fs-display);
  color: var(--ink);
}
.tagline {
  font-family: 'Studio Sans', Arial, sans-serif;
  font-weight: 900;
  font-size: var(--fs-tagline);
  text-transform: uppercase;
  letter-spacing: 0.35em;
  padding: 0.5em 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  width: fit-content;
}
.hero-sub {
  max-width: var(--measure);
  font-size: 1.05rem;
}
.signature {
  font-family: 'Studio Script', cursive;
  font-size: 1.15rem;
  color: var(--accent);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- info bar: address / call / hours, as bordered cells ---- */
.info-bar {
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .info-bar { grid-template-columns: 1fr 1fr 1fr; }
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .info-item { border-bottom: none; border-right: 1px solid var(--line); }
  .info-item:last-child { border-right: none; }
}
.info-label {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 900;
}
.call-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms ease-out, transform 160ms ease-out;
}
.call-button:hover { background: var(--ink); transform: translateY(-1px); }

/* directions link: underline text, but a real 44px tap target via padding
   rather than visible size - display:inline-block + vertical padding keeps
   it looking like a plain link while making the whole row tappable */
.directions-link {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  min-height: 44px;
  transition: color 160ms ease-out;
}
.directions-link:hover { color: var(--accent); }

/* ---- generic sections ---- */
section { padding: var(--sp-4) 0; }

/* ---- panel: the gray band that separates a content section from the
   plain paper either side of it, in the observed shelving/wall grey rather
   than a generic mid-gray - a hairline top and bottom rule plus a barely-off-
   paper fill, so the space reads as its own room without going dark like
   the vitrine block ---- */
.panel {
  background-color: var(--panel);
  border-top: 1px solid var(--grey);
  border-bottom: 1px solid var(--grey);
}
.section-head {
  font-family: 'Studio Sans', Arial, sans-serif;
  font-weight: 900;
  font-size: var(--fs-heading);
  margin-bottom: var(--sp-3);
}
.section-head::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.4em;
  vertical-align: middle;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 55% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 55% no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 55% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 55% no-repeat;
}

/* ---- services: two hard-bordered rectangles, numbered like a price tag ---- */
.services-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}
.service-card {
  background: var(--paper);
  padding: var(--sp-3);
}
.service-card .numeral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--ink);
  font-size: var(--fs-small);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-1);
}
.service-card h3 {
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.service-card ul { display: flex; flex-direction: column; gap: 0.6em; }
.service-card li {
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--line);
}
.service-card li:last-child { border-bottom: none; padding-bottom: 0; }
.service-note {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--accent);
}

/* ---- travail: their own work, shown as prints laid on a table - the one
   place on the page the flat two-colour system gives way to something
   physical, because the studio's actual product is a printed photograph.
   One large print, two smaller ones overlapping it slightly, each turned
   a couple of degrees off true. Confined to this section only, so the rest
   of the page keeps its hard edges. ---- */
.print-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "large large"
    "small-a small-b";
  gap: var(--sp-4) var(--sp-3);
  padding-top: var(--sp-1);
}
@media (min-width: 700px) {
  .print-table {
    grid-template-columns: 1.3fr 1fr;
    grid-template-areas:
      "large small-a"
      "large small-b";
    gap: var(--sp-3);
  }
}
.print {
  margin: 0;
  min-width: 0;
  background: var(--paper);
  padding: 10px 10px 2.2em;
  border: 1px solid var(--line);
  box-shadow: 0 14px 26px -16px rgba(26, 26, 26, 0.4);
}
.print--large { grid-area: large; transform: rotate(-1.2deg); }
.print--a { grid-area: small-a; transform: rotate(-2.5deg); align-self: end; }
.print--b { grid-area: small-b; transform: rotate(2deg); }
.print img {
  display: block;
  width: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}
.print--large img { aspect-ratio: 1 / 1; }
.print--a img, .print--b img { aspect-ratio: 4 / 5; }
.print figcaption {
  font-family: 'Studio Script', cursive;
  font-size: 1.05rem;
  color: var(--ink);
  text-align: center;
  padding-top: 0.5em;
}
/* ---- print--slot: a designed placeholder, same physical card as a real
   print - dashed edge instead of a photo, a diagonal hatch lifted from the
   same texture as the vitrine band, and the studio's own initials so it
   reads as reserved rather than broken ---- */
.print--slot {
  border: 1px dashed var(--ink);
  box-shadow: none;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(63, 89, 102, 0.08) 0px,
    rgba(63, 89, 102, 0.08) 2px,
    transparent 2px,
    transparent 13px
  );
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5em;
}
.print--large.print--slot { aspect-ratio: 16 / 10; }
.print--slot .slot-mark {
  font-family: 'Studio Script', cursive;
  font-size: 2rem;
  color: var(--accent);
}
.print--slot figcaption { padding-top: 0; }
.print--slot figcaption strong {
  display: block;
  font-family: 'Studio Sans', Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-small);
}
.print--slot .slot-note {
  display: block;
  margin-top: 0.4em;
  font-size: var(--fs-small);
  color: var(--accent);
  max-width: 13rem;
}
.travail-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.travail-text p { max-width: var(--measure); }
.insta-callout {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--ink);
  width: fit-content;
  text-decoration: none;
  transition: background-color 160ms ease-out, color 160ms ease-out;
  min-height: 44px;
}
.insta-callout:hover { background: var(--ink); color: var(--paper); }
.insta-callout svg { width: 1.6em; height: 1.6em; flex-shrink: 0; }
.insta-callout span { font-weight: 900; text-transform: uppercase; font-size: var(--fs-small); letter-spacing: 0.05em; }

/* ---- vitrine: inverted colour block, real quote from their own window,
   subtle horizontal-line texture lifted from the wood-slat wall behind
   their shop window (#8A9BA8), at low opacity so it reads as material,
   not decoration ---- */
.vitrine {
  background-color: var(--ink);
  background-image: repeating-linear-gradient(
    0deg,
    rgba(138, 155, 168, 0.12) 0px,
    rgba(138, 155, 168, 0.12) 1px,
    transparent 1px,
    transparent 14px
  );
  color: var(--paper);
}
.vitrine .eyebrow { color: var(--accent-soft); text-align: center; display: block; }
.vitrine blockquote {
  font-family: 'Studio Script', cursive;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  max-width: var(--measure);
  margin: 0.4em auto 0;
  text-align: center;
}
.vitrine .cite {
  display: block;
  margin-top: var(--sp-2);
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* ---- location ---- */
.location-grid {
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 700px) { .location-grid { grid-template-columns: 1fr 1fr; } }
.location-block p + p { margin-top: 0.8em; }
.accessible-note {
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  font-size: var(--fs-small);
}
.practical-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: var(--sp-2);
}
.practical-tags li {
  padding: 0.4em 0.8em;
  border: 1px solid var(--ink);
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
}

/* ---- channels ---- */
.channels {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.channel-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  min-height: 44px;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.channel-link:hover { background: var(--ink); color: var(--paper); }
.channel-link svg { width: 1.3em; height: 1.3em; flex-shrink: 0; }

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-3) 0;
  font-size: var(--fs-small);
}
.footer-grid {
  display: grid;
  gap: var(--sp-2);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.footer-grid a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer-note { margin-top: var(--sp-2); color: var(--accent); }

/* ---- legal page ---- */
.legal h1 {
  font-family: 'Studio Sans', Arial, sans-serif;
  font-weight: 900;
  font-size: var(--fs-heading);
  margin-bottom: var(--sp-3);
}
.legal .section-head { margin-top: var(--sp-3); margin-bottom: var(--sp-2); font-size: 1rem; }
.legal p { margin-bottom: var(--sp-2); max-width: var(--measure); }
.legal-note {
  font-size: var(--fs-small);
  color: var(--accent);
  font-style: italic;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-text { animation: none; }
  * { transition-duration: 0.001ms !important; }
}

/* ---- print ---- */
@media print {
  .awning-stripe, .site-header, .call-button, .channels, .vitrine, .hero-photo, .print, .insta-callout { display: none; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after, a[href^="tel"]::after, a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
  section { padding: 1rem 0; }
}