:root{
    --paper:#F2E9D7;
    --paper-2:#EADFC7;
    --ink:#1B1410;
    --ink-soft:#4A3A2E;
    --rule:#C9B68E;
    --burgundy:#6E1F2C;
    --burgundy-deep:#4A1320;
    --brass:#B0843C;
    --brass-light:#D4AC68;
    --forest:#2F4636;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Spectral',serif;
    font-weight:400;
    font-size:18px;
    line-height:1.7;
    background-image:
      radial-gradient(circle at 12% 8%, rgba(176,132,60,0.07) 0%, transparent 38%),
      radial-gradient(circle at 90% 70%, rgba(110,31,44,0.06) 0%, transparent 42%);
  }
  body::before{
    content:"";
    position:fixed;inset:0;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
    opacity:.18;
    pointer-events:none;
    mix-blend-mode:multiply;
    z-index:1;
  }

  .wrap{
    max-width:880px;
    margin:0 auto;
    padding:60px 40px 120px;
    position:relative;
    z-index:2;
  }
  nav.top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0 24px;
    border-bottom:0.5px solid var(--rule);
    margin-bottom:48px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  nav.top a{color:inherit;text-decoration:none;border-bottom:0.5px solid transparent;transition:border-color .3s}
  nav.top a:hover{border-color:var(--brass)}
  nav.top a.current{color:var(--burgundy);font-weight:600;border-color:var(--brass)}
  nav.top .links{display:flex;gap:28px;flex-wrap:wrap}
  nav.top .home{font-weight:600;color:var(--brass)}
  @media(max-width:640px){
    nav.top{flex-direction:column;align-items:flex-start;gap:14px}
    nav.top .links{gap:18px}
  }

  /* MASTHEAD */
  header.masthead{
    border-top:3px double var(--ink);
    border-bottom:3px double var(--ink);
    padding:38px 0 36px;
    margin-bottom:56px;
    text-align:center;
  }
  .kicker{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--burgundy);
    margin-bottom:18px;
  }
  .masthead .logo{
    width:124px;height:124px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 26px;
    display:block;
    border:0.5px solid var(--rule);
    box-shadow:0 0 0 6px var(--paper), 0 0 0 6.5px var(--rule);
    filter:sepia(.12) contrast(1.02);
  }
  h1.title{
    font-family:'Fraunces',serif;
    font-variation-settings:"opsz" 144,"SOFT" 50;
    font-weight:300;
    font-size:clamp(48px,8.5vw,96px);
    line-height:.92;
    letter-spacing:-0.025em;
    color:var(--ink);
  }
  h1.title em{
    font-style:italic;
    color:var(--burgundy);
    font-weight:300;
  }
  .subtitle{
    margin-top:24px;
    font-family:'Spectral',serif;
    font-style:italic;
    font-size:20px;
    color:var(--ink-soft);
  }
  .masthead-meta{
    margin-top:24px;
    display:flex;
    gap:30px;
    justify-content:center;
    flex-wrap:wrap;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .masthead-meta span b{color:var(--burgundy);font-weight:500}

  /* INTRO */
  .intro{
    max-width:640px;
    margin:0 auto 70px;
    text-align:center;
    font-size:19px;
    color:var(--ink-soft);
  }
  .intro b{color:var(--ink);font-weight:600}

  /* SECCIÓN */
  .sec-label{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--burgundy);
    text-align:center;
    margin-bottom:8px;
  }
  h2.sec-title{
    font-family:'Fraunces',serif;
    font-variation-settings:"opsz" 72,"SOFT" 30;
    font-weight:300;
    font-size:40px;
    line-height:1.05;
    text-align:center;
    margin-bottom:36px;
  }
  h2.sec-title em{font-style:italic;color:var(--burgundy)}
  .sec-rule{
    width:64px;height:1px;background:var(--brass);
    margin:0 auto 70px;
    position:relative;
  }
  .sec-rule::after{
    content:"❦";
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:var(--paper);padding:0 12px;
    color:var(--brass);font-family:'Fraunces',serif;font-size:17px;font-style:italic;
  }

  /* CONCIERTOS PRÓXIMOS */
  .concert-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:74px}
  @media(max-width:720px){.concert-grid{grid-template-columns:1fr}}
  a.concert-card{
    display:block;
    text-decoration:none;color:inherit;
    background:var(--paper-2);
    border:0.5px solid var(--rule);
    border-top:3px solid var(--burgundy);
    border-radius:2px;
    padding:30px 30px 26px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
  }
  a.concert-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 28px rgba(27,20,16,.10);
    border-top-color:var(--brass);
  }
  .concert-card .cc-date{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--burgundy);margin-bottom:14px;
  }
  .concert-card .cc-title{
    font-family:'Fraunces',serif;
    font-variation-settings:"opsz" 72,"SOFT" 30;
    font-weight:300;font-size:30px;line-height:1.05;margin-bottom:6px;
  }
  .concert-card .cc-theme{font-style:italic;color:var(--burgundy);font-size:17px;margin-bottom:16px}
  .concert-card .cc-detail{font-size:15px;color:var(--ink-soft);line-height:1.65}
  .concert-card .cc-detail b{color:var(--ink);font-weight:600}
  .concert-card .cc-go{
    margin-top:18px;padding-top:14px;border-top:0.5px solid var(--rule);
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--brass);
  }

  /* PÁGINAS DEL SITIO */
  .pages-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:74px}
  @media(max-width:720px){.pages-grid{grid-template-columns:1fr}}
  a.page-card{
    display:flex;align-items:baseline;gap:18px;
    text-decoration:none;color:inherit;
    border:0.5px solid var(--rule);
    border-radius:2px;
    background:transparent;
    padding:24px 26px;
    transition:background .25s, border-color .25s;
  }
  a.page-card:hover{background:var(--paper-2);border-color:var(--brass)}
  .page-card .pc-orn{
    font-family:'Fraunces',serif;font-style:italic;
    font-size:22px;color:var(--brass);flex:none;line-height:1;
  }
  .page-card .pc-name{
    font-family:'Fraunces',serif;
    font-variation-settings:"opsz" 72,"SOFT" 30;
    font-weight:300;font-size:25px;line-height:1.1;
  }
  .page-card .pc-desc{font-size:14px;font-style:italic;color:var(--ink-soft);margin-top:5px;line-height:1.55}

  /* CONTACTO */
  .contact{
    text-align:center;
    background:var(--paper-2);
    border:0.5px solid var(--rule);
    border-radius:2px;
    padding:40px 30px;
    margin-bottom:20px;
  }
  .contact .c-line{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;letter-spacing:.12em;
    color:var(--ink-soft);margin-top:10px;
  }
  .contact a{color:var(--burgundy);text-decoration:none;border-bottom:0.5px solid var(--brass)}
  .contact a:hover{color:var(--brass)}

  footer{margin-top:90px;padding-top:34px;border-top:3px double var(--ink);text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--ink-soft);line-height:2}
  footer .ornament{font-family:'Fraunces',serif;font-size:24px;color:var(--brass);margin-bottom:12px;font-style:italic}
  footer a{color:var(--ink-soft);text-decoration:none;border-bottom:0.5px dotted var(--rule)}
  footer a:hover{color:var(--burgundy)}

  @media (max-width:720px){
    .wrap{padding:30px 22px 80px}
  }

  /* Portada publica del Posaunenchor Temperley. */
  .wrap{max-width:1120px;padding-top:28px}
  nav.top{
    position:sticky;top:0;z-index:20;
    margin:0 -24px 42px;padding:15px 24px;
    background:rgba(242,233,215,.94);
    backdrop-filter:blur(12px);
    border:0.5px solid var(--rule);
    box-shadow:0 8px 24px rgba(27,20,16,.05);
  }
  header.masthead{
    display:flex;align-items:center;gap:48px;text-align:left;
    padding:54px 0;margin-bottom:42px;
  }
  .hero-copy{flex:1.15;min-width:0}
  .hero-art{flex:0 1 440px;min-width:320px}
  .masthead .logo{
    display:block;width:100%;max-width:440px;height:auto;aspect-ratio:12/7;
    margin:0 0 0 auto;object-fit:cover;
    border:1px solid var(--brass);border-radius:2px;outline:6px solid var(--paper);
    box-shadow:0 0 0 7px var(--rule),18px 20px 0 rgba(176,132,60,.16);
  }
  h1.title{grid-area:title;font-size:clamp(58px,8vw,104px)}
  .subtitle{grid-area:subtitle;max-width:620px}
  .masthead-meta{grid-area:meta;justify-content:flex-start}
  .intro{max-width:760px;text-align:left;margin:0 0 58px;padding-left:24px;border-left:3px solid var(--brass)}
  .concert-grid{grid-template-columns:1.15fr .85fr;gap:18px}
  a.concert-card:first-child{background:var(--burgundy);color:var(--paper);border-color:var(--burgundy)}
  a.concert-card:first-child .cc-date,
  a.concert-card:first-child .cc-theme,
  a.concert-card:first-child .cc-go{color:var(--brass-light)}
  a.concert-card:first-child .cc-detail,
  a.concert-card:first-child .cc-detail b{color:var(--paper)}
  .pages-grid{grid-template-columns:repeat(3,1fr)}
  a.page-card{align-items:flex-start;min-height:148px}
  a.page-card:nth-child(n+5){background:rgba(234,223,199,.55)}

  details.archive-group{margin:0 0 26px;border:0.5px solid var(--rule);background:rgba(234,223,199,.42)}
  details.archive-group summary{
    list-style:none;cursor:pointer;padding:28px 32px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    font-family:'Fraunces',serif;font-size:34px;line-height:1.1;
  }
  details.archive-group summary::-webkit-details-marker{display:none}
  details.archive-group summary::after{
    content:attr(data-open);flex:none;font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy)
  }
  details.archive-group[open] summary{border-bottom:0.5px solid var(--rule)}
  details.archive-group[open] summary::after{content:attr(data-close)}
  details.archive-group > .sec-label,
  details.archive-group > h2.sec-title{display:none}
  details.archive-group > p{margin:26px 32px 30px!important;max-width:760px!important}
  details.archive-group > a{margin-left:32px!important;margin-right:32px!important}
  details.archive-group > a:last-child{margin-bottom:32px!important}

  @media(max-width:820px){
    .pages-grid{grid-template-columns:1fr 1fr}
    header.masthead{gap:30px}
    .hero-art{min-width:280px}
  }
  @media(max-width:640px){
    .wrap{padding:18px 18px 64px}
    nav.top{position:relative;margin:0 0 30px;padding:16px;background:var(--paper)}
    nav.top .links{display:flex;flex-wrap:wrap;gap:10px 18px;width:100%}
    nav.top .links a{display:block;flex:0 0 calc(50% - 9px);padding:3px 0;letter-spacing:.12em}
    nav.top .home{font-size:12px}
    header.masthead{display:flex;flex-direction:column;gap:0;text-align:left;padding:36px 0}
    .hero-copy{width:100%;order:2}
    .hero-art{width:100%;min-width:0;flex:none;order:1;margin-bottom:42px}
    .masthead .logo{width:100%;max-width:360px;margin:0 auto}
    h1.title{font-size:clamp(48px,16vw,68px)}
    .masthead-meta{justify-content:flex-start;gap:12px 20px}
    .intro{padding-left:16px}
    .concert-grid,.pages-grid{grid-template-columns:1fr}
    details.archive-group summary{padding:22px;font-size:28px}
    details.archive-group > p{margin:22px!important}
    details.archive-group > a{
      margin-left:16px!important;margin-right:16px!important;padding:22px!important;
      gap:18px!important;align-items:flex-start!important
    }
    details.archive-group > a img,
    details.archive-group > a > span[aria-hidden="true"]{width:78px!important;height:78px!important;font-size:28px!important}
    details.archive-group > a > span:last-child{min-width:0}
  }
@media (max-width:640px){body::before{opacity:.08;mix-blend-mode:normal}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}