/* ==========================================================================
   Origami & Folding — tokens.
   ==========================================================================

   The structural stylesheet is essay-kit's base.css, loaded first. Everything
   below is this site's identity and nothing else.

   Light mode is the paper: a bright, slightly cool white, brighter than any
   sibling site, because the subject is a sheet and the sheet should read as
   one. Dark mode is a self-healing cutting mat — the deep blue-green every
   folder and paper-cutter has on their desk — rather than a generic night
   theme.

   The two principal roles are not chosen. Mountain-red and valley-blue is the
   convention of the computational origami literature, of ORIPA, and of every
   FOLD viewer, and adopting it means a reader who knows the field can read
   these figures without a key. The remaining roles are this site's own:
   boundary, construction line, and the thing that fails.

   Corners are square. Statics used 2px and acoustics 5px; a subject about
   sharp folds takes none at all.
   ========================================================================== */

:root {
  --paper:   #fcfcfa;
  --paper-2: #f4f4f0;
  --paper-3: #e8e8e2;
  --ink:     #191b1c;
  --ink-2:   #414648;
  --ink-3:   #5f6669;
  --rule:    #d3d5d0;
  --rule-2:  #e6e7e3;

  --c-a: #b3321f;   /* mountain fold — folds away from the reader */
  --c-b: #1f5fa8;   /* valley fold — folds toward the reader */
  --c-c: #0f7a5a;   /* construction: an axiom's reference line, a bisector */
  --c-d: #8a6410;   /* the measured quantity: an angle, a ratio, a length */
  --c-e: #8d2f8a;   /* the discrepancy: what does not fold, what collides */
  --c-warn: #a52218;

  --fig-ink:   var(--ink);
  --fig-soft:  #575d5f;
  --fig-faint: #c2c5bf;

  /* The sheet itself, and its reverse. Kami is coloured on one side and white
     on the other, and that duality is the same duality as mountain and valley,
     so the two faces get their own tokens rather than borrowing a role. */
  --sheet-front: #fbfaf6;
  --sheet-back:  #e2ddcd;
  --sheet-edge:  #9aa09b;

  --tint: 13%;
  --tint-strong: 24%;

  --font-body: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-display: var(--font-body);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --radius: 0px;
  --shadow: 0 1px 2px rgb(25 27 28 / 7%), 0 8px 24px -14px rgb(25 27 28 / 26%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #14201e;
    --paper-2: #1b2926;
    --paper-3: #24332f;
    --ink:     #e8efec;
    --ink-2:   #b0bdb8;
    --ink-3:   #8b9a95;
    --rule:    #2f423d;
    --rule-2:  #1f2e2b;

    --c-a: #ff8266;
    --c-b: #6fb0f5;
    --c-c: #4fd3a4;
    --c-d: #e5bf58;
    --c-e: #e693e0;
    --c-warn: #fb7b6f;

    --fig-ink:   #e2eae7;
    --fig-soft:  #8fa09b;
    --fig-faint: #33443f;

    --sheet-front: #26332f;
    --sheet-back:  #33423c;
    --sheet-edge:  #7d8c87;

    --tint: 19%;
    --tint-strong: 32%;
    --shadow: 0 1px 2px rgb(0 0 0 / 44%), 0 12px 34px -16px rgb(0 0 0 / 78%);
  }
}

:root[data-theme="dark"] {
  --paper:   #14201e;
  --paper-2: #1b2926;
  --paper-3: #24332f;
  --ink:     #e8efec;
  --ink-2:   #b0bdb8;
  --ink-3:   #8b9a95;
  --rule:    #2f423d;
  --rule-2:  #1f2e2b;

  --c-a: #ff8266;
  --c-b: #6fb0f5;
  --c-c: #4fd3a4;
  --c-d: #e5bf58;
  --c-e: #e693e0;
  --c-warn: #fb7b6f;

  --fig-ink:   #e2eae7;
  --fig-soft:  #8fa09b;
  --fig-faint: #33443f;

  --sheet-front: #26332f;
  --sheet-back:  #33423c;
  --sheet-edge:  #7d8c87;

  --tint: 19%;
  --tint-strong: 32%;
  --shadow: 0 1px 2px rgb(0 0 0 / 44%), 0 12px 34px -16px rgb(0 0 0 / 78%);
}

/* --- site-specific roles -------------------------------------------------- */

/* The two fold assignments. Dash conventions follow the Yoshizawa–Randlett
   system a folder already knows: valley dashed, mountain dash-dot. Colour and
   dash both carry the distinction, so the figures survive being printed in
   monochrome — which they are, because they are meant to be folded. */
