/* ==========================================================================
   Julian Ribinik Studios
   Token layer + shared components.
   Palette sampled from the studio's own photography — see BUILD.md.
   No hex values below :root.
   ========================================================================== */

:root {
  /* --- Colour ---------------------------------------------------------- */
  /* Sampled from the studio's photography: shadows run red-shifted
     (#301818, #180000), never blue. Warm off-black, never pure #000. */
  --ink:          #14110F;
  --ink-soft:     #2A2521;
  --ink-mute:     #5C544C;

  /* Wedding galleries sample high-key silver: #C0C0C0 → #E0E0E0 */
  --paper:        #F2F0ED;
  --paper-warm:   #E8E4DE;
  --silver:       #A8A29B;
  --bone:         #DCD5CC;

  /* Mitzvah images sample warm amber: #402000, #604020, #806040 */
  --amber:        #8A5A2B;
  --amber-lift:   #A8703A;
  --rule-dark:    #3A332C;   /* hairline on the ink field */

  --white:        #FBFAF8;

  /* Semantic */
  --field:        var(--paper);
  --on-field:     var(--ink);
  --rule:         var(--bone);
  --accent:       var(--ink);

  --focus:        #1D5FD0;
  --error:        #9B2C1E;
  --success:      #2F6B42;

  /* --- Type ------------------------------------------------------------ */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Two sizes carry the page. Body floor 17px — the old site ran 10px. */
  --t-display:    clamp(2.75rem, 7vw, 7.25rem);   /*  44 → 116 */
  --t-h2:         clamp(2rem, 4.2vw, 3.75rem);    /*  32 → 60  */
  --t-h3:         clamp(1.375rem, 2vw, 1.75rem);  /*  22 → 28  */
  --t-body-lg:    clamp(1.1875rem, 1.5vw, 1.375rem);
  --t-body:       1.125rem;                        /*  18px     */
  --t-small:      1.0625rem;                       /*  17px floor */
  --t-label:      0.6875rem;                       /*  11px, uppercase only */

  --lh-display:   1.02;
  --lh-heading:   1.1;
  --lh-body:      1.7;
  --ls-display:   -0.03em;
  --ls-label:     0.18em;

  /* --- Space (8px base) ------------------------------------------------ */
  --s-1: 0.5rem;   --s-2: 1rem;    --s-3: 1.5rem;   --s-4: 2rem;
  --s-5: 3rem;     --s-6: 4rem;    --s-7: 6rem;     --s-8: 8rem;
  --s-9: 11.25rem;                                  /* 180px section pad */

  --pad-section:  var(--s-9);
  --pad-section-m: var(--s-7);                      /* 96px mobile */
  --gutter:       3rem;
  --measure:      62ch;
  --maxw:         84rem;

  /* --- Corner language: sharp 0px, held with no exceptions ------------- */
  --radius: 0;

  /* --- Motion ---------------------------------------------------------- */
  --e-reveal: cubic-bezier(0.16, 1, 0.30, 1);
  --e-mask:   cubic-bezier(0.76, 0, 0.24, 1);
  --e-micro:  cubic-bezier(0.33, 1, 0.68, 1);
  --d-micro:  240ms;
  --d-reveal: 900ms;
  --d-mask:   1200ms;

  /* --- Z-index scale --------------------------------------------------- */
  --z-base: 0;  --z-sticky: 200;  --z-overlay: 300;  --z-modal: 400;
}

/* Dark register — mitzvah pages and dark sections.
   Not an inverted light mode; the amber only lives here. */
.register-dark {
  --field:    var(--ink);
  --on-field: var(--paper);
  --rule:     var(--rule-dark);
  --accent:   var(--amber-lift);
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--field);
  color: var(--on-field);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

/* ==========================================================================
   Type
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 300;               /* light, never bold at large sizes */
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}
.display em { font-style: italic; }

.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-mute);
}
.register-dark .label { color: var(--silver); }

