/* Julia Staub. Sizes are measured from the 1754px-wide sketches, expressed in vw. */

/* EB Garamond is only downloaded where Georgia isn't installed (Android, Linux). */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 112%;
  src: url(fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ponytail: size-adjust 112% is eyeballed against Georgia's x-height; tune it on an Android phone. */

:root {
  --ink: #000;
  --accent: #5A6547;
  --m: max(20px, 4.3vw);          /* page margin (75px in the sketch) */
  --indent: max(20px, 15vw);      /* text indent on About/CV (263px in sketch 02) */
  --nav: clamp(1rem, 1.5vw, 1.5rem);              /* the "headline" size: menu (and the About intro) */
  --small: max(11px, calc(var(--nav) / 2));        /* everything else: half the headline (2:1), never below 11px */
  --edge: max(20px, 2vw);                          /* header to top edge = footer to bottom edge */
  /* Image strips (overviews, project/Notiz pages) end one gap before the menu start ("Architektur");
     text on the right starts exactly under it. --menu-left is measured by align.js (fallback ~60vw). */
  --gap: 4vw;
  --pics: calc(var(--menu-left, 60vw) - var(--m) - var(--gap));
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, 1.1vw, 19px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: #fff; color: var(--ink);
  font-family: Georgia, "EB Garamond", serif; line-height: 1.4; font-size: var(--small);
}
main { flex: 1; padding: 0 var(--m); }
img { display: block; max-width: 100%; height: auto; }
/* Deter casual saving: no right-click / long-press "save image", no dragging. (Screenshots can't be prevented.) */
main img { pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--accent); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
h1, h2, h3, p, ul, dl { margin: 0; font-weight: normal; }
h1, h2, h3 { font-size: inherit; }                       /* only two sizes: headings use the small size too */
ul { padding: 0; list-style: none; }
.it { font-style: italic; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- header ---------- */
.top {
  display: flex; justify-content: space-between; align-items: center;   /* logo centred on the menu line */
  padding: var(--edge) var(--m) 0;
}
.page-home .top { align-items: flex-start; }
.name { font-size: clamp(2.2rem, 3.8vw, 4.4rem); line-height: 1; }
.logo img { width: clamp(48px, 4.9vw, 92px); }

#nav { font-size: var(--nav); }
#nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; }   /* "About" on the same line */
#nav li:not(:last-child)::after {           /* the small raised dot between items */
  content: "·"; font-size: .7em; vertical-align: .55em; margin: 0 .6em 0 .35em;
}
#nav [aria-current] { color: var(--accent); }

/* Desktop: the popover nav is always shown inline. */
.menu-dot { display: none; }
@media (min-width: 761px) {
  #nav[popover] {
    display: block; position: static; inset: auto; width: auto; height: auto;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  }
}

/* Mobile: one green dot opens the menu. */
@media (max-width: 760px) {
  :root { --small: .95rem; }
  .menu-dot {
    display: block; width: 44px; height: 44px; margin: -12px -12px 0 0; padding: 0;
    border: 0; background: radial-gradient(circle, var(--accent) 7px, transparent 8px); cursor: pointer;
  }
  #nav:popover-open {
    inset: 0; width: 100%; height: 100%; margin: 0; border: 0; padding: max(20px, 6vw) var(--m);
    background: #fff; color: var(--ink); font-size: 1.6rem;
  }
  .menu-dot.close { margin-left: auto; }
  #nav ul { display: block; text-align: right; margin-top: 3.5rem; }
  #nav li { margin-bottom: .6rem; }
  #nav li::after { content: none !important; }
}

/* ---------- footer ---------- */
.bottom {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 6rem var(--m) var(--edge);
}
.bottom .langs { display: flex; gap: .8em; }
.bottom .legal { display: block; margin-top: .4rem; }       /* About: "Impressum & Datenschutz" under DE EN HU */
.bottom [aria-current] { color: var(--accent); }
/* Project and Notiz pages: "next" on the same line as DE EN HU, starting where the text column starts. */
.page-projekt .bottom, .page-notiz .bottom { display: grid; grid-template-columns: var(--pics) minmax(0, 1fr); column-gap: 0; }
.page-projekt .bottom .next, .page-notiz .bottom .next { padding-left: var(--gap); }
@media (max-width: 760px) { .page-projekt .bottom .next, .page-notiz .bottom .next { padding-left: 0; } }
.bottom .next i { margin-right: .3em; }

