/* learn.pimoroni.com, built on the shop's palette so the two sites read as one */
:root {
  --grey: #8a8a8a; --white: #ffffff; --black: #3d3d3d;
  --pale: #bac0ca; --faint: #f5f5f5;
  --ground: #eaebf2; --ground-light: #f6f7fa; --header-base: #17171f;

  --cyan: #00d5f2; --cyan-fill: #00b2ca; --cyan-ink: #22818e;
  --magenta: #ff2bd6; --magenta-ink: #c530a8;
  --violet: #b026ff; --green: #10c46e; --green-ink: #268056;
  --orange: #ff7a00; --orange-ink: #b16218; --yellow: #ffc300;

  --h3-size: 1.5rem; --h4-size: 1.25rem;
  --mid-shadow: 0 0 2px rgba(20, 40, 50, .05), 0 3px 6px rgba(20, 40, 50, 0.05), 0 4px 12px rgba(20, 40, 50, 0.1);
  --heavy-shadow: 0 0 4px rgba(20, 40, 50, .1), 0 4px 8px rgba(20, 40, 50, 0.1), 0 8px 16px rgba(20, 40, 50, 0.2);
  --gutter-left: max(1rem, env(safe-area-inset-left));
  --gutter-right: max(1rem, env(safe-area-inset-right));
}
* {box-sizing: border-box;}
html {font-size: 110%; scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}}
body {
  margin: 0; background-color: var(--ground); color: var(--black);
  font-family: "Roboto", system-ui, sans-serif; line-height: 1.2em;
  -webkit-font-smoothing: antialiased;
}
img {display: block; max-width: 100%;}
a {color: var(--cyan-ink);}
h1, h2, h3, h4 {line-height: 1.05em; font-weight: 900; letter-spacing: -1%;}

/* the header and footer sit on the shop's dark wash with its neon glows */
.wash {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--header-base); color: var(--white);
}
.wash::before {
  content: ""; position: absolute; inset: -15%; z-index: -1;
  background-image:
    radial-gradient(circle max(45rem, 51vw) at 22% 30%, rgba(255, 43, 214, 0.28), transparent 70%),
    radial-gradient(circle max(48rem, 55vw) at 55% 60%, rgba(122, 43, 255, 0.24), transparent 70%),
    radial-gradient(circle max(42rem, 47vw) at 80% 70%, rgba(25, 230, 255, 0.24), transparent 70%);
}
.wash a {color: var(--white);}

/* the brand strip is knocked back out of the wash, as on the shop */
.brand {
  display: flex; align-items: center; gap: 2rem;
  height: 2.5rem; padding: 0 var(--gutter-right) 0 var(--gutter-left);
  background-color: rgba(0, 0, 0, 0.28); color: var(--grey);
}
.sites {display: flex; align-items: center; gap: 1rem;}
.sites svg {display: block; height: 1rem; width: auto; margin-right: 0.25rem; fill: currentColor;}
.brand a {color: var(--white); opacity: 0.5; text-decoration: none; white-space: nowrap;}
.brand a:hover, .brand a.here {opacity: 1;}
.brand a:hover {text-decoration: underline;}
.brand a.here {font-weight: 700;}

.masthead {
  display: grid; grid-template-columns: 1fr minmax(0, 48rem) 1fr; align-items: start; column-gap: 1.5rem;
  padding: 1.25rem var(--gutter-right) 1.5rem var(--gutter-left);
}
/* the shop's wordmark, with this site's name set beside it */
.wordmark {display: block; margin-left: 0.25rem; color: var(--white); text-decoration: none;}
.wordmark svg {display: block; width: 14.55rem; height: 2.31rem; max-width: none; margin-top: -0.04rem; fill: currentColor;}

