/* Apple Garamond is a licensed face: it is used where it's installed, or from fonts/ once you add licensed files. */
@font-face { font-family: "Apple Garamond Web"; font-style: normal; font-weight: 400; font-display: swap; src: local("Apple Garamond"), local("AppleGaramond"), local("AppleGaramond-Light"); }
@font-face { font-family: "Apple Garamond Web"; font-style: italic; font-weight: 400; font-display: swap; src: local("Apple Garamond Italic"), local("AppleGaramond-Italic"), local("AppleGaramond-LightItalic"); }

/* ───────── Studio palette ─────────
   Paint (both themes)
     Vermilion    #E2432A   calls to action
     Ultramarine  #2B44D1   links, focus, ruled lines
     Ochre        #E6A532   highlights, tape, brush swipes
     Sap green    #2F6B4F   success, quiet accents
     Ink          #171512   text on paper
   Day studio: a warm desk (#ECE6DA) with paper (#FBF8F1).
   Night studio: the same paper on a dark desk (#161513).
*/
:root {
  --vermilion: #e2432a;
  --ultramarine: #2b44d1;
  --ochre: #e6a532;
  --sap: #2f6b4f;
  --ink: #171512;
  --graphite: #6e675d;
  --paper: #fbf8f1;
  --paper-2: #f4eee2;
  --manila: #e8c88a;
  --manila-2: #d9b46b;
  --line: rgba(23, 21, 18, 0.14);
  --line-2: rgba(23, 21, 18, 0.3);

  --serif: "Apple Garamond", "Apple Garamond Web", "ITC Garamond", Garamond, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M3 22c18-9 40-14 64-13 30 1 52-6 80-4 18 1 34 4 50 2-4 6-1 11 2 16-22 3-44-2-70 1-28 3-58 6-86 4-14-1-28 2-40-1 3-2 2-3 0-5z' fill='%23E6A532' fill-opacity='.6'/%3E%3C/svg%3E");
}
:root, :root[data-theme="light"] {
  --desk: #ece6da;
  --dot: rgba(23, 21, 18, 0.16);
  --on-desk: #171512;
  --on-desk-2: #6e675d;
  --ui: rgba(251, 248, 241, 0.92);
  --ui-ink: #171512;
  --ui-line: rgba(23, 21, 18, 0.14);
  --shadow: 0 1px 1px rgba(40, 30, 10, 0.08), 0 14px 28px -16px rgba(40, 30, 10, 0.42);
  --shadow-up: 0 2px 2px rgba(40, 30, 10, 0.06), 0 40px 60px -24px rgba(40, 30, 10, 0.5);
  --paper-dim: 1;
  --mini-item: rgba(23, 21, 18, 0.25);
  --backdrop: rgba(40, 32, 20, 0.35);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --desk: #161513;
  --dot: rgba(237, 231, 219, 0.11);
  --on-desk: #ede7db;
  --on-desk-2: #9c958a;
  --ui: rgba(33, 31, 28, 0.92);
  --ui-ink: #ede7db;
  --ui-line: rgba(237, 231, 219, 0.14);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 18px 34px -14px rgba(0, 0, 0, 0.85);
  --shadow-up: 0 2px 2px rgba(0, 0, 0, 0.4), 0 50px 70px -20px rgba(0, 0, 0, 0.95);
  --paper-dim: 0.9;
  --mini-item: rgba(237, 231, 219, 0.3);
  --backdrop: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
html.is-locked { overflow: hidden; }
body {
  margin: 0; overflow: hidden; overscroll-behavior: none;
  background: var(--desk); color: var(--on-desk);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
::selection { background: var(--ochre); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; display: block; }
mark { background: var(--brush) 0 88% / 100% 55% no-repeat; color: inherit; padding: 0 0.05em; font-size: 1.08em; }
/* Helvetica Neue does the work, light against bold; Apple Garamond italic turns up as an accent */
.serif { font-family: var(--sans); font-weight: 300; }
/* each name word is its own unbreakable unit: KIRAN and PATIL can sit on one line or two, never split */
.nm { display: inline-block; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.g, mark, .title em, .cover__title em, .index__mast h2 em, .connect__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--ultramarine); outline-offset: 4px; border-radius: 4px; }
[data-theme="dark"] :focus-visible { outline-color: #8fa0ff; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; transition: top 0.3s var(--ease); }
.skip:focus { top: 16px; }
body.show-ph [data-placeholder] { outline: 2px dashed var(--vermilion); outline-offset: 3px; }

/* ───────── Buttons ───────── */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 24px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
}
.btn > span { position: relative; z-index: 1; pointer-events: none; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; transform: translateY(101%); transition: transform 0.55s var(--ease); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid::before { background: var(--vermilion); }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); }
.btn--ghost::before { background: var(--ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--paper); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn[hidden] { display: none; }
.linkbtn { color: var(--ink); border-bottom: 1px solid var(--line-2); padding: 4px 0; }
.linkbtn:hover { color: var(--vermilion); border-color: var(--vermilion); }
.round { width: 44px; height: 44px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 16px; display: grid; place-items: center; color: var(--ink); transition: background 0.3s, color 0.3s; }
.round:hover { background: var(--ink); color: var(--paper); }
.pill { height: 40px; padding: 0 18px; border-radius: 999px; background: var(--vermilion); color: #fbf8f1; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; box-shadow: var(--shadow); transition: transform 0.3s var(--ease), background 0.3s; white-space: nowrap; }
.pill:hover { transform: translateY(-2px) rotate(-1deg); background: #c93520; }

/* ───────── Cover (tears away) ───────── */
.cover { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: var(--desk); transition: background-color 0.6s; }
.cover.is-out { background-color: transparent; pointer-events: none; }
.cover__sheet {
  width: min(880px, 100%); background: var(--paper); color: var(--ink); padding: clamp(24px, 5vw, 56px);
  box-shadow: var(--shadow-up); transform: rotate(-1deg);
  transition: transform 1.1s var(--ease-io), opacity 0.6s 0.6s;
  clip-path: polygon(0 0, 100% 0, 100% 97%, 96% 100%, 91% 97.5%, 85% 99.5%, 78% 97%, 70% 100%, 62% 97.8%, 55% 99.6%, 47% 97.2%, 40% 99.8%, 33% 97.6%, 25% 99.5%, 18% 97.4%, 10% 99.7%, 4% 97.5%, 0 100%);
}
.cover.is-out .cover__sheet { transform: translate(-6%, -120vh) rotate(-14deg); }
.cover__mast { display: flex; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 12px; }
.cover__title { font-size: clamp(42px, 15vw, 140px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 700; margin: 26px 0 18px; overflow-wrap: normal; word-break: keep-all; }
.cover__title em { font-size: 1.08em; }
.cover__sub { color: var(--graphite); font-variant-numeric: tabular-nums; }
.cover__enter { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cover__enter[hidden] { display: none; }
.cover__hint { color: var(--graphite); margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 10px; }

/* ───────── HUD ───────── */
.hud { position: fixed; z-index: 50; }
.hud--top { inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(12px, 2.4vw, 24px); pointer-events: none; }
.hud--top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--ui); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line), var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.brand__kp { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.brand__t { display: grid; line-height: 1.15; }
.brand__t b { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; text-transform: uppercase; }
.brand__name .nm + .nm { font-weight: 200; }
.brand__t .mono { font-size: 9.5px; color: var(--on-desk-2); display: flex; align-items: center; gap: 6px; }
.brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sap); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }
.hud__right { display: flex; align-items: center; gap: 8px; }
.hudbtn { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ui); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line), var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hudbtn:hover { background: var(--ui-ink); color: var(--desk); }
.hudbtn { display: inline-flex; align-items: center; gap: 8px; }
.hudbtn__i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; display: none; }
@media (max-width: 560px) {
  .hud--top { padding: 10px 12px; gap: 8px; }
  .brand { padding: 4px 12px 4px 4px; gap: 8px; }
  .brand__kp { width: 34px; height: 34px; font-size: 13px; }
  .brand__time { display: none !important; }
  .brand__t b { font-size: 15px; }
  .hudbtn { padding: 0; width: 40px; justify-content: center; }
  .hudbtn__t { display: none; }
  .hudbtn__i { display: block; }
  .pill { padding: 0 16px; }
  .pill__more { display: none; }
}
@media (max-width: 340px) { .brand__kp { display: none; } .brand { padding: 4px 12px; } }

