/* Bakers project hub. Bakers document format (v1) with the same chrome as the client kit pages:
   #171717, system sans 14/24, white headings, grey body, no rules or boxes, 8px unit, pills that slide.
   Only the covers carry the client's brand. */
:root {
  color-scheme: dark;
  --background: #171717;
  --text: #f5f5f5;
  --muted: #a8a8a8;
  --hover: #2c2c2c;
  --pill-hover: #383838;
  --field: #1f1f1f;
  --stage: #0e0e0e;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s9: 72px; --s12: 96px; --s16: 128px; --s20: 160px;
  --text-col: 600px;
  --gutter: 48px;
  --bar: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--bar) + var(--s3)); }
body { margin: 0; background: var(--background); color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 24px; -webkit-font-smoothing: antialiased; }
::selection { background: #d5d5d5; color: #181818; }
p, h1, h2, ol, ul { margin: 0; padding: 0; }
p { text-wrap: pretty; }
ol, ul { list-style: none; }
h1, h2 { color: var(--text); font-size: 14px; line-height: 24px; font-weight: 600; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 4px; }
img, video { display: block; }
i { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.frame { width: min(1600px, 100% - 2 * var(--gutter)); margin: 0 auto; }
main { padding-bottom: var(--s20); }

/* ---------- bar ---------- */
.bar { position: sticky; top: 0; z-index: 10; height: var(--bar); background: var(--background); }
/* Content slides under the bar through a short fade, not a hard edge. */
.bar::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: var(--s3); background: linear-gradient(var(--background), rgb(23 23 23 / 0)); pointer-events: none; }
.bar .frame { height: 100%; display: flex; align-items: center; gap: var(--s5); }
.logo { display: block; width: 104px; height: 13px; filter: brightness(0) invert(1); }
.sections { position: relative; display: flex; gap: 2px; }
.sections a { position: relative; z-index: 1; padding: 6px 12px; border-radius: 999px; color: var(--muted); transition: color .25s var(--ease); }
.sections a:hover, .sections a[aria-current="true"] { color: var(--text); }
.sections .pill { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; background: var(--hover); opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .2s; }

/* ---------- intro ---------- */
.intro { padding-top: var(--s12); max-width: var(--text-col); }
.intro .mark { display: block; width: auto; height: 32px; margin-bottom: var(--s3); color: var(--text); }
.intro h1 { margin-bottom: var(--s2); }
.intro p { max-width: 480px; }

/* ---------- work: the live pieces, with real covers ---------- */
.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s9); }
.tile { display: block; }
.tile .cover { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--stage); transition: transform .55s var(--spring); }
.tile .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile .t { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); color: var(--text); font-weight: 600; }
.tile .n { display: block; }
.tile .t i { transition: transform .3s var(--ease); }
a.tile:hover .cover img { transform: scale(1.03); }
a.tile:hover .t i { transform: translate(2px, -2px); }
a.tile:active .cover { transform: scale(0.98); transition-duration: .12s; }
.tag { padding: 0 8px; border-radius: 999px; background: var(--hover); color: var(--text); font-size: 12px; line-height: 20px; font-weight: 500; }

/* ---------- files: everything shared, one folder per workstream, with a sticky preview ---------- */
/* Same three columns as the tiles: the folders span the first two, the preview sits under the third tile. */
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s4); align-items: start; margin-top: var(--s20); }
.list { grid-column: 1 / 3; }
.preview { grid-column: 3; }
/* A folder is a label/value row, as in the Bakers documents. Its name stays beside its files as they scroll. */
.folder { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 0 var(--s4); align-items: start; }
.folder + .folder { margin-top: var(--s8); }
.folder h2 { position: sticky; top: calc(var(--bar) + var(--s3)); padding-top: 12px; }
.u { margin: 0 calc(-1 * var(--s2)); padding: 12px var(--s2) var(--s2); border-radius: 12px; transition: background-color .25s var(--ease); }
.u.on { background: var(--field); }
.u .t { color: var(--text); font-weight: 600; }
.u .n { max-width: 560px; }

