/* Ultimate Human Labs: the PSYNC'D house style (styles.css, copied unchanged),
   plus what only UHL needs. Same palette for all three businesses (owner,
   27 Oct 2026); UHL differs by its logo and its pages. */

/* The UHL lockup is wider than PSYNC'D's: give it the same height, not width. */
.site-head .uhl-lockup { width:auto; height:84px; max-width:none; }
.site-foot .uhl-lockup { width:auto; height:72px; max-width:none; }
@media (max-width: 760px) { .site-head .uhl-lockup { height:60px; } }

/* Home: no photograph yet, so the hero is the mark on black (a real café
   photo replaces this when there is one; the brief's design notes). */
.uhl-hero { padding-block: clamp(48px, 8vw, 96px); background: radial-gradient(ellipse at 50% 0%, rgba(201,165,133,.10), transparent 60%), var(--black); }
.uhl-hero .hero-grid { display:flex; justify-content:center; }
.uhl-hero .hero-card { max-width: 760px; margin-inline:auto; }
.uhl-hero .emblem { width: 120px; height: 120px; object-fit: contain; }

/* Cards that are links: the whole card is the target. */
.card-link { display:flex; color:inherit; text-decoration:none; transition: border-color .15s ease, transform .15s ease; }
.card-link:hover, .card-link:focus-visible { border-color: var(--sand); transform: translateY(-2px); }
.card-k { margin:0; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sand); }
.uhl-offers { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Text beside a photo or an event card. */
.uhl-split { align-items:center; }
.uhl-photo { aspect-ratio: 4 / 3; min-height: 220px; display:grid; place-items:center; text-align:center; padding:24px;
  border:1px dashed var(--line); border-radius: 18px; color: var(--ink-3); background: var(--card); }

/* The café schedule: a table on a computer, stacked rows on a phone. */
.uhl-schedule { max-width: 860px; margin: 0 auto 16px; border:1px solid var(--line); border-radius: 18px; overflow:hidden; }
.uhl-row { display:grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr .6fr; gap: 12px; padding: 14px 20px; border-top:1px solid var(--line); color: var(--ink-2); }
.uhl-row:first-child { border-top:0; }
.uhl-row-head { background: var(--card); color: var(--ink-3); font-size:.8rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.uhl-row a { color: var(--sand); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width: 760px) {
  .uhl-row-head { display:none; }
  .uhl-row { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
}

/* The breakfast card. */
.uhl-event { text-align:left; }
.uhl-event-line { margin:.2rem 0; color: var(--ink-2); }
.uhl-mini { display:grid; gap: 12px; margin-top: 16px; }

/* Paragraphs beside a photo or card keep their spacing. */
.uhl-split p { margin: 0 0 1em; }
.uhl-split .checks { margin-top: .5em; }
.uhl-event { padding: 28px; }

/* 28 Oct 2026 fixes ------------------------------------------------------ */
/* Header: the side-by-side logo, so "Ultimate Human Labs" can be read at header size.
   The stacked logo stays in the footer and the home hero. */
.site-head .uhl-lockup-h { width:auto; height:48px; max-width:none; }
@media (max-width: 760px) { .site-head .uhl-lockup-h { height:34px; } }

/* Home hero: the page wrapper already pads it; don't pad twice. */
.uhl-hero { padding-block: 0; }

/* Step rows fill the width whatever the number of steps (the shared style assumes five). */
@media (min-width: 981px) {
  .timeline:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ticker: a pause control (WCAG 2.2.2). */
.ticker { position: relative; }
.ticker-pause { position:absolute; right:0; top:0; bottom:0; width:34px; border:0; padding:0; cursor:pointer;
  background: var(--sand); color: var(--on-sand); display:grid; place-items:center; box-shadow: -10px 0 10px var(--sand); }
.ticker-pause::before { content:""; width:8px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box; }
.ticker-pause[aria-pressed="true"]::before { width:0; height:0; border-style:solid; border-width:5px 0 5px 9px; border-color: transparent transparent transparent currentColor; border-right:0; }
.ticker-pause:focus-visible { outline: 2px solid #000; outline-offset: -4px; }
.ticker.paused .track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-pause { display:none; } }

/* Footer logo: keep its true proportions (the shared style fixes the width at 200px,
   which squashed it when combined with a fixed height). */
.site-foot .brand .uhl-lockup { width: auto; height: 96px; max-width: 100%; }

/* Offer cards: the same centred layout and even spacing as every other card. */
.uhl-offers .card-link { gap: 12px; }
.uhl-offers .card-link .badge { margin-bottom: 6px; }
.uhl-offers .card-link h3 { margin: 0; }
.uhl-offers .card-link p { margin: 0; line-height: 1.6; }
.card .card-k { color: var(--sand); }

/* Coffee Shop Coach: its own logo as the section heading. */
.csc-head { margin: 4px 0 8px; line-height: 0; }
.csc-logo { width: min(280px, 70%); height: auto; }

/* Stephan's photos, in a frame. 29 Oct: the studio's peach backdrop replaced with dark grey,
   lit softly behind him (owner: the peach didn't sit with black and gold). */
.uhl-hero .wrap { padding-block: 40px clamp(56px, 8vw, 104px); }
/* 29 Oct: the photo and the card are the same height, top and bottom (owner: the
   alignment between the two boxes looked weak). The home photo is a tall crop, so
   filling the card's height shows more of him rather than cutting his sides. */
.uhl-hero .uhl-hero-split { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.uhl-hero .uhl-hero-split .uhl-hero-photo { height: 100%; max-width: none; aspect-ratio: auto; object-position: 50% 0; }
.uhl-hero .uhl-hero-split .hero-card { margin: 0; }
.uhl-hero-photo { width: 100%; max-width: 400px; aspect-ratio: 4 / 5; object-fit: cover; display: block; margin: 0 auto; }
.photo-frame { border-radius: 18px; box-shadow: 0 0 0 1px rgba(201,165,133,.35); }
@media (max-width: 860px) {
  /* Phone: the words and buttons first, the photo after them, clear of the card */
  .uhl-hero .uhl-hero-split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .uhl-hero .uhl-hero-split .hero-card { margin: 0 auto; }
  .uhl-hero .uhl-hero-split .uhl-hero-photo { max-width: 300px; height: auto; aspect-ratio: 4 / 5; order: 2; }
  /* and less empty space between the logo and the card */
  .uhl-hero .wrap { padding-block: 24px 48px; }
}

/* Home, 1 Nov 2026 (owner: "the right approach"): UHL led by "this week", so it
   reads as an events page rather than PSYNC'D's centred card. The hero shows the
   next café sessions; "Coming Up" lists the four ways to meet, each with when. */
.wk-hero .wrap { padding-block: 40px clamp(56px, 7vw, 96px); }
.wk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: stretch; }
.wk-main { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; text-align: left; }
.wk-main h1 { margin: 0; }
.wk-main .lede { margin: 0; max-width: 52ch; }
.wk-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; border-radius: 18px; }
.wk-next { width: 100%; max-width: 620px; background: #1c1b1a; border: 1px solid rgba(201,165,133,.35); border-radius: 18px; padding: 20px 22px 8px; }
.wk-k { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sand); }
.wk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 4px rgba(201,165,133,.2); }
.wk-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.wk-row:first-of-type { border-top: 0; }
.wk-date { display: grid; justify-items: center; line-height: 1.05; background: var(--sand); color: var(--on-sand); border-radius: 12px; padding: 8px 0; }
.wk-dow, .wk-mon { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.wk-num { font-size: 1.6rem; font-weight: 600; }
.wk-row-2 .wk-date { background: transparent; color: var(--sand); box-shadow: inset 0 0 0 1px rgba(201,165,133,.5); }
.wk-what p { margin: 0; }
.wk-title { font-weight: 600; font-size: 1.05rem; }
.wk-free { margin-left: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--sand); white-space: nowrap; }
.wk-where { color: var(--ink-2); font-size: .95rem; }
.wk-sign { color: var(--ink-3); font-size: .85rem; }
.wk-map { font-size: .9rem; font-weight: 600; }
.wk-row-2 .wk-title { font-weight: 500; color: var(--ink-2); }

.up-list { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; border-top: 1px solid var(--line); }
.up-item { display: grid; grid-template-columns: 190px 1fr auto; gap: 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line); }
.up-when { display: grid; gap: 2px; }
.up-d { font-size: 1.25rem; font-weight: 600; color: var(--sand); }
.up-t { font-size: .85rem; color: var(--ink-3); }
.up-body h3 { margin: 2px 0 4px; }
.up-body p { margin: 0; color: var(--ink-2); }
.up-body .card-k { color: var(--sand); }
.up-go { white-space: nowrap; }

@media (max-width: 900px) {
  .wk-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .wk-hero .wrap { padding-block: 28px 48px; }
  .wk-photo { max-width: 320px; height: auto; aspect-ratio: 4 / 5; margin: 0 auto; }
  .wk-next { padding: 16px 16px 4px; }
  .wk-row { grid-template-columns: 56px 1fr; }
  .wk-map { grid-column: 2; justify-self: start; margin-top: -8px; }
  .up-item { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 22px 0; }
  .up-go { justify-self: start; }
}
.wk-main .actions { justify-content: flex-start; }
@media (max-width: 900px) {
  .wk-free { display: block; margin: 2px 0 4px; }
  .wk-main .actions { width: 100%; }
}
.wk-note { margin: 6px 0 10px; font-size: .78rem; color: var(--ink-3); }

/* 1 Nov 2026: the rest of UHL in the home page's rhythm (owner: "brilliant").
   Left-aligned heads and text; dates as date tiles; steps as a list down the page. */
.uhl .page-head { text-align: left; }
.uhl .page-head .inner { max-width: var(--wrap); align-items: flex-start; }
.uhl .page-head .lede { max-width: 60ch; }
.section-head.lh { text-align: left; align-items: flex-start; margin-left: 0; }
.dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dates-week { max-width: none; }
.dates .wk-row { grid-template-columns: 56px 1fr auto; }
.ev-head { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; margin: 8px 0 4px; }
.ev-head p { margin: 0 !important; }
.up-weeks .up-item { grid-template-columns: 190px 1fr; }
@media (max-width: 980px) { .dates { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .up-weeks .up-item { grid-template-columns: minmax(0, 1fr); } }
/* Left-aligned headings and text everywhere on UHL (PSYNC'D centres them) */
.uhl .section-head { text-align: left; align-items: flex-start; margin-left: 0; }
.uhl .prose { margin-inline: 0 !important; }
.uhl .org-form { margin-left: 0; }
.uhl-mini .field input { width: 100%; box-sizing: border-box; }
.uhl .prose .actions { justify-content: flex-start; }
.uhl .uhl-event, .uhl .uhl-event .card-k { text-align: left; }
.uhl .uhl-mini .field, .uhl .uhl-mini .field input, .uhl .uhl-mini .btn { width: 100%; max-width: none; box-sizing: border-box; }
.uhl .uhl-event { align-items: stretch; }
.uhl .up-list { margin-left: 0; }
.uhl .small.center { text-align: left; }
.uhl .two .actions { justify-content: flex-start; margin-top: 4px; }
/* UHL has no skyline photo: keep the footer gradient without requesting the missing image */
.site-foot { background: linear-gradient(180deg, rgba(20,20,20,0.86), rgba(16,16,16,0.97)); }
.uhl .legal { margin-left: 0; }

/* Map placeholder: not a link until the café's address is known (a link to "#" jumped to the top of the page). */
.wk-map-soon { opacity: .55; cursor: default; }

/* The crayon café drawing in the photo box, until a real photo goes in. */
.uhl-crayon { padding: 0; overflow: hidden; border-style: solid; }
.uhl-crayon svg { width: 100%; height: 100%; display: block; }