/* ───────── Board ───────── */
.board {
  position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: var(--desk);
  background-image: radial-gradient(circle, var(--dot) 1.1px, transparent 1.4px);
  cursor: grab; outline: none;
}
.board:active { cursor: grabbing; }
.board[data-tool="pen"] { cursor: crosshair; }
.board[data-tool="sticker"] { cursor: copy; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.doodles, .ink { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ink { z-index: 9000; }
.ink path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.doodle { fill: none; stroke: var(--on-desk); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.75; transition: stroke-dashoffset 1.4s var(--ease); }
.doodles marker path { stroke: var(--on-desk); }
.doodle--hi { stroke: var(--vermilion); stroke-width: 4; opacity: 0.9; }
.is-drawn .doodle { stroke-dashoffset: 0; }
.scrawl { position: absolute; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1; color: var(--on-desk); white-space: nowrap; pointer-events: none; transition: color 0.5s; }

/* Items: every piece of paper */
.item {
  position: absolute; left: 0; top: 0; color: var(--ink);
  transform-origin: 50% 40%;
  opacity: 0; scale: 1.12;
  transition: opacity 0.5s var(--ease) var(--d, 0ms), scale 0.7s var(--ease) var(--d, 0ms), box-shadow 0.3s, filter 0.5s;
  filter: brightness(var(--paper-dim));
  cursor: grab;
  outline-offset: 8px;
}
.is-in .item { opacity: 1; scale: 1; }
.item.is-held { scale: 1.035; cursor: grabbing; transition: scale 0.25s var(--ease), box-shadow 0.25s; }
.item.is-held, .item:hover { --lift: 1; }
.board[data-tool="pen"] .item, .board[data-tool="sticker"] .item { cursor: inherit; }
.tape { position: absolute; width: 110px; height: 30px; background: rgba(236, 214, 150, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); mix-blend-mode: multiply; z-index: 2; }
[data-theme="dark"] .tape { mix-blend-mode: normal; background: rgba(214, 192, 128, 0.78); }
.tape--tl { top: -12px; left: -22px; transform: rotate(-32deg); }
.tape--tr { top: -12px; right: -22px; transform: rotate(30deg); }
.tape--br { bottom: -10px; right: -22px; transform: rotate(-28deg); }
.tape--top { top: -14px; left: 50%; margin-left: -55px; transform: rotate(-3deg); }
.note__h { color: var(--graphite); margin-bottom: 14px; }

/* title sheet */
.sheet { background: var(--paper); box-shadow: var(--shadow); padding: 48px 56px 44px; }
.item.is-held.sheet, .item.is-held.note, .item.is-held.card, .item.is-held.folder, .item.is-held.postcard, .item.is-held.polaroid, .item.is-held.tape-strip, .item.is-held.sticky, .item.is-held.chip-card { box-shadow: var(--shadow-up); }
.sheet__mast { display: flex; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.title { display: flex; flex-direction: column; font-size: 236px; line-height: 0.86; letter-spacing: -0.055em; font-weight: 700; margin: 34px 0 30px; }
.title__2 { padding-left: 190px; font-weight: 200; letter-spacing: -0.04em; }
.sheet__row { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line-2); padding-top: 16px; font-size: 13px; }
.sheet__status { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; margin-top: 14px; color: var(--graphite); }

/* polaroid */
.polaroid { background: #fffdf8; padding: 18px 18px 0; box-shadow: var(--shadow); }
.polaroid__img { aspect-ratio: 1; position: relative; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(40% 40% at 30% 30%, rgba(43, 68, 209, 0.8), transparent 70%), radial-gradient(42% 40% at 72% 64%, rgba(226, 67, 42, 0.85), transparent 70%), radial-gradient(48% 36% at 40% 86%, rgba(230, 165, 50, 0.9), transparent 70%), #e9e2d4; }
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.polaroid__img span { font-size: 116px; font-weight: 700; letter-spacing: -0.04em; color: #fffdf8; mix-blend-mode: soft-light; }
.polaroid__cap { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 30px; text-align: center; padding: 16px 0 22px; color: var(--graphite); }

/* ruled notebook note */
.note { padding: 40px 44px 44px 84px; box-shadow: var(--shadow);
  background:
    linear-gradient(90deg, transparent 62px, rgba(226, 67, 42, 0.45) 62px 64px, transparent 64px),
    repeating-linear-gradient(180deg, transparent 0 41px, rgba(43, 68, 209, 0.2) 41px 42px),
    var(--paper); background-position: 0 0, 0 18px, 0 0; }
.note::before { content: ""; position: absolute; left: 22px; top: 40px; bottom: 40px; width: 16px; background: radial-gradient(circle, var(--desk) 6px, transparent 7px) 0 0 / 16px 84px repeat-y; }
.note__body { font-size: 31px; line-height: 42px; font-weight: 300; letter-spacing: -0.01em; }

/* index card */
.card--index { background: var(--paper-2); padding: 30px 34px 34px; box-shadow: var(--shadow); border-top: 6px solid var(--vermilion); }
.facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(43, 68, 209, 0.25); font-size: 17px; line-height: 1.4; font-weight: 300; }
.facts dt { color: var(--graphite); padding-top: 3px; }

/* stickies */
.sticky { padding: 24px 22px 28px; box-shadow: var(--shadow); min-height: 230px; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 92%); }
.sticky--ochre { background: #f3cf6d; }
.sticky--vermilion { background: #f6a08c; }
.sticky--ultramarine { background: #a9b6f2; }
.sticky--sap { background: #9fcdb1; }
.sticky__h { margin-bottom: 12px; }
.sticky__list { font-family: var(--sans); font-weight: 300; font-size: 21px; line-height: 1.3; }
.sticky__list li:first-child { font-weight: 700; }
.sticky__list li::before { content: ""; display: inline-block; width: 10px; height: 1.5px; background: currentColor; opacity: 0.45; margin-right: 8px; vertical-align: 0.32em; }

/* palette chips */
.chip-card { background: #fffdf8; padding: 8px 8px 12px; box-shadow: var(--shadow); display: grid; gap: 3px; }
.chip-card__c { height: 120px; margin-bottom: 6px; }
.chip-card__n { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; line-height: 1.1; }
.chip-card__h { color: var(--graphite); font-size: 9.5px; }

/* folders */
.folder { padding-top: 34px; }
.folder__tab { position: absolute; top: 0; left: 24px; height: 36px; padding: 10px 18px 0; background: var(--manila-2); border-radius: 10px 10px 0 0; color: var(--ink); }
.folder__body { position: relative; background: linear-gradient(170deg, var(--manila), var(--manila-2)); padding: 18px 18px 22px; border-radius: 0 8px 8px 8px; box-shadow: var(--shadow); }
.folder__body::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(23, 21, 18, 0.18); border-radius: 4px; pointer-events: none; }
.folder__window { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 6px var(--paper), 0 2px 8px -2px rgba(0, 0, 0, 0.3); margin: 6px 6px 18px; transform: rotate(1.5deg); transition: transform 0.6s var(--ease); }
.folder:hover .folder__window, .folder:focus-visible .folder__window { transform: rotate(-1deg) translateY(-14px); }
.folder__window img { width: 100%; height: 100%; object-fit: cover; }
.folder__title { font-size: 34px; line-height: 1; padding: 0 6px; font-weight: 700; letter-spacing: -0.03em; }
.folder__meta { color: rgba(23, 21, 18, 0.65); padding: 10px 6px 0; }
.folder__open { position: absolute; right: 22px; bottom: 22px; color: var(--vermilion); opacity: 0; transform: translateX(-6px); transition: 0.4s var(--ease); }
.folder:hover .folder__open, .folder:focus-visible .folder__open { opacity: 1; transform: none; }

/* generated covers */
.art { position: absolute; inset: 0; }
.art--pixel { background: linear-gradient(var(--paper) 3px, transparent 3px) 0 0 / 30px 30px, linear-gradient(90deg, var(--paper) 3px, transparent 3px) 0 0 / 30px 30px, conic-gradient(from 90deg at 50% 50%, var(--vermilion) 0 25%, #efe8da 0 50%, var(--ultramarine) 0 75%, #efe8da 0) 0 0 / 90px 90px; }
.art--grid { background: linear-gradient(var(--line-2) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0 / 22px 22px, radial-gradient(42% 40% at 58% 44%, var(--ultramarine), transparent 72%), radial-gradient(30% 28% at 34% 68%, var(--ochre), transparent 72%), #efe8da; }
.art--orbit { background: repeating-radial-gradient(circle at 34% 64%, var(--vermilion) 0 3px, transparent 3px 18px), radial-gradient(circle at 34% 64%, var(--ochre), #efe8da 72%); }
.art--bloom { background: radial-gradient(28% 30% at 34% 38%, var(--vermilion), transparent 72%), radial-gradient(36% 34% at 66% 58%, var(--ultramarine), transparent 72%), radial-gradient(34% 30% at 42% 80%, var(--ochre), transparent 72%), #efe8da; filter: blur(5px) saturate(1.1); }
.art--stripes { background: repeating-linear-gradient(118deg, var(--ink) 0 1.5px, transparent 1.5px 12px), linear-gradient(160deg, var(--ochre), var(--sap) 75%); }
.art--swatch { background: linear-gradient(90deg, var(--vermilion) 0 20%, var(--ochre) 20% 40%, var(--sap) 40% 60%, var(--ultramarine) 60% 80%, var(--ink) 80%) 0 16% / 100% 36% no-repeat, radial-gradient(60% 40% at 50% 82%, rgba(226, 67, 42, 0.3), transparent 70%), #efe8da; }

/* postcard */
.postcard { display: grid; grid-template-columns: 1.25fr 1fr; background: #fffdf8; box-shadow: var(--shadow); padding: 44px; gap: 40px; }
.postcard::before { content: ""; position: absolute; inset: 12px; border: 10px solid transparent; border-image: repeating-linear-gradient(135deg, var(--vermilion) 0 14px, transparent 14px 28px, var(--ultramarine) 28px 42px, transparent 42px 56px) 10; pointer-events: none; opacity: 0.85; }
.postcard__l { border-right: 1px solid var(--line-2); padding-right: 36px; display: grid; align-content: start; gap: 22px; position: relative; }
.postcard__eyebrow { color: var(--vermilion); }
.postcard__h { font-size: 56px; line-height: 1; letter-spacing: -0.035em; font-weight: 300; }
.postcard__ways { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.postcard__note { color: var(--graphite); font-size: 15px; }
.postcard__r { position: relative; display: grid; align-content: end; min-height: 300px; }
.stamp { position: absolute; top: 0; right: 0; width: 120px; height: 140px; background: var(--ultramarine); color: #fbf8f1; display: grid; place-items: center; align-content: center; gap: 2px; transform: rotate(4deg);
  -webkit-mask: radial-gradient(circle 6px at 6px 6px, transparent 98%, #000) -6px -6px / 14px 14px; mask: radial-gradient(circle 6px at 6px 6px, transparent 98%, #000) -6px -6px / 14px 14px; }
.stamp span { font-size: 42px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stamp small { font-size: 9px; }
.postmark { position: absolute; top: 48px; right: 90px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(23, 21, 18, 0.45); display: grid; place-items: center; transform: rotate(-14deg); color: rgba(23, 21, 18, 0.55); }
.postmark::before, .postmark::after { content: ""; position: absolute; left: 100%; width: 120px; height: 2px; background: repeating-linear-gradient(90deg, rgba(23, 21, 18, 0.4) 0 10px, transparent 10px 14px); }
.postmark::before { top: 44%; }
.postmark::after { top: 56%; }
.postcard__addr { display: grid; gap: 0; }
.addr__to { color: var(--graphite); margin-bottom: 4px; }
.addr__line { font-size: 22px; font-weight: 300; line-height: 1.2; border-bottom: 1px solid var(--line-2); padding: 10px 0 6px; text-align: left; word-break: break-all; }
.addr__mail { color: var(--ultramarine); cursor: copy; }
.addr__mail:hover { color: var(--vermilion); }
.addr__hint { color: var(--graphite); font-size: 9.5px; padding-top: 10px; }

/* timeline strip (adding-machine tape) */
.tape-strip { background: var(--paper); box-shadow: var(--shadow); padding: 30px 40px 40px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 98% 96%, 96% 100%, 94% 96%, 92% 100%, 90% 96%, 88% 100%, 86% 96%, 84% 100%, 82% 96%, 80% 100%, 78% 96%, 76% 100%, 74% 96%, 72% 100%, 70% 96%, 68% 100%, 66% 96%, 64% 100%, 62% 96%, 60% 100%, 58% 96%, 56% 100%, 54% 96%, 52% 100%, 50% 96%, 48% 100%, 46% 96%, 44% 100%, 42% 96%, 40% 100%, 38% 96%, 36% 100%, 34% 96%, 32% 100%, 30% 96%, 28% 100%, 26% 96%, 24% 100%, 22% 96%, 20% 100%, 18% 96%, 16% 100%, 14% 96%, 12% 100%, 10% 96%, 8% 100%, 6% 96%, 4% 100%, 2% 96%, 0 100%); }
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.tl li { display: grid; gap: 8px; align-content: start; padding: 18px 24px 10px 0; border-top: 2px solid var(--ink); position: relative; }
.tl li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--vermilion); }
.tl li:nth-child(2)::before { background: var(--ultramarine); }
.tl li:nth-child(3)::before { background: var(--ochre); }
.tl li:nth-child(4)::before { background: var(--sap); }
.tl__when { color: var(--graphite); padding-top: 6px; }
.tl__what { font-size: 30px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.tl__where { color: var(--graphite); font-size: 15px; }

/* open-source proof */
.prcard { background: var(--paper); padding: 34px 32px 28px; box-shadow: var(--shadow); }
.prcard__shot { border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 10px 24px -14px rgba(0, 0, 0, 0.6); }
.prcard__shot img { width: 100%; height: auto; display: block; pointer-events: none; }
.prcard__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.prcard__t { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.prcard__t .g { font-size: 1.05em; color: var(--sap); }
.prcard__note { color: var(--graphite); font-size: 16px; font-weight: 300; line-height: 1.5; margin-top: 12px; }
.tl__what a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.tl__what a:hover { text-decoration-color: var(--vermilion); }
.tl__ext { color: var(--vermilion); font-weight: 300; }

/* photo stack: polaroids that fan out on hover */
.photostack { height: 372px; }
.pol { position: absolute; left: 0; top: 0; width: 100%; background: #fffdf8; padding: 14px 14px 0; box-shadow: var(--shadow); transform: rotate(var(--r)); transition: transform 0.7s var(--ease); }
.pol__img { position: relative; aspect-ratio: 1; overflow: hidden; background: #e9e2d4; }
.pol__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pol__cap { font-family: var(--serif); font-style: italic; font-size: 22px; text-align: center; padding: 12px 6px 16px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photostack:hover .pol, .photostack:focus-visible .pol { transform: translate(calc((var(--i) - 1.5) * 52px), calc(var(--i) * -8px)) rotate(calc(var(--r) * 1.9)); }
.photostack.is-held .pol { transform: rotate(var(--r)); }
.photostack__hint { position: absolute; left: 0; right: 0; bottom: -40px; text-align: center; color: var(--on-desk-2); opacity: 0; transition: opacity 0.4s; }
.photostack:hover .photostack__hint, .photostack:focus-visible .photostack__hint { opacity: 1; }
.ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; color: rgba(23, 21, 18, 0.5); }
.ph svg { width: 26%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.ph .mono { font-size: 9.5px; }
.ph--ochre { background: radial-gradient(60% 60% at 32% 30%, #f6d58b, transparent 70%), radial-gradient(60% 60% at 72% 76%, #e6a532, transparent 72%), #efe3c8; }
.ph--vermilion { background: radial-gradient(60% 60% at 32% 30%, #f6b2a2, transparent 70%), radial-gradient(60% 60% at 72% 76%, #e2432a, transparent 72%), #f1ddd5; }
.ph--sap { background: radial-gradient(60% 60% at 32% 30%, #b6dbc4, transparent 70%), radial-gradient(60% 60% at 72% 76%, #2f6b4f, transparent 72%), #dde9e0; }
.ph--ultramarine { background: radial-gradient(60% 60% at 32% 30%, #b7c1f5, transparent 70%), radial-gradient(60% 60% at 72% 76%, #2b44d1, transparent 72%), #dfe2f2; }

/* stickers */
.sticker { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.22)); }
.sticker svg { display: block; width: 100%; height: auto; }
.is-in .sticker { animation: pop 0.45s var(--ease); }
@keyframes pop { 0% { scale: 0.4; } 60% { scale: 1.12; } 100% { scale: 1; } }

/* ───────── Guide cursor ───────── */
.guide { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.guide.is-on { opacity: 1; }
.guide svg { display: block; fill: var(--vermilion); stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.guide__name { position: absolute; left: 18px; top: 18px; background: var(--vermilion); color: #fff; padding: 4px 9px; border-radius: 4px 12px 12px 12px; font-size: 10px; white-space: nowrap; }
.guide__say { position: absolute; left: 18px; top: 46px; background: var(--ui); color: var(--ui-ink); padding: 10px 14px; border-radius: 4px 14px 14px 14px; font-family: var(--serif); font-style: italic; font-size: 20px; white-space: nowrap; box-shadow: 0 0 0 1px var(--ui-line), var(--shadow); opacity: 0; transform: translateY(-4px); transition: 0.35s var(--ease); }
.guide.is-saying .guide__say { opacity: 1; transform: none; }

/* ───────── Toolbar + minimap ───────── */
.toolbar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 16px;
  background: var(--ui); color: var(--ui-ink); box-shadow: 0 0 0 1px var(--ui-line), var(--shadow-up);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); max-width: calc(100vw - 24px);
}
.toolbar__grp { display: flex; align-items: center; gap: 2px; }
.toolbar__sep { width: 1px; height: 24px; background: var(--ui-line); margin: 0 4px; }
.toolbar__sub { display: flex; align-items: center; gap: 4px; padding: 0 6px; border-left: 1px solid var(--ui-line); margin-left: 4px; }
.toolbar__sub[hidden], .tb[hidden] { display: none; }
.tb { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; transition: background 0.2s, color 0.2s; }
.tb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tb:hover { background: var(--ui-line); }
.tb[aria-checked="true"] { background: var(--ui-ink); color: var(--desk); }
.tb--txt { width: auto; padding: 0 10px; font-size: 10px; font-variant-numeric: tabular-nums; }
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }
.sound__bars { display: inline-flex; align-items: center; gap: 2px; height: 16px; }
.sound__bars i { width: 2.5px; height: 4px; background: currentColor; border-radius: 1px; }
.sound[aria-pressed="true"] .sound__bars i { animation: eq 1.1s var(--ease) infinite alternate; background: var(--vermilion); }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.9s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -0.2s; animation-duration: 1.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -0.7s; }
@keyframes eq { from { height: 4px; } to { height: 16px; } }
.dot-btn { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.dot-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ui), 0 0 0 3.5px var(--ui-ink); }
.tray-btn { width: 36px; height: 36px; border-radius: 9px; padding: 3px; }
.tray-btn svg { width: 100%; height: 100%; }
.tray-btn:hover { background: var(--ui-line); }
.tray-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ui-ink); }
.minimap { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 50; width: 168px; height: 126px; border-radius: 12px; background: var(--ui); box-shadow: 0 0 0 1px var(--ui-line), var(--shadow); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 900px) { .minimap { display: none; } }
@media (max-width: 560px) {
  .toolbar { bottom: max(10px, env(safe-area-inset-bottom)); gap: 2px; padding: 4px; overflow-x: auto; }
  .tb { width: 36px; height: 36px; }
  .toolbar__sep { margin: 0 2px; }
  #zoomOut, #zoomIn { display: none; }
}

/* ───────── Index: a torn newspaper page ───────── */
dialog { color: var(--ink); }
.index { margin: 0 auto auto; padding: 0; border: 0; background: transparent; width: min(1100px, 100vw); max-width: 100vw; max-height: 100dvh; overflow: visible; }
.index::backdrop { background: var(--backdrop); opacity: 0; transition: opacity 0.35s; }
.index.is-open::backdrop { opacity: 1; }
.index__page { background: var(--paper); padding: clamp(22px, 4vw, 48px) clamp(18px, 4vw, 56px) clamp(48px, 6vw, 72px); max-height: 100dvh; overflow-y: auto; transform: translateY(-105%); transition: transform 0.5s var(--ease-io); box-shadow: var(--shadow-up); }
.index.is-open .index__page { transform: none; }
.index__mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; border-bottom: 3px double var(--ink); padding-bottom: 14px; }
.index__mast h2 { font-size: clamp(54px, 9vw, 108px); line-height: 0.9; letter-spacing: -0.05em; font-weight: 700; text-align: center; }
.index__mast .round { justify-self: end; }
.index__standfirst { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.3; font-weight: 300; letter-spacing: -0.01em; padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.index__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px); padding-top: 22px; }
.index__cols h3 { color: var(--vermilion); margin-bottom: 10px; }
.index__h2 { margin-top: 28px; }
.index__works button { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; transition: padding 0.35s var(--ease); }
.index__works button:hover, .index__works button:focus-visible { padding-left: 10px; }
.index__works .serif { font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }
.index__works .mono { color: var(--graphite); }
.index__places button { width: 100%; text-align: left; font-size: 22px; font-weight: 300; padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.index__places button:hover span { color: var(--vermilion); }
.index__talk { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) { .index__cols { grid-template-columns: 1fr; } .index__mast { grid-template-columns: 1fr auto; } .index__mast > .mono { display: none; } .index__mast h2 { text-align: left; } }

/* ───────── Dossier: the folder opens ───────── */
.dossier { padding: 0; border: 0; background: transparent; width: min(760px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow: visible; }
.dossier::backdrop { background: var(--backdrop); opacity: 0; transition: opacity 0.35s; }
.dossier.is-open::backdrop { opacity: 1; }
.file { position: relative; padding-top: 34px; perspective: 1600px; opacity: 0; transform: translateY(40px) rotate(-1.5deg); transition: opacity 0.35s, transform 0.5s var(--ease); }
.dossier.is-open .file { opacity: 1; transform: none; }
.file__tab { position: absolute; top: 0; left: 30px; height: 36px; padding: 10px 18px 0; background: var(--manila-2); border-radius: 10px 10px 0 0; z-index: 1; }
.file__back { position: absolute; inset: 34px 0 0; background: var(--manila-2); border-radius: 0 10px 10px 10px; box-shadow: var(--shadow-up); }
.file__paper { position: relative; margin: 14px; padding: clamp(20px, 3.4vw, 36px); background: var(--paper); box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25); max-height: calc(100dvh - 110px); overflow-y: auto; transition: transform 0.18s, opacity 0.18s; }
.dossier.is-flip .file__paper { transform: translateX(-14px) rotate(-1deg); opacity: 0.2; }
.file__cover { position: absolute; inset: 34px 0 0; background: linear-gradient(170deg, var(--manila), var(--manila-2)); border-radius: 0 10px 10px 10px; transform-origin: 50% 100%; transform: rotateX(0deg); transition: transform 0.75s var(--ease-io) 0.08s, opacity 0.2s 0.6s; display: grid; place-items: center; color: rgba(23, 21, 18, 0.45); pointer-events: none; backface-visibility: hidden; }
.dossier.is-open .file__cover { transform: rotateX(-178deg); opacity: 0; }
.file__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.file__no { color: var(--vermilion); }
.file__art { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: #efe8da; margin-bottom: 22px; }
.file__art img { width: 100%; height: 100%; object-fit: cover; }
.file__title { font-size: clamp(40px, 5.6vw, 64px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 700; }
.file__meta { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 18px 0; margin: 18px 0; border-block: 1px solid var(--line-2); }
.file__meta dt { color: var(--graphite); margin-bottom: 4px; }
.file__blurb { font-size: 18px; line-height: 1.55; max-width: 58ch; font-weight: 300; }
.file__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.file__nav { display: flex; gap: 8px; margin-left: auto; }

/* ───────── Gallery: the slideshow of polaroids ───────── */
.gallery { padding: 0; border: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #fbf8f1; overflow: hidden; }
.gallery[open] { display: grid; grid-template-rows: auto 1fr auto; }
.gallery::backdrop { background: rgba(14, 13, 11, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.45s; }
.gallery.is-open::backdrop { opacity: 1; }
.gallery__top { display: flex; justify-content: space-between; align-items: center; padding: 18px clamp(16px, 3vw, 32px); }
.gallery__top, .gallery__nav { opacity: 0; transition: opacity 0.4s 0.25s; }
.gallery.is-open .gallery__top, .gallery.is-open .gallery__nav { opacity: 1; }
.gallery__count { opacity: 0.55; margin-left: 10px; font-variant-numeric: tabular-nums; }
.gallery__ctrl { display: flex; gap: 8px; }
.gallery .round { color: #fbf8f1; box-shadow: inset 0 0 0 1px rgba(251, 248, 241, 0.3); font-size: 13px; }
.gallery .round:hover { background: #fbf8f1; color: #171512; }
.gallery__stage { position: relative; display: grid; place-items: center; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gpol { grid-area: 1 / 1; margin: 0; width: min(440px, 78vw, calc((100dvh - 250px) * 0.84)); background: #fffdf8; color: #171512; padding: 18px 18px 0; box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.75); transform: rotate(var(--tilt)); position: relative; will-change: transform; }
.gpol__img { position: relative; aspect-ratio: 1; overflow: hidden; background: #e9e2d4; }
.gpol__img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gpol__dev { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #f4efe4, #d8cebc); opacity: 0; pointer-events: none; }
.gpol__cap { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 32px); text-align: center; padding: 16px 8px 26px; }
.gpol__no { position: absolute; right: 18px; bottom: 14px; color: var(--graphite); }
.gallery__nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 14px 16px max(22px, env(safe-area-inset-bottom)); }
.gallery__strip { display: flex; gap: 10px; }
.mini { display: block; width: 54px; background: #fffdf8; padding: 4px 4px 12px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.7); transform: rotate(-4deg); opacity: 0.5; transition: transform 0.4s var(--ease), opacity 0.3s; }
.gallery__strip li:nth-child(even) .mini { transform: rotate(3deg); }
.mini:hover { opacity: 0.9; }
.gallery__strip .mini[aria-current="true"] { opacity: 1; transform: translateY(-10px) rotate(0deg); }
.mini__img { display: block; position: relative; aspect-ratio: 1; overflow: hidden; }
.mini__img img { width: 100%; height: 100%; object-fit: cover; }
.mini .ph svg { width: 42%; }
@media (max-width: 560px) { .mini { width: 42px; } .gallery__strip { gap: 6px; } }

/* ───────── Connect dialog ───────── */
.connect { margin: 0 0 0 auto; padding: 0; border: 0; height: 100dvh; max-height: 100dvh; width: min(620px, 100vw); max-width: 100vw; background: var(--paper); color: var(--ink); transform: translateX(100%); transition: transform 0.5s var(--ease-io); box-shadow: var(--shadow-up); }
.connect.is-open { transform: none; }
.connect::backdrop { background: var(--backdrop); opacity: 0; transition: opacity 0.4s; }
.connect.is-open::backdrop { opacity: 1; }
.connect__sheet { height: 100%; overflow-y: auto; padding: clamp(20px, 4vw, 40px); overscroll-behavior: contain;
  background: repeating-linear-gradient(180deg, transparent 0 39px, rgba(43, 68, 209, 0.08) 39px 40px) 0 160px; }
.connect__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.connect__eyebrow { color: var(--vermilion); }
.connect__title { font-size: clamp(38px, 5.6vw, 56px); line-height: 1; letter-spacing: -0.045em; font-weight: 700; margin-top: 10px; }
.connect__title em { background: var(--brush) 0 90% / 100% 50% no-repeat; font-size: 1.08em; }
.connect__now { color: var(--graphite); font-size: 15px; margin-top: 12px; }
.tabs { position: relative; display: flex; gap: 4px; margin: 26px 0 24px; border-bottom: 1px solid var(--line-2); }
.tab { padding: 14px 12px; color: var(--graphite); }
.tab[aria-selected="true"], .tab:hover { color: var(--ink); }
.tabs__ink { position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--vermilion); border-radius: 2px; transition: transform 0.45s var(--ease), width 0.45s var(--ease); }
.panel[hidden] { display: none; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
#durations { margin-bottom: 22px; }
.chip { padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); background: #fffdf8; font-size: 14px; text-align: left; transition: background 0.25s, color 0.25s; }
.chip small { display: block; font-size: 11px; color: var(--graphite); margin-top: 2px; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip[aria-checked="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip[aria-checked="true"] small { color: rgba(251, 248, 241, 0.7); }
.form { display: grid; gap: 20px; }
.form[hidden] { display: none; }
.form__lead { color: var(--graphite); font-size: 15px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field__l { color: var(--graphite); padding: 0; }
.field__tz { text-transform: none; letter-spacing: 0; font-weight: 400; }
.field input, .field textarea { font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--line-2); border-radius: 0; padding: 8px 0; width: 100%; transition: border-color 0.3s; color-scheme: light; }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ultramarine); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--vermilion); }
.field.is-invalid .field__l { color: var(--vermilion); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 6px; }
.form__status { font-size: 14px; color: var(--graphite); max-width: 36ch; }
.form__status.is-ok { color: var(--sap); }
.form__status.is-err { color: var(--vermilion); }
.form__status a { text-decoration: underline; }
.embed { background: #fffdf8; box-shadow: 0 0 0 1px var(--line); min-height: 200px; }
.embed__frame { height: 700px; }
.embed__frame--cal { height: auto; min-height: 520px; }
.embed__alt { padding: 14px 18px 18px; font-size: 14px; font-weight: 300; color: var(--graphite); border-top: 1px solid var(--line); }
.embed__alt a { color: var(--vermilion); text-decoration: underline; text-underline-offset: 4px; }
.connect.is-wide { width: min(1000px, 100vw); }
.connect { transition: transform 0.5s var(--ease-io), width 0.45s var(--ease); }
.embed__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.embed__loading, .embed__fail { padding: 24px; color: var(--graphite); }
.embed__fail a { color: var(--vermilion); text-decoration: underline; }
.elsewhere { display: grid; }
.else { display: grid; gap: 4px; width: 100%; text-align: left; padding: 20px 0; border-top: 1px solid var(--line-2); transition: padding 0.4s var(--ease); }
.elsewhere li:last-child .else { border-bottom: 1px solid var(--line-2); }
.else:hover { padding-left: 10px; }
.else__l { color: var(--vermilion); }
.else__v { font-size: clamp(20px, 2.8vw, 28px); line-height: 1.1; word-break: break-all; font-weight: 300; }
.else__n { color: var(--graphite); font-size: 14px; }

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