/* ==========================================================
   Langbournes — styles
   Tokens first; every value below reads from them.
   ========================================================== */
:root {
  /* colour — light ivory paper, warm ink. No accent colour. */
  --paper:        #fbf9f3;   /* base ground */
  --paper-light:  #fdfcf8;   /* gradient start, top-left */
  --paper-warm:   #f6f2e8;   /* gradient end, bottom-right */
  --ink:          #24211c;
  --ink-72: color-mix(in srgb, var(--ink) 72%, transparent);   /* secondary text */
  --ink-55: color-mix(in srgb, var(--ink) 55%, transparent);   /* hover */
  --ink-40: color-mix(in srgb, var(--ink) 40%, transparent);   /* inline link rule */
  --hairline: color-mix(in srgb, var(--ink) 16%, transparent); /* field borders */
  --panel-edge: color-mix(in srgb, var(--ink) 10%, transparent);
  --panel-bg: color-mix(in srgb, color-mix(in srgb, var(--paper), white 45%) 62%, transparent);

  /* type */
  --font-mark: "Gilda Display", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --track: 0.2em;            /* tracking for all capitals */

  /* space */
  --edge-x: max(clamp(24px, 4.45vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right)); /* 64px at 1440 */
  --edge-y: clamp(24px, 6.2vh, 56px);    /* 56px at 900 */
  --edge-t: max(var(--edge-y), env(safe-area-inset-top));                        /* top inset, clear of notches */
  --edge-b: calc(var(--edge-y) + env(safe-area-inset-bottom, 0px));              /* bottom inset, clear of the home bar */
  --panel-top: clamp(calc(var(--edge-t) + 80px), 22vh, 200px);                   /* where panel content starts */
  --panel-foot: 48px;                    /* space kept between panel content and Close */
  --panel-gap: 22px;                     /* between blocks inside a panel */
  --field-h: 44px;                       /* input and segment height */

  /* motion */
  --fade: 700ms ease;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* — stage: one fixed viewport, never scrolls — */
.stage {
  position: fixed; inset: 0; overflow: hidden;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255,255,255,0.55), transparent 70%),
    linear-gradient(160deg, var(--paper-light) 0%, var(--paper) 45%, var(--paper-warm) 100%);
}
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.1; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — the raised emboss: paper-coloured type lifted off the sheet;
     light on the upper-left edge, soft shadow falling lower-right — */
.mark {
  position: relative; margin: 0;
  padding-left: 0.24em;
  font-family: var(--font-mark); font-weight: 400;
  font-size: clamp(24px, 8.6vw, 164px);
  line-height: 1; letter-spacing: 0.24em;
  text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--paper), white 30%);
  text-shadow:
    -1px -1px 1px #fff,
    -2px -2px 3px color-mix(in srgb, white 60%, transparent),
    1px 1px 1px color-mix(in srgb, var(--ink) 22%, transparent),
    2px 3px 5px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* — corner furniture — */
.corner {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; line-height: 1.25; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-72);
  transition: opacity 400ms ease;
}
.corner.tl { top: var(--edge-t); left: var(--edge-x); font-size: 15px; gap: 7px; }
.corner.tr { top: var(--edge-t); right: calc(var(--edge-x) - var(--track)); align-items: flex-end; }
.corner.bl { bottom: var(--edge-b); left: var(--edge-x); }
.corner.br { bottom: var(--edge-b); right: calc(var(--edge-x) - var(--track)); align-items: flex-end; font-style: normal; }

/* the one link style: tracked capitals over a hairline */
.link {
  display: inline-flex; flex-direction: column; gap: 10px; align-self: flex-start;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-family: var(--font-body); font-size: 13px; line-height: 1;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--ink);
  transition: color 200ms ease, opacity 400ms ease;
}
.link::after { content: ""; height: 1px; width: calc(100% - var(--track)); background: currentColor; opacity: 0.5; }
@media (hover: hover) { .link:hover { color: var(--ink-55); } }
.corner.tl .link { margin-top: 22px; }

body.is-open .trigger { opacity: 0; pointer-events: none; }
body.is-open .corner { pointer-events: none; }

/* — the translucent third — */
.panel {
  position: absolute; top: 0; bottom: 0; width: max(33.333%, 440px); z-index: 1;
  background: var(--panel-bg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--fade), visibility 0s linear 700ms;
}
.panel.left  { left: 0;  border-right: 1px solid var(--panel-edge); }
.panel.right { right: 0; border-left:  1px solid var(--panel-edge); }
.panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--fade), visibility 0s; }

.panel-body {
  position: absolute; top: var(--panel-top); left: var(--edge-x); right: var(--edge-x); max-width: 460px;
  bottom: calc(var(--edge-b) + var(--panel-foot)); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--panel-gap);
  font-size: 16px; line-height: 1.75;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--fade) 200ms, transform var(--fade) 200ms;
}
.panel.is-active .panel-body { opacity: 1; transform: none; }
.panel-body.is-clipped { mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); } /* more below */
.panel:focus { outline: none; }
.panel-body p { margin: 0; }
.panel-body a.inline { border-bottom: 1px solid var(--ink-40); }
@media (hover: hover) { .panel-body a.inline:hover { color: var(--ink-55); } }

