/* ==========================================================================
   The way in · ieltswithmourad — Mourad Mekki
   Home, the four skill lists, For teachers, and the page that explains where an
   old address went.

   The identity is the one the lesson screen already uses (assets/lesson/lesson.css):
   deep navy #0F1D33, restrained warm gold #C9A961, pearl #FAF6EF. Beauty comes
   from typography, spacing and hierarchy. No moving backgrounds, no carousels,
   no decorative panel around every sentence.

   This file loads AFTER assets/course.css, which still dresses the small pages
   the free hand-in workflow uses (My tasks, Class marking). The first block
   below re-points that sheet's brand tokens at the navy/gold/pearl identity, so
   there is one palette on the site rather than two. Everything else here is new
   and namespaced `iwm-`.

   Constraints this file has to meet, not merely aim at:
   - 320px to 1920px with no sideways scrolling.
   - Every target a person taps is at least 44px high.
   - Focus is always visible and never removed.
   - 200% zoom reflows instead of scrolling sideways.
   - Reduced motion removes every transition.
   - Nothing carries meaning by colour alone.
   ========================================================================== */

/* ---- one palette ------------------------------------------------------- */

:root {
  --navy: #0f1d33;
  --navy-soft: #23354f;
  --gold-warm: #c9a961;          /* decorative: rules, card edges, never text */
  --gold-deep: #8a6d24;          /* the same gold, dark enough to read */
  --pearl: #faf6ef;
  --white: #fff;
  --ink: #16202e;
  --ink-soft: #4c5666;
  --rule: #ddd6c8;
  --rule-soft: #ece6da;
  --measure: 34rem;
  --tap: 44px;
  --gutter: 16px;

  /* course.css's tokens, re-pointed. Its buttons, menus and page heads keep
     working; they simply stop being burgundy. */
  --red: #0f1d33;
  --red-dark: #23354f;
  --red-soft: #eef1f6;
  --paper: #faf6ef;
  --paper-2: #f2ece0;
  --line: #ddd6c8;
  --line-2: #cabfa8;
  --gold: #8a6d24;
  --gold-ink: #6f5619;
  --gold-soft: #f5efe2;
}

body { border-top-color: var(--navy); }

/* ---- the shell --------------------------------------------------------- */

.iwm-head {
  border-bottom: 1px solid var(--rule);
  background: var(--white);
}
.iwm-head-in {
  max-width: 62rem;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.iwm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  color: var(--navy);
  text-decoration: none;
}
.iwm-brand-mark { flex: none; }
.iwm-brand-word {
  font: 700 1.25rem/1.15 Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
}
.iwm-byline {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  border-left: 1px solid var(--rule);
  padding-left: 12px;
}
.iwm-head-tail { margin-left: auto; }
.iwm-head-tail a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* 128px at the foot, not 56. The two navigation buttons are fixed in the
   bottom-right corner and stand 112px tall with their offset; this is the room
   that keeps the end of a page out from under them, so at the foot — which is
   where a teacher reaches for Back to top — nothing is covered. Measured in
   tests/site-check.js §7. */
main { max-width: 62rem; margin: 0 auto; padding: 28px var(--gutter) 128px; }

.iwm-foot {
  border-top: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.iwm-foot-in { max-width: 62rem; margin: 0 auto; padding: 18px var(--gutter) 26px; }
.iwm-foot p { margin: 0 0 4px; }
.iwm-foot a { color: var(--navy); }

/* ---- headings and text ------------------------------------------------- */

.iwm-h1 {
  font: 700 clamp(1.6rem, 3.6vw, 2.15rem)/1.2 Georgia, "Times New Roman", Times, serif;
  color: var(--navy);
  margin: 0 0 10px;
}
.iwm-lede { margin: 0 0 26px; max-width: var(--measure); color: var(--ink); font-size: 1.05rem; }
.iwm-quiet { color: var(--ink-soft); }

/* ---- Home: the four skills -------------------------------------------- */

.iwm-cards {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .iwm-cards { grid-template-columns: 1fr 1fr; } }

.iwm-card {
  display: block;
  height: 100%;
  padding: 22px 20px 20px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent, var(--navy));
  border-radius: 5px;
}
.iwm-card:hover { border-color: var(--gold-warm); background: #fffdf9; }
.iwm-card-icon { display: block; color: var(--accent, var(--navy)); margin-bottom: 10px; }
.iwm-card-name {
  font: 700 1.45rem/1.2 Georgia, "Times New Roman", Times, serif;
  color: var(--navy);
  margin: 0 0 8px;
}
.iwm-card-text { margin: 0 0 12px; font-size: 0.97rem; }
.iwm-card-count { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

.iwm-continue {
  margin: 0 0 10px;
  padding: 12px 0 0;
  border-top: 1px solid var(--rule-soft);
}
.iwm-continue a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--navy); }
.iwm-home-tail { margin: 18px 0 0; font-size: 0.95rem; }
.iwm-home-tail a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--navy); }

