/* Portfolio: Home, Work, About and Contact.
   Warm off-white and near-black, huge Italiana display type, small
   letter-spaced Montserrat, and a thin rail down the left edge.
   The blog and the Tilawa case study still use styles.css. */

:root {
  --paper: #ECE7E1;
  --ink:   #1A1818;
  --muted: #5C5754;
  --rule:  #CFC7BE;
  --display: 'Italiana', 'Bodoni Moda', Georgia, serif;
  --text: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --rail: 80px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font: 500 0.8125rem/1.8 var(--text); letter-spacing: 0.06em;
  -webkit-font-smoothing: antialiased;
}
body.dark { --paper: #1A1818; --ink: #ECE7E1; --muted: #B3ABA4; --rule: #3A3635; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Underlined inline links, like the reference. */
.u { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.u:hover { opacity: .6; }

/* ---------- rail ---------- */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 0; z-index: 5;
}
.rail-icons { display: grid; gap: 28px; }
.rail-icons a { display: grid; place-items: center; width: 20px; height: 20px; }
.rail-icons svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-home {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase;
}
.rail-line { width: 1px; height: 100px; background: currentColor; margin-top: 36px; }
.rail-year {
  margin-top: auto; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
}

.page { padding-left: var(--rail); min-height: 100vh; }

/* ---------- home ---------- */
.home { display: grid; grid-template-columns: minmax(280px, 0.85fr) 1.15fr; align-items: center; min-height: 100vh; padding-right: 64px; }
.intro { padding: 0 48px 0 90px; align-self: end; margin-bottom: 22vh; max-width: 480px; }
.avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; margin-bottom: 32px; }
.intro h1 { font: 600 0.8125rem/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 24px; }
.intro p + p { margin-top: 16px; }

.big-nav { list-style: none; margin: 0; padding: 0; }
.big-nav a {
  display: inline-block; text-decoration: none;
  font: 400 clamp(3.5rem, 10vw, 9rem)/1.02 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
}

/* Hovered words lean into an italic, as on the reference. Italiana has no
   italic, so the slant is a skew anchored at the baseline. */
