/* layout.css — grid/flex and measure only (SF-3 §VI): no colour, face or size
 * literal; lengths come from the --sk-* scale tokens. */

*, *::before, *::after { box-sizing: border-box; }

/* The leaf keeps one width and position on every page: the scrollbar's space is always
 * reserved, so a page long enough to scroll is no narrower than a short one. */
html { scrollbar-gutter: stable; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sk-leaf-margin);
}

/* The leaf fills the viewport's height on a short page, so it reads as a sheet. */
.sk-leaf {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: calc(var(--sk-measure) + 2 * var(--sk-leaf-padding-inline));
  padding: var(--sk-leaf-padding-block) var(--sk-leaf-padding-inline);
}
.sk-vine {
  position: absolute;
  inset: var(--sk-band-inset);
  pointer-events: none;
}
/* Each rose is centred where its two vines cross (band-inset + half the band in from
 * both edges) and sized from the band, so it stays inside the outer rule at every width. */
.sk-rose {
  position: absolute;
  width: var(--sk-rose-size);
  height: var(--sk-rose-size);
  pointer-events: none;
}
.sk-rose-tl { top: var(--sk-rose-centre); left: var(--sk-rose-centre); transform: translate(-50%, -50%); }
.sk-rose-tr { top: var(--sk-rose-centre); right: var(--sk-rose-centre); transform: translate(50%, -50%); }
.sk-rose-bl { bottom: var(--sk-rose-centre); left: var(--sk-rose-centre); transform: translate(-50%, 50%); }
.sk-rose-br { bottom: var(--sk-rose-centre); right: var(--sk-rose-centre); transform: translate(50%, 50%); }

/* The seal: upper right, above the navigation (a cell of the header grid). */
.sk-seal { grid-area: seal; justify-self: end; margin: 0; }
.sk-seal-mark { display: block; width: var(--sk-seal-size); height: var(--sk-seal-size); }

/* The rose between sections, centred above the next section's heading. */
.sk-prose + .sk-section::before, .sk-section + .sk-section::before {
  display: block;
  width: var(--sk-divider-size);
  height: var(--sk-divider-size);
  margin: 0 auto var(--sk-divider-gap);
}
/* The medallion once, at the end of the page, centred above the footer rule. */
.sk-footer::before {
  display: block;
  width: var(--sk-fleuron-size);
  height: var(--sk-fleuron-size);
  margin: var(--sk-space-6) auto 0;
}

.sk-header, .sk-main, .sk-footer {
  width: 100%;
  max-width: var(--sk-measure);
}
/* The reading variant (Teaching) narrows only its text column, set from the leaf's left edge;
 * the leaf, header and footer keep the site-wide width, so the frame never moves. */
.sk-page[data-variant='reading'] .sk-main { max-width: var(--sk-measure-reading); align-self: flex-start; }

/* The header is a grid whose arrangement is two tokens: --sk-header-areas / -columns on
 * a wide page, --sk-header-areas-mobile / -columns-mobile below the nav-collapse width.
 * Its cells are seal, name, nav (inline) and menu; moving one is a token edit. */
.sk-header {
  position: relative;
  display: grid;
  grid-template-columns: var(--sk-header-columns);
  grid-template-areas: var(--sk-header-areas);
  align-items: baseline;
  gap: var(--sk-space-2) var(--sk-space-4);
  padding-bottom: var(--sk-space-2);
  margin-bottom: var(--sk-space-6);
}
.sk-sitename { grid-area: name; margin: 0; align-self: end; white-space: nowrap; }
/* On a wide page the nav has its own row under the name and seal, spread across the measure. */
.sk-nav-inline { grid-area: nav; }
.sk-nav-inline ul { justify-content: space-between; }
.sk-menu { grid-area: menu; display: none; }

/* Below the nav-collapse width (= --sk-nav-collapse; a media query cannot read a token):
 * the hamburger menu replaces the inline nav, and the site name is centred. */
