/* Open Sans, self-hosted (#11): the variable font's Latin subset covers every weight the
   site uses (300-700). SIL OFL 1.1, see /lib/open-sans/OFL.txt. The root font size stays
   the browser's 16px at every width, as on the old site, so the rem sizes below match it. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../lib/open-sans/open-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../lib/open-sans/open-sans-latin-wght-normal.woff2") format("woff2");
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Contact form honeypot (#10): off-screen rather than display:none, which some bots skip. */
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bootstrap 4's grid, which the old site was built on (#11): containers stop at 1140px
   (Bootstrap 5 adds a 1320px step at 1400px) and gutters are 30px, 15px a side, rather
   than 1.5rem. .container-xxl is left alone (it is fluid below 1400px). */
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl,
.container-xxl, .row {
  --bs-gutter-x: 30px;
}

/* Bootstrap's gutter utilities set the same variable on a .row and must still win, so the
   plain ones are restated after the rule above. The responsive ones (g-md-3, gx-lg-0 etc.)
   are NOT restated, so the .row rule above silently beats them: do not use them in views,
   or restate them here first. A test (ViewConventionsTests) fails if a view uses one. */
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }

/* Ported from the old React site's app.css (#11): typography, colours, the nav, the blue
   title bar with its right-aligned breadcrumb, tag badges, the footer. Rules for markup
   the site no longer has (the old Explore list/detail/buttons, the map caption) were not
   ported; hiding Mapbox's attribution was dropped (Mapbox requires it). */
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  font-weight: 300;
  margin-top: 0;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

h2 {
  font-weight: 500;
  font-size: 1.2rem;
}

h3 {
  font-weight: 500;
  font-size: 1rem;
}

/* Link and nav colours through Bootstrap's variables rather than `color`, so its :hover,
   .active and open-dropdown (.show) states still change them. */
:root {
  --bs-link-color: #0077c0;
  --bs-link-color-rgb: 0, 119, 192;
  --bs-link-hover-color: #005a92;
  --bs-link-hover-color-rgb: 0, 90, 146;
}

/* Bootstrap 4's link look where the old site had it: no underline until hover or keyboard
   focus. Elsewhere links keep Bootstrap 5's underline. */
.breadcrumb a, .award-links a, .not-found a, .footer a {
  text-decoration: none;
}

.breadcrumb a:hover, .breadcrumb a:focus-visible,
.award-links a:hover, .award-links a:focus-visible,
.not-found a:hover, .not-found a:focus-visible,
.footer a:hover, .footer a:focus-visible {
  text-decoration: underline;
}

/* The old site's nav: grey links, darker on hover, near-black for the current section and
   the open menu. */
.navbar {
  --bs-navbar-color: #555555;
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
}

/* Hovered/focused items take the site blue (4.53:1 on the hover grey); the current
   category is white on the site blue (4.77:1). */
.dropdown-menu {
  --bs-dropdown-link-hover-color: #0077c0;
  --bs-dropdown-link-active-bg: #0077c0;
}

/* Primary buttons in the site blue rather than Bootstrap's: white text is 4.77:1 on
   #0077c0, 7.3:1 on the hover #005a92 and 8.9:1 on the pressed #004d7d. */
:root {
  --bs-primary: #0077c0;
  --bs-primary-rgb: 0, 119, 192;
}

.btn-primary {
  --bs-btn-bg: #0077c0;
  --bs-btn-border-color: #0077c0;
  --bs-btn-hover-bg: #005a92;
  --bs-btn-hover-border-color: #005a92;
  --bs-btn-focus-shadow-rgb: 0, 119, 192;
  --bs-btn-active-bg: #004d7d;
  --bs-btn-active-border-color: #004d7d;
  --bs-btn-disabled-bg: #0077c0;
  --bs-btn-disabled-border-color: #0077c0;
}

.badge {
  background-color: #0077c0;
  color: white;
}

