/* ============================================================
   ZAY.FVDEZ, INC. — Reading Desk Annotation Room
   Palette:
     DESK-NIGHT      #221D16  (warm walnut-desk brown-black)
     LAMP-CREAM      #F2EAD9  (warm lamplight ivory)
     GILT-LEAF       #C49A3F  (gilt edging gold, accent)
     SPINE-GREY-VIOLET #57506B (spine blocks / secondary panels)
     NOTE-GREEN      #4E6B50  (deep sage, margin annotations)
     FLYLEAF-TAN     #E4D6BC  (paper chips, sparing)
     RUST-NIB        #96502E  (thin rules and nib strokes ONLY)
     LAMPGLOW-AMBER  #E8C87E  (RESERVED: lamp glow + underline only)
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  background-color: #221D16;
  color: #F2EAD9;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

a {
  color: #C49A3F;
  text-decoration: none;
}

a:hover {
  color: #E8C87E;
}

img {
  max-width: 100%;
}

/* ---------- CHAPTER-MARK NAV (.deskbar) ---------- */
.deskbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: #221D16;
  border-bottom: 1px solid #96502E;
}

.deskbar-headband {
  height: 7px;
  background-color: #57506B;
  position: relative;
  overflow: hidden;
}

.deskbar-headband-chip {
  position: absolute;
  top: 0;
  height: 7px;
  width: 15px;
  background-color: #E4D6BC;
}

.deskbar-headband-chip.chip-one { left: 8%; }
.deskbar-headband-chip.chip-two { left: 27%; width: 10px; }
.deskbar-headband-chip.chip-three { left: 46%; width: 20px; }
.deskbar-headband-chip.chip-four { left: 63%; width: 8px; }
.deskbar-headband-chip.chip-five { left: 81%; width: 13px; }
.deskbar-headband-chip.chip-six { left: 94%; width: 6px; }

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

.deskbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.deskbar-knot {
  width: 20px;
  height: 20px;
  background-color: #57506B;
  border-left: 4px solid #C49A3F;
  border-top: 4px solid #C49A3F;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.deskbar-wordmark {
  font-size: 1.15rem;
  font-weight: 700;
  color: #F2EAD9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deskbar-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.deskbar-links li {
  display: block;
}

.spinelabel {
  display: inline-block;
  background-color: #4E6B50;
  color: #F2EAD9;
  padding: 7px 15px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  border-bottom: 3px solid #C49A3F;
  font-family: Georgia, serif;
}

.spinelabel:hover {
  background-color: #57506B;
  color: #F2EAD9;
}

.spinelabel-w-slim { padding: 7px 9px; }
.spinelabel-w-home { padding: 7px 13px; }
.spinelabel-w-serv { padding: 7px 21px; }
.spinelabel-w-cont { padding: 7px 17px; }
.spinelabel-w-priv { padding: 7px 12px; }
.spinelabel-w-term { padding: 7px 24px; }
.spinelabel-active {
  background-color: #57506B;
  color: #F2EAD9;
}

.deskbar-toggle {
  display: none;
  background-color: #57506B;
  color: #F2EAD9;
  border: 1px solid #C49A3F;
  padding: 7px 13px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: Georgia, serif;
}

.deskbar-toggle:hover {
  background-color: #C49A3F;
  color: #221D16;
}

/* ---------- LAMP CONE HERO (.lampcone) ---------- */
.lampcone {
  max-width: 1180px;
  margin: 0 auto;
  padding: 62px 24px 40px;
}

.lampcone-headline {
  font-size: 2.5rem;
  color: #F2EAD9;
  margin-bottom: 6px;
  max-width: 780px;
}

.lampcone-headline .beat-close {
  color: #C49A3F;
}

.lampcone-display {
  display: block;
  font-size: 4.2rem;
  color: #C49A3F;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 8px;
  line-height: 1;
}

.lampcone-lede {
  max-width: 720px;
  font-size: 1.06rem;
  color: #F2EAD9;
  margin-bottom: 10px;
}

.lampcone-inline-link {
  display: inline-block;
  color: #E8C87E;
  border-bottom: 2px solid #E8C87E;
  padding-bottom: 1px;
  font-size: 0.98rem;
  margin-top: 6px;
}

.lampcone-inline-link:hover {
  color: #F2EAD9;
  border-bottom-color: #F2EAD9;
}

.lampcone-desk {
  margin-top: 34px;
  position: relative;
  background-color: #57506B;
  border: 1px solid #C49A3F;
  padding: 30px;
  overflow: hidden;
}

.desk-surface {
  position: relative;
  background-color: #221D16;
  border: 1px solid #96502E;
  min-height: 380px;
  padding: 30px 26px;
  overflow: hidden;
}

