/* the look: the whole of it, and the only place it is said. every slide, the site and every svg in the
   folder use this file and nothing else — a new look is a change here, never a style on a page. */

/* the stand-ins, until Ilit is here: Frank Ruhl Libre with Noto Naskh Arabic. it takes over the moment its file is in type/ */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&family=Noto+Naskh+Arabic:wght@400..700&family=IBM+Plex+Mono:wght@400&display=swap');
@import url("https://under.bicycle.computer/under.css");

/* Under (תחתית), the sans: the state's everyday voice — signs, screens, forms — its Arabic in it, from its own address */
/* OCR-B, the machine-readable lines of every document, as ICAO asks: type/ocr-b.woff2. until then, IBM Plex Mono */
@font-face {
  font-family: 'OCR-B';
  src: url('type/ocr-b.woff2') format('woff2');
  font-display: swap;
}
/* Ilit (עילית), the serif, drawn now in Hebrew, Arabic and Latin: the ceremonial voice — the passport, the law, the story */
@font-face {
  font-family: 'ilit';
  src: url('type/ilit.woff2') format('woff2'), url('type/ilit.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* the palette, each colour named by what it does, never how it looks. three are decided; the rest follow:
   what a section stands on and speaks in, and what is mixed from those two. change the three, nothing else */
:root {
  --paper:  #ffffff;   /* the ground */
  --ink:    #002fa7;   /* the voice: the mark, the words — Israel's deep blue, set here for the first time */
  --accent: var(--ink); /* two colours, like the flag: the blue is the brand's own */

  --font:   "under", sans-serif;
  --weight: 200;   /* ExtraLight */
  --serif:  "ilit", "Frank Ruhl Libre", "Noto Naskh Arabic", serif;
  --serif-weight: 400;
  --mrz:    "OCR-B", "IBM Plex Mono", monospace;

  --gather: 2.6s;                         /* the triangles meeting: how long */
  --ease:   cubic-bezier(.16, 1, .3, 1);  /* fast away, soft landing */

  --clear:  .25;       /* the mark's room to breathe: nothing comes closer than this share of its height */

  /* the grid: the mark's own triangles, laid over every slide. a slide is 24 triangles across and 15 rows down;
     its margin is half a side. along a row the triangles take turns, one up and one down, and so do the
     columns: 12 of them, one side wide, with one side between — so 2, 3, 4, 6 and 12 equal parts all land on
     the lines. every thing starts on a line and ends on one */
  --side:  5rem;                                   /* a triangle's side */
  --row:   calc(var(--side) * .8660254);           /* a triangle's height: one row */
  --half:  calc(var(--side) / 2);                  /* the margin at the sides */
  --edge:  calc((67.5rem - 15 * var(--row)) / 2);  /* the margin at the top and the foot: what 15 rows leave */

  --bg: var(--paper);
  --fg: var(--ink);
}
/* the ground turned over: ink becomes the ground and paper the voice, for everything inside */
.on-ink { --bg: var(--ink); --fg: var(--paper); background: var(--bg); color: var(--fg); }
/* the quiet and the line are mixed from whatever ground they land on */
:root, .on-ink {
  --muted:  var(--fg);   /* no word is ever said faded: what is quiet is smaller, never paler */
  --border: color-mix(in srgb, var(--fg) 28%, var(--bg));
}

/* the type scale. 1rem is 16px on a 1920 slide, and the same 16px in an svg, so one class is one size
   everywhere. .display is a slide's one big moment and .h1 a title: nothing sits between them */
.display, .h1, .h2, .h3, .h4, .body, .caption { font-family: var(--font); font-weight: var(--weight); fill: var(--fg); }
.display { font-size: 9rem; line-height: 1.1; }
.h1      { font-size: 4rem; line-height: 1.15; }
.h2      { font-size: 3rem; line-height: 1.2; }
.h3      { font-size: 2rem; line-height: 1.28; }
.h4      { font-size: 1.5rem; line-height: 1.33; }
.body    { font-size: 1.25rem; line-height: 1.5; }
.caption { font-size: .875rem; line-height: 1.5; }

/* Ilit, wherever the state speaks for the record */
.serif, .serif .display, .serif .h1, .serif .h2, .serif .h3, .serif .h4, .serif .body { font-family: var(--serif); font-weight: var(--serif-weight); }

/* colour, said by role — `color` for a page, `fill` and `stroke` for an svg */
.fg      { fill: var(--fg); }
.muted   { color: var(--muted); fill: var(--muted); }
.accent  { color: var(--accent); fill: var(--accent); }
.bg-fill { fill: var(--bg); }
.fg-fill { fill: var(--fg); }
.border-stroke { stroke: var(--border); }
.stroke-fg     { stroke: var(--fg); }
.stroke-bg     { stroke: var(--bg); }
text { white-space: pre; }

/* a page reads from the right; in English, from the left */
html { direction: rtl; }
html[dir="ltr"] { direction: ltr; }

/* a page */
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: var(--weight); }
h1, h2, h3, p { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: inherit; }
svg[data-logo] { display: block; height: 3rem; width: auto; }

/* a word not answered yet shows its question */
.ask::first-letter { text-transform: uppercase; }


/* ---- the deck: a slide is 120 by 67.5rem, whatever the screen ---- */

html:has(> body.slide) { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }
.slide { height: 100vh; overflow: hidden; display: flex; flex-direction: column; position: relative; }

/* the title block: the name, then what the slide is (brand.js) */
/* it fills the first row: two lines, each half a row */
.slide > header { position: relative; padding: var(--edge) var(--half) 0; }
.slide > header > * { font-size: 2rem; line-height: calc(var(--row) / 2); }
.slide > header > .aside { position: absolute; top: var(--edge); inset-inline-end: var(--half); font-size: .875rem; color: var(--muted); }

:where(.slide > main) { flex: 1; min-height: 0; padding: 0 var(--half); }

/* the grid laid over a slide: <body data-grid> its lines, data-grid="columns" its twelve columns too; the key g
   lays both over any slide (brand.js). one tile of grid-lines.svg is a side wide and two rows tall */
.slide:is([data-grid], .grid-on)::after, .slide:is([data-grid="columns"], .grid-on)::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 120rem; height: 67.5rem; pointer-events: none; z-index: 2; background: var(--fg); }
.slide:is([data-grid], .grid-on)::after { opacity: .22;
  -webkit-mask: url(grid-lines.svg) var(--half) var(--edge) / var(--side) calc(var(--row) * 2);
  mask: url(grid-lines.svg) var(--half) var(--edge) / var(--side) calc(var(--row) * 2); }
