/* ==========================================================================
   Jonas Zaleckas — portfolio
   One stylesheet for the whole site. Edit colours in :root below.
   ========================================================================== */

:root {
  --bg:          #fbfbf9;
  --bg-sunk:     #f2f1ed;
  --surface:     #ffffff;
  --text:        #1a1a18;
  --text-muted:  #6d6c66;
  --text-faint:  #96958e;
  --rule:        #e3e2dc;
  --rule-strong: #cdccc4;
  --accent:      #c0451c;
  --accent-soft: #fbeee9;
  --draft-bg:    #fff8e6;
  --draft-rule:  #e8d08a;
  --draft-text:  #7a5c11;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --wide: 1140px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #121211;
    --bg-sunk:     #1a1a18;
    --surface:     #1c1c1a;
    --text:        #ecebe6;
    --text-muted:  #a3a19a;
    --text-faint:  #78766f;
    --rule:        #2c2c29;
    --rule-strong: #3d3d39;
    --accent:      #f0784a;
    --accent-soft: #2a1a13;
    --draft-bg:    #241e0f;
    --draft-rule:  #5c4a1c;
    --draft-text:  #d8bf7c;
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- layout primitives ---------- */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
section + section { border-top: 1px solid var(--rule); }

/* ---------- typography ---------- */

h1, h2, h3 { font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; margin: 0; }

h1 { font-size: clamp(2.35rem, 6.5vw, 3.9rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.012em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--text);
}

.muted { color: var(--text-muted); }

/* small uppercase mono label — used for section eyebrows and metadata keys */
.label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 1.75rem;
  display: block;
}

.label-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.25rem;
}
.label-rule .label { margin: 0; white-space: nowrap; }
.label-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ---------- header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 60px;
}

.brand {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  font-size: 0.98rem;
}
.brand span { color: var(--text-faint); font-weight: 400; }
@media (max-width: 620px) { .brand span { display: none; } }

.nav { display: flex; gap: clamp(1rem, 3vw, 1.9rem); }
.nav a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  transition: color .15s ease;
}
.nav a:hover { color: var(--accent); }

/* ---------- hero ---------- */

.hero { padding-block: clamp(4rem, 11vw, 8.5rem) clamp(3rem, 7vw, 5rem); }

.hero h1 { margin-bottom: 1.5rem; max-width: 26ch; text-wrap: balance; }
.hero h1 .quip {
  display: block;
  margin-top: 0.25em;
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .lede { max-width: 54ch; margin-bottom: 2.25rem; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-meta span {
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  padding: 0.3rem 0.75rem;
  color: var(--text-muted);
}

.tools-line {
  margin: 2.25rem 0 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.tools-line .label { margin: 0 0 0.35rem; }

/* ---------- project cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem);
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  group: card;
}

.card-media {
  position: relative;
  /* matches the 16:9 hero images exactly, so nothing is cropped twice */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  margin-bottom: 1.15rem;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-media img { transform: scale(1.035); }

.card-index {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.22rem 0.5rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text-muted);
}

.card h3 { margin-bottom: 0.4rem; transition: color .15s ease; }
.card:hover h3 { color: var(--accent); }

.card-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.7rem;
}

.card p { font-size: 0.95rem; color: var(--text-muted); margin: 0; }

/* ---------- awards ---------- */

.award-groups { margin: 0; }

/* One year per group: the year is stated once, in the left gutter, and its
   awards hang off it. Rules are two-weight on purpose — a strong rule between
   years, a light one between awards inside a year. */
.award-group {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  border-top: 1px solid var(--rule-strong);
  padding: 1.35rem 0 0.75rem;
}
.award-group:first-child { border-top: 0; padding-top: 0; }
.award-group:last-child { border-bottom: 1px solid var(--rule-strong); }

.award-year-head {
  padding-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0;
}

.award-list { list-style: none; margin: 0; padding: 0; }

/* Every row is the same height whether or not it carries a sub-line, so the
   list reads as an even rhythm rather than a ragged one. min-height rather
   than height: a long title that wraps is allowed to grow instead of
   overflowing. */
.award-list li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  min-height: 4.2rem;
}
.award-list li:first-child { border-top: 0; }

.award-name { font-size: 0.96rem; }
.award-name small {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

@media (max-width: 620px) {
  .award-group { grid-template-columns: 1fr; gap: 0.45rem; }
}

/* ---------- also built ---------- */

/* ---------- contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem 2.5rem;
}
.contact-item .label { margin-bottom: 0.4rem; }
.contact-item a {
  text-decoration: none;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: border-color .15s ease, color .15s ease;
}
.contact-item a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}
.site-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }

/* ==========================================================================
   Project pages
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  transition: color .15s ease;
}
.back-link:hover { color: var(--accent); }

.project-head { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem); }
.project-head h1 { max-width: 18ch; margin-bottom: 1.25rem; }
.project-head .lede { max-width: 58ch; color: var(--text-muted); }

/* metadata strip under the title */
.meta-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 2.75rem;
}
.meta-strip dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}
.meta-strip dd { margin: 0; font-size: 0.95rem; }

.hero-figure { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.hero-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--bg-sunk);
}

figcaption {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: 0.7rem;
  max-width: 60ch;
}

/* two-column body: prose + sticky spec panel */
.project-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .project-body { grid-template-columns: 1fr; }
}

.project-body h2 { font-size: 1.32rem; margin: 2.75rem 0 0.9rem; }
.project-body h2:first-child { margin-top: 0; }

.project-body ul { margin: 0 0 1.2em; padding-left: 1.15rem; }
.project-body li { margin-bottom: 0.45em; }

/* competition cell in the meta strip */
.comp-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.comp-link:hover { color: var(--accent); border-color: var(--accent); }

.comp-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-faint);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

/* right-hand column: spec panel + credits, sticky together */
.side-col {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 860px) { .side-col { position: static; } }

.specs, .credits {
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.5rem;
}

.specs h3, .credits h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
  margin-bottom: 1rem;
}

.panel-note {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin: 1.1rem 0 0;
  line-height: 1.5;
}
@media print { .panel-note { display: none; } }

/* credits */
.credit {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}
.credit:first-of-type { border-top: 0; padding-top: 0; }

.credit-role {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.2rem;
}
.credit-name { font-size: 0.92rem; }

.specs dl { margin: 0; }
.specs .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}
.specs .row:first-of-type { border-top: 0; padding-top: 0; }
.specs dt { font-size: 0.88rem; color: var(--text-muted); }
.specs dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* image grid */
.img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
.img-grid figure { margin: 0; }
.img-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--bg-sunk);
}

/* next / prev */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.pager a { text-decoration: none; }
.pager .label { margin-bottom: 0.3rem; }
.pager strong { font-weight: 600; letter-spacing: -0.015em; transition: color .15s ease; }
.pager a:hover strong { color: var(--accent); }

/* ---------- DRAFT marker ----------
   Everything wrapped in .draft is placeholder text. Delete the wrapper
   (not just the text) as you fill each section in. Search the repo for
   "draft" to find what is still outstanding.                            */

.draft {
  background: var(--draft-bg);
  border-left: 3px solid var(--draft-rule);
  border-radius: 0 4px 4px 0;
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.92rem;
  color: var(--draft-text);
}
.draft::before {
  content: "TO WRITE";
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  opacity: 0.75;
  margin-bottom: 0.35rem;
}
.draft p:last-child { margin-bottom: 0; }
.draft ul { margin-bottom: 0; }

@media print { .draft { display: none; } }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}