/* violin.4t4.me.uk — "midnight recital"
   Dark ink-blue ground, brass rules, Didone display type.
   Committed to one dark palette: this lives on a music stand, often in a
   dimly lit room, where a bright page glares.
   Square corners, hairline rules, no soft shadows. */

:root{
  --ground:#0B1020;
  --panel:#151D33;
  --panel-2:#1E2947;
  --ink:#ECEAE4;
  --ink-2:#9AA3BC;
  --ink-3:#69728C;
  --rule:#28324F;
  --brass:#C9A227;
  --brass-lit:#E3C05B;
  --brass-dim:#5C4A16;
  --good:#6FD3A3;
  --good-dim:#17322A;
  --tap:72px;

  --display: "Bodoni Moda", "Didot", "Times New Roman", Georgia, serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--ground);
}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 16px/1.62 var(--body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  font-variant-numeric:tabular-nums;
}
a{color:var(--brass-lit)}

.wrap{
  max-width:62rem;
  margin:0 auto;
  padding:0 20px;
  padding-left:max(20px, env(safe-area-inset-left));
  padding-right:max(20px, env(safe-area-inset-right));
}

/* ---------- header ---------- */
.site-head{
  padding-block:clamp(2.2rem,6vw,4rem) clamp(1.4rem,3.5vw,2.2rem);
  border-bottom:1px solid var(--rule);
  position:relative;
}
.site-head::before{
  content:"";
  position:absolute; top:0; left:0;
  width:64px; height:3px;
  background:var(--brass);
}
.eyebrow{
  margin:0 0 1rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass);
}
h1{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(2.9rem,11vw,5.4rem);
  line-height:.92;
  letter-spacing:-.015em;
  margin:0 0 .7rem;
}
.standfirst{
  margin:0;
  max-width:34rem;
  color:var(--ink-2);
  font-size:clamp(1rem,2vw,1.1rem);
  line-height:1.55;
}

/* ---------- sections ---------- */
section{padding-block:clamp(2rem,5vw,3rem)}
section + section{border-top:1px solid var(--rule)}
.sec-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.6rem 1.5rem;
  margin-bottom:1.4rem;
}
h2{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2rem);
  letter-spacing:-.01em;
  margin:0;
}
.sec-note{
  margin:0 0 1.4rem;
  color:var(--ink-2);
  font-size:.94rem;
  max-width:42rem;
}
.sec-link{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  color:var(--brass);
  border-bottom:1px solid var(--brass-dim);
  padding-bottom:2px;
}
.sec-link:hover{border-bottom-color:var(--brass)}

/* ---------- key grid ---------- */
.keys{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width:640px){ .keys{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (min-width:940px){ .keys{grid-template-columns:repeat(4, minmax(0,1fr))} }

.key{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:var(--tap);
  padding:1.15rem 1.15rem 1.05rem;
  background:var(--panel);
  box-shadow:0 0 0 1px var(--rule);
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .14s ease;
}
.key .num{
  font-family:var(--display);
  font-weight:400;
  font-size:.82rem;
  color:var(--brass);
  opacity:.75;
  margin-bottom:.45rem;
  letter-spacing:.06em;
}
.key .name{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:1.32rem;
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.008em;
}
.key .meta{
  margin-top:.3rem;
  font-size:.78rem;
  color:var(--ink-3);
  letter-spacing:.01em;
}
.key::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .14s ease;
}
.key:active{background:var(--panel-2)}
.key:active::after{transform:scaleX(1)}
@media (hover:hover){
  .key:hover{background:var(--panel-2)}
  .key:hover::after{transform:scaleX(1)}
  .key:hover .num{opacity:1}
}
.key:focus-visible{outline:2px solid var(--brass); outline-offset:-2px}

/* ---------- tool cards ---------- */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
}
@media (min-width:720px){ .cards{grid-template-columns:repeat(2, minmax(0,1fr))} }

.card{
  position:relative;
  display:block;
  min-height:var(--tap);
  padding:1.5rem 1.5rem 1.35rem;
  background:var(--panel);
  box-shadow:0 0 0 1px var(--rule);
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .14s ease;
}
.card h3{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-size:1.5rem;
  font-weight:600;
  margin:0 0 .5rem;
  letter-spacing:-.01em;
}
.card p{margin:0; color:var(--ink-2); font-size:.92rem; line-height:1.55}
.card .go{
  display:inline-block;
  margin-top:1rem;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass);
}
.card::after{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .14s ease;
}
.card:active{background:var(--panel-2)}
.card:active::after{transform:scaleX(1)}
@media (hover:hover){
  .card:hover{background:var(--panel-2)}
  .card:hover::after{transform:scaleX(1)}
}
.card:focus-visible{outline:2px solid var(--brass); outline-offset:-2px}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--rule);
  padding-block:2rem;
  padding-bottom:max(2rem, env(safe-area-inset-bottom));
  color:var(--ink-3);
  font-size:.83rem;
  line-height:1.6;
}
.site-foot p{margin:0 0 .4rem; max-width:44rem}
.site-foot .mark{
  font-family:var(--display);
  letter-spacing:.1em;
  color:var(--brass);
  opacity:.7;
}

/* ---------- back link ---------- */
.back{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-2);
}
.back:hover{color:var(--brass)}

/* ---------- buttons ---------- */
.btn{
  appearance:none;
  -webkit-appearance:none;
  font:600 .8rem/1 var(--body);
  letter-spacing:.16em;
  text-transform:uppercase;
  min-height:58px;
  padding:0 2rem;
  border-radius:0;
  border:1px solid var(--brass);
  background:var(--brass);
  color:#0B1020;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background .14s ease, color .14s ease;
}
.btn:active{background:var(--brass-lit)}
.btn.secondary{background:transparent; color:var(--brass)}
.btn.secondary:active{background:var(--brass-dim)}
.btn:focus-visible{outline:2px solid var(--brass-lit); outline-offset:3px}