/* The three comic pages, drawn as comic pages.
 *
 * Asked for on 4 September: the Comic Book side of the catalogue should look
 * like paper -- like a comic book -- and the text should be set in comic
 * lettering. Only those three pages. ComicBubble, Comic Pipeline and Panel
 * Forge wear this; DocPilot, Disk Manager and OpticalBurn do not, and neither
 * does the home page.
 *
 * Laid over product.css and tema-alba.css, in that order, and linked only on
 * pages whose family is "comics" (construieste.py decides). Nothing above it
 * is touched, so the undo is deleting one file and one line.
 *
 * The three faces are the ones ComicBubble itself ships and letters with, so
 * the page that sells the program is set in the program's own hand. They are
 * served from sentiora.dev, not from Google: a visitor's browser never tells
 * anyone else that it was here. See assets/fonturi/LICENTA.md.
 */

/* ------------------------------------------------------------ the hand */

@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonturi/bangers-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Bangers";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonturi/bangers-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonturi/comic-neue-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonturi/comic-neue-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonturi/permanent-marker-400-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------- paper */

/* The tokens carry !important for one reason, and it is worth knowing: every
   product page writes its own colours into a style attribute on <body>, and
   an inline style outranks any ordinary stylesheet rule. An author rule
   marked important is the one thing that outranks it back. Without this the
   comic pages would keep the cream of the light theme and only the type
   would change, which is the half-done version of this idea. */
body.comics-page {
  /* PREMIUM PRINT STOCK, AND NOT AN OLD ONE.
     Two papers were turned down before this: #f2e8d0, a cream with real
     yellow in it, and #f6f3ec, the warm off-white that replaced it. Two
     rejections in the same direction say the trouble is not how MUCH warmth
     but that there is warmth at all -- both read as paper that has aged, and
     nobody wants their software to look like a comic out of a loft.

     So this goes the other way: bright, all but neutral, with just enough
     warmth left that it does not read as a screen showing through. It is the
     stock a modern album is printed on. What makes it paper is the halftone
     over it, not the yellow in it. */
  --bg: #f5f6f7 !important;
  --surface: #eef0f2 !important;
  --surface-raised: #ffffff !important;

  /* Warm black. Printing ink on absorbent paper is never #000, and on a
     cream ground a cold black reads as a screen showing through. */
  --ink: #16171b !important;
  --muted: #474a52 !important;
  --faint: #7b818b !important;

  --line: rgba(20, 22, 28, 0.5) !important;
  --line-soft: rgba(20, 22, 28, 0.18) !important;
  --row-line: rgba(20, 22, 28, 0.28) !important;
  --micro-ink: #5b5241 !important;

  font-family: "Comic Neue", "Segoe UI", sans-serif;
  font-size: 1.02rem;
}

/* Halftone, as MICRO-texture only -- 3.5% and 2.2%, at half the old size.
   The first pass ran it at 11%, which is a visible field of dots: that is a
   printed comic, and it drags the whole page towards pulp. At this strength
   nobody sees dots; they see that the surface is not flat glass. It replaces
   the engineering grid the tools world wears, because a comic page is not
   graph paper -- but it must never be the thing you notice first.

   Two layers offset by half a step, because a single square lattice reads as
   a screen door. Offset, the eye reads paper. */
body.comics-page {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(20, 22, 28, 0.035) 0.5px, transparent 0.6px),
    radial-gradient(rgba(20, 22, 28, 0.022) 0.5px, transparent 0.6px);
  background-size: 5px 5px, 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  background-attachment: fixed;
}

/* The guide lines and the veil belong to the other look. */
.comics-page .sheet-guides,
.comics-page .sheet-veil { display: none; }

.comics-page .site-header {
  background: rgba(246, 243, 236, 0.94);
  border-bottom: 2px solid var(--ink);
}

/* ------------------------------------------------------------ lettering */

/* Bangers is a comic title face: caps, condensed, drawn with a brush. It is
   for the things that are shouted -- the product name, the section titles --
   and for nothing that runs longer than a line or two. Set as body copy it
   is unreadable, which is why Comic Neue does the reading. */