.slide:is([data-grid="columns"], .grid-on)::before { opacity: .05;
  -webkit-mask: linear-gradient(to right, #000 50%, transparent 50%) var(--half) 0 / calc(var(--side) * 2) 100% repeat-x;
  mask: linear-gradient(to right, #000 50%, transparent 50%) var(--half) 0 / calc(var(--side) * 2) 100% repeat-x; }

/* what the chapter asks, and the test it has to pass */
.slide > footer {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--row) / 2) var(--side);
  align-content: end; margin-top: auto; padding: 0 var(--half) var(--edge);
  font-size: 1.25rem; line-height: 1.375; color: var(--muted);
}
.slide > footer > p:only-child { grid-column: span 2; }

.middle { display: grid; place-items: center; align-content: center; gap: calc(var(--row) / 4); text-align: center; }

/* the mark, alone. a mark is a whole number of rows tall: the star is four of its own triangles' rows, so at four
   rows, or eight, its triangles are the grid's */
.mark { display: flex; align-items: center; justify-content: center; }
.mark svg[data-logo] { height: calc(var(--row) * 4); }

/* every size, halving down to the smallest it is ever shown: eight rows, four, two, one, a half */
.sizes { display: flex; align-items: center; justify-content: space-evenly; }
.sizes > :nth-child(1) { height: calc(var(--row) * 8); }
.sizes > :nth-child(2) { height: calc(var(--row) * 4); }
.sizes > :nth-child(3) { height: calc(var(--row) * 2); }
.sizes > :nth-child(4) { height: var(--row); }
.sizes > :nth-child(5) { height: calc(var(--row) / 2); }

/* the mark at the sizes of a tab, a pin, a stamp: logo-small.svg, on the ground and turned over */
.small { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.small > div { display: flex; align-items: center; justify-content: center; gap: var(--side); }
.small svg:nth-child(1) { height: 4rem; }
.small svg:nth-child(2) { height: 2rem; }
.small svg:nth-child(3) { height: 1.5rem; }
.small svg:nth-child(4) { height: 1rem; }

/* the two marks side by side: the star everyone carries, the menorah that seals */
.pair { display: flex; align-items: center; justify-content: center; gap: calc(var(--side) * 3); }
.pair svg[data-logo] { height: calc(var(--row) * 5); width: auto; }

/* the seal: the menorah over the state's name in its three languages, in Ilit */
.seal { display: grid; place-items: center; align-content: center; gap: calc(var(--row) / 2); }
.seal svg[data-logo] { height: calc(var(--row) * 5); width: auto; }
.seal .names { display: flex; gap: var(--side); }

/* the offices: each beside the star, its three names after a line */
.offices { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: var(--row) var(--side); padding: 0 var(--half); }
.office { display: flex; align-items: center; gap: var(--half); }
.office svg[data-logo] { height: calc(var(--row) * 1.5); }
.office div { border-inline-start: 1px solid var(--border); padding-inline-start: var(--half); display: grid; gap: .25rem; }

/* the security and rescue bodies: each its own emblem on the grid, over its three names */
.bodies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--row) var(--side); align-content: center; padding: 0 var(--half); }
.body-mark { margin: 0; display: grid; justify-items: center; gap: calc(var(--row) / 2); text-align: center; }
.body-mark svg[data-logo] { height: calc(var(--row) * 4); width: auto; max-width: 100%; }
.body-mark figcaption { font-size: 1.25rem; line-height: 1.4; }
.body-mark .line { text-align: center; }

/* each colour, exactly, for every material */
.specs { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.specs > section { display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: var(--edge) var(--half); outline: 1px solid var(--border); outline-offset: -1px; }
.specs p:first-child { font-size: 4rem; line-height: 1.15; margin-bottom: calc(var(--row) / 2); }
.specs p { font-size: 1.5rem; line-height: 1.33; }

/* the room around the mark: the mark's own box, and the clear space at --clear of its height */
.space { display: grid; place-items: center; }
.space .clear { --h: calc(var(--row) * 4); padding: calc(var(--h) * var(--clear)); outline: 1px solid var(--border); }
.space .clear svg[data-logo] { height: var(--h); outline: 1px dashed var(--border); }

/* the palette, read off this file */
.palette { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--side); padding-top: var(--row); padding-bottom: var(--edge); }
.palette .swatch { display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; padding: var(--half); outline: 1px solid var(--border); outline-offset: -1px; }

/* the six answers */
.answers { display: grid; align-content: center; }
.answers section { display: grid; grid-template-columns: calc(var(--side) * 7) 1fr; column-gap: var(--side); border-top: 1px solid var(--border); padding: calc(var(--row) / 2) 0; }

/* the five dials, as what was decided: a column each, the pole it leans to in ink above the other, its number,
   and why it sits there. five columns land on the grid three sides wide, two between */
.personality { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--side) * 2); align-content: center; padding: 0 var(--half); }
.personality .dial { display: grid; grid-template-rows: auto auto calc(var(--row) * 2); gap: calc(var(--row) / 4); align-content: start; }
.personality .why { margin-top: calc(var(--row) / 4); font-size: 1.25rem; line-height: 1.375; color: var(--muted); }

/* the story */
.story { padding-top: calc(var(--row) / 2); padding-inline-start: calc(var(--half) + var(--side) * 8); }
.story p { font-size: 2rem; line-height: calc(var(--row) / 2); }   /* every line on a half row */

/* the specimen: every number on it is read off this file */
.specimen { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--side) * 7); column-gap: calc(var(--side) * 3); padding-top: calc(var(--row) / 2); padding-inline-end: calc(var(--half) + var(--side) * 2); }
.specimen section { display: flex; flex-direction: column; }
.specimen .note { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .5rem; }
.specimen > section:first-child .note { margin-top: calc(var(--row) / 2); max-width: calc(var(--side) * 11); }
.specimen .glyphs { margin-top: auto; padding-bottom: var(--row); line-height: 1.5; }
.specimen .scale { gap: calc(var(--row) / 2); }
.slide > footer.paragraph { color: var(--fg); border-top: 1px solid var(--border); margin: 0 var(--half); padding: calc(var(--row) / 2) 0 var(--edge); }
.slide > footer.paragraph > p { grid-column: auto; }

