/* ==========================================================================
   Hee Won Jeon — cellist
   Direction A · "Programme", in ink & stone

   Everything visual is controlled from the tokens in :root below.
   Change a value there and it updates across every page.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---- colour ---- */
  --ground:  #FFFFFF;   /* page background            */
  --tint:    #F5F4F1;   /* warm stone panels          */
  --ink:     #1A1C20;   /* body + headings            */
  --body:    #2E3136;   /* running text               */
  --muted:   #6B6862;   /* captions, nav, labels      */
  --rule:    #E2E0DA;   /* hairlines                  */
  --accent:  #27384E;   /* deep navy — labels, links  */

  /* ---- type ---- */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- measure ---- */
  --page: 1080px;
  --pad:  32px;
}

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a{ color: inherit; }

::selection{ background: #D8DEE6; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap{ max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0;
  background: var(--accent); color:#fff; padding:12px 18px;
  font-family: var(--sans); font-size:13px; letter-spacing:.1em; text-transform:uppercase; z-index:50;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------------- header */

.site-nav{
  display:flex; justify-content:center; gap:34px; flex-wrap:wrap;
  padding: 26px var(--pad);
  border-bottom: 1px solid var(--rule);
}
.site-nav a{
  font-family: var(--sans);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ color: var(--accent); }

/* ------------------------------------------------------------------ hero */

.hero{ padding: 88px var(--pad) 66px; text-align:center; }
.hero h1{
  margin:0; font-weight:300;
  font-size: clamp(3.2rem, 9vw, 6.2rem); line-height:.94; letter-spacing:-.015em;
  text-wrap: balance;
}
.hero .role{
  margin: 22px 0 0;
  font-family: var(--sans); font-weight:300; font-size:12px;
  letter-spacing:.4em; text-transform:uppercase; color: var(--accent);
}
.hero .place{
  margin: 14px 0 0;
  font-family: var(--sans); font-size:13px; color: var(--muted);
}

/* page hero for inner pages — smaller */
.page-head{ padding: 74px var(--pad) 48px; text-align:center; border-bottom:1px solid var(--rule); }
.page-head h1{
  margin:0; font-weight:300; font-size: clamp(2.4rem, 6vw, 3.9rem);
  line-height:1.02; letter-spacing:-.012em;
}
.page-head p{
  margin:16px auto 0; max-width:52ch;
  font-family: var(--sans); font-size:14px; line-height:1.7; color: var(--muted);
}

/* --------------------------------------------------------------- portrait */

.portrait{ margin: 0 0 76px; }
.portrait img{ width:100%; height:auto; }
.portrait figcaption{
  margin-top:12px;
  font-family: var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted);
}

/* ------------------------------------------------------------------ paths */
/* The two audiences: lesson families, and collaborating musicians. */

.paths{
  display:grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--rule);
}
.paths > div{ padding: 44px 40px 46px; }
.paths > div + div{ border-left: 1px solid var(--rule); }
.paths h2{
  margin:0 0 14px;
  font-family: var(--sans); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:500; color: var(--accent);
}
.paths p{ margin:0 0 20px; font-size:1.2rem; line-height:1.6; color: var(--body); }

.linkline{
  font-family: var(--sans); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color: var(--ink); text-decoration:none;
  border-bottom:1px solid var(--accent); padding-bottom:4px;
  transition: color .2s;
}
.linkline:hover{ color: var(--accent); }

/* ------------------------------------------------------------- text + cols */

.cols{ display:grid; grid-template-columns: 1.35fr .85fr; gap:58px; padding: 72px 0; }
.cols p{ margin:0 0 20px; font-size:1.3rem; max-width:62ch; color: var(--body); }
.cols p:last-child{ margin-bottom:0; }

.prose{ max-width: 64ch; }
.prose p{ margin:0 0 22px; font-size:1.3rem; color: var(--body); }
.prose p:last-child{ margin-bottom:0; }
.prose h2{
  margin: 52px 0 18px; font-weight:400; font-size:1.75rem; letter-spacing:.01em;
}
.prose h2:first-child{ margin-top:0; }
.prose ul{ margin:0 0 22px; padding-left:1.15em; }
.prose li{ margin-bottom:10px; font-size:1.24rem; color: var(--body); }

.facts{ background: var(--tint); padding: 30px 28px; align-self:start; }
.facts dt{
  font-family: var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--accent); margin:0 0 6px;
}
.facts dd{ margin:0 0 22px; font-size:1.12rem; line-height:1.5; }
.facts dd:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------- sections */