.comics-page h1,
.comics-page h2,
.comics-page h3,
.comics-page .feature h3,
.comics-page .button,
.comics-page .btn-primary {
  font-family: "Bangers", "Comic Neue", cursive;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.comics-page h1 {
  letter-spacing: 0.01em;
  line-height: 0.92;
  /* The drawn outline a comic title has: ink, thickened. Kept to a hair --
     a full stroke turns a heading into a sticker. */
  text-shadow: 2px 2px 0 rgba(20, 22, 28, 0.16);
}

.comics-page h2 { line-height: 0.98; }

/* The small labels are handwritten, because in a comic the panel captions
   are lettered by the same hand that lettered the dialogue. */
.comics-page .eyebrow,
.comics-page .section-label,
.comics-page .feature-number,
.comics-page .sidebar-label,
.comics-page .gallery-index {
  font-family: "Permanent Marker", "Comic Neue", cursive;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* What stays mono, on purpose: versions, sizes, checksums. Those are the one
   place on the page where a person compares character against character, and
   a hand-lettered SHA-256 is a joke played on whoever has to read it. */
.comics-page .row-code,
.comics-page .release-row strong,
.comics-page .product-status,
.comics-page code,
.comics-page .fisa dd { font-family: var(--mono); }

/* --------------------------------------------------------------- panels */

/* A comic is panels: a black frame, a hard shadow, no blur. Blur is a screen
   effect -- paper casts an edge. Everything that was a card becomes one. */
.comics-page .feature,
.comics-page .gallery-card,
.comics-page .release-card,
.comics-page .ai-panel,
.comics-page .product-mockup,
.comics-page .product-shot {
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--surface-raised);
  box-shadow: 6px 6px 0 rgba(20, 22, 28, 0.82);
}

.comics-page .feature {
  padding: 1.5rem 1.4rem 1.6rem;
  border-top: 3px solid var(--ink);
}

.comics-page .feature-grid { gap: 2.2rem; }

/* The number strip across the top of a panel, in the product's own colour --
   the one place the hue gets to be a block rather than a line. */
.comics-page .feature-number {
  /* The panel is a column flexbox, so a flex item cannot be inline-block --
     the browser blockifies it and the label stretches the whole width, which
     reads as a coloured bar rather than a stuck-on tag. These two lines are
     how a flex item shrinks to its text. */
  align-self: flex-start;
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.15rem 0.6rem 0.05rem;
  border: 2px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  background: var(--accent-soft);
  font-size: 0.8rem;
}

.comics-page .feature-list li::before { color: var(--ink); }

/* --------------------------------------------------------------- bubble */

/* The opening sentence, in a speech bubble with a tail. On the page that
   sells a bubble maker this is not decoration, it is the demonstration.
   Drawn with two triangles: the black one is the outline, the paper one
   sits a shade inside it and hides everything but the edge. */
/* :not(.eyebrow) because the little label above the title is also a <p> in
   here, and it came out as a second bubble with its own tail crossing the
   wordmark. One bubble on the page is the demonstration; two is a page that
   cannot stop talking. */
.comics-page .hero-copy > p:not(.eyebrow) {
  position: relative;
  margin-bottom: 2.6rem;
  padding: 1.25rem 1.5rem 1.35rem;
  border: 3px solid var(--ink);
  border-radius: 26px;
  color: var(--ink);
  background: #fffdf5;
  box-shadow: 5px 5px 0 rgba(20, 22, 28, 0.82);
}

.comics-page .hero-copy > p:not(.eyebrow)::before,
.comics-page .hero-copy > p:not(.eyebrow)::after {
  position: absolute;
  bottom: -22px;
  left: 3.2rem;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
}

.comics-page .hero-copy > p:not(.eyebrow)::before {
  border-width: 22px 20px 0 0;
  border-color: var(--ink) transparent transparent transparent;
}

.comics-page .hero-copy > p:not(.eyebrow)::after {
  bottom: -16px;
  left: 3.45rem;
  border-width: 17px 14px 0 0;
  border-color: #fffdf5 transparent transparent transparent;
}

/* -------------------------------------------------------------- buttons */

/* A comic button is a printed thing you press: it moves, and its shadow
   closes up under it. */
.comics-page .button,
.comics-page .btn-primary {
  padding: 0.7rem 1.3rem 0.6rem;
  border: 3px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  background: var(--surface-raised);
  box-shadow: 4px 4px 0 rgba(20, 22, 28, 0.82);
  font-size: 1.15rem;
  transition: transform 90ms ease, box-shadow 90ms ease;
}

.comics-page .button:hover,
.comics-page .button:focus-visible,
.comics-page .btn-primary:hover,
.comics-page .btn-primary:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(20, 22, 28, 0.82);
}

/* --------------------------------------------------------------- plates */

.comics-page .release-row {
  border-bottom: 2px solid var(--line-soft);
}

.comics-page .section-head h2::after {
  display: block;
  width: 4.5rem;
  height: 5px;
  margin-top: 0.7rem;
  content: "";
  background: var(--ink);
}

