/* System of Cookery contents — the untouched photograph is the interface. */
:root {
  --corkboard-wall: #b1ab94;
  --corkboard-mobile-wall: #c2bca7;
  --corkboard-wall-gradient: linear-gradient(to bottom, #a1987c 0%, #a39a80 16%, #aba48b 36%, #b1ab94 58%, #b6b09a 80%, #b5af99 100%);
  --corkboard-orange: #dc612c;
  --corkboard-red: #943c30;
  --corkboard-brass: #d7b25b;
}

body.soc-corkboard-page,
body:has(.soc-corkboard) {
  background: var(--corkboard-wall-gradient);
  color: var(--soc-ink);
}

/* Retain the normal Home green, System blue, and account orange palette. */
body.soc-corkboard-page .folio-nav__link,
body:has(.soc-corkboard) .folio-nav__link {
  text-shadow: 0 1px 12px rgba(255, 250, 239, .68);
}

body.soc-corkboard-page .site-footer,
body:has(.soc-corkboard) .site-footer {
  border-color: rgba(11, 9, 7, .2);
  background: var(--soc-paper);
  color: rgba(11, 9, 7, .72);
}

.soc-corkboard {
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  overflow: clip;
  background: var(--corkboard-wall-gradient);
  color: var(--soc-ink);
}

.corkboard-stage {
  --corkboard-width: min(100vw, calc(100svh * 1.333333));
  --corkboard-height: calc(var(--corkboard-width) * .75);
  --corkboard-gutter: max(0px, calc((100vw - var(--corkboard-width)) / 2 + 2px));
  position: relative;
  display: grid;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    url("../images/corkboard/board-wall-left.png") left center / var(--corkboard-gutter) var(--corkboard-height) no-repeat,
    url("../images/corkboard/board-wall-right.png") right center / var(--corkboard-gutter) var(--corkboard-height) no-repeat,
    var(--corkboard-wall-gradient);
  isolation: isolate;
}

.corkboard-board {
  --corkboard-x: 0;
  --corkboard-y: 0;
  position: relative;
  width: var(--corkboard-width);
  aspect-ratio: 4 / 3;
  isolation: isolate;
  opacity: 1;
  transition: opacity 210ms ease, filter 210ms ease, transform 300ms cubic-bezier(.2, .74, .2, 1);
}

.corkboard-board__picture,
.corkboard-board__picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.corkboard-board__picture img {
  object-fit: contain;
  box-shadow: none;
  filter: none;
}

.corkboard-sections {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.corkboard-hotspots {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.corkboard-section {
  --glow-color: #efb771;
  --glow-opacity: .105;
  --lift-x: 1px;
  --lift-y: -1px;
  --lift-turn: 0deg;
  cursor: pointer;
  outline: none;
  pointer-events: all;
  -webkit-tap-highlight-color: transparent;
}

.corkboard-section--system,
.corkboard-header--system { --glow-color: #e88451; --glow-opacity: .11; --lift-x: 2px; --lift-y: -4px; --lift-turn: -.1deg; }
.corkboard-section--month,
.corkboard-header--month { --glow-color: #efbb72; --glow-opacity: .105; --lift-x: -2px; --lift-y: -4px; --lift-turn: .12deg; }
.corkboard-section--groceries,
.corkboard-header--groceries { --glow-color: #f4c77f; --glow-opacity: .1; --lift-x: 2px; --lift-y: -4px; --lift-turn: -.12deg; }
.corkboard-section--recipes,
.corkboard-header--recipes { --glow-color: #e78e58; --glow-opacity: .11; --lift-x: 2px; --lift-y: -4px; --lift-turn: .14deg; }
.corkboard-section--recommendations,
.corkboard-header--recommendations { --glow-color: #efa268; --glow-opacity: .105; --lift-x: 2px; --lift-y: -4px; --lift-turn: .1deg; }
.corkboard-section--equipment,
.corkboard-header--equipment { --glow-color: #edc685; --glow-opacity: .1; --lift-x: 2px; --lift-y: -4px; --lift-turn: .1deg; }
.corkboard-section--notes,
.corkboard-header--notes { --glow-color: #df8a5d; --glow-opacity: .11; --lift-x: -2px; --lift-y: -4px; --lift-turn: -.1deg; }

.corkboard-header--system { --origin-x: 49.2%; --origin-y: 14.2%; }
.corkboard-header--month { --origin-x: 19.2%; --origin-y: 24.6%; }
.corkboard-header--groceries { --origin-x: 47.2%; --origin-y: 25.9%; }
.corkboard-header--recipes { --origin-x: 78.3%; --origin-y: 18.8%; }
.corkboard-header--recommendations { --origin-x: 77.3%; --origin-y: 53.6%; }
.corkboard-header--equipment { --origin-x: 40.8%; --origin-y: 66.2%; }
.corkboard-header--notes { --origin-x: 16.7%; --origin-y: 66.9%; }

.corkboard-section__hit {
  fill: rgba(0, 0, 0, .001);
  stroke: none;
  pointer-events: fill;
}

.corkboard-section__glow,
.corkboard-section__header-base,
.corkboard-section__header-shift {
  pointer-events: none;
}

.corkboard-section__glow {
  fill: var(--glow-color);
  opacity: 0;
  filter: blur(26px) saturate(1.08);
  mix-blend-mode: screen;
  transform: scale(.975);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 300ms ease, transform 520ms cubic-bezier(.16, .82, .2, 1), filter 420ms ease;
}

.corkboard-section__header-shift {
  --lift-x: 2px;
  --lift-y: -4px;
  --lift-turn: 0deg;
  opacity: 0;
  filter: drop-shadow(0 2px 1px rgba(50, 25, 10, .2));
  transform-box: view-box;
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  backface-visibility: hidden;
  will-change: transform, filter;
  transition: transform 520ms cubic-bezier(.16, .82, .2, 1), filter 420ms ease;
}

.corkboard-section__header-base {
  opacity: 0;
}

.corkboard-section__header-photo {
  pointer-events: none;
}

.corkboard-section:hover .corkboard-section__glow,
.corkboard-section:focus-visible .corkboard-section__glow,
.corkboard-section.is-active .corkboard-section__glow {
  opacity: var(--glow-opacity);
  transform: scale(1.012);
}

.corkboard-board[data-active-section="system"] .corkboard-header-base--system,
.corkboard-board[data-active-section="month"] .corkboard-header-base--month,
.corkboard-board[data-active-section="groceries"] .corkboard-header-base--groceries,
.corkboard-board[data-active-section="recipes"] .corkboard-header-base--recipes,
.corkboard-board[data-active-section="recommendations"] .corkboard-header-base--recommendations,
.corkboard-board[data-active-section="equipment"] .corkboard-header-base--equipment,
.corkboard-board[data-active-section="notes"] .corkboard-header-base--notes {
  opacity: 1;
}

.corkboard-board[data-active-section="system"] .corkboard-header--system,
.corkboard-board[data-active-section="month"] .corkboard-header--month,
.corkboard-board[data-active-section="groceries"] .corkboard-header--groceries,
.corkboard-board[data-active-section="recipes"] .corkboard-header--recipes,
.corkboard-board[data-active-section="recommendations"] .corkboard-header--recommendations,
.corkboard-board[data-active-section="equipment"] .corkboard-header--equipment,
.corkboard-board[data-active-section="notes"] .corkboard-header--notes {
  opacity: 1;
  filter: drop-shadow(0 9px 7px rgba(49, 24, 9, .4)) drop-shadow(0 1px 1px rgba(255, 238, 197, .5));
  transform: translate3d(var(--lift-x), var(--lift-y), 0) rotate(var(--lift-turn)) scale(1.035);
}

.corkboard-section:focus-visible .corkboard-section__glow {
  opacity: calc(var(--glow-opacity) * 1.65);
}

.soc-corkboard.is-departing .corkboard-board {
  opacity: .7;
  filter: saturate(.82);
  transform: scale(.996);
}

.corkboard-mobile-slideshow { display: none; }
.corkboard-stage__instruction { display: none; }

@media (max-width: 839px) {
  html:has(.soc-corkboard),
  body.soc-corkboard-page,
  body:has(.soc-corkboard),
  .soc-corkboard {
    background-color: var(--corkboard-mobile-wall) !important;
    background-image: url("../images/corkboard/mobile-wall-extension.png") !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  body.soc-corkboard-page .site-footer,
  body:has(.soc-corkboard) .site-footer {
    border-color: transparent;
    background-color: var(--corkboard-mobile-wall) !important;
    background-image: url("../images/corkboard/mobile-wall-extension.png") !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  .soc-corkboard { overflow: visible; }

  .corkboard-stage {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    background-color: var(--corkboard-mobile-wall) !important;
    background-image: url("../images/corkboard/mobile-wall-extension.png") !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  .corkboard-board {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .corkboard-stage__instruction {
    position: absolute;
    z-index: 7;
    bottom: 9px;
    left: 14px;
    display: block;
    margin: 0;
    color: rgba(11, 9, 7, .62);
    font-family: var(--soc-serif);
    font-size: 13px;
    font-style: italic;
    letter-spacing: .025em;
    line-height: 1;
    pointer-events: none;
  }

  .corkboard-section { --glow-opacity: .13; }

  .corkboard-section__glow { filter: blur(16px) saturate(1.06); }

  .corkboard-board[data-active-section] .corkboard-section__header-shift {
    transform: translate3d(var(--lift-x), var(--lift-y), 0) rotate(var(--lift-turn)) scale(1.045);
  }

  .soc-corkboard.is-departing .corkboard-board { opacity: .76; filter: none; transform: none; }

  .corkboard-mobile-slideshow {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 19px 0 max(46px, env(safe-area-inset-bottom));
    background-color: var(--corkboard-mobile-wall) !important;
    background-image: url("../images/corkboard/mobile-wall-extension.png") !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

  .corkboard-mobile-slideshow__plate {
    position: relative;
    display: block;
    width: 80%;
    margin: 0 auto;
  }

  .corkboard-mobile-slideshow__viewport {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 0;
    outline: none;
    scroll-padding-left: 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .corkboard-mobile-slideshow__viewport::-webkit-scrollbar { display: none; }

  .corkboard-mobile-slideshow__track {
    display: flex;
    gap: 8px;
    padding-right: 8px;
  }

  .corkboard-mobile-slideshow__slide {
    flex: 0 0 calc(100% - 34px);
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background-color: var(--corkboard-mobile-wall);
    background-image: url("../images/corkboard/mobile-wall-extension.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .corkboard-mobile-slideshow__slide img {
    display: block;
    width: 100%;
    height: auto;
  }

  .corkboard-mobile-slideshow__edge {
    position: absolute;
    z-index: 3;
    bottom: -31px;
    width: 36px;
    height: 28px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--soc-ink);
    font-family: var(--soc-serif);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    opacity: .62;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .corkboard-mobile-slideshow__edge--previous { left: 0; --edge-shift: -2px; }
  .corkboard-mobile-slideshow__edge--next { right: 0; --edge-shift: 2px; }
  .corkboard-mobile-slideshow__edge:hover,
  .corkboard-mobile-slideshow__edge:focus-visible { opacity: 1; transform: translateX(var(--edge-shift)); }
  .corkboard-mobile-slideshow__edge:disabled { opacity: .13; cursor: default; transform: none; }

  .corkboard-mobile-slideshow__index {
    width: 80%;
    margin: 12px auto 0;
    color: rgba(11, 9, 7, .64);
    font-family: var(--soc-serif);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    line-height: 1;
    text-align: center;
  }

  .corkboard-mobile-slideshow__system-link {
    display: inline-block;
    margin: 24px 0 0 14px;
    color: var(--corkboard-orange);
    font-family: var(--soc-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1;
    text-decoration: none;
    text-underline-offset: .2em;
  }

  .corkboard-mobile-slideshow__system-link:hover,
  .corkboard-mobile-slideshow__system-link:focus-visible {
    color: var(--corkboard-red);
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .corkboard-board,
  .corkboard-section__glow,
  .corkboard-section__header-shift {
    transition-duration: .01ms !important;
    animation: none !important;
  }

  .corkboard-section:hover .corkboard-section__glow,
  .corkboard-section:focus-visible .corkboard-section__glow,
  .corkboard-section.is-active .corkboard-section__glow,
  .corkboard-board[data-active-section] .corkboard-section__header-shift { transform: none; }
}

@media (forced-colors: active) {
  .corkboard-section__glow { display: none; }
  .corkboard-section:focus-visible .corkboard-section__hit { stroke: LinkText; stroke-width: 5px; }
}