/* ============================================================
   hdw site kit · LAYOUT
   The frame every page sits in: header, menu, the opening
   statement, rows of label and content, the hero foot, the
   footer. The whole site is one shape: a sentence, then rows.
   ============================================================ */

/* ---- header: the mark left, Menu + right, nothing between ---- */
.top{
  position:fixed;
  inset:0 0 auto 0;
  z-index:var(--z-top);
  height:calc(var(--top-h) + env(safe-area-inset-top, 0px));
  padding-top:env(safe-area-inset-top, 0px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:var(--edge);
  padding-right:var(--edge);
  /* No bar. The mark and Menu + are the ink on the page, and ui.js moves each
     to white over a photo or to the panel's ink over the footer, so they are
     only ever black or white. */
  color:var(--ink);
  pointer-events:none;
}
.top > *,.theme-btn{transition:color var(--dur-s) ease, opacity var(--dur-s) ease;}
.is-on-photo{color:#fff !important;filter:drop-shadow(0 0 5px rgba(0,0,0,.55));}
.is-on-panel{color:var(--panel-ink) !important;}
body.has-menu .top-btn{color:var(--panel-ink);}
.top > *{pointer-events:auto;position:relative;z-index:1;}
.top-mark{display:inline-flex;align-items:center;min-height:40px;margin-left:1.5px;} /* the mark's bar sits flush; type has a little air, so it moves in to line up */
.top-mark svg{height:26px;width:auto;color:inherit;}
.top-btn{
  min-height:40px;
  min-width:40px;
  line-height:var(--lh-tight);
  color:inherit;
  transition:opacity var(--dur-s) ease;
}
@media (hover:hover){ .top-btn:hover{opacity:.6;} }
.top-btn:active{transform:scale(var(--press));}

/* ---- menu: a panel from the right, the page dims under it ---- */
.menu{
  position:fixed;
  inset:0 0 0 auto;
  z-index:var(--z-menu);
  width:min(100vw, max(600px, 44.5vw));
  padding:96px var(--edge) var(--s-6) 22px;
  background:var(--panel);
  color:var(--panel-ink);
  overflow-y:auto;
  transform:translateX(100%);
  visibility:hidden;
  box-shadow:0 0 0 100vmax transparent;
  transition:transform var(--dur) var(--ease), visibility var(--dur), box-shadow var(--dur) ease;
}
.menu.is-open{transform:none;visibility:visible;box-shadow:0 0 0 100vmax var(--dim);}
body.has-menu{overflow:hidden;}

.menu-links{display:flex;flex-direction:column;align-items:flex-start;}
.menu-links a{
  font-size:var(--fs-menu);
  line-height:25px;
  letter-spacing:var(--track-l);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .45s ease, transform var(--dur) var(--ease), color var(--dur-s) ease;
}
.menu-links a[aria-current="page"]{color:var(--panel-ink-2);}
@media (hover:hover){ .menu-links a:hover, .menu-meta a:hover{color:var(--panel-ink-2);} }
.menu.is-open .menu-links a{opacity:1;transform:none;}
.menu.is-open .menu-links a:nth-child(1){transition-delay:.12s;}
.menu.is-open .menu-links a:nth-child(2){transition-delay:.16s;}
.menu.is-open .menu-links a:nth-child(3){transition-delay:.20s;}
.menu.is-open .menu-links a:nth-child(4){transition-delay:.24s;}
.menu.is-open .menu-links a:nth-child(5){transition-delay:.28s;}
.menu.is-open .menu-links a:nth-child(6){transition-delay:.32s;}
.menu.is-open .menu-links a:nth-child(7){transition-delay:.36s;}

.menu-meta{margin-top:82px;display:grid;gap:30px;opacity:0;transition:opacity .5s ease;}
.menu.is-open .menu-meta{opacity:1;transition-delay:.3s;}
.menu-group{display:grid;gap:6px;}
.menu-group > span{color:var(--panel-ink-2);}
.menu-cols{display:grid;gap:3px;}
.menu-cols a{justify-self:start;}

/* ---- the opening statement: one per page ---- */
.statement{
  font-size:var(--fs-statement);
  line-height:var(--lh-tight);
  letter-spacing:var(--track-l);
  padding:calc(var(--top-h) + var(--s-7)) var(--edge) var(--s-10);
  max-width:23em;
  text-wrap:balance;
}

/* ---- rows: a label in the first quarter, content after it ---- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--x);
  padding:0 var(--edge);
}
.row{margin-bottom:var(--row-gap);}
.row > .row-label{grid-column:1 / 4;}
.row > .row-body{grid-column:4 / -1;display:grid;gap:var(--s-5);align-content:start;}
.row-body > .split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--x);}

/* ---- hero foot: the line at the bottom of a full-screen opener ---- */
.hero{position:relative;height:100dvh;min-height:480px;overflow:hidden;background:var(--card);}
.hero > img, .hero > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,.16) 28%, transparent 46%);
}
.hero-foot{
  position:absolute;inset:auto 0 0 0;z-index:1;
  display:grid;justify-items:center;gap:30px;
  padding:0 var(--edge) var(--s-4);
  color:#fff;text-align:center;
}
.hero-foot p{max-width:26em;}
.hero-foot a{color:rgba(255,255,255,.6);}
@media (hover:hover){ .hero-foot a:hover{color:#fff;} }

/* ---- the closing call: a grey box stuck to the top of the footer, on the
   footer's own columns, so the line starts over the first and the button
   over the last. Written by build-shell.py on the pages that ask. ---- */
.cta-band{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--x);
  align-items:center;
  padding:var(--s-6) var(--edge);
  background:var(--card);
}
.cta-band h2{grid-column:1 / 10;font-size:var(--fs-title);line-height:var(--lh-tight);letter-spacing:var(--track-l);}
.cta-band .btn{grid-column:10 / -1;justify-self:start;}

/* ---- footer: inverted, the same panel as the menu ---- */
.foot{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--x);
  row-gap:var(--s-5);
  padding:var(--s-7) var(--edge) max(var(--s-4), env(safe-area-inset-bottom, 0px));
  background:var(--panel);
  color:var(--panel-ink);
  line-height:1.15;
}
.foot-col{grid-column:span 3;display:grid;gap:3px;align-content:start;}
.foot-col > span:first-child{color:var(--panel-ink-2);margin-bottom:3px;}
.foot .label{color:var(--panel-ink-2);}
.foot-end{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-3);margin-top:var(--s-6);}
@media (hover:hover){ .foot a:hover{color:var(--panel-ink-2);} }

/* ---- sun and moon: the one theme control, fixed in the bottom right ----
   Drawn by ui.js, coloured like the header. */
.theme-btn{
  position:fixed;
  right:var(--edge);
  bottom:max(var(--s-3), env(safe-area-inset-bottom, 0px));
  z-index:var(--z-top);
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:flex-end;
  color:var(--ink);
}
.theme-btn svg{width:18px;height:18px;stroke-width:2;}
@media (hover:hover){ .theme-btn:hover{opacity:.6;} }
.theme-btn:active{transform:scale(var(--press));}
body.has-menu .theme-btn{opacity:0;pointer-events:none;}