/* giyotin post web proposals: shared base (fonts, reset, placeholder frames). Every proposal loads this first. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/archivo-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/archivo-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: block; src: url("fonts/inter-var-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/ibm-plex-mono-regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: block; src: url("fonts/ibm-plex-mono-bold.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* placeholder frames: dark abstract grounds, no footage. .ph is a 16:9 box; modifiers change the ground. */
.ph { position: relative; overflow: hidden; background: #1a1718; aspect-ratio: 16 / 9; }
.ph::before { content: ""; position: absolute; inset: 0; background: var(--ph, linear-gradient(135deg, #2a2526 0%, #121011 55%, #1f1a1b 100%)); }
.ph::after { content: ""; position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.ph.g1 { --ph: linear-gradient(160deg, #3a2f2c 0%, #14100f 60%, #2b1512 100%); }
.ph.g2 { --ph: radial-gradient(120% 90% at 20% 20%, #34383d 0%, #101113 55%, #0b0b0c 100%); }
.ph.g3 { --ph: linear-gradient(200deg, #1d2a2f 0%, #0d1214 50%, #2a1d1b 100%); }
.ph.g4 { --ph: radial-gradient(80% 120% at 80% 100%, #4a1f17 0%, #1a0f0d 45%, #0c0b0b 100%); }
.ph.g5 { --ph: linear-gradient(120deg, #2c2a33 0%, #0e0d10 50%, #1c1816 100%); }
.ph.g6 { --ph: radial-gradient(100% 60% at 50% 100%, #3b3630 0%, #151312 50%, #0b0a0a 100%); }
.ph.g7 { --ph: linear-gradient(90deg, #101010 0%, #2a2224 45%, #101010 100%); }
.ph.g8 { --ph: radial-gradient(60% 80% at 30% 40%, #2e3a2f 0%, #0f1210 60%, #0a0a0a 100%); }
.ph .lbl { position: absolute; left: 14px; bottom: 12px; z-index: 2; font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; color: rgba(242,239,234,.72); }
.ph .tc { position: absolute; right: 14px; top: 12px; z-index: 2; font: 400 11px/1 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; color: rgba(242,239,234,.5); }
.ph.wide { aspect-ratio: 2.39 / 1; }
.ph.square { aspect-ratio: 1 / 1; }
.ph.tall { aspect-ratio: 4 / 5; }