#cart_link {
  display: grid; grid-template-columns: auto auto; gap: 1rem; align-items: center; justify-self: end;
  min-height: 2.5rem; box-sizing: border-box; padding: 0.2rem 1.25rem;
  border: solid 2px transparent; border-radius: 1.25rem;
  background-color: rgba(255, 255, 255, 0.14); color: var(--white); text-decoration: none;
  transition: background-color 0.15s ease;
}
#cart_link {opacity: 0; transition: opacity 0.25s ease, background-color 0.15s ease;}
#cart_link.shown {opacity: 1;}
#cart_link:hover {background-color: rgba(255, 255, 255, 0.22);}
#cart_link span {display: flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; opacity: 0.7;}
#cart_link small {font: inherit;}
#cart_link:hover span {opacity: 1;}
#cart_link svg {width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7;}
#cart_link:hover svg {opacity: 1;}

/* the shop's search field: a white ring on the wash that lights cyan when used */
.search {
  display: grid; width: 100%; min-width: 0; min-height: 2.5rem; box-sizing: border-box;
  border: solid 2px var(--white); border-radius: 1.25rem;
  background-color: rgba(0, 0, 0, 0.25); overflow: hidden;
  box-shadow: 0 0 0.75rem rgba(0, 213, 242, 0.55), inset 0 0 0.5rem rgba(0, 213, 242, 0.25);
  transition: box-shadow 0.15s ease;
}
.search:focus-within {box-shadow: 0 0 1.25rem rgba(0, 213, 242, 0.85), inset 0 0 0.5rem rgba(0, 213, 242, 0.35);}
.search fieldset {display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; margin: 0; padding: 0; border: 0;}
.search input {
  min-width: 0; padding: 0.5rem 0.5rem 0.5rem 1.25rem; border: 0; outline: none;
  background: none; font: inherit; color: var(--white);
}
.search input::placeholder {color: var(--white); opacity: 0.6;}
.search kbd {padding: 0.1rem 0.45rem; border: solid 1px rgba(255, 255, 255, 0.4); border-radius: 0.2rem; font: inherit; font-size: 0.75rem; line-height: 1.2; color: var(--white); opacity: 0.6;}
.search fieldset:focus-within kbd, .search fieldset:has(input:not(:placeholder-shown)) kbd {visibility: hidden;}
@media (hover: none) {.search kbd {display: none;}}
.search button {
  display: grid; place-items: center; padding: 0 1rem;
  border: 0; background: none; font: inherit; color: var(--white); cursor: pointer;
}
.search svg {display: block; width: 18px; height: 18px;}

main {max-width: 1880px; margin: 0 auto; padding: 1.5rem var(--gutter-right) 4rem var(--gutter-left);}
/* an article is read rather than scanned, so it keeps a measure the full width would lose */
.piece {max-width: 78rem; margin: 0 auto;}

.row-head {margin-bottom: 1.25rem;}
.row-head h1 {margin: 0; font-size: 2rem;}
.row-head .note {margin: 0.35rem 0 0 0; color: var(--grey);}
.row-head .count {margin: 0.35rem 0 0 0; font-size: 0.9rem; color: var(--grey);}

.chip {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem;
  border-radius: 1.2rem; background-color: var(--white); color: var(--black);
  font-size: 0.9rem; font-weight: 700; text-decoration: none;
}
.chip:hover {color: var(--cyan-ink);}
.pages {display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}

/* what the listing can be narrowed by, drawn from the counts the index returns with it */

.pages {margin: 2rem 0 0 0; justify-content: center; color: var(--grey); font-size: 0.9rem;}

/* the listing: what it can be narrowed by down the left, the articles beside it */
/* the filters in the language of the shop's product browser: a white box, the group at h4
   size and 900, its values at 700 and indented, counts ranged right on a dotted leader */
