/* DESIGN TOKENS — start here for colours, typography and page width. */
:root{
  --paper:#f1f1eb;
  --ink:#191a18;
  --muted:#656660;
  --rule:#b8b9b1;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Arial,Helvetica,sans-serif;
  --gutter:clamp(20px,4vw,64px)}

*{
  box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:24px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased}

a{
  color:inherit;
  text-decoration:none}

a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:6px}

::selection{
  background:var(--ink);
  color:var(--paper)}

.wrap{
  width:calc(100% - var(--gutter)*2);
  max-width:1440px;
  margin-inline:auto}

.mono{
  font-family:var(--mono);
  font-size:.8125rem;
  font-weight:400;
  letter-spacing:.025em}

.masthead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:88px;
  border-bottom:1px solid var(--ink);
  gap:24px}

.monogram{
  font-family:var(--mono);
  font-size:24px;
  letter-spacing:-.1em;
  font-weight:bold}

nav{
  display:flex;
  gap:clamp(16px,3vw,46px);
  font-family:var(--mono);
  font-size:.875rem}

nav a{
  padding-block:12px}
nav a:hover,.text-link:hover,footer a:hover{
  text-decoration:underline;
  text-underline-offset:5px}

.hero{
  padding-top:24px;
  padding-bottom:64px}

.hero-meta{
  display:flex;
  justify-content:space-between;
  text-transform:uppercase;
  gap:16px}

h1{
  font-size:clamp(62px,15.4vw,235px);
  line-height:.84;
  letter-spacing:-.075em;
  font-weight:500;
  margin:64px 0 40px}

h1>span{
  display:block}
.name-period{
  color:var(--muted)}

.hero-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-top:42px;
  padding-left:25%}

.hero-bottom p{
  font-size:clamp(21px,2.5vw,36px);
  line-height:1.18;
  letter-spacing:-.035em;
  margin:0}

.text-link{
  display:flex;
  gap:28px;
  white-space:nowrap;
  padding-block:8px}
.text-link span{
  font-size:24px;
  line-height:1}

.section{
  display:grid;
  grid-template-columns:1fr 3fr;
  border-top:1px solid var(--ink);
  padding-block:38px 90px;
  gap:0}

.section-label{
  font-size:.875rem;
  line-height:1.5;
  margin:0;
  padding-right:28px}
.section-label span{
  display:block;
  margin-bottom:18px;
  color:var(--muted)}

.section-body{
  min-width:0}
.lead{
  font-size:clamp(28px,3.3vw,48px);
  letter-spacing:-.045em;
  line-height:1.13;
  max-width:850px;
  margin:0 0 40px}

.about-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px}
.about-columns p{
  margin:0;
  max-width:42ch;
  color:#44453f;
  line-height:1.7}

.research-list{
  margin-top:-10px}
.work{
  display:grid;
  grid-template-columns:75px 1fr;
  gap:20px;
  border-bottom:1px solid var(--rule);
  padding:24px 0 27px}
.work:first-child{
  padding-top:10px}
.work:last-child{
  border-bottom:0;
  padding-bottom:0}

.work-date{
  padding-top:6px;
  color:var(--muted)}
h3{
  margin:0;
  font-weight:400}
.work h3{
  font-size:clamp(21px,2.1vw,30px);
  line-height:1.23;
  letter-spacing:-.03em;
  max-width:900px}
.work h3 a{
  display:block;
  transition:color .18s,transform .18s}
.work h3 a:hover{
  color:#5d6054;
  transform:translateX(4px)}
.arrow{
  white-space:nowrap;
  font-size:.8em}

.work-meta{
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--muted);
  margin:12px 0 0;
  line-height:1.6;
  letter-spacing:-.025em}
.edition{
  white-space:normal}

.projects-intro{
  margin:0 0 36px;
  font-size:22px;
  letter-spacing:-.025em}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule)}
.project{
  padding:24px 32px 0 0}
.project+.project{
  border-left:1px solid var(--rule);
  padding-left:32px;
  padding-right:0}
.project-type{
  color:var(--muted);
  margin:0 0 30px}
.project h3{
  font-size:clamp(40px,5.4vw,78px);
  line-height:.98;
  letter-spacing:-.06em}
