/* JOLISZT LLC — score desk stylesheet
   Palette: FOLIO #F6F3EB, INKWELL-BROWN #32281E, SCORE-BLUE #2C3A55,
   VELLUM-CREAM #FCFAF3, WAX-SEAL #8A4A3A, RULER-GREY #6B7280, GILT-EDGE #B8925A */

:root {
  --folio: #F6F3EB;
  --inkwell: #32281E;
  --scoreblue: #2C3A55;
  --vellum: #FCFAF3;
  --waxseal: #8A4A3A;
  --rulergrey: #6B7280;
  --giltedge: #B8925A;
  --inkmuted: #4A3E30;
  --deskdeep: #32281E;
  --ledgerline: #C9C0AE;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  background-color: #F6F3EB;
  color: #32281E;
  font-family: Georgia, "Times New Roman", Cambria, serif;
  line-height: 1.68;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", Cambria, serif;
  color: #32281E;
  line-height: 1.22;
}

p {
  color: #32281E;
}

a {
  color: #2C3A55;
  text-decoration: none;
}

/* ---------- DESK LEDGE HEADER ---------- */
.deskledge {
  background-color: #32281E;
  padding: 0 0 0 0;
  border-bottom: 4px solid #2C3A55;
}

.deskledge-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
}

.brandplate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #2C3A55;
  color: #B8925A;
  padding: 12px 22px;
  border: 2px solid #B8925A;
  font-size: 1.32rem;
  letter-spacing: 0.14em;
  font-weight: bold;
  margin-bottom: -4px;
}

.clefglyph {
  color: #B8925A;
  font-size: 1.5rem;
  line-height: 1;
}

.ledgetabs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-left: auto;
}

.ledgetab {
  display: inline-block;
  background-color: #2C3A55;
  color: #FCFAF3;
  padding: 10px 16px 8px 16px;
  border-top: 3px solid #B8925A;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  font-family: Georgia, serif;
}

.ledgetab:hover {
  background-color: #B8925A;
  color: #32281E;
}

.ledgetab-alt1 { margin-bottom: 6px; }
.ledgetab-alt2 { margin-bottom: 0; }
.ledgetab-alt3 { margin-bottom: 3px; }
.ledgetab-alt4 { margin-bottom: 8px; }
.ledgetab-alt5 { margin-bottom: 2px; }

.navtoggle {
  display: none;
  background-color: #2C3A55;
  color: #FCFAF3;
  border: 1px solid #B8925A;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-family: Georgia, serif;
  cursor: pointer;
  margin-bottom: 8px;
}

/* ---------- HERO: MANUSCRIPT SLOPE BAY ---------- */
.manuslope {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 24px 0 24px;
}

.manus-head {
  max-width: 900px;
}

.manus-head h1 {
  font-size: 3rem;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}

.manus-head h1 .beat-line {
  display: block;
}

.manus-head h1 .beat-line.blue {
  color: #2C3A55;
}

.manus-head h1 .displayword {
  display: block;
  font-size: 5.4rem;
  color: #2C3A55;
  letter-spacing: 0.02em;
  line-height: 1.0;
  border-bottom: 3px solid #B8925A;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.manus-lead {
  font-size: 1.1rem;
  max-width: 760px;
  margin-top: 22px;
  color: #32281E;
}

.manus-lead a.inline-link {
  color: #2C3A55;
  font-weight: bold;
  border-bottom: 2px solid #B8925A;
}

/* the full-width desk band */
.deskband {
  margin-top: 40px;
  background-color: #FCFAF3;
  border: 2px solid #32281E;
  border-bottom: none;
}

.deskband-scene {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 0;
}

.scene-cell {
  padding: 30px 26px 34px 26px;
  border-right: 1px solid #C9C0AE;
  position: relative;
  min-height: 300px;
}

.scene-cell:last-child {
  border-right: none;
}

.scene-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 16px;
  font-family: Georgia, serif;
}

/* slanted writing slope with manuscript */
.slope {
  position: relative;
  width: 100%;
  height: 220px;
}

.slope-board {
  position: absolute;
  left: 6px;
  right: 40px;
  top: 26px;
  bottom: 34px;
  background-color: #F6F3EB;
  border: 2px solid #32281E;
  transform: rotate(-3.4deg);
  box-shadow: 6px 6px 0 #C9C0AE;
}

