/* The front flow (round 02): the brief, three territories against the headline, the system, the asset family.
   Everything older sits after the Appendix divider and still uses deck.css + mocks.css only. */

/* ---------- big statement slides ---------- */
.state { padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.state .display { max-width: 15ch; }
.state .h1 { max-width: 20ch; }
.state .lede { font: 300 26px/1.4 var(--body); max-width: 40ch; color: #3d4b48; }
.tile.forest .lede, .tile.night .lede { color: #c9d1ce; }
.kicker { font: 400 16px/1.2 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; font-feature-settings: "liga" 0; white-space: pre; }

/* numbered checklist (what it has to do) */
.checks { display: grid; gap: 0; border-top: 1px solid rgba(10,47,42,.18); }
.checks > div { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 22px 0 24px; border-bottom: 1px solid rgba(10,47,42,.18); }
.checks .n { font: 400 15px/1 var(--mono); letter-spacing: 1.4px; opacity: .55; }
.checks p { font: 400 30px/1.15 var(--display); }
.tile.forest .checks, .tile.forest .checks > div { border-color: rgba(244,241,239,.2); }

/* territory card: image on top, number, name, one line */
.terr { display: grid; grid-template-rows: 1fr auto; background: var(--cheekbone); }
.terr .img { position: relative; overflow: hidden; }
.terr .words { padding: 28px 32px 34px; display: grid; gap: 6px; }
.terr .words h3 { font: 500 20px/1.45 var(--display); margin-top: 6px; }
.terr .words p { font: 300 20px/1.45 var(--body); color: #3d4b48; max-width: 34ch; }

/* territory opener chip, top left of a hero slide */
.chip { position: absolute; z-index: 6; left: 32px; bottom: 28px; display: flex; gap: 14px; align-items: center; padding: 10px 16px 10px 14px; border-radius: 999px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(10px); color: var(--forest); font: 400 15px/1 var(--mono); letter-spacing: 1.6px; text-transform: uppercase; font-feature-settings: "liga" 0; white-space: pre; }
.chip b { font-weight: 400; opacity: .5; }

/* ---------- a website hero at true desktop size (1440x810), scaled to its tile (deck.js sets --k) ---------- */
.site { position: absolute; left: 0; top: 0; width: 1440px; height: 810px; transform-origin: 0 0; transform: scale(var(--k, 1)); overflow: hidden;
  background: var(--cheekbone); color: var(--forest); }
.site-wrap { position: absolute; inset: 0; }
.site .media { position: absolute; inset: 0; overflow: hidden; }
.site .media > img, .site .media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site nav { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 59px; display: flex; justify-content: space-between; background: rgba(244,241,239,.6); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(10,47,42,.25); }
.site nav span { display: flex; align-items: center; justify-content: center; width: 100px; font: 400 14px/1.2 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; font-feature-settings: "liga" 0; }
.site nav .l, .site nav .r { display: flex; }
.site nav .l span { border-right: 1px solid rgba(10,47,42,.25); }
.site nav .r span { border-left: 1px solid rgba(10,47,42,.25); }
.site nav .r span:last-child { background: var(--forest); color: var(--chartreuse); }
.site nav img { position: absolute; left: 50%; top: 20px; width: 143px; height: 19px; transform: translateX(-50%); }
.site .copy { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.site .copy .tg { font: 400 12px/1.2 var(--mono); letter-spacing: 3.6px; text-transform: uppercase; font-feature-settings: "liga" 0; }
.site .copy h1 { font: 400 84px/.95 var(--display); letter-spacing: -1px; font-feature-settings: "liga" 0; }
.site .copy p { font: 400 16px/1.5 var(--body); max-width: 420px; }
.site .copy.measured h1 { font-size: 74px; } /* clears the hand and bottle */
.site .btn { display: flex; align-items: center; justify-content: center; height: 40px; width: 200px; font: 400 14px/1 var(--mono); letter-spacing: 2.4px; text-transform: uppercase; background: var(--chartreuse); color: var(--forest); }
.site.light-ink { color: var(--cheekbone); }
.site.light-ink nav, .site.light-ink nav .l span, .site.light-ink nav .r span { border-color: rgba(244,241,239,.3); }

/* ---------- Measured: one hairline grid, plus marks on the crossings, mono readouts, one number ----------
   deck.js draws the lines and plus marks from data-cols / data-rows (fractions, e.g. "0.25,0.5,0.75").
   On arrival the plus marks cut in first, then the lines draw out of them (the only smooth movers);
   readouts decode ([data-decode]). Ink is forest on light images; .mx.bone for dark ones. */
.mx { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--forest); --ink: rgba(10,47,42,.32); }
.mx.bone { color: var(--cheekbone); --ink: rgba(244,241,239,.42); }
.mx .ln { position: absolute; background: var(--ink); }
.mx .ln.v { top: 0; bottom: 0; width: 1px; }
.mx .ln.h { left: 0; right: 0; height: 1px; }
.mx .pl { position: absolute; width: 17px; height: 17px; margin: -8px 0 0 -8px; }
.mx .pl::before, .mx .pl::after { content: ""; position: absolute; background: currentColor; }
.mx .pl::before { left: 8px; top: 0; width: 1px; height: 17px; }
.mx .pl::after { top: 8px; left: 0; height: 1px; width: 17px; }
.mx .rd { position: absolute; font: 400 15px/1.35 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; font-feature-settings: "liga" 0; white-space: pre; }
.mx .rd.big { font: 400 64px/1 var(--display); letter-spacing: -1px; text-transform: none; }
.mx .rd.big small { display: block; margin-top: 10px; font: 400 14px/1.3 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; }
/* a measured square on the image, with its label */
.mx .sq { position: absolute; border: 1px solid currentColor; }
.mx .sq::before, .mx .sq::after { content: ""; position: absolute; width: 7px; height: 7px; background: currentColor; }
.mx .sq::before { left: -4px; top: -4px; } .mx .sq::after { right: -4px; bottom: -4px; }
.mx .sq .rd { left: 0; top: calc(100% + 10px); font-size: 13px; }
/* small scale: tiles that are a quarter of the stage or less */
.mx.sm .rd { font-size: 12px; letter-spacing: 1.1px; }
.mx.sm .rd.big { font-size: 40px; }
.mx.sm .pl { transform: scale(.75); }

.slide.active .mx .pl, .slide.active .mx .sq { animation: mx-cut 1ms steps(1) both; animation-delay: calc(.35s + var(--i, 0) * .09s); }
.slide.active .mx .ln.v { animation: mx-draw-v 1.1s cubic-bezier(.65, 0, .2, 1) both; animation-delay: calc(.6s + var(--i, 0) * .08s); }
.slide.active .mx .ln.h { animation: mx-draw-h 1.1s cubic-bezier(.65, 0, .2, 1) both; animation-delay: calc(.6s + var(--i, 0) * .08s); }
@keyframes mx-cut { from { visibility: hidden; } to { visibility: visible; } }
@keyframes mx-draw-v { from { transform: scaleY(0); } }
@keyframes mx-draw-h { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .slide.active .mx * { animation: none !important; } }
@media print { .mx * { animation: none !important; } }

/* ---------- Transformed: light passing across skin (a soft band, screen-blended), on a slow loop ---------- */
.sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sweep::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,246,228,.0) 20%, rgba(255,246,228,.38) 50%, rgba(255,246,228,0) 80%, transparent 100%);
  mix-blend-mode: soft-light; filter: blur(12px); transform: rotate(8deg); }
.slide.active .sweep::after { animation: sweep 7s cubic-bezier(.45, 0, .3, 1) .6s infinite; }
@keyframes sweep { 0% { left: -60%; } 70%, 100% { left: 120%; } }
@media print { .sweep::after { display: none; } }

/* ---------- Activated: the cell breathes (slow scale + a lift in light), a placeholder for the motion it grows into ---------- */
.slide.active .breathe { animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); filter: brightness(1) saturate(1); } to { transform: scale(1.045); filter: brightness(1.06) saturate(1.12); } }
@media print { .breathe { animation: none !important; } }

