/* MapBee — built in Prayas Abhinav's register.
   GEN-16 · chord: MARIGOLD ON WET SLATE.
   Primary device: THE SWIVELLING WALL — MapBee's first project was a pavilion whose exhibit
   walls are hinged like the pages of a book, and turning them changes what the city can see
   through it. The site is that wall: flat saturated panels standing on a dark ground, some
   turned toward you and some away, each catching light along its hinge. */

:root {
  /* ground — wet stone at night, the slab a plot is poured on */
  --slate: #121719;
  --slate-deep: #0a0e10;
  --slate-lift: #1c2429;
  --slate-hi: #1e262a;   /* the lit crown of the ground gradient */

  /* the dominant mass: MapBee's own marigold — sampled from their exhibition slide */
  --acid: #e8b93a;   /* #e2b84c as photographed, lifted for the veil a phone adds */
  --acid-hot: #f7d36a;

  /* counter-mass and fire */
  --cobalt: #1c4cc0;
  --cobalt-lit: #3a6ee8;
  --vermilion: #e0431e;
  --lime: #8ec63f;

  --bone: #efe7d6;
  --bone-dim: rgba(239,231,214,.62);
  --bone-faint: rgba(239,231,214,.52);

  --wordmark: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --face: "Anek Latin", "Avenir Next", sans-serif;
  --mono: "Reddit Mono", ui-monospace, "Courier New", monospace;

  --pad: clamp(1.15rem, 5vw, 5rem);
  --measure: 60ch;

  /* the three things Meeta can move from the editing bar. Defaults are the built design,
     so the site looks exactly as it did until somebody chooses otherwise. */
  --tscale: 1;
  --veil: rgba(10,14,16,.86);   /* the top bar's smoked glass, derived from the ground */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--slate-deep); }

body {
  margin: 0; color: var(--bone);
  font-family: var(--face); font-weight: 400;
  font-size: clamp(1.06rem, 1.3vw, 1.24rem); line-height: 1.62;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  background: transparent;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── THE GROUND ───────────────────────────────────────────────────────────────────
   Living morphic masses: soft-edged bodies of colour pulled across the slate, blurred
   and screen-blended, with the border-radius ITSELF animating so the shapes change form
   rather than merely sliding. Nothing here is a flat fill and nothing is a hard edge. */

.ground { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--slate-hi) 0%, var(--slate) 40%, var(--slate-deep) 100%); }

.mass { position: absolute; filter: blur(46px); mix-blend-mode: screen;
  will-change: transform, border-radius; }

.m1 { width: 62vw; height: 54vw; left: -16vw; top: -10vw;
  background: radial-gradient(closest-side, rgba(232,185,58,.52), rgba(232,185,58,.16) 55%, transparent 74%);
  border-radius: 58% 42% 46% 54% / 44% 52% 48% 56%;
  animation: morphA 34s ease-in-out infinite alternate, floatA 58s ease-in-out infinite alternate; }
.m2 { width: 70vw; height: 58vw; right: -22vw; top: 12vh;
  background: radial-gradient(closest-side, rgba(28,76,192,.60), rgba(28,76,192,.20) 52%, transparent 74%);
  border-radius: 44% 56% 62% 38% / 56% 44% 60% 40%;
  animation: morphB 41s ease-in-out infinite alternate, floatB 73s ease-in-out infinite alternate; }
.m3 { width: 46vw; height: 44vw; left: 22vw; top: 52vh;
  background: radial-gradient(closest-side, rgba(224,67,30,.50), rgba(224,67,30,.16) 54%, transparent 74%);
  border-radius: 62% 38% 40% 60% / 40% 62% 38% 60%;
  animation: morphC 47s ease-in-out infinite alternate, floatC 66s ease-in-out infinite alternate; }
.m4 { width: 40vw; height: 38vw; right: 6vw; bottom: -8vw;
  background: radial-gradient(closest-side, rgba(142,198,63,.40), rgba(142,198,63,.12) 56%, transparent 76%);
  border-radius: 50% 50% 36% 64% / 60% 36% 64% 40%;
  animation: morphA 53s ease-in-out infinite alternate-reverse, floatB 81s ease-in-out infinite alternate; }
