/* castor+amber — single page
   ------------------------------------------------------------
   The photograph is positioned with exact maths so the lamp
   always stays in view; every piece of text is placed relative
   to the lamp or to the corners of the screen.

   Lamp in the source photo (fractions of the image):
     left 0.4503 · right 0.5968 · top 0.4639 · bottom 0.7085
   Image aspect ratio: 2061 × 2576 (≈ 4 : 5)
*/

:root {
  --text: #e4ded8;
  --shade: #2e2e2e;
  --font: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --shadow: 0 1px 2px rgb(46 46 46 / .55), 0 0 14px rgb(46 46 46 / .35);
  --shadow-soft: 0 1px 3px rgb(46 46 46 / .45), 0 0 22px rgb(46 46 46 / .3);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* the stage is never shorter than this; below it, the page scrolls */
  --min-h: 600px;
}

@media (max-aspect-ratio: 2061/2576) {
  /* portrait screens: room for brand, intro and CTA above the lamp */
  :root { --min-h: 620px; }
}
@media (max-aspect-ratio: 2061/2576) and (max-width: 340px) {
  :root { --min-h: 690px; }
}
@media (min-aspect-ratio: 2061/2576) and (max-width: 999px) {
  /* small landscape screens (phones on their side, small windows):
     show the whole photograph, exactly like the poster, and scroll */
  :root { --min-h: calc(100vw * 2576 / 2061); }
}

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

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

body {
  margin: 0;
  background: var(--shade);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; }

/* ------------------------------------------------------------
   Stage + geometry
   ------------------------------------------------------------ */

.stage {
  position: relative;
  height: max(100vh, var(--min-h));
  height: max(100svh, var(--min-h));
  overflow: hidden;
  container: stage / size;
}

.js .scene {
  opacity: 0;
  transition: opacity .6s ease;
}
.js.is-ready .scene { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .scene { transition: none; } }

.scene {
  position: absolute;
  inset: 0;

  /* --- portrait: image fills the height, lamp sits at 54 % of the width --- */
  --iw: calc(100cqh * 2061 / 2576);
  --ih: 100cqh;
  --ix: clamp(calc(100cqw - var(--iw)), calc(50cqw - var(--iw) * 0.5235), 0px);
  --iy: 0px;

  /* --- shared --- */
  --u: calc(var(--iw) / 2061);                  /* 1 pixel of the original photo */
  --lamp-l: calc(var(--ix) + var(--iw) * 0.4503);
  --lamp-c: calc(var(--ix) + var(--iw) * 0.5235);
  --lamp-t: calc(var(--iy) + var(--ih) * 0.4639);

  --edge: 16px;
  --top: max(calc(var(--safe-t) + 8cqh), 40px);
  --tag-t: calc(var(--lamp-t) - 20cqh);   /* phones: tagline higher, so its "+" does not line up with the other one */

  --brand-fs: min(calc(140 * var(--u)), calc((100cqw - 2 * var(--edge) - var(--safe-l) - var(--safe-r)) / 8.6));
  --tag-fs: max(19px, calc(58 * var(--u)));
  --tag-lh: 1.22;
  --plus-fs: clamp(26px, calc(46 * var(--u)), 36px);   /* both "+" signs share this size */
  --brand-r: max(calc(var(--edge) + var(--safe-r)), calc(100cqw - var(--ix) - 1873 * var(--u)));
  --text-l: max(calc(var(--edge) + var(--safe-l)), calc(var(--ix) + 205 * var(--u)));
}

@container stage (min-aspect-ratio: 2061/2576) {
  .scene {
    /* --- landscape: image fills the width, lamp placed around 36 % down --- */
    --iw: 100cqw;
    --ih: calc(100cqw * 2576 / 2061);
    --ix: 0px;
    --lamp-h: calc(var(--ih) * 0.2446);
    --iy: clamp(
      calc(100cqh - var(--ih)),
      calc(max(min(31cqh, calc(92cqh - var(--lamp-h))), 20cqh) - var(--ih) * 0.4639),
      0px);

    --edge: clamp(20px, 3cqw, 48px);
    --top: max(calc(var(--edge) + var(--safe-t)), 3.2cqh);
    --brand-fs: min(calc(140 * var(--u)), 11cqh);
    --tag-t: var(--lamp-t);
    --tag-fs: clamp(20px, calc(58 * var(--u)), 11cqh / 1.6);
  }
}

