/* tasteskill / base.css
   A neutral foundation: reset, token names, fluid type steps, a 12-column grid, states and the motion
   helpers from references/motion.md. It has no look of its own. Copy it into the project, replace the
   token values with the ones on the direction sheet, and build on top. Delete what you do not use. */

/* ---------- tokens (replace with the dealt palette and type system) ---------- */
:root {
  --bg: #F6F2EA;
  --surface: #EEE7D8;
  --ink: #1C1A17;
  --muted: #5B5346;
  --accent: #C8502A;
  --accent-ink: #F6F2EA;
  --accent-button: #B64423; /* darker than the brand ember, used only behind small text/icons so it still clears 4.5:1 with cream */

  --font-display: 'Unbounded', sans-serif;
  --font-text: 'Space Grotesk', sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-lead: clamp(1.25rem, 1rem + 1.2vw, 1.625rem);
  --step-head: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --step-hero: clamp(34px, 2px + 8.6vw, 164px); /* the monument wordmark, tuned so "uRISe" + inset photo + "Creative" spans ~90% of the viewport without wrapping or overflowing */

  --margin: clamp(1.1rem, 1rem + 1vw, 2rem);    /* page side margin: tight, so content reaches the edges */
  --gutter: clamp(1rem, 2vw, 2rem);      /* column gap */
  --section: clamp(5rem, 12vw, 13rem);   /* space between sections */
  --radius: 0px;                          /* one radius for the whole page: 0, square corners throughout */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* entrances, moving hovers, UI under 600ms */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);        /* reveals of 800ms and longer, line rises, openings */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);     /* wipes, panels, things that travel while visible */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);       /* slow scale and drift on photographs */
  --ease-exit: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* something leaving for good, short */
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;                                  /* picture openings and clip wipes */
  --stagger-line: 90ms;
  --stagger-item: 70ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 6rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: inherit; text-wrap: balance; hyphens: none; }
.display { font-size: var(--step-hero); line-height: 0.85; letter-spacing: -0.045em; }
.head { font-size: var(--step-head); line-height: 1.02; letter-spacing: -0.02em; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 40ch; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: tabular-nums; }
.only-wide { display: none; }
@media (min-width: 48em) { .only-wide { display: inline; } }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: calc(var(--section) / 2); }
.section + .section { margin-top: 0; }
.bleed { margin-inline: calc(var(--margin) * -1); }
.cover { width: 100%; height: 100%; object-fit: cover; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.4rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}
.field { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); }

/* ---------- contact choice (email / WhatsApp) ---------- */
.contact-choice { position: relative; display: inline-block; }
.contact-choice summary { list-style: none; cursor: pointer; }
.contact-choice summary::-webkit-details-marker { display: none; }
.contact-choice-menu {
  position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 20;
  display: flex; flex-direction: column; width: max-content; overflow: hidden;
  background: var(--bg); color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 0.75rem 2rem rgba(0,0,0,0.22);
}
.contact-choice-end .contact-choice-menu { left: auto; right: 0; }
.contact-choice-menu-up { top: auto; bottom: calc(100% + 0.5rem); }
.contact-choice .contact-choice-menu a {
  display: block; padding: 0.5rem 0.85rem;
  text-decoration: none; color: var(--ink); font-size: var(--step-small); white-space: nowrap;
}
.contact-choice-menu a + a { border-top: 1px solid rgba(28,26,23,0.12); }
@media (hover: hover) and (pointer: fine) {
  .contact-choice .contact-choice-menu a:hover { background: rgba(28,26,23,0.08); }
}
.contact-choice-menu a:focus-visible { background: rgba(28,26,23,0.08); }

/* ---------- motion helpers (content stays visible without JavaScript) ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }
.shutter { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: ad-rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: ad-line 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in { clip-path: inset(0); }
  .js .shutter[data-reveal].is-in img { transform: none; }
}
@keyframes ad-rise { to { opacity: 1; transform: none; } }

/* ==========================================================================
   uRISe Creative — page styles
   ========================================================================== */

body { background: var(--bg); overflow-x: hidden; }

/* ---------- header / nav row ---------- */
.topnav {
  position: absolute; inset-inline: 0; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: var(--margin);
}
.topnav-left { justify-self: start; display: flex; align-items: center; gap: 1.5rem; }
.topnav-right { justify-self: end; }
.topnav .mark { justify-self: center; display: flex; align-items: center; gap: 0.5em; }
.topnav .mark svg { width: 22px; height: 22px; }
.topnav .mark span { font-family: var(--font-display); font-weight: 800; font-size: var(--step-small); letter-spacing: -0.01em; }
.topnav .link { font-size: var(--step-small); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 4.5rem;
}
.hero-stage { width: 100%; display: flex; justify-content: center; }
.hero-title { display: block; }
.hero-logo { width: min(88vw, 840px); height: auto; display: block; }

