/* Portfolio home page: warm "contact sheet" (Amir's pick, 2026-10-21).
   Brand-neutral: warm paper, Poppins + DM Mono labels, one terracotta accent.
   Each project thumbnail takes its brand colour through --brand; everything else is the portfolio's.
   case-study.js is reused for --z (desktop zoom), data-cycle loops and the hide-on-scroll header.
   On desktop (>= 1100px) .frame lays out at the 1440px design width, zoomed to the window. */

@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/dm-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/dm-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --bg: #f8f3ea;
  --ink: #221d17;
  --mute: #8b8176;
  --soft: #6d655b;
  --line: #e2d7c6;
  --acc: #e4572e;
  --white: #fffbf4;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --gutter: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure { margin: 0; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.frame { max-width: 1440px; margin: 0 auto; padding-inline: 56px; }
@media (min-width: 1100px) { .frame { zoom: var(--z, 1); } }
@media (max-width: 1099.98px) { .frame { padding-inline: var(--gutter); } }

/* Small mono labels: the portfolio's voice on every page */
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); display: inline-block; flex: none; }

/* ---------- Top bar: name · role | dot + section | links ---------- */
.top { position: sticky; top: 0; z-index: 10; background: rgba(248, 243, 234, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .3s cubic-bezier(.33, 1, .68, 1); }
.top.is-hidden { transform: translateY(-100%); }
.top:focus-within { transform: none; }
.top__inner { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.top__name { color: var(--ink); font-weight: 500; }
.top__name span { color: var(--mute); font-weight: 400; }
.top__mid { display: flex; gap: 10px; align-items: center; }
.top__links { display: flex; justify-content: flex-end; gap: 28px; }
.top__links a { transition: color .2s ease; }
.top__links a:hover { color: var(--ink); }
@media (max-width: 1099.98px) {
  .top__inner { grid-template-columns: 1fr auto; height: 56px; font-size: 11.5px; }
  .top__mid { display: none; }
  .top__name span { display: none; }
  .top__links { gap: 18px; }
}

/* ---------- Intro: greeting, title (light with semibold qualities), short bio ---------- */
.intro { padding-top: 96px; padding-bottom: 64px; text-align: center; }
.intro__hello { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.intro__title { font-size: 54px; line-height: 1.14; letter-spacing: -.035em; font-weight: 300; max-width: 900px; margin: 0 auto; }
.intro__title b { font-weight: 600; }
/* Fixed three-line stack on desktop (the bold last line is the widest, the two above step up to it); phones wrap naturally */
.intro__br { display: none; }
@media (min-width: 1100px) { .intro__br { display: inline; } }
.intro__bio { max-width: 600px; margin: 24px auto 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; letter-spacing: .02em; color: var(--soft); }
.intro__bio b { color: var(--ink); font-weight: 500; }
.intro__bio { text-wrap: balance; }

/* ---------- Contact sheet: projects two across, ruled captions ---------- */
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 1px solid var(--line); }
.card { display: block; padding: 40px 0 44px; border-bottom: 1px solid var(--line); }
.card__cap { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; margin-top: 20px; }
.card__name { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.card__line { display: block; font-size: 14px; color: var(--mute); font-weight: 400; margin-top: 2px; }
.card__spec { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-align: right; line-height: 1.8; }
.arrow { display: block; margin-top: 4px; font-size: 22px; line-height: 1; color: var(--acc); font-weight: 500; transition: transform .4s var(--ease-out); }
.card:hover .arrow, .card:focus-visible .arrow { transform: translateX(6px); }

/* Window: a rounded frame on the brand colour with a soft shadow; the brand lives inside it */
.win {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; border-radius: 14px; background: var(--brand, #ddd);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 24px 40px -28px rgba(60, 40, 10, .45);
}
.win > * { animation: drift 7s ease-in-out infinite; transition: scale .7s var(--ease-out); }
.card:hover .win > *, .card:focus-visible .win > * { scale: 1.05; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3%; } }

.win__draw { width: 100%; }
.win__tablet { width: 64%; }
.win__phone { width: 58%; }
/* A desktop screen (web app editor), framed by a thin bezel */
.win__screen { width: 72%; margin: 0; overflow: hidden; border-radius: 1.4cqw; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -14px rgba(0, 0, 0, .7); container-type: inline-size; }

[data-cycle] { position: relative; }
[data-cycle] > img { width: 100%; }
[data-cycle] > img + img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s cubic-bezier(.33, 1, .68, 1); }
[data-cycle] > img.is-active { opacity: 1; }

/* Flat device frame (same as the case studies' .dev) */
.dev {
  position: relative; container-type: inline-size; margin: 0;
  background: linear-gradient(145deg, #3a3150, #120d22 55%, #2a2340);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 20px 40px -14px rgba(0, 0, 0, .5);
}
.dev--phone { padding: 2.1% 3.6%; border-radius: 6.4% / 11.6%; }
.dev--tablet { padding: 3.2%; border-radius: 4.4% / 6.6%; }
.dev__screen { position: relative; overflow: hidden; background: #000; isolation: isolate; }
.dev--phone .dev__screen { border-radius: 2.6cqw; }
.dev--tablet .dev__screen { border-radius: 1.6cqw; }

/* ---------- About: one statement, then the career as a timeline ---------- */
.about { padding-top: 72px; padding-bottom: 80px; border-bottom: 1px solid var(--line); }
.about__kick { margin-bottom: 22px; }
.about__lead { font-size: 34px; line-height: 1.3; font-weight: 300; letter-spacing: -.025em; max-width: 1000px; margin: 0 auto; text-align: center; text-wrap: balance; }
.about__lead b { font-weight: 500; }
.tl { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; position: relative; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--line); }
.tl li { position: relative; padding-top: 24px; }
.tl li::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.tl li.tl--now::before { background: var(--acc); }
.tl__y { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.tl__co { display: block; font-size: 18px; font-weight: 500; margin-top: 8px; letter-spacing: -.01em; }
.tl__role { display: block; font-size: 14px; color: var(--soft); margin-top: 4px; line-height: 1.5; text-wrap: pretty; }

/* ---------- Footer ---------- */
.end { display: grid; grid-template-columns: 1fr auto 1fr; padding-top: 28px; padding-bottom: 36px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.end__mail { color: var(--ink); font-weight: 500; }
.end__mid { text-align: center; }
.end__links { display: flex; justify-content: flex-end; gap: 28px; }
.end a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .win > * { animation: none; transition: none; }
  .card:hover .win > * { scale: 1; }
}

/* No single word alone on a last line (Amir's rule for every page) */
h1, h2, h3, .card__name, .card__line { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Narrow screens ---------- */
@media (max-width: 1099.98px) {
  .intro { padding-top: 56px; padding-bottom: 40px; }
  .intro__title { font-size: 38px; }
  .sheet { gap: 0 24px; }
  .card { padding: 28px 0 30px; }
  .card__cap { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
  .card__spec { text-align: left; margin-top: 6px; }
  .arrow { display: none; }
  .card__name { font-size: 18px; }
  .about { padding-top: 44px; padding-bottom: 48px; }
  .about__lead { font-size: 24px; }
  .tl { grid-template-columns: 1fr 1fr; gap: 28px 24px; margin-top: 36px; }
  .tl::before { display: none; }
  .tl li { padding-top: 0; padding-left: 20px; }
  .tl li::before { top: 5px; }
  .end { grid-template-columns: 1fr; gap: 10px; text-align: center; padding-bottom: 28px; }
  .end__links { justify-content: center; }
}
@media (max-width: 699.98px) {
  .sheet { grid-template-columns: 1fr; }
  .intro__title { font-size: 32px; }
  .about__lead { font-size: 21px; }
  .tl { grid-template-columns: 1fr; }
}