/* Every way into a file is a grey pill: the kind, its size or length in grey, then the arrow. */
.acts { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 12px; }
.acts a, .acts button, .more a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border-radius: 999px; background: var(--hover); color: var(--text); white-space: nowrap; transition: background-color .2s var(--ease), transform .35s var(--spring); }
.acts a:hover, .acts button:hover, .acts .toggle[aria-expanded="true"], .more a:hover { background: var(--pill-hover); }
.acts a:active, .acts button:active, .more a:active { transform: scale(0.95); transition-duration: .1s; }
.acts .m { color: var(--muted); font-variant-numeric: tabular-nums; }
.acts i, .more i { display: inline-block; transition: transform .3s var(--ease); }
.acts a:hover i, .more a:hover i { transform: translate(2px, -2px); }
.acts [data-video]:hover i { transform: translateX(2px); }
.acts .toggle[aria-expanded="true"] i { transform: rotate(180deg); }
/* Play and open-list icons are drawn, so they match the ↗ glyph's size on every platform. */
.acts .play, .acts .chev { width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.acts .play { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.25 2.25v5.5L7.75 5z' stroke='%23000' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.acts .chev { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.75l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Page lists open top-down in place. Without the script they simply stay open. */
.more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease); }
.more > div { overflow: hidden; }
.js .more { grid-template-rows: 0fr; }
.js .u.open .more { grid-template-rows: 1fr; }
html:not(.js) .toggle { display: none; }
.more ul { display: flex; flex-wrap: wrap; gap: var(--s1); padding-top: var(--s1); }
.more a { color: var(--muted); }
.more a:hover { color: var(--text); }

.preview { position: sticky; top: calc(var(--bar) + var(--s3)); }
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--stage); }
.stage > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--stage); }
.stage > .in { animation: wipe .5s var(--ease) backwards; }
.stage video:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- entry: content arrives in reading order, top-down ---------- */
.rise { animation: rise .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { clip-path: inset(0 0 100% 0); transform: translateY(12px); } to { clip-path: inset(0 0 0 0); transform: none; } }


/* ---------- how to read this ---------- */
.steps { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s4); }
.steps li { display: flex; align-items: center; gap: 12px; color: var(--text); }
.steps span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--hover); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tile[data-open] { cursor: zoom-in; }

/* ---------- directions: the idea on the left, the slides on the right ---------- */
.direction { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s4); align-items: start; margin-top: var(--s20); scroll-margin-top: calc(var(--bar) + var(--s3)); }
.lead { position: sticky; top: calc(var(--bar) + var(--s3)); max-width: 420px; }
.lead .k { color: var(--muted); }
.lead h2 { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 var(--s2); }
.lead p + p { margin-top: var(--s2); }
.lead .feel { color: var(--text); }
.lead .acts { margin-top: var(--s3); }
.slides { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.slides a { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--stage); cursor: zoom-in; transition: transform .55s var(--spring); }
.slides img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.slides a:hover img { transform: scale(1.03); }
.slides a:active { transform: scale(0.98); transition-duration: .12s; }
.slides p { margin-top: 12px; }
.slides b { display: block; color: var(--text); font-weight: 600; }
.acts button[data-open] i { transition: transform .3s var(--ease); }
.acts button[data-open]:hover i { transform: translate(2px, -2px); }

