/* Grätzlcode — Gassenschild design
   A Gründerzeit façade in Schönbrunner Gelb with a Viennese enamel street sign. */

/* Self-hosted fonts (Barlow, SIL Open Font License 1.1, see fonts/OFL.txt).
   Served from this site, so no visitor data goes to Google. Latin subset covers ä ö ü ß „ “. */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/barlow-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
}

:root {
  --wall: #E6B43F;          /* Schönbrunner Gelb */
  --wall-groove: rgba(92, 60, 8, .16);
  --enamel: #163A75;        /* street-sign blue */
  --enamel-deep: #0E2756;
  --rim: #F7F6F1;           /* sign white */
  --plaque: #EFEDE6;        /* Zusatztafel */
  --ink: #2B2213;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* the swinging sign briefly reaches past the edges while it settles;
     clip that instead of showing scrollbars */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Barlow", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--wall);
  /* rusticated Gründerzeit plaster: horizontal grooves with a light upper edge */
  background-image:
    linear-gradient(to bottom, rgba(255,240,200,.35) 0 1px, transparent 1px 70px, var(--wall-groove) 70px 72px);
  background-size: 100% 72px;
}

main {
  flex: 1;
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding: 48px 0 32px;
  display: grid;
  gap: 28px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

/* ——— the enamel sign ——— */
.sign {
  position: relative;
  width: 100%;
  /* horizontal padding keeps the text clear of the screws */
  padding: clamp(24px, 4vw, 34px) clamp(38px, 5vw, 50px);
  background: linear-gradient(170deg, var(--enamel) 0%, var(--enamel-deep) 100%);
  color: var(--rim);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 7px var(--enamel-deep),
    inset 0 0 0 11px var(--rim),
    0 2px 0 rgba(0,0,0,.25),
    0 18px 30px -12px rgba(60, 35, 0, .55);
  transform-origin: 50% -40px;
  display: grid;
  grid-template-columns: auto 1fr;
  /* district number sits on the first line of the street name, also when it wraps */
  align-items: baseline;
  /* one size for district number and street name */
  --sign-text: clamp(2.4rem, 9vw, 5.6rem);
  gap: clamp(10px, 2.5vw, 22px);
  text-align: left;
}
/* enamel sheen */
.sign::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 6px;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%);
  pointer-events: none;
}
/* screws */
.screw {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 15%, #aab0bb 40%, #6c7380 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.screw:nth-of-type(1) { top: 20px; left: 20px; }
.screw:nth-of-type(2) { top: 20px; right: 20px; }
.screw:nth-of-type(3) { bottom: 20px; left: 20px; }
.screw:nth-of-type(4) { bottom: 20px; right: 20px; }

.bezirk,
.sign .street {
  margin: 0;
  font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: var(--sign-text);
  line-height: .95;
  letter-spacing: .005em;
}

/* smaller sign used as header on the legal pages */
.sign--small { width: auto; justify-self: start; padding: 20px 38px; }
.sign--small .screw:nth-of-type(1), .sign--small .screw:nth-of-type(2) { top: 16px; }
.sign--small .screw:nth-of-type(3), .sign--small .screw:nth-of-type(4) { bottom: 16px; }
.sign--small .screw:nth-of-type(odd)  { left: 18px; }
.sign--small .screw:nth-of-type(even) { right: 18px; }
.sign--small { --sign-text: clamp(1.8rem, 6vw, 3rem); }
.sign--small a { color: inherit; text-decoration: none; }

/* ——— traffic sign on a pole (404 page) ——— */
.post {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 0 clamp(90px, 14vh, 150px);   /* pole continues below the signs */
}
/* the pole: galvanised steel, from behind the sign down to the pavement */
.post::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px; bottom: 6px;
  left: 50%;
  width: 12px;
  transform: translateX(-50%);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(to right, #6f747b, #d9dde2 35%, #9aa0a8 60%, #5d6168);
}
/* base plate on the pavement */
.post::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  width: 46px; height: 8px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #5d6168;
  box-shadow: 0 6px 10px -4px rgba(60, 35, 0, .5);
}
.traffic-sign {
  width: clamp(110px, 18vw, 150px);
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(60, 35, 0, .45));
}
/* Zusatztafel: white plate with a black border, mounted under the traffic sign */
.zusatztafel {
  width: clamp(150px, 26vw, 210px);
  padding: 8px 10px 10px;
  background: #fff;
  border: 3px solid #1d1d1b;
  border-radius: 4px;
  color: #1d1d1b;
  font-size: .95rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 8px 12px -6px rgba(60, 35, 0, .45);
}
.zusatztafel strong,
.zusatztafel h1 {
  margin: 0;
  display: block;
  font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  font-size: 1.25rem;
}

