/* The reading card — the parchment, the charcoal and the tailor's marks.

   Everything the card itself draws lives here, so the client's reading page
   and the atelier's review desk are not only composed from one file but
   painted from one too.

   The tokens are scoped to .reading-card rather than :root on purpose: the
   app's own screens have a --clay and an --umber of their own, and a card
   dropped into that page must not repaint the rest of it. The atelier's
   pages already declare the same names at :root for their sheet and frame,
   so the rules below find them either way. */
.reading-card {
  --paper: #EDE4D0;
  --paper-deep: #E2D5B9;
  --paper-light: #F4EDDD;
  --panel: #E4D9C1;
  --charcoal: #3A2F26;
  --sepia: #5C4A3A;
  --umber: #8B7A5E;
  --clay: #9C5F4E;
  --dove: #7D8E9E;
  --rule: rgba(58, 47, 38, 0.35);
  --rule-soft: rgba(58, 47, 38, 0.18);
  --serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', sans-serif;
  color: var(--charcoal);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
}
/* the atelier pages reset every element; a card set down in the app's own
   page carries just enough of that reset to sit straight */
.reading-card ul, .reading-card ol, .reading-card li,
.reading-card dl, .reading-card dt, .reading-card dd,
.reading-card figure, .reading-card figcaption, .reading-card p {
  margin: 0; padding: 0; list-style: none;
}

/* ---------- type roles ---------- */
.a-eyebrow { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var(--clay); }
.a-eyebrow.umber { color: var(--umber); }
.a-title { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: .22em; text-transform: uppercase; line-height: 1.2; color: var(--charcoal); }
.a-title-rule { width: 100%; height: 1px; background: var(--rule); margin: 10px 0 18px; position: relative; }
.a-title-rule::after { content: ''; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--rule-soft); }
.a-arch { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 4.4vw, 40px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.15; }
.a-arch small { display: block; font-weight: 500; font-size: .5em; letter-spacing: .3em; color: var(--sepia); margin-bottom: 6px; }
.a-celebrate { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(19px, 2.6vw, 24px); color: var(--sepia); margin-top: 6px; }
/* ---------- what the architecture is ----------
   A lead line with the architecture's own mark before it, then four short
   things — frame, flesh, features, reads as — each on its own rule, so it is
   read as four facts and not one paragraph. */
.a-describe { max-width: 600px; margin: 22px auto 0; text-align: left; }
.a-describe + .a-describe { margin-top: 26px; }
.r3-right .a-describe { margin-left: 0; margin-right: 0; }
.a-lead { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.a-lead-glyph { flex: 0 0 auto; height: 44px; display: flex; align-items: center; }
.a-lead-glyph svg { height: 44px; stroke: var(--clay); fill: none; }
.a-lead-glyph .draw { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw-in 1.2s ease-out .2s forwards; }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
.a-lead p { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 24px); line-height: 1.3; color: var(--charcoal); }
.a-lead em { font-style: italic; font-weight: 500; }
.a-traits { display: grid; }
.a-traits > div { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule-soft); }
.a-traits > div:last-child { border-bottom: 1px solid var(--rule-soft); }
.a-traits dt { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--clay); padding-top: 3px; }
.a-traits dd { font-family: var(--serif); font-size: clamp(16px, 1.9vw, 17.5px); line-height: 1.6; color: var(--charcoal); }
@media (max-width: 420px) { .a-traits > div { grid-template-columns: 1fr; gap: 3px; } }
@media (prefers-reduced-motion: reduce) { .a-lead-glyph .draw { animation: none; stroke-dashoffset: 0; } }
.a-caps { font-family: var(--serif); font-weight: 500; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--charcoal); }
.a-data { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .12em; color: var(--sepia); }
.a-body { font-size: 17px; line-height: 1.7; color: var(--charcoal); }
.a-section { font-family: var(--serif); font-weight: 500; font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--charcoal); text-align: center; position: relative; margin: 34px 0 16px; }
.a-section::before, .a-section::after { content: ''; position: absolute; top: 50%; width: calc(50% - 120px); max-width: 140px; height: 1px; background: var(--rule-soft); }
.a-section::before { left: 0; } .a-section::after { right: 0; }

