/* Home page (8.10). Tokens only. Reuses the header, footer, mark, portrait and about-body rules from style.css. */
/* 15.10, her note on the launch video: the white gap above the headline and below the pills hid the first case on a laptop screen, so the hero starts higher and the first card comes up (was 128 / 64 and 48) */
.home-hero { padding: var(--s6) 0 var(--s4); }
.home-hero h1 { font-size: var(--t-64); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--s4); }
.home-h2 { margin-bottom: var(--s4); }

/* work: three cards that stick near the top and stack as the page scrolls */
.home-work { padding: var(--s3) 0 var(--s12); }
.work-stack { display: grid; gap: var(--s8); }
.work-card { position: sticky; top: calc(var(--s3) + var(--i) * var(--s3)); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s6); padding: var(--s4); background: var(--color-surface-page); border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.wc-text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4); min-width: 0; }
.wc-meta { margin: 0 0 var(--s2); font-size: var(--t-14); color: var(--color-content-secondary); }
.work-card h3 { font-size: var(--t-28); line-height: 1.2; margin-bottom: var(--s2); }
.work-card h3 a { text-decoration: none; }
.work-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.wc-outcome { margin: 0; color: var(--color-content-secondary); }
.wc-link { font-size: var(--t-14); font-weight: 500; }
.wc-link span { background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; padding-bottom: 2px; }
.work-card:hover .wc-link span { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }
.wc-soon { font-size: var(--t-14); color: var(--color-content-secondary); }
.wc-media { aspect-ratio: 16 / 9; border-radius: var(--radius-s); overflow: hidden; background: #0b0d12; position: relative; align-self: start; }
.wc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.work-card:hover .wc-media img { transform: scale(1.015); }
.wc-media.is-empty { background: var(--color-surface-subtle); display: grid; place-items: center; font-size: var(--t-14); color: var(--color-content-secondary); }

/* other projects: two small cards and the free-time line */
.more-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.more-card h3 { font-size: var(--t-20); line-height: 1.3; max-width: 28ch; }
.mc-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--color-surface-page); box-shadow: var(--shadow-card); margin-bottom: var(--s2); }
.mc-media img { width: 100%; height: 100%; object-fit: cover; }
.mc-media.is-empty { background: var(--color-surface-subtle); box-shadow: none; }
.mc-tag { position: absolute; left: var(--s2); top: var(--s2); padding: 4px 12px; border-radius: 999px; background: var(--color-surface-page); font-size: var(--t-14); line-height: 20px; color: var(--color-content-secondary); }
.more-free { margin: var(--s8) 0 0; padding-top: var(--s3); border-top: 1px solid var(--color-line-soft); color: var(--color-content-secondary); }
.more-free a { border-radius: 2px; transition: background 160ms var(--ease-out); }
.more-free a:hover, .more-free a:focus-visible { background: var(--color-accent-lime); color: var(--color-accent-on-lime); }

/* short About */
.home-about { padding: 0 0 var(--s12); }
.home-about-h { font-size: var(--t-40); line-height: 1.15; }

@media (max-width: 900px) {
  .home-hero { padding: var(--s8) 0 var(--s6); }
  .work-card { position: relative; top: auto; grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); }
  .work-stack { gap: var(--s3); }
  .more-rows a, .more-rows li > div { grid-template-columns: 1fr; gap: 4px; }
  .home-about { padding-bottom: var(--s8); }
}
@media (prefers-reduced-motion: reduce) { .wc-media img { transition: none; } .work-card:hover .wc-media img { transform: none; } }

/* home About teaser (8.10, her idea): the portrait is a round photo, 200px (160px on phones). The About page keeps its tall portrait. */
.home-about .portrait { position: static; min-height: 0; width: 160px; height: 160px; }
.home-about .portrait img { position: static; width: 160px; height: 160px; aspect-ratio: 1; border-radius: 999px; object-fit: cover; object-position: 50% 24%; }
@media (min-width: 901px) {
  .home-about .about-grid { grid-template-columns: 200px minmax(0, 1fr); gap: var(--s6); align-items: center; }
  .home-about .portrait, .home-about .portrait img { width: 200px; height: 200px; }
}

