/* Section styles for the current page layout. Loaded after styles.css. */

/* lime band: the accent as paper, navy as ink */
.band-lime {
  --color-paper: var(--lime); --color-paper-2: var(--lime-2); --color-paper-3: var(--lime-2);
  --color-ink: var(--navy); --color-ink-2: var(--navy-2); --color-muted: var(--navy-3);
  --color-rule: var(--navy); --color-accent: var(--navy); --color-accent-ink: var(--lime); --color-focus: var(--navy);
}

/* scene: a full-bleed photograph with a statement on it */

/* a vertical chain of steps */
.chain--tall { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.chain--tall::before { top: 10px; bottom: 10px; left: 6px; right: auto; width: 2px; height: auto; }
.chain--tall li::before { top: 4px; }
.chain--tall li { min-height: 20px; padding: 0 0 0 var(--space-xl); font-size: var(--text-md); }

/* the areas carousel and the project slider */
.marquee { overflow: hidden; }
.marquee ul { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: slide 38s linear infinite; }
.marquee--back ul { animation-direction: reverse; }
.marquee li { display: flex; align-items: center; padding-right: var(--space-2xl); font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: var(--tracking-display); line-height: 1.5; white-space: nowrap; }
.marquee li::after { content: ""; width: 0.26em; height: 0.26em; margin-left: var(--space-2xl); border-radius: var(--radius-pill); background: var(--color-accent); }
.marquee li:nth-child(even) { color: var(--color-accent); }
.marquee li:nth-child(even)::after { background: var(--color-ink); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee ul { flex-wrap: wrap; width: auto; padding-inline: var(--gutter); animation: none; } }

.a-work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.a-work__head > div:first-child { display: grid; gap: var(--space-lg); }
.a-work__nav { display: flex; gap: var(--space-xs); }
.a-work__nav button { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--color-ink); border-radius: var(--radius-pill); background: none; color: var(--color-ink); font: 700 var(--text-lg)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.a-work__nav button:hover { background: var(--color-ink); color: var(--color-paper); }
.a-work__nav button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.reel { --edge: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); display: flex; gap: var(--space-lg); margin: 0; padding: var(--space-md) var(--edge); overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.reel__card { flex: 0 0 min(84vw, 34rem); display: grid; gap: var(--space-md); align-content: start; min-height: 32rem; padding: var(--space-xl); border-radius: var(--space-md); background: var(--color-paper); color: var(--color-ink); scroll-snap-align: start; }
.reel__n { color: var(--color-muted); font-size: var(--text-sm); }
.reel__n b { margin-right: var(--space-xs); color: var(--color-accent); font-size: var(--text-xl); font-weight: 800; }
.reel__card h3 { font-size: var(--text-2xl); }
.a-work .quotes { margin-top: var(--space-2xl); }

/* the day table: what comes in, without and with */
.day { display: grid; margin-top: var(--space-2xl); }
.day__row { display: grid; grid-template-columns: 3fr 4fr 5fr; gap: var(--space-lg); align-items: center; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.day__head { border-top: 0; color: var(--color-muted); font-size: var(--text-sm); }
.day__head span:last-child { padding-left: var(--space-2xl); }
.day__row b { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.day__off { color: var(--color-muted); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--color-muted) 55%, transparent); }
.day__on { position: relative; padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-2xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); font-weight: 700; }
.day__on::before { content: ""; position: absolute; left: var(--space-lg); top: 50%; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--lime); transform: translateY(-50%); }

@media (max-width: 60rem) {
  .day__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-md); }
  .day__head { display: none; }
}
@media (max-width: 40rem) {
  .reel__card { padding: var(--space-lg); }
}

/* the day section, the control panel and the four steps */
.a-day { padding-bottom: var(--space-4xl); overflow: hidden; }
.a-day h2 { max-width: 24ch; margin-bottom: var(--space-lg); }
.a-day__more { margin: var(--space-4xl) 0 var(--space-xl); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.ctrl__head { grid-column: 1 / span 5; display: grid; gap: var(--space-lg); align-content: center; }
.ctrl__show { grid-column: 7 / -1; margin-bottom: 0; }
.ctrl { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); }
.ctrl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); align-items: center; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.ctrl__row:first-child { border-top: 0; }
.ctrl__row b { font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; }
.ctrl__say { grid-column: 1 / -1; color: var(--color-ink-2); }
.seg { display: inline-flex; padding: var(--space-3xs); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper); }
.seg button { height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-muted); font: 700 var(--text-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.seg button:hover { color: var(--color-ink); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--4 h3 { font-size: var(--text-xl); }
.steps--4 p { font-size: var(--text-lg); }
@media (max-width: 60rem) {
  .ctrl__head, .ctrl__show { grid-column: 1 / -1; }
  .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .ctrl__row { grid-template-columns: minmax(0, 1fr); }
}

/* quotes under the projects: navy cards with the lime accent */
.a-work .quotes figure { gap: var(--space-lg); align-content: space-between; padding: var(--space-xl); border-top: var(--bracket) solid var(--lime); border-radius: var(--space-md); background: var(--navy); color: var(--white); }
.a-work .quotes blockquote { font-size: var(--text-lg); line-height: 1.4; }
.a-work .quotes blockquote::before { content: "\201C"; display: block; height: 0.55em; margin-bottom: var(--space-sm); color: var(--lime); font-size: var(--text-figure); font-weight: 800; line-height: 1; }
.a-work .quotes figcaption { display: grid; gap: var(--space-3xs); color: var(--slate); }
.a-work .quotes figcaption b { color: var(--lime); font-size: var(--text-md); font-weight: 700; }