.hero-sub { text-align: center; margin-top: clamp(2.5rem, 7vw, 4.5rem); }
.hero-sub p { font-family: var(--font-text); font-size: var(--step-lead); line-height: 1.3; max-width: 22ch; margin-inline: auto; color: var(--ink); }
.hero-sub p + p { margin-top: 0.15em; }

.hero-bottom {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: var(--margin);
}
.hero-bottom .place { font-size: var(--step-small); color: var(--muted); }
.hero-bottom .button { font-family: var(--font-text); font-size: var(--step-small); font-weight: 500; background: var(--accent-button); color: var(--accent-ink); }

@media (max-width: 48em) {
  .hero { padding-top: 4rem; }
  .hero-bottom { flex-direction: column; align-items: stretch; gap: 0.75rem; bottom: 1.25rem; }
  .hero-bottom .button { width: 100%; }
}

/* ---------- closing marquee (the signature move) ---------- */
.closing-marquee { position: relative; overflow: hidden; background: var(--surface); padding-block: 1.4rem; }
.closing-track {
  display: flex; align-items: center; white-space: nowrap; will-change: transform;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-head);
  letter-spacing: -0.02em; color: var(--ink);
}
.closing-track > span { padding-inline: 0; }
.closing-track .mark-dot { display: inline-flex; width: 1.3em; height: 1.3em; margin-inline: 0.18em; vertical-align: middle; }
.closing-track .mark-dot svg { width: 100%; height: 100%; }
.js .closing-track { animation: marquee 18s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .js .closing-track { animation: none; transform: none; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- sections, general ---------- */
.section-head { font-size: var(--step-head); margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
section[id] { scroll-margin-top: 2rem; }

/* ---------- capabilities (features) ---------- */
.capabilities { padding-block: clamp(6rem, 14vw, 10rem); }
.cap-grid { position: relative; }
.section-head.cap-head { grid-column: 1 / -1; }
.cap-col { grid-row: 2; grid-column: span 3; }
.cap-col:nth-of-type(1) { grid-column: 1 / span 3; }
.cap-col:nth-of-type(2) { grid-column: 4 / span 3; }
.cap-col:nth-of-type(3) { grid-column: 7 / span 3; }
.cap-note {
  grid-row: 2; grid-column: 10 / span 3; align-self: start;
  font-size: var(--step-body); color: var(--ink); padding-top: 0.2em;
}
.cap-group-name { font-size: var(--step-body); font-weight: 700; margin-bottom: 1.4em; }
.cap-list { display: flex; flex-direction: column; gap: 0.55em; }
.cap-list button { text-align: left; font-size: var(--step-body); color: var(--muted); line-height: 1.25; transition: color var(--t-hover) ease; }
.cap-list button:hover, .cap-list button:focus-visible { color: var(--ink); }
.cap-mobile-sum { display: none; margin-top: 1em; font-size: var(--step-body); color: var(--ink); }

@media (max-width: 48em) {
  .cap-grid { display: flex; flex-direction: column; gap: 2.5rem; }
  .cap-col { grid-column: auto; }
  .cap-note { display: none; }
  .cap-mobile-sum { display: block; }
  .cap-list button { font-size: var(--step-body); pointer-events: none; color: var(--ink); }
}

/* ---------- work ---------- */
.work { padding-block: clamp(6rem, 14vw, 10rem); background: var(--surface); }
.work-list { columns: 2; column-gap: clamp(1.75rem, 4vw, 3rem); }
.work-list > .section-head { column-span: all; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.work-item { break-inside: avoid; display: block; width: 100%; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.work-figure { position: relative; }
.work-figure img, .work-figure video { width: 100%; height: 100%; object-fit: cover; }
.work-figure video { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-ui) ease; }
.work-figure video.is-playing { opacity: 1; }
.work-figure .work-poster { position: absolute; inset: 0; transition: opacity var(--t-ui) ease; }
.work-figure .work-poster.is-hidden { opacity: 0; }
.slot-a .work-figure, .slot-a img, .slot-a video { aspect-ratio: 3 / 2; }
.slot-b .work-figure, .slot-b img, .slot-b video { aspect-ratio: 4 / 5; }
.slot-c .work-figure, .slot-c img, .slot-c video { aspect-ratio: 16 / 9; }
.work-apps {
  column-span: all; break-inside: avoid; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3rem); margin-bottom: clamp(3rem, 6vw, 4.5rem);
  /* no margin-top: column-span:all elements don't collapse margins with the preceding item's
     margin-bottom like normal siblings do, so adding one here stacks instead of collapsing —
     doubles the gap versus every other item-to-item transition. The preceding item's own
     margin-bottom already provides the gap. */
}
.work-apps .work-item { margin-bottom: 0; } /* each figure's own aspect-ratio is set inline in index.html — the two mockups differ slightly (1770 vs 1756) */
.work-apps .work-figure { max-width: 60%; } /* full screenshot, no crop — just shown smaller so it doesn't dominate the row */
.work-apps .work-label { max-width: 60%; } /* matches the figure's width, sits flush above it */
.work-apps .work-caption, .work-apps .work-link, .work-apps .work-status {
  max-width: none; /* no cap, same as the photo captions — fills the available column width */
}
.work-label { font-size: var(--step-small); color: var(--muted); margin-bottom: 0.6em; }
.work-caption { font-size: var(--step-body); color: var(--ink); margin-top: 0.6em; }
.work-link, .work-status { font-size: var(--step-small); margin-top: 0.6em; }
.work-status { color: var(--muted); }
.work-play {
  position: absolute; right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center;
}
.work-play svg { width: 1rem; height: 1rem; }
.work-play .icon-pause { display: none; }
.work-play[aria-pressed="true"] .icon-play { display: none; }
.work-play[aria-pressed="true"] .icon-pause { display: block; }

@media (max-width: 48em) {
  .work-list { columns: 1; }
  .work-apps { grid-template-columns: 1fr; }
}

/* ---------- studio (about) ---------- */
.studio { padding-block: clamp(6rem, 14vw, 10rem); }
.studio-facts { grid-column: 1 / span 2; display: flex; flex-direction: column; gap: 1.1rem; align-self: start; }
.studio-fact dt { font-size: var(--step-small); color: var(--muted); }
.studio-fact dd { font-size: var(--step-small); margin: 0.2em 0 0; }
.studio-para { grid-column: 5 / span 8; font-size: var(--step-lead); line-height: 1.35; }
.studio-para p + p { margin-top: 1em; color: var(--muted); }
.studio-row2 { grid-column: 1 / -1; display: contents; }
.studio-row2-label { grid-column: 1 / span 2; font-size: var(--step-small); color: var(--ink); align-self: start; }
.studio-tools { grid-column: 5 / span 4; }
@media (min-width: 48em) {
  /* the margin-top meant for this row can't live on .studio-row2 itself — it's display:contents
     at this width, which generates no box, so a margin set on it directly is silently dropped by
     the browser. Both the label and the tools columns need it (not just one), since grid item
     margins don't shift sibling cells in the same row — otherwise they'd drift out of alignment
     with each other. Scoped to desktop only: mobile already gets its gap correctly from
     .studio-row2's own margin-top below, where it switches to display:block. */
  .studio-row2-label, .studio-tools { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
}
.studio-tools:nth-of-type(2) { grid-column: 9 / span 4; }
.tool-row { display: flex; gap: 1em; font-size: var(--step-small); padding: 0.45em 0; }
.tool-row .cat { color: var(--muted); min-width: 4.2em; flex-shrink: 0; }

@media (max-width: 48em) {
  .studio-facts, .studio-para, .studio-row2-label, .studio-tools { grid-column: 1 / -1; }
  .studio-para { margin-top: 1.5rem; }
  .studio-facts { flex-direction: row; flex-wrap: wrap; gap: 1.5rem 2rem; }
  .studio-row2 { margin-top: 3rem; display: block; }
  .studio-tools + .studio-tools { margin-top: 2rem; }
}

/* ---------- contact ---------- */
.contact { background: var(--ink); color: var(--bg); padding-block: clamp(4rem, 8vw, 6rem); }
.contact .section-head { color: var(--bg); }
.contact-row {
  display: block; padding-block: clamp(0.6rem, 2vw, 1.1rem);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-head); line-height: 1.1; letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.contact-row-lead { display: flex; align-items: center; gap: 1rem; }
.contact-badge { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-button); display: flex; align-items: center; justify-content: center; }
.contact-badge svg { width: 1.3rem; height: 1.3rem; }
.contact-row-email { font-size: var(--step-lead); font-family: var(--font-text); }
.contact-row a { text-decoration: none; }
.contact-row.muted-row { color: rgba(246,242,234,0.55); }
.contact-row.greeting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.contact-arrow {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-button); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; transition: transform var(--t-hover) var(--ease-out);
}
.contact-row.greeting:hover .contact-arrow, .contact-row.greeting:focus-within .contact-arrow { transform: scale(1.08); }
.contact-arrow svg { width: 1.1rem; height: 1.1rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--bg); padding-block: clamp(3rem, 8vw, 5rem); }
.footer-name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-hero); letter-spacing: -0.045em; line-height: 0.85; text-align: center; }
.footer-bottom { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: var(--step-small); color: rgba(246,242,234,0.6); }
.footer-bottom a { color: rgba(246,242,234,0.85); }

/* ---------- misc ---------- */
.credit-note { font-size: var(--step-small); color: rgba(246,242,234,0.6); }

@keyframes ad-line { to { transform: none; } }