.project>p:last-child{
  max-width:34ch;
  margin:30px 0 0;
  color:#44453f}

.contact{
  background:var(--ink);
  color:var(--paper)}
.contact .section{
  border-top:0;
  padding-block:44px 80px}
.contact .section-label span{
  color:#a9aaa2}
.contact-heading{
  font-size:clamp(62px,9vw,136px);
  line-height:1;
  letter-spacing:-.06em;
  margin:0 0 32px}
.contact-copy{
  max-width:54ch;
  color:#c5c6bd;
  margin:0 0 38px}
.contact-links{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  font-size:clamp(17px,2vw,26px);
  letter-spacing:-.035em}
.contact-links a{
  padding-block:8px;
  border-bottom:1px solid #777970;
  transition:border-color .2s}
.contact-links a:hover{
  border-color:var(--paper)}
.contact-links span{
  margin-left:16px}

footer{
  border-top:1px solid #54564d;
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-block:24px;
  color:#c5c6bd}

.skip-link{
  position:absolute;
  top:8px;
  left:20px;
  padding:12px;
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-160%);
  z-index:10}
.skip-link:focus{
  transform:translateY(0)}

@media(min-width:900px){
  .hero{
  animation:appear .65s ease-out both}
@keyframes appear{
  from{
  opacity:.3;
  transform:translateY(8px)}
to{
  opacity:1;
  transform:none}
}
}

@media(max-width:700px){
  .masthead{
  min-height:76px;
  gap:16px}
nav{
  gap:15px;
  font-size:.8125rem}
.hero{
  padding-bottom:48px}
.hero-meta{
  font-size:.75rem}
h1{
  margin-top:52px;
  font-size:15vw}
.hero-bottom{
  padding-left:0;
  align-items:flex-start;
  flex-direction:column;
  gap:24px}
.section{
  grid-template-columns:1fr;
  padding-block:25px 56px;
  gap:32px}
.section-label{
  display:flex;
  gap:18px}
.section-label span{
  margin:0}
.section-label br{
  display:none}
.about-columns{
  grid-template-columns:1fr;
  gap:22px}
.lead{
  margin-bottom:28px}
.work{
  grid-template-columns:46px 1fr;
  gap:14px;
  padding-block:22px}
.work-date{
  font-size:.75rem}
.work-meta{
  font-size:.75rem}
.projects-intro{
  font-size:20px}
.project{
  padding-right:20px}
.project+.project{
  padding-left:20px}
.project-type{
  font-size:.75rem;
  min-height:38px;
  margin-bottom:20px}
.project h3{
  font-size:clamp(35px,8vw,54px)}
.project>p:last-child{
  margin-top:22px}
.contact .section{
  padding-block:30px 48px}
.contact-links{
  gap:16px 32px}
footer{
  font-size:.75rem}
}

@media(max-width:360px){
  .masthead{
  align-items:flex-start;
  padding-block:18px}
nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px}
.hero-meta{
  flex-direction:column;
  gap:5px}
.project-grid{
  grid-template-columns:1fr}
.project+.project{
  border-left:0;
  border-top:1px solid var(--rule);
  padding:24px 0 0;
  margin-top:28px}
.project-type{
  min-height:0}
.contact-links a{
  overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto}
*,*::before,*::after{
  animation:none!important;
  transition:none!important}
}

@media print{
  body{
  background:white;
  color:black}
.masthead,.hero-meta,.text-link,footer,.skip-link{
  display:none}
.hero{
  padding-block:0 30px}
h1{
  font-size:72px;
  margin:0 0 24px;
  line-height:1}
.hero-bottom{
  padding:0}
.section{
  padding-bottom:30px}
.work{
  break-inside:avoid}
.contact{
  background:white;
  color:black}
.contact-copy,.contact .section-label span{
  color:black}
.contact-heading{
  font-size:40px}
}


/* Clean header and supplied project wordmarks. Images remain unmodified. */
.masthead {
  justify-content: flex-end;
  min-height: 0;
  padding-top: 100px;
  border-bottom: 0;
}
.hero { padding-top: 0; }
.project .project-logo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  mix-blend-mode: multiply;
}
.project-logo img {
  display: block;
  position: absolute;
  max-width: none;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
}
.ruki-logo img { width: 170%; left: -35%; }
.wax-logo img { width: 140%; left: -20%; }
@media (max-width: 700px) {
  .masthead { padding-top: 28px; padding-bottom: 0; }
  .masthead nav { display: flex; flex-wrap: wrap; gap: 0 18px; justify-content: flex-end; }
}

/* Portrait and linked wordmarks */
.masthead { justify-content: space-between; align-items: center; padding-top: 42px; }
.headshot { display: block; width: 96px; height: 112px; object-fit: cover; object-position: center 30%; filter: grayscale(1) contrast(1.08); mix-blend-mode: multiply; }
.project .project-logo { display: block; width: 78%; max-width: 290px; overflow: hidden; transition: opacity .2s ease; }
.project .ruki-logo { width: 64%; max-width: 235px; }
.project-logo:hover { opacity: .6; }
.project-logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
@media(max-width:700px) {
 .masthead { padding-top: 24px; gap: 24px; }
 .headshot { width: 64px; height: 76px; flex-shrink: 0; }
 .masthead nav { gap: 0 16px; }
 .project .project-logo { width: 90%; }
 .project .ruki-logo { width: 74%; }
}