/* ---------- viewer: one slide at a time, full screen ---------- */
/* Its ground is the page's own colour. iOS Safari paints the status bar zone in the bar's colour, above
   everything a page draws, so a darker ground would sit under a lighter band. */
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--background); color: var(--muted); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: v-in .35s var(--ease); }
.viewer::backdrop { background: var(--background); }
@keyframes v-in { from { opacity: 0; } to { opacity: 1; } }
.v-top, .v-bottom { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--gutter); }
.v-label { color: var(--text); font-weight: 600; }
.v-count { font-variant-numeric: tabular-nums; }
.v-close { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--hover); color: var(--text); display: inline-flex; align-items: center; gap: 6px; transition: background-color .2s var(--ease); }
.v-close .m { color: var(--muted); }
.v-close:hover { background: var(--pill-hover); }
.v-stage { position: relative; margin: 0 var(--gutter); min-height: 0; overflow: hidden; touch-action: none; cursor: zoom-in; }
/* Zoom lives on its own layer, so it never fights the slide-in animation on the image. */
.v-zoom { position: absolute; inset: 0; transform-origin: 0 0; }
.v-zoom.ease { transition: transform .35s var(--ease); }
.v-stage.zoomed { cursor: grab; }
.v-stage.dragging { cursor: grabbing; }
.v-zoom-ui { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; padding: 2px; border-radius: 999px; background: var(--hover); }
.v-zoom-ui button { height: 28px; min-width: 28px; padding: 0 8px; border-radius: 999px; color: var(--text); font-variant-numeric: tabular-nums; transition: background-color .2s var(--ease); }
.v-zoom-ui button:hover { background: var(--pill-hover); }
.v-zoom-ui .v-pct { min-width: 56px; color: var(--muted); }
/* The slide is contained inside whatever space is left, in any orientation. */
.v-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.viewer:focus { outline: none; }
@media (hover: none) { .v-close .m { display: none; } }
.v-stage img.in { animation: v-slide .4s var(--ease); }
@keyframes v-slide { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 16px)); } to { opacity: 1; transform: none; } }
.v-bottom { justify-content: center; }
.hint, .v-turn { display: none; }
.v-stage img { user-select: none; -webkit-user-drag: none; }
.v-cap { flex: 1; text-align: center; max-width: 640px; }
.v-cap b { color: var(--text); font-weight: 600; margin-right: 6px; }
.v-prev, .v-next { flex: none; width: 48px; height: 48px; border-radius: 999px; background: var(--hover); color: var(--text); font-size: 18px; transition: background-color .2s var(--ease), transform .35s var(--spring), opacity .2s; }
.v-prev:hover, .v-next:hover { background: var(--pill-hover); }
.v-prev:active, .v-next:active { transform: scale(0.94); transition-duration: .1s; }
.v-prev:disabled, .v-next:disabled { opacity: .3; pointer-events: none; }

/* ---------- phone menu: the button at the top right opens every section and tab in a sheet from the bottom ---------- */
/* The sheet rises on the page's ease and its rows arrive top to bottom; closing plays the rise backwards. */
.menu-btn { display: none; place-items: center; width: 40px; height: 40px; margin: 0 -4px 0 auto; border-radius: 999px; background: var(--hover); color: var(--text); transition: transform .35s var(--spring); }
.menu-btn:active { transform: scale(0.92); transition-duration: .1s; }
.menu-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu-lock { overflow: hidden; }
/* No scrim: the sheet floats over the page as it is, on its own lighter fill and a soft shadow. iOS Safari
   paints its status bar and toolbar zones in the page colour, above everything a page draws, so a dimmed
   page would sit between two lighter bands. The dialog is boxed to the sheet. Its backdrop stays, full size
   and see-through: a dialog with one is what Safari gives the page colour. */