/* ---------- the croquis ---------- */
.croquis { display: block; width: 100%; height: auto; }
.croquis .cq-line { fill: none; stroke: var(--charcoal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.croquis .cq-soft { fill: none; stroke: var(--charcoal); stroke-width: .9; stroke-linecap: round; opacity: .62; }
.croquis .cq-hatch { fill: none; stroke: var(--sepia); stroke-width: .7; stroke-linecap: round; opacity: .42; }
.croquis .cq-figure { filter: url(#cq-charcoal); }
.croquis .cq-band { fill: none; stroke: var(--clay); stroke-width: .9; stroke-dasharray: 3 2.6; opacity: .9; }
.croquis .cq-leader { fill: none; stroke: var(--clay); stroke-width: .7; stroke-dasharray: 2.2 2.4; opacity: .8; }
.croquis .cq-tick { fill: none; stroke: var(--clay); stroke-width: .9; }
.croquis .cq-label { font-family: var(--sans); font-weight: 300; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; fill: var(--sepia); }
.croquis .cq-value { font-family: var(--serif); font-weight: 500; font-size: 14px; fill: var(--charcoal); }
.croquis .cq-inline { font-family: var(--sans); font-weight: 300; font-size: 9px; letter-spacing: .1em; fill: var(--clay); }
.croquis text { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
/* a mark is a thing to tap: the relation is what it shows, the measure
   behind it appears underneath when asked */
.croquis .cq-mark { cursor: pointer; outline: none; }
.croquis .cq-mark:focus-visible .cq-band { stroke-width: 1.6; }
.croquis .cq-approx { font-family: var(--sans); font-weight: 300; font-size: 8.5px; letter-spacing: .08em; fill: var(--umber); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.croquis .cq-mark.show .cq-approx { opacity: 1; }
.croquis .cq-mark:hover .cq-band { stroke-width: 1.3; }
/* the portrait's own cream paper multiplies into the sheet and its edges are
   feathered by the mask, so the picture sits in the page rather than on it */
.croquis .cq-portrait { mix-blend-mode: darken; opacity: 0; animation: cq-settle 1.2s ease .1s forwards; }
.croquis text.cq-label, .croquis text.cq-value, .croquis text.cq-inline { stroke-width: 2.4px; }
/* draws itself on: the figure first, the marks after */
.croquis .cq-figure path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: cq-draw 2.6s cubic-bezier(.3, .8, .3, 1) forwards; }
.croquis .cq-figure .cq-hatch { animation-delay: 1.6s; animation-duration: 1.4s; }
.croquis .cq-marks { opacity: 0; animation: cq-settle .9s ease 2.2s forwards; }
@keyframes cq-draw { to { stroke-dashoffset: 0; } }
@keyframes cq-settle { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .croquis .cq-figure path { animation: none; stroke-dashoffset: 0; }
  .croquis .cq-marks { animation: none; opacity: 1; }
}

/* ---------- your proportions: the five axes ---------- */
.axes-panel { background: var(--panel); border: 1px solid var(--rule-soft); padding: 18px 22px 20px; text-align: center; }
.axes-panel .a-caps { display: block; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
/* each axis is its own mark, its own name, its own line — five things to
   find, not one block to read */
.ax-glyph { display: block; width: 34px; height: 34px; stroke: var(--clay); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.axes-list { list-style: none; display: grid; text-align: left; }
.axes-list li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: center; padding: 11px 0; border-top: 1px solid var(--rule-soft); }
.axes-list li:last-child { border-bottom: 1px solid var(--rule-soft); }
.axes-list .ax-text { display: grid; gap: 3px; }
.axes-list .ax-name { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--clay); }
.axes-list .ax-phrase { font-family: var(--serif); font-weight: 500; font-size: 15.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--charcoal); }
.axes-list .ax-measure { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .1em; color: var(--sepia); }
.axes-list .ax-measure b { font-weight: 400; color: var(--charcoal); }
.axes-panel .a-caps { margin-bottom: 4px; border-bottom: 0; }
.axes-row { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.axes-row li { padding: 12px 4px 10px; border-top: 1px solid var(--rule); }
.axes-row .ax-glyph { margin: 0 auto 8px; width: 30px; height: 30px; }
.axes-row .ax-name { font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--clay); display: block; margin-bottom: 8px; }
.axes-row .ax-number { font-family: var(--serif); font-weight: 500; font-size: clamp(17px, 2.4vw, 22px); display: block; color: var(--charcoal); line-height: 1.1; }
.axes-row .ax-phrase { font-family: var(--serif); font-style: italic; font-size: clamp(12px, 1.6vw, 15px); color: var(--sepia); display: block; margin-top: 6px; line-height: 1.3; }

/* ---------- garments and fabrics ---------- */
.direction { font-family: var(--serif); font-weight: 500; font-size: clamp(14px, 2vw, 17px); letter-spacing: .22em; text-transform: uppercase; text-align: center; color: var(--charcoal); }
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 14px 10px; }
.swatch { text-align: center; }
.swatch svg { display: block; width: 100%; aspect-ratio: 1; height: auto; border: 1px solid rgba(58,47,38,.25); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 3px 8px -4px rgba(58,47,38,.5); }
.swatch span { display: block; margin-top: 7px; font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .1em; color: var(--sepia); }
.garments { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 14px 10px; }
.garment { text-align: center; }
.garment svg { display: block; width: 100%; height: auto; aspect-ratio: 60 / 90; }
.garment svg path, .garment svg circle, .garment svg line { fill: none; stroke: var(--charcoal); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.garment svg .g-soft { stroke-width: .7; opacity: .55; }
.garment span { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--sepia); }
/* the pinked strip: swatches cut with shears, laid in a row */
.pinked { display: flex; gap: 6px; }
.pinked .swatch { flex: 1; }
.pinked .swatch svg { border: 0; box-shadow: none; clip-path: polygon(0 4%, 4% 0, 8% 4%, 12% 0, 16% 4%, 20% 0, 24% 4%, 28% 0, 32% 4%, 36% 0, 40% 4%, 44% 0, 48% 4%, 52% 0, 56% 4%, 60% 0, 64% 4%, 68% 0, 72% 4%, 76% 0, 80% 4%, 84% 0, 88% 4%, 92% 0, 96% 4%, 100% 0, 100% 96%, 96% 100%, 92% 96%, 88% 100%, 84% 96%, 80% 100%, 76% 96%, 72% 100%, 68% 96%, 64% 100%, 60% 96%, 56% 100%, 52% 96%, 48% 100%, 44% 96%, 40% 100%, 36% 96%, 32% 100%, 28% 96%, 24% 100%, 20% 96%, 16% 100%, 12% 96%, 8% 100%, 4% 96%, 0 100%); }

/* ---------- the tally, the invitation, the credit ---------- */
.a-tally { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 470px; margin: 14px auto 0; }
.a-tally div { background: var(--panel); padding: 12px 4px; text-align: center; }
.a-tally .lbl { font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--umber); display: block; margin-bottom: 4px; }
.a-tally .val { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.a-tally div.top { background: var(--charcoal); }
.a-tally div.top .lbl { color: rgba(237,228,208,.6); }
.a-tally div.top .val { color: var(--paper); }
.a-invite { text-align: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule-soft); }
.a-invite p { max-width: 520px; margin: 12px auto 24px; font-size: 17px; line-height: 1.7; text-align: left; }
.a-btn { display: inline-block; padding: 15px 36px; border: 1px solid var(--charcoal); font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; transition: background .3s, color .3s; }
.a-btn:hover { background: var(--charcoal); color: var(--paper); }
.a-credit { max-width: 560px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--rule-soft); font-size: 13px; line-height: 1.8; color: var(--sepia); text-align: left; }
.a-credit .a-eyebrow { display: block; margin-bottom: 10px; }

/* ---------- shared closing blocks ---------- */
.a-tally-wrap { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule-soft); }
.a-secondary { max-width: 460px; margin: 22px auto 0; text-align: center; font-style: italic; font-size: 17px; color: var(--sepia); }
.a-secondary strong { font-style: normal; font-weight: 500; color: var(--charcoal); }