/* ---- a skill list ------------------------------------------------------ */

.iwm-crumb { margin: 0 0 14px; }
.iwm-crumb a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); color: var(--navy); }

/* THE SKILL ACCENT ON A SKILL LIST. One short bar above the h1, in the skill's
   own colour — the same colour as that skill's card on Home and the same
   colour as the banner at the head of one of its lessons, so the three screens
   a teacher moves through agree about where they are. The h1 underneath it
   says the skill in words, so the bar adds nothing that is only a colour; take
   it away and the page is unchanged in meaning. app.js sets --accent from the
   index's own value, so there is one list of four colours and this is not it. */
.page-head.iwm-accented::before {
  content: "";
  display: block;
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent, var(--navy));
  margin: 0 0 14px;
}

.iwm-start {
  margin: 0 0 22px;
  padding: 10px 14px;
  background: var(--white);
  border-left: 3px solid var(--gold-warm);
  font-size: 0.97rem;
}
.iwm-start a { color: var(--navy); }

.iwm-was {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  font-size: 0.95rem;
}

.iwm-list { list-style: none; margin: 0; padding: 0; counter-reset: iwm-row; }
.iwm-row {
  counter-increment: iwm-row;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 2px 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--rule-soft);
}
/* The number sits in the first column; everything the row says sits in the
   second, however many lines it takes. */
.iwm-row > * { grid-column: 2; }
.iwm-row::before {
  content: counter(iwm-row);
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  font: 600 0.95rem/1.6 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  color: var(--ink-soft);
  text-align: right;
}
.iwm-row-title { margin: 0; font: 600 1.08rem/1.35 Georgia, "Times New Roman", Times, serif; color: var(--navy); }
/* A lesson title is the row's tap target, so it gets the full 44 px. */
.iwm-row-title a { color: var(--navy); display: inline-flex; align-items: center; min-height: var(--tap); }
.iwm-row--soon .iwm-row-title, .iwm-row--blocked .iwm-row-title { min-height: var(--tap); display: flex; align-items: center; }
.iwm-row-target { margin: 2px 0 0; font-size: 0.95rem; color: var(--ink); }
.iwm-row-meta { margin: 4px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.iwm-row-meta > * + *::before { content: "·"; margin: 0 7px; }
.iwm-tag {
  display: inline-block;
  font: 600 0.72rem/1.6 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.iwm-tag--soon { color: var(--ink-soft); }
.iwm-note {
  margin: 0 0 18px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}
/* A standing fact about the whole skill — Listening's "there is no recording
   yet" — is not a footnote. It reads at full strength in the body ink, inside
   the same quiet box the moved-address line uses, because a teacher who misses
   it plans a lesson around a recording that does not exist. */
.iwm-skill-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  font-size: 0.95rem;
  color: var(--ink);
}
.iwm-row--soon .iwm-row-title, .iwm-row--blocked .iwm-row-title { color: var(--ink-soft); }
.iwm-row-note { margin: 4px 0 0; font-size: 0.9rem; color: var(--ink-soft); max-width: var(--measure); }

.iwm-further { margin: 26px 0 0; border-top: 1px solid var(--rule); padding-top: 8px; }
.iwm-further > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  cursor: pointer;
  font: 600 1.02rem/1.4 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  color: var(--navy);
}
.iwm-further > summary::marker { color: var(--gold-deep); }

/* ---- For teachers, About, and the page for an old address -------------- */

