/* The site's pages load the Cardamom Tools stylesheet first and reuse it
   whole: nav, strip, detail. This file adds the site's sections, the project
   entries and the knob in the nav. */

/* Each section has a knob colour, for its mark, and an ink, for text and fills
   on paper. The Cardamom red and Goodies' gold are too light to carry text,
   so their inks are darker. Anything inside [data-section] takes that
   section's pair. */
:root {
  --knob-tools: #C7402E;
  --ink-tools: #A93424;
  --knob-videogames: #2F6577;
  --ink-videogames: #2F6577;
  --knob-goodies: #B98730;
  --ink-goodies: #7A5A1C;
  --accent: var(--ink-tools);
}
[data-section="videogames"] { --section-knob: var(--knob-videogames); --accent: var(--ink-videogames); }
[data-section="goodies"] { --section-knob: var(--knob-goodies); --accent: var(--ink-goodies); }
[data-section="tools"] { --section-knob: var(--knob-tools); --accent: var(--ink-tools); }

/* A link to an item lands on the strip itself, so the offset is only
   breathing room. The home sets its own, for its sticky nav. */
html { scroll-padding-top: 1.2rem; }

/* The knob alone marks the site in every nav: Cardamom red by default, the
   section's own colour on a page that belongs to one. In forced colours the
   background would be repainted as the page's, so the mark keeps the system's
   link colour instead. */
.knob-mark {
  display: block; width: 28px; height: 28px;
  background: var(--section-knob, var(--knob-tools));
  -webkit-mask: url('/assets/mark-knob.svg') center / contain no-repeat;
  mask: url('/assets/mark-knob.svg') center / contain no-repeat;
}
@media (forced-colors: active) {
  .knob-mark { forced-color-adjust: none; background: LinkText; }
}

.sec-title { margin: 0 0 1.2rem; line-height: 0; }
.sec-title img { display: inline-block; height: clamp(38px, 6vw, 58px); width: auto; }

/* The strip centres its chips while they fit and scrolls from the first one
   when they do not. Plain centring would push the first chips past the left
   edge, out of reach. */
.ct-strip { gap: 10px; justify-content: flex-start; }
.ct-strip > .ct-chip:first-child { margin-inline-start: auto; }
.ct-strip > .ct-chip:last-child { margin-inline-end: auto; }

/* Arrows for a strip wider than the page, sitting in its side padding. On a
   touch screen the strip is swiped instead. */
.car-rail { position: relative; }
.car-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 8px rgba(42, 36, 27, .14);
  cursor: pointer; transition: opacity .18s, border-color .18s;
}
.car-prev { left: 4px; }
.car-prev svg { transform: scaleX(-1); }
.car-next { right: 4px; }
.car-arrow:hover { border-color: var(--ink); }
.car-arrow:disabled { opacity: .3; cursor: default; }
.car-arrow:disabled:hover { border-color: var(--rule); }
.car-arrow[hidden] { display: none; }
.car-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) {
  .car-arrow { display: none; }
}
.sec-chip-shot { border-radius: 4px; }

/* Cards: the artwork, the title, and the section it belongs to in that
   section's colour. Same selection behaviour as a bare chip. The strip aligns
   chips at the bottom; cards align at the top, or a title that wraps to two
   lines lifts its artwork above the others and reads as selected. */
[data-cards] .ct-strip { align-items: flex-start; }
.ct-strip .sec-card {
  display: grid; gap: .55rem; align-content: start;
  width: clamp(176px, 17vw, 250px);
  padding: 0; line-height: 1.3; text-align: left;
  color: var(--ink); font: inherit;
}
.sec-card-img {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(42, 36, 27, .14);
  transition: box-shadow .22s;
}
/* Two lines are always reserved for the title, so every card has the same
   height whether its title wraps or not. */
.sec-card-title {
  font-size: .92rem; font-weight: 700; letter-spacing: -.005em;
  line-height: 1.3; min-height: 2.6em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.sec-card-cat {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
.sec-card:hover .sec-card-img { box-shadow: 0 0 0 1px var(--rule), 0 8px 18px rgba(42, 36, 27, .16); }
.sec-card.on .sec-card-img { box-shadow: 0 0 0 2px var(--accent), 0 8px 18px rgba(42, 36, 27, .2); }

/* Header gallery: a 16:9 frame, the proportion of the videos; pictures of any
   other shape sit inside it on their own background. */
.sec-gallery { min-width: 0; }
.sec-track {
  display: flex; aspect-ratio: 16 / 9;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 4px; background: #0a0a0a;
  box-shadow: 0 1px 2px rgba(42, 36, 27, .16), 0 10px 26px rgba(42, 36, 27, .13);
}
.sec-track::-webkit-scrollbar { display: none; }
.sec-slide { flex: 0 0 100%; scroll-snap-align: start; }
.sec-slide-img, .sec-slide-video { display: block; width: 100%; height: 100%; border: 0; }
.sec-slide-img { object-fit: contain; }

.sec-dots { display: flex; justify-content: center; gap: .2rem; margin-top: .6rem; }
.sec-dot {
  width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.sec-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule); transition: background .18s;
}
.sec-dot:hover::before { background: var(--ink-dim); }
.sec-dot[aria-current="true"]::before { background: var(--accent); }
.sec-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 50%; }

/* The header is all a project entry has, so it drops the rule that would
   separate it from what follows. Its text runs the header's full height and
   the actions sit at the foot. */
.sec-entry-head { padding-bottom: 0; border-bottom: 0; }
.sec-id { align-self: stretch; display: flex; flex-direction: column; }

/* Side by side, every header of a carousel is as tall as its tallest one,
   measured by section.js, so the actions line up from project to project.
   Stacked on a phone the actions follow the text and there is nothing to line
   up. */
@media (min-width: 761px) {
  .sec-entry-head { min-height: var(--sec-entry-h, 0px); }
}

.sec-links { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: auto; padding-top: 1.4rem; }
.sec-links .ct-dl-link { margin-top: 0; }
.sec-ghost {
  background: none; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.sec-ghost:hover { filter: none; box-shadow: inset 0 0 0 1px var(--ink); }