/* ---------- labels under a row of studies ---------- */
.cap { position: absolute; z-index: 3; left: 16px; bottom: 14px; padding: 7px 11px 8px; border-radius: 8px; background: rgba(255,255,255,.86); color: var(--forest);
  font: 400 12px/1 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; font-feature-settings: "liga" 0; white-space: pre; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 4px 0; }
.col-head h3 { font: 400 34px/1 var(--display); }

/* next steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.steps > div { background: var(--cheekbone); border-radius: var(--r); padding: 32px 32px 36px; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.steps h3 { font: 400 40px/1.05 var(--display); }
.steps p { font: 300 21px/1.45 var(--body); color: #3d4b48; }
.steps ul { list-style: none; display: grid; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(10,47,42,.15); }
.steps li { font: 400 15px/1.35 var(--mono); letter-spacing: .4px; }

/* two asks: Now and Next side by side in one tile */
.asks { display: grid; grid-template-columns: 1fr 1fr; }
.asks > div { padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.asks > div + div { border-left: 1px solid rgba(244,241,239,.2); }
.asks h3 { font: 500 20px/1.45 var(--display); margin-bottom: 6px; }
.asks p { font: 300 20px/1.45 var(--body); color: #c9d1ce; max-width: 36ch; min-height: calc(4 * 1.45em); } /* same height both sides, so the headlines line up */

/* slide 7 arrives as a shift from slide 6: the square photo tile slides from the left half to the right, the text
   panel swaps to the left, whip-timed (motion-sheet Brief 17) with the text a few frames behind; the tile shows
   SK-B's frame on the way and hard-cuts to SK-C once it lands */
.slide.shift.active .shift-tile { animation: shift-tile .7s cubic-bezier(.75, 0, .12, 1) .15s both; }
.slide.shift.active .shift-text { animation: shift-text .7s cubic-bezier(.75, 0, .12, 1) .19s both; }
.slide.shift.active { transition: none; }   /* it starts as an exact copy of slide 6, so it swaps in at once */
.slide.shift .shift-from { z-index: 2; }
.slide.shift.active .shift-from { animation: shift-fade .6s cubic-bezier(.25, .1, .25, 1) .9s both; }
@keyframes shift-tile { from { transform: translateX(-840px); } }
@keyframes shift-text { from { transform: translateX(1048px); } }
@keyframes shift-cut { to { visibility: hidden; } }
@media print { .slide.shift .shift-from { display: none; } }

/* parallax push-in holding the 5 → 6 move: slide 5's photo eases in while it sits, slide 6's copy of it picks up at
   the same scale, keeps pushing and trails the tile by a few px as it slides, then the window keeps a slow push */
.slide.shift.active .shift-from { animation: shift-push .7s cubic-bezier(.75, 0, .12, 1) .15s both, shift-close .5s cubic-bezier(.75, 0, .12, 1) .9s both, shift-fade .3s ease 1.4s both; }
@keyframes shift-push { from { transform: scale(1); } to { transform: scale(1.06); } }   /* starts at the size slide 7 shows it, so no jump */
@media print { .push, .shift-tile video { animation: none !important; } }

/* social: four instagram post mockups on black */
.tile.ig-row { background: #000; display: flex; align-items: center; justify-content: center; gap: 56px; }
.igp { width: 380px; background: #fff; border-radius: 18px; overflow: hidden; color: #111; }
.igp .ig-top, .igp .ig-bot { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.igp .ig-top { font: 500 15px/1 var(--body); }
.igp .ig-av { width: 30px; height: 30px; border-radius: 50%; background: var(--forest); }
.igp .ig-more { margin-left: auto; letter-spacing: 1px; }
.igp video { display: block; width: 382px; height: 380px; margin: 0 -1px; object-fit: cover; }
.igp .ig-bot svg { width: 24px; height: 24px; fill: none; stroke: #111; stroke-width: 1.6; stroke-linejoin: round; }
.igp .ig-bot .ig-save { margin-left: auto; }
.slide.active .igp { animation: ig-in .6s cubic-bezier(.75, 0, .12, 1) .25s both; }
.slide.active .igp:nth-child(2) { animation-delay: .33s; }
.slide.active .igp:nth-child(3) { animation-delay: .41s; }
.slide.active .igp:nth-child(4) { animation-delay: .49s; }
@keyframes ig-in { from { transform: translateY(120px); opacity: 0; } }
@media print { .igp { animation: none !important; } }
@keyframes shift-fade { to { opacity: 0; } }
/* the face closes down into SK-C's unit square (44–68% across, 32–56% down while it holds), then hands over */
@keyframes shift-close { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(32% 32% 44% 44%); } }

/* the system, full bleed: the canvas covers the slide and opens from the plus-system tile's rect (fl-system.js
   zooms the grid in step, same timing) */
.slide.flx { position: absolute; }
.slide.flx .fl-system { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 5; }
@keyframes flx-open { from { clip-path: inset(24px 968px 24px 24px round 14px); } to { clip-path: inset(0 0 0 0 round 0); } }
@media print { .slide.flx .fl-system { clip-path: none; } }
/* the text panel is pushed off ahead of the opening edge, keeping the 16px gap, so the grid never wipes over its text */
@keyframes flx-push { to { transform: translateX(968px); } }

/* Journal · dither: one canvas fills the slide (black, like the social slide before it) */
.slide.dfl { background: #000; }
.slide.dfl .dither-flow, .slide.dfl .dither-grid { position: absolute; inset: 0; width: 1920px; height: 1080px; }

/* Journal · site: the journal scrolling on a studio display */
.tile.studio { background: #eae5dd; display: grid; place-items: center; }
.sd { display: flex; flex-direction: column; align-items: center; transform: translateY(20px); }
.sd-screen { width: 1340px; height: 754px; padding: 22px; background: #0d0d0d; border-radius: 22px; box-shadow: 0 0 0 4px #c9c8c6, 0 40px 80px -30px rgba(0,0,0,.45); }
.sd-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 4px; }
.sd-neck { width: 300px; height: 150px; background: linear-gradient(90deg, #b9b8b5, #e2e1de 45%, #cfcecb); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); margin-top: -2px; }
.sd-foot { width: 360px; height: 14px; border-radius: 0 0 6px 6px; background: linear-gradient(#d8d7d4, #a9a8a5); }
.slide.active .sd { animation: sd-in .9s cubic-bezier(.75, 0, .12, 1) .1s both; }
@keyframes sd-in { from { transform: translateY(160px); opacity: 0; } }

/* The molecule · close: starts as slide 13's image, closes to a third while two more slide in on the right */
.slide.thirds > .tile { position: absolute; top: 24px; height: 1032px; width: 613.33px; overflow: hidden; }
.slide.thirds .t1 { left: 24px; }
.slide.thirds .t2 { left: 653.33px; }
.slide.thirds .t3 { left: 1282.67px; }
.slide.thirds.active .t1 { animation: th-close .9s cubic-bezier(.75, 0, .12, 1) .35s both; }
.slide.thirds.active .t2 { animation: th-in .9s cubic-bezier(.75, 0, .12, 1) .45s both; }
.slide.thirds.active .t3 { animation: th-in .9s cubic-bezier(.75, 0, .12, 1) .55s both; }
@keyframes th-close { from { width: 1032px; } }
@keyframes th-in { from { transform: translateX(1300px); } }
.igp .ig-av { display: grid; place-items: center; }
.igp .ig-av::after { content: ''; width: 13px; height: 13px; background: url(assets/img/aramore-a.svg) center / contain no-repeat; }

/* Reels: four 9:16 Instagram reels on black */
.tile.reels { gap: 72px; }
.igr { position: relative; width: 340px; height: 736px; border-radius: 18px; overflow: hidden; background: #0a2f2a; color: #fff; }
.igr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.igr::after { content: ''; position: absolute; inset: auto 0 0; height: 220px; background: linear-gradient(transparent, rgba(0,0,0,.45)); pointer-events: none; }
.igr-tag { position: absolute; left: 18px; top: 18px; z-index: 2; font: 600 17px/1 -apple-system, "Helvetica Neue", sans-serif; }
.igr-side { position: absolute; right: 14px; bottom: 90px; z-index: 2; display: flex; flex-direction: column; gap: 22px; }
.igr-side svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.igr-foot { position: absolute; left: 16px; right: 70px; bottom: 20px; z-index: 2; font: 400 14px/1.35 -apple-system, "Helvetica Neue", sans-serif; }
.igr-who { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.igr .ig-av { width: 30px; height: 30px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 1.5px #fff; display: grid; place-items: center; }
.igr .ig-av::after { content: ''; width: 13px; height: 13px; background: url(assets/img/aramore-a.svg) center / contain no-repeat; }
.igr-follow { padding: 4px 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 7px; font-size: 13px; }
.igr-foot p { margin: 0; }
.slide.active .igr { animation: ig-in .6s cubic-bezier(.75, 0, .12, 1) .25s both; }
.slide.active .igr:nth-child(2) { animation-delay: .33s; }
.slide.active .igr:nth-child(3) { animation-delay: .41s; }
.slide.active .igr:nth-child(4) { animation-delay: .49s; }

/* section breaker (.brk), read like a scan: one upright line sweeps left to right while one level line runs down
   the word, and the word is built in where both have passed (two clips); then both lines fade */
.slide.brk .tile { position: relative; overflow: hidden; }
.brk-grid { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.brk-grid i.v { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; margin-left: -1px; background: #f4f1ef; }
.brk-word { position: absolute; left: 0; right: 0; bottom: 0; padding: 4% 40px 0; line-height: 1; }
.brk-word span { display: inline-block; font: 400 100px/1 var(--display); color: #f4f1ef; white-space: nowrap; letter-spacing: -.01em; }
.brk-word .ghost { visibility: hidden; }   /* holds the word's size; the visible copy is .solid */
.brk-word .sx { position: absolute; inset: 0; }
.brk-word .solid { position: absolute; left: 40px; bottom: 0; }
.brk-word i.h { position: absolute; left: 0; right: 0; top: 100%; height: 2px; margin-top: -1px; background: #f4f1ef; opacity: 0; }
.slide.brk.active .brk-grid i.v { animation: brk-v 1.1s cubic-bezier(.75, 0, .12, 1) .3s both, brk-fade .4s ease 1.6s forwards; }
.slide.brk.active .brk-word .sx { animation: brk-x 1.1s cubic-bezier(.75, 0, .12, 1) .3s both; }
.slide.brk.active .brk-word i.h { animation: brk-h 1.1s cubic-bezier(.75, 0, .12, 1) .45s both, brk-on .01s linear .45s forwards, brk-fade .4s ease 1.6s forwards; }
.slide.brk.active .brk-word .solid { animation: brk-y 1.1s cubic-bezier(.75, 0, .12, 1) .45s both; }
@keyframes brk-v { from { left: 0; } }
@keyframes brk-x { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes brk-h { from { top: 4%; } }
@keyframes brk-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes brk-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes brk-on { to { opacity: 1; } }

/* The mark: on bone, the grid draws in, the NAD+ 1094 mark traces in cell by cell on it, then fills; the grid
   settles back. A click (.split, set by the slide's step) closes the mark to the left half and brings the product in */
.slide.mk > .tile { position: absolute; top: 24px; height: 1032px; overflow: hidden; transition: left .9s cubic-bezier(.75, 0, .12, 1), width .9s cubic-bezier(.75, 0, .12, 1), clip-path .9s cubic-bezier(.75, 0, .12, 1); }
.slide.mk .mk-a { left: 24px; width: 1872px; }
.slide.mk .mk-b { left: 976px; width: 920px; clip-path: inset(0 0 0 100% round 14px); }
.slide.mk.split .mk-a { width: 936px; }
.slide.mk.split .mk-b { }
.slide.mk.split .mk-b { clip-path: inset(0 0 0 0 round 14px); }
.mark-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mark-grid .g { stroke: #0a2f2a; stroke-opacity: .3; stroke-width: .9; fill: none; }
.mark-grid .m { fill: #0a2f2a; }
.slide.mk.active .mark-grid .g { stroke-dasharray: 1; animation: mk-draw 1s cubic-bezier(.75, 0, .12, 1) calc(.3s + var(--d)) both, mk-dim .8s ease 3.4s forwards; }
@keyframes mk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-dim { to { stroke-opacity: .12; } }
.brk-kick { position: absolute; left: 56px; top: 48px; z-index: 3; color: #f4f1ef; }