/* =========================================================
   Main page — adrshk.com
   Standalone styles (not shared with the case studies yet).
   Built from Figma "Main-page" (node 33:2689), 1362px frame.
   Card compositions use % of the macro card size, so they
   scale without distortion below the design width.
   ========================================================= */

:root {
  --ink: #000000;
  --muted: #999999;
  --line: #e6e6e6;
  --accent: #f85b18;
  --card-dark: #000000;
  --card-light: #f2f2f2;

  --frame-width: 1362px;
  --column-width: 812px;   /* year 120 + gap 12 + content 680 */
  --year-width: 120px;
  --radius-card: 12px;

  --link-hover: #182bf8;
  --link-active: #0a1fff; /* same hue, a touch more saturated for the tap */

  /* Material 3 Expressive springs sampled into linear() (mass 1) */
  --spring-effects-duration: 230ms; /* default effects: damping 1, stiffness 1600 */
  --spring-effects: linear(0, 0.0571, 0.1793, 0.3192, 0.4533, 0.571, 0.6691, 0.7483, 0.8106, 0.8587, 0.8954, 0.9231, 0.9437, 0.959, 0.9703, 0.9785, 0.9845, 0.9889, 0.992, 0.9943, 0.9959, 0.9971, 0.9979, 0.9985, 1);
  --spring-fast-spatial-duration: 358ms; /* fast spatial: damping 0.6, stiffness 800 */
  --spring-fast-spatial: linear(0, 0.0289, 0.1037, 0.2083, 0.329, 0.4551, 0.578, 0.692, 0.7931, 0.879, 0.9491, 1.0036, 1.0436, 1.0708, 1.0869, 1.094, 1.0941, 1.0889, 1.0802, 1.0694, 1.0576, 1.0457, 1.0344, 1.0242, 1.0153, 1.0079, 1.0021, 0.9976, 0.9944, 0.9924, 0.9913, 0.991, 0.9913, 0.992, 0.9929, 0.994, 0.9951, 0.9962, 0.9972, 0.9981, 1);
  --spring-spatial-duration: 433ms; /* default spatial: damping 0.8, stiffness 380 */
  --spring-spatial: linear(0, 0.0199, 0.0711, 0.1426, 0.2259, 0.3145, 0.4036, 0.4896, 0.5702, 0.6439, 0.7099, 0.7679, 0.818, 0.8606, 0.8963, 0.9256, 0.9494, 0.9682, 0.9828, 0.9939, 1.002, 1.0078, 1.0116, 1.0138, 1.0149, 1.0152, 1.0147, 1.0139, 1.0128, 1.0115, 1.0101, 1.0088, 1.0075, 1.0063, 1.0052, 1.0042, 1.0034, 1.0026, 1.002, 1.0015, 1);
}

/* self-hosted Geist (Google Fonts files, OFL); one variable file covers 400–600 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./Fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("./Fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
  background: #ffffff;
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 24px;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
h1,
h2 {
  margin: 0;
  font: inherit;
}

img,
video {
  display: block;
}

/* <picture> only picks the format; the <img> keeps its original layout.
   Chrome renders <source> inline, which would add a flex gap */
picture {
  display: contents;
}

picture > source {
  display: none;
}

.link {
  color: var(--accent);
  text-decoration: underline;
  /* macro (Figma text decoration): thickness 1.5%, offset 25%, colour auto, skip ink on */
  text-decoration-thickness: 1.5%;
  text-underline-offset: 25%;
  text-decoration-skip-ink: auto;
  transition: color var(--spring-effects-duration) var(--spring-effects);
}

@media (hover: hover) {
  .link:hover {
    color: var(--link-hover);
  }
}

.link:active {
  color: var(--link-active);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- page shell ---------- */

.page {
  display: flex;
  flex-direction: column;
  gap: 99px;
  width: 100%;
  max-width: var(--frame-width);
  margin: 0 auto;
  /* macro: column starts at x=185 of the 1362 frame */
  padding: 64px 24px 30px clamp(24px, 13.583%, 185px); /* macro: footer 30px above the bottom */
}

/* ---------- intro ---------- */

.intro {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--column-width));
  padding-left: 156px; /* macro: intro sits at x=341 */
}

