/* ---------------------------------------------------------------------------
   Studio Delgado

   Reference: the PALM ATELIER cover in photos/inspiration/. Not a mood
   reference — the actual specification for how this site should look and feel.
   What was taken from it:

     · High-key and bright. Bone, sand, blonde oak. A room at mid-morning with
       the shutters open. Never dusk, never charcoal.
     · A Didone display face (Playfair Display) for anything large — the high
       thick/thin contrast and hairline serifs of the PALM wordmark.
     · One secondary voice everywhere else: wide-tracked uppercase in a
       geometric sans, per ATELIER and the ARCHITECTURE | INTERIORS footer.
     · Warm taupe ink, never black. Black exists in the photograph only as
       hardware, so it exists here only as photography.

   Design brief behind it: a digital sanctuary, not a luxury interiors site.
   Quiet Presence, Material Storytelling, Human-Centered Beauty. The visitor
   should feel their shoulders drop.

   The vertical rhythm is deliberately slow: --step is the gap between sections
   and it is large on purpose. Pages are meant to scroll, not to fit.
   --------------------------------------------------------------------------- */

/* Self-hosted, no CDN. Playfair Display is the Didone display face — the high
   thick/thin contrast and hairline serifs of the reference wordmark. Jost is
   the geometric sans that carries the wide-tracked uppercase labels. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/jost-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jost-latin-400-normal.woff2") format("woff2");
}

:root {
  /* Bone, sand and blonde oak — read off the reference. High-key: the page
     should feel like a room at mid-morning with the shutters open, never dusk.
     Ink is warm taupe rather than black; true black appears nowhere, the same
     way it only shows up as hardware in the photograph. */
  --paper: #fbf8f3;
  --paper-sunk: #f4ede2;
  --ink: #3b342c;
  --ink-soft: #6a6055;
  --ink-faint: #74695c;
  --rule: #e9e0d2;
  --accent: #866646;

  --serif: "Playfair Display", Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Space. These are the whole design. */
  --step: clamp(7rem, 16vw, 14rem);      /* between major sections */
  --step-sm: clamp(3.5rem, 8vw, 6.5rem); /* within a section */
  --measure: 33rem;                       /* reading width */
  --wide: 78rem;
  --gutter: clamp(1.5rem, 7vw, 6rem);

  /* The wide tracking that sets the whole secondary voice. */
  --track: 0.24em;

  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);

  color-scheme: light;
}

/* Deliberately light-only. There is no dark mode: the whole point of the
   reference is a bright, high-key room, and a dark inversion is a different
   building. `color-scheme: light` is what stops the browser dark-theming the
   scrollbar and the before/after range input when the OS is set to dark. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.85;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Didone display. Large sizes get slightly tighter tracking so the hairlines
   read as one word rather than a row of letters. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); }

/* The wide-tracked uppercase voice — ATELIER, NATURAL BEAUTY, and the
   ARCHITECTURE | INTERIORS | LIFESTYLE rule along the foot of the reference.
   Everything secondary on the site speaks in this one style. */
.label,
.eyebrow,
.more,
.nav__links,
.card__meta,
.facts dt,
.ba__tag,
.pager__link span,
.footer__fine,
.principles__num {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-weight: 400;
}

.visually-hidden,
.skip:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip:focus {
  position: fixed;
  z-index: 100;
  top: 1rem; left: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1.1rem;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* --- Motion ---------------------------------------------------------------
   One effect only: photographs and headings settle into place as they enter.
   Slow (1.1s) and small (14px) so it reads as pacing, not animation. The
   .js-reveal class is added by site.js *only* when it is certain it can
   observe the elements, so a failed script or an old browser leaves
   everything visible.
   ------------------------------------------------------------------------- */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
}

.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Navigation -----------------------------------------------------------
   Deliberately not sticky. A bar that follows you down the page is a claim on
   attention; letting it scroll away hands the page to the photographs.
   ------------------------------------------------------------------------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 3rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) var(--gutter);
  max-width: var(--wide);
  margin-inline: auto;
}

/* The masthead. Didone caps, widely tracked — "PALM ATELIER" at small scale. */
.nav__mark {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* No underlines, no borders, no boxes — only a shift in weight of presence. */
.nav__links a {
  text-decoration: none;
  color: var(--ink-faint);
  transition: color 0.5s var(--ease);
}

.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }

/* --- Section scaffolding --------------------------------------------------- */