/* ---------- home ---------- */
.page-home main { display: grid; place-items: center; }
.hero-tree { width: min(21vw, 300px); min-width: 180px; margin-top: 3vw; }

/* ---------- rows: Architektur overview + Notizen (04-Notizen.png) ---------- */
/* Up to 3 equal images on the left; title/date line on the right, aligned to the right margin. */
.row {
  display: grid; grid-template-columns: var(--pics) minmax(0, 1fr);
  align-items: center; margin-top: 6vw;
}
.row:first-of-type { margin-top: 6vw; }                  /* same as between rows */
.row .pics { grid-column: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.1vw; }
.row .pics:not(.strip) img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
/* Architektur: a strip of up to 6 thumbnails, all the same height, each in its own proportions
   (like samchermayeffoffice.com/works). If a strip is wider than its column, the images shrink
   together. Space between projects = twice the page margin. */
.page-architektur .row, .page-architektur .row:first-of-type { margin-top: calc(2 * var(--m)); }   /* from the logo's bottom, and between projects */
.row .pics.strip { display: flex; gap: .4vw; align-items: flex-start; }
.row .strip img { height: var(--thumb-h, 6.6vw); width: auto; flex: 0 1 auto; min-width: 0; object-fit: cover; }
.row .side { grid-column: 2; padding-left: var(--gap); text-align: right; }
.row .when { font-style: italic; letter-spacing: .02em; }
/* Architektur: images · dotted line · title, the title centred on the images, the year below it. */
.page-architektur .row { display: flex; align-items: center; }
.page-architektur .row .pics.strip { flex: 0 1 auto; max-width: var(--pics); }
.page-architektur .row .dots { flex: 1 1 auto; min-width: 2vw; border-top: 2px dotted #9b9b9b; margin: 0 1.2vw; }
.page-architektur .row .side { flex: 0 0 auto; max-width: 40%; padding-left: 0; position: relative; }
.page-architektur .row .side .when { position: absolute; right: 0; top: 100%; }
.page-architektur .row.text-only .side { margin-left: auto; }
/* Notizen: the arrow follows the date on the same line. */
.row .arrow { margin-left: .5em; }
.row a.pics:hover img { opacity: .85; }
@media (max-width: 760px) {
  .row { display: block; margin-top: 3.5rem; }
  .row .pics { grid-template-columns: 1fr; gap: .8rem; }
  .row .pics.strip { flex-wrap: wrap; gap: 1.5vw; }
  .row .strip img { height: 22vw; }
  .row .side { padding: .8rem 0 0; text-align: left; }
  .page-architektur .row { display: block; }
  .page-architektur .row .dots { display: none; }
  .page-architektur .row .side { max-width: none; }
  .page-architektur .row .side .when { position: static; }
}

/* ---------- project page: Eya Village (Sam Chermayeff) ---------- */
/* Same grid as the overview rows: images have the same left and right edges as the overview strips;
   the text column starts under "Architektur". It stays in view and scrolls on its own if the text
   is longer than the screen. */
.project {
  display: grid; grid-template-columns: var(--pics) minmax(0, 1fr); margin: calc(2 * var(--m)) 0 0;   /* as on Architektur */
}
.project .info {
  position: sticky; top: 0; align-self: start; max-height: 100svh; min-height: 100svh; overflow-y: auto;
  scrollbar-width: none; display: flex; flex-direction: column; gap: 2.5rem;
  padding: 2vw 0 max(20px, 3vw) var(--gap);
}
.project h1 { margin-bottom: 1.2rem; }
.project dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.2rem; row-gap: .15rem; }
.project dt { font-style: italic; }
.project dd { margin: 0; }
.project .text { line-height: 1.9; }
.project .text p + p { margin-top: 1.1em; }
.note-page .place { font-style: italic; }
.project .pics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--m); }   /* same as the page margin left of the images */
.project > * { min-width: 0; }
.project .pics img { width: 100%; }
@media (max-width: 760px) {
  .project { display: flex; flex-direction: column-reverse; margin-left: 0; }
  .project .info { position: static; min-height: 0; max-height: none; overflow: visible; padding: 0 0 2rem; }
  .page-projekt .bottom, .page-notiz .bottom { display: flex; flex-direction: column; gap: 1.2rem; }
}