/* a drawing of the brand's own geometry, whole on the slide */
.figure { display: grid; place-items: center; padding: var(--edge) var(--half); }
.figure img { max-width: 100%; max-height: 100%; min-height: 0; }

/* the photographs: a contact sheet, each over its credit */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--row) / 2) var(--side); align-content: center; padding: 0 var(--half); }
.photos figure { margin: 0; display: grid; gap: calc(var(--row) / 4); }
.photos img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photos figcaption { color: var(--muted); }

/* two drawings side by side, the first the wider */
.figure.two { grid-template-columns: calc(var(--side) * 15) calc(var(--side) * 7); gap: var(--side); }

/* the equal parts the columns make: two, three, four, six and twelve, a row each, every edge on a line */
.parts { display: grid; align-content: center; gap: calc(var(--row) / 2); }
.parts > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--side); }
.parts i { height: calc(var(--row) / 2); background: var(--fg); }

/* the pattern: the star repeating every way, in the colour of wherever it lands. it is cut only along the grid —
   top and bottom along the triangles' bases, the sides through the points where they touch — so every edge is
   one the pattern drew itself. --a is a triangle's side; it is --cols sides wide and --rows rows tall, rows even */
.pattern { --a: 3rem; --cols: 10; --rows: 4; --h: calc(var(--a) * .8660254); flex: none;
           width: calc(var(--a) * var(--cols)); height: calc(var(--h) * var(--rows)); background: var(--fg);
           -webkit-mask: url(pattern.svg) calc(var(--a) / -2) calc(var(--h) * -1) / calc(var(--a) * 2) auto repeat;
           mask: url(pattern.svg) calc(var(--a) / -2) calc(var(--h) * -1) / calc(var(--a) * 2) auto repeat;
           clip-path: inset(calc(var(--h) * .06) 0); }   /* the cut runs along the bases: a hair in from it, so the row beyond never shows as a line */
/* the pattern as a whole slide: the grid itself, at its own side, all fifteen rows and the slide's whole width */
.pattern.field { --a: var(--side); --cols: 24; --rows: 15; -webkit-mask-position: 0 calc(var(--h) * -1); mask-position: 0 calc(var(--h) * -1); }   /* its points on the grid's */
.figure:has(> .pattern.field) { padding: var(--edge) 0; place-items: start center; }

/* the name beside the mark, in both its languages */
.lockup { display: flex; align-items: center; justify-content: center; gap: var(--side); }
.lockup svg[data-logo] { height: calc(var(--row) * 4); }
.lockup div { display: grid; gap: .5rem; border-inline-start: 1px solid var(--border); padding-inline-start: var(--side); }

/* the pictograms: one triangle, one grid, a solid shape each, in the colour of wherever they land. edges run
   level, at sixty and at a hundred and twenty degrees, and upright only through the points where triangles touch */