.section {
  padding: var(--step) var(--gutter);
  max-width: var(--wide);
  margin-inline: auto;
}

.section--quiet {
  background: var(--paper-sunk);
  max-width: none;
  padding-inline: 0;
}

.section__head {
  margin-bottom: var(--step-sm);
}

.section__title {
  margin-bottom: var(--step-sm);
}

.section__more {
  margin: var(--step-sm) 0 0;
}

/* A link that doesn't beg. */
.more {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.5s var(--ease);
  display: inline-block;
}

.more:hover { color: var(--accent); }

.more::after {
  content: " →";
  font-size: 0.9em;
}

.empty {
  color: var(--ink-faint);
  font-style: italic;
  max-width: var(--measure);
}

.empty code {
  font-style: normal;
  font-size: 0.9em;
  color: var(--ink-soft);
}

.pagehead {
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 7rem) var(--gutter) 0;
}

.pagehead--center {
  text-align: center;
  padding-bottom: var(--step);
}

/* Light weight and open leading — the airy caption voice of the reference. */
.pagehead p,
.lede {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-weight: 300;
  font-size: 1.15em;
  line-height: 1.8;
  margin: 2rem 0 0;
}

.pagehead--center .lede { margin-inline: auto; }

.eyebrow {
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

/* --- Home: hero -----------------------------------------------------------
   No scrim, no overlaid headline. The photograph is given the full frame and
   the words are set below it in open space. Text over a darkened photo is the
   house style of every luxury-interiors site; this is the opposite gesture.
   ------------------------------------------------------------------------- */

.hero__media img {
  width: 100%;
  height: clamp(24rem, 82vh, 52rem);
  object-fit: cover;
}

.hero__text {
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) 0;
}

.hero__text h1 { max-width: 18ch; }

.hero__intro {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin: 2rem 0 0;
}

.hero--bare .hero__text { padding-top: clamp(4rem, 12vw, 9rem); }

/* --- Projects -------------------------------------------------------------
   One project per row, full width, with a --step gap between them. Fewer
   things, each given room, rather than a grid of thumbnails.
   ------------------------------------------------------------------------- */

.grid {
  display: flex;
  flex-direction: column;
  gap: var(--step);
}

.card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.card__media { background: var(--paper-sunk); }

.card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card__placeholder {
  aspect-ratio: 3 / 2;
  background: var(--paper-sunk);
}

/* Text sits under the image, indented into the measure — a caption beneath a
   framed print rather than a label stuck on top of it. */
.card__text {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: var(--measure);
}

.card__text h3 {
  margin-bottom: 0.75rem;
  transition: color 0.5s var(--ease);
}

.card:hover h3 { color: var(--accent); }

.card__text p {
  margin: 0;
  color: var(--ink-soft);
}

.card__meta {
  margin-top: 1.25rem !important;
  color: var(--ink-faint) !important;
}

/* --- Prose ---------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
  margin: var(--step-sm) auto 0;
  padding-inline: var(--gutter);
  color: var(--ink-soft);
}

.prose--wide { max-width: calc(var(--measure) + 4rem); }

.prose > * + * { margin-top: 1.6em; }

.prose h2,
.prose h3 {
  color: var(--ink);
  margin-top: 2.6em;
}

.prose a {
  color: var(--ink);
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 4px;
}

.prose blockquote {
  margin-inline: 0;
  padding: 0;
  border: 0;
  font-family: var(--serif);
  font-size: 1.35em;
  line-height: 1.5;
  color: var(--ink);
  margin-block: 2.5em;
}

.prose img { margin-block: var(--step-sm); }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}

.prose code {
  font-size: 0.9em;
  color: var(--ink);
}

/* --- Project page ---------------------------------------------------------- */

.pagehead--project { padding-bottom: var(--step-sm); }

.project__cover img {
  width: 100%;
  max-height: 88vh;
  object-fit: cover;
}

/* A quiet ledger, not a spec sheet. Hairline rules only above and below. */
.facts {
  display: grid;
  gap: var(--step-sm) 3rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  max-width: var(--wide);
  margin: var(--step) auto 0;
  padding: var(--step-sm) var(--gutter);
  border-block: 1px solid var(--rule);
}

.facts dt {
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

.facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Materials — the sensory list. Set as running text, not chips or tags. */
.materials {
  max-width: var(--measure);
  margin: var(--step) auto 0;
  padding-inline: var(--gutter);
}

.materials h2 {
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}

.materials ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
}