.slope-manuscript {
  position: absolute;
  left: 20px;
  right: 60px;
  top: 42px;
  bottom: 50px;
  transform: rotate(-3.4deg);
  background-color: #FCFAF3;
  border-left: 3px solid #8A4A3A;
  padding: 8px 8px;
}

.ruledline {
  height: 1px;
  background-color: #C9C0AE;
  margin: 7px 0;
}

.ruledline.heavy {
  height: 2px;
  background-color: #32281E;
}

.ledger-sliver {
  position: absolute;
  left: 0;
  bottom: 16px;
  height: 3px;
  width: 62%;
  background-color: #B8925A;
}

.clefnote {
  color: #2C3A55;
  font-size: 1.4rem;
  position: absolute;
  left: 24px;
  top: 6px;
}

.note-row {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 6px 0;
}

.note-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #32281E;
  display: inline-block;
}

.note-dot.open {
  background-color: #FCFAF3;
  border: 2px solid #32281E;
}

.note-stem {
  width: 2px;
  height: 18px;
  background-color: #32281E;
  display: inline-block;
  margin-left: -4px;
}

/* score shelf of bound volumes */
.scoreshelf-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boundvol {
  display: flex;
  align-items: center;
  gap: 0;
  background-color: #32281E;
  color: #FCFAF3;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 0;
  height: 26px;
}

.boundvol .vlabel {
  padding: 0 12px;
  flex: 1;
}

.boundvol .vgilt {
  width: 7px;
  height: 100%;
  background-color: #B8925A;
}

.boundvol.v2 { width: 88%; }
.boundvol.v3 { width: 78%; }
.boundvol.v4 { width: 94%; }
.boundvol.v5 { width: 70%; }

.musicstand {
  margin-top: 18px;
  position: relative;
  height: 96px;
}

.stand-page {
  background-color: #FCFAF3;
  border: 2px solid #32281E;
  height: 62px;
  padding: 6px 8px;
  position: relative;
}

.stand-stem {
  width: 4px;
  height: 30px;
  background-color: #32281E;
  margin: 0 auto;
}

.stand-base {
  width: 60px;
  height: 4px;
  background-color: #32281E;
  margin: 0 auto;
}

/* pen tray, pedal lyre, hairpins, lamp */
.pentry {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.quillnib {
  width: 5px;
  height: 46px;
  background-color: #32281E;
  position: relative;
}

.quillnib::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -3px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 12px solid #8A4A3A;
}

.nibbar {
  width: 100%;
  height: 8px;
  background-color: #32281E;
}

.hairpin {
  height: 22px;
  margin: 10px 0;
  position: relative;
}

.hairpin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 90px;
  height: 2px;
  background-color: #32281E;
  transform: rotate(9deg);
  transform-origin: left center;
}

.hairpin::after {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 90px;
  height: 2px;
  background-color: #32281E;
  transform: rotate(-9deg);
  transform-origin: left center;
}

.pedal-lyre {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 8px;
}

.lyre-frame {
  width: 34px;
  height: 70px;
  border: 3px solid #32281E;
  border-top: none;
  position: relative;
}

.lyre-frame::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -3px;
  right: -3px;
  height: 3px;
  background-color: #32281E;
}

.pedal {
  width: 16px;
  height: 6px;
  background-color: #32281E;
  margin-bottom: 4px;
}

.practice-lamp {
  position: relative;
  width: 60px;
  height: 62px;
}

.lamp-shade {
  width: 46px;
  height: 22px;
  background-color: #2C3A55;
  border: 2px solid #B8925A;
  margin: 0 auto;
  border-radius: 22px 22px 0 0;
}

.lamp-stem {
  width: 3px;
  height: 22px;
  background-color: #32281E;
  margin: 0 auto;
}

.lamp-foot {
  width: 34px;
  height: 6px;
  background-color: #32281E;
  margin: 0 auto;
}

.lamp-glow {
  width: 12px;
  height: 6px;
  background-color: #B8925A;
  margin: 0 auto 2px auto;
}