/* Header without portrait */
.masthead { justify-content: flex-end; padding-top: 100px; }
@media(max-width:700px) { .masthead { padding-top: 28px; } }

/* Shared project rows keep logo centres and description starts aligned. */
.project-grid {
  grid-template-rows: auto auto auto;
}
.project {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}
.project h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}
.project .project-logo {
  margin-inline: auto;
}
.project .ruki-logo {
  width: 59%;
  max-width: 215px;
}
.project > p:last-child {
  align-self: start;
}
@media (max-width: 700px) {
  .project h3 { min-height: 64px; }
  .project .ruki-logo { width: 68%; }
}
@media (max-width: 360px) {
  .project { display: block; }
}

/* Left edges follow the text; shared logo rows align their vertical centres. */
.project h3 { justify-content: flex-start; }
.project .project-logo { margin-inline: 0; }
.project .ruki-logo { width: 55%; max-width: 200px; }
@media (max-width: 700px) {
  .project .ruki-logo { width: 64%; }
}

/* More restrained contact heading. */
.contact-heading { font-size: clamp(42px, 5vw, 72px); }

/* Dedicated document reader pages */
.reader { max-width: 1100px; padding-block: 36px 60px; }
.reader-heading { margin-block: 48px 32px; }
.reader-heading h1 { font-size: clamp(30px,4.5vw,58px); line-height: 1.08; letter-spacing: -.04em; margin: 20px 0; }
.reader-heading > p { color: var(--muted); }
.reader-actions { display: flex; flex-wrap: wrap; gap: 20px 32px; padding-block: 20px; border-top: 1px solid var(--rule); }
.reader-actions a { padding-block: 8px; text-decoration: underline; text-underline-offset: 5px; }
.paper-viewer { display: block; width: 100%; height: 80vh; min-height: 480px; background: white; border: 1px solid var(--rule); }
.paper-viewer p { padding: 24px; }
.reader-note { color: var(--muted); margin-block: 20px 32px; }
@view-transition { navigation: auto; }
@media(prefers-reduced-motion:reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.paper-pages { max-width: 850px; margin-inline: auto; }
.reader-page { margin-bottom: 32px; }
.reader-page img { display: block; width: 100%; height: auto; background: white; border: 1px solid var(--rule); }
.reader-page details { font-size: 14px; padding: 12px 0; }
.reader-page summary { cursor: pointer; font-family: var(--mono); }
.page-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia,serif; font-size: 17px; line-height: 1.7; padding: 24px; background: white; }

/* Short publication landing pages */
.title-ending { white-space: nowrap; }
.abstract-page { max-width: 920px; min-height: 90vh; }
.paper-blurb { max-width: 65ch; font-size: clamp(18px,2vw,22px); line-height: 1.65; margin: 0 0 40px; color: #44453f; }
.abstract-page .reader-heading { margin-top: 70px; }
@media(max-width:700px) { .abstract-page .reader-heading { margin-top: 42px; } }

/* Preserve the full left edge of the Wax On Tap wordmark. */
.wax-logo img { width: 136%; left: -17.5%; }

/* Measured source bounds: x=254–1602 in a 1890px image. */
.wax-logo img { width: 132%; left: -15.5%; }

/* Slightly smaller RUKI wordmark. */
.project .ruki-logo { width: 51%; max-width: 185px; }
@media (max-width: 700px) { .project .ruki-logo { width: 59%; } }

/* Align the visible W with the paragraph, retaining a subpixel safety inset. */
.wax-logo img { width: 132%; left: -17.64%; }

/* Equal label and logo rows guarantee matching paragraph start positions. */
.project-grid { grid-template-rows: none; align-items: start; }
.project {
  display: grid;
  grid-row: auto;
  grid-template-rows: 48px 100px auto;
  row-gap: 0;
}
.project .project-type { margin: 0; min-height: 0; }
.project h3 { height: 100px; min-height: 0; margin: 0; }
.project > p:last-child { margin-top: 24px; align-self: start; }
@media (max-width: 700px) {
  .project { grid-template-rows: 58px 72px auto; }
  .project h3 { height: 72px; }
  .project > p:last-child { margin-top: 22px; }
}
@media (max-width: 360px) {
  .project { display: grid; }
}

/* Give the qualifications paragraph a slightly wider measure. */
.about-columns p:last-child { max-width: 48ch; text-wrap: pretty; }

/* Matching paragraph widths with balanced line endings. */
.about-columns p, .about-columns p:last-child { max-width: 44ch; text-wrap: pretty; }

/* Balanced About text blocks, with substantial closing lines. */
.about-columns p,
.about-columns p:last-child {
  max-width: 46ch;
  text-wrap: balance;
  line-height: 1.7;
}
.about-ending { white-space: nowrap; }
@media (max-width: 700px) {
  .about-columns p,
  .about-columns p:last-child { max-width: 46ch; text-wrap: pretty; }
}