/* white cards by default (her reference); #grey in the address shows the grey fill for comparison */
.cards-grey .work-card { background: var(--color-surface-subtle); }
.cards-grey .wc-media.is-empty { background: var(--color-surface-page); }

/* hero: the blinking dot sits before "UX/UI Product Designer". On hover or focus it opens over the line into the CTA pill (Michelle Liu reference). On touch screens the first tap opens it. */
.kicker-row { position: relative; display: flex; align-items: center; min-height: 40px; margin-bottom: var(--s2); }
.kicker-row .kicker { margin: 0; padding-left: 48px; }
.cta-expand { position: absolute; left: 0; top: 0; z-index: 2; gap: 0; background: linear-gradient(rgba(200, 240, 50, 0.16), rgba(200, 240, 50, 0.16)), var(--color-surface-page); }
.cta-expand:hover, .cta-expand:focus-visible, .cta-expand.is-open { gap: 8px; background: linear-gradient(rgba(200, 240, 50, 0.16), rgba(200, 240, 50, 0.16)), var(--color-surface-page); color: var(--color-content-primary); }
.cta-expand:hover .dot, .cta-expand:focus-visible .dot, .cta-expand.is-open .dot { background: var(--color-accent-lime); }
.cta-expand .cta-label { display: inline-block; max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; vertical-align: middle; transition: max-width 360ms var(--ease-out), opacity 240ms var(--ease-out); }
.cta-expand:hover .cta-label, .cta-expand:focus-visible .cta-label, .cta-expand.is-open .cta-label { max-width: 360px; opacity: 1; }
.cta-expand .dot { animation: dot-blink 1.6s ease-in-out infinite; }
.cta-expand:hover .dot, .cta-expand:focus-visible .dot, .cta-expand.is-open .dot { animation: none; }
@keyframes dot-blink { 50% { opacity: 0.25; } }
.hero-row { margin-top: var(--s4); }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.pills li { padding: 8px 16px; border: 1px solid var(--color-line); border-radius: 999px; font-size: var(--t-14); line-height: 24px; color: var(--color-content-secondary); }
@media (prefers-reduced-motion: reduce) { .cta-expand .cta-label { transition: none; } .cta-expand .dot { animation: none; } }
@media (max-width: 900px) { .more-cards { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 560px) { .cta-expand { align-items: center; border-radius: 999px; } .cta-expand .dot { margin-top: 0; } }

/* work cards, cleaner (8.10, her reference): meta, big title, pills, image on the right. "View" shows on hover over the whole card. */
.work-card { align-items: center; padding: var(--s6); border-radius: var(--radius-l); }
.work-card h3 { margin-bottom: var(--s3); }
.work-card h3 a::after { border-radius: var(--radius-l); }
.work-card .wc-text { display: block; }
.work-card .wc-media { align-self: center; }
.wc-view { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s3); padding: 12px 20px; border: 1px solid var(--color-content-primary); border-radius: 999px; background: var(--color-content-primary); color: var(--color-content-inverse); font: 500 var(--t-14)/1 var(--font-body); opacity: 0; transform: translateX(-8px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.work-card:hover .wc-view, .work-card:focus-within .wc-view { opacity: 1; transform: none; }
.wc-soon { display: block; margin-top: var(--s3); }
@media (hover: none) { .wc-view { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wc-view { transition: none; transform: none; } }
@media (max-width: 900px) { .work-card { padding: var(--s3); } }
/* the whole card is the button: the View pill is only the sign that shows on hover */
.wc-view { pointer-events: none; }

/* Other projects cards (8.10, her reference): on hover the image turns into a soft grey panel with a short description. The text is hers to write; until then a marked placeholder. */
.mc-detail { position: absolute; inset: 0; z-index: 1; margin: 0; padding: var(--s4); display: grid; align-content: center; background: var(--color-surface-subtle); color: var(--color-content-secondary); font-size: var(--t-16); line-height: 1.7; opacity: 0; transition: opacity 240ms var(--ease-out); }
.more-card:hover .mc-detail, .more-card:focus-within .mc-detail { opacity: 1; }
.mc-tag { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .mc-detail { transition: none; } }

/* the dot like the earlier version (8px with a ping ring, no big circle): a bare dot before the line; on hover the pill appears around it and opens (8.10) */
.kicker-row .kicker { padding-left: 20px; }
.cta-expand { padding: 8px 0; background: transparent; transition: padding 160ms var(--ease-out), background 160ms var(--ease-out); }
.cta-expand::before { content: ""; position: absolute; inset: -8px -12px; }
.cta-expand .dot { animation: dot-ping 2.8s ease-out infinite; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(200, 240, 50, 0.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(200, 240, 50, 0); } }
.cta-expand:hover, .cta-expand:focus-visible, .cta-expand.is-open { padding: 8px 16px; }
@media (prefers-reduced-motion: reduce) { .cta-expand { transition: none; } .cta-expand .dot { animation: none; } }

/* Other projects cards (8.10, her reference): the grey panel opens from the bottom-left corner and fills the card; description in the middle, the meta line at the bottom. The same meta line sits small above the title. */
.mc-meta { margin: 0 0 4px; font-size: var(--t-14); color: var(--color-content-secondary); }
.mc-detail { grid-template-rows: 1fr auto; align-content: stretch; opacity: 1; clip-path: circle(0 at 0 100%); transition: clip-path 520ms var(--ease-out); }
.mc-detail p { margin: 0; }
.mc-detail p:first-child { align-self: center; }
.mc-detail-meta { font-size: var(--t-14); color: var(--color-content-secondary); }
.more-card:hover .mc-detail, .more-card:focus-within .mc-detail { clip-path: circle(160% at 0 100%); }
@media (prefers-reduced-motion: reduce) { .mc-detail { transition: none; } }

/* the View sign and the Coming soon note are fixed at the bottom of the text column, at the same spot in every card, and do not move when they appear (8.10) */
.work-card .wc-text { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: var(--s3); }
.work-card .wc-view, .work-card .wc-soon { margin-top: 0; transform: none; }
.work-card .wc-soon { display: block; }

/* View as the cursor (8.10, her explanation): while the mouse is over a linked work card, the pointer becomes the black View pill (the look of Copy email). Touch screens have no pointer, so there the card shows the pill as a sign. */
.cursor-view { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; display: none; align-items: center; gap: 6px; padding: 12px 20px; border-radius: 999px; background: var(--color-content-primary); color: var(--color-content-inverse); font: 500 var(--t-14)/1 var(--font-body); white-space: nowrap; opacity: 0; scale: 0.6; transition: opacity 160ms var(--ease-out), scale 160ms var(--ease-out); will-change: transform; }
.cursor-view.is-on { opacity: 1; scale: 1; }
.work-card .wc-view { display: none; }
@media (hover: hover) { .cursor-view { display: inline-flex; } [data-cursor], [data-cursor] a { cursor: none; } }
@media (hover: none) { .work-card .wc-view { display: inline-flex; opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-view { transition: opacity 160ms linear; scale: 1; } }
/* the cursor pill is the size and look of the header Copy email button: 16px, padding 14px 24px, at least 136px wide, 1px border (8.10) */
.cursor-view { justify-content: center; min-width: 136px; padding: 14px 24px; border: 1px solid var(--color-content-primary); font-size: var(--t-16); gap: 8px; }
/* the View pill switches in and out gently, a plain fade, no scale pop (8.10, her note) */
.cursor-view { scale: 1; transition: opacity 280ms ease; }
.cursor-view.is-on { scale: 1; }
@media (prefers-reduced-motion: reduce) { .cursor-view { transition: none; } }
/* the View pill follows the same proportions as Copy email: narrower and a little chunkier (8.10) */
.cursor-view { min-width: 0; padding: 17px 18px; }
.cursor-view { font-weight: 600; letter-spacing: -0.01em; padding: 15px 20px; }
/* the line before the headline has the font and color of the role line in the footer: Geist 16, regular, soft grey (8.10) */
.kicker-row .kicker { font-size: var(--t-16); font-weight: 400; line-height: 1.6; color: var(--color-content-muted); }

/* hero pills: more presence (8.10, her note on the reference): 16px, darker text, the padding of the buttons. The small pills in the work cards stay small. */
.hero-row .pills { gap: var(--s2); }
.hero-row .pills li { padding: 12px 20px; font-size: var(--t-16); line-height: 24px; color: var(--color-content-soft); }
@media (max-width: 560px) { .hero-row .pills { gap: var(--s1); } .hero-row .pills li { padding: 10px 16px; font-size: var(--t-14); } }
/* hero pills in the proportions of her reference (dkarpov.design, measured 8.10): 40px tall, 16px text, 16px side padding, slightly tighter letters, soft grey text */
.hero-row .pills li { padding: 8px 16px; font-size: var(--t-16); line-height: 24px; letter-spacing: -0.01em; color: var(--color-content-secondary); }
@media (max-width: 560px) { .hero-row .pills li { padding: 8px 14px; font-size: var(--t-14); } }

/* one plain line under the headline (11.10, her pick after the review with Shahar's tool): the way of working, in her own Risk wording */
.home-hero h1:has(+ .hero-sub) { margin-bottom: var(--s3); }
.hero-sub { margin: 0; max-width: var(--measure); font-size: var(--t-20); line-height: 1.5; color: var(--color-content-secondary); }
@media (max-width: 560px) { .hero-sub { font-size: var(--t-16); } }

/* AI card (8.10, her note, fixed after looking at the file): the graphic sits centered in x 435-1485, y 208-957 of the 1920x1080 source. The card shows the window x 213-1707, y 162-1002 (1493 wide, 16:9), so it has the same margin on both sides: scale 128.6 percent, shifted left 14.27 percent of the width and up 19.29 percent of the height. */
.mc-media img.mc-crop { position: absolute; max-width: none; width: 128.6%; height: auto; left: -14.27%; top: -19.29%; object-fit: fill; }
/* with no "coming soon" notes the text column has one group: centered vertically against the image, like the reference (8.10) */
.work-card .wc-text { justify-content: center; }

/* Video library card in Other projects: the whole card is the link, same way as the work cards (11.10) */
.more-card { position: relative; }
.more-card h3 a { text-decoration: none; }
.more-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }

/* Phones (15.10, her note): the "UX/UI Product Designer" line sat too far above the headline (23px visible gap); now about 11px. Desktop unchanged. */
@media (max-width: 560px) { .kicker-row { margin-bottom: 4px; } }

/* Whole-card link (15.10, her note: the cards were not tappable on the phone): the invisible link layer sits above the image, so a tap anywhere on the card opens the case. The phone layout now also makes each card the anchor for that layer (position: relative instead of static). */
.work-card h3 a::after { z-index: 1; }

/* Other projects on phones (15.10, her note): no grey description panel over the image; a tap would leave it stuck open. Touch screens and narrow windows show the image only. */
@media (hover: none), (max-width: 900px) { .mc-detail { display: none; } }

/* Card titles on phones (15.10, her note: arrange the text in the card): 24px instead of 28px so the long titles sit in three even lines instead of four with a lone word. */
@media (max-width: 560px) { .work-card h3 { font-size: 24px; line-height: 1.25; } }

/* Case cards on phones (15.10, her reference: the Topcon card on dkarpov.design): the image comes first, then the company line, the title and the pills; no View cue, the whole card is the link. Mouse screens keep the layout and the hover pill. */
@media (hover: none), (max-width: 900px) {
  .work-card .wc-media { order: -1; }
  .work-card .wc-view { display: none; }
  .work-card .wc-text { margin-top: 0; }
}

/* Phones (15.10, her words and reference): in the case cards the small descriptors (company, then the pills) come before the title. */
@media (hover: none), (max-width: 900px) {
  .work-card .wc-text > div { display: flex; flex-direction: column; align-items: flex-start; }
  .work-card .wc-meta { order: 0; margin: 0 0 var(--s1); }
  .work-card .wc-text .pills { order: 1; margin: 0 0 var(--s3); }
  .work-card .wc-text h3 { order: 2; margin: 0; }
}

/* Case cards on phones (15.10): with the wider page margin the card padding is 20px, so the text keeps its width (reference: card edge 22px, text 41px from the screen edge). */
@media (max-width: 560px) { .work-card { padding: 20px; } }