/* Personal site layout: sticky name rail on the left, content column on the right.
   Sizes come from the scale in tokens.css.
   At the 1440 design viewport the page is 352 rail + 1088 main, edge to edge —
   this layout is deliberately full-bleed, its whitespace comes from the padding. */

/* Headings take their family and weight from tokens.css, the same as Advisory.
   This file used to force every heading to 400, which quietly rendered shared
   components lighter here than there. The brand's own 400 lives in
   components.css and is unaffected. */

.page{display:grid;grid-template-columns:352px minmax(0,1fr);min-height:100vh;position:relative;z-index:1}

/* ---------- rail ---------- */
aside.rail{padding:88px 32px 64px 56px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
aside.rail .brand{font-size:44px;line-height:1.15;letter-spacing:var(--track-name);display:block;max-width:248px}
.name-rule{width:40px;height:2px;background:var(--grad);margin:56px 0 64px}
.side-nav{display:flex;flex-direction:column;gap:24px;font-size:18px;color:#777}

/* The current section is marked by a chevron that slides in from the left and
   carries the word across with it, so the highlight moves as one thing rather
   than a rule blinking on and off. The word's shift and the chevron's entrance
   share an ease-out curve and duration so they travel together. */
.side-nav a{align-self:flex-start;padding-left:0;transition:color .2s ease,padding-left .28s cubic-bezier(.22,.61,.36,1)}
.side-nav a::before{content:"\203A";position:absolute;left:2px;top:50%;font-size:20px;line-height:1;color:var(--accent);opacity:0;transform:translate(-8px,-50%);transition:opacity .28s ease,transform .28s cubic-bezier(.22,.61,.36,1)}
.side-nav .active{color:var(--ink);padding-left:22px}
.side-nav .active::before{opacity:1;transform:translate(0,-50%)}

@media (prefers-reduced-motion:reduce){
  .side-nav a,.side-nav a::before{transition:none}
}

/* ---------- content column ---------- */
main{padding:88px 88px 0;max-width:1088px;border-left:1px solid var(--rule)}

.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;padding-bottom:56px;border-bottom:1px solid var(--rule)}
.hero-copy h1{font-size:clamp(26px,2.7vw,36px);line-height:1.4;letter-spacing:var(--track-display);font-weight:500}
/* Version A runs the headline in one ink colour: the gradient word and the
   ornament are the two things B and C add, and A is the plain baseline. The
   shared .grad-text paints through transparent text, so both halves of that
   trick have to be undone here. */
body[data-version="A"] .hero-copy .grad-text{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}

/* ---------- portrait ----------
   The pencil-sketch headshot, background cut to transparent so it sits
   straight on the paper with no frame. It rides in the rail above the name on
   both versions. flex:none because the rail is a flex column, which would
   otherwise squeeze the image to a strip. */
.portrait{display:block;flex:none;overflow:hidden;border-radius:4px}
.portrait img{display:block;width:100%}
aside.rail .portrait{width:180px;margin-bottom:40px}

/* ---------- intro ornament ----------
   The mark opposite the headline. A carries none, B the flask, C the desk
   lamp. It is a glyph, so the theme gradient is a stroke and the sizing lives
   on the SVG's own box rather than on font-size. */
.intro .ast{margin-top:8px;flex:none;line-height:0}
.intro .ast .glyph{width:56px;height:56px;display:block}

/* ---------- anchor landings ----------
   A jump should put the section's label at the top of the screen, so the offset
   cancels the section's own top padding and leaves a 24px gap. Written as a
   calc against the same padding value so the two cannot drift apart. */
.essays{scroll-margin-top:calc(24px - 80px)}
#about{scroll-margin-top:calc(24px - 80px)}

/* ---------- latest writing ---------- */
/* Head and rows are the shared .essay-head and .erow components in
   components.css; only the section's own spacing lives here. */
/* Titles use the shared --item-title. They ran a step larger here, which made
   the same essay look like two different sizes across the two sites. */
.essays{padding-top:80px}
.essays .arrow-link{margin-top:32px}
/* Version 1 ships without the writing list, so the intro's bottom rule would
   sit 80px above About's top rule with nothing between. The site build marks
   <body> with .site-v1 and the intro's rule steps aside. */
.site-v1 .intro{border-bottom:none;padding-bottom:24px}
.site-v1 .about{padding-top:24px}
@media (max-width:640px){.site-v1 .about{padding-top:16px}}

/* ---------- about / subscribe ---------- */
/* The About link lands on the band, which opens with the three subjects and
   runs through the about copy — so the nav mark stays lit across both. */
.about{padding:80px 0 0}
.about .inner{padding:72px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
/* Personal's second column is only "Work with me" + an email — far less copy
   than Advisory's portrait, which needs the shared 1fr/1fr split. Narrowing
   it here (not in shared/components.css) keeps Advisory's portrait column
   untouched. */
.about .inner{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.subscribe{padding:96px 0 104px}

/* The About band collapses earlier here than on Advisory. The rail takes a
   fixed 352px and main adds 176px of padding, so the band's real width is the
   viewport minus 528 — at 1340 that is 812px, and below it the two columns are
   too narrow to set. Advisory has the whole 1024 at 1280, which is why the
   shared 1023 breakpoint is right there and wrong here. */
@media (max-width:1340px){
  .about .inner{grid-template-columns:minmax(0,1fr);gap:48px}
  .contact{padding-left:0}
}

@media (max-width:1023px){
  .page{grid-template-columns:1fr}
  /* Between laptop and phone (tablets, phones held sideways) the rail can no
     longer be a column: stacked, it filled a landscape phone screen with the
     portrait, the name, and a vertical link list before any content. It
     becomes a header band instead: a small portrait beside the name, the
     links in a row beneath the name, ruled off from the page below. */
  aside.rail{position:static;height:auto;border-bottom:1px solid var(--rule);padding:32px 40px;
    display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;row-gap:12px;align-items:center}
  aside.rail .portrait{width:88px;margin:0;grid-row:1/3;align-self:center}
  aside.rail .brand{font-size:36px;line-height:1.1;max-width:none;grid-column:2}
  .name-rule{display:none}
  .side-nav{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:28px}
  .side-nav a{align-self:auto;padding-left:0;transition:color .2s ease}
  .side-nav a::before{content:none}
  .side-nav .active{padding-left:0}
  .side-nav .active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent)}
  main{padding:56px 40px 0;max-width:none;border-left:none}
  .intro{flex-direction:column;gap:24px}
  /* Stacked, the ornament leads the headline instead of sitting beside it, so
     the optical nudge that aligned it with the first line is wrong here. */
  .intro .ast{margin-top:0}
}

@media (max-width:640px){
  /* The side rail becomes a top bar, the same shape as the Advisory header:
     name on one row, links across the row beneath, pinned while you scroll.
     A vertical link stack costs too much of a phone screen to keep. */
  aside.rail{position:sticky;top:0;z-index:20;background:var(--paper);padding:var(--bar-pad-top,var(--bar-pad)) var(--gutter) var(--bar-pad);display:flex;flex-direction:column;align-items:flex-start;gap:var(--bar-row-gap)}
  aside.rail .brand{font-size:var(--bar-brand);max-width:none}
  .name-rule{display:none}
  /* The rail is a slim pinned bar here; a portrait inside it would cost most
     of the screen, so the phone layout goes portrait-less. */
  aside.rail .portrait{display:none}
  .side-nav{flex-direction:row;flex-wrap:wrap;gap:var(--bar-nav-gap);font-size:var(--bar-nav-size)}
  /* A chevron pushing words sideways does not work in a horizontal row — the
     accent rule from the Advisory header does. */
  /* Vertical padding makes each link a ~43px tap target on a phone; the accent
     rule subtracts it back out so the underline still sits under the words. */
  .side-nav a{padding:var(--bar-link-pad) 0;transition:color .2s ease}
  .side-nav .active{padding-left:0}
  .side-nav a::before{content:none}
  .side-nav .active::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--bar-link-pad) - 6px);height:1px;background:var(--accent)}

  main{padding:40px 24px 0}
  .essays{padding-top:56px}
  .about{padding-top:64px}
  .about .inner{padding:56px 0}
  .subscribe{padding:64px 0 72px}

  /* Landings retuned: the sections carry less top padding here, and a jump also
     has to clear the pinned bar. */
  .essays{scroll-margin-top:calc(24px - 56px)}
  #about{scroll-margin-top:calc(24px - 64px)}
  /* Clears the ~114px pinned bar, leaving the section label 24px below it. */
  html{scroll-padding-top:114px}
}