@font-face{font-family:'Archivo'; src:url('fonts/archivo-v400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:'Archivo'; src:url('fonts/archivo-v600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap}
@font-face{font-family:'Archivo'; src:url('fonts/archivo-v700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap}

:root{
  --paper:#f7f5f0; --ink:#17171a; --ink-2:#4c4c48;
  --accent:#c2401f; --hairline:#e6e2d8;
  --font:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --wrap:72rem; --pad:clamp(1.25rem, 4vw, 3rem);
  /* Distance from the viewport edge to where .wrap content starts. Lets
     full-bleed sections line their type up with the rest of the page. */
  --gutter:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--font);
     font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}
.label{font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent)}

/* Sticky header */
.site-header{
  position:sticky; top:0; z-index:10;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding-block:1.1rem;
}
.site-header .name{
  text-transform:uppercase; font-weight:600; font-size:.95rem;
  letter-spacing:.02em; white-space:nowrap;
}
.site-header nav{
  display:flex; gap:1.75rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.site-header nav::-webkit-scrollbar{display:none}
.site-header nav a{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:color .15s ease;
}
.site-header nav a:hover,
.site-header nav a:focus-visible,
.site-header nav a[aria-current="page"]{
  color:var(--accent);
}
@media (max-width:40rem){
  .site-header .wrap{flex-direction:column; align-items:flex-start; gap:.6rem}
  .site-header nav{gap:1.25rem; width:100%}
  .sec{scroll-margin-top:6rem}
}

/* Type scale */
h1{
  text-transform:uppercase; font-weight:700;
  font-size:clamp(3rem, 9vw, 7.5rem);
  letter-spacing:-0.02em; line-height:0.95;
}
h2{
  text-transform:uppercase; font-weight:600;
  font-size:clamp(1.4rem, 3vw, 2rem);
}

/* Section head: number + heading on a hairline-topped row */
.sec-head{
  display:flex; align-items:baseline; gap:1.25rem;
  padding-top:1.25rem; margin-bottom:2.5rem;
}
.num{
  color:var(--accent); font-variant-numeric:tabular-nums;
  font-size:.85rem; font-weight:600; letter-spacing:.05em;
}

/* Sections */
.sec{padding-block:clamp(3rem, 8vw, 6rem); scroll-margin-top:5rem}
.hairline-top{border-top:1px solid var(--hairline)}

/* Skip link */
.skip{
  position:absolute; left:-999px; top:auto;
  padding:.75rem 1.25rem; background:var(--paper); color:var(--ink);
  border:1px solid var(--accent); font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; text-decoration:none; z-index:100;
}
.skip:focus{
  left:1rem; top:1rem;
}

/* Button */
.btn{
  display:inline-block; font-size:.72rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border:1px solid var(--ink); padding:.85em 1.6em;
  transition:background .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible{
  background:var(--ink); color:var(--paper);
}

/* Photo credit */
.credit{font-size:.7rem; color:var(--ink-2)}
.credit-notice{margin-bottom:1.5rem; max-width:40rem}

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

/* Prose paragraph rhythm */
.prose p{margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}

/* Hero — two panels edge to edge, no .wrap. The left panel pads itself to the
   page grid so the name lines up with the section heads below. */
.hero{
  display:grid; grid-template-columns:1fr 1fr;
  min-height:100vh; min-height:100svh;
}
/* Deliberately NOT aligned to --gutter: on a wide screen that left the panel
   mostly empty margin while the type stayed 480px wide. */
.hero-panel{
  display:flex; flex-direction:column; justify-content:space-between; gap:2.5rem;
  padding:clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
  padding-left:clamp(1.5rem, 5vw, 5.5rem);
}
.hero-top{display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem}
.hero h1{font-size:clamp(2.5rem, 7.4vw, 6rem)}
.hero-lede{
  max-width:40ch; color:var(--ink-2);
  font-size:clamp(1rem, 1.4vw, 1.2rem); line-height:1.55;
}
.accent-rule{display:block; width:4.5rem; height:.2rem; background:var(--accent)}

.hero-photo{position:relative; background:#1d1d22; border-left:1px solid var(--hairline)}
.hero-photo picture{display:block; height:100%}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover}
.hero-photo .credit{
  position:absolute; left:1.5rem; right:1.5rem; bottom:1.25rem;
  color:#f7f5f0; opacity:.8; text-shadow:0 1px 3px rgba(0,0,0,.55);
}

@media (max-width:56rem){
  .hero{
    grid-template-columns:1fr; min-height:0;
    grid-template-rows:auto minmax(18rem, 45svh);
  }
  .hero-panel{
    padding:clamp(2.5rem, 8vw, 4rem) var(--pad);
    gap:2rem; min-height:0;
  }
  .hero h1{font-size:clamp(2.75rem, 12vw, 4.5rem)}
  .hero-lede{max-width:42ch}
  .hero-photo{border-left:0; border-top:1px solid var(--hairline)}
}

/* Cover pages (index): the header stays out of the opening screen and slides in
   once the hero is scrolled past. Scoped to html.js so that without JavaScript
   the header simply stays put — and to .cover so media.html keeps its own. */
.js .cover .site-header{
  position:fixed; left:0; right:0; top:0;
  transform:translateY(-101%); opacity:0; visibility:hidden;
  transition:transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
}
.js .cover .site-header.is-on{
  transform:none; opacity:1; visibility:visible;
  transition:transform .35s ease, opacity .35s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce){
  .js .cover .site-header,
  .js .cover .site-header.is-on{transition:none}
}

/* Section head sub-label (At a glance / Upcoming / Recent) */
.eng-heading{margin:2.5rem 0 1rem}
.eng-heading:first-of-type{margin-top:0}

/* Biography: portrait left, prose right, both hanging from the same top line.
   The fact panel is deliberately NOT in this grid — squeezed into a half column
   its values wrapped five and six lines deep. */
.bio-layout{
  display:grid; grid-template-columns:1fr 1.45fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
.bio-text{max-width:38rem}
/* Prose always outruns a single portrait. Rather than strand the image at the
   top of a half-empty column, it rides along as the text scrolls past. */
.bio-layout .portrait{position:sticky; top:5.5rem}
.bio-layout .portrait::after{
  content:''; display:block; width:4.5rem; height:.2rem;
  background:var(--accent); margin-top:1.25rem;
}
@media (max-width:56rem){
  .bio-layout{grid-template-columns:1fr; gap:2rem}
  .bio-layout .portrait{position:static; max-width:26rem}
}
@media (prefers-reduced-motion: reduce){
  .bio-layout .portrait{position:static}
}

/* Portrait figure */
.portrait picture,
.portrait img{display:block; width:100%; height:auto}
.portrait .credit{margin-top:.6rem}

/* At a glance: full width under the biography, a modular grid so long values
   breathe instead of wrapping in a narrow column. */
.glance{
  margin-top:clamp(2.75rem, 6vw, 4.5rem);
  border-top:1px solid var(--hairline); padding-top:1.75rem;
}
.glance-title{margin-bottom:1.5rem}
.facts{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-bottom:1px solid var(--hairline);
}
.facts-cell{
  border-top:1px solid var(--hairline);
  padding:1.15rem 1.75rem 1.6rem 0;
}
.facts-cell:not(:nth-child(3n+1)){
  border-left:1px solid var(--hairline); padding-left:1.75rem;
}
.facts-cell dt{
  font-size:.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--ink-2); margin-bottom:.5rem;
}
.facts-cell dd{font-size:.95rem; line-height:1.55}

/* The reset selectors below must match the specificity of the 3-column rule
   above, or cells 3 and 5 keep its indent. */
@media (max-width:64rem){
  .facts{grid-template-columns:repeat(2, 1fr)}
  .facts-cell:not(:nth-child(3n+1)){border-left:0; padding-left:0}
  .facts-cell:not(:nth-child(2n+1)){
    border-left:1px solid var(--hairline); padding-left:1.75rem;
  }
}
@media (max-width:40rem){
  .facts{grid-template-columns:1fr}
  .facts-cell:not(:nth-child(3n+1)),
  .facts-cell:not(:nth-child(2n+1)){border-left:0; padding-left:0}
  .facts-cell{padding-right:0}
}

/* Repertoire blocks */
.rep-block{margin-bottom:2rem}
.rep-block:last-child{margin-bottom:0}
.rep-names{
  font-size:clamp(1.05rem, 2vw, 1.35rem); font-weight:400;
  line-height:1.55; margin-top:.6rem; max-width:56rem;
}

/* Engagements */
.eng-list{list-style:none}
.eng-row{
  display:grid; grid-template-columns:8rem 14rem 1fr; gap:1.25rem;
  padding:1rem 0; border-top:1px solid var(--hairline); align-items:baseline;
}
.eng-list .eng-row:last-child{border-bottom:1px solid var(--hairline)}
.eng-date{
  color:var(--accent); font-variant-numeric:tabular-nums;
  font-weight:600; font-size:.9rem;
}
.eng-venue{font-weight:600; font-size:.9rem}
.eng-venue a{color:inherit; text-decoration:none; border-bottom:1px solid var(--accent)}
.eng-venue a:hover, .eng-venue a:focus-visible{color:var(--accent)}
.eng-programme{font-size:.9rem; color:var(--ink-2); line-height:1.5}
@media (max-width:48rem){
  .eng-row{grid-template-columns:1fr; gap:.35rem; padding:1.1rem 0}
}

/* A composer writing about his own work — set apart from the reviews below,
   and the only quote on the page that is not a translation. */
.composer-note{
  max-width:52rem; margin-bottom:3rem; padding-bottom:2.5rem;
  border-bottom:1px solid var(--hairline);
}
.composer-note blockquote{position:relative; padding-left:2.75rem; margin-top:1.25rem}
.composer-note blockquote::before{
  content:'\201C'; position:absolute; left:0; top:-.6rem;
  font-size:4rem; line-height:1; color:var(--accent);
  font-weight:700; font-family:Georgia, 'Times New Roman', serif;
}
.composer-note blockquote p{
  font-size:clamp(1.25rem, 1.9vw, 1.6rem); line-height:1.45;
}
.composer-note figcaption{
  display:flex; flex-direction:column; gap:.3rem;
  padding-left:2.75rem; margin-top:1rem;
}
@media (max-width:40rem){
  .composer-note blockquote,
  .composer-note figcaption{padding-left:1.9rem}
  .composer-note blockquote::before{font-size:3rem; top:-.35rem}
}

/* Press quotes */
.quotes{display:grid; gap:2.5rem; max-width:56rem}
.quote{position:relative; padding-left:2.75rem}
.quote::before{
  content:'\201C'; position:absolute; left:0; top:-.35rem;
  font-size:3.25rem; line-height:1; color:var(--accent);
  font-weight:700; font-family:Georgia, 'Times New Roman', serif;
}
.quote p{font-size:1.35rem; font-weight:400; line-height:1.45; margin-bottom:.9rem}
.quote footer{display:flex; flex-direction:column; gap:.3rem}
.quote-meta{font-size:.8rem; color:var(--ink-2); font-style:italic}

/* Media grid */
.media-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
  margin-bottom:1.5rem;
}
.media-item{background:var(--paper); display:flex; flex-direction:column}
/* Uniform thumbnails at 3:2. The four web derivatives are already 3:2 — 04 was
   recropped from its press original, which is 1.57:1 — so aspect-ratio and
   cover only guard against a future file arriving off-format. height:auto is
   load-bearing: without it the img falls back to its height attribute and the
   landscape photo gets sliced into a vertical strip. */
.media-item picture{display:block}
.media-item img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
/* The cells carry no credit line — the grid is four bare photos. Credits are on
   media.html; the footer keeps the attribution for this page. */
@media (max-width:48rem){
  .media-grid{grid-template-columns:repeat(2, 1fr)}
}

/* Media page hero (label + h1, no photo) */
.media-hero{padding-block:clamp(4rem, 12vw, 7rem) clamp(2rem, 6vw, 3rem)}
.media-hero .label{margin-bottom:.75rem}

/* Gallery grid (media.html) */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--hairline); border:1px solid var(--hairline);
}
.gallery-item{background:var(--paper); display:flex; flex-direction:column}
.gallery-item picture,
.gallery-item img{display:block; width:100%; height:auto}
.gallery-item figcaption{
  padding:.75rem .85rem .9rem; display:flex; flex-direction:column; gap:.35rem;
}
.gallery-item .cap{font-size:.85rem; line-height:1.45}
.gallery-item .credit{margin:0}
.gallery-item .dl{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); text-decoration:none; margin-top:.15rem;
}
.gallery-item .dl:hover, .gallery-item .dl:focus-visible{text-decoration:underline}
@media (max-width:60rem){
  .gallery-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:34rem){
  .gallery-grid{grid-template-columns:1fr}
}

