/* Inner pages (thesis, portfolio, team, contact). Same type, colour fields and
   motion as the homepage, but no intro: the header is already docked. */

/* Header: the logo sits where the homepage's mark docks, the menu is already there. */
html.sub .bar{--bar-bg:1}
html.sub .bar .logo{margin-right:auto;font-size:var(--logo);font-weight:700;letter-spacing:-.075em;line-height:1;pointer-events:auto}
html.sub .bar .nav a,html.sub .bar .menu-btn{opacity:1}
html.sub .bar .nav a[aria-current='page']{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* Hero: a label and one huge line, set low on the first screen. */
.page-hero{min-height:100svh;padding:120px 32px 12vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-content:end}
.page-hero .label{grid-column:1 / -1;font-size:15px;line-height:1.4;margin:0 0 3vh}
.title{grid-column:1 / -1;font-size:clamp(64px,14vw,260px);font-weight:700;letter-spacing:-.065em;line-height:.88;margin:0}
.lede{grid-column:1 / 7;font-size:clamp(18px,1.5vw,24px);line-height:1.4;margin:6vh 0 0;max-width:28em}

/* Chapters: one giant mark (a year or a word) against a heading and a paragraph. */
.chapter{min-height:100svh;padding:18vh 32px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-content:center}
.ch-mark{grid-column:1 / 7;display:flex;font-size:min(19vw,40svh);font-weight:700;letter-spacing:-.075em;line-height:.85;margin:0 0 0 -.04em;align-self:start}
.ch-mark.word{display:block;font-size:clamp(64px,10vw,190px);letter-spacing:-.065em;line-height:.88}
.ch-mark .reel>span{transition:color .6s cubic-bezier(.3,0,.1,1)}
.ch-mark.gold .reel>span{color:var(--gold)}
.ch-body{grid-column:7 / 13;align-self:end;padding-top:8vh}
.ch-body h2{font-size:clamp(30px,3.6vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1;margin:0 0 4vh}
.ch-body p{font-size:clamp(17px,1.35vw,21px);line-height:1.45;margin:0 0 1em;max-width:30em}

/* A standalone action: words, then an arrow that leans forward on hover. */
.go{display:inline-flex;align-items:baseline;gap:.3em;font-size:clamp(28px,3.4vw,60px);font-weight:700;letter-spacing:-.045em;line-height:1;margin-top:6vh}
.go .arr{display:inline-block;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.go:hover .arr,.go:focus-visible .arr{transform:translateX(.2em)}

/* Portfolio: the same round-capped stroke as the homepage thread, drawn under the title. */
.uline{grid-column:1 / -1;height:var(--sw,6px);border-radius:99px;background:currentColor;transform-origin:0 50%;margin-top:.12em}

/* Team: one person per screen, alternating sides. */
.person{min-height:90svh;padding:16vh 32px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-content:center}
.person .name{grid-column:1 / -1;font-size:clamp(64px,13vw,240px);font-weight:700;letter-spacing:-.065em;line-height:.88;margin:0}
.person .meta{grid-column:1 / 5;margin:6vh 0 0;font-size:clamp(20px,1.8vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.25}
.person .bio{grid-column:6 / 11;margin:6vh 0 0;font-size:clamp(17px,1.35vw,21px);line-height:1.45;max-width:30em}
.person.flip .name{text-align:right}
.person.flip .meta{grid-column:9 / 13;grid-row:2;text-align:right}
.person.flip .bio{grid-column:3 / 8;grid-row:2}

/* Contact: the envelope beside the title, then the ways to reach us. */
.env{grid-column:9 / 13;grid-row:2;justify-self:end;align-self:end;display:block;width:clamp(160px,19vw,340px);aspect-ratio:1.5;margin-bottom:.1em}
.env svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.contact-hero .title{grid-column:1 / 9;grid-row:2}
.reach{padding:18vh 32px 20vh;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:10vh}
.reach .item{grid-column:span 4}
.reach .k{font-size:15px;line-height:1.4;margin:0 0 2vh}
.reach .v{font-size:clamp(28px,3.2vw,56px);font-weight:700;letter-spacing:-.045em;line-height:1.05;margin:0}

@media(max-width:650px){
  .page-hero,.chapter,.person,.reach{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  .title{font-size:17vw}
  .lede{grid-column:1}
  .chapter{padding-top:14vh;padding-bottom:14vh}
  .ch-mark{grid-column:1;font-size:28vw}
  .ch-mark.word{font-size:18vw}
  .ch-body{grid-column:1}
  .go{font-size:9vw}
  .person .name{font-size:18vw}
  .person .meta,.person .bio,.person.flip .meta,.person.flip .bio{grid-column:1;grid-row:auto;text-align:left}
  .person.flip .name{text-align:left}
  .contact-hero .title{grid-column:1}
  .env{grid-column:1;grid-row:auto;justify-self:start;width:46vw;margin:8vh 0 0}
  .reach .item{grid-column:1}
}