/* ——— Zusatztafel (explanatory plaque) ——— */
.plaque {
  width: min(100%, 520px);
  padding: 14px 22px 16px;
  background: var(--plaque);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 0 0 4px var(--enamel),
    0 10px 18px -10px rgba(60,35,0,.5);
  line-height: 1.45;
  color: var(--enamel-deep);
}
.plaque strong,
.plaque h1 {
  display: block;
  margin: 0;
  font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

/* ——— text on the wall ——— */
.wall-text {
  max-width: 34em;
  margin: 8px 0 0;
  font-size: 1.125rem;
  line-height: 1.55;
}
.contact { margin: 0; font-weight: 500; }
.since { margin: 0; font-size: .95rem; opacity: .8; }

a {
  color: var(--enamel-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* hover: the link becomes a tiny enamel street sign.
   box-shadow adds the "padding" so the text around it doesn't move. */
a:hover {
  color: var(--rim);
  background: var(--enamel-deep);
  text-decoration-color: transparent;
  box-shadow: 0 0 0 3px var(--enamel-deep), 0 0 0 4.25px var(--rim), 0 0 0 5.5px var(--enamel-deep);
}
@media (prefers-reduced-motion: no-preference) {
  a { transition: color .15s, background-color .15s, box-shadow .15s, text-decoration-color .15s; }
}
/* links inside the big signs keep the sign's own look */
.sign a:hover { color: inherit; background: none; box-shadow: none; }
a:focus-visible {
  outline: 3px solid var(--enamel-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ——— footer ——— */
.site-footer {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  font-size: .95rem;
  text-align: center;
}

/* ——— contact page: the street is named after a person ——— */
.namesake {
  width: min(100%, 560px);
  padding: 22px 26px 24px;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.55;
}
.namesake h1 { font-size: 1.6rem; margin-bottom: 0; }
.namesake .disclosure {
  margin-bottom: .9em;
  font-weight: 500;
  font-style: italic;
}
.namesake p { margin: 0 0 .7em; }
.namesake p:last-child { margin-bottom: 0; }
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 1.125rem;
}

/* ——— legal pages ——— */
.legal {
  align-content: start;
  justify-items: stretch;
  text-align: left;
}
.legal .sheet {
  background: var(--plaque);
  border-radius: 6px;
  padding: clamp(20px, 4vw, 36px);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--enamel), 0 10px 18px -10px rgba(60,35,0,.5);
  line-height: 1.6;
  max-width: 68ch;
}
.legal h2 {
  font-family: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  font-size: 1.35rem;
  margin: 1.6em 0 .3em;
  color: var(--enamel-deep);
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin: 0 0 .8em; }
.legal dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.legal dt { font-weight: 500; }
.legal dd { margin: 0; }
@media (max-width: 520px) {
  .legal dl { grid-template-columns: 1fr; gap: 2px; }
  .legal dd { margin-bottom: 10px; }
}
/* still to be filled in before going live */
.todo { background: #ffe58a; padding: 0 4px; border-radius: 3px; }

/* one orchestrated moment: the sign is hung up and settles */
@media (prefers-reduced-motion: no-preference) {
  .sign--hang { animation: hang 1.6s cubic-bezier(.3,.9,.3,1) both; }
  @keyframes hang {
    0%   { transform: translateY(-30px) rotate(-7deg); opacity: 0; }
    25%  { opacity: 1; }
    45%  { transform: rotate(4deg); }
    65%  { transform: rotate(-2deg); }
    82%  { transform: rotate(.8deg); }
    100% { transform: rotate(0); }
  }
}