/* Video embeds (once links are supplied — see comment in media.html) */
.video-embed{position:relative; width:100%; padding-top:56.25%}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Lightbox */
dialog#lightbox{
  border:none; padding:0; background:transparent; max-width:92vw; max-height:92vh;
  position:fixed; inset:0; margin:auto;
}
dialog#lightbox::backdrop{background:rgba(23,23,26,.92)}
dialog#lightbox img{
  display:block; max-width:92vw; max-height:80vh; width:auto; height:auto; margin:0 auto;
}
dialog#lightbox figcaption{
  color:var(--paper); font-size:.85rem; text-align:center; padding-top:.85rem;
}
dialog#lightbox .lightbox-close{
  position:absolute; top:-.25rem; right:-.25rem; transform:translate(50%, -50%);
  width:2.25rem; height:2.25rem; border-radius:50%; border:none;
  background:var(--paper); color:var(--ink); font-size:1.35rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
dialog#lightbox .lightbox-close:hover, dialog#lightbox .lightbox-close:focus-visible{
  background:var(--accent); color:var(--paper);
}
@media (max-width:30rem){
  dialog#lightbox .lightbox-close{top:-.5rem; right:0; transform:translate(0, -100%)}
}

/* Contact: artist and management as two equal cells of the same grid.
   Both addresses share one type size — the artist's is 30 characters, so that
   size is what lets both sit on a single line in their column. */