.lamp-cone {
  position: absolute;
  top: -20px;
  left: 46%;
  width: 0;
  height: 0;
  border-left: 190px solid #40392E;
  border-right: 190px solid #40392E;
  border-bottom: 340px solid #40392E;
  transform: none;
  pointer-events: none;
}

.lamp-shade {
  position: absolute;
  top: 0;
  left: 46%;
  width: 130px;
  height: 26px;
  margin-left: -65px;
  background-color: #57506B;
  border: 1px solid #C49A3F;
  border-radius: 0 0 60px 60px;
}

.lamp-arm {
  position: absolute;
  top: -14px;
  left: 46%;
  width: 4px;
  height: 18px;
  margin-left: -2px;
  background-color: #96502E;
}

.codex {
  position: relative;
  width: 62%;
  max-width: 520px;
  margin: 40px auto 20px;
  background-color: #E4D6BC;
  border: 1px solid #C49A3F;
  padding: 26px 30px 30px;
  box-shadow: 0 10px 0 #96502E;
}

.codex-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: #96502E;
}

.codex-cord {
  position: absolute;
  left: -1px;
  right: -1px;
  height: 2px;
  background-color: #C49A3F;
}

.codex-cord.cord-a { top: 22%; }
.codex-cord.cord-b { top: 52%; }
.codex-cord.cord-c { top: 82%; }

.codex-line {
  height: 8px;
  background-color: #57506B;
  margin: 14px 0;
  border-radius: 1px;
}

.codex-line.short { width: 62%; }
.codex-line.mid { width: 84%; }

.codex-underline {
  height: 3px;
  background-color: #E8C87E;
  margin: 4px 0 16px;
  width: 40%;
}

.codex-underline.u-a { width: 32%; margin-left: 8%; }
.codex-underline.u-b { width: 48%; margin-left: 22%; }
.codex-underline.u-c { width: 26%; margin-left: 55%; }

.margin-tick {
  position: absolute;
  width: 12px;
  height: 4px;
  background-color: #4E6B50;
}

.margin-tick.tick-a { top: 26%; left: 6%; }
.margin-tick.tick-b { top: 44%; right: 7%; width: 8px; }
.margin-tick.tick-c { top: 62%; left: 3%; width: 16px; }
.margin-tick.tick-d { top: 74%; right: 4%; }

.cardbox {
  position: absolute;
  left: 14px;
  bottom: 18px;
  width: 130px;
  height: 74px;
  background-color: #4E6B50;
  border: 1px solid #C49A3F;
}

.cardbox-card {
  position: absolute;
  width: 104px;
  height: 14px;
  background-color: #E4D6BC;
  border: 1px solid #96502E;
  left: 12px;
}

.cardbox-card.card-a { top: -10px; transform: rotate(-4deg); }
.cardbox-card.card-b { top: 4px; transform: rotate(2deg); }
.cardbox-card.card-c { top: 18px; transform: rotate(-1deg); }

.magnifier {
  position: absolute;
  right: 22px;
  bottom: 26px;
  width: 58px;
  height: 58px;
  border: 4px solid #C49A3F;
  border-radius: 50%;
  background-color: transparent;
}

.magnifier-handle {
  position: absolute;
  right: -18px;
  bottom: -4px;
  width: 30px;
  height: 5px;
  background-color: #96502E;
  transform: rotate(42deg);
  transform-origin: left center;
}

.magnifier-cordon {
  position: absolute;
  right: 60px;
  bottom: 14px;
  width: 46px;
  height: 3px;
  background-color: #E8C87E;
  transform: rotate(-24deg);
}

.lampcone-cta {
  display: block;
  margin-top: 26px;
  background-color: #C49A3F;
  color: #221D16;
  padding: 16px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  width: 100%;
  text-align: left;
}

.lampcone-cta:hover {
  background-color: #E8C87E;
  color: #221D16;
}

.lampcone-cta .cta-arrow {
  float: right;
  font-weight: 700;
}

/* ---------- SECTION WRAPPER ---------- */
.pagewrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-block {
  padding: 50px 0;
  border-top: 1px solid #96502E;
}

.section-heading {
  font-size: 1.9rem;
  color: #F2EAD9;
  margin-bottom: 10px;
  border-left: 8px solid #57506B;
  padding-left: 16px;
}

.section-sub {
  color: #E4D6BC;
  font-size: 0.98rem;
  max-width: 800px;
  margin-bottom: 24px;
}

.prose p {
  margin-bottom: 16px;
  max-width: 860px;
}

.prose-wide p {
  max-width: 100%;
}

.ink-link {
  color: #C49A3F;
  border-bottom: 1px solid #C49A3F;
}

.ink-link:hover {
  color: #E8C87E;
  border-bottom-color: #E8C87E;
}