.browse {display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0.75rem 1.5rem; align-items: start;}
.narrowing {position: sticky; top: 1rem; padding: 0.75rem 1rem; border-radius: 1.25rem; background-color: var(--white);}
.facet h2 {margin: 0.45rem 0 0.3rem 0; font-size: var(--h4-size); font-weight: 900; letter-spacing: -1%; color: var(--black);}
.facet ul {margin: 0; padding: 0; list-style: none;}
.facet li {padding: 0.1rem 0 0.1rem 0.75rem; font-weight: 700; line-height: 1.25;}
.facet li a {display: flex; gap: 0.4rem; align-items: baseline; color: var(--black); text-decoration: none;}
/* the leader runs from the name to the count, sitting just above the baseline */
.facet li a::after {content: ""; order: 1; flex: 1 1 auto; align-self: flex-end; margin-bottom: 0.35em; border-bottom: dotted 2px var(--pale); opacity: 0.4;}
.facet li small {order: 2; font-size: 0.75rem; font-weight: 400; color: var(--grey); font-variant-numeric: tabular-nums;}
/* every value is dimmed but the one being narrowed by, as the browser dims all but the
   path it is on, and the pointer takes one to the accent */
.facet li a span {opacity: 0.6;}
.facet li a.on span {opacity: 1;}
.facet li a:hover span {opacity: 1; color: var(--cyan); text-decoration: underline;}

/* where the reader is, then how they narrow it: the browser's own path and sort row */
.path {display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; margin-bottom: 0.6rem;}
.path h1, .path a {margin: 0; font-size: 2rem; font-weight: 900; line-height: 1.1; letter-spacing: -1%; color: var(--black); text-decoration: none;}
.path a {color: var(--grey);}
.path a:hover {color: var(--cyan-fill);}
.path a + h1::before, .path a + a::before {content: "/"; margin-right: 0.5rem; font-weight: 400; color: var(--pale);}