.m5 { width: 34vw; height: 30vw; left: 4vw; bottom: 8vh;
  background: radial-gradient(closest-side, rgba(247,211,106,.34), transparent 70%);
  border-radius: 40% 60% 58% 42% / 52% 48% 56% 44%;
  animation: morphB 61s ease-in-out infinite alternate, floatA 94s ease-in-out infinite alternate-reverse; }

@keyframes morphA {
  0%   { border-radius: 58% 42% 46% 54% / 44% 52% 48% 56%; }
  50%  { border-radius: 38% 62% 66% 34% / 62% 38% 60% 40%; }
  100% { border-radius: 66% 34% 38% 62% / 36% 64% 40% 60%; } }
@keyframes morphB {
  0%   { border-radius: 44% 56% 62% 38% / 56% 44% 60% 40%; }
  50%  { border-radius: 64% 36% 34% 66% / 38% 60% 42% 58%; }
  100% { border-radius: 40% 60% 56% 44% / 60% 40% 58% 42%; } }
@keyframes morphC {
  0%   { border-radius: 62% 38% 40% 60% / 40% 62% 38% 60%; }
  50%  { border-radius: 36% 64% 60% 40% / 64% 34% 62% 38%; }
  100% { border-radius: 54% 46% 44% 56% / 46% 56% 44% 54%; } }
@keyframes floatA { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(7vw,5vh,0) scale(1.14); } }
@keyframes floatB { from { transform: translate3d(0,0,0) scale(1.1); }  to { transform: translate3d(-6vw,-6vh,0) scale(.96); } }
@keyframes floatC { from { transform: translate3d(0,0,0) scale(.98); }  to { transform: translate3d(4vw,-8vh,0) scale(1.18); } }

/* paint-runs breathing down the ground — gravity, alive */
.grun { position: absolute; top: 0; width: 4px; filter: blur(3px); mix-blend-mode: screen;
  transform-origin: top center; }
.gr1 { left: 8vw;  height: 46vh; background: linear-gradient(to bottom, var(--acid), rgba(232,185,58,0));
  animation: breathe1 26s ease-in-out infinite alternate; }
.gr2 { left: 31vw; height: 26vh; background: linear-gradient(to bottom, var(--vermilion), rgba(224,67,30,0));
  animation: breathe2 34s ease-in-out infinite alternate; }
.gr3 { right: 12vw; height: 58vh; background: linear-gradient(to bottom, var(--cobalt-lit), rgba(28,76,192,0));
  animation: breathe1 41s ease-in-out infinite alternate-reverse; }
.gr4 { right: 27vw; height: 18vh; background: linear-gradient(to bottom, var(--lime), rgba(142,198,63,0));
  animation: breathe2 48s ease-in-out infinite alternate; }
@keyframes breathe1 { from { transform: scaleY(.78); opacity: .55; } to { transform: scaleY(1.12); opacity: .95; } }
@keyframes breathe2 { from { transform: scaleY(1.1); opacity: .9; }  to { transform: scaleY(.72); opacity: .5; } }

/* the medium shows through */
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

/* sections settle in rather than appearing */
.rise { opacity: 0; transform: translateY(18px); }
.rise.in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2,.8,.3,1), transform .9s cubic-bezier(.2,.8,.3,1); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--acid); color: #101315; padding: .6rem 1rem; z-index: 99; }

/* ── notice ───────────────────────────────────────────────────────────────────── */

.notice {
  background: var(--vermilion); color: #fff5f0;
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; text-align: center;
  padding: .5rem var(--pad);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 78% 100%, 42% 76%, 12% 96%, 0 72%);
}

/* ── top bar ──────────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem var(--pad); background: var(--veil); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(239,231,214,.12);
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none;
  /* held to the wordmark's own line box (1.42rem x 1.62), so the bar is exactly the same
     height whether or not the name is in it — measured, not guessed */
  min-height: 2.3rem; }

.brand img { width: 28px; filter: invert(1) brightness(1.7); opacity: .9; }
.wordmark { font-family: var(--wordmark); font-size: 1.42rem; letter-spacing: .05em; text-transform: uppercase; }
.nav { display: flex; gap: 1.5rem; align-items: center; }
.nav a { text-decoration: none; font-family: var(--mono); font-weight: 500; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim); padding: .25rem 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--acid); border-bottom-color: var(--acid); }
.menu { display: none; }

