:root {
  --ink: #0a0a0a;
  --paper: #f6efdc;          /* light cream */
  --mute: #6f6857;
  --hair: #d8cfb6;
  --neon: #00e5cf;
  --mount: #111;             /* black album paper behind each picture */
  /* Comic Neue: free Comic Sans look-alike; real Comic Sans is used where the visitor has it installed */
  --face: "Comic Neue", "Comic Sans MS", "Comic Sans", cursive;
  /* picture width: as large as the window height allows, up to 42% of the page */
  --w: min(42vw, 60vh);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--face);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }

/* ---------- Top bar: docket mark (left) + menus (right), both ~10% from top ---------- */
.top {
  position: absolute;
  top: 10vh;
  left: 5vw;
  right: 5vw;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 5;
}

/* Bench web — nine seats spread across the whole page, joined one line at a time; always sits behind everything */
.web {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.web line { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.web line.new { stroke-width: 2; opacity: 1; }
.web circle { fill: var(--neon); }
main, footer { position: relative; z-index: 1; }

/* Menus — always one row */
nav { display: flex; gap: 2rem; }
.menu { position: relative; }
.menu > button {
  all: unset;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .35rem 0;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.menu > button .x {
  display: inline-block;
  width: .42rem; height: .42rem;
  position: relative;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.menu > button .x::before, .menu > button .x::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 100%;
  background: currentColor; transform-origin: center;
}
.menu > button .x::before { transform: translateX(-50%) rotate(0deg); }
.menu > button .x::after  { transform: translateX(-50%) rotate(90deg); }
.menu.open > button .x { transform: rotate(45deg); }
.menu > button:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 4px; }

.drop {
  position: absolute;
  right: 0;
  top: calc(100% + .7rem);
  min-width: 8.6rem;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  list-style: none;
  padding: .25rem 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 6;
}
.menu.open .drop { opacity: 1; transform: none; pointer-events: auto; }
.drop a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .42rem .7rem;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 400;
  white-space: nowrap;
}
.drop a::after { content: "→"; opacity: 0; transform: translateX(-4px); transition: .15s; margin-left: .6rem; }
.drop a:hover, .drop a:focus-visible { background: var(--ink); color: var(--paper); outline: none; }
.drop a:hover::after, .drop a:focus-visible::after { opacity: 1; transform: none; }
.drop a[aria-disabled="true"] .soon {
  font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-left: .8rem;
}
.drop a[aria-disabled="true"]:hover .soon { color: #bbb; }

/* ---------- Hero ---------- */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7vh 0 5vh;
}
.lockup { width: var(--w); display: flex; flex-direction: column; align-items: center; }

h1 {
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}
/* home wordmark: sized by JS to run ~6% wider than the picture */
#title {
  font-style: italic;
  margin-bottom: .9rem;
  opacity: 0;
  transition: opacity .6s ease;
}
#title.ready { opacity: 1; }
#title .a { color: var(--neon); }

/* a picture pasted on black construction paper in a photo album */
.mount {
  width: var(--w);
  background: var(--mount);
  padding: calc(var(--w) * .04);
  box-shadow: 0 1px 0 #000, 0 .5rem 1.1rem rgba(40, 30, 10, .28);
  transform: rotate(-.8deg);
  /* the curtain behind the bench parts */
  clip-path: inset(-10% 50% -10% 50%);
  animation: open 1.4s cubic-bezier(.7,0,.2,1) .2s forwards;
}
.mount img { width: 100%; height: auto; display: block; }
@keyframes open { to { clip-path: inset(-10% -10% -10% -10%); } }

.tag {
  margin-top: 1.4rem;
  width: calc(var(--w) * 1.6);
  font-weight: 400;
  font-size: clamp(.95rem, 1.35vw, 1.45rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
  line-height: 1.45;
}
.tag i { font-style: normal; letter-spacing: .18em; margin: 0 .1em 0 .28em; }
.tag.yup { font-size: clamp(1.4rem, 2.1vw, 2.2rem); font-weight: 700; }
.tag .wink { text-transform: none; }
.tag b { white-space: nowrap; font-weight: 700; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }

/* ---------- Coming-soon page ---------- */
.soon-page { --w: min(70vw, 84vh); }
.soon-page h1 {
  font-size: calc(var(--w) * .115);
  letter-spacing: .04em;
  margin-bottom: 1.1rem;
}
.soon-page .mount { transform: rotate(.7deg); padding: calc(var(--w) * .028); }
.back {
  margin-top: 1.5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}
.back:hover, .back:focus-visible { background: var(--ink); color: var(--paper); outline: none; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--hair);
  margin: 0 5vw;
  padding: 1.4rem 0 1.6rem;
  display: flex;
  justify-content: space-between;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .58rem;
}

/* ---------- Small screens ---------- */
/* narrow windows: drop the heading below the menus so they do not collide */
@media (max-width: 1340px) { main { padding-top: 19vh; } }
@media (max-width: 560px) {
  .top { position: relative; padding: 5vh 16px 0; }
  nav { width: 100%; justify-content: space-between; gap: .5rem; }
  .menu:first-child .drop { right: auto; left: 0; }
  .menu > button { font-size: .64rem; letter-spacing: .06em; }
  main { padding: 6vh 16px 9vh; }
  :root, .soon-page { --w: 82vw; }
  .tag { width: 88vw; }
  footer { margin: 0 16px; flex-direction: column; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mount { animation: none; clip-path: none; }

}