@container stage (min-aspect-ratio: 2061/2576) and (min-width: 1000px) {
  .scene {
    /* --- wide screens: four quiet corners, CTA in the middle --- */
    --corner-x: max(calc(var(--edge) + var(--safe-l)), calc(70 * var(--u)));
    --corner-y: max(calc(var(--edge) + var(--safe-b)), calc(74 * var(--u)));
    --top: max(calc(var(--corner-y) + var(--safe-t)), 3.2cqh);
    --brand-fs: min(calc(92 * var(--u)), 7.5cqh);
    --brand-r: var(--corner-x);
    --tag-fs: clamp(18px, calc(40 * var(--u)), 34px);
  }
}

.photo,
.photo img {
  position: absolute;
  display: block;
  left: var(--ix);
  top: var(--iy);
  width: var(--iw);
  height: var(--ih);
  max-width: none;
  margin: 0;
}
.photo { left: 0; top: 0; width: 0; height: 0; }

/* ------------------------------------------------------------
   Brand — top right
   ------------------------------------------------------------ */

.brand {
  position: absolute;
  top: var(--top);
  right: var(--brand-r);
  margin: 0;
  font-size: var(--brand-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  text-shadow: var(--shadow-soft);
}
/* the logo itself (from castoramber.svg): sized from --brand-fs so all the
   layout maths stays the same; 1 em of type ≈ 236 logo units */
.brand { line-height: 0; }
.brand-logo {
  display: block;
  height: calc(180em / 236);
  width: auto;
  overflow: visible;
  filter: drop-shadow(0 1px 3px rgb(46 46 46 / .45)) drop-shadow(0 0 22px rgb(46 46 46 / .3));
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Tagline + introduction — left of the lamp
   ------------------------------------------------------------ */

.tagline {
  position: absolute;
  left: var(--text-l);
  top: var(--tag-t);
  margin: 0;
  font-size: var(--tag-fs);
  font-style: italic;
  font-weight: 400;
  line-height: var(--tag-lh);
  text-shadow: var(--shadow);
}

.about {
  /* a small "+" right under the tagline. Phones and small screens: a tap
     shows the text in an open frame above the lamp. Wide screens: it
     appears under the "+" on hover (below). */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.about > * { pointer-events: auto; }

.about-toggle {
  position: absolute;
  left: var(--text-l);
  top: calc(var(--tag-t) + 5 * var(--tag-lh) * var(--tag-fs) + 4px);
  appearance: none;
  display: grid;
  place-items: center start;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 400 var(--plus-fs) / 1 var(--font);
  text-shadow: var(--shadow);
  cursor: pointer;
}
.about-toggle span {
  display: block;
  transition: transform .25s ease;
}
.about-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.intro {
  margin: 0;
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: 0.005em;
  hyphens: manual;
  text-shadow: 0 1px 2px rgb(46 46 46 / .85), 0 0 8px rgb(46 46 46 / .6), 0 0 22px rgb(46 46 46 / .4);
  text-wrap: pretty;
}

/* phones / small screens: a tap on the "+" shows the text in an open frame
   (2px line, no fill) in the dark green above the lamp, right of the tagline */
.about .intro {
  position: absolute;
  right: calc(var(--edge) + var(--safe-r));
  width: min(250px, calc(100cqw - var(--text-l) - var(--tag-fs) * 4.6 - 12px - var(--edge) - var(--safe-r)));
  top: calc(var(--top) + var(--brand-fs) * 0.8 + clamp(18px, 4cqh, 40px));
  z-index: 2;
  max-width: 300px;
  margin-left: auto;
  padding: 11px 12px 12px 13px;
  border: 2px solid var(--text);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(12.5px, 3.3cqw, 13px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgb(46 46 46 / .85), 0 0 8px rgb(46 46 46 / .6), 0 0 18px rgb(46 46 46 / .4);
  box-shadow: 0 0 10px rgb(46 46 46 / .18), inset 0 0 10px rgb(46 46 46 / .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
@container stage (max-width: 340px) {
  .about .intro { padding: 9px 10px 10px 11px; line-height: 1.36; }
}
.intro p { margin: 0; }
.intro-close {
  /* sits in the top-right corner of the text; the lines flow around it */
  float: right;
  display: grid;
  place-items: start end;
  width: 30px;
  height: 22px;
  margin: -2px -4px 0 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  filter: drop-shadow(0 1px 2px rgb(46 46 46 / .7));
  cursor: pointer;
}
.intro-close:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.about.is-open .about-toggle span { transform: rotate(45deg); }
.about.is-open .intro {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}

@container stage (min-aspect-ratio: 2061/2576) and (min-width: 1000px) {
  /* wide screens: a small "+" right under the tagline; the text
     appears beneath it on hover, keyboard focus or tap */
  .about {
    inset: auto;
    left: var(--text-l);
    top: calc(var(--lamp-t) + 5 * var(--tag-lh) * var(--tag-fs) + 6px);
    pointer-events: auto;
  }
  .about-toggle { position: static; }
  .intro-close { display: none; }

  .about .intro {
    z-index: auto;
    padding: 0;
    border: 0;
    margin-left: 0;
    max-width: none;
    right: auto;
    background: none;
    color: var(--text);
    box-shadow: none;
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    width: min(255px, calc(var(--lamp-l) - var(--text-l) - 32px));
    font-size: 15px;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: 0.005em;
    text-shadow: 0 1px 2px rgb(46 46 46 / .85), 0 0 8px rgb(46 46 46 / .6), 0 0 22px rgb(46 46 46 / .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }

  .about:hover .intro,
  .about:has(.about-toggle:focus-visible) .intro,
  .about.is-open .intro {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .about:hover .about-toggle span,
  .about:has(.about-toggle:focus-visible) .about-toggle span,
  }

/* ------------------------------------------------------------
   Call to action — in the grass right of the lamp, "+" right-aligned
   ------------------------------------------------------------ */

.cta {
  /* level with the top of the lamp's frosted band (51.5 % of the photo) */
  --cta-fs: clamp(15px, calc(32 * var(--u)), 25px);
  --cta-gap: clamp(12px, calc(84 * var(--u)), 76px);
  position: absolute;
  left: calc(var(--ix) + var(--iw) * 0.5968 + var(--cta-gap));
  top: calc(var(--iy) + var(--ih) * 0.515 - (var(--cta-fs) * 1.1 + 30px) / 2);
  max-width: calc(100cqw - var(--ix) - var(--iw) * 0.5968 - var(--cta-gap) - var(--edge) - var(--safe-r));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.cta-label {
  margin: 0;
  font-size: var(--cta-fs);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;        /* on the narrowest phones: "first / collection" */
  text-shadow: 0 1px 2px rgb(46 46 46 / .75), 0 0 10px rgb(46 46 46 / .5), 0 0 24px rgb(46 46 46 / .35);
}

/* the "+" that opens the waitlist; "join the waitlist." appears beneath it */
.cta-plus {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--font);
  text-shadow: 0 1px 2px rgb(46 46 46 / .75), 0 0 10px rgb(46 46 46 / .5), 0 0 24px rgb(46 46 46 / .35);
  cursor: pointer;
}
.cta-plus-sign {
  display: grid;
  place-items: center end;
  width: 44px;
  height: 30px;
  margin-right: -0.04em;   /* optical: line the + up with the "n" */
  font-size: var(--plus-fs);
  font-weight: 400;
  line-height: 1;
}
.cta-plus-text {
  margin-top: -2px;
  font-size: clamp(13px, calc(22 * var(--u)), 15px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.cta-plus:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

@media (hover: none) {
  .cta-plus-text {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .cta.is-joining .cta-plus-text {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease, visibility 0s;
  }
}

@media (hover: none) {
  /* after the tap: the "+" steps aside, the words take its place */
  .cta-plus-sign { transition: opacity .25s ease; }
  .cta.is-joining .cta-plus-sign {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
  }
  .cta.is-joining .cta-plus-text { margin-top: 6px; }
}

@media (hover: hover) and (pointer: fine) {
  /* mouse: the words only appear on hover or keyboard focus
     (on touch screens they are always shown) */
  .cta-plus-text {
    position: absolute;
    top: 100%;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .cta-plus:hover .cta-plus-text,
  .cta-plus:focus-visible .cta-plus-text {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
}

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7em 1.5em;
  border: 1px solid var(--text);
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  font: 500 clamp(15px, calc(24 * var(--u)), 17px) / 1 var(--font);
  letter-spacing: 0.005em;
  text-shadow: var(--shadow);
  box-shadow: 0 0 12px rgb(46 46 46 / .18), inset 0 0 12px rgb(46 46 46 / .12);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, text-shadow .2s ease;
}
.btn:hover {
  background: var(--text);
  color: var(--shade);
  text-shadow: none;
}
.btn:focus-visible,
a:focus-visible,
.modal-close:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.btn[disabled] { cursor: progress; opacity: .7; }

.btn[disabled]:hover { background: transparent; color: var(--text); }

/* ------------------------------------------------------------
   Contact — bottom right
   ------------------------------------------------------------ */

.contact {
  position: absolute;
  right: max(calc(var(--edge) + var(--safe-r)), calc(100cqw - var(--ix) - 1991 * var(--u)));
  bottom: max(calc(var(--edge) + var(--safe-b)), calc(74 * var(--u)));
  font-size: clamp(14px, calc(24 * var(--u)), 16px);
  font-weight: 500;
  line-height: 1.25;
  text-shadow: var(--shadow);
}

.contact address {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-style: normal;
  text-align: right;
}
.contact address a { text-decoration: none; }
/* plain text: easy to select and copy, no mail or call app opens */
.contact-line {
  padding: 1px 0;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.ig {
  display: grid;
  place-items: end end;
  margin-bottom: 3px;
  width: 44px;
  height: 32px;
  color: var(--text);
  filter: drop-shadow(0 1px 2px rgb(46 46 46 / .6));
}
.ig svg { width: 20px; height: 20px; }

@container stage (min-aspect-ratio: 2061/2576) and (min-width: 1000px) {
  .contact {
    right: var(--corner-x);
    bottom: var(--corner-y);
    font-size: clamp(13px, calc(24 * var(--u)), 16px);
    line-height: 1.25;
  }
  .contact .contact-line { padding: 1px 0; }
}

/* ------------------------------------------------------------
   Waitlist dialog
   ------------------------------------------------------------ */

.modal {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
  padding: 32px 28px 28px;
  border: 0;
  border-radius: 4px;
  background: var(--text);   /* inverted: light sheet, dark type */
  color: var(--shade);
  font-family: var(--font);
  overscroll-behavior: contain;
}
.modal::backdrop { background: rgb(46 46 46 / .45); }

@media (max-height: 560px) {
  /* very short screens (phone on its side): keep the form near the top */
  .modal { margin: calc(16px + var(--safe-t)) auto auto; }
}

.modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--shade);
  cursor: pointer;
}
.modal-close:hover { background: rgb(46 46 46 / .07); }
.modal .modal-close:focus-visible { outline-color: var(--shade); }

.modal-title:focus { outline: none; }
.modal-title {
  margin: 0 40px 8px 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.modal-text {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}
.modal-text.success { margin: 8px 0 4px; outline: none; }


.field { margin-bottom: 20px; }
.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
}
.field input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgb(46 46 46 / .55);
  border-radius: 2px;
  background: #fff;             /* same white as the checkbox */
  color: var(--shade);
  font: 400 16px/1.2 var(--font);  /* 16px prevents zoom on iOS */
}
/* browsers paint saved (autofilled) addresses light blue — keep it cream */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--shade);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--shade);
  transition: background-color 600000s 0s;
}
.field input:autofill { background: #fff; }
.field input:focus { outline: none; border-color: var(--shade); box-shadow: 0 0 0 1px var(--shade); }
.field input[aria-invalid="true"] { border-color: var(--shade); box-shadow: 0 0 0 1px var(--shade); }

.check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 6px;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--shade);
  cursor: pointer;
}
.check input:focus-visible { outline: 2px solid var(--shade); outline-offset: 2px; }
.check label {
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.field-error {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--shade);
}
#wl-consent-error { margin: 0 0 6px 36px; }

.btn-submit {
  width: 100%;
  margin-top: 22px;
  min-height: 48px;
  border-color: var(--shade);
  color: var(--shade);
  font-size: 16px;
  text-shadow: none;
  box-shadow: none;
}
.btn-submit:hover { background: var(--shade); color: var(--text); }
.btn-submit[disabled]:hover { background: transparent; color: var(--shade); }
.modal .btn-submit:focus-visible { outline-color: var(--shade); }

.form-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.form-status.is-error { color: var(--shade); font-weight: 500; }

.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}