/* ── type ─────────────────────────────────────────────────────────────────────── */

h1.title { font-weight: 700; font-size: clamp(2.2rem, 6.6vw, 5rem); line-height: 1.02;
  letter-spacing: -.018em; margin: 0 0 1rem; color: var(--bone); }
.hl { color: var(--acid); }
p.sub { font-weight: 400; font-size: clamp(1.1rem, 1.95vw, 1.6rem); line-height: 1.3;
  color: var(--bone-dim); margin: 0 0 1.6rem; max-width: 44ch; }
p.credit { font-family: var(--mono); font-size: .84rem; line-height: 1.6; color: rgba(239,231,214,.68);
  border-left: 3px solid var(--vermilion); padding: .15rem 0 .15rem .9rem; margin: 0 0 2rem; max-width: 54ch; }
.body { max-width: var(--measure); color: rgba(239,231,214,.86); }
.body p { margin: 0 0 1.2rem; }
.body.two { max-width: 100%; columns: 2; column-gap: 3.4rem; }
@media (max-width: 760px) { .body.two { columns: 1; } }
p.note { font-style: italic; color: var(--bone-dim); max-width: 52ch; margin: 0 0 1.5rem; }

/* a question is not a heading — it is a mass of light in the dark */
p.question {
  font-weight: 600; font-size: clamp(1.6rem, 3.8vw, 3.1rem); line-height: 1.14;
  letter-spacing: -.014em; color: var(--acid); max-width: 20ch; margin: 2.4rem 0;
}

/* ── home ─────────────────────────────────────────────────────────────────────── */

.hail {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.6rem;
  padding: .9rem var(--pad); background: var(--acid); color: #14100a;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 66% 100%, 24% 80%, 0 98%);
}
.hail .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.hail a { font-weight: 700; font-size: clamp(1rem, 2.1vw, 1.35rem); text-decoration: none; word-break: break-word; }
.hail a:hover { text-decoration: underline; }
.hail .place { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; opacity: .68; margin-left: auto; }

/* the lone protagonist: one small mark held by a great deal of dark */
.hero { padding: clamp(2.6rem, 8vw, 6.5rem) var(--pad) clamp(2rem, 5vw, 4rem); position: relative; }
.hero .beemark { width: clamp(40px, 5vw, 74px); filter: invert(1) brightness(1.9); opacity: .95; margin: 0 0 clamp(1.4rem, 3.6vw, 3rem); }
.hero h1 { display: inline-block; font-family: var(--wordmark); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.4rem, 16.5vw, 15rem); line-height: .82; letter-spacing: .012em; margin: 0; color: var(--bone); }
/* one fat paint-run off the masthead — gravity is a force */
.hero .run { position: absolute; width: 11px; height: clamp(70px, 12vw, 190px);
  background: linear-gradient(to bottom, var(--acid), rgba(232,185,58,0)); border-radius: 0 0 6px 6px; }
.hero .strap { font-family: var(--mono); font-weight: 500; font-size: clamp(.72rem, 1.5vw, .98rem);
  letter-spacing: .2em; text-transform: uppercase; color: var(--acid); margin: 1.8rem 0 0; }
.hero .tagline { font-size: clamp(1.2rem, 2.2vw, 1.85rem); line-height: 1.34; max-width: 32ch;
  margin: 1.6rem 0 0; color: var(--bone-dim); }

/* an image stands on the ground as a panel, hand-cut, never a rectangle */
.bleed { padding: 0 var(--pad); margin: clamp(2rem, 5vw, 4rem) 0; }
.bleed img { width: auto; max-width: min(100%, 1280px); height: auto;
  clip-path: polygon(0.6% 0, 100% 1.4%, 99.3% 100%, 0 98.4%);
  box-shadow: 0 30px 70px rgba(0,0,0,.55); }

.band { padding: clamp(3.5rem, 9vw, 7rem) var(--pad); }
.band.yellow { background: var(--acid); color: #14100a; position: relative;
  clip-path: polygon(0 2.2%, 100% 0, 100% 97.6%, 0 100%); }
.band.yellow::after { content: ""; position: absolute; left: 12%; top: 100%; width: 9px; height: clamp(40px, 7vw, 120px);
  background: linear-gradient(to bottom, var(--acid), rgba(232,185,58,0)); }
