/* App layout: main offsets (always based on the COLLAPSED rail, so content never
   reflows when the rail expands), mobile top bar, skip link, page container. */

.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: calc(var(--z-toast) + 1);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  transform: translate(-50%, -160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); outline: 2px solid var(--accent); outline-offset: 2px; }

.main {
  position: relative;
  display: block;
  /* main + the site footer (components/footer.js sets --site-footer-h) fill at least one screen */
  min-height: calc(100vh - var(--site-footer-h, 0px));
  min-height: calc(100dvh - var(--site-footer-h, 0px));
  padding: 16px var(--main-pad-right) 48px var(--main-pad-left);
}
.main:focus { outline: none; }

.page-root { min-width: 0; }

/* Standard page container used by page modules. */
.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Page-level title for regular (non-hero) pages. */
/* Upright Alumni Sans; add .oblique for the slanted look of the references. */
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  font-synthesis: none;
  text-transform: uppercase;
  font-size: clamp(2.75rem, 2rem + 3.2vw, 5rem);
  line-height: .9;
  letter-spacing: 0;
  color: var(--ink);
}
.page-lead { margin-top: 12px; max-width: 60ch; color: var(--ink-2); font-size: var(--fs-md); }

/* Route-level loading / error placeholders rendered by the router. */
.route-loading { display: grid; gap: 16px; padding-top: 8px; }
.route-loading .skeleton--title { height: 56px; width: min(520px, 70%); border-radius: 12px; }

/* Mobile top bar ---------------------------------------------------------- */
.topbar { display: none; }

@media (max-width: 767.98px) {
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: 4px;
    height: var(--topbar-h);
    padding: 0 8px 0 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .topbar__menu,
  .topbar__cart {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .topbar__menu:hover,
  .topbar__cart:hover { background: var(--surface-sunken); }
  .topbar__menu:focus-visible,
  .topbar__cart:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .topbar__menu svg,
  .topbar__cart svg { width: 24px; height: 24px; }
  .topbar__brand { display: inline-flex; padding-left: 4px; }
  .topbar__brand .wordmark { padding: 0 4px; }
  .topbar__spacer { flex: 1 1 auto; }
  /* The top bar carries the wordmark on phones; page headers keep only the crumbs. */
  .page-header .breadcrumbs__home { display: none; }
  .page-header .breadcrumbs__home + li::before { content: none; }
  /* The account (signed in, components/rail.js + account-menu.js): a 36px avatar in a 44px round target at the far
     right, after the cart; it opens the account sheet. The avatar itself is .sa-avatar (rail.css). */
  .topbar__account {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }
  .topbar__account .topbar__avatar { --avatar-size: 36px; --avatar-ring: var(--line-strong); }
  .topbar__account:hover .topbar__avatar { --avatar-ring: var(--accent); }
  .topbar__account[aria-current='page'] .topbar__avatar { --avatar-ring: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
  .topbar__account:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .topbar__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent-strong);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--bg);
  }

  .main { padding-top: calc(var(--topbar-h) + 12px); padding-bottom: 32px; }
}

/* 404: display title + a quiet outline «404» (decorative, aria-hidden) in the catalog's line style.
   Stacked above the title on narrow screens; its own column beside the copy on wide ones. */
.not-found__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'code' 'title' 'text' 'actions';
  align-content: start;
  row-gap: 20px;
  padding: clamp(16px, 5vh, 64px) 0 48px;
}
.not-found__code {
  grid-area: code;
  justify-self: start;
  margin: 0 0 -6px 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6.5rem, 4rem + 6vw, 10rem);
  line-height: .78;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(55, 129, 252, .6);
  transform: skewX(-10deg);
  pointer-events: none;
  user-select: none;
}
.not-found__title { grid-area: title; font-weight: 900; font-size: clamp(3rem, 1rem + 5.6vw, 6.5rem); line-height: .86; max-width: 9em; }
.not-found__title .oblique { transform-origin: 0 100%; }
.not-found__text { grid-area: text; margin-top: 0; max-width: 52ch; }
.not-found__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (min-width: 1180px) {
  .not-found__hero {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto 1fr;   /* the tall outline's height goes to the last row, not between the copy rows */
    grid-template-areas: 'title code' 'text code' 'actions code' '. code';
    column-gap: 48px;
  }
  .not-found__code {
    align-self: center;
    justify-self: end;
    margin: 0 24px 0 0;
    font-size: clamp(12rem, 2rem + 13vw, 20rem);
    -webkit-text-stroke-width: 1.5px;
  }
}
.not-found__path {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-sunken);
  color: var(--ink);
  font-size: .9em;
  word-break: break-all;
}

/* noscript message */
.noscript {
  max-width: 560px;
  margin: 96px auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink-2);
}
.noscript strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: var(--fs-lg); }