/* ------------------------------------------------------------------
   Peter Crane
   Shared styles for every page.
------------------------------------------------------------------- */

/* DM Mono, hosted with the site (no connection to Google needed).
   Licence: fonts/OFL.txt */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/dm-mono-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('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('fonts/dm-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --paper: #e4e0d9;       /* page background: the average tone of the grained paper */
  --ink: #2a2825;         /* main text */
  --muted: #625d55;       /* labels and secondary text */
  --rule: #2a282526;      /* thin lines */
  --film: #1f1d1a;        /* film box */
  /* Page grain strength: see the html background at the top of this file */
  --measure: 100%;        /* text fills the full content width, same as the photo */
  --font: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

/* Page background: paper colour with grain built in.
   As a real background it covers the full page, including the areas
   behind the iPhone status bar and toolbar.
   The grain varies evenly around --paper, so the plain colour Safari
   shows when you scroll past the top or bottom matches the page.
   Strength: the three 0.1 values in the line below (0.15 = stronger). */
html {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.1 0 0 0 0.8446  0.1 0 0 0 0.8289  0.1 0 0 0 0.8015  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: #000; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ------------------------------------------------------------------
   Grain
   One small noise tile, repeated, laid over the page, the work band,
   the photo and the film. The page grain is still. On the photo and the
   film it jumps to a new position about 10 times a second, like film grain.
   Grain size: baseFrequency in the --noise line. Larger number = finer grain.
   --grain-speed: time for one full cycle of 10 jumps.
------------------------------------------------------------------- */
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-speed: 1s;
}

@keyframes grain-shift {
  0%   { background-position: 0 0; }
  10%  { background-position: -40px -90px; }
  20%  { background-position: -130px 40px; }
  30%  { background-position: 60px -210px; }
  40%  { background-position: -50px 220px; }
  50%  { background-position: -140px 90px; }
  60%  { background-position: 130px 0; }
  70%  { background-position: 0 140px; }
  80%  { background-position: 30px 260px; }
  90%  { background-position: -90px 90px; }
  100% { background-position: 0 0; }
}

/* The old SVG grain layers in the HTML are no longer needed */
.grain, .photo-grain, .work-grain { display: none; }



/* People who have asked their system for less motion get still grain */
@media (prefers-reduced-motion: reduce) {
  .photo-frame::after, .film::after, .reel::after { animation: none; }
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

main { display: flex; flex-direction: column; gap: 56px; }

/* Header and footer */
.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.site-header .name { font-weight: 400; display: inline-flex; align-items: center; gap: 10px; }
.logo { display: block; height: 20px; width: auto; }   /* logo.svg (or logo.png) next to the name */
.header-email { background: var(--accent); padding: 3px 9px; }   /* same highlight as the section labels */

/* Highlighted link inside text, same look as the header email */
.highlight, .prose a.highlight {
  background: var(--accent);
  padding: 3px 9px;
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.site-header nav { display: flex; gap: 28px; }
.site-header nav { display: none; }   /* menu hidden for now: delete this line to bring it back */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;   /* keeps the highlighted email level with the other items */
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
  padding-top: 28px;
}

/* Shared text */
.label {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 15px;
  line-height: 1.75;
  max-width: var(--measure);
}
.prose p, .prose ul, .prose ol { margin: 0; }
.prose ul, .prose ol { padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.prose h2 { margin: 24px 0 0; font-size: 14px; font-weight: 500; }
.prose h2:first-child { margin-top: 0; }
.prose strong { font-weight: 400; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Home */
.intro-name { display: flex; flex-direction: column; gap: 6px; }
.intro-name h1 { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0.02em; }
.intro-name p { margin: 0; font-size: 15px; color: var(--muted); }
.intro-name .tagline { margin-top: 1.5px; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; }   /* small line under "Filmmaker in Vorarlberg", same style as the video caption */

.film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--film);
  overflow: hidden;
  margin-top: -40px;
}
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.22;
  mix-blend-mode: overlay;
  animation: grain-shift var(--grain-speed) steps(1) infinite;
}

/* Portrait: black and white, printed onto the paper, with its own grain */
/* Showreel: YouTube video, joined to the work band below */
.reel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--film);
  overflow: hidden;
}
.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Play button, shown until someone presses play */
.reel { background: var(--film); }
.reel-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  border: 0;
  padding: 0;
  /* Thumbnail (poster.jpg, self-hosted so nothing loads from YouTube
     before the click). The dark layer keeps the icon and text readable. */
  background:
    linear-gradient(rgba(31, 29, 26, 0.2), rgba(31, 29, 26, 0.2)),
    url("poster.jpg") center / cover no-repeat;
  color: #efebe3;
  font-family: var(--font);
  cursor: pointer;
}
.reel-play[hidden] { display: none; }
.reel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: rgba(31, 29, 26, 0.35);
}
.reel-play:hover .reel-icon { background: rgba(31, 29, 26, 0.6); }
.reel-note {
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  background: rgba(31, 29, 26, 0.55);
}
.reel-caption { margin-top: 12px; }
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;       /* clicks still reach the video */
  background-image: var(--noise);
  opacity: 0.15;              /* light grain so the video stays clear */
  mix-blend-mode: overlay;
  animation: grain-shift var(--grain-speed) steps(1) infinite;
}

