/* ==========================================================================
   LEMOND studio
   Mobile-first. All base values are taken 1:1 from the Figma frames
   (403 × 874). Larger screens scale type and gutters in the media queries
   at the bottom.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+2192;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-400-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #000;
  --paper: #fff;
  --sheet: #f5f5f5;
  --placeholder: #d9d9d9;

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* type scale (Figma px) */
  --t-display: 24px;   /* menu */
  --t-lead: 20px;      /* intro, labels, CTAs, titles */
  --t-list: 20px;      /* bullet lists */
  --t-ui: 14px;        /* top bar, meta, body copy */
  --t-small: 12px;     /* accordion copy */

  --lh-serif: 1.3;     /* = Instrument Serif "normal" (990 + 310) */
  --lh-sans: 1.21;     /* = Inter "normal" */

  /* layout */
  --edge: 16px;        /* one page margin: top, bottom, left, right (mobile + desktop) */
  --gutter: var(--edge);
  --top: var(--edge);
  --content-top: 38px; /* top bar bottom → first content line (81px in Figma) */
  --label-col: 144px;  /* "Approach:" column, bullets start at x = 160 */
  --list-indent: 30px;
  --logo-inset: var(--edge);
  --logo-bottom: var(--edge);
  --logo-h: calc((100vw - 2 * var(--edge)) * 65 / 381); /* logo is 381 × 65 */
  --logo-gap: 31px;    /* CTA row → logo */
  --sheet-inset: 5px;
  --sheet-radius: 11px;
  --sheet-pad: 11px;
  --sheet-gap: 11px;   /* sheet bottom → logo top */
  --text-max: 366px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-ui);
  line-height: var(--lh-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
p, h1, h2, h3, ul { margin: 0; }
h1, h2, h3 { font-weight: 400; font-size: inherit; }
ul { padding: 0; }

a { color: inherit; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.u,
a.u,
button.u {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}
a:not(.u) { text-decoration: none; }
@media (hover: hover) {
  .u:hover { text-decoration: none; }
  a.plain:hover { text-decoration: underline; }
}

.serif { font-family: var(--serif); font-weight: 400; line-height: var(--lh-serif); }
.t-display { font-size: var(--t-display); }
.t-lead { font-size: var(--t-lead); }
.t-list { font-size: var(--t-list); }
.t-ui { font-family: var(--sans); font-size: var(--t-ui); line-height: var(--lh-sans); }
.t-small { font-family: var(--sans); font-size: var(--t-small); line-height: var(--lh-sans); }
.caps { text-transform: uppercase; }

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

/* --------------------------------------------------------------------------
   Screen skeleton: top bar · content · footer (CTA + logo)
   -------------------------------------------------------------------------- */

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--top) var(--gutter) 0;
  font-size: var(--t-ui);
  line-height: var(--lh-sans);
  position: relative;
  z-index: 3;
}
.topbar__label { text-transform: uppercase; }
.topbar__menu { margin-left: auto; }

.content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: var(--content-top) var(--gutter) 0;
}

.intro { max-width: var(--text-max); }

.footer {
  padding-top: 24px;
  /* keep the last line of content clear of the fixed logo */
  padding-bottom: calc(var(--logo-h) + var(--logo-bottom));
  position: relative;
}

.cta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 0 var(--gutter);
  margin-bottom: var(--logo-gap);
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: var(--lh-serif);
  white-space: nowrap;
}

.logo-wrap {
  position: fixed;
  left: var(--logo-inset);
  right: var(--logo-inset);
  bottom: var(--logo-bottom);
  z-index: 4;
}
.logo {
  display: block;
  width: 100%;
  aspect-ratio: 381 / 65;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.home {
  height: 100vh;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
}
.home .topbar { flex: 0 0 auto; }
.home__tagline {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.home__media {
  position: relative;
  flex: 0 0 auto;
  height: 50.9%;           /* 445 / 874 */
  overflow: hidden;
  background: var(--placeholder);
}
.home__media img,
.home__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* --------------------------------------------------------------------------
   Menu overlay
   -------------------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}
.menu__nav {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px var(--gutter) 24px;
  text-align: center;
}
.menu__nav a { display: inline-block; }
.menu__nav .menu__spacer { height: calc(var(--t-display) * var(--lh-serif)); }
.menu .logo-wrap { opacity: .08; }
.menu__nav { padding-bottom: calc(var(--logo-h) + var(--logo-bottom) + 24px); }
html.menu-open, html.menu-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Label + list rows (Service, Scent Lab)
   -------------------------------------------------------------------------- */

.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  align-items: start;
}
.row__label { font-family: var(--serif); font-size: var(--t-lead); line-height: var(--lh-serif); }

.bullets {
  list-style: disc;
  padding-left: var(--list-indent);
  font-family: var(--serif);
  font-size: var(--t-list);
  line-height: var(--lh-serif);
}
.bullets li::marker { font-size: .7em; }
.bullets a,
.bullets button { display: inline; }

/* Service page geometry: first row at y = 303, second row at y = 477 */
.service .rows { margin-top: 128px; row-gap: 70px; }