@media (max-width: 55rem) {
  .sk-header {
    grid-template-columns: var(--sk-header-columns-mobile);
    grid-template-areas: var(--sk-header-areas-mobile);
    align-items: center;
  }
  .sk-sitename { text-align: center; white-space: normal; }
  .sk-seal, .sk-menu { justify-self: center; }
  .sk-seal-mark { width: var(--sk-seal-size-mobile); height: var(--sk-seal-size-mobile); }
  .sk-nav-inline { display: none; }
  .sk-menu { display: block; }
}

.sk-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sk-touch-target);
  height: var(--sk-touch-target);
  cursor: pointer;
  list-style: none;
}
.sk-menu-button::-webkit-details-marker { display: none; }
.sk-menu-icon { position: relative; display: block; width: var(--sk-menu-icon-w); height: var(--sk-menu-icon-h); }
.sk-menu-icon::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
/* The open list drops below the header, full width, one 44 px row per page. */
.sk-nav-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  padding: var(--sk-space-1) 0;
}
.sk-nav-menu ul { flex-direction: column; gap: 0; }
.sk-nav-menu a { display: flex; padding: 0 var(--sk-space-3); }
.sk-nav-menu li + li { margin: 0 var(--sk-space-3); }
.sk-nav-menu li:first-child { margin: 0 var(--sk-space-3); }
.sk-nav-menu li a { padding: 0; }
.sk-visually-hidden {
  position: absolute;
  width: var(--sk-hairline);
  height: var(--sk-hairline);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sk-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-1) var(--sk-nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-nav a, .sk-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--sk-touch-target);
}

.sk-main { flex: 1; }
.sk-main::after { content: ''; display: block; clear: both; }

/* The portrait: beside the title and bio on a wide page (floated right), centred above the
 * title in the mobile stack. Portrait crop, 4:5; the frame is a hairline a gap outside the photo. */
.sk-portrait {
  float: right;
  width: var(--sk-portrait-w);
  margin: 0 0 var(--sk-space-3) var(--sk-space-5);
  padding: var(--sk-portrait-gap);
}
.sk-portrait img, .sk-portrait-empty { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sk-portrait-empty { display: flex; align-items: center; justify-content: center; padding: var(--sk-space-2); text-align: center; }
/* In the mobile stack the portrait is centred below the header, above the title (same width as
 * the nav-collapse media query above; it follows the portrait's own rule so it wins). */
@media (max-width: 55rem) {
  .sk-portrait { float: none; width: var(--sk-portrait-w-mobile); margin: 0 auto var(--sk-space-4); }
}
.sk-title { margin: 0 0 var(--sk-space-2); }
.sk-roleline { margin: 0 0 var(--sk-space-4); }
.sk-rule { width: var(--sk-rule-width); margin: var(--sk-space-4) 0; }
.sk-footer .sk-rule { margin-top: var(--sk-space-6); }

.sk-section { margin-top: var(--sk-section-gap); }
.sk-heading { margin: var(--sk-section-gap) 0 var(--sk-space-2); }

.sk-prose p, .sk-section p { margin: 0 0 var(--sk-space-3); }
.sk-list, .sk-links { margin: 0; padding-left: var(--sk-space-4); }
.sk-links { list-style: none; padding-left: 0; }
.sk-prose ul:not(.sk-links) { list-style: none; padding-left: var(--sk-list-indent); }
.sk-prose ul:not(.sk-links) li { position: relative; }
.sk-prose ul:not(.sk-links) li::before {
  position: absolute;
  left: calc(-1 * var(--sk-list-indent));
  top: var(--sk-rose-bullet-top);
  width: var(--sk-rose-bullet-size);
  height: var(--sk-rose-bullet-size);
}
.sk-publications, .sk-prose ol { margin: 0; padding-left: var(--sk-roman-indent); }
.sk-publications li { margin-bottom: var(--sk-space-2); padding-left: var(--sk-space-1); }

img { max-width: 100%; height: auto; }

.sk-skip {
  position: absolute;
  z-index: 3;   /* above the isolated leaf, so the focused link shows (Codex #74) */
  left: var(--sk-space-3);
  top: calc(-1 * var(--sk-space-6));
  padding: var(--sk-space-2);
}
.sk-skip:focus { top: var(--sk-space-3); }