.intro__who {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 499px;
}

.intro__about {
  max-width: 529px;
  margin-top: 32px;
}

.intro__contact {
  max-width: 529px;
  margin-top: 24px;
}

.intro__accent {
  color: var(--accent);
}

/* ---------- timeline ---------- */

/* no gap: the space around projects lives inside each collapsible panel, so
   collapsed groups close up into one table with the "earlier" rows */
.timeline {
  display: flex;
  flex-direction: column;
  width: min(100%, var(--column-width));
}

.job__line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 24px 36px 24px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.job__line {
  cursor: pointer;
}

.job__years {
  flex: none;
  width: var(--year-width);
  padding-top: 2px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.job__title {
  min-width: 0;
}

.job__chevron {
  position: absolute;
  right: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  transition: transform var(--spring-spatial-duration) var(--spring-spatial);
}

.job__line[aria-expanded="false"] .job__chevron {
  transform: translateY(-50%) rotate(-90deg);
}

.job__projects {
  display: flex;
  flex-direction: column;
  padding: 64px 0 80px; /* macro: line → projects 64, group → next line 80 */
  transform-origin: 50% 0;
}

.job__projects[hidden] {
  display: none;
}

.job__projects--mercuryo {
  gap: 56px;
}

.job__projects--mann {
  gap: 48px;
}

.past {
  display: flex;
  flex-direction: column;
}

/* ---------- project row ---------- */

.project {
  display: grid;
  grid-template-columns: var(--year-width) minmax(0, 1fr);
  column-gap: 12px;
}

.project__year {
  padding-top: 3px;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  transition: transform var(--spring-fast-spatial-duration) var(--spring-fast-spatial);
}

/* tap anywhere on a case-study block (title or card) */
.project__body:has(a:active) {
  transform: scale(0.99);
}

.project__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
  text-decoration: none;
}

.project__title {
  min-width: 0;
}

.project__head--link {
  color: var(--accent);
  transition: color var(--spring-effects-duration) var(--spring-effects);
}

.project__head--link .project__title {
  text-decoration: underline;
  /* macro: thickness 1.5%, offset 25%, colour auto, skip ink off */
  text-decoration-thickness: 1.5%;
  text-underline-offset: 25%;
  text-decoration-skip-ink: none;
}

/* hovering anywhere on the block (title or card) lights up the title link */
@media (hover: hover) {
  .project__body:has(a:hover) .project__head--link {
    color: var(--link-hover);
  }
}

.project__body:has(a:active) .project__head--link {
  color: var(--link-active);
}

.project__tag {
  flex: none;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.39px;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
}

/* ---------- media cards (base) ---------- */

.card {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--card-dark);
}

.card img,
.card video {
  max-width: none;
  object-fit: cover;
}

.media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Spend — 680×694, phone 432×653 flush to the bottom */
.card--spend {
  aspect-ratio: 680 / 694;
}

.spend__phone {
  position: absolute;
  left: 50%;
  top: 5.908%;
  width: 63.529%;
  height: 94.092%;
  transform: translateX(-50%);
}

/* On-Off-Ramp — 680×694, screen 286.886×621.951 + iPhone frame */
.card--oor {
  aspect-ratio: 680 / 694;
}

.oor {
  position: absolute;
  left: 50%;
  top: 4.78%;
  width: 42.189%;
  height: 89.618%;
  transform: translateX(-50%);
}

.oor__screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 13.74% / 6.338%; /* 39.419px */
  background: #ffffff;
}

.oor__frame {
  position: absolute;
  left: -10.178%;
  top: -4.695%;
  z-index: 2;
  width: 120.356%;
  height: 109.39%;
  pointer-events: none;
}

/* Crypto-Rails — 680×620, dashboard 900×575 at (23, 22), cropped right */
.card--rails {
  aspect-ratio: 680 / 620;
}

