/* matthiastrinley.com — Retro Stripes light/dark, mono + Geist */

@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-700.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-ext-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Geist"; src: url(fonts/geist-ext.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Geist"; src: url(fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- themes ---------- */
/* two themes from Matthias' Omarchy themes: light = Retro Stripes Fall, dark = Retro Stripes.
   c1–c6: highlight colours; r1–r6: the six stripes (stars, dots after headings) */
:root, [data-theme="light"] {
  --bg: #F7F0DA; --bg-2: #EEE3C6; --ink: #3E2D12; --muted: #7a6a50; --faint: #d8c9a6; --line: #E4D6B3;
  --c1: #ba4716; --c2: #C35B2F; --c3: #b8860b; --c4: #65721b; --c5: #11787d; --c6: #654a1f;
  --r1: #C35B2F; --r2: #ba4716; --r3: #E08634; --r4: #11787d; --r5: #654a1f; --r6: #65721b;
  --h5: #937103; /* text highlights: golden ochre instead of the brown, which reads as black on cream */
  --s1: #C35B2F; --s2: #E08634; --s3: #11787d;
  --shadow: 0 18px 40px -24px rgba(62,45,18,.45);
}
[data-theme="dark"] {
  --bg: #111110; --bg-2: #1d1c19; --ink: #e8dec6; --muted: #8f846a; --faint: #3a352b; --line: #26241f;
  --c1: #E85237; --c2: #D18F3F; --c3: #B1A055; --c4: #8D6D33; --c5: #47888f; --c6: #C1362F;
  --r1: #E85237; --r2: #C1362F; --r3: #D18F3F; --r4: #47888f; --r5: #8D6D33; --r6: #B1A055;
  --h5: var(--r5);
  --s1: #E85237; --s2: #D18F3F; --s3: #47888f;
  --shadow: 0 18px 40px -18px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 "Geist", system-ui, sans-serif;
  overflow-x: clip;
}
a { color: inherit; text-decoration-color: var(--c1); text-underline-offset: 4px; text-decoration-thickness: 2px; }
a:hover { color: var(--c1); }
img { display: block; max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }
section { position: relative; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 56px; font: 13px "JetBrains Mono", monospace; }
.nav .home { font-weight: 700; text-decoration: none; margin-right: auto; }
.nav .home i { font-style: normal; color: var(--c1); }
.nav .links { display: flex; gap: 18px; }
.nav .links a { text-decoration: none; color: var(--muted); }
.nav .links a:hover, .nav .links a.on { color: var(--ink); }
@media (max-width: 640px) { .nav .links { display: none; } }
.theme-btn {
  font: inherit; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 99px; padding: 5px 12px 5px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.theme-btn .dots { display: inline-flex; }
.theme-btn .dots i { width: 9px; height: 9px; border-radius: 50%; margin-right: -2px; border: 1.5px solid var(--bg-2); }
.theme-btn .dots i:nth-child(1) { background: var(--s1); }
.theme-btn .dots i:nth-child(2) { background: var(--s2); }
.theme-btn .dots i:nth-child(3) { background: var(--s3); }

/* ---------- stars + bunting (motifs from the drawings) ---------- */
.star { position: absolute; color: var(--s1); pointer-events: none; }
.star svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; animation: spin 20s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bunting { display: flex; gap: 6px; height: 14px; overflow: hidden; }
.bunting span {
  flex: 0 0 16px; height: 14px; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateY(110%); transition: transform .5s cubic-bezier(.3,1.6,.5,1);
}
.bunting.in span { transform: none; }

/* TUI-style hover bar: stripe-coloured blocks fill in block by block */
.blocks { position: relative; }
.blocks::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 8px; width: 0;
  background: linear-gradient(90deg,
    var(--r1) 0 28px, var(--r3) 28px 56px, var(--r6) 56px 84px,
    var(--r4) 84px 112px, var(--r5) 112px 140px, var(--r2) 140px 168px) 0 0 / 168px 100% repeat-x;
  transition: width .6s steps(12, end);
}
.blocks:hover::after, a:hover > .blocks::after { width: 100%; }

/* ---------- hero ---------- */
.hero { min-height: calc(92svh - 56px); display: flex; align-items: center; padding: 56px 0 72px; }
.hero .wrap { width: 100%; display: grid; gap: 48px; align-items: end; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1fr 380px; align-items: center; } }
.hero .name { position: relative; }
.kicker { font: 13px "JetBrains Mono", monospace; color: var(--muted); margin-bottom: 18px; }
.kicker b { color: var(--t-p); font-weight: 400; }
.kicker span[title] { cursor: help; overflow-wrap: anywhere; }
.kicker i { font-style: normal; color: var(--t-k); }
.hero h1 { margin: 0; font-weight: 800; letter-spacing: -.05em; line-height: .9; font-size: clamp(60px, 12vw, 164px); }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span { display: inline-block; animation: rise .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 120ms + 150ms); }
.hero h1 .dot { color: var(--r1); }
.hero .lede { margin: 30px 0 0; max-width: 36ch; font-size: clamp(18px, 2vw, 21px); color: var(--muted); animation: fade 1s .7s both; }
.hero .lede b { color: var(--ink); font-weight: 600; }
.hero .bunting { margin-top: 36px; }
/* the sky: six Retro Stripes stars + a turning text ring; stars react to the pointer (main.js) */
.sky { position: relative; height: 440px; animation: fade 1.2s .9s both; }
.sky .star { position: absolute; cursor: pointer; pointer-events: auto; }
.sky .star svg { animation: none; will-change: transform; stroke-width: 2.6; }
.badge { position: absolute; left: 26%; top: 28%; width: 170px; height: 170px; text-decoration: none; color: var(--ink); }
.badge .ring { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.badge text { font: 500 13.5px "JetBrains Mono", monospace; letter-spacing: .14em; fill: currentColor; }
.badge .core { position: absolute; inset: 34%; color: var(--ink); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.badge .core svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; animation: spin 9s linear infinite reverse; }
.badge:hover { color: var(--r1); }
.badge:hover .core { transform: scale(1.25); }
@media (max-width: 899px) {
  .sky { height: 300px; max-width: 380px; width: 100%; margin: 0 auto; }
  .badge { width: 140px; height: 140px; left: 30%; top: 24%; }
}

@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- section heads ---------- */
.head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
.head h2 { margin: 0; font-size: clamp(40px, 7vw, 88px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.head h2 .dot { color: var(--r1); }
#drawings .dot, .dot.drawings { color: var(--r3); }
#paintings .dot, .dot.paintings { color: var(--r4); }
#now .dot { color: var(--r6); }
.head p { margin: 0; padding-left: .2em; font: 14px/1.7 "JetBrains Mono", monospace; color: var(--muted); max-width: 62ch; text-wrap: pretty; }

/* ---------- art: square tiles drop in as you scroll ---------- */
.art { padding: 110px 0 100px; border-top: 1px solid var(--line); }
.sq { margin: 0; cursor: zoom-in; }
.sq .box { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--bg-2); box-shadow: var(--shadow); }
.sq img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sq:hover img { transform: scale(1.04); }
.sq figcaption { padding-top: 10px; }
figcaption { font: 12px "JetBrains Mono", monospace; color: var(--muted); }
figcaption b { color: var(--ink); font-weight: 700; }
.see-more { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 .3em; margin-top: 56px; text-decoration: none; font-size: clamp(44px, 8vw, 104px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.see-more i { font-style: normal; color: var(--r1); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.see-more small { flex-basis: 100%; text-align: right; font: 13px "JetBrains Mono", monospace; letter-spacing: 0; color: var(--muted); margin-top: 14px; }
.see-more:hover { color: var(--ink); }
.see-more:hover i { transform: translateX(14px); }
#paintings .see-more i { color: var(--r4); }
#drawings .see-more i { color: var(--r3); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(50px) rotate(var(--tilt, 0deg)); transition: opacity .9s, transform 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- now: typing terminal ---------- */
.now { padding: 120px 0; border-top: 1px solid var(--line); }
/* an Omarchy terminal: Hyprland window, no title bar, square corners, 2px gradient border, theme colours */
:root, [data-theme="light"] { --t-bg: #FBF6E4; --t-fg: #3E2D12; --t-dim: #8a7a5e; --t-p: #a3590c; --t-k: #11787d; --t-g: #65721b; --t-b1: #c35b2f; --t-b2: #e08634; }
[data-theme="dark"] { --t-bg: #0c0c0b; --t-fg: #e8dec6; --t-dim: #7d7258; --t-p: #d18f3f; --t-k: #60a0a8; --t-g: #89a288; --t-b1: #e85237; --t-b2: #d18f3f; }
.term {
  max-width: 760px; color: var(--t-fg); font: 15px/1.75 "JetBrains Mono", monospace;
  border: 2px solid transparent;
  background: linear-gradient(var(--t-bg), var(--t-bg)) padding-box, linear-gradient(45deg, var(--t-b1), var(--t-b2)) border-box;
}
.term pre { margin: 0; padding: 16px 20px 22px; white-space: pre-wrap; font: inherit; min-height: 238px; }
.term .p { color: var(--t-p); } .term .k { color: var(--t-k); } .term .g { color: var(--t-g); } .term .d { color: var(--t-dim); }
.term .caret { display: inline-block; width: .6em; height: 1.15em; vertical-align: -.22em; background: var(--t-fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- about: words colour in ---------- */
.about { padding: 110px 0 120px; border-top: 1px solid var(--line); }
.about-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(260px, 380px) 1fr; gap: 64px; } }
.portrait { margin: 0; max-width: 380px; }
.portrait img { width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow); }
.about .big a {
  text-decoration: none; white-space: nowrap; padding-bottom: 3px;
  /* hover: the stripe blocks are uncovered left to right, like the see-more bar */
  background:
    linear-gradient(var(--bg), var(--bg)) 100% 100% / 100% 5px no-repeat,
    linear-gradient(90deg, var(--r1) 0 28px, var(--r3) 28px 56px, var(--r6) 56px 84px,
      var(--r4) 84px 112px, var(--r5) 112px 140px, var(--r2) 140px 168px) 0 100% / 168px 5px repeat-x;
  transition: background-size .6s steps(10, end);
}
.about .big a:hover { background-size: 0% 5px, 168px 5px; }
.about .big a::after { content: "↗"; font-family: "JetBrains Mono", monospace; font-variant-emoji: text; font-weight: 700; display: inline-block; margin-left: .12em; font-size: .62em; vertical-align: .55em; color: var(--r4); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.about .big a:hover::after { transform: translate(3px, -3px); }
.about .big { font-size: clamp(20px, 2.3vw, 30px); line-height: 1.38; letter-spacing: -.025em; font-weight: 600; max-width: 26em; margin: 0; }
.about .big p { margin: 0 0 .75em; text-wrap: pretty; }
.about .big p:last-child { margin-bottom: 0; }
.w { color: var(--faint); transition: color .25s; }
.w.lit { color: var(--ink); }
.fill .w.lit { color: var(--muted); }
/* highlights arrive slower: the colour washes through the phrase */
.w.hl.lit { color: var(--hc, var(--r1)); transition: color .7s ease var(--hd, 0s); }
.about .small { margin: 40px 0 0; max-width: 60ch; color: var(--muted); }

/* ---------- contact + footer ---------- */
.contact { padding: 110px 0 60px; text-align: center; overflow: hidden; border-top: 1px solid var(--line); }
.contact .kicker { margin-bottom: 22px; }
.contact h2 { margin: 0; font-size: clamp(40px, 8vw, 110px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.contact h2 a { text-decoration: none; display: inline-block; }
.contact h2 a:hover { color: var(--ink); }
.contact h2 .blocks { display: inline-block; }
footer { padding: 30px 0 40px; font: 12px "JetBrains Mono", monospace; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- gallery page ---------- */
.gallery-head { padding: 80px 0 40px; }
.gallery-head .back { font: 13px "JetBrains Mono", monospace; color: var(--muted); text-decoration: none; }
.gallery-head .back:hover { color: var(--c1); }
.gallery-head h1 { margin: 22px 0 0; font-size: clamp(52px, 10vw, 130px); font-weight: 800; letter-spacing: -.05em; line-height: .95; }

.gallery-head p { margin: 18px 0 0; font: 13px/1.6 "JetBrains Mono", monospace; color: var(--muted); max-width: 50ch; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2.4vw, 30px); }
@media (min-width: 800px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-head + .grid { padding-bottom: 100px; }
.switch { padding: 0 0 90px; display: flex; justify-content: space-between; gap: 16px; font: 13px "JetBrains Mono", monospace; }

/* ---------- privacy page ---------- */
.legal { max-width: 60ch; padding-bottom: 100px; font: 15px/1.8 "JetBrains Mono", monospace; color: var(--muted); }
.legal p { margin: 0 0 1em; }
.legal a { color: var(--ink); }
footer a { color: inherit; text-decoration-color: var(--faint); }
footer a:hover { color: var(--ink); }

/* ---------- lightbox ---------- */
dialog.lb { border: 0; padding: 0; background: transparent; width: 100vw; height: 100dvh; max-width: none; max-height: none; color: var(--ink); }
dialog.lb::backdrop { background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(6px); }
dialog.lb .stage { height: 100%; display: grid; place-items: center; padding: 56px 16px 70px; }
dialog.lb img { max-width: min(92vw, 1400px); max-height: calc(100dvh - 140px); object-fit: contain; box-shadow: var(--shadow); animation: pop .35s cubic-bezier(.2,.7,.2,1); }
dialog.lb .cap { position: fixed; left: 0; right: 0; bottom: 22px; text-align: center; font: 13px "JetBrains Mono", monospace; color: var(--muted); }
dialog.lb .cap b { color: var(--ink); }
dialog.lb button { position: fixed; font: 22px "JetBrains Mono", monospace; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; }
dialog.lb .x { top: 14px; right: 14px; font-size: 16px; }
dialog.lb .prev { left: 14px; top: 50%; } dialog.lb .next { right: 14px; top: 50%; }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* ---------- theme wipe ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: wipe .7s cubic-bezier(.65,0,.35,1); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .bunting span { transform: none; }
}