.lede  { font-size: var(--t-body-lg); line-height: 1.55; max-width: var(--measure); }
.body  { font-size: var(--t-body);    line-height: var(--lh-body); max-width: var(--measure); }
.body + .body { margin-top: var(--s-3); }
.mute  { color: var(--ink-mute); }
.register-dark .mute { color: var(--silver); }

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: var(--s-7); }

/* Asymmetric 8/4 held down the page */
.grid-84 {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--s-7);
  align-items: start;
}
.grid-48 {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--s-7);
  align-items: start;
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }

/* ==========================================================================
   SIGNATURE — the contact-sheet edge
   Drawn from Julian's street-photography background: the 35mm contact sheet.
   Frame notches + film-rebate sequence numbers on section dividers.
   ========================================================================== */

.sheet-rule {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-2);
  margin-bottom: var(--s-6);
  position: relative;
}
/* sprocket notches along the rule */
.sheet-rule::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    var(--on-field) 0, var(--on-field) 9px,
    transparent 9px, transparent 21px
  );
  opacity: 0.28;
}
.sheet-rule__num {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.register-dark .sheet-rule__num { color: var(--silver); }
.sheet-rule__title { flex: 1; }

/* Frame edge on imagery — the contact-sheet crop mark */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(20 17 15 / 0.10);
  pointer-events: none;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-reveal) var(--e-reveal);
}
@media (hover: hover) {
  a.frame:hover img, .frame-link:hover .frame img { transform: scale(1.04); }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--field) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-2);
}
.brand { display: block; flex-shrink: 0; }
.brand img { width: clamp(148px, 17vw, 208px); height: auto; }
.register-dark .brand .logo-dark,
.brand .logo-light { display: block; }
.register-dark .brand .logo-light,
.brand .logo-dark { display: none; }

.nav { display: flex; align-items: center; gap: var(--s-4); }
/* Close only exists inside the mobile overlay */
.nav-close { display: none; }
.nav a {
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 500;
  padding: var(--s-1) 0;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-micro) var(--e-micro);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  min-height: 44px;
}

/* ==========================================================================
   Buttons — sharp corners, no exceptions
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 48px;
  padding: 0.9rem 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--on-field);
  background: var(--on-field);
  color: var(--field);
  font-size: var(--t-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  cursor: pointer;
  transition: background var(--d-micro) var(--e-micro),
              color var(--d-micro) var(--e-micro),
              transform var(--d-micro) var(--e-micro);
}
/* In the dark register the fill is light, so the label must be the dark ink —
   not --field, which would tint it toward the background. */
.register-dark .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.register-dark .btn:hover { background: transparent; color: var(--paper); }
.btn:hover { background: transparent; color: var(--on-field); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}

.btn--ghost { background: transparent; color: var(--on-field); }
.btn--ghost:hover { background: var(--on-field); color: var(--field); }

/* Secondary actions are text links, never buttons */
.link-under {
  display: inline-block;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: opacity var(--d-micro) var(--e-micro);
}
.link-under:hover { opacity: 0.6; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ==========================================================================
   Hero — stacked editorial masthead, content sits low
   ========================================================================== */

.hero { padding-block: var(--s-7) var(--s-8); }
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-7);
  align-items: end;
}
.hero-type { padding-bottom: var(--s-2); }
.hero-eyebrow { margin-bottom: var(--s-4); display: block; }
.hero .display { margin-bottom: var(--s-4); }
.hero-sub { max-width: 46ch; margin-bottom: var(--s-5); }
.hero-media { position: relative; }
.hero-media .frame { aspect-ratio: 4 / 5; }
.hero-caption {
  margin-top: var(--s-2);
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}