.icons-set { display: grid; grid-template-rows: 1fr auto; padding: 0; }
.icons { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-evenly; align-content: center; gap: var(--row) 0; padding: 0 var(--half); }
.icons.on-ink { grid-template-columns: repeat(10, auto); padding: var(--row) var(--half); }
.icon { display: block; width: calc(var(--side) * 1.5); height: calc(var(--side) * 1.5); background: var(--fg); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.on-ink .icon { width: 1.5rem; height: 1.5rem; }
.icon.home   { -webkit-mask-image: url(icons/home.svg);   mask-image: url(icons/home.svg); }
.icon.info   { -webkit-mask-image: url(icons/info.svg);   mask-image: url(icons/info.svg); }
.icon.pin    { -webkit-mask-image: url(icons/pin.svg);    mask-image: url(icons/pin.svg); }
.icon.search { -webkit-mask-image: url(icons/search.svg); mask-image: url(icons/search.svg); }
.icon.person { -webkit-mask-image: url(icons/person.svg); mask-image: url(icons/person.svg); }
.icon.heart  { -webkit-mask-image: url(icons/heart.svg);  mask-image: url(icons/heart.svg); }
.icon.drop   { -webkit-mask-image: url(icons/drop.svg);   mask-image: url(icons/drop.svg); }
.icon.arrow  { -webkit-mask-image: url(icons/arrow.svg);  mask-image: url(icons/arrow.svg); }
.icon.check  { -webkit-mask-image: url(icons/check.svg);  mask-image: url(icons/check.svg); }
.icon.doc    { -webkit-mask-image: url(icons/doc.svg);    mask-image: url(icons/doc.svg); }
.icon.vote   { -webkit-mask-image: url(icons/vote.svg);   mask-image: url(icons/vote.svg); }

/* a printed thing, drawn flat and standing on the slide, until it is photographed */
.thing { display: flex; align-items: center; justify-content: center; gap: var(--row) var(--side); flex-wrap: wrap; padding: 0 var(--half); }
.photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* a page shown whole */
.bleed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ---- the flats: every printed thing, drawn flat, at its own proportion. a .flat with an id is one print ---- */

.flat { position: relative; box-sizing: border-box; display: flex; flex-direction: column; background: var(--bg); color: var(--fg);
        outline: 1px solid var(--border); flex: none; overflow: hidden; }
.flat > .foot { margin-top: auto; }
.flat.card      { width: 34rem; height: 22rem; padding: 2.25rem; }
.flat.card.front { align-items: center; justify-content: center; }
.flat.card.front svg[data-logo] { height: 6rem; }
.flat.letter    { width: 30rem; height: 42.4rem; padding: 2.5rem; gap: 2.5rem; font-size: .875rem; line-height: 1.5; }
.flat.envelope  { width: 44rem; height: 22rem; padding: 2rem; }
.flat.poster    { width: 30rem; height: 45rem; padding: 2.5rem; }
.flat.billboard { width: 96rem; height: 32rem; padding: 4rem; flex-direction: row; align-items: flex-end; justify-content: space-between; }
.flat.billboard svg[data-logo] { height: 10rem; }
.flat.bag       { width: 28rem; height: 28rem; align-items: center; justify-content: center; gap: 1.5rem; }
.flat.bag svg[data-logo] { height: 14rem; }
.flat.shirt     { width: 24rem; height: 24rem; align-items: center; justify-content: center; gap: 1rem; }
.flat.shirt svg[data-logo] { height: 9rem; }
.flat.badge     { width: 30rem; height: 20rem; padding: 2rem; }
.flat.sign      { width: 36rem; height: 24rem; padding: 3rem; justify-content: space-between; }
.flat.sign svg[data-logo] { height: 7rem; }
.flat.sign .office { flex: 1; }
.flat.sign .office .line, .flat.sign .office p { unicode-bidi: plaintext; text-align: right; }
/* the flag: 220 by 160, white, the star in the middle */
.flat.flag      { width: 55rem; height: 40rem; align-items: center; justify-content: center; }
.flat.flag svg[data-logo] { height: 18rem; }
/* the passport: 88 by 125, the mark on the cover and the pattern along its foot */
.flat.passport  { width: 26.4rem; height: 37.5rem; padding: 5rem 2.5rem 0; align-items: center; gap: 1rem; text-align: center; }
.flat.passport svg[data-logo] { height: 9.5rem; margin-bottom: 1.5rem; }
.flat.passport .pattern { --a: calc(26.4rem / 9); --cols: 9; --rows: 4; margin: auto -2.5rem 0; }
.flat.poster .pattern { --a: 3rem; --cols: 10; --rows: 8; margin: -2.5rem -2.5rem 2.5rem; }
/* on a screen: the app on a home screen, the profile in a feed, the tab in a browser */
.flat.app       { width: 18rem; height: 18rem; border-radius: 22.37%; align-items: center; justify-content: center; }
.flat.app svg[data-logo] { height: 9rem; }
.flat.avatar    { width: 18rem; height: 18rem; border-radius: 50%; align-items: center; justify-content: center; }
.flat.avatar svg[data-logo] { height: 8rem; }
.flat.tab       { width: 30rem; height: 4.5rem; padding: 0 1.5rem; flex-direction: row; align-items: center; gap: .75rem; border-radius: 1rem 1rem 0 0; }
.flat.tab svg[data-logo] { height: 1rem; }
.flat .top { display: flex; justify-content: space-between; align-items: flex-start; }


/* ---- the documents: the identity card (ID-1) and the passport's pages, drawn at their proportion ---- */

/* the security ground: the flag's stripes in fine lines, one direction, two, or all three, in a tint of the ink */
.security { position: absolute; inset: 0; background: color-mix(in srgb, var(--fg) 18%, var(--bg));
            -webkit-mask: url(lines-0.svg) 0 0 / 5rem auto, url(lines-60.svg) 0 0 / 5rem auto, url(lines-120.svg) 0 0 / 5rem auto;
            mask: url(lines-0.svg) 0 0 / 5rem auto, url(lines-60.svg) 0 0 / 5rem auto, url(lines-120.svg) 0 0 / 5rem auto; }
.security.one { -webkit-mask: url(lines-0.svg) 0 0 / 5rem auto; mask: url(lines-0.svg) 0 0 / 5rem auto; }
.security.two { -webkit-mask: url(lines-0.svg) 0 0 / 5rem auto, url(lines-60.svg) 0 0 / 5rem auto;
                mask: url(lines-0.svg) 0 0 / 5rem auto, url(lines-60.svg) 0 0 / 5rem auto; }
.pattern.tint { background: color-mix(in srgb, var(--fg) 18%, var(--bg)); }
.doc > * { position: relative; }
.doc > .security, .doc > .holo, .doc > .sample { position: absolute; }

.flat.id       { width: 42.8rem; height: 27rem; padding: 1.5rem 1.75rem 0; border-radius: 1.6rem; gap: 1rem; }
.flat.datapage { width: 62.5rem; height: 44rem; padding: 2rem 2.25rem 0; gap: 1.25rem; }
.flat.page     { width: 26.4rem; height: 37.5rem; padding: 1.5rem; align-items: center; }
.doc-head { display: flex; align-items: center; gap: 1rem; }
.doc-head svg[data-logo] { height: 3.25rem; }
.doc-body { display: flex; gap: 1.75rem; flex: 1; min-height: 0; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; align-content: start; flex: 1; }
.fields.three { grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.5rem; }
.field .label, .doc .label { font-size: .5rem; line-height: 1.3; color: var(--muted); }
.field .value { font-size: 1.1rem; line-height: 1.35; unicode-bidi: plaintext; text-align: right; }
/* the holder's name, in Ilit: the first two fields on the card, the fourth and fifth on the passport's page */
.id .field:nth-child(-n+2) .value, .fields.three .field:nth-child(4) .value, .fields.three .field:nth-child(5) .value { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }
.datapage .field .label { font-size: .625rem; }
.datapage .field .value { font-size: 1.25rem; }
.portrait { flex: none; width: 9rem; height: 11.6rem; display: grid; place-items: center; background: color-mix(in srgb, var(--fg) 12%, var(--bg)); }
.portrait .icon { width: 5.5rem; height: 5.5rem; }
.datapage .portrait { width: 13rem; height: 16.8rem; }
.datapage .portrait .icon { width: 8rem; height: 8rem; }
.portrait.ghost { width: 4.5rem; height: 5.8rem; opacity: .45; align-self: end; }
.portrait.ghost .icon { width: 2.75rem; height: 2.75rem; }
/* the star over the portrait's corner, as the hologram */
.holo { height: 6rem; opacity: .35; inset-inline-start: 8.15rem; top: 14.35rem; }
.datapage .holo { height: 7rem; inset-inline-start: 12.25rem; top: 19.8rem; }
.sign { border-top: 1px solid var(--border); padding-top: .25rem; width: 16rem; }
/* the machine-readable lines on their own white band, left to right */
.mrz { margin: auto -1.75rem 0; padding: .6rem 1.75rem .8rem; background: var(--bg); direction: ltr; font-family: var(--mrz); font-size: 1.15rem; line-height: 1.35; letter-spacing: .08em; white-space: pre; }
.datapage .mrz { margin-inline: -2.25rem; padding: .9rem 2.25rem 1.1rem; font-size: 1.45rem; letter-spacing: .11em; }
/* what every sample says across it */
.sample { inset: 0; display: grid; place-items: center; font-size: 2.5rem; color: color-mix(in srgb, var(--fg) 14%, var(--bg)); pointer-events: none; }   /* a watermark, in a solid tint of the ink */
/* a passport page: what it is for, its ground, its number */
.flat.page .pattern { --a: calc(26.4rem / 9); --cols: 9; --rows: 14; position: absolute; top: 0; }
.pages { gap: var(--half); }
.flat.id .pattern { --a: calc(42.8rem / 16); --cols: 16; --rows: 4; margin: auto -1.75rem 0; }
.flat.id .pattern + .mrz { margin-top: 0; }
.folio { margin-top: auto; font-family: var(--serif); font-size: 1.5rem; }


/* ---- the elections: what the committee seals, and what the street says to invite everyone in ---- */

/* a line in another script keeps its own direction: its full stop lands at its end */
.line, .call p { display: block; unicode-bidi: plaintext; text-align: right; }
.ballot .line, .vote-envelope .line, .sticker .line, .middle .call p { text-align: center; }
.middle .call { display: grid; gap: .25em; }
.flat svg[data-logo] { flex: none; }
.flat.ballot    { width: 14rem; height: 19rem; padding: 2rem 1.5rem; align-items: center; justify-content: center; gap: 1.25rem; text-align: center; }
.flat.ballot .letters { font-size: 6rem; line-height: 1; }
.flat.vote-envelope { width: 30rem; height: 21rem; padding: 2rem; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.flat.vote-envelope svg[data-logo] { height: 5rem; margin-bottom: .5rem; }
.flat.sticker   { width: 17rem; height: 17rem; border-radius: 50%; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.flat.sticker svg[data-logo] { height: 6rem; }
.flat.sign .station { font-size: 10rem; line-height: .9; }
.flat.sign .icon { width: 6rem; height: 6rem; }
.flat.door      { width: 36rem; height: 24rem; padding: 3rem; justify-content: space-between; }
.flat .row-end  { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
/* everyone's vote: one triangle in full, the three stars it holds, the field — cut on the grid, edge to edge */
.flat .votes    { display: block; width: auto; flex: none; }
.flat.billboard .votes { position: absolute; inset-block: 0; inset-inline-end: 0; height: 100%; }
.flat.billboard .call  { display: grid; gap: .75rem; max-width: 48rem; }
.flat.poster .votes    { width: calc(100% + 5rem); margin: -2.5rem -2.5rem 2rem; }
.flat.poster .call     { display: grid; gap: .5rem; }


/* ---- the digital shekel: hexagon faces from coins/, inlined, their words set in the brand's face ---- */

.coins { display: flex; align-items: center; justify-content: center; gap: var(--half); padding: 0 var(--half); }
.coin { margin: 0; flex: none; }
.coin svg { display: block; height: 100%; width: auto; }
/* a coin is a whole number of rows tall */
.coin.close { height: calc(var(--row) * 9); }
.coin.star { height: calc(var(--row) * 12); }   /* the star four of its triangles' rows: at twelve, each triangle is three of the grid's */
/* one coin, its two sides beside each other, each over what it is */
.sides { display: flex; align-items: center; justify-content: center; gap: calc(var(--side) * 2); padding: 0 var(--half); }
.side { margin: 0; display: grid; justify-items: center; gap: calc(var(--row) / 2); text-align: center; }
.side figcaption { display: grid; gap: .25rem; max-width: calc(var(--side) * 8); font-size: 1.25rem; line-height: 1.375; }
.coin text { font-family: var(--serif); font-weight: var(--serif-weight); fill: var(--fg); text-anchor: middle; }   /* a coin speaks for the record: Ilit */
.coin .coin-num { font-size: 18px; }
.coin .coin-name { font-size: 3.4px; }
.coin .coin-year { font-size: 3px; letter-spacing: .1px; }


/* ---- the founders and the mirror: pictures drawn in the grid's triangles (triangles.js, mirror.js) ---- */

.founders { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--side); align-content: center; padding: 0 var(--half); }
.founders figure { margin: 0; display: grid; gap: calc(var(--row) / 4); }
.founders canvas { display: block; width: 100%; aspect-ratio: 3 / 4; }
.founders figcaption { font-size: 1.25rem; line-height: 1.3; }
.mirror { height: 100vh; overflow: hidden; }
.mirror canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.mirror-bar { position: fixed; inset-inline: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; }
.mirror-bar input { accent-color: var(--fg); }


/* ---- photographs in use: the picture large, the words beside it on blue or white, the credit under ---- */

.uses { display: flex; flex-wrap: wrap; align-items: flex-end; align-content: center; justify-content: center; gap: var(--row) var(--side); padding: 0 var(--half); }
.use { display: grid; gap: calc(var(--row) / 4); }
.use > .caption { color: var(--muted); }
.flat img[data-place], .flat canvas[data-person] { display: block; width: 100%; height: 100%; object-fit: cover; min-width: 0; min-height: 0; }
.flat .panel { display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; }
.flat .panel svg[data-logo] { height: 3.5rem; }
.flat.board { width: 66rem; height: 24rem; flex-direction: row; outline: none; }
.flat.board img, .flat.board canvas { flex: 2; }
.flat.board .panel { flex: 1; }
.flat.board .call p { font-size: 2.25rem; line-height: 1.2; }
.flat.poster-photo { width: 24rem; height: 36rem; outline: none; }
.flat.poster-photo img, .flat.poster-photo canvas { flex: 3; }
.flat.poster-photo .panel { flex: 2; padding: 1.75rem; }
.flat.poster-photo .call p { font-size: 1.6rem; line-height: 1.2; }
.flat.web { width: 60rem; height: 36rem; padding: 0; }
.flat.web .bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.75rem; border-bottom: 1px solid var(--border); }
.flat.web .bar .office svg[data-logo] { height: 2.75rem; }
.flat.web .bar .office .h4 { font-size: .7rem; line-height: 1.3; }
.flat.web .hero { display: grid; grid-template-columns: 1fr 1.3fr; flex: 1; min-height: 0; }
.flat.web .hero .panel { gap: 1.25rem; justify-content: center; }
.flat.web .hero .call p { font-size: 2rem; line-height: 1.2; }
.flat.web .points { display: grid; gap: .7rem; }
.flat.web .points p { display: flex; align-items: center; gap: .8rem; font-size: 1rem; }
.flat.web .points .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.flat.post { width: 26rem; height: 26rem; outline: none; }
.flat.post img, .flat.post canvas { flex: 1; }
.flat.post .panel { flex: none; flex-direction: row; align-items: center; padding: 1.25rem 1.5rem; }
.flat.post .panel p { font-size: 1.5rem; }
.flat.post .panel svg[data-logo] { height: 2.5rem; }

.flat.shelter { width: 26rem; height: 40rem; outline: none; }
.flat.shelter img, .flat.shelter canvas { flex: 3; }
.flat.shelter .panel { flex: 2; }
.flat.shelter .call p { font-size: 1.75rem; line-height: 1.2; }
.flat.banner { width: 13rem; height: 38rem; outline: none; }
.flat.banner img, .flat.banner canvas { flex: 3; }
.flat.banner .panel { flex: 2; padding: 1.5rem; }
.flat.banner .call p { font-size: 1.25rem; line-height: 1.25; }
.flat.page-ad { width: 32rem; height: 44rem; padding: 0; }
.flat.page-ad img, .flat.page-ad canvas { flex: none; height: 52%; }
.flat.page-ad .panel { flex: 1; gap: 1rem; padding: 1.75rem 2rem; }
.flat.page-ad .call p { font-size: 2.25rem; line-height: 1.15; }
.flat.page-ad .story-lines p { font-size: .95rem; line-height: 1.45; }
.flat.page-ad .foot { display: flex; align-items: center; justify-content: space-between; }
.flat.phone { width: 20rem; height: 41rem; padding: 0; border-radius: 2.5rem; outline-width: .6rem; outline-color: var(--fg); }
.flat.phone img, .flat.phone canvas { flex: none; height: 42%; }
.flat.phone .panel { flex: 1; gap: 1.25rem; padding: 1.5rem; justify-content: flex-start; }
.flat.phone .call p { font-size: 1.5rem; line-height: 1.2; }
.flat.phone .points { display: grid; gap: .75rem; }
.flat.phone .points p { display: flex; align-items: center; gap: .7rem; font-size: .9rem; padding: .75rem; border: 1px solid var(--border); }
.flat.phone .points .icon { width: 1.4rem; height: 1.4rem; flex: none; }
.flat.phone .tabs { display: flex; justify-content: space-around; padding: 1rem; border-top: 1px solid var(--border); }
.flat.phone .tabs .icon { width: 1.5rem; height: 1.5rem; }

/* ---- the presentation: a ministry's slides at 16:9, each saying one thing ---- */

.screens { display: grid; grid-template-columns: repeat(3, auto); gap: calc(var(--row) / 2) var(--side); justify-content: center; align-content: center; padding: 0 var(--half); }
.flat.screen { width: 32rem; height: 18rem; padding: 1.75rem 2rem; gap: .75rem; }
.flat.screen .office { gap: 1rem; }
.flat.screen .office svg[data-logo] { height: 3.5rem; }
.flat.screen .office .h4 { font-size: .75rem; line-height: 1.3; }
.flat.screen .h2 { font-size: 1.75rem; }
.flat.screen .pattern { --a: calc(32rem / 16); --cols: 16; --rows: 4; margin: -1.75rem -2rem 0; }
.flat.screen .points { display: grid; gap: .9rem; margin-top: auto; }
.flat.screen .points p { display: flex; align-items: center; gap: .9rem; font-size: 1.1rem; }
.flat.screen .points .icon { width: 1.75rem; height: 1.75rem; flex: none; }
.flat.screen .number { font-size: 5rem; line-height: 1; margin-top: auto; }
.flat.screen.center { align-items: center; justify-content: center; text-align: center; }
.flat.screen.center svg[data-logo] { height: 5rem; }
.flat.screen .caption { color: var(--muted); }
.flat.screen.photo-screen { padding: 0; }
.flat.screen.photo-screen figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; }
.flat.screen.photo-screen img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.flat.screen.photo-screen figcaption { padding: .5rem 1rem; font-size: .7rem; }


/* what the site and its announcement say at the top of every page: a concept, not the state */
.concept { margin: 0; padding: .6rem var(--half); background: var(--ink); color: var(--paper); font-size: .875rem; line-height: 1.4; text-align: center; }

/* ---- the site: one page on the same grid — a question, the six things asked for most, and the agent for the rest ---- */

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site > header, .site > main, .site > footer { box-sizing: border-box; width: 100%; max-width: calc(var(--side) * 12); margin-inline: auto; padding-inline: var(--half); }
.site > header { display: flex; align-items: center; justify-content: space-between; height: var(--row); }
.site .home { display: flex; align-items: center; gap: calc(var(--half) / 2); text-decoration: none; font-size: 1.25rem; }
.site .home svg[data-logo] { height: 2rem; }
.site .news { display: flex; align-items: center; gap: var(--half); padding: var(--half); text-decoration: none; font-size: 2rem; line-height: 1.2; }   /* the announcement: the first thing on the page */
.site .news svg[data-logo] { flex: none; height: calc(var(--row) * 1.5); }
.site .news span { flex: 1; }
.site .news .icon { flex: none; width: 2rem; height: 2rem; }
.site .news .icon { transform: rotate(90deg); }   /* the arrow points the way the page reads */
html[dir="rtl"] .site .news .icon { transform: rotate(-90deg); }
.site nav { display: flex; gap: var(--half); font-size: .875rem; }
.site nav a { text-decoration: none; color: var(--muted); }
.site nav a.on { color: var(--fg); }
.site > main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--row); padding-block: var(--row); align-content: start; flex: 1; }
.site h1 { font-size: 4rem; line-height: 1.15; }
.site h2 { font-size: .875rem; line-height: calc(var(--row) / 2); }
.site p { font-size: 1.25rem; line-height: 1.5; }
.site .ask { display: flex; align-items: center; height: var(--row); border-bottom: 2px solid var(--fg); margin-top: calc(var(--row) / -2); }
.site .ask input { flex: 1; min-width: 0; width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 1.5rem; }
.site .ask input::placeholder { color: var(--muted); }
.site .ask button { flex: none; width: var(--side); height: 100%; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.site .ask .icon { width: 1.75rem; height: 1.75rem; }
.site .answer { display: grid; gap: calc(var(--row) / 2); }
.site .answer[hidden] { display: none; }
/* two columns, five sides each with one between: on the grid */
.site .services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--side); }
.site .services button { display: flex; align-items: center; gap: var(--half); height: var(--row); padding: 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--fg); font: inherit; font-size: 1.25rem; text-align: start; cursor: pointer; }
.site .services button:hover { border-top-color: var(--fg); }
.site .services .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.site > footer { display: flex; align-items: center; gap: var(--half); height: calc(var(--row) * 2); border-top: 1px solid var(--border); }
.site > footer svg[data-logo] { height: 2rem; }
.site > footer p { font-size: .875rem; color: var(--muted); }
@media (max-width: 40rem) {
  .site h1 { font-size: 2.5rem; }
  .site .news { font-size: 1.5rem; }
  .site .news svg[data-logo] { height: var(--row); }
  .site .ask input { font-size: 1.125rem; }
  .site .services { grid-template-columns: 1fr; }
  .site nav { gap: calc(var(--half) / 2); }
}