/* ---------- MARGIN NOTE ROWS (.marginwall) ---------- */
.marginwall {
  padding: 50px 0;
  border-top: 1px solid #96502E;
}

.marginwall-intro {
  margin-bottom: 32px;
}

.margin-note {
  position: relative;
  border-top: 2px solid #96502E;
  padding: 22px 0 26px 0;
  max-width: 900px;
}

.margin-note.note-a { margin-left: 0; }
.margin-note.note-b { margin-left: 60px; max-width: 820px; }
.margin-note.note-c { margin-left: 18px; }
.margin-note.note-d { margin-left: 96px; max-width: 780px; }
.margin-note.note-e { margin-left: 36px; }
.margin-note.note-f { margin-left: 72px; max-width: 840px; }

.margin-note-tick {
  display: inline-block;
  width: 30px;
  height: 6px;
  background-color: #4E6B50;
  margin-right: 12px;
  vertical-align: middle;
}

.margin-note-letter {
  display: inline-block;
  color: #E4D6BC;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  vertical-align: middle;
  margin-right: 8px;
}

.margin-note h3 {
  display: inline;
  font-size: 1.25rem;
  color: #F2EAD9;
  vertical-align: middle;
}

.margin-note p {
  margin-top: 12px;
  color: #F2EAD9;
  max-width: 780px;
}

.margin-note-underlines {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.underline-stroke {
  height: 3px;
  background-color: #E8C87E;
}

.underline-stroke.us-short { width: 90px; }
.underline-stroke.us-mid { width: 170px; }
.underline-stroke.us-long { width: 260px; }
.underline-stroke.us-xlong { width: 340px; }

.nib-stroke {
  display: inline-block;
  width: 46px;
  height: 2px;
  background-color: #96502E;
  margin-top: 14px;
}

.blotter-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid #C49A3F;
}

.blotter-corner.bc-tr {
  top: 18px;
  right: 10px;
  border-left: none;
  border-bottom: none;
}

.blotter-corner.bc-bl {
  bottom: 14px;
  left: -10px;
  border-right: none;
  border-top: none;
}

/* ---------- ACCENT STRIP (.quietshelf) ---------- */
.quietshelf {
  background-color: #57506B;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-top: 1px solid #C49A3F;
  border-bottom: 1px solid #C49A3F;
}

.quietshelf-rail {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
  align-items: center;
}

.bookworm-hole {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #E8C87E;
}

.bookworm-hole.hole-b { width: 6px; height: 6px; }
.bookworm-hole.hole-c { width: 10px; height: 10px; }
.bookworm-hole.hole-d { width: 7px; height: 7px; }

.quietshelf-text {
  color: #F2EAD9;
  font-size: 1.02rem;
}

/* ---------- GENERIC INFO GRID (uneven) ---------- */
.field-notes {
  padding: 50px 0;
  border-top: 1px solid #96502E;
}

.field-note {
  border-left: 5px solid #4E6B50;
  padding: 14px 0 14px 18px;
  margin-bottom: 18px;
  max-width: 820px;
}

.field-note h4 {
  color: #C49A3F;
  font-size: 1.08rem;
  margin-bottom: 6px;
}

.field-note p {
  color: #F2EAD9;
}

.field-note.fn-indent { margin-left: 48px; }
.field-note.fn-indent-two { margin-left: 96px; }

/* ---------- CALLOUT ---------- */
.marginalia {
  background-color: #4E6B50;
  border: 1px solid #C49A3F;
  padding: 26px 28px;
  margin: 30px 0;
}