/* Scent Lab geometry: rows sit near the bottom, 51px above the CTA */
.scent .rows { margin-top: auto; padding-top: 96px; row-gap: 108px; }
.scent .footer { padding-top: 47px; }

/* While a sheet is open the lists underneath are hidden (as in the design) */
.scent.has-sheet .rows,
.scent.has-sheet .footer > .cta { visibility: hidden; }

/* Accordion (Service) */
.acc__item + .acc__item { margin-top: 0; }
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.acc__panel > div { overflow: hidden; }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__text {
  max-width: 198px;
  padding: 7px 0 26px;
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: var(--lh-sans);
}
.acc__trigger[aria-expanded="true"] { text-decoration: none; }

/* --------------------------------------------------------------------------
   Sheet (Scent Lab details, Legal)
   -------------------------------------------------------------------------- */

.sheet {
  position: absolute;
  left: calc(var(--sheet-inset) - var(--logo-inset));
  right: calc(var(--sheet-inset) - var(--logo-inset));
  bottom: calc(100% + var(--sheet-gap));
  z-index: 5;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - var(--logo-h) - var(--logo-bottom) - var(--sheet-gap) - 60px);
  overflow-y: auto;
  padding: 9px var(--sheet-pad) 16px;
  background: var(--sheet);
  border-radius: var(--sheet-radius);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s ease, transform .3s ease;
}
.sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.sheet__close { flex: none; }
.sheet__tagline { max-width: var(--text-max); }
.sheet__body { max-width: var(--text-max); margin-top: 34px; }
.sheet__body p + p { margin-top: 17px; }
.sheet__tagline + .sheet__body { margin-top: 51px; }
.sheet__cta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: auto;
  padding-top: 50px;
  padding-right: 4px;
  white-space: nowrap;
}

/* Legal sheet (Imprint) */
.sheet--legal { min-height: 464px; padding-bottom: 19px; }
.sheet--legal .legal { margin-top: auto; padding-top: 48px; }
.legal h2 { margin-bottom: 19px; }
.legal__block + h2 { margin-top: 32px; }
.legal__block { margin-right: -6px; }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact .content { padding-left: var(--gutter); }
.contact__social { max-width: var(--text-max); }
.contact__list { margin-top: auto; padding-top: 96px; }
.contact__list h2 { margin-bottom: 19px; }
.contact__list .t-small + h2 { margin-top: 47px; }
.contact .footer { padding-top: 63px; }
.contact .cta { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   Archive
   -------------------------------------------------------------------------- */

.archive .content { padding-left: var(--gutter); padding-right: var(--gutter); }
.archive__list { list-style: none; margin-top: 20px; }
.project-card {
  border-top: 1px solid var(--ink);
  padding: 18px 0 19px;
}
.project-card[hidden] { display: none; }
.project-card a {
  display: grid;
  grid-template-columns: 50.4% minmax(0, 1fr);
  column-gap: 17px;
  align-items: start;
}
.project-card__img {
  aspect-ratio: 187 / 134;
  background: var(--placeholder);
  overflow: hidden;
}
.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
@media (hover: hover) {
  .project-card a:hover .project-card__img img { transform: scale(1.03); }
  .project-card a:hover .project-card__title { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
}
.project-card__meta p + p { margin-top: 17px; }
.archive__more {
  display: block;
  margin: 1px auto 0;
  text-align: center;
}
.archive__more[hidden] { display: none; }

/* Project detail */
.project__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.project__close { flex: none; padding-right: 4px; }
.project__client { margin-top: 0; }

.slider {
  position: relative;
  margin-top: 21px;
  aspect-ratio: 370 / 386;
  background: var(--placeholder);
}
.slider__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.slider__slide img,
.slider__slide video { width: 100%; height: 100%; object-fit: cover; }
.slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  opacity: .3;
  transition: opacity .2s ease;
  position: relative;
}
.slider__dot::after { content: ""; position: absolute; inset: -6px -3px; }
.slider__dot[aria-current="true"] { opacity: 1; }

.project__text { margin-top: 20px; max-width: 560px; }
.project__text > * + * { margin-top: 17px; }
.project__text a { text-decoration: underline; text-decoration-thickness: from-font; }
.project .cta { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Larger screens
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --t-display: 20px;   /* menu */
    --t-first: 24px;     /* first text section of each page */
    --t-lead: 24px;      /* everything else */
    --t-list: 20px;
    --t-ui: 14px;
    --t-small: 12px;
    --label-col: 34%;
    --text-max: 640px;
  }
  /* first text section stays 20px, the rest is 14px */
  .intro:not(div),
  div.intro > p:first-child,
  .contact__social,
  .home__tagline p,
  .project__head h1 { font-size: var(--t-first); }
  .acc__text { max-width: 320px; }
  .service .rows { margin-top: 160px; row-gap: 96px; }
  .project-card a { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: 24px; }
  .project__body { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 520px); column-gap: 32px; margin-top: 21px; }
  .project__body .slider { margin-top: 0; }
  .project__body .project__text { margin-top: 0; }
  .sheet { right: auto; width: min(640px, calc(100% - 2 * (var(--sheet-inset) - var(--logo-inset)))); }
  .sheet__body, .sheet__tagline { max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}