.band.yellow p.question { color: #14100a; max-width: 24ch; margin: 0; }
.intro { padding: clamp(3rem, 7vw, 5.5rem) var(--pad); }

/* ── THE SWIVELLING WALL ──────────────────────────────────────────────────────── */

.works { padding: clamp(3rem, 7vw, 5.5rem) var(--pad) clamp(4rem, 10vw, 8rem); }
.works h2 { font-family: var(--mono); font-weight: 500; font-size: .82rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--bone-faint); margin: 0 0 2.4rem; }

.wall { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(1.8rem, 3.6vw, 3.4rem); perspective: 1600px; }

.panel { text-decoration: none; display: block; position: relative; }

/* only the FACE turns. Rotating the whole panel dragged the caption across the image —
   the wall is the panels, and the labels stand on the ground in front of it. */
.panel .face { position: relative; overflow: hidden; background: var(--slate-lift);
  aspect-ratio: 4 / 3; clip-path: polygon(1.1% 0, 100% 1.6%, 98.8% 100%, 0 98%);
  box-shadow: 0 26px 54px rgba(0,0,0,.5);
  transition: transform .8s cubic-bezier(.2,.8,.25,1); }
.panel:nth-child(odd) .face  { transform: rotateY(-7deg); transform-origin: left center; }
.panel:nth-child(even) .face { transform: rotateY(7deg);  transform-origin: right center; }
.panel:hover .face { transform: rotateY(0deg); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(232,185,58,.35), 0 0 60px rgba(232,185,58,.16); }
.panel .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(190deg, rgba(10,14,16,0) 40%, rgba(10,14,16,.55) 100%);
  transition: opacity .8s; opacity: .9; }
.panel:hover .face::before { opacity: .35; }
.panel .face img { width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.06) contrast(1.03); transition: transform .9s cubic-bezier(.2,.8,.25,1); }
.panel:hover .face img { transform: scale(1.05); }

/* the hinge, catching light */
.panel .face::after { content: ""; position: absolute; top: 0; bottom: 0; width: 5px; z-index: 2;
  background: linear-gradient(to bottom, var(--acid), rgba(232,185,58,.15)); }
.panel:nth-child(odd) .face::after  { left: 0; }
.panel:nth-child(even) .face::after { right: 0; background: linear-gradient(to bottom, var(--cobalt-lit), rgba(28,76,192,.12)); }
.panel:nth-child(4n) .face::after   { background: linear-gradient(to bottom, var(--vermilion), rgba(224,67,30,.12)); }

.panel h3 { font-weight: 700; font-size: 1.4rem; line-height: 1.18; margin: 1.1rem 0 .35rem; color: var(--bone); }
.panel:hover h3 { color: var(--acid); }
.panel .csub { color: var(--bone-dim); font-size: .96rem; line-height: 1.42; margin: 0 0 .55rem; }
.panel .cq { font-family: var(--mono); font-size: .8rem; line-height: 1.55; color: rgba(239,231,214,.6); margin: 0; }
.wall .panel:nth-child(7n+1) { grid-column: span 2; }
.wall .panel:nth-child(7n+1) .face { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .wall .panel:nth-child(7n+1) { grid-column: span 1; } }

/* ── a project ────────────────────────────────────────────────────────────────── */

.workhead { padding: clamp(2rem, 4.5vw, 3.6rem) var(--pad) clamp(1.2rem, 2.6vw, 2.2rem); }
.backlink { font-family: var(--mono); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--bone-faint); display: inline-block; margin-bottom: 1.8rem; }
.backlink:hover { color: var(--acid); }
.workbody { padding: 0 var(--pad) clamp(3rem, 7vw, 5rem); }

.gallery { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.8rem); margin: 2.8rem 0; perspective: 1400px; }
.gallery figure { margin: 0; position: relative; }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  background: var(--slate-lift); clip-path: polygon(1.4% 0, 100% 2%, 98.4% 100%, 0 97.6%);
  box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.gallery figure:nth-child(odd) img { transform: rotateY(-4deg); }