.fig-svg .mountain    { stroke: var(--c-a); stroke-width: 1.9; fill: none; stroke-dasharray: 9 3 2 3; }
.fig-svg .valley      { stroke: var(--c-b); stroke-width: 1.9; fill: none; stroke-dasharray: 7 4; }
.fig-svg .boundary    { stroke: var(--fig-ink); stroke-width: 2.2; fill: none; }
.fig-svg .unassigned  { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; stroke-dasharray: 2 3; }
.fig-svg .flat-crease { stroke: var(--fig-faint); stroke-width: 1.2; fill: none; }

/* The sheet, and the reverse of the sheet. */
.fig-svg .sheet       { fill: var(--sheet-front); stroke: var(--sheet-edge); stroke-width: 1.2; }
.fig-svg .sheet-back  { fill: var(--sheet-back);  stroke: var(--sheet-edge); stroke-width: 1.2; }
.fig-svg .facet       { stroke: var(--sheet-edge); stroke-width: 1; }
.fig-svg .facet-lit   { fill: color-mix(in oklab, var(--sheet-front) 88%, var(--ink)); stroke: var(--sheet-edge); stroke-width: 1; }

/* Construction: the reference lines an axiom names, and the point it produces. */
.fig-svg .ref         { stroke: var(--c-c); stroke-width: 1.6; fill: none; }
.fig-svg .ref-dash    { stroke: var(--c-c); stroke-width: 1.4; fill: none; stroke-dasharray: 5 4; }
.fig-svg .point       { fill: var(--c-c); stroke: none; }
.fig-svg .point-out   { fill: var(--paper); stroke: var(--c-c); stroke-width: 1.6; }

/* Measurement, and the thing that fails. */
.fig-svg .dim         { stroke: var(--c-d); stroke-width: 1.4; }
.fig-svg .angle       { fill: color-mix(in oklab, var(--c-d) var(--tint), var(--paper-2)); stroke: var(--c-d); stroke-width: 1.2; }
.fig-svg .bad         { stroke: var(--c-e); stroke-width: 2.4; fill: none; }
.fig-svg .bad-fill    { fill: color-mix(in oklab, var(--c-e) var(--tint), var(--paper-2)); stroke: var(--c-e); stroke-width: 1.3; }

/* Vertices, layers and the grid a pattern sits on. */
.fig-svg .vertex      { fill: var(--fig-ink); stroke: none; }
.fig-svg .vertex-open { fill: var(--paper); stroke: var(--fig-ink); stroke-width: 1.4; }
.fig-svg .grid        { stroke: var(--fig-faint); stroke-width: 0.9; }
.fig-svg .layer       { stroke: var(--fig-ink); stroke-width: 1.6; fill: none; }
.fig-svg .axis        { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg text.mono    { font-family: var(--font-mono); }

/* A square rule under section headings — a paper edge. */
.section-head::after { border-top-style: solid; }

/* --- printable crease patterns --------------------------------------------
   The claim this site makes is that a reader can fold what the figure shows,
   and that claim is only good if the pattern comes off the printer at the size
   it says. A figure marked printable therefore carries a second copy of itself
   sized in millimetres, hidden on screen and the only thing shown on paper. */

.cp-print { display: none; }

.cp-note {
  font: 0.78rem/1.45 var(--font-ui);
  color: var(--ink-3);
  margin: 0.5rem 0 0;
  display: flex; gap: 0.4em; align-items: baseline;
}
.cp-note strong { color: var(--ink-2); font-weight: 600; }

@media print {
  /* Printing an essay gives the essay. That is what Ctrl+P means everywhere
     else and there is no reason for this site to be different — an earlier
     version stripped every page down to its crease pattern, which produced a
     blank sheet on the seventeen essays that do not carry one.

     What is added, rather than substituted, is the true-scale pattern: where a
     figure has one, it gets a page of its own at full size. */

  /* Site chrome, and the on-screen note about printing, which is redundant on
     paper by definition. */
  header, footer, nav, .theme-toggle, .cp-note { display: none !important; }

  /* Ink is expensive and paper is white. */
  body { background: #fff; }
  .figure__frame { border: 0; background: none; padding: 0; }
  .figure { break-inside: avoid; }

  /* The true-scale sheet: its own page, at the size it says. */
  .cp-print {
    display: block;
    break-before: page;  page-break-before: always;
    break-after: page;   page-break-after: always;
  }
  .cp-print svg { display: block; }

  /* Mountain and valley must stay distinguishable with no colour at all,
     because anybody who intends to fold one prints it on whatever is nearest. */
  .cp-print .mountain    { stroke: #000; stroke-dasharray: 9 3 2 3; }
  .cp-print .valley      { stroke: #000; stroke-dasharray: 7 4; }
  .cp-print .boundary    { stroke: #000; stroke-dasharray: none; }
  .cp-print .flat-crease { stroke: #999; }

  @page { margin: 14mm; }
}