/* ---- /products/turtlecane/ ---- page-specific layout and print rules.
   Colour and type come from tokens.css; this file never names a colour. */

.turtle-fig { margin: clamp(24px, 3.2vw, 36px) 0 0; max-width: 46rem; }
.turtle-fig svg { display: block; width: 100%; height: auto; }
.turtle-fig figcaption { margin-block-start: 0.6em; color: var(--muted); font-size: 0.92rem; max-width: var(--measure); }

/* the drawing takes its colours from the theme */
.art .f-light  { fill: var(--surface); }
.art .f-dark   { fill: var(--line); }
.art .f-ink    { fill: var(--text); }
.art .f-accent { fill: var(--accent); }
.art .f-none   { fill: none; }
.art .s-ink    { stroke: var(--text); }
.art .s-accent { stroke: var(--accent); }
.art .s-none   { stroke: none; }
.fig-main .art path.s-ink { stroke-width: 0.9; }
.leaders path  { stroke: var(--text); stroke-width: 0.8; fill: none; }
.badge   { fill: var(--text); }
.badge-n { fill: var(--ground); font-family: var(--font-sans); font-weight: 600; font-size: 10px; }
.lbl     { fill: var(--text); font-family: var(--font-sans); font-weight: 500; font-size: 9px; }
.lbl.muted { fill: var(--muted); font-size: 8px; }

/* steps: a numbered list with the diagram beside the text */
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; max-width: 46rem; border-block-start: var(--rule); }
ol.steps li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 10px 18px;
  align-items: start; padding-block: clamp(16px, 2.4vw, 22px); border-block-end: var(--rule); }
ol.steps li::before { content: counter(step); grid-row: 1 / span 2; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--text); color: var(--ground); font-weight: 600; font-size: 0.9rem; line-height: 1.7rem; text-align: center; }
ol.steps .step-text > * + * { margin-block-start: 0.45em; }
ol.steps h2 { font-size: 1.05rem; }
ol.steps .step-art { width: clamp(120px, 18vw, 170px); }
ol.steps .step-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 40rem) {
  ol.steps li { grid-template-columns: 2rem minmax(0, 1fr); }
  ol.steps .step-art { grid-column: 2; width: 150px; }
}
.trim { color: var(--muted); max-width: var(--measure); }
.trim .k { color: var(--text); }
.before { max-width: var(--measure); }
.before h2 { margin-block-end: 0.5em; }
main > .wrap > .before { margin-block-start: 2em; }

/* ---- print: the sheet that ships with the toy ---- */
@media print {
  @page { size: letter; margin: 10mm 12mm 8mm; }
  html { font-size: 9.4pt; }
  body { font-size: 9.4pt; line-height: 1.35; background: #fff; color: #221B16; display: block; min-height: 0; }
  .site-foot { break-inside: avoid; }
  :root { --ground: #fff; --surface: #EBE7E0; --line: #D3CFC7; --muted: #746D66; --text: #221B16; --accent: #8B5F22; --measure: none; }
  .wrap { max-width: none; padding-inline: 0; }
  .site-head { border: 0; }
  .site-head nav, .site-foot .foot-links, .crumb, .turtle-fig figcaption { display: none; }
  .site-head .wrap { padding-block: 0 6px; }
  .site-head a.brand svg { width: 104px; }
  main { padding-block: 0; }
  main > .wrap > * + * { margin-block-start: 0.55em; }
  h1 { font-size: 18pt; line-height: 1.1; }
  .lede { font-size: 10.5pt; max-width: none; }
  p { max-width: none; }
  .turtle-fig { margin-block-start: 0; max-width: none; }
  .turtle-fig svg { width: 440pt; max-width: 100%; margin-inline: auto; }  /* 83% of actual size so the sheet stays one page */
  ol.steps { max-width: none; columns: 2; column-gap: 22pt; border: 0; margin-block-start: 0.3em; }
  ol.steps li { break-inside: avoid; padding-block: 5pt; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 3pt 8pt; border-block-end: 0; border-block-start: var(--rule); }
  ol.steps li::before { width: 1.35rem; height: 1.35rem; line-height: 1.35rem; font-size: 0.8rem; grid-row: 1; }
  ol.steps h2 { font-size: 10.2pt; }
  ol.steps .step-art { grid-column: 2; width: 110pt; margin-block-start: 2pt; }
  ol.steps li:last-child .step-art { display: none; }
  .trim { margin-block-start: 0.4em; }
  .before { max-width: none; margin-block-start: 0.6em !important; border-block-start: var(--rule); padding-block-start: 5pt; }
  .before h2 { font-size: 10.2pt; margin-block-end: 0.2em; }
  .before ul.points { max-width: none; columns: 2; column-gap: 22pt; }
  .before ul.points li { border: 0; padding-block: 1.5pt; break-inside: avoid; }
  .note { margin-block-start: 0.4em !important; font-size: 8.6pt; padding-inline-start: 0.8em; }
  .site-foot { border-block-start: var(--rule); font-size: 8.2pt; margin-block-start: 5pt; }
  .site-foot .wrap { padding-block: 3pt; }
  a { color: inherit; text-decoration: none; }
}