.small {
  font-size: 0.7rem;
}

/* Inline SVG icons (<icon name="..." />, IconTagHelper): sized and aligned like the old
   site's Font Awesome icons, one text line high, in the text's colour. */
.icon {
  display: inline-block;
  height: 1em;
  width: auto;
  overflow: visible;
  vertical-align: -0.125em;
}

/* Fixed width (the old site's 14px), centring the glyph, so the text after a column of
   icons lines up. */
.icon-fw {
  width: 14px;
}

.navbar-nav .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
}

/* The current section is underlined as well as near-black: the colour alone is only
   2.4:1 against the other links' #555, and close to the hover colour (WCAG 1.4.1). Not on
   hover. */
.navbar-nav .nav-link.active {
  text-decoration: underline 2px;
  text-underline-offset: 0.4em;
}

.dropdown-item {
  font-size: 0.9rem;
}

/* Full-bleed like the old site, whose bar sat in a fluid container: the background runs
   to the window edges, painted in one piece by a filled border image outset sideways
   (outsets add no scrollable overflow, and one paint leaves no seam at the container
   edge), while the bar loses its own side padding so its inner .container lines the
   title and breadcrumb up with the page's content. */
.titleBar {
  background-color: #0077c0;
  padding-left: 0;
  padding-right: 0;
  border-image: linear-gradient(#0077c0 0 0) fill 0 / / 0 100vmax;
}

/* No side padding: the breadcrumb ends at the content edge, as the title starts at it. */
.breadcrumb {
  justify-content: flex-end;
  padding: 0.5rem 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: transparent;
}

.breadcrumb-item a {
  color: white;
}

/* The old #82cfff is 2.8:1 on the bar; this pale blue is 4.57:1 (WCAG AA 4.5:1). */
.breadcrumb-item.active {
  color: #f5fbff;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: white;
}

/* The old site's footer: small grey text and links, headings in bold capitals. Two
   columns from 576px, four from 992px (the grid classes in _Layout). #6c757d rather than
   the old #777, which is 4.48:1 on white, just under WCAG AA; this is 4.69:1. */
.footer, .footer a {
  font-size: 0.85rem;
  color: #6c757d;
}

.footer-head {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
}

/* ---- Photo frame ---------------------------------------------------------------------
   The old site's ShadowImage (`img-fluid shadow p-3 bg-white rounded`): the photo inset in
   a white, rounded frame with a soft drop shadow, on gallery tiles, the image detail, home
   tiles, awards, the About portrait and the Explore detail. Values are the old site's
   computed ones (Bootstrap's p-3, .shadow and .rounded). On an <img> the padding sits
   inside its border-box width, so an img-fluid photo never overflows its column. */
.photo-frame {
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* ---- End photo frame ---------------------------------------------------------------- */

/* ---- Print configurator ("Buy a print", #22) -----------------------------------------
   Under the framed photo on an image's detail page: material tiles on the left, size rows
   with prices on the right, stacked below 992px. Design #20 ("Gallery placard") with
   variant B's edition badge and large price. Every control is at least 44px tall; focus
   rings match the site's buttons. The tiles are links and the radios a plain form, so it
   all works without JavaScript. */
.configurator {
  margin: 1.5rem 0 2rem;
}

.configurator-heading {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.configurator-panel {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 1.25rem;
}

/* Variant B's badge: site blue on white, bordered. */
.configurator-edition {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid #0077c0;
  border-radius: 0.25rem;
  color: #0077c0;
  font-weight: 600;
}

.configurator-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 0.5rem;
}

/* A 2x2 grid at every width, so on a phone the sizes are not pushed below four tall
   tiles. */
.configurator-materials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.configurator-material {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  min-height: 44px;
  padding: 0.6rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  color: #212529;
  text-decoration: none;
}

.configurator-material:hover {
  border-color: #0077c0;
  color: #212529;
}

.configurator-material.selected {
  border: 2px solid #0077c0;
  padding: calc(0.6rem - 1px);
}

.configurator-material:focus-visible, .configurator-quote-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.configurator-material-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.configurator-material-text {
  display: block;
  color: #555555;
}

/* Small CSS impressions of each surface, decorative only (aria-hidden). */
.configurator-swatch {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.2rem;
}

/* Phones: a smaller swatch, and below 400px no descriptor, so each tile stays compact
   (still at least 44px tall). */
@media (max-width: 575.98px) {
  .configurator-material {
    gap: 0.5rem;
  }

  .configurator-swatch {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (max-width: 399.98px) {
  .configurator-material-text {
    display: none;
  }
}

.swatch-metal {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
              linear-gradient(135deg, #8e9399 0%, #e9ecef 45%, #a3a8ae 60%, #d5d9dd 100%);
}

.swatch-acrylic {
  background: linear-gradient(135deg, #ffffff 0%, #eef3f7 48%, #cfd8df 50%, #f7fafc 100%);
}

.swatch-canvas {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
              repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
              #f3efe6;
}

.swatch-fine-art-paper {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f6f4ef 70%, #ece9e2 100%);
}

@media (min-width: 992px) {
  .configurator-sizes {
    border-left: 1px solid #dee2e6;
  }
}

.configurator-form fieldset {
  margin: 0;
}

/* The whole row is the radio's label, so all of it is the touch target. */
.configurator-size {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
  font-size: 1rem;
  cursor: pointer;
}

.configurator-size .form-check-input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.configurator-size .form-check-input:checked {
  background-color: #0077c0;
  border-color: #0077c0;
}

.configurator-size:has(input:checked) {
  font-weight: 600;
}

.configurator-open {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid #6c757d;
  border-radius: 0.2rem;
  color: #555555;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

.configurator-size-price {
  margin-left: auto;
}

.configurator-price {
  margin: 1rem 0 0.25rem;
}

.configurator-price-amount {
  display: block;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.2;
}

.configurator-price-print, .configurator-shipping {
  color: #555555;
}

.configurator-shipping {
  margin-bottom: 0.5rem;
}

/* Add to cart (#25): the panel's one solid button, full width on a phone. */
.configurator-cart-button {
  display: block;
  width: 100%;
  max-width: 20rem;
  min-height: 44px;
  margin-bottom: 1rem;
}

.configurator-quote {
  margin: 0;
}

/* A link in looks, a submit in fact: it sends the selection to the quote form. The
   padding makes a 44px target; the equal negative margin keeps it from spreading the
   line it sits in. */
.configurator-quote-button {
  padding: 0.75rem 0;
  margin: -0.75rem 0;
  border: 0;
  background: none;
  color: #0077c0;
  text-decoration: underline;
}

.configurator-quote-button:hover {
  color: #005a92;
}

.materials-about {
  margin-top: 1rem;
}

/* Padded to a 44px target; display stays list-item so the disclosure triangle shows. */
.materials-about summary {
  padding: 0.75rem 0;
  color: #0077c0;
  font-weight: 600;
  cursor: pointer;
}

.materials-explainer dt {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

.materials-explainer dd {
  margin: 0;
}

.materials-explainer p {
  margin-bottom: 0.25rem;
}

.materials-explainer-spec {
  color: #555555;
  font-style: italic;
}
/* ---- End print configurator --------------------------------------------------------- */

/* ---- Shop (/shop, #21) ------------------------------------------------------------------
   Design #20's "Editorial": a framed hero with its caption and button, a Featured grid of
   framed cards (name and from-price inside the frame), a dark navy Limited editions band
   running edge to edge, and Shop by category tiles that jump to each category's section.
   White on the navy #0b2545 is 15.6:1; the pale blue price on it, 13:1. */
.shop-section {
  margin-top: 2.5rem;
}

.shop-heading {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.shop-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #222;
}

/* The hero's photo is its own frame: keep the frame's white padding. */
.shop-photo.photo-frame {
  background-color: #fff;
}

.shop-hero-caption {
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
  font-weight: 400;
}

.shop-hero-open {
  margin: -0.75rem 0 1.25rem;
  color: #555;
}

.shop-hero-button {
  padding: 0.6rem 1.5rem;
}

.shop-card {
  display: block;
  height: 100%;
  color: #212529;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.shop-card:hover, .shop-card:focus-visible {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
}

.shop-card:focus-visible, .shop-category-tile:focus-visible, .shop-limited-item:focus-visible {
  outline: 3px solid #0077c0;
  outline-offset: 3px;
}

.shop-limited-item:focus-visible {
  outline-color: #fff;
}

.shop-card-name {
  display: block;
  margin-top: 0.6rem;
  font-weight: 600;
}

.shop-card-price {
  display: block;
  color: #555;
}

/* Edge to edge from inside the container, painted like .titleBar (a filled border image
   outset sideways, which adds no scrollable overflow). */
.shop-limited {
  margin-top: 2.5rem;
  padding: 2rem 0;
  color: #fff;
  background-color: #0b2545;
  border-image: linear-gradient(#0b2545 0 0) fill 0 / / 0 100vmax;
}

.shop-limited-heading {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 300;
}

.shop-limited-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: #fff;
  text-decoration: none;
}

.shop-limited-photo {
  flex: 0 0 60%;
  width: 60%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: 0.4rem;
  background-color: #fff;
}

.shop-limited-text span {
  display: block;
}

.shop-limited-name {
  font-weight: 600;
}

.shop-limited-price {
  margin-top: 0.5rem;
  color: #cfe9ff;
}

.shop-limited-item:hover .shop-limited-name {
  text-decoration: underline;
}

.shop-category-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  container-type: inline-size;
}

.shop-category-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #222;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.shop-category-tile:hover img, .shop-category-tile:focus-visible img {
  transform: scale(1.03);
  filter: brightness(0.85);
}

/* Bottom left, as in the design; the gradient keeps white text readable on bright photos. */
.shop-category-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1rem 0.75rem;
  font-size: min(1.8rem, 9vw); /* fallback where cqi is unsupported */
  font-size: min(1.8rem, 9cqi);
  font-weight: 500;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* The tiles jump here; leave a little air above the heading. */
.shop-category {
  scroll-margin-top: 1rem;
}

.shop-category-gallery {
  margin-left: 0.75rem;
  font-size: 0.85rem;
  font-weight: 400;
}

.shop-empty {
  padding: 2rem 0;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-category-tile img {
    transition: none;
  }

  .shop-category-tile:hover img, .shop-category-tile:focus-visible img {
    transform: none;
  }
}
/* ---- End shop ------------------------------------------------------------------------ */

/* ---- Cart (/cart, #25) ------------------------------------------------------------------ */
.cart {
  max-width: 48rem;
  margin: 0 auto;
}

.cart-line {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid #dddddd;
}

.cart-thumb {
  flex: 0 0 120px;
}

.cart-thumb img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cart-line-text {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-line-title {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.cart-line-text p, .cart-line-price {
  margin-bottom: 0.25rem;
}

.cart-line-edition, .cart-note {
  color: #555555;
}

.cart-line-flag {
  color: #a94442;
  font-weight: 600;
}

.cart-line-unavailable .cart-thumb img {
  opacity: 0.5;
}

.cart-line-end {
  flex: 0 0 auto;
  text-align: end;
}

.cart-line-price {
  font-size: 1.25rem;
}

/* A link in looks, as the configurator's quote button, padded to a 44px target. */
.cart-remove-button {
  padding: 0.75rem 0;
  border: 0;
  background: none;
  color: #0077c0;
  text-decoration: underline;
}

.cart-remove-button:hover {
  color: #005a92;
}

.cart-summary {
  padding-top: 1rem;
  text-align: end;
}

.cart-total {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.cart-total-amount {
  font-size: 2rem;
  font-weight: 300;
  margin-left: 0.5rem;
}

.cart-checkout {
  min-height: 44px;
  min-width: 12rem;
  margin: 0.5rem 0;
}

@media (max-width: 575.98px) {
  .cart-thumb {
    flex-basis: 80px;
  }
}
/* ---- End cart ------------------------------------------------------------------------ */

/* ---- Lookbook (/lookbook, #72) -----------------------------------------------------------
   Design #20's "Full-bleed slideshow" on a tablet or laptop at a booth: the print fills
   the screen, a translucent strip along the bottom carries the text and a large QR code on
   white (quiet zone included) for phones to scan. Without script the slides stack, one
   screen each; .lookbook-js (site.js) stacks them in place and shows one at a time. */
.kiosk {
  background-color: #000;
}

.lookbook {
  position: relative;
  color: #fff;
  background-color: #000;
}

.lookbook-slide {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.lookbook-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookbook-js .lookbook-slides {
  position: relative;
  height: 100vh;
  height: 100svh;
}

.lookbook-js .lookbook-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.lookbook-js .lookbook-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.lookbook-mark {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 0.375rem;
}

.lookbook-mark img {
  display: block;
  width: 80px;
  height: auto;
}

.lookbook-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 3rem 2.5rem;
  background-color: rgba(4, 16, 32, 0.78);
}

.lookbook-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 400;
}

.lookbook-location, .lookbook-price {
  margin: 0 0 0.4rem;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
}

.lookbook-pill {
  display: inline-block;
  margin: 0.5rem 0 0;
  padding: 0.3rem 0.8rem;
  color: #111;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 600;
  background-color: #fff;
  border-radius: 0.375rem;
}

.lookbook-order {
  flex: none;
  text-align: right;
}

.lookbook-qr {
  display: inline-block;
  width: clamp(150px, 17vw, 240px);
  padding: 0.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
}

.lookbook-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.lookbook-scan {
  margin: 0.75rem 0 0.25rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.lookbook-url {
  margin: 0;
  color: #9fd3ff;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  overflow-wrap: anywhere;
}

.lookbook-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 0.25rem;
  transform: translateX(-50%);
}

.lookbook-dots[hidden] {
  display: none;
}

/* A 32px target around a 12px dot. */
.lookbook-dot {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
}

.lookbook-dot::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.65);
}

.lookbook-dot[aria-current="true"]::before {
  background-color: #2b9bea;
}

.lookbook-dot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  border-radius: 50%;
}

.lookbook-status {
  position: absolute;
  top: 1.25rem;
  right: 11rem;
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.8rem;
  color: #fff;
  background-color: rgba(4, 16, 32, 0.78);
  border-radius: 0.375rem;
}

.lookbook-toggle {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 3;
  min-width: 9rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  color: #fff;
  font: inherit;
  background-color: rgba(4, 16, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.375rem;
}

.lookbook-toggle:hover {
  background-color: rgba(4, 16, 32, 0.95);
}

.lookbook-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.lookbook-toggle[hidden] {
  display: none;
}

.lookbook-open {
  margin: 0 0 0.4rem;
  color: #d6e6f5;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
}

.lookbook-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  color: #212529;
  text-align: center;
  background-color: #fff;
}

.lookbook-empty h1 {
  margin: 1.5rem 0 0.5rem;
}

/* Portrait phones and narrow windows: the QR code goes under the text. */
@media (max-width: 767.98px) {
  .lookbook-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1rem 2.75rem;
  }

  .lookbook-order {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lookbook-js .lookbook-slide {
    transition: none;
  }
}
/* ---- End lookbook ---------------------------------------------------------------------- */

/* ---- Awards (/awards, #79 "Medal wall") ----------------------------------------------------
   One framed card per award: the 3:2 photo with its placement ribbon on the top-left
   corner, then the heading, the category and location line and the links, centred. A
   ribbon's smaller line is 12-13px bold, so every tint clears WCAG AA 4.5:1 (the large
   first line needs only 3:1): #212529 on gold #d4a72c is 6.88:1, on silver #c9ced4
   9.74:1, on bronze #cd8a4e 5.39:1; the site blue #0077c0 on white 4.77:1; #212529 on the
   neutral #e9ecef 13.01:1. */
.award-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

/* The heading and links come first in the markup (reading order); the photo shows above. */
.award-photo-wrap {
  order: -1;
  position: relative;
  margin-bottom: 0.9rem;
}

.award-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #222;
}

/* Two lines, as in the design: the first word over the rest. Commendations and unknown
   wording are a bordered box on the photo's corner, both lines the same size. Capitalised
   here, so the markup keeps the placement as typed; a long unknown word wraps rather than
   overflowing. */
.award-ribbon {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  max-width: 7.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: #212529;
  /* Clicks on the ribbon fall through to the photo link under it. */
  pointer-events: none;
}

.award-ribbon-lead, .award-ribbon-rest {
  display: block;
}

/* Podium ribbons are a flat banner hanging from the frame's top edge (the card's 1rem
   padding above the photo) with a swallowtail notch (clip-path, which would clip a shadow,
   so they have none), the first word ("1st") large over "Place".
   A one-word placement ("Silver") keeps a smaller single line so the banner stays narrow. */
.award-ribbon-gold, .award-ribbon-silver, .award-ribbon-bronze {
  top: -1rem;
  left: 0.75rem;
  min-width: 4.5rem;
  padding: 0.6rem 0.65rem 1.4rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.75rem), 0 100%);
}

.award-ribbon-gold .award-ribbon-lead, .award-ribbon-silver .award-ribbon-lead,
.award-ribbon-bronze .award-ribbon-lead {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
}

.award-ribbon-gold .award-ribbon-lead:only-child, .award-ribbon-silver .award-ribbon-lead:only-child,
.award-ribbon-bronze .award-ribbon-lead:only-child {
  font-size: 1.05rem;
}

.award-ribbon-gold .award-ribbon-rest, .award-ribbon-silver .award-ribbon-rest,
.award-ribbon-bronze .award-ribbon-rest {
  margin-top: 0.15rem;
  font-size: 0.8rem;
}

.award-ribbon-gold {
  background-color: #d4a72c;
}

.award-ribbon-silver {
  background-color: #c9ced4;
}

.award-ribbon-bronze {
  background-color: #cd8a4e;
}

.award-ribbon-commended, .award-ribbon-other {
  border: 2px solid currentColor;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}

.award-ribbon-commended {
  color: #0077c0;
  background-color: #fff;
}

.award-ribbon-other {
  border-color: #adb5bd;
  background-color: #e9ecef;
}

.award-heading {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.award-details {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #6c757d;
}

/* The links in a row at the foot of the card (margin-top: auto), so cards in a grid row
   line their links up: the main, internal link in the site blue, then the external
   results link played down, small and grey (#6c757d on white, 4.69:1). */
.award-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.award-main-link {
  font-weight: 600;
}

.award-results-link {
  font-size: 0.8rem;
  color: #6c757d;
}

.award-results-link:hover {
  color: #495057;
}

/* The photo shares the main link's URL. It is out of the tab order (the text link is the
   keyboard stop), so the cue is for the pointer: a slight lift in brightness. */
.award-photo-link {
  display: block;
}

.award-photo-link .award-photo {
  transition: filter 0.2s ease;
}

.award-photo-link:hover .award-photo {
  filter: brightness(1.08);
}

.award-links a:focus-visible, .award-photo-link:focus-visible {
  outline: 3px solid #0077c0;
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.awards-empty {
  margin: 2rem 0;
  text-align: center;
}
/* ---- End awards ------------------------------------------------------------------------ */