.menu { inset: auto var(--s1) max(var(--s1), env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: none; color: var(--muted); overflow: visible; }
.menu:focus { outline: none; }
.menu::backdrop { background: transparent; }
/* Safari takes its toolbar colour from the fixed element it finds at the bottom centre of the viewport, and
   keeps it for as long as the dialog is open. The sheet rises through that spot, so a see-through strip of
   the dialog lies in front of it there: Safari then finds the dialog, not the sheet's fill. */
.menu::after { content: ""; position: fixed; inset: auto 0 0; height: var(--s1); z-index: 1; }
.m-sheet { margin: 0; padding: var(--s1); list-style: none; border-radius: 24px; background: var(--hover); box-shadow: 0 8px 24px rgb(0 0 0 / .3), 0 2px 6px rgb(0 0 0 / .2); }
.m-sheet a { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--s2); border-radius: 16px; color: var(--muted); font-size: 16px; font-weight: 600; transition: background-color .2s var(--ease), color .2s var(--ease); }
.m-sheet a[aria-current="true"], .m-sheet a:active { background: var(--pill-hover); color: var(--text); }
.menu[open] .m-sheet { animation: m-up .45s var(--ease); }
.menu[open] li { animation: rise .7s var(--ease) backwards; animation-delay: calc(60ms + var(--i) * 45ms); }
.menu.out .m-sheet { animation: m-down .3s cubic-bezier(0.32, 0, 0.67, 0) forwards; }
@keyframes m-up { from { transform: translateY(calc(100% + var(--s2))); } }
@keyframes m-down { to { transform: translateY(calc(100% + var(--s2))); } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- narrower: the list runs full width, no preview ---------- */
@media (max-width: 1079px) {
  .files { grid-template-columns: minmax(0, 1fr); }
  .list { grid-column: auto; }
  .preview { display: none; }
  .u.on { background: none; }
  .direction { grid-template-columns: minmax(0, 1fr); }
  .lead { position: static; max-width: var(--text-col); margin-bottom: var(--s5); }
  .slides { grid-column: auto; }
}

/* ---------- phone: the menu moves to the bottom ---------- */
@media (max-width: 860px) {
  :root { --gutter: 24px; --bar: 56px; }
  main { padding-bottom: var(--s16); }
  .intro { padding-top: var(--s8); }
  .files { margin-top: var(--s16); }
  .sections { position: fixed; z-index: 20; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 4px; border-radius: 999px; background: var(--hover); }
  .sections a { padding: 8px 18px; font-weight: 600; white-space: nowrap; }
  /* Hubs with more tabs (directions, a questionnaire) get tighter pills, so they fit a phone. */
  .sections.many a { padding: 8px 12px; }
  /* Pinned at 50%, the bar would otherwise only get half the screen and push its last tab off the edge. */
  .sections.many { width: max-content; max-width: calc(100vw - 16px); }
  .sections a[aria-current="true"] { color: var(--background); }
  .sections .pill { top: 4px; bottom: 4px; background: var(--text); }
  /* With the script, the bottom bar gives way to the menu button at the top right. */
  .js .sections { display: none; }
  .js .menu-btn { display: grid; }
}
@media (max-width: 600px) {
  .sections .w { display: none; }
  .work { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s8); }
  .folder { grid-template-columns: minmax(0, 1fr); }
  .folder h2 { position: static; padding-top: 0; margin-bottom: var(--s1); }
  .direction { margin-top: var(--s16); }
  .slides { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .v-top, .v-bottom { padding: 12px 16px; }
  .v-stage { margin: 0 16px; }
  .v-cap { font-size: 13px; line-height: 20px; }
}

/* ---------- phone: each direction becomes a swipeable row, the viewer fills the screen ---------- */
@media (max-width: 600px) {
  .work .tile .cover { border-radius: 12px; }
  .lead h2 { font-size: 28px; line-height: 36px; }
  .lead { margin-bottom: var(--s3); }
  .hint { display: block; margin-top: var(--s2); color: var(--muted); }
  .slides { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s1); scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .slides::-webkit-scrollbar { display: none; }
  .slides li { flex: 0 0 86%; scroll-snap-align: start; }
  .slide-grid .slides { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .slides a { border-radius: 12px; }
  .viewer[open] { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .v-bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .v-cap b { display: block; margin: 0; }
  .v-zoom-ui { display: none; }
  .v-close { margin-left: auto; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .v-turn { display: block; text-align: center; padding: 12px 16px 0; font-size: 12px; }
}
/* Phone held sideways: the slide takes the whole height, the chrome shrinks to a strip. */
@media (orientation: landscape) and (max-height: 500px) {
  .viewer[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
  .v-top, .v-bottom { padding: 4px max(16px, env(safe-area-inset-left)); }
  .v-stage { margin: 0 max(16px, env(safe-area-inset-left)); }
  .v-cap { display: none; }
  .v-prev, .v-next { width: 36px; height: 36px; font-size: 15px; }
  .v-close { height: 28px; margin-left: auto; }
  .v-zoom-ui { display: none; }
  .v-bottom { gap: var(--s4); }
}

@media (max-width: 380px) {
  .sections.many a { padding: 8px 9px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .stage > .in, .viewer[open], .v-stage img.in, .menu[open] .m-sheet, .menu[open] li { animation: none; }
  .v-zoom.ease { transition: none; }
  .sections .pill, .more, .tile .cover, .tile .cover img, .tile .t i, .acts i, .more i, .acts a, .acts button, .more a { transition: none; }
}