.gallery figure:nth-child(even) img { transform: rotateY(4deg); }
.gallery figcaption { font-family: var(--mono); font-size: .74rem; line-height: 1.45; color: var(--bone-faint); margin-top: .55rem; }
.gallery figure:nth-child(5n+1) { grid-column: span 2; }
.gallery figure:nth-child(5n+1) img { aspect-ratio: 16 / 9; }
@media (max-width: 760px) { .gallery figure:nth-child(5n+1) { grid-column: span 1; } .gallery img { transform: none !important; } }

figure.onefig { margin: 2rem 0; }
figure.onefig img { width: auto; max-width: min(100%, 1000px); height: auto;
  clip-path: polygon(1% 0, 100% 1.6%, 99% 100%, 0 98.2%); box-shadow: 0 22px 48px rgba(0,0,0,.5); }
figure.onefig figcaption { font-family: var(--mono); font-size: .76rem; color: var(--bone-faint); margin-top: .5rem; }

.pager { display: flex; justify-content: space-between; gap: 1.5rem;
  padding: clamp(2rem, 5vw, 3.5rem) var(--pad) clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid rgba(239,231,214,.14); }
.pager a { text-decoration: none; max-width: 44%; }
.pager .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone-faint); display: block; margin-bottom: .35rem; }
.pager .nm { font-weight: 700; font-size: 1.14rem; line-height: 1.25; }
.pager a:hover .nm { color: var(--acid); }
.pager .next { text-align: right; margin-left: auto; }

/* ── contact ──────────────────────────────────────────────────────────────────── */

.contactblock { display: grid; gap: 1.8rem; justify-items: start; align-items: start; }
.contactblock .mail { font-weight: 700; font-size: clamp(1.35rem, 4.6vw, 3rem); line-height: 1.12;
  text-decoration: none; word-break: break-word; color: var(--acid); display: inline-block; }
.contactblock .mail:hover { color: var(--acid-hot); text-decoration: underline; }
.marks { display: flex; gap: 1.2rem; align-items: center; }
.marks img { height: 92px; width: auto; }
.marks img.qr { background: #fff; padding: 5px; }

/* ── footer ───────────────────────────────────────────────────────────────────── */

.foot { background: var(--slate-deep); border-top: 4px solid var(--acid); color: var(--bone);
  padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(2rem, 4vw, 3rem); }
.foot-in { display: grid; grid-template-columns: 1.2fr 1.2fr auto; gap: 2.2rem; align-items: start; }
.foot-bee { width: 36px; margin-bottom: .8rem; filter: invert(1) brightness(1.8); opacity: .85; }
.foot-name { font-family: var(--wordmark); font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.foot-sub { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--bone-faint); margin: .35rem 0 0; }
.foot-ask { font-weight: 700; font-size: 1.05rem; margin: 0 0 .4rem; color: var(--bone-dim); }
.foot-mail a { font-weight: 700; font-size: clamp(1rem, 2vw, 1.35rem); color: var(--acid); text-decoration: none; word-break: break-word; }
.foot-mail a:hover { text-decoration: underline; }
.foot-c { display: grid; gap: .5rem; justify-items: end; }
.foot-c a { font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bone-faint); text-decoration: none; }
.foot-c a:hover { color: var(--acid); }
.colophon { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.2rem; border-top: 1px solid rgba(239,231,214,.12);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--bone-faint); }
.colophon a { color: var(--bone-dim); text-decoration: none; border-bottom: 1px solid rgba(232,185,58,.4); }
.colophon a:hover { color: var(--acid); border-bottom-color: var(--acid); }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } .foot-c { justify-items: start; } }

main { min-height: 34vh; }
.loading { min-height: 60vh; display: grid; place-items: center;
  font-family: var(--wordmark); font-size: 2rem; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-faint); }

/* ── sign-in and editing ──────────────────────────────────────────────────────── */

button, .btn { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--acid); color: #14100a; border: none; padding: .55rem 1rem; cursor: pointer; }
button.ghost { background: transparent; color: var(--bone-dim); border: 1px solid rgba(239,231,214,.28); }
button.ghost:hover { color: var(--bone); border-color: rgba(239,231,214,.6); }
button:hover { filter: brightness(1.08); }

