/* ============================================================
   Oliver Walsh — Cello.  Monochrome, warm, editorial.
   Paper & ink. One accent: the ƒ-hole.
   ============================================================ */

:root{
  /* Warm monochrome — neutral hues nudged toward paper, never blue-grey */
  --paper:      #f4f1ea;
  --paper-2:    #eae5da;
  --paper-3:    #ded7c9;
  --ink:        #18160f;
  --ink-2:      #3d3930;
  --ink-3:      #6f6959;
  --ink-4:      #98917f;
  --rule:       rgba(24,22,15,.16);
  --rule-soft:  rgba(24,22,15,.09);

  --on-dark:      #f1ede4;
  --on-dark-2:    #b8b1a1;
  --on-dark-3:    #7d7666;
  --rule-dark:    rgba(241,237,228,.18);

  --serif:   "Fraunces", "Hoefler Text", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --text:    "Newsreader", "Hoefler Text", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22,.61,.36,1);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --measure: 34rem;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;   /* clears the fixed masthead on anchor jumps */
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-optical-sizing:auto;
  font-weight:340;
  font-size:clamp(1.0625rem, .95rem + .38vw, 1.1875rem);
  line-height:1.66;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Paper grain — the thing that keeps monochrome from going clinical */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:900;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-family:var(--serif); font-size:.9rem;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
  border-radius:1px;
}