/* ---------- two · the tailor's card ----------
   A portrait card: she stands beside a cloth tape; her numbers hang off the
   figure on tags. */
.r2-head { text-align: center; margin-bottom: 18px; }
.r2-head .a-arch { margin-top: 16px; }
.r2-figure { max-width: 560px; margin: 0 auto; }
.r2-figure .croquis { max-height: 78svh; }
.croquis .tp-cloth { fill: var(--paper-light); stroke: var(--rule); stroke-width: .8; }
.croquis .tp-tick { stroke: var(--charcoal); stroke-width: .7; opacity: .7; }
.croquis .tp-num { font-family: var(--sans); font-weight: 300; font-size: 7.5px; fill: var(--charcoal); letter-spacing: .02em; }
.croquis .tp-crown { stroke: var(--clay); stroke-width: .8; stroke-dasharray: 3 2.6; }
.croquis .tg-string { fill: none; stroke: var(--sepia); stroke-width: .6; opacity: .8; }
.croquis .tg-card { fill: var(--paper-light); stroke: var(--rule); stroke-width: .8; }
.croquis .tg-hole { fill: none; stroke: var(--sepia); stroke-width: .7; }
.r2-direction { margin: 26px 0 0; }

/* ---------- two-b · her curve and her vertical, drawn ----------
   Beside the figure, two cards: her silhouette as one line over the nearest
   archetype's faint one, and her stature with the legs' share marked. */