dialog#signin { border: none; padding: 0; background: transparent; color: var(--bone); }
dialog#signin::backdrop { background: rgba(6,9,10,.86); backdrop-filter: blur(4px); }
#signinform { background: var(--slate-lift); border: 1px solid rgba(239,231,214,.16); padding: 1.9rem 1.8rem;
  min-width: min(88vw, 360px); box-shadow: 0 34px 90px rgba(0,0,0,.6);
  clip-path: polygon(1.4% 0, 100% 1.2%, 98.6% 100%, 0 98.6%); }
#signinform .label { font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase;
  font-size: .78rem; color: var(--acid); margin: 0 0 1.2rem; }
#signinform input { width: 100%; background: #0b0f11; border: 1px solid rgba(239,231,214,.22); color: var(--bone);
  font-family: var(--mono); font-size: 1rem; padding: .7rem .8rem; letter-spacing: .08em; }
#signinform input:focus { outline: none; border-color: var(--acid); }
#signinform .row { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
.err { color: #ff8a72; font-family: var(--mono); font-size: .82rem; margin: .65rem 0 0; }

.bar { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center;
  background: var(--slate-lift); border: 1px solid rgba(239,231,214,.2); padding: .5rem .7rem;
  box-shadow: 0 22px 54px rgba(0,0,0,.55); max-width: 94vw; }
.bar .tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--acid); }
.bar .state { font-family: var(--mono); font-size: .74rem; color: var(--bone-faint); }

body.editing [contenteditable] { outline: 1px dashed rgba(58,110,232,.5); outline-offset: 4px; }
body.editing [contenteditable]:focus { outline: 2px solid var(--cobalt-lit); background: rgba(28,76,192,.12); }
body.editing .block { position: relative; }
.tools { position: absolute; top: -14px; right: -6px; display: none; gap: 2px; z-index: 5; }
body.editing .block:hover > .tools, body.editing .block:focus-within > .tools { display: flex; }
.tools button { background: var(--slate-lift); color: var(--bone); border: 1px solid rgba(239,231,214,.22);
  font-size: .62rem; padding: .2rem .42rem; letter-spacing: .06em; }