.marginalia h3 {
  color: #F2EAD9;
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.marginalia p {
  color: #F2EAD9;
}

/* ---------- CTA BAR ---------- */
.ctabar {
  display: block;
  background-color: #C49A3F;
  color: #221D16;
  padding: 16px 22px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: none;
  margin-top: 8px;
}

.ctabar:hover {
  background-color: #E8C87E;
  color: #221D16;
}

.ctabar .cta-arrow {
  float: right;
}

/* ---------- SERVICE DETAIL ---------- */
.service-entry {
  border-top: 2px solid #96502E;
  padding: 26px 0;
}

.service-entry h3 {
  font-size: 1.35rem;
  color: #F2EAD9;
  margin-bottom: 10px;
}

.service-entry .service-tag {
  display: inline-block;
  background-color: #4E6B50;
  color: #F2EAD9;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.service-entry p {
  margin-bottom: 14px;
  max-width: 880px;
}

/* ---------- CONTACT ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  padding: 46px 0;
  border-top: 1px solid #96502E;
}

.contact-form label {
  display: block;
  color: #E4D6BC;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  margin-top: 16px;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background-color: #221D16;
  border: 1px solid #57506B;
  color: #F2EAD9;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: Georgia, serif;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #C49A3F;
}

.contact-form .contact-message {
  min-height: 150px;
  resize: vertical;
}

.contact-submit {
  margin-top: 22px;
  background-color: #C49A3F;
  color: #221D16;
  border: none;
  padding: 14px 26px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: Georgia, serif;
}

.contact-submit:hover {
  background-color: #E8C87E;
}

.contact-aside {
  border-left: 5px solid #4E6B50;
  padding-left: 20px;
}

.contact-aside h3 {
  color: #C49A3F;
  font-size: 1.15rem;
  margin-bottom: 8px;
  margin-top: 18px;
}

.contact-aside h3:first-child {
  margin-top: 0;
}

.contact-aside p {
  color: #F2EAD9;
  margin-bottom: 6px;
}

.contact-aside a {
  color: #E8C87E;
}

.faq-entry {
  border-top: 2px solid #96502E;
  padding: 20px 0;
  max-width: 880px;
}

.faq-entry h4 {
  color: #F2EAD9;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.faq-entry p {
  color: #F2EAD9;
}

.form-status {
  margin-top: 16px;
  color: #E8C87E;
  font-size: 0.95rem;
  min-height: 22px;
}

/* ---------- CARD BOX FOOTER (.cardfoot) ---------- */
.cardfoot {
  background-color: #221D16;
  border-top: 2px solid #57506B;
  margin-top: 40px;
}

.cardfoot-rail {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 0;
  display: flex;
  align-items: flex-end;
  gap: 26px;
  position: relative;
}

.foot-peg-rail {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid #96502E;
}

.foot-magnifier {
  width: 40px;
  height: 40px;
  border: 3px solid #C49A3F;
  border-radius: 50%;
}

.foot-blotter {
  width: 46px;
  height: 30px;
  background-color: #4E6B50;
  border: 1px solid #C49A3F;
}

.foot-pencilcup {
  width: 26px;
  height: 34px;
  background-color: #57506B;
  border: 1px solid #C49A3F;
  position: relative;
}

.foot-pencilcup::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 4px;
  width: 3px;
  height: 14px;
  background-color: #E8C87E;
  box-shadow: 6px 0 0 #96502E, 12px 0 0 #E8C87E;
}

.cardfoot-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
}

.cardfoot-brand .foot-wordmark {
  font-size: 1.3rem;
  color: #F2EAD9;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cardfoot-brand p {
  color: #E4D6BC;
  max-width: 420px;
  font-size: 0.96rem;
}

.cardfoot-col h4 {
  color: #C49A3F;
  font-size: 0.98rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cardfoot-col ul {
  list-style: none;
}

.cardfoot-col li {
  margin-bottom: 9px;
}

.cardfoot-col a {
  color: #F2EAD9;
  border-bottom: 1px solid #57506B;
}

.cardfoot-col a:hover {
  color: #E8C87E;
  border-bottom-color: #E8C87E;
}

.cardfoot-flyleaf {
  background-color: #E4D6BC;
  color: #221D16;
}

.cardfoot-flyleaf-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  font-size: 0.88rem;
}

.cardfoot-flyleaf a {
  color: #221D16;
  border-bottom: 1px solid #96502E;
}

.cardfoot-flyleaf a:hover {
  color: #96502E;
}

.bookworm-glyph {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #96502E;
  margin-right: 7px;
  vertical-align: middle;
}

/* ---------- SCROLL REVEAL (integer opacity only, no semi-transparency) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

html.no-js .reveal,
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .cardfoot-body {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .lampcone-display {
    font-size: 3rem;
  }
}

@media (max-width: 720px) {
  .deskbar-inner {
    align-items: flex-start;
  }
  .deskbar-toggle {
    display: inline-block;
    margin-left: auto;
  }
  .deskbar-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
  }
  .deskbar-links.open {
    display: flex;
  }
  .spinelabel,
  .spinelabel-w-slim,
  .spinelabel-w-home,
  .spinelabel-w-serv,
  .spinelabel-w-cont,
  .spinelabel-w-priv,
  .spinelabel-w-term {
    display: block;
    width: 100%;
    padding: 11px 15px;
  }
  .lampcone-headline {
    font-size: 1.85rem;
  }
  .lampcone-display {
    font-size: 2.2rem;
  }
  .margin-note.note-a,
  .margin-note.note-b,
  .margin-note.note-c,
  .margin-note.note-d,
  .margin-note.note-e,
  .margin-note.note-f {
    margin-left: 0;
  }
  .field-note.fn-indent,
  .field-note.fn-indent-two {
    margin-left: 0;
  }
  .desk-surface {
    padding: 24px 16px;
  }
  .codex {
    width: 84%;
  }
  .lamp-cone {
    border-left-width: 110px;
    border-right-width: 110px;
    border-bottom-width: 300px;
  }
  .quietshelf {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}