/* Subject trails (/ks3/subjects and /ks3/subjects/:subject): scoped under .pg-subjects */
.pg-subjects {
  /* picker */
  .picker { padding-block: 20px 70px; }
  .picker .lede { margin: 10px 0 0; }
  .group { margin-top: 34px; }
  .group h2 { font: 400 1rem/1 var(--f-label); letter-spacing: .08em; }
  .sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 14px; }
  .scard { position: relative; display: grid; gap: 8px; text-decoration: none; color: inherit; background: #fffdf6; padding: 14px 14px 12px; border-top: 8px solid var(--c); box-shadow: 0 4px 10px rgba(40,25,5,.16); transition: transform .15s; }
  .scard:hover { transform: translateY(-4px) rotate(-.6deg); }
  .scard h3 { font: 400 1.3rem/1.1 var(--f-slab); }
  .scard .st { display: flex; gap: 2px; align-items: flex-end; }
  .scard .st img { width: 31%; max-width: 64px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
  .scard .st img:nth-child(2) { transform: rotate(5deg) translateY(-4px); } .scard .st img:nth-child(3) { transform: rotate(-4deg); }
  .scard small { font: 700 1rem/1.1 var(--f-hand); color: #7a6040; }

  /* subject header */
  .shead { padding-block: 22px 60px; color: #fff; background: var(--c) url(/img/tile_kraft.webp) 0 0/1200px auto repeat; background-blend-mode: multiply; }
  .shead .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: end; }
  .shead h1 { font: 400 clamp(2.4rem, 6.5vw, 4.6rem)/1 var(--f-slab); margin: 14px 0 10px; text-shadow: 0 4px 0 rgba(0,0,0,.2); }
  .shead .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
  /* Safari draws its own grey rounded control unless the native look is switched off, so draw our own arrow */
  .shead select { -webkit-appearance: none; appearance: none; border-radius: 0; font: 400 .95rem/1.2 var(--f-label); letter-spacing: .03em; padding: 11px 38px 10px 12px; border: 0; color: var(--ink); cursor: pointer;
    background: var(--label) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%231d2448' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 14px 9px;
    box-shadow: 0 3px 0 rgba(0,0,0,.18); }
  .shead select:focus-visible { outline: 3px dashed var(--label); outline-offset: 3px; }
  .shead .collage { position: relative; height: 210px; }
  .shead .collage .stk { position: absolute; width: 96px; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(var(--r)); transition: transform .15s; }
  .shead .collage .stk img { width: 100%; filter: drop-shadow(0 5px 5px rgba(0,0,0,.3)); }
  .shead .collage .stk:hover, .shead .collage .stk:focus-visible { transform: rotate(0deg) scale(1.12); z-index: 2; outline: none; }
  .shead .collage .stk:focus-visible img { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px #fff); }
  /* what the subject is, the story of its trail, and Ada, Rory and Fetch doing it */
  .sintro { padding-block: 34px 18px; }
  .sintro .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 34px; align-items: center; }
  .sintro h2 { font: 400 clamp(1.6rem, 3.4vw, 2.3rem)/1.08 var(--f-slab); margin: 0 0 10px; }
  .sintro h3 { font: 400 .85rem/1 var(--f-label); letter-spacing: .08em; color: var(--c); margin: 20px 0 8px; filter: brightness(.8); }
  .sintro p { margin: 0; max-width: 62ch; }
  .sintro .about { font-size: 1.12rem; }
  .sintro .scene { position: relative; margin: 0; padding: 14px; background: #fffdf6; box-shadow: 0 8px 20px rgba(40,25,5,.2); transform: rotate(1.5deg); }
  .sintro .scene .tape { top: -12px; left: 38%; }
  .sintro .scene img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
  @media (max-width: 820px) { .sintro .wrap { grid-template-columns: 1fr; } .sintro .scene { max-width: 360px; justify-self: center; } }
  .xsum { padding-block: 24px 20px; }
  .xsum .chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .xsum .chips .lbl { display: inline-flex; align-items: center; gap: 8px; font: 700 1.3rem/1 var(--f-hand); margin-right: 6px; }
  .xsum .chips .lbl .xicon { width: 34px; height: 34px; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
  .xsum a { text-decoration: none; }
  .xchip { cursor: pointer; border: 0; background: none; padding: 0; font: inherit; color: inherit; transition: transform .15s; }
  .xchip:hover, .xchip:focus-visible { transform: rotate(-2deg) scale(1.05); outline: none; }
  .xchip:focus-visible .torn { outline: 3px dashed var(--coral); }
  & dialog.xlist { border: 0; padding: 0; background: transparent; width: min(720px, calc(100vw - 24px)); max-width: none; }
  & dialog.xlist::backdrop { background: rgba(15, 20, 45, .6); }
  .xl { background: #fffdf6; border-top: 12px solid var(--hach-sky); box-shadow: 0 20px 40px rgba(0,0,0,.35); padding: 18px 20px 20px; position: relative; }
  .xl .x { position: absolute; top: 8px; right: 10px; cursor: pointer; border: 0; background: none; font: 400 1.1rem/1 var(--f-label); color: #8a6f4c; padding: 6px 8px; }
  .xl header { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; padding-right: 30px; }
  .xl header img { width: 56px; transform: rotate(-4deg); }
  .xl header span { font: 400 .78rem/1 var(--f-label); letter-spacing: .06em; color: #8a6f4c; }
  .xl header h2 { font: 400 1.5rem/1.1 var(--f-slab); margin-top: 4px; }
  .xl ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
  .xl li { background: #f6efe0; padding: 12px; display: grid; gap: 10px; }
  .xl .ends { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 8px; align-items: center; }
  .xl .end { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; }
  .xl .end img { width: 54px; height: 54px; object-fit: contain; }
  .xl .end b { display: block; font: 400 .72rem/1.2 var(--f-label); letter-spacing: .04em; color: var(--c); }
  .xl .end span { font-size: .86rem; line-height: 1.25; }
  .xl .and { text-align: center; font: 700 1.5rem/1 var(--f-hand); color: var(--coral); }
  .xl .why { margin: 0; font: 700 1.2rem/1.15 var(--f-hand); color: #7a6040; }
  .xl .acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .xl .acts button, .xl .acts a { cursor: pointer; border: 0; font: 400 .8rem/1 var(--f-label); letter-spacing: .03em; padding: 9px 12px 8px; text-decoration: none; color: #fff; background: var(--c); }
  .xl .acts .here { background: var(--navy); }
  @media (max-width: 560px) { .xl .ends { grid-template-columns: 1fr; } .xl .and { display: none; } }
  .xsum .torn { font-size: .82rem; display: inline-flex; gap: .4em; align-items: center; }

  /* trail */
  .year { padding-block: 34px 30px; }
  .yhead { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
  .yhead .torn { font-size: 1.1rem; }
  .yhead p { margin: 0; font: 700 1.3rem/1.1 var(--f-hand); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
  /* the winding trail: stops alternate sides, pins sit on the outside edge, and one path joins them */
  .trailwrap { position: relative; }
  .trailsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
  .yhead, .summit .wrap { position: relative; z-index: 2; }
  .stop { position: relative; z-index: 2; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; margin-bottom: 64px; scroll-margin-top: 20px; }
  .stop:last-child { margin-bottom: 20px; }
  .rail { position: relative; display: flex; justify-content: center; }
  /* a signpost beside the pin marks a stop that's also a crossroads */
  .rail .xbadge { position: absolute; z-index: 2; top: 2px; left: calc(50% + 22px); width: 34px; height: 34px; object-fit: contain; transform: rotate(8deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
  @media (min-width: 1000px) {
    .stop { width: min(860px, 100%); }
    .stop.r { margin-left: auto; grid-template-columns: minmax(0, 1fr) 70px; }
    .stop.r .rail { order: 2; }
    .stop.r .card .st { right: 16px; top: -36px; }
    .stop:nth-child(4n+2) .card { transform: rotate(.35deg); } .stop:nth-child(4n) .card { transform: rotate(-.3deg); }
  }
  .rail .pin { position: relative; z-index: 1; width: 68px; height: 68px; margin-top: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff;
               font: 400 1.75rem/1 var(--f-label); padding-top: .12em; box-shadow: 0 4px 0 rgba(0,0,0,.25); outline: 4px solid var(--label); }
  .rail .pin small { display: block; font-size: .5em; letter-spacing: .08em; margin-bottom: -.08em; }
  .card { position: relative; background: #fffdf6; box-shadow: 0 8px 18px rgba(20,15,5,.22); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; }
  .stop.now .card { outline: 4px solid var(--coral); }
  .stop.flash .card { animation: subjects-flash 1.4s ease-out; }
  .card .tv { padding: 16px 16px 14px; background: #efe4cf url(/img/tile_cream.webp) 0 0/1200px auto repeat; display: grid; gap: 8px; align-content: start; }
  .card .tv .cap { margin: 0; font: 700 1.1rem/1.1 var(--f-hand); color: #7a6040; }
  .card .body { padding: 18px 20px 18px; position: relative; }
  .card .st { position: absolute; right: -18px; top: -26px; width: 92px; transform: rotate(6deg); filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
  .when { font: 400 .78rem/1 var(--f-label); letter-spacing: .06em; color: var(--c); padding-right: 70px; display: block; }
  .when .nowtag { display: inline-block; margin-left: 6px; background: var(--coral); color: #fff; padding: 3px 6px 2px; }
  .card h3 { font: 400 1.35rem/1.15 var(--f-slab); margin: 8px 70px 10px 0; }
  .card .body.plain h3, .card .body.plain .when { margin-right: 0; padding-right: 0; }
  .card .tv .art { position: relative; aspect-ratio: 16 / 11; }
  /* fit inside the box whatever the sticker's shape: wide ones are limited by width, tall ones by height */
  .card .tv .art img { position: absolute; inset: 0; margin: auto; width: 68%; height: 82%; object-fit: contain; transform: rotate(-4deg); filter: drop-shadow(0 8px 8px rgba(0,0,0,.25)); }
  .stop:nth-child(odd) .card .tv .art img { transform: rotate(3deg); }
  .card h4 { font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: #8a6f4c; margin: 12px 0 6px; }
  .card ul { margin: 0; padding-left: 1.1em; font-size: .94rem; display: grid; gap: 3px; }
  .card .terms { display: flex; flex-wrap: wrap; gap: 5px; }
  .card .terms span { font-size: .78rem; padding: 3px 8px; background: #efe3cb; }
  .cross { margin-top: 14px; display: grid; gap: 8px; }
  .cross a { display: grid; grid-template-columns: 30px 50px 1fr; gap: 8px; align-items: center; text-decoration: none; color: inherit; background: #f4ecdb; padding: 6px 10px 6px 6px; }
  .cross a:hover { background: #fbe3cc; }
  .cross img { width: 50px; height: 50px; object-fit: contain; }
  .cross img.sp { width: 30px; height: 34px; }
  .cross b { display: block; font: 400 .74rem/1.2 var(--f-label); letter-spacing: .04em; color: var(--oc); }
  .cross span { display: block; font-size: .86rem; line-height: 1.3; }
  .cross em { display: block; font: 700 1rem/1.1 var(--f-hand); font-style: normal; color: #7a6040; }
  .card .dress { display: flex; align-items: flex-end; gap: 4px; margin-top: 16px; padding: 8px 14px 10px 8px; background: var(--navy); color: #fff; text-decoration: none; transform: rotate(-.6deg); box-shadow: 0 5px 12px rgba(20,20,50,.28); transition: transform .15s; }
  .card .dress:hover { transform: rotate(.4deg) translateY(-2px); }
  .card .dress img { height: 64px; width: auto; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
  .card .dress img + img { margin-left: -10px; }
  .card .dress span { margin-left: 10px; font: 400 1.05rem/1.1 var(--f-label); letter-spacing: .02em; color: var(--label); align-self: center; }
  .card .dress small { display: block; font: 700 1.05rem/1.1 var(--f-hand); color: #cfe3f2; letter-spacing: 0; margin-top: 3px; }
  .card .more { display: flex; gap: 16px; margin-top: 14px; font-size: .88rem; }
  .tba { padding: 18px 20px; font-size: .95rem; }
  .summit { text-align: center; padding-block: 50px 60px; }
  .summit .flag { width: 5px; height: 80px; background: var(--ink); margin: 0 auto; position: relative; }
  .summit .flag::after { content: "GCSE"; position: absolute; left: 5px; top: 0; background: var(--coral); color: #fff; font: 400 1rem/1 var(--f-label); padding: 10px 16px 8px 10px; clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%); }
  .summit h2 { margin-top: 16px; }
  .summit p { margin: 10px auto 0; max-width: 50ch; }
  @media (max-width: 860px) {
    .shead .wrap { grid-template-columns: 1fr; } .shead .collage { display: none; }
    .card { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .stop { grid-template-columns: 44px 1fr; gap: 6px; }
    .rail .pin { width: 46px; height: 46px; font-size: 1.2rem; }
    .card .st { width: 70px; right: -6px; }
  }
  @media (prefers-reduced-motion: reduce) { .stop.flash .card { animation: none; } }
}

@keyframes subjects-flash { 0%, 30% { box-shadow: 0 0 0 10px rgba(228,111,85,.55); } }

/* the sticker pop-up, in the same style as the dressing-up box's item cards */
.pg-subjects dialog.stkcard, dialog.stkcard { border: 0; padding: 0; background: transparent; width: min(640px, calc(100vw - 24px)); max-width: none; }
dialog.stkcard::backdrop { background: rgba(15, 20, 45, .55); }
.stkcard .sc { background: #fffdf6; border-top: 12px solid var(--c); box-shadow: 0 20px 40px rgba(0,0,0,.35); padding: 20px 22px; position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 20px; color: var(--ink); }
.stkcard .x { position: absolute; top: 8px; right: 10px; cursor: pointer; border: 0; background: none; font: 400 1.1rem/1 var(--f-label); color: #8a6f4c; padding: 6px 8px; }
.stkcard .big { width: 150px; height: 150px; object-fit: contain; transform: rotate(-5deg); filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.stkcard .era { font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: var(--c); filter: brightness(.8); }
.stkcard h2 { font: 400 1.5rem/1.1 var(--f-slab); margin: 6px 30px 10px 0; }
.stkcard h3 { font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; color: #8a6f4c; margin: 12px 0 4px; }
.stkcard p { margin: 0; }
.stkcard .bq { margin-top: 6px; font-style: italic; }
.stkcard .fetch { margin-top: 14px; background: color-mix(in srgb, var(--c) 12%, #fffdf6); border-left: 6px solid var(--c); padding: 10px 12px; }
.stkcard .fetch b { display: block; font: 400 .74rem/1 var(--f-label); letter-spacing: .08em; margin-bottom: 4px; }
.stkcard .fetch .q { font-weight: 600; display: block; }
.stkcard .fetch .reveal { cursor: pointer; border: 0; font: 700 1.1rem/1 var(--f-hand); background: none; padding: 6px 0 0; color: var(--ink); }
.stkcard .fetch .a { font: 700 1.3rem/1.2 var(--f-hand); margin-top: 6px; }
.stkcard .acts { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.stkcard .acts .go, .stkcard .acts .map { cursor: pointer; border: 0; font: 400 .85rem/1 var(--f-label); letter-spacing: .03em; padding: 11px 14px 10px; text-decoration: none; }
.stkcard .acts .go { background: var(--navy); color: #fff; }
.stkcard .acts .map { background: #efe3cb; color: var(--ink); }
@media (max-width: 600px) { .stkcard .sc { grid-template-columns: 1fr; } .stkcard .big { width: 110px; height: 110px; } }

/* "The year ahead…" at the start of each year on the trail */
.pg-subjects {
  .ahead { position: relative; z-index: 2; margin: 34px 0 56px; padding: 30px 28px 24px; background: #fffdf6 url(/img/tile_cream.webp) center/500px;
           box-shadow: 0 10px 24px rgba(40,25,5,.22); border-top: 10px solid var(--c); }
  .ahead .tag { position: absolute; top: -20px; left: 22px; font-size: 1.05rem; --torn-bg: var(--navy); color: var(--label); transform: rotate(-2deg); }
  .ahead .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
  .ahead h3 { font: 400 .8rem/1.2 var(--f-label); letter-spacing: .07em; color: #8a6f4c; margin: 0 0 8px; }
  .ahead .learn p { margin: 0 0 18px; }
  .ahead .themes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .ahead .themes li { font-size: .88rem; font-weight: 600; background: #efe3cb; padding: 4px 10px; border-left: 4px solid var(--c); }
  .ahead .ends { background: #f6ecd4; padding: 16px 18px; transform: rotate(.4deg); }
  .ahead .ends ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
  .ahead .ends li { font-size: .95rem; }
  .ahead .ends li::marker { color: var(--c); }
  @media (max-width: 760px) { .ahead { padding: 28px 18px 20px; } .ahead .cols { grid-template-columns: 1fr; gap: 18px; } }
}

/* a stop's link to its knowledge organiser on the practice website */
.pg-subjects .card .practise { display: grid; gap: 3px; margin-top: 14px; padding: 10px 14px; background: #f6ecd4; border-left: 5px solid var(--c); text-decoration: none; color: var(--ink); }
.pg-subjects .card .practise b { font: 400 1rem/1.1 var(--f-label); letter-spacing: .02em; color: var(--navy); }
.pg-subjects .card .practise small { font-size: .82rem; color: #6b5230; }
.pg-subjects .card .practise:hover b { text-decoration: underline; }