/* Deligiannis Tailoring — Standard tier custom demo */
/* Thesis: A measurement sheet from a 45-year tailor,
   set like a fashion magazine folio — pages numbered I, II, III,
   ruled with bronze hairlines, with one confident italic display serif per spread. */

:root {
  --midnight:   #0e1124;       /* dominant background — cutting-table felt */
  --midnight-2: #161a30;       /* secondary dark surface */
  --ink:        #1a1a1f;       /* ink on bone */
  --bone:       #ece4d1;       /* magazine-paper bone, cool-warm balance */
  --bone-soft:  #e3dac3;       /* secondary paper surface */
  --bone-deep:  #d6cbab;       /* shadowed paper */
  --thread:     #a3242b;       /* tailor's chalk-pencil red */
  --bronze:     #9d8453;       /* hairline rules + measurement marks */
  --bronze-soft:#bda07e;       /* hover */
  --muted-bone: #8e8466;
  --muted-ink:  #4a4b5a;
  --line:       #3a3f5a;       /* dark-mode hairline */
  --line-bone:  #c3b48d;       /* bone-side hairline */
}

html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background: var(--midnight);
  color: var(--bone);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  /* Slight weight bump for legibility on dark backgrounds — DM Sans 400 reads
     thin against #0e1124 alongside Vollkorn display headlines. */
  font-weight: 450;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
/* Inside bone-paper inserts, the polarity flips — ink on bone reads cleaner
   at standard regular weight, so reset back. */
.bone-paper, .bone-paper p, .bone-paper li, .bone-paper dd, .bone-paper dt {
  font-weight: 400;
}

::selection { background: var(--bronze); color: var(--midnight); }

.font-display { font-family: 'Vollkorn', 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.font-serif   { font-family: 'Vollkorn', 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.font-body    { font-family: 'DM Sans', system-ui, sans-serif; }

/* Folio label — italic small-caps tracking, hairline-thin.
   Default uses bronze-soft for legibility on midnight backgrounds;
   bone-paper sections override to thread-red inline. */
.folio {
  font-family: 'Vollkorn', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variant: all-small-caps;
  letter-spacing: 0.28em;
  font-size: 0.82rem;
  color: var(--bronze-soft);
}

/* Measurement label — like a hand-written measurement-sheet entry */
.measure-label {
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-variant: all-small-caps;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--muted-bone);
}

/* Bronze hairline rules — thin gold thread between sections */
.rule-bronze {
  border: 0;
  border-top: 1px solid var(--bronze);
  height: 0;
}
.rule-bronze-thin {
  border: 0;
  border-top: 0.5px solid var(--bronze);
  opacity: 0.6;
  height: 0;
}
.rule-bone {
  border: 0;
  border-top: 1px solid var(--line-bone);
  height: 0;
}

/* Bone paper inset — a magazine page laid on the dark cutting table */
.bone-paper {
  background: var(--bone);
  color: var(--ink);
}
.bone-paper-soft {
  background: var(--bone-soft);
  color: var(--ink);
}
/* Recolor anchors inside bone-paper to ink — but NOT buttons,
   which have their own explicit color (.btn-on-bone, .btn-secondary, etc). */
.bone-paper a:not([class*="btn-"]) { color: var(--ink); }
.bone-paper .folio { color: var(--thread); }

/* Pinned-corner detail — like a magazine page pinned to a board */
.pinned {
  position: relative;
}
.pinned::before, .pinned::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--midnight);
  border: 1px solid var(--bronze);
  top: 14px;
}
.pinned::before { left: 14px; }
.pinned::after  { right: 14px; }

/* Tape-measure ornament rule — tick marks below labels */
.tape {
  height: 14px;
  display: block;
  background-image:
    linear-gradient(to right, var(--bronze) 0, var(--bronze) 1px, transparent 1px),
    linear-gradient(to right, var(--bronze) 0, var(--bronze) 1px, transparent 1px);
  background-size: 16px 14px, 4px 6px;
  background-position: 0 0, 0 8px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

/* Buttons — editorial, no rounded chrome. Weight 600 italic Vollkorn —
   even stroke color reads cleanly at button size on dark and light backgrounds. */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Vollkorn', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  background: var(--bone); color: var(--ink);
  padding: 14px 26px;
  border: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary:hover { background: var(--thread); color: var(--bone); }
.btn-primary::after { content: '→'; font-style: normal; font-weight: 500; color: inherit; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Vollkorn', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  background: transparent; color: var(--bone);
  padding: 14px 24px;
  border: 1px solid var(--bronze);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover { border-color: var(--bone); color: var(--bone); background: rgba(157, 132, 83, 0.12); }

/* Dark variant for use on bone-paper sections — higher specificity so it
   wins over the .bone-paper a:not([class*="btn-"]) rule. */
.btn-on-bone,
.bone-paper .btn-on-bone {
  background: var(--ink); color: var(--bone);
}
.btn-on-bone:hover,
.bone-paper .btn-on-bone:hover { background: var(--thread); color: var(--bone); }

/* Editorial measure index — folio numerals in display italic Vollkorn. */
.numeral {
  font-family: 'Vollkorn', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--bronze-soft);
}

/* Spread divider — two thin bronze rules with the folio mark between */
.spread-divider {
  display: flex; align-items: center; gap: 24px;
}
.spread-divider .bar {
  flex: 1; height: 1px; background: var(--bronze); opacity: 0.6;
}

/* Measurement card — work-section bone paper insert */
.measure-card {
  background: var(--bone);
  color: var(--ink);
  padding: 32px 36px;
  position: relative;
  box-shadow: 0 1px 0 var(--line-bone), 0 24px 60px -30px rgba(0,0,0,0.5);
}
.measure-card .rule-bronze { border-color: var(--bronze); opacity: 0.5; }

/* Drop-cap initial — editorial paragraph opener */
.dropcap::first-letter {
  font-family: 'Vollkorn', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 4.5rem;
  line-height: 0.85;
  float: left;
  padding: 6px 14px 0 0;
  color: var(--thread);
}

/* Input — measurement sheet line */
.sheet-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-bone);
  padding: 12px 0 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  color: var(--ink);
}
.sheet-input:focus {
  outline: 0;
  border-bottom-color: var(--thread);
  background: rgba(163, 36, 43, 0.04);
}
.sheet-label {
  font-family: 'DM Sans', sans-serif;
  font-variant: all-small-caps;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--muted-ink);
}

/* Footer */
.foot {
  background: #06081a;
  color: var(--bone-soft);
  border-top: 1px solid var(--bronze);
}
.foot a { color: var(--bone-soft); }
.foot a:hover { color: var(--bronze-soft); }

/* Tape-measure inline ornament for use in section openers */
.dash-rule {
  display: inline-block;
  width: 64px;
  height: 1px;
  background: var(--bronze);
  vertical-align: middle;
  margin: 0 12px;
}

/* Subtle paper grain for bone insets */
.paper-grain {
  background-image:
    radial-gradient(rgba(60, 50, 30, 0.04) 1px, transparent 1.2px),
    radial-gradient(rgba(60, 50, 30, 0.025) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}