:root {
    --ink:#1D2228;
    --gold:#D6A648;
    --gold-deep:#8A6A1E;
    --cream:#EFE8DA;
    --paper:#FBF7EF;
    --band:#F2EBDB;
    --muted:#5C666F;
    --rule:#DDD2BC;
    --serif:"Playfair Display",Georgia,"Times New Roman",serif;
    --mono:"Courier Prime","Courier New",monospace;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;background:var(--paper);color:#282F37;
    font-family:var(--sans);font-size:17px;line-height:1.62;
  }
  .wrap{max-width:820px;margin:0 auto;padding:0 22px;position:relative;z-index:1;}
  p{margin:0 0 1.05em 0;}

  .band{position:relative;overflow:hidden;}
  .band.tint{background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
  .band .tex{position:absolute;inset:0;opacity:.055;pointer-events:none;z-index:0;}
  .pad{padding-block:44px;} /* top and bottom only: .wrap owns the side margins */

  /* masthead */
  header{background:var(--ink);text-align:center;padding:44px 22px 38px;position:relative;overflow:hidden;}
  header .dial{
    position:absolute;top:50%;left:50%;width:760px;height:760px;
    transform:translate(-50%,-50%);opacity:.085;pointer-events:none;
  }
  header .inner{position:relative;z-index:1;}
  header img{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;}
  .kicker{
    font-family:var(--mono);color:var(--gold);font-size:12px;letter-spacing:.22em;
    text-transform:uppercase;font-weight:700;margin-top:22px;line-height:1.6;
  }
  .subkicker{color:var(--cream);font-size:15.5px;margin-top:9px;opacity:.88;}
  .pill{
    display:inline-block;margin-top:26px;border:1px solid var(--gold);color:var(--gold);
    font-family:var(--mono);font-size:15.5px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;padding:13px 22px;line-height:1.5;
  }

  .lede{
    font-family:var(--serif);font-weight:700;
    font-size:22px;line-height:1.48;color:var(--ink);
    margin:0 0 26px 0;
  }

  section{margin:0 0 38px 0;}
  section:last-child{margin-bottom:0;}
  h2{
    font-family:var(--serif);font-weight:700;font-size:25px;color:var(--ink);
    margin:0 0 16px 0;padding-bottom:9px;border-bottom:2px solid var(--gold);
    letter-spacing:.005em;
  }

  .poster{
    float:right;width:252px;margin:6px 0 20px 30px;position:relative;
  }
  .poster::before{
    content:"";position:absolute;inset:-34px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(214,166,72,.30),rgba(214,166,72,0));
    z-index:0;
  }
  .poster img{
    position:relative;z-index:1;display:block;width:100%;height:auto;
    border:8px solid #fff;box-shadow:0 4px 18px rgba(29,34,40,.26);
  }

  /* booking */
  .booking{background:var(--ink);color:var(--cream);padding:28px 30px;position:relative;overflow:hidden;}
  .booking .tex{position:absolute;inset:0;opacity:.10;pointer-events:none;}
  .booking .in{position:relative;z-index:1;}
  .booking h3{font-family:var(--serif);color:#fff;font-size:23px;margin:0 0 5px 0;font-weight:700;}
  .booking .sub{color:#B8C1CA;font-size:14.5px;margin-bottom:22px;}
  .win{border-top:1px solid #3C4650;padding-top:16px;margin-top:16px;}
  .win:first-of-type{border-top:0;padding-top:0;margin-top:0;}
  .win .d{font-family:var(--mono);color:var(--gold);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;}
  .win .p{font-size:20px;font-family:var(--serif);font-weight:700;margin:6px 0 4px 0;color:#fff;}
  .win .r{font-size:14.5px;color:#B8C1CA;}
  .booking a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(214,166,72,.45);}
.booking a:hover{border-bottom-color:var(--gold);}
.booking .tail{border-top:1px solid #3C4650;margin-top:22px;padding-top:16px;font-size:14.5px;color:#C9D2DA;}

  /* songs */
  ul.songs{list-style:none;margin:0;padding:0;column-count:2;column-gap:38px;}
  ul.songs li{
    break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--rule);
    font-size:16px;line-height:1.42;display:flex;align-items:flex-start;gap:9px;
  }
  .ic{width:15px;height:15px;flex:0 0 15px;margin-top:4px;fill:var(--gold);}
  .ic.ph{display:block;}
  li.sing{font-weight:600;}
  .note{color:var(--muted);font-size:13.5px;font-style:italic;font-weight:400;}
  .legend{margin-top:18px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:9px;}
  .legend .ic{margin-top:0;}

  /* spec block */
  .spec{display:flex;gap:20px;padding:11px 0;border-bottom:1px solid var(--rule);}
  .spec:last-of-type{border-bottom:0;}
  .spec .k{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:var(--gold-deep);flex:0 0 148px;padding-top:4px;
  }
  .spec .v{flex:1;font-size:16px;line-height:1.5;}

  /* contact */
  .contact{background:var(--ink);color:var(--cream);padding:34px 0;position:relative;overflow:hidden;}
  .contact .tex{position:absolute;inset:0;opacity:.09;pointer-events:none;}
  .contact .n{color:var(--gold);font-weight:700;font-size:23px;font-family:var(--serif);}
  .contact .role{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#B8C1CA;margin-top:7px;}
  .contact .lines{margin-top:18px;font-size:18px;}
  .contact .lines div{margin-bottom:10px;}
  .contact a{color:#fff;text-decoration:none;border-bottom:1px solid var(--gold);}

  footer{
    text-align:center;font-size:13px;color:var(--muted);
    padding:26px 22px 40px;line-height:1.7;font-family:var(--mono);
  }

  @media (max-width:640px){
    body{font-size:16.5px;}
    header{padding:32px 20px 30px;}
    header .dial{width:520px;height:520px;}
    .lede{font-size:20px;}
    h2{font-size:22px;}
    .pad{padding-block:34px;}
    .poster{float:none;width:100%;max-width:280px;margin:0 auto 26px;}
    ul.songs{column-count:1;}
    .booking{padding:24px 20px;}
    .spec{flex-direction:column;gap:3px;}
    .spec .k{flex:none;padding-top:0;}
  }

  /* links inside the gold masthead pill */
  .pill a{color:var(--gold);text-decoration:none;}
  .pill a:hover{text-decoration:underline;}
  .pill div + div{margin-top:9px;}

  /* what-we-provide list on the licensing page */
  ul.provide{list-style:none;margin:0 0 1.05em 0;padding:0;}
  ul.provide li{
    position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--rule);
    font-size:16px;line-height:1.5;
  }
  ul.provide li:last-child{border-bottom:0;}
  ul.provide li::before{
    content:"";position:absolute;left:4px;top:17px;width:7px;height:7px;
    background:var(--gold);transform:rotate(45deg);
  }

  /* artwork in the dark strip: the poster ground and this strip are within a
     few values of each other, so the feathered PNG dissolves into it */
  .contact .strip-art{display:block;width:100%;max-width:210px;height:auto;margin:0 auto;}

  /* FAQ entries */
  .qa{padding:16px 0;border-bottom:1px solid var(--rule);}
  .qa:last-child{border-bottom:0;}
  .qa h3{
    font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);
    margin:0 0 8px 0;line-height:1.35;
  }
  .qa p{margin:0;font-size:16px;}

  /* the band's and the station's logos on the character pages */
  .logo-card,.logo-round{display:block;height:auto;margin:0 auto 32px;box-shadow:0 4px 18px rgba(29,34,40,.22);}
  .logo-card{width:100%;max-width:560px;border:8px solid #fff;}
  .logo-round{width:100%;max-width:300px;border-radius:50%;}
  .logo-row{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;align-items:center;margin:0 0 34px;}
  .logo-row img{margin:0;width:auto;height:150px;max-width:100%;}
  .logo-row .logo-card{border-width:5px;}

  /* song notes on the music page: a year-and-artist line under each title */
  .qa h3 .ic{display:inline-block;margin:0 7px 0 0;vertical-align:-1px;}
  .qa p.meta{
    font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
    font-weight:700;color:var(--gold-deep);margin:-2px 0 7px 0;
  }

  /* One h1 per page, without changing how anything looks. The homepage title is
     the masthead image, so its alt text carries the heading; subpages promote the
     kicker, which already states what the page is. */
  header h1{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;}
  h1.kicker{margin:22px 0 0 0;}