/* ---------- free compositions (project/Notiz pages; base rules in komposition.css) ---------- */
.comp { margin: calc(2 * var(--m)) calc(-1 * var(--m)) 0; }          /* full page width: positions are % of it */
@media (max-width: 760px) {
  .comp { margin: 2rem 0 0; }
  .comp-in { height: auto !important; display: flex; flex-direction: column; gap: 2rem; }
  .comp .kb { position: static; width: auto !important; }       /* .comp: beats komposition.css */
  .comp .kb .k-title, .comp .kb dl, .comp .kb .k-place, .comp .kb .k-text p { font-size: var(--small); }
  .comp .kb .k-title { margin-bottom: .8rem; }
}

/* ---------- about / cv ---------- */
/* Portrait above the language switch, placed and sized as in Julia's screenshot (2026-11-14):
   ~8.2% wide, ~11.3% from the left, proportion 6:7, bottom ~5.7% of the width above DE EN HU. */
.page-about main { position: relative; min-height: calc(8.2vw * 1.5 + 5.7vw + 2rem); }   /* room for a 2:3 portrait */
.page-about .bottom { padding-top: 0; }
/* Bottom-left corner stays fixed; the photo keeps its original proportions (no cropping) and grows upward. */
.about-portrait { position: absolute; left: 11.3vw; bottom: 5.7vw; width: max(90px, 8.2vw); height: auto; }
.about-portrait.placeholder { aspect-ratio: 6 / 7; border: 1px solid #ddd; }
@media (max-width: 760px) {
  .about-portrait { position: static; margin: 3rem 0 2rem; width: 40%; }
  .page-about .bottom { padding-top: 0; }
}
/* About starts where the menu starts (--menu-left from align.js); CV and others keep the indent. */
@media (min-width: 761px) { .about { margin-left: calc(var(--menu-left, var(--indent)) - var(--m)); padding-left: 0 !important; } }
.about, .cv, .soon { padding: 6.5vw 0 0 calc(var(--indent) - var(--m)); max-width: calc(var(--indent) + 36rem); }
.about .intro { font-size: var(--nav); }              /* the one exception: headline size */
.contact { margin-top: 2.5rem; font-style: normal; color: var(--accent); }
.contact a:hover { color: var(--ink); }
.cv-link { display: inline-block; margin-top: 2.5rem; font-style: italic; }
.soon h1 { margin-bottom: 1rem; }
/* Legal page (Impressum & Datenschutz) */
.legal-page { max-width: calc(var(--indent) + 40rem); }
.legal-page h2 { font-size: var(--nav); margin: 0 0 .3rem; }
.legal-page h2 + .legal-sub { margin-bottom: 1.4rem; font-style: italic; }
.legal-page #datenschutz { margin-top: 4.5rem; }
.legal-page h3 { font-style: italic; margin: 1.8rem 0 .4rem; }
.legal-page p { line-height: 1.6; }
.legal-page p + p { margin-top: .6em; }
.legal-page dl { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .2rem; margin-bottom: 1.2rem; }
.legal-page dt { font-style: italic; }
.legal-page dd { margin: 0; }
.legal-page a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.cv { display: grid; grid-template-columns: 14rem 1fr; gap: 4rem; max-width: none; }
.portrait { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portrait.placeholder { border: 1px solid #ddd; }
.cv h2 { font-variant: small-caps; letter-spacing: .04em; margin: 2.2rem 0 .5rem; color: var(--accent); }
.cv dl { display: grid; grid-template-columns: 6rem 1fr; row-gap: .3rem; }
.cv dd { margin: 0; }
@media (max-width: 760px) { .cv { grid-template-columns: 1fr; gap: 2rem; } .portrait { max-width: 14rem; } }