.tools button:hover { background: var(--cobalt); color: #fff; }
.tools button.warn:hover { background: var(--vermilion); }
.adder { display: none; margin: .4rem 0 1.3rem; gap: 5px; }
body.editing .adder { display: flex; flex-wrap: wrap; }
.adder select, .adder button { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.adder select { background: transparent; border: 1px dashed rgba(239,231,214,.3); color: var(--bone-dim); padding: .3rem .5rem; cursor: pointer; }

/* ── narrow ───────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .nav { position: fixed; inset: auto 0 auto 0; top: 96px; background: var(--slate-deep); flex-direction: column;
    gap: 0; padding: .5rem var(--pad) 1.3rem; border-bottom: 1px solid rgba(239,231,214,.14); display: none; }
  .nav.open { display: flex; align-items: flex-start; }
  .nav a { padding: .75rem 0; font-size: .95rem; }
  .menu { display: block; background: transparent; color: var(--acid); border: 1px solid rgba(239,231,214,.28);
    padding: .35rem .6rem; font-size: 1rem; }
  .wall { grid-template-columns: 1fr; perspective: none; }
  .panel .face, .panel:nth-child(even) .face, .panel:nth-child(odd) .face { transform: none; }
  .gallery { grid-template-columns: 1fr; }
  .pager { flex-direction: column; }
  .pager .next { text-align: left; margin-left: 0; }
  .hail .place { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel .face, .panel .face img { transition: none; }
}

/* ── THE LOOK CONTROLS ────────────────────────────────────────────────────────────
   Three things Meeta can change from the editing bar without touching a file: the
   ground colour, the size of the text, and how wavy the yellow bar is. Each writes one
   value into the document, so the choice is saved and versioned like any other edit.

   🔴 The defaults here are the built design. Nothing below fires until a value is set,
   and every rule falls back to what the page already looked like. */

/* text size — the vw terms are inside the calc so display type scales too, not only body copy */
body                { font-size: calc(clamp(1.06rem, 1.3vw, 1.24rem) * var(--tscale)); }
.hero .tagline      { font-size: calc(clamp(1.2rem, 2.2vw, 1.85rem) * var(--tscale)); }
.hero .strap        { font-size: calc(clamp(.72rem, 1.5vw, .98rem) * var(--tscale)); }
.hero h1            { font-size: calc(clamp(3.4rem, 16.5vw, 15rem) * var(--tscale)); }
p.question          { font-size: calc(clamp(1.6rem, 3.8vw, 3.1rem) * var(--tscale)); }
.hail a             { font-size: calc(clamp(1rem, 2.1vw, 1.35rem) * var(--tscale)); }

/* a light ground needs the opposite blend, or the masses wash out to nothing and the
   grain darkens instead of lifting */
html[data-look="light"] .mass  { mix-blend-mode: multiply; opacity: .55; }
html[data-look="light"] .grun  { mix-blend-mode: multiply; opacity: .5; }
html[data-look="light"] .grain { mix-blend-mode: multiply; opacity: .12; }
/* the bee is a dark line drawing; it is inverted to stand on a dark ground and must not be
   inverted on a pale one, or it disappears into the paper */
html[data-look="light"] .brand img,
html[data-look="light"] .foot-bee,
html[data-look="light"] .hero .beemark { filter: none; opacity: .8; }
html[data-look="light"] .panel .face::before {
  background: linear-gradient(190deg, rgba(10,14,16,0) 55%, rgba(10,14,16,.35) 100%); }

/* the wave: when a wave amount is set the angular clip is dropped and a mask takes over.
   The mask itself is written by app.js, because the amount is continuous. */
.hail[data-waved] { clip-path: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* the panel itself */
.look { position: fixed; right: 1.2rem; bottom: 4.6rem; z-index: 61; width: min(320px, 92vw);
  background: var(--slate-lift); border: 1px solid rgba(239,231,214,.2); padding: .9rem 1rem 1rem;
  box-shadow: 0 22px 54px rgba(0,0,0,.55); font-family: var(--mono); font-size: .72rem;
  color: var(--bone); letter-spacing: .06em; }
.look h3 { margin: 0 0 .8rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--acid); }
.look label { display: block; margin: 0 0 .35rem; text-transform: uppercase; letter-spacing: .14em;
  font-size: .64rem; color: var(--bone-faint); }
.look .row { margin: 0 0 .95rem; display: flex; align-items: center; gap: .6rem; }
.look .row input[type="range"] { flex: 1; accent-color: var(--acid); }
.look .row input[type="color"] { width: 46px; height: 30px; padding: 0; border: 1px solid rgba(239,231,214,.28);
  background: transparent; cursor: pointer; }
.look .val { min-width: 3.4em; text-align: right; color: var(--bone-dim); }
.look .swatches { display: flex; flex-wrap: wrap; gap: 5px; margin: .1rem 0 0; }
.look .swatches button { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(239,231,214,.3); cursor: pointer; }
.look .lkfoot { display: flex; gap: .4rem; margin-top: .2rem; }
.look .lkfoot button { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--bone-dim); border: 1px solid rgba(239,231,214,.28); padding: .32rem .55rem; cursor: pointer; }
.look .lkfoot button:hover { background: var(--cobalt); color: #fff; border-color: var(--cobalt); }
@media (max-width: 760px) { .look { right: .6rem; left: .6rem; width: auto; bottom: 5.4rem; } }

/* a replaced bee mark is presumably already the right colour for the ground it stands on */
/* a checkbox row in the Look panel — its own class, since a generic one would inherit
   the site's own rules the way an earlier .foot did */
.look .lkcheck { display: flex; align-items: center; gap: .5rem; margin: 0 0 .95rem;
  text-transform: none; letter-spacing: .02em; font-size: .78rem; color: var(--bone);
  cursor: pointer; }
.look .lkcheck input { accent-color: var(--acid); width: 16px; height: 16px; }

/* Two lockups, two switches, both off by default — the Look panel turns either back on.
   The top bar and the footer are one identity and move together; the home page's masthead
   is its own, and is not rendered at all when off (see home() in app.js). The footer's
   MAPBEE in type stays either way, so the site is never nameless. */
html[data-logo-header="off"] .brand img,
html[data-logo-header="off"] .brand .wordmark,
html[data-logo-header="off"] .foot-bee { display: none; }

html[data-bee="custom"] .brand img,
html[data-bee="custom"] .foot-bee,
html[data-bee="custom"] .hero .beemark { filter: none; }