/* primary CTA bar */
.ctabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2C3A55;
  color: #FCFAF3;
  padding: 20px 26px;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  border: 2px solid #32281E;
}

.ctabar a {
  color: #FCFAF3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ctabar .cta-arrow {
  color: #B8925A;
  font-size: 1.4rem;
}

.ctabar:hover {
  background-color: #32281E;
}

/* ---------- SCORE SHELF LADDER ---------- */
.scoreshelf {
  max-width: 1180px;
  margin: 0 auto;
  padding: 60px 24px;
}

.shelf-title {
  font-size: 2rem;
  margin-bottom: 8px;
}

.shelf-sub {
  color: #4A3E30;
  margin-bottom: 40px;
  max-width: 760px;
}

.shelf-entry {
  background-color: #FCFAF3;
  border: 1px solid #C9C0AE;
  border-left: 5px solid #32281E;
  padding: 26px 28px;
  margin-bottom: 22px;
  position: relative;
}

.shelf-entry.off1 { width: 88%; margin-left: 0; }
.shelf-entry.off2 { width: 94%; margin-left: 5%; }
.shelf-entry.off3 { width: 84%; margin-left: 2%; }
.shelf-entry.off4 { width: 92%; margin-left: 7%; }
.shelf-entry.off5 { width: 80%; margin-left: 1%; }
.shelf-entry.off6 { width: 90%; margin-left: 4%; }

.shelf-entry.gilt-border {
  border-right: 6px solid #B8925A;
}

.shelf-entry .volnum {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  color: #6B7280;
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
}

.shelf-entry h3 {
  font-size: 1.42rem;
  color: #32281E;
  margin-bottom: 10px;
}

.shelf-entry h3 a {
  color: #32281E;
  border-bottom: 2px solid #B8925A;
}

.shelf-entry p {
  color: #32281E;
  font-size: 1rem;
}

.waxdot {
  position: absolute;
  top: 24px;
  right: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #8A4A3A;
  border: 2px solid #B8925A;
}

/* ---------- LEDGER BAND ---------- */
.ledgerband {
  background-color: #32281E;
  color: #FCFAF3;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  max-width: 1180px;
  margin: 0 auto 0 auto;
}

.ledgerdashes {
  flex: 0 0 180px;
  height: 4px;
  position: relative;
  background-color: #B8925A;
}

.ledgerdashes::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 4px;
  background-color: #B8925A;
}

.ledgerdashes::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24%;
  height: 4px;
  background-color: #32281E;
}

.ledgerband p {
  color: #FCFAF3;
  font-size: 1.05rem;
  margin: 0;
}

/* ---------- STAND SHELF FOOTER ---------- */
.standshelf {
  background-color: #32281E;
  color: #FCFAF3;
  margin-top: 0;
}

.standshelf-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 24px 40px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.footplate {
  background-color: #2C3A55;
  border: 2px solid #B8925A;
  padding: 18px 22px;
  display: inline-block;
  margin-bottom: 18px;
}

.footplate .brand {
  color: #B8925A;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  font-weight: bold;
}

.standshelf p {
  color: #FCFAF3;
  font-size: 0.96rem;
}

.footcol-head {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B8925A;
  margin-bottom: 14px;
}

.footlinks {
  list-style: none;
}

.footlinks li {
  margin-bottom: 9px;
}

.footlinks a {
  color: #FCFAF3;
  font-size: 0.98rem;
  border-bottom: 1px solid #32281E;
}

.footlinks a:hover {
  border-bottom: 1px solid #B8925A;
  color: #B8925A;
}

.footstrip {
  background-color: #FCFAF3;
  border-top: 4px solid #2C3A55;
}

.footstrip-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  align-items: center;
  justify-content: space-between;
}

.footstrip p {
  color: #32281E;
  font-size: 0.9rem;
  margin: 0;
}

.scoreblue-link {
  color: #2C3A55;
  font-weight: bold;
  border-bottom: 2px solid #B8925A;
}

/* ---------- GENERIC SECTION HELPERS ---------- */
.section-narrow {
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 24px;
}

.section-heading {
  font-size: 1.9rem;
  margin-bottom: 18px;
}

.prose-block {
  max-width: 840px;
}