.r2b-grid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
.a-cards { display: grid; gap: 22px; margin-top: 26px; }
.r2b-grid .a-cards { margin-top: 0; }
.curve-block { border: 1px solid var(--rule-soft); background: var(--panel); padding: 16px 18px 18px; text-align: center; }
.curve-block .a-eyebrow { display: block; margin-bottom: 8px; }
.curve-card { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.curve-card .cv-axis { stroke: var(--rule); stroke-width: .8; stroke-dasharray: 2 3; fill: none; }
.curve-card .cv-row { stroke: var(--rule-soft); stroke-width: .8; fill: none; }
.curve-card .cv-label { font-family: var(--sans); font-weight: 300; font-size: 7.5px; letter-spacing: .22em; fill: var(--sepia); }
.curve-card .cv-pct { font-family: var(--sans); font-weight: 300; font-size: 8px; letter-spacing: .06em; fill: var(--sepia); }
.curve-card .cv-template { stroke: var(--charcoal); stroke-width: 1.1; fill: none; opacity: .28; stroke-linecap: round; }
.curve-card .cv-line { stroke: var(--clay); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.curve-card .cv-line.vt-mark { stroke-width: 2.4; }
.curve-card path.cv-line:not(.vt-tick):not(.vt-mark) { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw-in 1.6s cubic-bezier(.3,.8,.3,1) .3s forwards; }
.curve-read { margin: 12px auto 0; max-width: 300px; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--sepia); }
.curve-read b { font-weight: 500; color: var(--charcoal); letter-spacing: .04em; }
.curve-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
.curve-cell { display: grid; justify-items: center; gap: 4px; opacity: .55; }
.curve-cell.on { opacity: 1; }
.curve-cell span { font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--sepia); }
.curve-cell.on span { color: var(--clay); }
.curve-mini { width: 100%; max-width: 44px; height: auto; }
.curve-mini path { stroke: var(--charcoal); stroke-width: 1.4; fill: none; stroke-linecap: round; }
.curve-mini.on path { stroke: var(--clay); stroke-width: 2; }
/* the figure is a grid item: auto margins would shrink it to the svg's
   intrinsic width, so it is told to fill its column outright */
.r2b-grid .r2-figure { width: 100%; margin: 0; justify-self: stretch; }
@media (min-width: 760px) { .r2b-grid { grid-template-columns: 2fr 1fr; gap: 30px; } .r2b-grid .r2-figure { max-width: none; } .r2b-grid .r2-figure .croquis { max-height: none; } }
@media (prefers-reduced-motion: reduce) { .curve-card path.cv-line { animation: none; stroke-dashoffset: 0; } }
.r2-caption { display: block; text-align: center; margin-top: 6px; }
.r2-pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; max-width: 640px; margin: 0 auto; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; }
.pair .garment svg { max-width: 92px; margin: 0 auto; }
.pair .chip svg { max-width: 64px; margin: 0 auto; }
@media (min-width: 640px) { .r2-pairs { grid-template-columns: repeat(4, 1fr); } .pair { grid-template-columns: 1fr; } }

/* ---------- the card set down in the app's own reading page ----------
   The atelier gives it a whole sheet of parchment; here it sits inside a
   screen that already has a background, a width and a rhythm of its own. */
.screen.reading-card { text-align: center; }
.screen.reading-card .r2-head { margin-bottom: 22px; }
.screen.reading-card .glyph-big { margin: 18px 0 6px; }
.screen.reading-card .a-tally-wrap { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule-soft); }

/* her likeness arriving over the figure drawn to her measurements — one
   dissolves into the other rather than one replacing the other */
.r2-figure.rc-swapping { position: relative; }
.r2-figure.rc-swapping .rc-arriving { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; margin-top: 12px; min-height: 20px; }
.rc-note { font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .12em; color: var(--sepia); }
.rc-controls .btn-quiet { font-size: 12px; }

/* The crown was a dark panel with white glyphs; on parchment it is the mark
   itself and her line beneath it, in the studio's own ink. */
.screen.reading-card .glyph-big { height: auto; display: flex; align-items: center; justify-content: center; gap: 22px; margin: 18px 0 4px; }
.screen.reading-card .glyph-big svg { height: clamp(76px, 16vw, 110px); stroke: var(--clay); fill: none; }
.screen.reading-card .tagline { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 2.4vw, 21px); color: var(--sepia); margin-top: 4px; }
.screen.reading-card .eyebrow { color: var(--clay); }
.screen.reading-card .eyebrow.umber { color: var(--umber); }
.screen.reading-card .secondary-note { max-width: 460px; margin: 22px auto 0; font-style: italic; font-size: 17px; color: var(--sepia); }
.screen.reading-card .secondary-note strong { font-style: normal; font-weight: 500; color: var(--charcoal); }

/* On a desk or a tablet the sheet is wider than the rest of the app, so her
   figure is drawn at a size worth looking at rather than squeezed into a
   column meant for one paragraph of type. */
@media (min-width: 760px) {
  .screen.reading-card { max-width: 940px; }
}
@media (min-width: 1100px) {
  .screen.reading-card { max-width: 1040px; }
}

/* the traced figure: ribbons are filled, not stroked; the hatch and soft lines keep the rules above */
.croquis .cq-ink { fill: var(--charcoal); stroke: none; }