.rails__shot {
  position: absolute;
  left: 3.382%;
  top: 3.548%;
  width: 132.353%;
  height: 92.742%;
}

/* Wallet — 680×660, video 320×616.471 centred, flush to the bottom */
.card--wallet {
  aspect-ratio: 680 / 660;
}

.wallet__video {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 47.059%;
  height: 93.405%;
  transform: translateX(-50%);
}

/* E-commerce — 680×620 light card; side panel overhangs the right edge */
.card--shop {
  aspect-ratio: 680 / 620;
  overflow: visible;
  background: none;
}

.shop__main {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-card);
  background: var(--card-light);
}

.shop__site {
  position: absolute;
  left: 3.969%;
  top: 4.687%;
  width: 117.563%;
  height: 90.258%;
}

.shop__side {
  position: absolute;
  left: 80.441%;
  top: 15.806%;
  width: 41.176%;
  height: 43.71%;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* E-Library — 680×620 light card, desktop + mobile screens */
.card--elib {
  aspect-ratio: 680 / 620;
  border-radius: 11.965px;
  background: var(--card-light);
}

.elib__desk {
  position: absolute;
  left: 3.5%;
  top: 13.16%;
  width: 91.919%;
  height: 76.241%;
  border-radius: 8.293px;
}

.elib__mob {
  position: absolute;
  left: 60.921%;
  top: 11.828%;
  width: 35.294%;
  height: 77.871%;
}

/* Promo — 680×620.915 dark card, landing + phone video */
.card--promo {
  aspect-ratio: 680 / 620.915;
  border-radius: 16.585px;
}

.promo__site {
  position: absolute;
  left: 3.971%;
  top: 19.97%;
  width: 73.529%;
  height: 47.113%;
}

.promo__video {
  position: absolute;
  left: 65%;
  top: 13.171%;
  width: 29.412%;
  height: 69.644%;
  border-radius: 13% / 6.013%; /* 26px */
}

/* ---------- footer (macro 68:1644) ---------- */

.site-footer {
  display: flex;
  align-items: baseline;
  width: min(100%, var(--column-width));
  margin-top: 198px; /* macro: 297 below the timeline, minus the page gap of 99 */
  padding-left: calc(var(--year-width) + 12px); /* under the project titles */
  font-size: 13px;
  line-height: 15px;
  color: var(--muted);
}

.site-footer__sign {
  flex: 1 1 auto;
}

.site-footer__year {
  flex: none;
}

@media (max-width: 1024px) {
  .site-footer {
    margin: 120px auto 0;
  }
}

@media (max-width: 720px) {
  .site-footer {
    margin-top: 96px;
    padding-left: 0;
  }
}

/* =========================================================
   Responsive
   ========================================================= */

/* keep the overhanging side panel inside the card once the
   page is too narrow for the overhang */
@media (max-width: 1180px) {
  .shop__side {
    left: auto;
    right: 3.969%;
  }
}

@media (max-width: 1024px) {
  .page {
    gap: 80px;
    padding: 56px 24px 30px;
  }

  .intro,
  .timeline {
    margin: 0 auto;
  }

  .intro {
    padding-left: 132px; /* align with project titles */
  }
}

@media (max-width: 720px) {
  .page {
    gap: 64px;
    padding: 40px 20px 24px;
  }

  .intro {
    padding-left: 0;
  }


  .job__line {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 20px 40px 20px 0;
  }

  .job__years {
    width: auto;
    padding-top: 0;
  }

  .job__projects {
    padding: 40px 0 56px;
  }

  .job__projects--mercuryo,
  .job__projects--mann {
    gap: 40px;
  }

  .project {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .project__year {
    padding-top: 0;
  }

  .project__year br {
    display: none;
  }

  .project__body {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .page {
    padding: 32px 16px 24px;
  }

  .card {
    border-radius: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .job__chevron,
  .link,
  .project__head--link,
  .project__body {
    transition: none;
  }

  .project__body:has(a:active) {
    transform: none;
  }
}