.prose-block p {
  margin-bottom: 16px;
}

/* process overview */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid #32281E;
  background-color: #FCFAF3;
  margin-top: 30px;
}

.process-step {
  padding: 26px 22px;
  border-right: 1px solid #C9C0AE;
}

.process-step:last-child {
  border-right: none;
}

.process-step .stepnum {
  color: #2C3A55;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
}

.process-step h4 {
  font-size: 1.06rem;
  margin-bottom: 8px;
}

.process-step p {
  font-size: 0.92rem;
  color: #32281E;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}

.info-card {
  background-color: #FCFAF3;
  border: 1px solid #C9C0AE;
  border-top: 4px solid #2C3A55;
  padding: 24px 22px;
}

.info-card h3 {
  font-size: 1.14rem;
  margin-bottom: 10px;
}

.info-card p {
  font-size: 0.94rem;
}

/* contact form */
.cform {
  max-width: 720px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  background-color: #FCFAF3;
  border: 2px solid #32281E;
  color: #32281E;
  font-family: Georgia, serif;
  font-size: 1rem;
  padding: 11px 13px;
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.submitbtn {
  background-color: #2C3A55;
  color: #FCFAF3;
  border: 2px solid #32281E;
  padding: 14px 34px;
  font-family: Georgia, serif;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.submitbtn:hover {
  background-color: #32281E;
}

.formnote {
  font-size: 0.88rem;
  color: #6B7280;
  margin-top: 12px;
}

/* faq accordion */
.faqitem {
  border: 1px solid #C9C0AE;
  background-color: #FCFAF3;
  margin-bottom: 14px;
}

.faqq {
  width: 100%;
  text-align: left;
  background-color: #FCFAF3;
  border: none;
  border-left: 5px solid #2C3A55;
  color: #32281E;
  font-family: Georgia, serif;
  font-size: 1.04rem;
  padding: 16px 20px;
  cursor: pointer;
}

.faqq:hover {
  color: #2C3A55;
}

.faqa {
  display: none;
  padding: 0 20px 18px 25px;
}

.faqa.open {
  display: block;
}

.faqa p {
  font-size: 0.96rem;
}

/* contact detail list */
.detaillist {
  list-style: none;
  margin-top: 20px;
}

.detaillist li {
  padding: 14px 0;
  border-bottom: 1px solid #C9C0AE;
  color: #32281E;
}

.detaillist .dlabel {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6B7280;
  margin-bottom: 4px;
}

.detaillist a {
  color: #2C3A55;
  font-weight: bold;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: start;
}

/* scroll reveal — uses visibility and transform only, no opacity */
.reveal {
  visibility: hidden;
  transform: translateY(20px);
  transition: transform 620ms ease, visibility 0ms linear 620ms;
}

.reveal.is-visible {
  visibility: visible;
  transform: translateY(0);
  transition: transform 620ms ease, visibility 0ms linear 0ms;
}

.reveal-noscript .reveal {
  visibility: visible;
  transform: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .deskledge-inner {
    align-items: center;
  }
  .ledgetabs {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    gap: 6px;
  }
  .ledgetabs.open {
    display: flex;
  }
  .ledgetab {
    width: 100%;
    margin-bottom: 0;
  }
  .navtoggle {
    display: inline-block;
    margin-left: auto;
  }
  .deskband-scene {
    grid-template-columns: 1fr;
  }
  .scene-cell {
    border-right: none;
    border-bottom: 1px solid #C9C0AE;
  }
  .scene-cell:last-child {
    border-bottom: none;
  }
  .manus-head h1 .displayword {
    font-size: 3.4rem;
  }
  .manus-head h1 {
    font-size: 2.2rem;
  }
  .shelf-entry {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .process {
    grid-template-columns: 1fr 1fr;
  }
  .process-step {
    border-bottom: 1px solid #C9C0AE;
  }
  .info-cards {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .standshelf-inner {
    grid-template-columns: 1fr;
  }
  .ledgerband {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .manus-head h1 .displayword {
    font-size: 2.6rem;
  }
  .process {
    grid-template-columns: 1fr;
  }
  .process-step {
    border-right: none;
    border-bottom: 1px solid #C9C0AE;
  }
}