.iwm-prose { max-width: var(--measure); }
.iwm-prose h2 {
  font: 700 1.2rem/1.3 Georgia, "Times New Roman", Times, serif;
  color: var(--navy);
  margin: 28px 0 8px;
}
.iwm-prose p, .iwm-prose li { font-size: 0.99rem; }
.iwm-prose ol, .iwm-prose ul { padding-left: 1.3rem; margin: 0 0 12px; }
.iwm-prose li { margin: 0 0 6px; }
.iwm-prose a { color: var(--navy); }
.iwm-prose .iwm-act { display: inline-flex; align-items: center; min-height: var(--tap); }
/* A link that stands alone in a list is a target, not part of a sentence. */
.iwm-prose li > a:only-child { display: inline-flex; align-items: center; min-height: var(--tap); }

.iwm-stages { list-style: none; padding: 0; margin: 0 0 14px; counter-reset: iwm-stage; }
.iwm-stages li {
  counter-increment: iwm-stage;
  padding: 8px 0 8px 2.2rem;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
}
.iwm-stages li::before {
  content: counter(iwm-stage);
  position: absolute;
  left: 0;
  top: 8px;
  width: 1.55rem;
  text-align: center;
  font: 600 0.9rem/1.6 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  color: var(--white);
  background: var(--navy);
  border-radius: 50%;
}
.iwm-stage-name { font-weight: 600; color: var(--navy); }

/* ---- the opening ------------------------------------------------------- */
/* The cinematic entrance the owner asked for, against brief §8's "no splash
   screens". The conditions it has to meet are listed on the markup in
   index.html; these are the ones this sheet is responsible for:

   · It lives in THIS sheet, which the page already fetches, so the opening adds
     no stylesheet, no image and no request of any kind. The curtain is this
     file plus one inline SVG.
   · `pointer-events: none` on the curtain and `auto` on Skip alone. The home
     page underneath is clickable the whole time this is on screen, so it is a
     curtain and never a gate.
   · EVERY DECLARATION HERE IS THE FINISHED FRAME. The movement is added only
     under [data-state="play"], which is why reduced motion needs no second
     design: the global rule at the foot of this file switches the animations
     off and what is left is the frame the opening settles on.
   · The finished branding stays visible before the curtain lifts at 3640ms.
     The 360ms fade finishes at 4000ms, when the script removes the curtain.
   · Nothing here is announced — the stage is aria-hidden in the markup — and
     the four skill pips repeat a colour that is also written out in words. */

.iwm-entrance {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px var(--gutter);
  background: var(--navy);
  pointer-events: none;
}
/* display:grid would otherwise beat the browser's own rule for [hidden]. */
.iwm-entrance[hidden] { display: none; }

.iwm-entrance-stage { text-align: center; max-width: 32rem; }

.iwm-entrance-mark { display: block; margin: 0 auto 16px; }
/* The dash is the length of one hump, near enough to draw it cleanly. */
.iwm-entrance-m path { stroke-dasharray: 62; stroke-dashoffset: 0; }
.iwm-entrance-dot { transform-box: fill-box; transform-origin: 50% 50%; }

.iwm-entrance-title {
  margin: 0;
  font: 700 clamp(1.5rem, 5.4vw, 2.5rem)/1.15 Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.01em;
  color: var(--pearl);
}
.iwm-entrance-rule {
  display: block;
  width: min(19rem, 68vw);
  height: 1px;
  margin: 18px auto 15px;
  background: var(--gold-warm);
  transform: scaleX(1);
}
.iwm-entrance-by {
  margin: 0 0 24px;
  font: 400 0.9rem/1.4 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #cdbfa4;                 /* pearl, quietened: still 9:1 on the navy */
}

.iwm-entrance-skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.iwm-entrance-skills li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 0.95rem/1.5 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  color: var(--pearl);
}
.iwm-entrance-pip {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--pip);
}
/* The four skill accents (assets/content/index.js), lifted to read on navy. The
   name beside each one says the same thing in words. */