/* The application windows drawn on these pages are dark, and they stay dark:
   they are photographs of a program pasted into the page, and a photograph
   in a comic is pasted in with a border, not repainted. */
.comics-page .app-window { border-radius: 2px; }

/* ================= THE WORKFLOW, AS A COMPOSED PAGE ===================== */

/* Three real screens from one sitting. Laid out as an editorial page rather
   than as three identical cards: the caption box and the copy sit in a narrow
   column, the screen takes the width it needs, and the steps alternate so the
   eye travels down the page instead of scanning a grid. */

.comics-page .flux-pasi {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* The gutter between panels, which is what a comic page is made of. */
  gap: 4.5rem;
}

.comics-page .flux-pas {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
  gap: 1.6rem 2.4rem;
  align-items: start;
}

/* Every second step mirrors, so the page has a rhythm rather than a margin. */
.comics-page .flux-pas:nth-child(even) { direction: rtl; }
.comics-page .flux-pas:nth-child(even) > * { direction: ltr; }

/* THE CAPTION BOX. In a comic this is the narration box in the corner of the
   panel -- a hard-edged rectangle that is part of the drawing, not a label
   floating over it. Here it carries the page number. */
.comics-page .flux-nr {
  grid-column: 1;
  justify-self: start;
  padding: 0.3rem 0.75rem 0.22rem;
  border: 2px solid var(--ink);
  background: var(--surface-raised);
  box-shadow: 3px 3px 0 rgba(20, 22, 28, 0.82);
  font-family: "Permanent Marker", cursive;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.comics-page .flux-copy { grid-column: 1; }
.comics-page .flux-copy h3 { margin: 0 0 0.7rem; font-size: 1.5rem; }
.comics-page .flux-copy p { margin: 0; color: var(--muted); line-height: 1.65; }
.comics-page .flux-copy code {
  padding: 0.05em 0.3em;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: var(--surface);
  font-size: 0.88em;
}

/* THE PANEL. A screenshot on a comic page is a photograph pasted in: it gets
   the frame and the hard shadow, and nothing else -- no gradient, no glow, no
   tilt. The picture has to stay legible, because it is the evidence. */
.comics-page .flux-shot {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  border: 3px solid var(--ink);
  border-radius: 2px;
  box-shadow: 7px 7px 0 rgba(20, 22, 28, 0.82);
  background: var(--surface-raised);
  overflow: hidden;
}

.comics-page .flux-shot button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.comics-page .flux-shot img { display: block; width: 100%; height: auto; }

/* ======================= THE CONTROLS, AT FULL SIZE ===================== */

/* Crops cut at native resolution. They are small on purpose: enlarging them
   would invent pixels the application never drew, and the whole point of this
   strip is that it shows the real thing at its real size. */

.comics-page .detalii-grid {
  display: grid;
  /* Four across on a wide screen, not three-and-a-stray: the strip is one
     row of evidence, and a second row of one was costing a third of a screen
     to say nothing extra. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 1180px) {
  .comics-page .detalii-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.comics-page .detaliu {
  margin: 0;
  padding: 1rem 1rem 0;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: var(--surface-raised);
  box-shadow: 5px 5px 0 rgba(20, 22, 28, 0.82);
}

/* A dark mat behind the crop: these are pieces of a dark interface, and on
   bare paper they would float. The mat is the slide holder. */
.comics-page .detaliu picture {
  display: block;
  padding: 0.6rem;
  border-radius: 2px;
  background: #14141c;
}

.comics-page .detaliu img { display: block; width: 100%; height: auto; }

.comics-page .detaliu figcaption {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 0 1rem;
}

.comics-page .detaliu figcaption strong { font-size: 0.98rem; }
.comics-page .detaliu figcaption span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Recomposed vertically on a phone: the panel keeps its frame, the copy sits
   above it, and nothing is shrunk into an unreadable comic strip. */
@media (max-width: 900px) {
  .comics-page .flux-pas {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .comics-page .flux-pas:nth-child(even) { direction: ltr; }
  .comics-page .flux-nr,
  .comics-page .flux-copy,
  .comics-page .flux-shot { grid-column: 1; }
  .comics-page .flux-shot { grid-row: auto; }
  .comics-page .flux-pasi { gap: 3rem; }
}

/* Same correction as the tools world: the panel takes the screenshot's own
   shape rather than a 16:9 box it would have to be letterboxed into. */
.comics-page .flux-shot .gallery-media {
  aspect-ratio: auto;
  background: transparent;
}

.comics-page .flux-shot .gallery-media img { height: auto; object-fit: fill; }