.wrap{
  width:min(84rem, 100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── Shared type ─────────────────────────────────────────── */

.eyebrow{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 30, "WONK" 0;
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}

.section__title{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-weight:380;
  font-size:clamp(2.1rem, 1.3rem + 3.3vw, 4rem);
  line-height:1.02;
  letter-spacing:-.024em;
  margin:0 0 clamp(1.75rem,3.5vw,3rem);
  text-wrap:balance;
}

.link{
  font-family:var(--serif);
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:.35rem;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .45s var(--ease), color .3s var(--ease);
}
.link:hover{ background-size:0% 1px; background-position:100% 100%; color:var(--ink-3); }

/* ── ƒ-hole glyph ────────────────────────────────────────── */

.glyph{ fill:currentColor; display:block; }
.glyph--sm{ width:.62rem; }
.glyph--rule{ width:1rem; }

.rule{
  position:relative;
  width:min(84rem,100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-4);
}
.rule::before,.rule::after{
  content:""; flex:1; height:1px; background:var(--rule-soft);
}
.rule .glyph{ margin-inline:1.5rem; }

/* ── Masthead ────────────────────────────────────────────── */

.masthead{
  position:fixed; inset:0 0 auto 0; z-index:800;
  padding-block:1rem;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  opacity:0;
  transform:translateY(-100%);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease);
}
.masthead.is-stuck{
  opacity:1; transform:none;
  border-bottom-color:var(--rule-soft);
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.masthead__brand{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--serif); font-weight:500;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.masthead__nav{ display:flex; gap:clamp(1rem,2.4vw,2.25rem); }
.masthead__nav a{
  font-family:var(--serif); font-weight:400;
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none;
  transition:color .3s var(--ease);
}
.masthead__nav a:hover{ color:var(--ink); }
@media (max-width:46rem){ .masthead__nav a:nth-child(-n+2){ display:none; } }

/* ── Hero ────────────────────────────────────────────────── */

.hero{
  position:relative;
  padding-block:clamp(5rem,14vh,9rem) clamp(5rem,11vw,9rem);
  overflow:hidden;
}
.hero__grid{ position:relative; display:grid; gap:clamp(2.5rem,5vw,4rem); }

.hero__name{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 70, "WONK" 1;
  font-weight:330;
  font-size:clamp(3.6rem, 1.2rem + 12vw, 11rem);
  line-height:.87;
  letter-spacing:-.042em;
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}
.hero__name span{ display:block; }
.hero__name--indent{ padding-left:.12em; font-style:italic; font-weight:300; }

.hero__lede{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 50, "WONK" 0;
  font-weight:360;
  font-size:clamp(1.3rem, 1.02rem + 1.15vw, 1.95rem);
  line-height:1.28;
  letter-spacing:-.014em;
  max-width:24ch;
  margin:0 0 1.25rem;
  text-wrap:balance;
}
.hero__sub{
  max-width:var(--measure);
  color:var(--ink-2);
  margin:0 0 2.25rem;
}
.hero__cta{ margin:0; }

.hero__portrait{ margin:0; }
.hero__portrait img{
  width:100%;
  height:auto;
  filter:contrast(1.02);
}
.hero__credit{
  margin-top:.85rem;
  font-family:var(--serif);
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-4);
}

.hero__quote{
  margin:0;
  padding-top:clamp(1.75rem,3vw,2.5rem);
  border-top:1px solid var(--rule);
  max-width:38rem;
}
.hero__quote p{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 60, "WONK" 1;
  font-style:italic; font-weight:330;
  font-size:clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  line-height:1.22;
  letter-spacing:-.018em;
  margin:0 0 1.1rem;
  text-indent:-.42em;
}
.hero__quote p::before{ content:"\201C"; }
.hero__quote p::after{ content:"\201D"; }

blockquote footer{
  font-family:var(--serif);
  font-size:.74rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  line-height:1.6;
}
blockquote footer cite{
  font-style:normal; font-weight:600;
  color:var(--ink);
  display:block;
}
blockquote footer span{ color:var(--ink-3); font-weight:400; letter-spacing:.14em; }

@media (min-width:62rem){
  .hero__grid{
    grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
    column-gap:clamp(2.5rem,5vw,5.5rem);
    align-items:start;
  }
  .hero__head{ grid-column:1; grid-row:1; }
  .hero__portrait{ grid-column:2; grid-row:1 / span 2; margin-top:clamp(3rem,8vw,7rem); }
  .hero__quote{ grid-column:1; grid-row:2; }
}

/* ── Bio photograph (optional second image) ──────────────── */

.bio__photo{ margin:0 0 clamp(2rem,4vw,2.75rem); }
.bio__photo img{ width:100%; height:auto; }

/* ── Endorsements (dark band) ────────────────────────────── */

.endorse{
  background:var(--ink);
  color:var(--on-dark);
  padding-block:clamp(4.5rem,10vw,8.5rem);
}
.endorse .eyebrow{ color:var(--on-dark-3); }
.endorse__list{ list-style:none; margin:0; padding:0; }
.endorse__item{ max-width:min(52rem,100%); }
.endorse__item + .endorse__item{
  margin-top:clamp(2.75rem,6vw,4.5rem);
  padding-top:clamp(2.75rem,6vw,4.5rem);
  border-top:1px solid var(--rule-dark);
}
.endorse__item:nth-child(even){ margin-left:auto; }
.endorse blockquote{ margin:0; }
.endorse blockquote p{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 55, "WONK" 0;
  font-weight:300;
  font-size:clamp(1.25rem, .95rem + 1.3vw, 1.95rem);
  line-height:1.3;
  letter-spacing:-.016em;
  margin:0 0 1.4rem;
  text-indent:-.4em;
  text-wrap:pretty;
}
.endorse blockquote p::before{ content:"\201C"; }
.endorse blockquote p::after{ content:"\201D"; }
.endorse blockquote footer cite{ color:var(--on-dark); }
.endorse blockquote footer span{ color:var(--on-dark-3); }

/* ── About ───────────────────────────────────────────────── */

.bio{ padding-block:clamp(4.5rem,10vw,8.5rem); }
.bio__grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); }

.bio__body p{ max-width:var(--measure); color:var(--ink-2); }
.bio__body p + p{ margin-top:1.35rem; }

.dropcap::first-letter{
  float:left;
  font-family:var(--serif);
  font-variation-settings:"SOFT" 70, "WONK" 1;
  font-weight:330;
  font-size:3.9em;
  line-height:.79;
  padding:.06em .1em 0 0;
  color:var(--ink);
}

.flourish{
  margin-top:clamp(2rem,4vw,3rem) !important;
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--rule-soft);
  font-family:var(--serif);
  font-variation-settings:"SOFT" 70, "WONK" 1;
  font-style:italic;
  font-weight:340;
  font-size:clamp(1.15rem,.98rem + .8vw, 1.6rem);
  line-height:1.34;
  letter-spacing:-.014em;
  color:var(--ink) !important;
}