.materials li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.materials li:last-child { border-bottom: 0; }

/* A single human line — what the room is actually for. */
.ritual {
  max-width: calc(var(--measure) + 6rem);
  margin: var(--step) auto;
  padding-inline: var(--gutter);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

/* --- Galleries ------------------------------------------------------------
   Two columns at most, and a lot of air. Photographs are not tiles.
   ------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--step-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
}

.shot { margin: 0; }

.shot img { width: 100%; }

.shot figcaption {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-faint);
  max-width: 38ch;
}

/* --- Before / after -------------------------------------------------------
   Labels sit beneath the frame rather than floating on the image in blurred
   pills. Same information, none of the interface.
   ------------------------------------------------------------------------- */

.ba { margin-bottom: var(--step); }

/* No-JS fallback: the two photographs simply stack. */
.ba__frame { display: grid; gap: var(--step-sm); }
.ba__layer { position: relative; }
.ba__control { display: none; }

.ba__tag {
  display: block;
  margin-top: 0.9rem;
  color: var(--ink-faint);
}

.ba--ready .ba__frame {
  display: block;
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}

.ba--ready .ba__layer { position: absolute; inset: 0; }
.ba--ready .ba__layer--after { position: relative; }

.ba--ready .ba__layer .pic,
.ba--ready .ba__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba--ready .ba__layer--before {
  --reveal: 50%;
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

/* Once the slider is live the labels return to the image, but as plain
   letterforms on the photograph — no pill, no blur, no shadow stack. */
.ba--ready .ba__tag {
  position: absolute;
  bottom: 1.25rem;
  margin: 0;
  color: rgba(250, 248, 244, 0.92);
  mix-blend-mode: difference;
}

.ba--ready .ba__tag--before { left: 1.5rem; }
.ba--ready .ba__tag--after { right: 1.5rem; }

.ba--ready .ba__handle {
  --reveal: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 1px;
  background: rgba(250, 248, 244, 0.85);
  pointer-events: none;
}

.ba--ready .ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(250, 248, 244, 0.85);
  border-radius: 50%;
}

.ba--ready .ba__control {
  display: block;
  margin-top: 1.5rem;
}

.ba__control input {
  width: 100%;
  accent-color: var(--accent);
}

/* --- Approach ------------------------------------------------------------- */

.pitch {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.pitch p {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin: 1.75rem 0 2.5rem;
}

/* Principles read as a numbered column, one thought at a time. */
.principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--step-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.principles li { max-width: var(--measure); }

.principles__num {
  display: block;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}

.principles h3 { margin-bottom: 0.75rem; }
.principles p { margin: 0; color: var(--ink-soft); }

/* --- Inspiration ---------------------------------------------------------- */

.moodboard {
  columns: 2 22rem;
  column-gap: var(--step-sm);
}

.mood {
  break-inside: avoid;
  margin: 0 0 var(--step-sm);
}

.mood img { width: 100%; }

.mood figcaption {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 38ch;
}

.mood figcaption strong {
  font-weight: 400;
  color: var(--ink);
}

.mood figcaption a { color: var(--ink-faint); }

/* --- Pager ---------------------------------------------------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--step) var(--gutter);
}

.pager__link {
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.2rem;
  max-width: 45%;
  transition: color 0.5s var(--ease);
}

.pager__link:hover { color: var(--accent); }
.pager__link--next { text-align: right; margin-left: auto; }

.pager__link span {
  display: block;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}

/* --- Footer ---------------------------------------------------------------
   The contact block. Reads as an invitation, not a call to action.
   ------------------------------------------------------------------------- */

.footer {
  background: var(--paper-sunk);
  padding: var(--step) var(--gutter) var(--step-sm);
  margin-top: var(--step);
}

.footer__inner {
  max-width: var(--wide);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-sm) 4rem;
  justify-content: space-between;
  align-items: start;
}

.footer__lead p {
  max-width: var(--measure);
  color: var(--ink-soft);
  margin: 1.75rem 0 0;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: var(--serif);
  font-size: 1.3rem;
}

.footer__contact a {
  color: var(--ink);
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 5px;
  transition: color 0.5s var(--ease);
}

.footer__contact a:hover { color: var(--accent); }

.footer__fine {
  max-width: var(--wide);
  margin: var(--step) auto 0;
  color: var(--ink-faint);
}