:root {
  color-scheme: light;
  --mark-size: clamp(27.6px, 1.81818vw, 62.1px);
  --page-gutter: clamp(16px, 1.48148vw, 32px);
  --contact-size: clamp(17px, 1.22969vw, 42px);
  --depth-four: clamp(10px, .78125vw, 22px);
  --reveal-time: 850ms;
  --dismiss-time: 1800ms;
  --ink-time: 1400ms;
  --film-time: 1200ms;
}
/* Contact stays at the approved mobile 80%; only the mark grows by 15%. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  :root {
    --mark-size: 22.08px;
    --contact-size: 13.6px;
  }
}
/* Reduce desktop lettering while preserving all touch and narrow layouts. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  :root {
    --mark-size: clamp(22.08px, 1.454544vw, 49.68px);
    --contact-size: clamp(13.6px, .983752vw, 33.6px);
  }
}
* { box-sizing: border-box; }
html, body { width: 100%; margin: 0; }
html { min-height: 100%; }
html, body { touch-action: none; -webkit-text-size-adjust: 100%; }
html { overflow: visible; overscroll-behavior: none; background: var(--edge-top, #e5e5e7); }
body { position: relative; min-height: 100lvh; background: var(--edge-top, #e5e5e7); color: #000; }
/* Safari needs document pixels beyond the viewport, not a clipped app shell. */
@media (hover: none) and (pointer: coarse) {
  body {
    --film-bleed: max(1px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
    min-height: calc(100lvh + 2 * var(--film-bleed));
    padding-block: var(--film-bleed);
  }
}
/* Media belongs to the full page, not Safari's shortened fixed-position area. */
.background, .lens { position: absolute; inset: 0; min-height: 100lvh; }
.background { z-index: 0; overflow: hidden; }
html, body { transition: background-color 250ms linear; }
/* Keep the approved crop. Soften its lower edge into the same color
   Safari receives from the page background, without enlarging the film. */
.edge-fade { display: none; }
@media (hover: none) and (pointer: coarse) {
  .edge-fade {
    display: block;
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    height: max(48px, 10%);
    pointer-events: none;
  }
  .edge-fade::before, .edge-fade::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .edge-fade::before {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%);
    mask-image: linear-gradient(to bottom, transparent, #000 85%);
  }
  .edge-fade::after {
    background: var(--edge-top, #e5e5e7);
    transition: background-color 250ms linear;
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.06) 20%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.64) 72%, #000);
    mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.06) 20%, rgba(0,0,0,.24) 45%, rgba(0,0,0,.64) 72%, #000);
  }
}
.film-layer { position: absolute; inset: 0; opacity: 0; }
.film-layer.is-current { opacity: 1; }
.film-layer.is-front { z-index: 1; }
.passage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.background.is-changing .passage { animation: passage var(--film-time) ease-in-out; }
@keyframes passage {
  0%, 100% { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  50% { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
}
.background video, .background .cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.background .cover {
  position: absolute;
  inset: 0;
  background: #e5e5e7;
  opacity: 1;
  transition: opacity 300ms ease;
}
.film-layer.is-playing .cover { opacity: 0; }
.background video::-webkit-media-controls,
.background video::-webkit-media-controls-panel,
.background video::-webkit-media-controls-start-playback-button,
.background video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}
.lens {
  z-index: 1;
  pointer-events: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: backdrop-filter var(--dismiss-time) ease-in-out, -webkit-backdrop-filter var(--dismiss-time) ease-in-out;
}
body.is-open .lens {
  transition-duration: var(--reveal-time);
  -webkit-backdrop-filter: blur(var(--depth-four));
  backdrop-filter: blur(var(--depth-four));
}
/* The sign-in sits one step deeper: twice the blur. */
body.is-deep .lens {
  -webkit-backdrop-filter: blur(calc(var(--depth-four) * 2));
  backdrop-filter: blur(calc(var(--depth-four) * 2));
}
.identity {
  font: 400 var(--contact-size)/1 'Univers 55', Arial, sans-serif;
  color: #000;
  transition: color var(--ink-time) ease-in-out;
}
.word {
  display: block;
  width: calc(var(--advance) * 1em);
  height: 1em;
  overflow: visible;
  fill: currentColor;
  flex: none;
}
.identity button, .identity a {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#yhla {
  position: fixed;
  z-index: 2;
  top: max(var(--page-gutter), env(safe-area-inset-top, 0px));
  left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  font-size: var(--mark-size);
}
/* A generous touch target without changing the guide's visible geometry. */
#yhla::before { content: ''; position: absolute; inset: -10px -12px; }
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  #yhla::before { top: -13px; bottom: -13px; }
}
#contact {
  position: fixed;
  z-index: 2;
  top: calc(max(var(--page-gutter), env(safe-area-inset-top, 0px)) + var(--mark-size) + var(--contact-size) * .5);
  left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: calc(100vw - 2 * max(var(--page-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
  margin: 0;
}
/* Both panels share the introduction reveal; only one is shown at a time. */
#contact, #workspace {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dismiss-time) ease-in-out, visibility 0s linear var(--dismiss-time);
}
#contact.is-shown, #workspace.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-duration: var(--reveal-time), 0s;
  transition-delay: 0s;
}
#contact a { display: block; margin-top: .178571em; }
/* Copyright shares the introduction reveal, aligned to the lower left. */
.rights {
  position: fixed;
  bottom: max(calc(var(--page-gutter) * .5), env(safe-area-inset-bottom, 0px));
  left: max(var(--page-gutter), env(safe-area-inset-left, 0px));
  margin: 0;
  font-size: .85em;
}
.identity button:focus-visible, .identity a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  :root { --reveal-time: 0ms; --dismiss-time: 0ms; --ink-time: 0ms; --film-time: 0ms; }
  .background .cover, html, body, .edge-fade::after { transition: none; }
}
/* WORKSPACE: a small mark in the lower right, the sign-in panel centred over the blurred film. */
#workspace-toggle {
  position: fixed;
  z-index: 2;
  right: max(var(--page-gutter), env(safe-area-inset-right, 0px));
  bottom: max(calc(var(--page-gutter) * .5), env(safe-area-inset-bottom, 0px));
  font-size: .85em;
  /* Appears with the introduction (YHLA), not before. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dismiss-time) ease-in-out, visibility 0s linear var(--dismiss-time);
}
body.is-open #workspace-toggle {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-duration: var(--reveal-time), 0s;
  transition-delay: 0s;
}
#workspace-toggle::before { content: ''; position: absolute; inset: -12px -14px; }
#workspace {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(24em, calc(100vw - 2 * max(var(--page-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))));
  max-height: calc(100vh - 2 * max(var(--page-gutter), env(safe-area-inset-top, 0px)) - 2 * var(--mark-size));
  overflow: auto;
  margin: 0;
  padding: 1.3em 1.5em 1.2em;
  border: 0;
  background: transparent;
}
#workspace .field { display: flex; flex-direction: column; gap: .6em; padding: .8em 0 .4em; }
#workspace input {
  width: 100%;
  margin: 0;
  padding: .4em 0;
  border: 0;
  border-bottom: .5px solid var(--rule, currentColor);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
#workspace input:focus { border-bottom-color: currentColor; }
#workspace .actions { display: flex; gap: .8em; align-items: center; padding-top: 1em; }
#workspace .line { display: block; padding: .5em .9em; border: .5px solid var(--rule, currentColor); }
#workspace button:disabled { opacity: .4; cursor: default; }
#workspace .note { display: flex; min-height: 1.4em; align-items: center; padding-top: 1em; }
#workspace [hidden] { display: none !important; }
@media print {
  .background, .lens { display: none; }
  #contact { opacity: 1; visibility: visible; }
  #workspace-toggle, #workspace { display: none; }
  body { background: #fff; }
  #yhla, #contact { color: #000; }
}