/* Shared furniture: the bar that never leaves, and the quiet line beneath it. */
.plate,.slides,.about{--top:60px;--bottom:52px}

.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--top);z-index:30;
  display:flex;align-items:center;gap:34px;padding:0 34px;
  background:linear-gradient(to bottom,var(--ground) 62%,transparent);
}
.rubric{display:flex;align-items:center;gap:11px;flex:none}
.rubric-mark{
  display:block;width:21px;height:26px;flex:none;background:currentColor;opacity:.92;
  -webkit-mask:url(../assets/logo.png) center/contain no-repeat;
          mask:url(../assets/logo.png) center/contain no-repeat;
}
.rubric-name{font-family:var(--display);font-weight:500;font-size:21px;letter-spacing:.05em;line-height:1}
/* The address under the name, as on the landing page. */
.rubric-text{display:flex;flex-direction:column;gap:5px}
.rubric-domain{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);line-height:1}
.topnav{display:flex;align-items:center;gap:22px}
.topnav a{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.topnav a.is-here{color:var(--brass)}
.topnav a:hover{color:var(--fg)}
/* Only the name stands on the left; every menu choice sits to the right. */
.topbar .topnav:first-of-type{margin-left:auto}
.topnav-sub{padding-left:22px;border-left:1px solid var(--hair)}

/* On a phone the menu folds into one word, a way back to the landing page. */
.menu-btn{
  display:none;margin-left:auto;cursor:pointer;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);
  border-bottom:1px solid var(--hair);padding:3px 0;
}

.footbar{
  position:fixed;inset:auto 0 0 0;height:var(--bottom);z-index:30;
  display:flex;align-items:center;gap:28px;padding:0 34px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);
  background:linear-gradient(to top,var(--ground) 62%,transparent);
}

@media (max-width:720px){
  .plate,.slides,.about{--top:54px;--bottom:48px}
  .topbar{padding:0 18px;gap:14px}
  .rubric-name{font-size:18px}
  .topbar .topnav{display:none}
  .menu-btn{display:block}
  .footbar{padding:0 18px;gap:14px}
}

/* A phone on its side keeps the picture, not the furniture: the menu folds into the
   one word here too, since the whole strip wraps and crowds the bar beside Safari's own. */
@media (orientation:landscape) and (max-height:560px){
  .plate,.slides,.about{--top:38px;--bottom:34px}
  /* Room to scroll, so Safari's bars can be swiped away (js/swipe-note.js). */
  .about-body,.note{min-height:calc(100lvh + 48px);box-sizing:border-box}
  .topbar{padding:0 18px;gap:14px}
  .rubric-name{font-size:15px}
  .rubric-mark{height:18px}
  .rubric-domain{display:none}
  .topbar .topnav{display:none}
  .menu-btn{display:block}
  .footbar{font-size:10px;padding:0 18px;gap:14px}
}

/* Between sections the furniture holds still and the wall changes behind it.
   Browsers without cross-document view transitions simply load the page. */
@view-transition{navigation:auto}
.topbar{view-transition-name:ij-bar}
.footbar{view-transition-name:ij-foot}
::view-transition-old(root){animation:ij-wall-out 460ms var(--ease) both}
::view-transition-new(root){animation:ij-wall-in 620ms var(--ease) both}
@keyframes ij-wall-out{to{opacity:0;transform:translateY(-1.2vh)}}
@keyframes ij-wall-in{from{opacity:0;transform:translateY(2vh)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:1ms}
}

/* A quiet page for a single statement. */
.note{max-width:54ch;margin:0 auto;padding:12vh 34px 14vh}
.note h1{
  font-family:var(--display);font-weight:300;font-size:clamp(34px,4.4vw,56px);
  line-height:1.1;margin:0 0 26px;
}
.note p{font-size:16px;line-height:1.72;color:var(--fg);margin:0 0 20px;font-weight:300}
.note .note-contact{margin-top:38px;font-size:16.5px;letter-spacing:.02em;color:var(--fg)}
.note .note-contact a{color:var(--brass-ink);border-bottom:1px solid currentColor}
@media (max-width:720px){.note{padding:8vh 18px 10vh}}