.contacts{
  display:grid; grid-template-columns:1fr 1fr; max-width:56rem;
  border-bottom:1px solid var(--hairline);
}
.contact-block{
  border-top:1px solid var(--hairline);
  padding:1.15rem 1.75rem 1.6rem 0;
}
.contact-block + .contact-block{
  border-left:1px solid var(--hairline); padding-left:1.75rem;
}
.contact-who{color:var(--ink); margin:.55rem 0 .9rem}
.contact-mail{
  display:inline-block; max-width:100%; overflow-wrap:anywhere;
  font-weight:600; font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--accent); padding-bottom:.1em;
  transition:color .15s ease;
}
.contact-mail:hover, .contact-mail:focus-visible{color:var(--accent)}
.contact-site{
  display:block; width:fit-content; margin-top:.5rem;
  font-size:.9rem; color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor;
}
@media (max-width:44rem){
  .contacts{grid-template-columns:1fr}
  .contact-block + .contact-block{border-left:0; padding-left:0}
}

/* Footer */
footer .wrap{
  padding-block:2rem; display:flex; flex-direction:column; gap:.4rem;
}
.footer-copy{font-size:.85rem; color:var(--ink-2)}

/* Management credit: quiet, but given its own space above the fine print */
.representation{
  display:flex; flex-direction:column; gap:.5rem;
  padding-bottom:1.5rem; margin-bottom:1.25rem;
  border-bottom:1px solid var(--hairline);
}
.representation p{font-size:1rem; color:var(--ink)}