.levels {display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1rem 0;}
.levels a {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.45rem 0.85rem; border: 0; border-radius: 1.25rem; background: none;
  font: inherit; font-weight: 700; color: var(--grey); text-decoration: none; cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.levels a:hover {color: var(--black);}
.levels a.on {background-color: var(--cyan-fill); color: var(--white);}
.levels small {font-size: 0.75rem; font-weight: 400; font-variant-numeric: tabular-nums; opacity: 0.75;}

/* the card language from the shop's features: the picture whole, the words over its foot,
   and a strip beneath for what does not belong on a photograph */
.cards {display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem;}
/* the strip takes whatever the row is taller than the picture, so a short summary leaves
   no gap under it */
.card {
  display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: 1.25rem; overflow: hidden;
  background-color: var(--white); color: var(--white); text-decoration: none;
  transition: box-shadow 0.15s ease;
}
.card:hover {box-shadow: var(--heavy-shadow);}
.card .shot {position: relative; overflow: hidden;}
/* height auto, or the attribute on the tag is a presentational hint that outranks the ratio */
.card img {width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease;}
.card:hover img {transform: scale(1.03);}
/* only the title rides the picture, so the scrim need only cover the last line or two */
.card .words {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.1rem 0.85rem 1.1rem;
  background: linear-gradient(to top, rgba(23, 23, 31, 0.9), rgba(23, 23, 31, 0.62) 55%, rgba(23, 23, 31, 0));
}
.card h3 {
  margin: 0; font-size: 1.25rem; font-weight: 900; line-height: 1.1; letter-spacing: -1%;
  text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .strip {padding: 0.8rem 1.1rem 0.85rem 1.1rem; background-color: var(--white);}
.card .summary {
  margin: 0; font-size: 0.9rem; line-height: 1.35; color: var(--black);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .meta {margin: 0.5rem 0 0 0; font-size: 0.8rem; color: var(--grey);}
.empty {color: var(--grey);}

/* an article: the text at a readable measure with its furniture beside it */
.piece-head {margin-bottom: 1.25rem;}
.piece-head h1 {margin: 0; font-size: 2.25rem; line-height: 1.1;}
.piece-head .summary {margin: 0.6rem 0 0 0; font-size: 1.15rem; line-height: 1.45; color: var(--black);}
/* the date and the tags share the line under the hero, the tags ranged right */
.prose .meta {margin: 0 0 1rem 0; font-size: 0.85rem; color: var(--grey);}

/* the hero leads the article with the title over its foot, as the shop's feature cards
   carry theirs, and how hard the build is on a chamfered ribbon at the top */
.piece .hero {position: relative; margin: 0; border-radius: 1.25rem; overflow: hidden; background-color: var(--header-base); color: var(--white);}
.piece .hero img {display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover;}
.piece .hero .words {position: absolute; left: 0; right: 0; bottom: 0; padding: 6rem 1.25rem 1rem 1.25rem; background: linear-gradient(to top, rgba(23, 23, 31, 0.92), rgba(23, 23, 31, 0.7) 40%, rgba(23, 23, 31, 0));}
.piece .hero .summary {max-width: 52rem; margin: 0.25rem 0 0 0; font-size: 1.1rem; color: var(--white); opacity: 0.85;}
/* the difficulty as a ribbon in from the left edge, cut like the shop's product badges */
.level {
  --chip: var(--grey);
  position: absolute; top: 1rem; left: 0;
  padding: 0.35rem 1.2rem 0.35rem 0.85rem; clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
  font-size: 0.9rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  color: var(--white); background-color: var(--chip);
}
.level[data-level="Beginner"], .level[data-level="Easy"] {--chip: var(--green);}
.level[data-level="Moderate"], .level[data-level="Intermediate"] {--chip: var(--orange);}
.level[data-level="Advanced"] {--chip: var(--magenta);}
/* the hero is far larger than a card, so its ribbon is too */
.piece .hero .level {
  padding: 0.5rem 1.8rem 0.5rem 1.3rem; clip-path: polygon(0 0, 100% 0, calc(100% - 0.9rem) 100%, 0 100%);
  font-size: 1.35rem;
}

.piece-body {display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 1.5rem; align-items: start; margin-top: 1.5rem;}
.prose {padding: 1.5rem 1.75rem; border-radius: 1.25rem; background-color: var(--white); line-height: 1.45; overflow-wrap: anywhere;}
.prose > *:first-child {margin-top: 0;}
.prose h2 {margin: 2rem 0 0.75rem 0; font-size: var(--h3-size); scroll-margin-top: 1rem;}
.prose h3 {margin: 1.5rem 0 0.5rem 0; font-size: var(--h4-size); scroll-margin-top: 1rem;}
.prose img, .prose video {display: block; max-width: 80%; height: auto; margin: 1.25rem auto; border-radius: 0.9rem; box-shadow: var(--mid-shadow);}
.prose pre {padding: 1rem 1.25rem; border-radius: 0.9rem; background-color: var(--header-base); color: var(--white); overflow-x: auto; line-height: 1.5;}
.prose code {font-size: 0.95em;}
.prose :not(pre) > code {padding: 0.1rem 0.35rem; border-radius: 0.35rem; background-color: var(--ground-light);}
/* highlighting in the site's own colours: keywords magenta, strings green, numbers
   orange, names cyan, all at 5:1 or better on the block's ground */
.prose .codehilite {--code-pale: #bac0ca; --code-quiet: #9ba1ab; --code-lilac: #cf9bff;}
.prose .codehilite .k, .prose .codehilite .kc, .prose .codehilite .kd, .prose .codehilite .kn,
.prose .codehilite .kp, .prose .codehilite .kr, .prose .codehilite .kt, .prose .codehilite .ow {color: var(--magenta);}
.prose .codehilite .s, .prose .codehilite .s1, .prose .codehilite .s2, .prose .codehilite .sb,
.prose .codehilite .sc, .prose .codehilite .sd, .prose .codehilite .sh, .prose .codehilite .sx,
.prose .codehilite .sr, .prose .codehilite .ss {color: var(--green);}
.prose .codehilite .se, .prose .codehilite .si {color: var(--orange);}
.prose .codehilite .m, .prose .codehilite .mb, .prose .codehilite .mf, .prose .codehilite .mh,
.prose .codehilite .mi, .prose .codehilite .mo, .prose .codehilite .il {color: var(--orange);}
.prose .codehilite .nb, .prose .codehilite .bp {color: var(--code-lilac);}
.prose .codehilite .nf, .prose .codehilite .fm, .prose .codehilite .nc, .prose .codehilite .nn,
.prose .codehilite .nt, .prose .codehilite .na, .prose .codehilite .nd {color: var(--cyan);}
.prose .codehilite .nv, .prose .codehilite .vc, .prose .codehilite .vg, .prose .codehilite .vi {color: var(--code-pale);}
.prose .codehilite .o, .prose .codehilite .p {color: var(--code-pale);}
.prose .codehilite .c, .prose .codehilite .c1, .prose .codehilite .cm, .prose .codehilite .ch,
.prose .codehilite .cs, .prose .codehilite .cp, .prose .codehilite .cpf {color: var(--code-quiet); font-style: italic;}
.prose .codehilite .err {color: var(--red, #ff2d55);}
.prose .codehilite .ge {font-style: italic;}
.prose .codehilite .gs {font-weight: 700;}

.prose table {width: 100%; border-collapse: collapse; margin: 1.25rem 0;}
.prose th, .prose td {padding: 0.5rem 0.75rem; border-bottom: solid 1px var(--ground); text-align: left;}

.beside {position: sticky; top: 1rem; display: grid; gap: 1rem;}
.panel, .contents {padding: 1rem 1.25rem; border-radius: 1.25rem; background-color: var(--white);}
.panel h2, .contents h2 {margin: 0 0 0.6rem 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey);}
/* each of these reads plainly enough without a label, which is left for a screen reader */
.contents h2, .writer h2, .shopping h2 {position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
/* an ordered list, since the sections run in the page's order, but the numbers are left off */
.contents ol {list-style: none; margin: 0; padding: 0; line-height: 1.5;}
.contents a {color: var(--black); text-decoration: none;}
.contents a:hover {color: var(--cyan-ink); text-decoration: underline;}
/* The parts list, in the language of the shop's own suggestions: a photo, the name with
   its summary, and a cart button carrying the price, with a picker where there is a choice.
   One grid for the whole list, so every row shares the same photo, name and button columns */
.shopping ul {display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: 0.75rem; margin: 0; padding: 0; list-style: none;}
.shopping li {display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 0.4rem 0.75rem; align-items: center; padding: 0.55rem 0;}
.shopping li:first-child {padding-top: 0;}
.shopping li:last-child {padding-bottom: 0;}
.shopping li + li {border-top: solid 1px var(--ground);}
/* with a picker the photo spans both rows and sits at the top; alone it centres on the line */
.shopping li.multi .shot {grid-row: 1 / 3; align-self: start;}
/* a touch under white, so a part shot on white still shows its edge on the white panel */
.shopping .shot img {width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0.5rem; filter: brightness(0.97);}
/* the name runs in full, since a part has to be identified, and its summary keeps to two lines */
.shopping .info {min-width: 0;}
.shopping .name {display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.25; color: var(--black); text-decoration: none;}
.shopping .name:hover {color: var(--cyan-ink); text-decoration: underline;}
.shopping .blurb {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0.15rem 0 0 0; font-size: 0.8rem; line-height: 1.3; color: var(--grey);}

/* the picker reads as a link: underlined text with a chevron, no fill */
.shopping .pick {grid-column: 2 / -1; position: relative; display: inline-grid; justify-self: start; max-width: 100%; margin: -0.35rem 0 0 0;}
.shopping .pick select {appearance: none; min-height: 1.6rem; max-width: 100%; box-sizing: border-box; padding: 0 1.3rem 0 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: 0.85rem; color: var(--black); text-decoration: underline; text-decoration-color: var(--pale); text-underline-offset: 0.15rem; cursor: pointer; outline: none;}
.shopping .pick select:hover {color: var(--cyan-ink); text-decoration-color: currentColor;}
.shopping .pick select:focus {box-shadow: 0 0 0 2px var(--cyan-ink);}
.shopping .pick svg {position: absolute; right: 0.2rem; top: calc(50% - 7px); width: 14px; height: 14px; color: var(--grey); pointer-events: none;}

/* each carries a display of its own, which would otherwise outrank the hidden attribute */
.shopping .buy[hidden], .shopping .take[hidden], .shopping .held[hidden], .shopping .pick[hidden] {display: none;}
/* the pills share the column's width, so their edges line up down the list */
.shopping .buy {margin: 0;}
/* a small cart pill: green, grey and unusable when there is none left */
.shopping .add {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; min-width: 6.5rem; min-height: 2rem; box-sizing: border-box; padding: 0 0.7rem;
  border: 0; border-radius: 1rem; background-color: var(--green);
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--white);
  white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.shopping .add:hover {background-color: color-mix(in srgb, var(--green), var(--white) 8%); box-shadow: var(--mid-shadow);}
.shopping .add:disabled {background-color: var(--grey); box-shadow: none; cursor: default;}
.shopping .add svg {width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
/* a part the basket already holds says so, with the cross that takes it back out */
/* the shop's own colour for something added, which grey is not: there it means refused */
.shopping .held, .shopping .held:hover {padding-right: 0.2rem; background-color: var(--header-base); box-shadow: none; cursor: default;}
/* the whole list in one go, at the foot where the reader has read it all */
.shopping .everything {margin-top: 1rem;}
/* the long label wraps, so the panel does not set a floor under the whole column */
.shopping .all {width: 100%; justify-content: flex-start; gap: 0.5rem; min-height: 2.25rem; padding: 0.35rem 0.85rem; font-size: 1rem; white-space: normal;}
.shopping .all .sum {margin-left: auto; font-weight: 900;}
/* a refusal from the shop, said on the button for a moment */
.shopping .add.refused, .shopping .add.refused:hover {background-color: var(--grey); box-shadow: none;}
.shopping .remove {display: inline-flex; padding: 0.3rem; border: 0; border-radius: 50%; background: none; color: var(--white); opacity: 0.7; cursor: pointer;}
.shopping .remove:hover {background-color: rgba(255, 255, 255, 0.15);}
.shopping .remove svg {width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;}
.shopping .gone {grid-column: 2 / -1; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--grey);}

/* the portrait floats into the corner and the biography runs around it */
.writer::after {content: ""; display: block; clear: both;}
.writer > a {float: right; margin: 0 0 0.5rem 0.85rem;}
.writer img {border-radius: 50%;}
.writer .name {display: block; font-weight: 700; color: var(--black); text-decoration: none;}
.writer .bio {font-size: 0.85rem; line-height: 1.45; color: var(--grey);}
.writer .bio p {margin: 0.35rem 0 0 0;}

.writer-head {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start;}
.writer-head img {border-radius: 50%;}

/* the shop's footer, kept the same on both sites */
/* a still, cool wash: the header's ink at the top running down through deep indigo to a teal */
.footer-wash {position: relative; isolation: isolate; margin-top: 3rem; background: linear-gradient(165deg, var(--header-base) 0%, #1a1c3d 40%, #10304a 75%, #0b4653 100%);}
footer {position: relative; z-index: 10; max-width: 1880px; margin: 0 auto; padding: 2.5rem var(--gutter-right) 2rem var(--gutter-left); box-sizing: border-box; color: var(--white); overflow: hidden;}
footer h3 {margin: 0 0 0.5rem 0;}
footer h3 span {font-weight: normal; font-size: smaller; opacity: 0.6;}
footer p {margin: 0 0 0.75rem 0; opacity: 0.75;}
footer a {color: var(--yellow); text-decoration-thickness: 0.05rem; text-underline-offset: 0.1rem;}
footer a:hover {color: var(--white);}

/* three even columns, stacking where the header stacks */
footer .details {display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); grid-gap: 2rem 3rem; align-items: start;}

/* social icons read like the brand bar links: light, knocked back until hovered */
footer .social {display: flex; gap: 1rem; margin: 0.25rem 0 1.25rem 0;}
footer .social a {color: var(--white); opacity: 0.7; transition: opacity 0.15s ease; will-change: opacity;}
footer .social a:hover {opacity: 1;}
footer .social svg {display: block; width: 28px; height: 28px;}

/* the newsletter field is cut from the same cloth as the search pill, without the glow */
#subscribe fieldset {display: grid; grid-template-columns: 1fr auto; align-items: center; max-width: 24rem; min-height: 2.5rem; margin: 0; padding: 0; box-sizing: border-box; border: solid 2px var(--white); border-radius: 1.25rem; background-color: rgba(0, 0, 0, 0.25); box-shadow: none; overflow: hidden;}
#subscribe input[type="email"] {padding: 0.5rem 0.5rem 0.5rem 1.25rem; border: 0; outline: none; background: none; font-family: inherit; color: var(--white);}
#subscribe input[type="email"]::placeholder {color: var(--white); opacity: 0.6;}
#subscribe button {padding: 0 1rem; border: 0; background: none; cursor: pointer;}
#subscribe button svg {display: block; width: 20px; height: 20px; fill: var(--white); opacity: 0.7; transition: opacity 0.15s ease;}
#subscribe button:hover svg {opacity: 1;}

footer .links {display: grid; grid-gap: 0.4rem;}

footer .company {margin-top: 3rem; text-align: center;}
footer .company address {font-style: normal; margin: 0;}
footer .company small {display: block; margin: 0.25rem 0 0.75rem 0; opacity: 0.6;}
footer .company nav {display: flex; justify-content: center; gap: 1.5rem; font-size: smaller;}

/* the send off closes the footer, on the same wash */
#stripe {position: relative; margin: 0; padding: 5rem 0 1.5rem 0; color: var(--white); font-size: 0.9rem; font-weight: 900; text-transform: uppercase; text-align: center;}
#stripe p {margin: 0; line-height: 1.3;}
/* the sword, point down, on a line of its own */
#stripe span {display: block; margin-top: 0.5rem; font-size: 1.4rem; line-height: 1; transform: rotate(180deg);}

@media screen and (max-width: 1024px) {
  footer .details {grid-template-columns: minmax(0, 1fr);}
}
@media screen and (max-width: 608px) {
  footer .company nav {flex-wrap: wrap; gap: 0.5rem 1.5rem;}
}

/* stacked: the wordmark centred above the search and basket, as on the shop */
@media screen and (max-width: 1024px) {
  .piece-head h1 {font-size: 1.5rem;}
  .piece .hero .summary {font-size: 0.95rem;}
  .masthead {grid-template-columns: minmax(0, 1fr) auto;}
  /* the basket shortens to its total and the trolley, or the trolley alone when empty */
  #cart_link small, #cart_link.empty span {display: none;}
  #cart_link.empty {grid-template-columns: auto; padding: 0.3rem 0.75rem;}
  .wordmark {grid-column: 1 / -1; justify-self: center; margin: 0 0 1rem 0;}
  .wordmark svg {width: 10.96rem; height: 1.74rem; margin-top: 0;}
}
/* phones: the wordmark and basket take the first row, the search the second */
@media screen and (max-width: 608px) {
  :root {--gutter-left: max(0.5rem, env(safe-area-inset-left)); --gutter-right: max(0.5rem, env(safe-area-inset-right));}
  /* the sites and the social links have to share one line on a phone */
  .sites {gap: 0.6rem;}
  .sites svg {margin-right: 0;}
  .masthead {align-items: center; column-gap: 0.75rem; row-gap: 0.75rem; padding-top: 0.75rem;}
  .wordmark {grid-column: 1; grid-row: 1; justify-self: start; margin: 0;}
  .search {grid-column: 1 / -1; grid-row: 2;}
  #cart_link {grid-column: 2; grid-row: 1;}
}
@media screen and (max-width: 900px) {
  .browse {grid-template-columns: minmax(0, 1fr);}
  .narrowing {position: static;}
  .piece-body {grid-template-columns: minmax(0, 1fr);}
  .beside {position: static;}
}