.creds{
  margin:clamp(2rem,4vw,2.75rem) 0 0;
  border-top:1px solid var(--rule);
}
.creds > div{
  padding:.95rem 0;
  border-bottom:1px solid var(--rule-soft);
}
.creds dt{
  font-family:var(--serif);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.creds dd{
  margin:.3rem 0 0;
  font-size:.95rem;
  line-height:1.45;
  color:var(--ink-3);
}

@media (min-width:62rem){
  .bio__grid{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr);
    column-gap:clamp(3rem,6vw,6rem);
    align-items:start;
  }
  .bio__aside{ position:sticky; top:6rem; }
}

/* ── Students ────────────────────────────────────────────── */

.voices{ padding-block:clamp(4.5rem,10vw,8.5rem); }
.voices__grid{
  display:grid;
  gap:clamp(2.25rem,4.5vw,3.5rem);
}
.voice{ margin:0; padding-top:1.5rem; border-top:1px solid var(--rule); }
.voice blockquote{ margin:0 0 1.1rem; }
.voice blockquote p{
  margin:0;
  color:var(--ink-2);
  text-wrap:pretty;
  text-indent:-.36em;
}
.voice blockquote p::before{ content:"\201C"; }
.voice blockquote p::after{ content:"\201D"; }
.voice figcaption{
  font-family:var(--serif);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink);
}

.voice--feature blockquote p{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 50, "WONK" 0;
  font-weight:330;
  font-size:clamp(1.15rem,.98rem + .78vw,1.6rem);
  line-height:1.38;
  letter-spacing:-.014em;
  color:var(--ink);
}

@media (min-width:56rem){
  .voices__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2.5rem,5vw,5rem); }
  .voice--feature{ grid-column:1 / -1; }
  .voice--feature blockquote p{ max-width:46rem; }
  .voices__grid > .voice:last-child{ grid-column:1; }
}

/* ── Contact ─────────────────────────────────────────────── */

.contact{
  background:var(--ink);
  color:var(--on-dark);
  padding-block:clamp(5rem,11vw,9.5rem);
}
.contact .eyebrow{ color:var(--on-dark-3); }
.contact__title{
  font-family:var(--serif);
  font-variation-settings:"SOFT" 70, "WONK" 1;
  font-weight:320;
  font-size:clamp(3.2rem, 1.6rem + 8vw, 8rem);
  line-height:.9;
  letter-spacing:-.04em;
  margin:0 0 1.25rem;
}
.contact__lede{
  max-width:32ch;
  color:var(--on-dark-2);
  margin:0 0 clamp(2.5rem,5vw,4rem);
  font-size:clamp(1.05rem,.98rem + .35vw,1.2rem);
}
.contact__list{ list-style:none; margin:0; padding:0; }
.contact__list li + li{ margin-top:.5rem; }
.contact__list a{
  display:inline-block;
  font-family:var(--serif);
  font-variation-settings:"SOFT" 40, "WONK" 0;
  font-weight:340;
  font-size:clamp(1.35rem, .95rem + 1.8vw, 2.6rem);
  letter-spacing:-.022em;
  line-height:1.24;
  color:var(--on-dark);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 92%;
  transition:background-size .5s var(--ease), opacity .3s var(--ease);
}
.contact__list a:hover{ background-size:0% 1px; background-position:100% 92%; opacity:.75; }

/* ── Footer ──────────────────────────────────────────────── */

.foot{
  background:var(--ink);
  color:var(--on-dark-3);
  padding-block:2.5rem 3rem;
  border-top:1px solid var(--rule-dark);
}
.foot__inner{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; align-items:baseline;
}
.foot p{
  margin:0;
  font-family:var(--serif);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.foot a{ color:var(--on-dark-2); text-decoration:none; transition:color .3s var(--ease); }
.foot a:hover{ color:var(--on-dark); }

/* ── Reveal ──────────────────────────────────────────────── */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay:var(--d, 0s);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Print ───────────────────────────────────────────────── */

@media print{
  body::after,.masthead{ display:none !important; }
  .endorse,.contact,.foot{ background:#fff !important; color:#000 !important; }
  .endorse cite,.contact__list a{ color:#000 !important; }
}