.panel .close { position: absolute; z-index: 3; }
.panel.left  .close { bottom: var(--edge-b); left: var(--edge-x); }
.panel.right .close { top: var(--edge-t); right: calc(var(--edge-x) - var(--track)); }

/* — forms — */
.field { display: flex; flex-direction: column; gap: 5px; }
.field label, .field legend { font-size: 12px; line-height: 1.4; color: var(--ink-72); padding: 0; }
.input {
  width: 100%; min-height: var(--field-h); padding: 6px 10px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: transparent; border: 1px solid var(--hairline); border-radius: 0;
  appearance: none;
}
@media (hover: hover) { .input:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); } }
.input:focus-visible { outline: none; border-color: var(--ink); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
input[type="date"], input[type="date"]::-webkit-datetime-edit { text-transform: uppercase; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }   /* iOS centres it otherwise */
.seg { display: flex; border: 1px solid var(--hairline); }
.seg label {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--field-h);
  font-size: 13px; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); cursor: pointer;
}
.seg label + label { border-left: 1px solid var(--hairline); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label:has(input:checked) { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.seg label:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: -3px; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
#login-form { display: flex; flex-direction: column; gap: var(--panel-gap); }
.link.submit { margin-top: 18px; }
.actions { margin-top: 18px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.quiet { font-size: 12px; line-height: 1; color: var(--ink-72); }
@media (hover: hover) { .quiet:hover { color: var(--ink); } }

/* contact: form fades out, thanks fades in over the same spot */
.swap { position: relative; }
.swap > .form-state { display: flex; flex-direction: column; gap: var(--panel-gap); transition: opacity 600ms ease; }
.swap > .thanks-state { position: absolute; inset: 0 0 auto 0; display: flex; flex-direction: column; gap: var(--panel-gap);
  opacity: 0; pointer-events: none; transition: opacity 900ms ease 500ms; }
.swap.is-sent > .form-state { opacity: 0; pointer-events: none; }
.swap.is-sent > .thanks-state { opacity: 1; }

/* — laptops: tighten as the screen gets shorter, so the contact form always fits — */
@media (max-height: 820px) {
  :root { --panel-top: clamp(calc(var(--edge-t) + 72px), 18vh, 200px); --panel-gap: 14px; --field-h: 38px; }
  .panel-body { font-size: 15px; line-height: 1.6; }
}
@media (max-height: 680px) {
  :root { --panel-top: calc(var(--edge-t) + 64px); --panel-foot: 32px; --panel-gap: 12px; --field-h: 36px; }
  .panel-body { font-size: 14px; line-height: 1.55; }
  .link.submit, .actions { margin-top: 8px; }
}

@media (min-width: 821px) and (max-height: 680px) {
  body:has(.panel.left.is-active) .corner.tl { opacity: 0; }  /* give the left panel room on short laptops */
}

/* — full-width panels: tablets, phones, and landscape phones — */
@media (max-width: 820px), (max-height: 500px) {
  .panel { width: 100%; }
  body.is-open .corner { opacity: 0; }  /* nothing shows through a full-width panel */
  .input { font-size: 16px; }           /* 16px stops iOS zooming into the field */
}
@media (max-width: 820px) and (min-height: 501px) {
  :root { --panel-top: calc(var(--edge-t) + 72px); }
}

/* — phones — */
@media (max-width: 600px) {
  /* the description runs full width; Learn more and Client login share the row beneath it */
  :root { --row-2: calc(var(--edge-t) + 2 * 13px * 1.25 + 6px + 22px); }
  .corner.tl { font-size: 13px; gap: 6px; }
  .corner.tr, .panel.right .close { top: var(--row-2); }
  /* left panels open from the top; the login panel starts below its Close */
  .panel.left .panel-body { top: var(--row-2); }
  .panel.right .panel-body { top: calc(var(--row-2) + 64px); bottom: var(--edge-b); }
  :root { --panel-foot: 32px; --field-h: 44px; }
}
@media (max-width: 600px) and (max-height: 700px) {
  :root { --panel-gap: 12px; --field-h: 40px; }
  .panel-body { font-size: 14px; line-height: 1.5; }
}
@media (max-width: 359px) {
  .pair { grid-template-columns: 1fr; }
}

/* — landscape phones: corners fade, so panel content can use the full height — */
@media (max-height: 500px) {
  :root { --panel-top: var(--edge-t); --panel-foot: 32px; --panel-gap: 12px; --field-h: 38px; }
  .panel-body { font-size: 14px; line-height: 1.5; }
  .panel.right .panel-body { top: calc(var(--edge-t) + 48px); }
}
@media (min-width: 601px) and (max-height: 500px) {
  /* landscape phones: the contact form goes into two columns so it fits */
  .panel-body { max-width: 760px; }
  .swap > .form-state { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .swap > .form-state > p, .swap > .form-state > .link.submit { grid-column: 1 / -1; }
  .swap > .form-state > .link.submit { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; }
}