/* Press strip — the studio's strongest trust asset, on the homepage */
.press-strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-4);
}
.press-strip ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.press-strip li {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.4vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.register-dark .press-strip li { color: var(--silver); }

/* ==========================================================================
   Cards / portfolio
   ========================================================================== */

.work-item { display: block; }
.work-item .frame { aspect-ratio: 3 / 4; margin-bottom: var(--s-2); }
.work-item__meta { display: flex; justify-content: space-between; gap: var(--s-2); align-items: baseline; }

.pillar { border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.pillar .h3 { margin-bottom: var(--s-2); }

/* Quote — named testimonial, real client */
.quote { max-width: 34ch; }
.quote blockquote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h3);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-3);
}
.quote figcaption { font-size: var(--t-small); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: var(--s-3); }
.field label {
  display: block;
  font-size: var(--t-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: 500;
  margin-bottom: var(--s-1);
}
.field .optional { text-transform: none; letter-spacing: 0; color: var(--ink-mute); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  min-height: 48px;
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: var(--radius);
  font-size: var(--t-small);
  transition: border-color var(--d-micro) var(--e-micro);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: var(--focus);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field-error { display: block; margin-top: var(--s-1); font-size: var(--t-small); color: var(--error); }
.form-note { font-size: var(--t-small); color: var(--ink-mute); margin-top: var(--s-2); }
.form-status[data-state="success"] { color: var(--success); }
.form-status[data-state="error"]   { color: var(--error); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-7) var(--s-4);
}
.site-footer a:hover { opacity: 0.65; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
.site-footer .label { color: var(--silver); margin-bottom: var(--s-2); display: block; }
.site-footer li + li { margin-top: var(--s-1); }
.footer-bottom {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: var(--t-small);
  color: var(--silver);
}
.footer-logo { width: 180px; margin-bottom: var(--s-3); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-3);
  z-index: var(--z-modal);
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack > * + * { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }

/* ==========================================================================
   Motion — reveals fire once and stay. Nothing loops.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-reveal) var(--e-reveal),
              transform var(--d-reveal) var(--e-reveal);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 110ms; }
.reveal:nth-child(3) { transition-delay: 220ms; }

/* The LCP hero image is never animated from opacity 0 — it is revealed
   by a mask on an already-decoded image. */
.mask-reveal img { clip-path: inset(0 0 0 0); }
.mask-reveal.is-pending img { clip-path: inset(0 100% 0 0); }
.mask-reveal img { transition: clip-path var(--d-mask) var(--e-mask); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .mask-reveal.is-pending img { clip-path: inset(0); }
  .mask-reveal img, .frame img, .btn, .nav a::after { transition: none !important; }
  @media (hover: hover) { a.frame:hover img { transform: none; } }
}

/* ==========================================================================
   Responsive — breakpoints follow content
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --gutter: 2rem; --pad-section: var(--s-8); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-media .frame { aspect-ratio: 3 / 2; }
  .grid-84, .grid-48 { grid-template-columns: 1fr; gap: var(--s-5); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  :root { --pad-section: var(--pad-section-m); --gutter: 1.5rem; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; }

  /* Mobile nav: full-screen overlay, focus trapped, closes on Escape.
     backdrop-filter on .site-header would make it a containing block for
     position:fixed descendants, collapsing this overlay to header height —
     so it is dropped while the overlay is open. */
  body:has(.nav[data-open="true"]) .site-header { backdrop-filter: none; }

  .nav[data-open="true"] {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: var(--z-overlay);
    background: var(--field);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--gutter);
    overflow-y: auto;
  }
  .nav[data-open="true"] a { font-size: 1.5rem; min-height: 48px; display: flex; align-items: center; }
  .nav[data-open="true"] .nav-close {
    display: inline-flex;
    position: absolute;
    top: var(--s-3);
    right: var(--gutter);
  }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .press-strip ul { justify-content: flex-start; gap: var(--s-3); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 480px) {
  .hero-media .frame { aspect-ratio: 4 / 5; }
  .quote blockquote { font-size: 1.25rem; }
}

@media print {
  .site-header, .nav-toggle, .btn { display: none; }
  body { background: #fff; color: #000; }
}