/* Photo and work band sit together as one block */
.hero { display: flex; flex-direction: column; margin-top: -16px; }   /* keeps the video 40px below your name */
/* Dark text box ("worum es geht"), same look as the offer box */
.dark-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: #222222;
  color: #efebe3;
}
.dark-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.18;
  mix-blend-mode: screen;
}
.dark-box .label { color: #b5afa5; }
.dark-box .prose { gap: 16px; }

.photo { margin: 0; }
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.04);
  mix-blend-mode: multiply;   /* whites take on the paper colour */
  opacity: 0.94;              /* lifts the blacks slightly, like ink on paper */
}
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.45;              /* stronger grain on the photo than on the page */
  mix-blend-mode: overlay;
  animation: grain-shift var(--grain-speed) steps(1) infinite;
}

.section { display: flex; flex-direction: column; gap: 28px; }

/* Section labels: a small pastel highlight behind the text */
:root { --accent: #d9cfc3; }   /* warm taupe */
.section > .label {
  align-self: flex-start;
  background: var(--accent);
  color: var(--ink);
  padding: 4px 9px;
}

.notes-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.notes-list li { border-bottom: 1px solid var(--rule); }
.notes-list a {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  padding: 22px 0;
  min-height: 44px;
}
.notes-list .num { font-size: 12px; color: var(--muted); padding-top: 3px; }
.notes-list .text { display: flex; flex-direction: column; gap: 6px; }
.notes-list .title { font-size: 16px; font-weight: 400; }
.notes-list .desc { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* Work: compact dark band under the name */
.work {
  --dark: #222222;
  --dark-ink: #efebe3;     /* main text on dark */
  --dark-muted: #b5afa5;   /* secondary text on dark */
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--dark-ink);
  padding: 24px 28px;
}
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.18;
  mix-blend-mode: screen;
}
.work-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
}
.work-list li { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.65; }
.work-role { font-weight: 400; }
.work-text { color: var(--dark-muted); }
.work-text a { color: var(--dark-ink); text-decoration: underline; text-underline-offset: 3px; }
.work-text a:hover { color: #ffffff; }
.work a:focus-visible { outline-color: var(--dark-ink); }

/* Offer: what's included, in a dark box like the work band */
.offer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 8px 28px;
  list-style: none;
  background: #222222;
  color: #efebe3;
}
.offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.18;
  mix-blend-mode: screen;
}
.offer li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* title above, text full width */
  row-gap: 6px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(239, 235, 227, 0.14);
  font-size: 14px;
  line-height: 1.7;
}
.offer li:last-child { border-bottom: 0; }
.offer-key { font-size: 12px; color: #b5afa5; letter-spacing: 0.04em; padding-top: 2px; }

/* Notes */
article { display: flex; flex-direction: column; gap: 28px; }
.note-head { display: flex; flex-direction: column; gap: 14px; }
.note-head h1 { margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0.02em; }   /* same as your name on the home page */

/* Note summary: dark box, same look as the work band on the home page */
.tldr {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 24px 28px;
  background: #222222;
  color: #efebe3;
  font-size: 14px;
  line-height: 1.7;
  max-width: var(--measure);
}
.tldr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.18;
  mix-blend-mode: screen;
}

.note-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.note-nav .back { color: var(--muted); }

@media (max-width: 520px) {
  .wrap { gap: 64px; }
  main { gap: 44px; }
  .wrap { padding-top: 40px; }
  .prose { font-size: 15px; }
  .notes-list a { grid-template-columns: 32px minmax(0, 1fr); }
  .work-list { grid-template-columns: minmax(0, 1fr); }
  .offer li { grid-template-columns: minmax(0, 1fr); }
  .offer { padding: 6px 20px; }
  .dark-box { padding: 22px 20px; }
  .work { padding: 22px 20px; }
}

/* About: separated from the offer by a dashed line */
.about-section { padding-top: 36px; }

/* Dashed line, used above "über mich" and above the footer */
:root {
  --dash: 8px;    /* length of each dash */
  --gap: 6px;     /* space between dashes */
  --line: 1px;    /* thickness */
}
.about-section, .site-footer {
  /* Each tile is one dash with half a gap on either side.
     A small script at the bottom of each page sets --tile so a whole
     number of tiles fits the width exactly: no dash is ever cut off. */
  background-image: linear-gradient(to right,
    transparent calc(var(--gap) / 2),
    rgba(42, 40, 37, 0.3) calc(var(--gap) / 2),
    rgba(42, 40, 37, 0.3) calc(var(--gap) / 2 + var(--dash)),
    transparent calc(var(--gap) / 2 + var(--dash)));
  background-size: var(--tile, calc(var(--dash) + var(--gap))) var(--line);
  background-repeat: repeat-x;
  background-position: left top;
}


/* About: small black-and-white photo next to a few lines of text */
.about {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.about-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper);
}
.about-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(1.04);
  mix-blend-mode: multiply;   /* whites take on the paper colour */
  opacity: 0.94;
}
.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: 0.45;
  mix-blend-mode: overlay;
  animation: grain-shift var(--grain-speed) steps(1) infinite;
}
@media (max-width: 520px) {
  .about { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about-photo { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-photo::after { animation: none; }
}