/* ---- the reveal: the one page that goes out — the series for the day, a post and a story of each, your own poster,
   and the files to take home. the same grid, a page wide ---- */

.reveal { min-height: 100vh; display: flex; flex-direction: column; }
.reveal > header, .reveal > footer { box-sizing: border-box; width: 100%; max-width: calc(var(--side) * 16); margin-inline: auto; padding-inline: var(--half); }
.reveal > header { display: flex; align-items: center; justify-content: space-between; height: calc(var(--row) * 1.5); }
.reveal > header .home { display: flex; align-items: center; gap: calc(var(--half) / 2); text-decoration: none; font-size: 1.25rem; }
.reveal > header svg[data-logo] { height: 2rem; }
.campaign > .news { display: grid; gap: var(--row); max-width: calc(var(--side) * 12); padding-block: var(--row); }
.campaign > .news .line { display: block; }
.campaign > .news p .line { font-size: 1.5rem; line-height: 1.45; }
.campaign > .news p .line + .line { margin-top: calc(var(--row) / 4); }
.reveal > header .line { text-align: end; color: var(--muted); }
.reveal .mine { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--row); border-top: 1px solid var(--border); padding-top: var(--row); }
.reveal .mine .selfie { max-width: calc(var(--side) * 6); }
.reveal > footer { display: flex; align-items: center; gap: var(--half); min-height: calc(var(--row) * 2); border-top: 1px solid var(--border); margin-top: var(--row); }
.reveal > footer svg[data-logo] { height: 2rem; }
.reveal > footer .line { font-size: .875rem; color: var(--muted); }
@media (max-width: 40rem) { html:has(> body.reveal) { font-size: 12px; } .campaign > .news .h1 { font-size: 2.5rem; } }