.iwm-entrance-skills li[data-skill="listening"] { --pip: #5fb3c4; }
.iwm-entrance-skills li[data-skill="reading"]   { --pip: #9095c8; }
.iwm-entrance-skills li[data-skill="writing"]   { --pip: #c9a961; }
.iwm-entrance-skills li[data-skill="speaking"]  { --pip: #c08e96; }

.iwm-entrance-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  pointer-events: auto;
  min-height: var(--tap);
  min-width: 96px;
  padding: 0 18px;
  /* Its own navy, not the curtain's: as the curtain lifts over the pearl page
     underneath, a transparent Skip would fade towards white-on-white in the
     last 300ms. This keeps it readable for every frame it exists. */
  background: var(--navy);
  color: var(--pearl);
  border: 1px solid #5d6b80;
  border-radius: 4px;
  font: 600 0.95rem/1 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  cursor: pointer;
}
.iwm-entrance-skip:hover { border-color: var(--gold-warm); }
.iwm-entrance-skip:focus { outline: 3px solid var(--gold-warm); outline-offset: 2px; }

/* ---- and the movement, only when it is playing ------------------------- */

@keyframes iwm-e-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes iwm-e-draw  { from { stroke-dashoffset: 62; }                  to { stroke-dashoffset: 0; } }
@keyframes iwm-e-dot   { from { opacity: 0; transform: scale(0.2); }      to { opacity: 1; transform: none; } }
@keyframes iwm-e-rule  { from { transform: scaleX(0); }                   to { transform: scaleX(1); } }
@keyframes iwm-e-lift  { from { opacity: 1; }                             to { opacity: 0; } }

.iwm-entrance[data-state="play"] { animation: iwm-e-lift 360ms 3640ms ease-in both; }
.iwm-entrance[data-state="play"] .iwm-entrance-mark { animation: iwm-e-rise 380ms 0ms cubic-bezier(.2,.7,.3,1) both; }
.iwm-entrance[data-state="play"] .iwm-entrance-m path { animation: iwm-e-draw 460ms 60ms ease-out both; }
.iwm-entrance[data-state="play"] .iwm-entrance-dot { animation: iwm-e-dot 220ms 440ms cubic-bezier(.2,.7,.3,1) both; }
.iwm-entrance[data-state="play"] .iwm-entrance-title { animation: iwm-e-rise 440ms 120ms cubic-bezier(.2,.7,.3,1) both; }
.iwm-entrance[data-state="play"] .iwm-entrance-rule { animation: iwm-e-rule 460ms 300ms cubic-bezier(.3,.8,.3,1) both; }
.iwm-entrance[data-state="play"] .iwm-entrance-by { animation: iwm-e-rise 320ms 380ms ease-out both; }
.iwm-entrance[data-state="play"] .iwm-entrance-skills li { animation: iwm-e-rise 300ms ease-out both; }
.iwm-entrance[data-state="play"] .iwm-entrance-skills li:nth-child(1) { animation-delay: 540ms; }
.iwm-entrance[data-state="play"] .iwm-entrance-skills li:nth-child(2) { animation-delay: 610ms; }
.iwm-entrance[data-state="play"] .iwm-entrance-skills li:nth-child(3) { animation-delay: 680ms; }
.iwm-entrance[data-state="play"] .iwm-entrance-skills li:nth-child(4) { animation-delay: 750ms; }

/* The reduced-motion state the script sets. It says the same thing as the
   global rule below, on the element itself, so the still frame does not depend
   on one media query being read correctly. */
.iwm-entrance[data-state="still"],
.iwm-entrance[data-state="still"] * { animation: none !important; }

/* ---- 200% zoom, small screens, reduced motion ------------------------- */

@media (max-width: 420px) {
  .iwm-byline { border-left: 0; padding-left: 0; flex-basis: 100%; }
  .iwm-head-tail { margin-left: 0; }
  .iwm-row { grid-template-columns: 1.7rem 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  .iwm-head, .iwm-foot, .iwm-crumb, .iwm-entrance, .iwm-pagenav { display: none; }
  .page-head.iwm-accented::before { display: none; }
  main { padding: 0; }
}

/* ---- the two navigation buttons ---------------------------------------
   Home and Back to top, the same group the lesson page carries and the same
   conditions (the long note is in lesson.html). What this sheet is answerable
   for:

   · ONE group of two, sized by its own labels. It is not a bar and it is not a
     second navigation: Home and the skill lists already lead where they lead,
     and this is only a way back when a long page has been scrolled.
   · 44px each, a visible gold focus ring, both opaque with a border.
   · From 1200px up the group stands entirely in the page's own right margin —
     the column is 62rem and centred, which leaves 187px of margin at 1366px
     against a group about 130px wide — so there it cannot overlap the reading
     column. Below that the page reserves 128px at its foot instead (see
     `main`), which keeps the END of the page clear of it.
   · Off the printed page, and absent on Home: app.js decides the second.
   · Reduced motion is app.js's decision at the moment of the click, because
     scrollTo's own `behavior: 'smooth'` outranks the scroll-behavior the
     reduced-motion block above declares. */

.iwm-pagenav {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.iwm-pagenav[hidden] { display: none; }
.iwm-pagenav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 10px 16px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 29, 51, 0.2);
}
.iwm-pagenav-btn[hidden] { display: none; }
.iwm-pagenav-btn:hover { background: var(--pearl); }
.iwm-pagenav-btn:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.iwm-pagenav-btn:focus { outline-color: var(--gold-deep); }
.iwm-pagenav-ic { display: inline-flex; flex: none; }
/* NOT ON PAPER. The @media print block higher up names .iwm-pagenav too, but
   `display: flex` above is declared later at equal specificity and won, so the
   group printed. It is restated here, after the rules it has to beat. */
@media print { .iwm-pagenav { display: none !important; } }

/* On a phone the page has no margin to stand it in, so the group is made as
   small as it can be and still say what it is: the same two words, one step
   down in size, in the bottom corner. The 128px reserved at the foot of the
   page is what keeps the END of the page — where Back to top is actually
   reached for — clear of it. */
@media (max-width: 40rem) {
  .iwm-pagenav { right: 12px; bottom: 12px; gap: 6px; }
  .iwm-pagenav-btn { padding: 10px 13px; font-size: 0.88rem; }
}


/* ---- ornament ----------------------------------------------------------
   DECORATION, AND NOTHING ELSE. Every rule in this block paints a CSS
   background. None of it is an element, none of it is announced, none of it is
   ever the only thing that says something, and no teaching content may live in
   any of it: a passage, a label, a figure, a rule or an answer is live text in
   the lesson model, never a picture of itself. Take the whole block away and
   the site still says exactly what it said.

   WHY DATA URIs AND NOT FILES. The drawings are also real files, in
   assets/img/ornament/, which is where they are edited. The CSS carries them
   inline so the site fetches nothing to look finished: no request, so no
   request can fail, and nobody on a slow school connection waits for
   decoration. tests/visual-check.js re-encodes each file and proves the strings
   below still say exactly what those files draw, so the two cannot drift.

   THE THREE --iwm-art-* HOOKS are where a generated picture goes, if one is
   ever made (IMAGE-PROMPTS.md names the file and the prompt for each). They are
   `none` today, which is a valid background layer that paints nothing, so the
   drawn ornament below stands on its own, and a picture that does not exist
   cannot show as a broken image.
   ------------------------------------------------------------------------- */

:root {
  /* the drawings, from assets/img/ornament/ */
  --iwm-orn-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e5dccb'%3E%3Ccircle cx='0' cy='0' r='0.9'/%3E%3Ccircle cx='24' cy='0' r='0.9'/%3E%3Ccircle cx='0' cy='24' r='0.9'/%3E%3Ccircle cx='24' cy='24' r='0.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='0.65' fill='%23ebe3d5'/%3E%3C/svg%3E");
  --iwm-orn-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='48' viewBox='0 0 168 48'%3E%3Cg fill='%23e5dccb'%3E%3Ccircle cx='12' cy='0' r='0.9'/%3E%3Ccircle cx='36' cy='0' r='0.9'/%3E%3Ccircle cx='60' cy='0' r='0.9'/%3E%3Ccircle cx='84' cy='0' r='0.9'/%3E%3Ccircle cx='108' cy='0' r='0.9'/%3E%3Ccircle cx='132' cy='0' r='0.9'/%3E%3Ccircle cx='156' cy='0' r='0.9'/%3E%3Ccircle cx='12' cy='48' r='0.9'/%3E%3Ccircle cx='36' cy='48' r='0.9'/%3E%3Ccircle cx='60' cy='48' r='0.9'/%3E%3Ccircle cx='84' cy='48' r='0.9'/%3E%3Ccircle cx='108' cy='48' r='0.9'/%3E%3Ccircle cx='132' cy='48' r='0.9'/%3E%3Ccircle cx='156' cy='48' r='0.9'/%3E%3C/g%3E%3Cg fill='%23ebe3d5'%3E%3Ccircle cx='24' cy='24' r='0.65'/%3E%3Ccircle cx='48' cy='24' r='0.65'/%3E%3Ccircle cx='72' cy='24' r='0.65'/%3E%3Ccircle cx='96' cy='24' r='0.65'/%3E%3Ccircle cx='120' cy='24' r='0.65'/%3E%3Ccircle cx='144' cy='24' r='0.65'/%3E%3C/g%3E%3C/svg%3E");
  --iwm-orn-weave-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%231d2f4b'%3E%3Ccircle cx='0' cy='0' r='0.9'/%3E%3Ccircle cx='24' cy='0' r='0.9'/%3E%3Ccircle cx='0' cy='24' r='0.9'/%3E%3Ccircle cx='24' cy='24' r='0.9'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='0.65' fill='%231a2a43'/%3E%3C/svg%3E");
  --iwm-orn-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'%3E%3Cg fill='none' stroke='%23cdb782' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M2 7h64'/%3E%3Cpath d='M94 7h64'/%3E%3C/g%3E%3Cpath d='M80 2.6 84.6 7 80 11.4 75.4 7z' fill='%23c9a961'/%3E%3C/svg%3E");
  --iwm-orn-listening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23cdb782' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M25 21.3A14 14 0 0 1 25 42.7'/%3E%3Cpath d='M30.1 15.1A22 22 0 0 1 30.1 48.9'/%3E%3Cpath d='M35.3 9A30 30 0 0 1 35.3 55'/%3E%3C/g%3E%3Ccircle cx='16' cy='32' r='1.6' fill='%23c9a961'/%3E%3C/svg%3E");
  --iwm-orn-reading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23cdb782' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 13h30v38H17z'/%3E%3Cpath d='M23 23h18M23 30h18M23 37h18M23 44h10'/%3E%3C/g%3E%3Ccircle cx='47' cy='51' r='1.6' fill='%23c9a961'/%3E%3C/svg%3E");
  --iwm-orn-writing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23cdb782' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 14 20 38l-3 9 9-3 24-24z'/%3E%3Cpath d='M38 20l6 6'/%3E%3Cpath d='M15 54h34'/%3E%3C/g%3E%3Ccircle cx='53' cy='54' r='1.6' fill='%23c9a961'/%3E%3C/svg%3E");
  --iwm-orn-speaking: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23cdb782' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 14h24v16H21l-6 6v-6h-4z'/%3E%3Cpath d='M29 34h24v16h-4v6l-6-6H29z'/%3E%3C/g%3E%3Ccircle cx='17' cy='22' r='1.6' fill='%23c9a961'/%3E%3C/svg%3E");

  /* the colour the pearl band sits on: one step warmer than the page, so the
     band reads as a surface rather than as a box with a border */
  --iwm-band: #f5f0e5;

  /* where a generated picture may be dropped in later. none = nothing.

     All three are ON now, all three generated for this site.

     The entrance backdrop is dark by design, because the curtain lays pearl
     text across it. HOW it is painted is a legibility rule and not a taste one
     - see the note on .iwm-entrance::before, and the figures in
     assets/img/ornament/README.md.

     The teachers ornament carries alpha and fades out at its foot, which is
     what lets it sit on the page rather than in a box. It is painted 180px wide
     at the far right of a 992px main, and the prose stops 252px short of it. */
  --iwm-art-home-hero: url("img/ornament/background-paper.webp");
  --iwm-art-teachers: url("img/ornament/teachers-texture.webp");
  --iwm-art-entrance: url("img/ornament/entrance-backdrop.webp");

  /* THE FOUR GENERATED SKILL MOTIFS. These four lines only name the files; what
     uses them is the block marked THE GENERATED CARD MOTIFS further down, which
     puts each one where that card's drawn glyph stands. To return the site to
     its drawings, delete THAT block — not these lines, which on their own would
     leave a card with an empty space where its glyph was. Both drawings, the
     glyph and the corner hairline, stay in this file inline either way, so the
     site still needs no image file to look finished. */
  --iwm-art-skill-listening: url("img/ornament/skill-listening.webp");
  --iwm-art-skill-reading: url("img/ornament/skill-reading.webp");
  --iwm-art-skill-writing: url("img/ornament/skill-writing.webp");
  --iwm-art-skill-speaking: url("img/ornament/skill-speaking.webp");
}

/* HOME · a pearl band behind the four cards. The cards are opaque, so the
   texture is only ever seen in the gutters between them and in the band's own
   padding — never under a word. The gold rule from the opening stands still at
   the foot of the band, inside the bottom padding, below the last card. */
body[data-view="home"] .iwm-cards {
  padding: 20px 18px 22px;
  border-radius: 6px;
  background-color: var(--iwm-band);
  /* THE PAPER IS A TILE, NOT A BAND. background-paper.webp is a seamless 512px
     square of laid paper, so it repeats at its own size instead of being
     stretched to cover: a texture scaled up loses the grain that is the whole
     reason for it. The drawn pearl weave is not painted underneath - the hero
     replaces the texture rather than joining it, because the two on top of each
     other read as muddy. To go back to the drawing, put --iwm-art-home-hero
     back to `none` and `var(--iwm-orn-weave)` back on the end of these lines. */
  background-image: var(--iwm-orn-flourish), var(--iwm-art-home-hero);
  background-position: center bottom 4px, 0 0;
  background-size: 160px 14px, 512px 512px;
  background-repeat: no-repeat, repeat;
}

/* One gold hairline motif per skill, in the card's top right corner. The
   skill's own accent icon is at the top left and its name is in words beneath
   it; this adds nothing to either, and it is the same gold on all four, so
   nothing here is told by colour. 46px in the corner, clear of the name at
   every width from 320px up. */
body[data-view="home"] .iwm-card {
  background-repeat: no-repeat;
  background-position: right 12px top 10px;
  background-size: 46px 46px;
}
body[data-view="home"] .iwm-card[href$="/listening"] { background-image: var(--iwm-orn-listening); }
body[data-view="home"] .iwm-card[href$="/reading"]   { background-image: var(--iwm-orn-reading); }
body[data-view="home"] .iwm-card[href$="/writing"]   { background-image: var(--iwm-orn-writing); }
body[data-view="home"] .iwm-card[href$="/speaking"]  { background-image: var(--iwm-orn-speaking); }
/* .iwm-card:hover uses the `background` shorthand, which would blank the motif.
   The hover colour is restated on its own property, so the card keeps its
   warmth and the motif keeps its place. */
body[data-view="home"] .iwm-card:hover { background-color: #fffdf9; }

/* ---- THE GENERATED CARD MOTIFS ------------------------------------------
   Mourad's four illustrations, one per skill, standing where the card's drawn
   accent glyph stands — above the name, at the top left — and nothing in the
   corner. One picture per card rather than two: the glyph and the illustration
   were saying the same thing twice, a book beside a book on Reading.

   The glyph is not removed from the page, only put away: `.iwm-card-icon` is
   still the same span, still aria-hidden, still carrying the skill's accent
   colour, and on paper below it comes back and the illustration goes, so a
   printed card keeps a vector and spends no ink on a picture.

   DELETE THIS WHOLE BLOCK and every card is exactly what it was: the accent
   glyph at top left in the skill's own colour, the gold hairline in the corner.
   Nothing else to change — both drawings are above, in this file, inline.
   ---------------------------------------------------------------------- */
/* The corner has to be blanked at the weight the rules above carry, not at the
   card's: `[href$="/reading"]` outruns a plain `.iwm-card`, so a shorter
   selector here would lose and both pictures would show. */
body[data-view="home"] .iwm-card[href$="/listening"],
body[data-view="home"] .iwm-card[href$="/reading"],
body[data-view="home"] .iwm-card[href$="/writing"],
body[data-view="home"] .iwm-card[href$="/speaking"] { background-image: none; }
body[data-view="home"] .iwm-card-icon > svg { display: none; }
body[data-view="home"] .iwm-card-icon {
  width: 46px;
  height: 46px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 46px 46px;
}
body[data-view="home"] .iwm-card[href$="/listening"] .iwm-card-icon { background-image: var(--iwm-art-skill-listening); }
body[data-view="home"] .iwm-card[href$="/reading"]   .iwm-card-icon { background-image: var(--iwm-art-skill-reading); }
body[data-view="home"] .iwm-card[href$="/writing"]   .iwm-card-icon { background-image: var(--iwm-art-skill-writing); }
body[data-view="home"] .iwm-card[href$="/speaking"]  .iwm-card-icon { background-image: var(--iwm-art-skill-speaking); }
@media print {
  /* and the same weight again here, for the same reason */
  body[data-view="home"] .iwm-card-icon > svg { display: block; }
  body[data-view="home"] .iwm-card[href$="/listening"] .iwm-card-icon,
  body[data-view="home"] .iwm-card[href$="/reading"] .iwm-card-icon,
  body[data-view="home"] .iwm-card[href$="/writing"] .iwm-card-icon,
  body[data-view="home"] .iwm-card[href$="/speaking"] .iwm-card-icon {
    background-image: none;
    width: auto;
    height: auto;
  }
}

/* A SKILL LIST · the same gold rule, once, at the foot of the page head and to
   the right of the lede, which is 34rem at most. Only from 48rem, where there
   is empty measure for it to sit in. */
@media (min-width: 48rem) {
  body[data-view="skill"] .page-head {
    padding-bottom: 4px;
    background-image: var(--iwm-orn-flourish);
    background-repeat: no-repeat;
    background-position: right 2px bottom 2px;
    background-size: 160px 14px;
  }
}

/* FOR TEACHERS · the pearl field down the right margin, which is empty: the
   prose is held to 34rem and this band is 168px at the far edge. Only from
   60rem, where the two cannot meet. */
@media (min-width: 60rem) {
  body[data-view="teachers"] main {
    background-image: var(--iwm-art-teachers), var(--iwm-orn-band);
    background-repeat: no-repeat, repeat-y;
    background-position: right top, right top;
    background-size: 180px auto, 168px 48px;
  }
}

/* THE OPENING · a backdrop for the curtain, standing still while the mark
   draws itself. An absolutely positioned ::before at z-index -1, so it sits
   behind the stage, outside the curtain's grid, and the curtain element itself
   still has no background image of its own. It never moves, with or without
   prefers-reduced-motion, because it has nothing to animate. */
.iwm-entrance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* THE BACKDROP IS ANCHORED TO THE TOP AND OVERSIZED, NOT `cover`, AND THAT IS
     A LEGIBILITY RULE RATHER THAN A TASTE ONE. entrance-backdrop.webp carries
     one bright thing, a gold arc at 62-66% of its own height, and the curtain
     lays pearl text down the middle. Under `cover` the two meet, and where they
     meet they measure 1.4:1 to 1.9:1 against pearl — gold on gold, unreadable.
     It passed only at an exact 16:9; at 1366x768, at 1280x600 and on a phone it
     failed, because a shorter box pushes the same fixed-size text further down
     the picture.

     `auto 135%` from the top makes the vertical mapping independent of the
     window's shape: whatever the box, a point at 64% of the FILE lands at 86% of
     the BOX, below every line of text at every size measured. The file is wider
     than the box as a result and is cropped at the sides, which costs nothing
     — the arc spans the full width and the field either side of it is even.

     A replacement backdrop whose own bright feature already sits low wants
     `cover` here again. Measure before changing it: assets/img/ornament/README.md
     says how. */
  background-image: var(--iwm-art-entrance), var(--iwm-orn-weave-navy);
  background-position: center top, 0 0;
  background-size: auto 135%, 24px 24px;
  background-repeat: no-repeat, repeat;
}
/* and one soft lift out of the centre, so the navy is not a flat wall */
.iwm-entrance::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(62% 54% at 50% 44%, rgba(201, 169, 97, 0.10), rgba(15, 29, 51, 0) 72%);
}

/* NOT ON PAPER. Home, a skill list and For teachers are screens, not sheets.
   The printed outputs belong to the lesson engine, and the one mark that
   belongs on a sheet is in assets/lesson/lesson.css. */
@media print {
  body[data-view="home"] .iwm-cards,
  body[data-view="home"] a.iwm-card[href],
  body[data-view="skill"] .page-head,
  body[data-view="teachers"] main {
    background-image: none;
    background-color: transparent;
  }
  body[data-view="home"] .iwm-cards { padding: 0; }
}

/* In a forced-colours mode the operating system chooses every colour, and a
   decorative texture in the middle of that is noise. */
@media (forced-colors: active) {
  body[data-view="home"] .iwm-cards,
  body[data-view="home"] a.iwm-card[href],
  body[data-view="skill"] .page-head,
  body[data-view="teachers"] main,
  .iwm-entrance::before,
  .iwm-entrance::after {
    background-image: none;
  }
}