.sec-head{
  display:flex; align-items:baseline; gap:16px;
  padding: 0 0 18px; border-bottom:1px solid var(--rule);
}
.sec-head h2{ margin:0; font-weight:400; font-size:1.8rem; }
.sec-head .tag{
  font-family: var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--muted);
}

.chips{ display:flex; flex-wrap:wrap; gap:9px; padding: 26px 0 0; }
.chips span{
  font-family: var(--sans); font-size:12.5px;
  color:#3A3D42; background: var(--tint); padding: 9px 15px;
}

/* ----------------------------------------------------------------- quotes */

.quote-band{
  padding: 76px var(--pad);
  text-align:center; background: var(--tint); border-top:1px solid var(--rule);
}
.quote-band blockquote{
  margin:0 auto; max-width:26ch;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-style:italic; font-weight:300; line-height:1.32;
}
.quote-band cite{
  display:block; margin-top:22px;
  font-family: var(--sans); font-style:normal; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color: var(--accent);
}

/* press list */
.press-list{ list-style:none; margin:0; padding:0; }
.press-list li{ padding: 38px 0; border-bottom:1px solid var(--rule); }
.press-list li:first-child{ border-top:1px solid var(--rule); }
.press-list blockquote{
  margin:0; font-size:1.5rem; font-style:italic; font-weight:300; line-height:1.44; color: var(--ink);
  max-width:56ch;
}
.press-list .src{
  display:block; margin-top:16px;
  font-family: var(--sans); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--accent);
}
.press-list .src span{ color: var(--muted); }

/* --------------------------------------------------------- media coverage */

.coverage{ list-style:none; margin:0; padding:0; }
.coverage li{ border-bottom:1px solid var(--rule); }
.coverage li:first-child{ border-top:1px solid var(--rule); }
.coverage a{
  display:grid; grid-template-columns: 1fr auto; gap:14px 30px; align-items:baseline;
  padding: 30px 0; text-decoration:none; color:inherit;
  transition: background .18s;
}
.coverage a:hover{ background: var(--tint); }
.coverage .head{ font-size:1.42rem; line-height:1.4; color:var(--ink); max-width:46ch; }
.coverage a:hover .head{ color: var(--accent); }
.coverage .pub{
  font-family: var(--sans); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--muted); white-space:nowrap;
}
.coverage .arrow{ color: var(--accent); }

/* homepage coverage strip */
.coverage-strip{ padding: 0 0 72px; }
.coverage-strip .coverage .head{ font-size:1.24rem; }

/* ---------------------------------------------------------------- contact */

.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:58px; padding: 72px 0; }
.contact-lead{ font-size:1.42rem; line-height:1.55; margin:0 0 30px; max-width:34ch; }
.contact-line{ margin:0 0 26px; }
.contact-line dt{
  font-family: var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--accent); margin-bottom:6px;
}
.contact-line dd{ margin:0; font-size:1.24rem; }
.contact-line a{ color: var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.contact-line a:hover{ border-color: var(--accent); color: var(--accent); }

.mailbtn{
  display:inline-block; margin-top:8px;
  font-family: var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  background: var(--accent); color:#fff; text-decoration:none;
  padding: 15px 28px; transition: background .2s;
}
.mailbtn:hover{ background:#1B2A3C; }

/* ----------------------------------------------------------------- footer */

.site-footer{ padding: 34px var(--pad) 50px; border-top:1px solid var(--rule); margin-top: 0; }
.site-footer .fin{
  max-width: var(--page); margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;
  font-family: var(--sans); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color: var(--muted);
}
.site-footer a{ color: var(--muted); text-decoration:none; margin-left:20px; }
.site-footer a:hover{ color: var(--accent); }

/* ------------------------------------------------------------ small print */

.editnote{
  font-family: var(--sans); font-size:12px; line-height:1.6;
  background:#FBF7EC; border:1px solid #E9DFC6; color:#6A5B3A;
  padding:14px 18px; margin: 0 0 30px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px){
  body{ font-size:19px; }
  .cols,
  .contact-grid{ grid-template-columns: 1fr; gap:38px; padding-block: 52px; }
  .paths{ grid-template-columns: 1fr; }
  .paths > div + div{ border-left:none; border-top:1px solid var(--rule); }
  .paths > div{ padding: 36px 24px 38px; }
  .hero{ padding-top: 62px; }
  .portrait{ margin-bottom: 56px; }
  .site-nav{ gap:22px; padding: 22px 20px; }
  :root{ --pad: 22px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}