.big-nav a, .projects a .name, .article-index b {
  transform-origin: 0 100%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.big-nav a:focus-visible, .projects a:focus-visible .name, .article-index a:focus-visible b,
.big-nav a:active, .projects a:active .name, .article-index a:active b,
.big-nav a.pressed, .projects a.pressed .name, .article-index a.pressed b { transform: skewX(-14deg); }
/* Only devices with a real pointer get hover; on touch screens a hover
   state would stick after the tap, so the slant shows while pressed instead. */
@media (hover: hover) {
  .big-nav a:hover, .projects a:hover .name, .article-index a:hover b { transform: skewX(-14deg); }
}

/* ---------- inner pages ---------- */
.inner { padding: 110px 64px 120px 100px; }

/* Work: a short intro on the left, projects in huge type on the right. */
.work { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.2fr; gap: 48px; align-items: center; min-height: 100vh; }
.work-intro { max-width: 360px; }
.work-intro h1 { font: 600 0.8125rem/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; }
.work-intro p + p { margin-top: 16px; }
.projects { list-style: none; margin: 0; padding: 0; }
.projects li + li { margin-top: 26px; }
.projects a, .projects .name { display: inline-block; text-decoration: none; }
.projects .name { font: 400 clamp(2.6rem, 6.6vw, 6rem)/1 var(--display); text-transform: uppercase; }
.projects .role { display: block; margin-top: 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.projects .present { opacity: .6; }

/* About */
.about { max-width: 760px; }
.about-title { font: 400 clamp(4.5rem, 11vw, 9rem)/0.95 var(--display); }
.lead { font: 400 clamp(1.7rem, 3.2vw, 2.6rem)/1.25 var(--display); margin: 44px 0 44px; max-width: 22ch; }
.prose { max-width: 540px; }
.prose p + p { margin-top: 26px; }
.quote { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.28 var(--display); margin: 44px 0; max-width: 24ch; }
.label { font: 400 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; margin: 64px 0 24px; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.plain li:first-child { border-top: 1px solid var(--rule); }
.plain .where { color: var(--muted); }
.plain .when { color: var(--muted); white-space: nowrap; }
.slashes { max-width: 540px; }

/* Contact */
.contact { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.hello { font: 400 clamp(5rem, 15vw, 13rem)/0.9 var(--display); }
.contact p { max-width: 430px; margin-top: 48px; }
.contact .lines { margin-top: 44px; }
.contact .lines p { margin-top: 0; }

/* ---------- writing ---------- */
/* The field notes keep their own markup; these rules restyle it. */
.writing .frame { padding: 110px 64px 120px calc(var(--rail) + 90px); max-width: calc(var(--rail) + 900px); }
.writing .back, .writing .article-kicker {
  display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.writing .back { text-decoration: none; margin-bottom: 56px; }
.writing .back:hover { opacity: .6; }
.writing .article-kicker { display: block; color: var(--muted); margin-bottom: 20px; }
.writing h1 { font: 400 clamp(2.8rem, 6vw, 5.4rem)/1.02 var(--display); max-width: 16ch; }
.writing .frame > p.deck { font: 400 clamp(1.5rem, 2.8vw, 2.3rem)/1.3 var(--display); margin: 32px 0 48px; max-width: 30ch; }
.writing h2 { font: 400 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--display); margin: 64px 0 20px; max-width: 30ch; }
.writing .frame > p { max-width: 640px; font-size: 0.875rem; line-height: 2; }
.writing .frame > p + p { margin-top: 22px; }
.writing code { font: 500 0.85em/1 ui-monospace, 'SF Mono', Consolas, monospace; letter-spacing: 0; }
.writing .article-image { margin: 0 0 16px; max-width: 760px; }
.writing .article-image img { width: 100%; height: auto; }
.writing figcaption { margin-top: 12px; font-size: 0.6875rem; color: var(--muted); }
.writing .inline { text-decoration: none; border-bottom: 1px solid currentColor; }
.writing footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--rule); max-width: 760px;
  font-size: 0.75rem;
}

/* The list of field notes, set like the Work page. */
.article-index { margin-top: 24px; }
.article-index a { display: block; text-decoration: none; padding: 26px 0; border-top: 1px solid var(--rule); }
.article-index a:last-child { border-bottom: 1px solid var(--rule); }
.article-index span { display: block; }
.article-index b { display: inline-block; font: 400 clamp(1.9rem, 3.8vw, 3.2rem)/1.08 var(--display); max-width: 22ch; }
.article-index small, .article-index i {
  display: inline-block; margin-top: 12px; font-style: normal;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.article-index small::before { content: '– '; }
.article-index i { display: block; margin-top: 6px; color: var(--muted); }

/* ---------- motion ---------- */
/* Arriving: the page is uncovered from the top down, over the colour of the
   page before it (set on <html> by motion.js). Its content stays still. */
html.js body { clip-path: inset(0 0 100% 0); }
html.js.opened body {
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1);
}
html.js.settled body { clip-path: none; }

/* Then each piece comes in from a blur. */
.reveal { opacity: 0; filter: blur(14px); transform: translateY(18px); }
.reveal.in {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .9s ease, filter .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}

/* Leaving: the content goes at once; only the page colour stays. */
html.leaving body > * { opacity: 0; transition: opacity .15s ease; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  :root { --rail: 0px; }
  .rail {
    position: static; width: auto; flex-direction: row; justify-content: flex-start;
    padding: 20px 24px 0; gap: 26px;
  }
  .rail-icons { grid-auto-flow: column; gap: 26px; }
  .rail-home, .rail-year { writing-mode: horizontal-tb; transform: none; }
  .rail-line { width: 100px; height: 1px; margin: 0; }
  .rail-year { margin: 0 0 0 auto; }
  .page { min-height: 0; }

  .home { display: block; min-height: 0; padding: 0 24px 40px; }
  .intro { padding: 56px 0 0; margin: 0 0 56px; max-width: none; }
  .big-nav a { font-size: clamp(3rem, 15vw, 4.5rem); }

  .inner { padding: 56px 24px 72px; }
  .work { display: block; min-height: 0; }
  .work-intro { margin-bottom: 56px; }
  .projects .name { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .contact { min-height: 70vh; }
  .writing .frame { padding: 48px 24px 72px; max-width: none; }
  .writing .back { margin-bottom: 36px; }
}