/* /: the front page. Theme lives in /neo.css. */

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(20px, 5vw, 64px);
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--gutter) clamp(56px, 8vw, 96px);
}
.hero .sticker {
  justify-self: center;
  width: clamp(160px, 18vw, 220px);
  margin: 0;
}
.hero .bubble {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
  text-wrap: balance;
}
.hero .lede {
  max-width: 30ch;
  margin: 0.6em 0 0;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
}

/* ---------- the doors ---------- */

/* a row of front doors standing on the stoop. each one swings in when you
   reach for it, and something looks back out. */
.doors {
  --pad: 14px;          /* door edge to its window and its sign */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 clamp(14px, 2.2vw, 30px);
  max-width: var(--wide);
  margin: 0 auto;
  padding-block: clamp(40px, 6vw, 64px);
  padding-inline: var(--gutter);
}

.door {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  height: clamp(220px, 22vw, 268px);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background: var(--ink);                /* the dark inside */
  border: var(--line) solid var(--ink);
  border-bottom-width: 12px;             /* the sill */
  border-radius: var(--round) var(--round) 0 0;
  box-shadow: var(--drop) 0 0 var(--ink);
  perspective: 700px;
}

/* the door itself, knob and all */
.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at calc(100% - 19px) 60%, var(--knob, var(--ink)) 0 8px, transparent 8.5px),
    var(--leaf, var(--paper));
  border-radius: calc(var(--round) - var(--line)) calc(var(--round) - var(--line)) 0 0;
}

/* who's home */
.door::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 47%;
  right: 12px;
  width: 36px;
  height: 36px;
  background: radial-gradient(circle, var(--eye) 0 8.5px, var(--ink) 9px 12.5px, var(--paper) 13px);
  border-radius: 50%;
}

/* the window. whatever text is in the span stays hidden: it's glass */
.door-glyph {
  position: absolute;
  z-index: 2;
  top: var(--pad);
  left: var(--pad);
  right: var(--pad);
  height: 34%;
  overflow: hidden;
  font-size: 0;
  background:
    linear-gradient(118deg, transparent 0 34%, var(--paper) 34% 43%, transparent 43% 49%, var(--paper) 49% 53%, transparent 53%),
    var(--ground);
  border: var(--line) solid var(--ink);
  border-radius: 12px;
}

/* the sign */
.door-text {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: 34px;
  bottom: 16px;
  font: 700 clamp(1.1rem, 1.9vw, 1.5rem)/1.05 var(--puff);
  text-wrap: balance;
}

/* all three hinge on the door's left edge, so they swing as one slab */
.door::before { transform-origin: 0 50%; }
.door-glyph,
.door-text { transform-origin: calc(-1 * var(--pad)) 50%; }
.door::before,
.door-glyph,
.door-text { transition: transform 0.24s cubic-bezier(0.3, 0.8, 0.3, 1.15); }

@media (hover: hover) {
  .door:hover::before,
  .door:hover .door-glyph,
  .door:hover .door-text { transform: rotateY(44deg); }
}
.door:focus-visible::before,
.door:focus-visible .door-glyph,
.door:focus-visible .door-text,
.door:active::before,
.door:active .door-glyph,
.door:active .door-text { transform: rotateY(44deg); }

/* the red door: the main way in */
.door-main {
  --leaf: var(--eye);
  height: clamp(250px, 25vw, 300px);
  color: var(--paper);
}

/* the one that shows up when you type the word (app.js) */
.door.secret {
  --leaf: var(--ink);
  --knob: var(--paper);
  color: var(--paper);
}
.door.secret::before { box-shadow: inset 0 0 0 3px var(--paper); }
.door.secret .door-glyph {
  background: radial-gradient(circle, var(--eye) 0 13px, var(--ink) 13.5px 18px, var(--paper) 18.5px);
  border-color: var(--paper);
}
.door.secret .door-text { font-size: clamp(0.95rem, 1.5vw, 1.2rem); }

/* the stoop: two steps under the whole row */
.doors::before,
.doors::after {
  content: "";
  flex: 0 0 auto;
  height: 30px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 6px;
}
.doors::before {
  order: 98;
  width: calc(100% + 16px);
  margin: 0 -8px;
}
.doors::after {
  order: 99;
  width: calc(100% + 44px);
  margin: calc(-1 * var(--line)) -22px 0;
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
}

.foot a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.foot a:hover {
  color: var(--eye);
}

/* narrower than a street: two doors to a row, the red one double-wide */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .hero .sticker {
    width: clamp(140px, 36vw, 200px);
    margin: 0 auto;
  }
  .hero .bubble,
  .hero .lede {
    justify-self: center;
  }
  .hero .lede { margin-inline: auto; }
  .doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    max-width: 560px;
    padding-inline: calc(var(--gutter) + 8px);
  }
  .door { height: 204px; }
  .door-main { height: 150px; }
  .door-main,
  .door:last-of-type:nth-of-type(even) { grid-column: 1 / -1; }  /* no door left alone on a row */
  .door:last-of-type:nth-of-type(even):not(.door-main) { height: 150px; }
  .door-text { font-size: 1.2rem; }
  .door-main .door-text { font-size: 1.5rem; }
  .doors::before,
  .doors::after {
    grid-column: 1 / -1;
    width: auto;
  }
  .doors::before { margin: -16px 0 0; }
  .doors::after { margin: -20px -8px 0; }
}