/* Levare links stay brick red in every state; hover only thickens the rule. */
.representation a, .credit a{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:1px;
}
.representation a:hover, .representation a:focus-visible,
.credit a:hover, .credit a:focus-visible{border-bottom-width:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Video facades — the poster is served from this site and the YouTube iframe is
   only fetched when someone presses play, so an idle page still makes no
   third-party request and sets no cookie. */
.video-item{margin-bottom:2.5rem}
.video-item:last-child{margin-bottom:0}
.video-frame{
  position:relative; aspect-ratio:16/9; background:#1d1d22;
  border:1px solid var(--hairline);
}
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-facade{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer; display:block;
}
.video-facade img{display:block; width:100%; height:100%; object-fit:cover}
.video-facade::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  transition:background .2s ease;
}
.video-facade:hover::after, .video-facade:focus-visible::after{
  background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.5));
}
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1; width:4.5rem; height:4.5rem; border-radius:50%;
  background:var(--accent); display:grid; place-items:center;
  transition:transform .2s ease;
}
.video-facade:hover .video-play, .video-facade:focus-visible .video-play{
  transform:translate(-50%,-50%) scale(1.08);
}
.video-play::before{
  content:''; display:block; margin-left:.28rem;
  border-left:1.15rem solid var(--paper);
  border-top:.7rem solid transparent; border-bottom:.7rem solid transparent;
}
.video-item figcaption{padding-top:.9rem}
.video-item .video-work{font-size:1.05rem; color:var(--ink)}
.video-item .video-where{font-size:.9rem; color:var(--ink-2); margin-top:.3rem}
@media (prefers-reduced-motion: reduce){
  .video-facade::after, .video-play{transition:none}
}