/* a poster for the day: a place in the grid's triangles over the word, in the three languages, on the blue. it
   draws at any width: --w is the poster's width, and everything in it is a share of that */
.flat.vote-poster { width: 100%; aspect-ratio: 2 / 3; height: auto; outline: none; container-type: inline-size; }
.flat.vote-poster canvas { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; flex: none; }
.flat.vote-poster .panel { flex: 1; padding: 6cqw 7cqw 7cqw; gap: 4cqw; }
.flat.vote-poster .call p { font-size: 4.2cqw; line-height: 1.25; }
.flat.vote-poster .row-end { gap: 4cqw; }
.flat.vote-poster .say { display: grid; gap: 4cqw; }   /* the word of the day first, the brand's line under it */
.flat.vote-poster .words { display: grid; gap: .5cqw; }
.flat.vote-poster .words .line { font-size: 9cqw; line-height: 1.05; }
.flat.vote-poster .foot { display: grid; justify-items: end; gap: 3cqw; margin: 0; }
.flat.vote-poster .foot .line { font-size: 2.4cqw; line-height: 1.45; text-align: end; }
.flat.vote-poster .foot svg[data-logo] { height: 9cqw; margin-bottom: 1cqw; }
.flat.vote-poster .foot .credit { font-size: 1.6cqw; line-height: 1.4; color: var(--muted); text-align: end; unicode-bidi: plaintext; }

