@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap");

/* IOAN BRILL — v0.4.3
   Layout deliberately restrained: no faux-CAD imagery, effects, or animated backgrounds. */
:root {
  --charcoal: #292929;
  --ink: #252525;
  --paper: #f7f7f5;
  --quiet: #989898;
  --line: #d8d8d6;
  --white: #ebebe8;
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
img { max-width: 100%; }
::selection { background: #afb4b2; color: #222; }
.skip-link { position: absolute; z-index: 500; left: 12px; top: -100px; background: white; color: #222; padding: 10px; font-size: 12px; }
.skip-link:focus { top: 12px; }

/* Landing page: intentionally limited to one viewport */
.home-page { height: 100vh; height: 100dvh; overflow: hidden; background: var(--charcoal); color: #e9e7e3; }
.site-header { height: 70px; padding: 0 3.8%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.site-name { font-size: 18px; letter-spacing: .09em; font-weight: 300; }
.header-nav { display: flex; gap: 35px; align-items: center; font-size: 10px; letter-spacing: .18em; font-weight: 400; }
.header-nav a { transition: opacity .25s; }
.header-nav a:hover { opacity: .55; }
.mobile-nav-link { display: none; }
.home-scene { height: calc(100vh - 70px); height: calc(100dvh - 70px); min-height: 0; position: relative; isolation: isolate; }
.floating-photo { position: absolute; display: block; margin: 0; width: auto; z-index: 1; color: #c5c3bd; transition: opacity .3s; }
a.floating-photo:hover { opacity: .72; }
.floating-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.95); background: #393a39; }
.floating-photo > span, .floating-photo figcaption { position: absolute; top: calc(100% + 8px); left: 0; font-size: 8px; line-height: 1.4; letter-spacing: .145em; color: #aaa9a3; white-space: nowrap; }
.scene-photo-one { left: 11.3%; top: 3%; width: min(22vw, 295px); aspect-ratio: 1.75 / 1; }
.scene-photo-two { right: 10.8%; top: 14%; width: min(19vw, 252px); aspect-ratio: 1.37 / 1; }
.scene-photo-three { left: 4.5%; top: 51%; width: min(12.5vw, 165px); aspect-ratio: .93 / 1; }
.scene-photo-four { right: 5.5%; top: 58%; width: min(13.7vw, 183px); aspect-ratio: 1 / 1.07; }
.scene-photo-five { left: 30.5%; bottom: 2.5%; width: min(17.5vw, 235px); aspect-ratio: 2 / 1; }
.scene-title { position: absolute; width: min(410px, 46vw); left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 5; text-align: center; }
.scene-identity { font-size: 9px; letter-spacing: .22em; font-weight: 400; color: #c0bfb8; margin: 0 0 28px; }
.scene-identity span { padding: 0 9px; color: #858680; }
.scene-title h1 { font-weight: 300; font-size: clamp(38px, 4.1vw, 66px); line-height: 1.22; letter-spacing: -.042em; margin: 0; }
.scene-stop { color: #a9a9a1; }
.scene-description { font-size: 12px; line-height: 1.7; font-weight: 300; color: #c1c0ba; margin: 26px 0 33px; letter-spacing: .01em; }
.scene-link { display: inline-flex; align-items: center; justify-content: center; gap: 16px; border: 1px solid #aaa9a2; border-radius: 50%; width: 108px; height: 43px; font-size: 9px; letter-spacing: .13em; font-weight: 400; transition: background .2s, color .2s; }
.scene-link:hover { background: #e4e2dd; color: #222; }
.scene-link span { font-size: 15px; letter-spacing: 0; }
.scene-edge { position: absolute; color: #92938e; font-size: 9px; letter-spacing: .18em; font-weight: 400; }
.scene-edge-left { bottom: 3%; left: 3.8%; }
.scene-edge-right { bottom: 3%; right: 3.8%; }

/* Image-driven gallery in the style of a simple engineering archive */
.gallery-page, .project-page, .about-page { min-height: 100vh; background: var(--paper); color: var(--ink); }
.gallery-header { padding: 24px 2.5% 21px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #d9d9d6; }
.gallery-name { font-weight: 300; line-height: 1.1; font-size: clamp(26px, 4.4vw, 62px); letter-spacing: .145em; white-space: nowrap; }
.gallery-nav { display: flex; gap: 35px; align-items: center; flex-shrink: 0; }
.gallery-nav a { font-size: 11px; letter-spacing: .13em; font-weight: 400; color: #949493; }
.gallery-nav a[aria-current="page"], .gallery-nav a:hover { color: #292929; }
.gallery-main { padding: 31px 2.5% 0; }
.gallery-intro { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 26px; font-size: 10px; letter-spacing: .15em; font-weight: 400; color: #747573; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.8%; row-gap: 44px; }
.gallery-project { display: block; min-width: 0; text-align: center; }
.gallery-image { overflow: hidden; aspect-ratio: .985; background: #dadad5; }
.gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-project:hover img { transform: scale(1.025); }
.gallery-project h2 { font-size: 13px; font-weight: 400; letter-spacing: .045em; margin: 16px 0 7px; }
.gallery-project p { font-size: 9px; letter-spacing: .14em; margin: 0; color: #92928e; font-weight: 400; }
.gallery-disclaimer { max-width: 550px; color: #92928e; font-size: 11px; line-height: 1.75; margin: 63px 0 42px; }
.gallery-footer { padding: 22px 2.5% 28px; border-top: 1px solid #dededb; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .15em; color: #73736f; }
.gallery-footer a:hover { color: #242424; }

/* Individual project pages: information first, not gimmicks */
.project-main { width: min(1100px, 90%); margin: 65px auto 110px; }
.project-return { display: inline-block; font-size: 11px; letter-spacing: .13em; margin-bottom: 76px; color: #6c6c69; }
.project-return:hover { color: #222; }
.project-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 11%; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 45px; }
.project-num { font-size: 11px; letter-spacing: .16em; color: #8c8c88; margin: 0 0 21px; }
.project-heading h1 { font-weight: 300; font-size: clamp(43px, 5.8vw, 75px); line-height: 1.15; letter-spacing: -.04em; margin: 0; }
.project-intro { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.7; color: #676762; font-weight: 300; margin: 0; }
.project-hero { margin: 42px 0 8px; aspect-ratio: 1.9; background: #d5d5d0; }
.project-hero img { height: 100%; width: 100%; object-fit: cover; display: block; }
.project-image-credit { margin: 13px 0 75px; font-size: 10px; line-height: 1.6; color: #8c8c87; }
.project-detail-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; }
.project-detail-grid h2 { font-size: 11px; font-weight: 400; letter-spacing: .2em; color: #777772; margin: 5px 0 0; }
.project-body p { font-size: 16px; line-height: 1.95; margin: 0 0 26px; color: #41413e; }
.project-specs { border-top: 1px solid #d5d5d2; padding: 0; margin: 45px 0 0; list-style: none; }
.project-specs li { border-bottom: 1px solid #d5d5d2; padding: 15px 0; font-size: 13px; line-height: 1.7; }
.project-next { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 100px; font-size: 12px; }

/* About: edited like a short personal bio, not a resume generator */
.about-main { width: min(980px, 88%); margin: clamp(65px, 10vw, 145px) auto 150px; }
.about-kicker { font-size: 11px; letter-spacing: .2em; font-weight: 400; color: #868680; }
.about-main h1 { font-weight: 300; font-size: clamp(64px, 11vw, 145px); letter-spacing: -.062em; line-height: 1.1; margin: 28px 0 60px; }
.about-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; border-top: 1px solid #d1d1cc; padding-top: 31px; }
.about-columns p { font-size: 18px; line-height: 1.8; color: #4a4a46; margin: 0 0 22px; }
.about-meta { font-size: 12px!important; line-height: 2.1!important; color: #868680!important; }
.about-meta a { border-bottom: 1px solid #9d9d96; }
.about-meta a:hover { color: #222; }

/* Small displays: keep home one-screen; reduce collage instead of introducing scrolling. */
@media (max-width: 1100px) {
  .scene-photo-one { left: 8%; }
  .scene-photo-two { right: 6%; }
  .scene-photo-three { left: 3%; }
  .scene-photo-four { right: 3%; }
  .scene-photo-five { left: 29%; bottom: 3%; }
}
@media (max-width: 760px) {
  .site-header { height: 60px; padding: 0 6%; }
  .site-name { font-size: 16px; }
  .header-nav { gap: 25px; font-size: 9px; }
  .home-scene { height: calc(100vh - 60px); height: calc(100dvh - 60px); }
  .scene-photo-one { top: 4%; left: 9%; width: 36vw; }
  .scene-photo-two { top: 13%; right: 7%; width: 27vw; }
  .scene-photo-three { top: 57%; left: 6%; width: 24vw; }
  .scene-photo-four { top: 64%; right: 7%; width: 26vw; }
  .scene-photo-five { bottom: 5%; left: 33%; width: 28vw; }
  .scene-title { top: 44%; width: min(90%, 400px); }
  .scene-title h1 { font-size: clamp(40px, 7vw, 60px); }
  .scene-identity { font-size: 8px; margin-bottom: 19px; }
  .scene-description { font-size: 11px; margin: 19px 0 24px; }
  .scene-edge { bottom: 2%; font-size: 8px; }
  .scene-edge-right { display: none; }
  .floating-photo > span, .floating-photo figcaption { font-size: 7px; }
  .gallery-header { padding: 21px 4%; }
  .gallery-name { font-size: clamp(24px, 5vw, 39px); }
  .gallery-nav { gap: 18px; }
  .gallery-nav a { font-size: 10px; }
  .gallery-main { padding: 27px 4% 0; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 31px; column-gap: 18px; }
  .gallery-intro { font-size: 9px; }
  .gallery-project h2 { font-size: 12px; line-height: 1.45; }
  .project-heading { grid-template-columns: 1fr; gap: 25px; }
  .project-main { margin-top: 50px; }
  .project-return { margin-bottom: 40px; }
  .project-detail-grid { grid-template-columns: 1fr; gap: 25px; }
  .project-image-credit { margin-bottom: 40px; }
  .about-columns { grid-template-columns: 1fr; gap: 18px; }
  .about-main h1 { margin-bottom: 35px; }
}
@media (max-width: 480px) {
  .site-header { height: 57px; }
  .home-scene { height: calc(100vh - 57px); height: calc(100dvh - 57px); }
  .scene-photo-one { left: 8%; top: 7%; width: 49vw; }
  .scene-photo-two { top: 13%; right: 5%; width: 29vw; }
  .scene-photo-three { top: 65%; left: 6%; width: 29vw; }
  .scene-photo-four { top: 68%; right: 6%; width: 33vw; }
  .scene-photo-five { display: none; }
  .scene-title { top: 44%; width: 94%; }
  .scene-title h1 { font-size: clamp(38px, 10vw, 50px); }
  .scene-description { max-width: 255px; margin: 17px auto 22px; }
  .scene-link { width: 106px; height: 41px; }
  .scene-edge-left { bottom: 2%; }
  .gallery-header { padding: 19px 4%; }
  .gallery-name { font-size: 22px; letter-spacing: .1em; }
  .gallery-nav { gap: 11px; }
  .gallery-nav a { font-size: 9px; letter-spacing: .04em; }
  .gallery-intro span:last-child { display: none; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-image { aspect-ratio: 1.05; }
  .gallery-disclaimer { font-size: 11px; margin-top: 40px; }
  .project-hero { aspect-ratio: 1.2; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .scene-photo-one { top: 0; width: 18vw; }
  .scene-photo-two { top: 4%; width: 17vw; }
  .scene-photo-three { top: 50%; width: 11vw; }
  .scene-photo-four { top: 50%; width: 12vw; }
  .scene-photo-five { bottom: 0; width: 13vw; }
  .scene-title { top: 46%; }
  .scene-title h1 { font-size: clamp(37px, 3.9vw, 56px); }
  .scene-identity { margin-bottom: 12px; }
  .scene-description { margin: 14px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms!important; }
}

/* v0.4.2 — subdued green / charcoal archive theme.
   A Linux-friendly monospace without neon, terminal chrome, or decorative code. */
:root {
  --charcoal: #2b332c;
  --charcoal-soft: #343c34;
  --olive-fuzz: #798b6c;
  --ink: #e4e2d6;
  --ink-soft: #c0c5b5;
  --paper: #394339;
  --line: rgba(218,225,208,.2);
  --quiet: #abb4a4;
  --white: #e7e9df;
  font-family: "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  color-scheme: dark;
}
::selection { background: #8da078; color: #202720; }
.skip-link { background: #e4e9d9; color: #252d24; }

/* Gallery is intentionally lighter and greener than the landing screen. */
.gallery-page,
.project-page,
.about-page {
  color: #e2e6d9;
  background:
    radial-gradient(ellipse 70% 65% at 13% 11%, rgba(140,162,124,.18) 0%, transparent 73%),
    radial-gradient(ellipse 70% 70% at 85% 77%, rgba(113,138,100,.15) 0%, transparent 76%),
    radial-gradient(ellipse at 45% 42%, rgba(110,136,103,.08) 0%, transparent 72%),
    linear-gradient(145deg, #404b40 0%, #394239 47%, #343b34 100%);
  min-height: 100vh;
  isolation: isolate;
  position: relative;
}
/* A separate faint noise layer gives subtle material texture, not stripes. */
.gallery-page::before,
.project-page::before,
.about-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/grain.svg");
  background-size: 320px 320px;
  opacity: .13;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.gallery-header,
.gallery-main,
.gallery-footer,
.project-main,
.about-main {
  position: relative;
}
.gallery-header,
.gallery-footer {
  border-color: rgba(229,232,217,.19);
}
.gallery-name {
  color: #eceee4;
  font-size: clamp(26px, 3.9vw, 54px);
  letter-spacing: .075em;
  font-weight: 400;
}
.gallery-nav a {
  color: #bcc8b5;
  font-size: 11px;
  letter-spacing: .11em;
}
.gallery-nav a[aria-current="page"],
.gallery-nav a:hover {
  color: #f2f2e9;
}
.gallery-intro,
.gallery-project p,
.gallery-disclaimer {
  color: #c0c8b8;
}
.gallery-project h2 {
  color: #e8ebde;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
}
.gallery-project p { color: #afbda8; letter-spacing: .1em; }
.gallery-image { background: #465147; }
.gallery-footer { color: #bfcbba; }
.gallery-footer a:hover { color: #f4f5eb; }
.project-heading { border-color: rgba(222,232,212,.22); }
.project-num,
.project-return,
.project-image-credit,
.about-kicker,
.about-meta {
  color: #bac8b5 !important;
}
.project-heading h1,
.about-main h1 {
  color: #e8eee0;
  font-weight: 400;
}
.project-intro,
.project-body p,
.about-columns p {
  color: #d6dece;
}
.project-specs,
.project-specs li,
.project-next,
.about-columns {
  border-color: rgba(224,234,216,.2);
}
.project-specs li,
.project-next,
.about-meta a { color: #dce7d4; }
.about-meta a { border-color: #b8c5b1; }
@media (max-width: 760px) {
  .gallery-name { font-size: clamp(22px, 5vw, 34px); }
  .gallery-project h2 { font-size: 12px; }
}
@media (max-width: 480px) {
  .gallery-name { font-size: 21px; }
  .gallery-nav a { font-size: 10px; }
}


/* v0.4.3: spruce-green, low-glare gallery and project pages */
:root {
  --charcoal: #1e3026;
  --charcoal-soft: #293d31;
  --ink: #e8e8db;
  --ink-soft: #bec9bc;
  --paper: #2e4034;
  --line: rgba(227,235,220,.17);
  --quiet: #b4c2b4;
  --white: #e9eee3;
  font-weight: 400;
}
.gallery-page,
.project-page,
.about-page {
  color: #e7ebdf;
  background:
    radial-gradient(ellipse 75% 70% at 12% 16%, rgba(101,134,105,.17), transparent 73%),
    radial-gradient(ellipse 68% 78% at 84% 79%, rgba(75,109,83,.13), transparent 75%),
    linear-gradient(140deg, #3b4b3e 0%, #314438 46%, #283a30 100%);
  isolation: isolate;
  position: relative;
}
.gallery-page::before,
.project-page::before,
.about-page::before {
  z-index: 0;
  opacity: .19;
  background: url("/grain.svg") 0 0 / 320px 320px repeat;
  mix-blend-mode: soft-light;
}
.gallery-page > *,
.project-page > *,
.about-page > * {
  position: relative;
  z-index: 1;
}
.gallery-header, .gallery-footer,
.project-heading, .project-next, .project-specs,
.project-specs li, .about-columns {
  border-color: rgba(225,235,220,.18);
}
.gallery-name, .gallery-project h2,
.project-heading h1, .about-main h1 {
  color: #eef0e5;
}
.gallery-name {
  font-size: clamp(23px,3.5vw,46px);
  letter-spacing: .065em;
  font-weight: 500;
}
.gallery-nav a, .gallery-intro,
.gallery-project p, .gallery-disclaimer,
.gallery-footer, .project-return, .project-num,
.project-image-credit, .about-kicker, .about-meta {
  color: #c0cbbd !important;
}
.gallery-nav a[aria-current="page"], .gallery-nav a:hover {
  color: #f5f5e9 !important;
}
.gallery-image { background: #405448; }
.gallery-project h2 { font-weight: 400; font-size: 12px; }
.project-intro, .project-body p, .about-columns p,
.project-specs li, .project-next { color: #dce5d9; }
@media (max-width: 480px) {
  .gallery-name { font-size: 22px; }
}