/* the posters side by side, each over where it can be taken home */
.posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--row) var(--half); }
.posters figure { margin: 0; display: grid; gap: calc(var(--row) / 4); }
.posters figcaption { color: var(--muted); }
.posters figcaption a { color: var(--fg); }
.slide .posters { width: calc(var(--side) * 20); }

/* a poster of your own: the camera in the triangles, the words of the day, and the buttons under it (poster.js) */
.selfie { display: grid; gap: calc(var(--row) / 2); justify-items: start; width: 100%; }
.slide .selfie { width: calc(var(--side) * 5.5); }
.selfie nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.mirror-bar button, .selfie nav button { font: inherit; font-size: 1.125rem; padding: .7rem 1.5rem; border: 1px solid var(--fg); border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer; }
.mirror-bar button.on, .selfie nav button.on { background: var(--fg); color: var(--bg); }
.selfie canvas[data-camera] { background: color-mix(in srgb, var(--fg) 8%, var(--bg)); }

/* ---- the campaign: one series over two days, a post 4 by 5 and a story 9 by 16, each the same build — the day at
   its head, one thing in the middle, the words at its foot ---- */

.campaign { box-sizing: border-box; width: 100%; display: grid; gap: calc(var(--row) * 2); max-width: calc(var(--side) * 16); margin-inline: auto; padding: var(--row) var(--half); }
.campaign > p { max-width: calc(var(--side) * 10); }
.posts .links a { color: var(--fg); }
.campaign section { display: grid; gap: var(--row); }
.posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--row) var(--half); }
.posts.stories { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* each story under its post, in the same column */
.posts > figure { margin: 0; display: grid; gap: calc(var(--row) / 4); align-content: start; container-type: inline-size; }
.posts > figure > figcaption { color: var(--muted); }
.posts > figure > figcaption .line { text-align: start; }
.posts > figure > .links { color: var(--muted); }

.flat.post-ig { width: 100%; height: auto; aspect-ratio: 4 / 5; padding: 8cqw; justify-content: space-between; gap: 5cqw; }
.flat.post-ig.tall { aspect-ratio: 9 / 16; padding: 16cqw 8cqw; }   /* the story keeps clear of the bars the app lays over it */
.flat.post-ig.ground { background: color-mix(in srgb, var(--fg) 8%, var(--bg)); outline: none; }
.flat.post-ig > .slug .line { font-size: 2.6cqw; line-height: 1.45; color: var(--muted); }
.flat.post-ig > svg[data-logo] { height: 30cqw; align-self: flex-start; }
.flat.post-ig > svg[data-logo].whole { height: 62cqw; align-self: center; margin-block: auto; }
.flat.post-ig > .icon { width: 22cqw; height: 22cqw; }
.flat.post-ig > .call, .flat.post-ig > .call p, .flat.post-ig > .call .line, .flat.post-ig > div > .call .line { font-size: 5cqw; line-height: 1.25; }
.flat.post-ig > .call, .flat.post-ig > div > .call { display: grid; gap: .25em; }
.flat.post-ig > .big .line, .flat.post-ig > div > .big .line, .flat.post-ig > .big:not(:has(.line)) { font-size: 9cqw; line-height: 1.1; }
.flat.post-ig > div > .fine .line { font-size: 3.6cqw; line-height: 1.4; }
.flat.post-ig:not(.tall) > div:has(> .fine + .fine + .fine) { gap: 3cqw; }   /* a post that says three things under its word keeps them close */
.flat.post-ig:not(.tall) > div > .fine:nth-of-type(n+2) .line { font-size: 3.1cqw; }
.flat.post-ig > div:has(> .big, > .fine) { display: grid; gap: 5cqw; }
.flat.post-ig > .pattern { --a: 10cqw; --cols: 10; --rows: 4; margin-inline: -8cqw; }
.flat.post-ig.tall > .pattern { --rows: 8; }
.flat.post-ig > .pattern:only-child { --rows: 16; margin: -8cqw; clip-path: none; }   /* the pattern alone: past every edge, the format cuts it */
.flat.post-ig.tall > .pattern:only-child { --a: calc(100cqw / 10); --rows: 22; margin: -16cqw -8cqw; }
.fit.bodies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit.sides { flex-direction: column; gap: calc(var(--row) / 2); }   /* a coin's two sides, one over the other, nothing said under them */
.fit.sides .side figcaption { display: none; }
[data-fit] > .fit:is(.sides, .coins) { transform: translate(-50%, -50%) scale(calc(var(--fit, 0) * .62)); }   /* a coin keeps room around it */
.posts.prints { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* the same faces, 2 by 3, for print */

/* a likeness: the face in stars across the whole format, the words on the blue under it — the poster's own parts */
.flat.post-ig.likeness { padding: 0; gap: 0; aspect-ratio: 4 / 5; outline: none; }
.flat.post-ig.likeness.tall { aspect-ratio: 9 / 16; }
.flat.post-ig.likeness > canvas { flex: 1; min-height: 0; height: auto; aspect-ratio: auto; }
.flat.post-ig.likeness > .panel { flex: none; padding: 7cqw 8cqw 8cqw; gap: 6cqw; }
.flat.post-ig.likeness.tall > .panel { padding-bottom: 16cqw; }
.flat.post-ig.likeness > .panel > .slug .line { font-size: 2.6cqw; line-height: 1.45; color: var(--muted); }
.flat.post-ig > .call.names p { font-size: 17cqw; line-height: 1.1; }
.flat.post-ig > .grid-field { display: block; width: calc(100% + 16cqw); margin: auto -8cqw; }
.flat.post-ig > .picture { display: block; width: calc(100% + 16cqw); height: auto; flex: 1; min-height: 0; margin: 0 -8cqw; object-fit: cover; }
.flat.post-ig > .picture:first-child { margin-top: -8cqw; }
.flat.post-ig.tall > .picture:first-child { margin-top: -16cqw; }   /* a picture that opens a post runs to its top edge */
.flat.post-ig > .picture:only-child { margin: -8cqw; width: calc(100% + 16cqw); height: calc(100% + 16cqw); }   /* a thing alone: the whole format */
.flat.post-ig.tall > .picture:only-child { margin: -16cqw -8cqw; height: calc(100% + 32cqw); }
/* each thing held in its crop: the photographs are wide, and the thing does not stand in their middle */
.picture.cap-photo  { object-position: 52% 50%; }
.picture.tee-photo  { object-position: 36% 50%; }
.picture.tote-photo { object-position: 66% 50%; }
.flat.post-ig.tall > .picture:is(.cap-photo, .tee-photo, .tote-photo) { height: auto; margin: auto -8cqw; object-fit: contain; }   /* too wide for a story: shown whole, across it */
.flat.post-ig > .credit { font-size: 2.6cqw; line-height: 1.45; text-align: end; unicode-bidi: plaintext; }
.flat.post-ig > .told { display: grid; gap: 2cqw; margin-block: auto; }
.flat.post-ig > .told p { font-size: 4.4cqw; line-height: 1.4; }

/* a slide's own drawing inside a post: drawn at its own size, scaled to the room it has (brand.js) */
.flat.post-ig > [data-fit] { position: relative; flex: 1; min-height: 0; }
[data-fit] > .fit { position: absolute; top: 50%; left: 50%; width: max-content; padding: 0; transform: translate(-50%, -50%) scale(var(--fit, 0)); }
.fit.thing:not(.pages) { flex-direction: column; flex-wrap: nowrap; }
.flat.post-ig > img.drawing { display: block; width: 100%; flex: 1; min-height: 0; object-fit: contain; }
.flat.post-ig > .flat.flag { width: 84cqw; height: 61cqw; margin: auto 0; outline: none; }
.flat.post-ig > .flat.flag svg[data-logo] { height: 28cqw; }
.flat.post-ig > div > .fine:not(:has(.line)) { font-size: 2.6cqw; line-height: 1.45; color: var(--muted); }   /* a credit, small and exact */

/* one post alone, the whole window: campaign/#feed-N or #story-N, as it is saved beside the page */
body:has(figure:target) > :not(main), main:has(figure:target) > :not(:has(figure:target)),
main:has(figure:target) section > :not(:has(figure:target)), .posts:has(> figure:target) > figure:not(:target), .posts > figure:target > :not(.flat) { display: none; }
main:has(figure:target), main:has(figure:target) section, .posts:has(> figure:target) { display: block; padding: 0; margin: 0; max-width: none; }
.posts > figure:target > .flat { width: 100vw; outline: none; }


@media (max-width: 60rem) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .posts.stories { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .posts { grid-template-columns: minmax(0, 1fr); } .posts.stories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }