@charset "UTF-8";

/* Ⓐ 2025 devijacije.org */

/* Reset */

*, *::before, *::after { box-sizing: border-box }
body { min-height: 100vh; min-height: 100dvh; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, hr { margin: 0; }
img, picture, video, canvas, svg { max-width: 100%; display: block }
input, button, textarea, select { font: inherit }
ul[role='list'], ol[role='list'] { list-style: none; padding-inline-start: 0 }
:target { scroll-margin-block: 5ex; }
details summary { cursor: pointer; }

/* Font setup */

:root { font-family: "InterVariable", sans-serif }

/* InterVariable https://rsms.me/inter/
   Copyright (c) 2016 The Inter Project Authors
   SPDX-License-Identifier: OFL-1.0 */
@font-face
{ font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
  src: url("fonts/InterVariable.woff2?v=4.1") format("woff2"); }

@font-face
{ font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: block;
  src: url("fonts/InterVariable-Italic.woff2?v=4.1") format("woff2"); }

/* DejaVu SansMono https://dejavu-fonts.github.io/
   https://dejavu-fonts.github.io/License.html */
@font-face
{ font-family: DejaVu-SansMono;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/DejaVuSansMono.woff2?v=2.37') format('woff2'); }

:root
{ -webkit-text-size-adjust: none;
  font-synthesis: none;

  --font_headings: "InterVariable";
  --font_headings_features: "dlig", "ss01", "ss03", "cv08";
  --font_body: "InterVariable";
  --font_body_features: "dlig", "ss01", "ss03";
  --font_mono: "DejaVu-SansMono";
  --font_mono_ratio: 0.85; /* mono size / font body size */

  --font_xxs: calc(var(--t-3) * 1rem);
  --font_xs: calc(var(--t-2) * 1rem);
  --font_s: calc(var(--t-1) * 1rem);
  --font_m: 1rem;
  --font_l: calc(var(--t1) * 1rem);
  --font_xl: calc(var(--t2) * 1rem);
  --font_xxl: calc(var(--t3) * 1rem);

  --font_numeric_default: normal;
  --font_numeric_tabular: slashed-zero tabular-nums; }

/* Measure and leading setup */

:root
{ font-size: 100%; /* 1rem is 16px */

  --leading_ratio_xs: calc(0.7 * var(--leading_ratio_m));
  --leading_ratio_s: calc(0.8 * var(--leading_ratio_m));
  --leading_ratio_m: 1.5; /* leading / font size */
  --leading_ratio_l: 1.275;
  --leading_ratio_xl: 1.125;

  --leading_m: calc(var(--leading_ratio_m) * 1rem);

  --measure_m: 64ch;
  --measure_xs: calc(0.25 * var(--measure_m));
  --measure_s: calc(0.5 * var(--measure_m));
  --measure_l: calc(1.5 * var(--measure_m));
  --measure_xl: calc(2.0 * var(--measure_m)); }

body { line-height: var(--leading_ratio_m); }

* { max-inline-size: none }
p { max-inline-size: var(--measure_m) }

/* Type and space scale */

:root
{
  --t-3: 0.485;
  --t-2: 0.618;
  --t-1: 0.786;
  --t0: 1;
  --t1: 1.616;
  --t2: 3.232;
  --t3: 4.848;

  --s-4: 0.25;
  --s-3: 0.375;
  --s-2: 0.5;
  --s-1: 0.75;
  --s0: 1;
  --s1: 1.5;
  --s2: 2;
  --s3: 3;
  --s4: 4;

  --sp_xxxs: calc(var(--s-4) * var(--leading_m));
  --sp_xxs: calc(var(--s-3) * var(--leading_m));
  --sp_xs: calc(var(--s-2) * var(--leading_m));
  --sp_s: calc(var(--s-1) * var(--leading_m));
  --sp_m: var(--leading_m);
  --sp_l: calc(var(--s1) * var(--leading_m));
  --sp_xl: calc(var(--s2) * var(--leading_m));
  --sp_xxl: calc(var(--s3) * var(--leading_m));
  --sp_xxxl: calc(var(--s4) * var(--leading_m));
  --sp_xxxxl: calc(11.089 * var(--leading_m)); }

body
{ font-family: var(--font_body); font-size: 1rem; font-weight: 400;
  font-feature-settings: var(--font_body_features);
  font-variant-numeric: var(--font_numeric_default); }

/* FIXME review this, tracking vs font-stretch. */

.font_stretch_xxs { letter-spacing: -0.1rem } /* { font-stretch: 50% } */
.font_stretch_xs { letter-spacing: -0.05rem } /* { font-stretch: 75% } */
.font_stretch_s { letter-spacing: -0.01rem } /* { font-stretch: 87.5% } */
.font_stretch_m { letter-spacing: normal; } /* { font-stretch: 100%; } */
.font_stretch_l { letter-spacing: 0.01rem; } /* { font-stretch: 112.5% } */
.font_stretch_xl { letter-spacing: 0.05rem; } /* { font-stretch: 125% } */
.font_stretch_xxl { letter-spacing: 0.1rem; } /* { font-stretch: 150% } */

/* Text */

.text_flow > * + * { margin-block-start: var(--sp_s); }
.text_flow > * + h2 { margin-block-start: var(--sp_l); }
.text_flow > h2 + * { margin-block-start: var(--sp_xs); }
.text_flow > h1 + h2 { margin-block-start: var(--sp_xxxs); }
.text_flow > h2 { line-height: var(--leading_ratio_l) }

/* Inlines */

abbr { font-feature-settings: "c2sc"; }

em { font-style: italic }
b, strong { font-weight: 700 }
small { font-size: var(--font_s) }
sup
{ font-feature-settings: "sups";
  font-size: inherit; vertical-align: baseline }

sub
{ font-feature-settings: "subs";
  font-size: inherit; vertical-align: baseline }

code
{ font-family: var(--font_mono);
  font-size: calc(1em * var(--font_mono_ratio)); }

a:hover { transition: 0.15s color ease-in-out; color: var(--color-link); }
a:hover:visited { color: var(--color-visited); }
a { text-decoration-line: underline;
    text-decoration-thickness: 0.04em;
    text-underline-offset: 3px;
    color: inherit; }

/* Headings */

h1, h2, h3, h4, h5, h6
{ font-family: var(--font_headings);
  font-weight: 700;
  font-feature-settings: var(--font_headings_features) }

h1 { font-size: var(--font_xl); }
h2 { font-size: var(--font_l); }

/* Lists */

ul, ol { padding-inline-start: var(--sp_s); }
li + li { margin-block-start: var(--sp_xs); }
li * + * { margin-block-start: var(--sp_xxxs); }

/* Other */

hr
{ border: none;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: inherit;
  width: 100%; }

/* Generic block layouts (see every layout) */

.stack
{ --stack_gap: var(--sp_m);
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: var(--stack_gap); }

.box
{ --box_pad: var(--sp_m); --box_border: 0;
  padding: var(--box_pad); border: var(--box_border) solid; }

.center /* on the inline axis */
{ --center_max_size: var(--measure_m); --center_pad: 0; --center_align: normal;
  display: flex; flex-direction: column; align-items: var(--center_align);
  box-sizing: content-box;
  max-inline-size: var(--center_max_size);
  padding-inline-start: var(--center_pad);
  padding-inline-end: var(--center_pad);
  margin-inline: auto; }

.cluster
{ --cluster_justify: flex-start; --cluster_align: center;
  --cluster_gap: var(--sp_m);
  display: flex; flex-wrap: wrap;
  align-items: var(--cluster_align); justify-content: var(--cluster_justify);
  gap: var(--cluster_gap); }


.sidebar
{ --sidebar_gap: var(--sp_m); --sidebar_bar_size: auto;
  --sidebar_min_content: 50%;
  display: flex; flex-wrap: wrap;
  gap: var(--sidebar_gap); }

.sidebar.start > :first-child, .sidebar.end > :last-child
{ flex-basis: var(--sidebar_bar_size); flex-grow: 1; }

.sidebar.start > :last-child, .sidebar.end > :first-child
{ flex-basis: 0; flex-grow: 999;
  min-inline-size: var(--sidebar_min_content); }


.switcher
{ --switcher_gap: var(--sp_m); --switcher_at_size: var(--measure_m);
  display: flex; flex-wrap: wrap; gap: var(--switcher_gap); }

.switcher > *
{ flex-grow: 1; flex-basis: calc((var(--switcher_at_size) - 100%) * 999) }

.switcher > :nth-last-child(n + 5),
.switcher > :nth-last-child(n + 5) ~ * { flex-basis: 100% }

.cover > .central { margin-block: auto; }
.cover
{ --cover_gap: var(--sp_m); --cover_min_size: 100dvh;
  display: flex; flex-direction: column; gap: var(--cover_gap);
  min-block-size: var(--cover_min_size); }


.grid
{ --grid_gap: var(--sp_m); --grid_min: var(--measure_xs);
  display: grid;
  grid-gap: var(--grid_gap);
  grid-template-columns:
    repeat(auto-fit, minmax(min(var(--grid_min), 100%), 1fr)); }


.frame
{ --frame_ratio_num: 16; --frame_ratio_den: 9;
  display: flex; justify-content: center; align-items: center;
  aspect-ratio:  var(--frame_ratio_num) / var(--frame_ratio_den);
  overflow: hidden; }

.frame > img, .frame > video
{ inline-size: 100%; block-size: 100%; object-fit: cover }


.reel
{ --reel_item_size: auto;
  --reel_gap: var(--sp_m);
  --reel_scrollbar_size: var(--sp_xxs);
  --reel_scrollbar_visible: auto; /* use scroll to make it always visible */
  --reel_track_color: #fff;
  --reel_thumb_color: #000;
  display: flex;
  overflow-x: var(--reel_scrollbar_visible); overflow-y: hidden;
  scrollbar-color: var(--reel_thumb_color) var(--reel_track_color);
  gap: var(--reel_gap); }

.reel::-webkit-scrollbar-thumb { background-color: var(--reel_thumb_color); }
.reel::-webkit-scrollbar
{ block-size: var(--reel_scrollbar_size); border-top: 1px solid; }

.reel > * { flex: 0 0 var(--reel_item_size); }
.reel > img { block-size: 100%; flex-basis: auto; width: auto; }

.imposter
{ --imposter_position: absolute;
  --imposter_pad: var(--sp_m);
  position: var(--imposter_position);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.imposter.contained
{ overflow: auto;
  max-inline-size: calc(100% - (var(--imposter_pad) * 2));
  max-block-size: calc(100% - (var(--imposter_pad) * 2)); }

/* Icons */

.icon { width: 0.75em; width: 1cap; height: 0.75em; height: 1cap}
.with_icon { --icon_gap: 0.25em; display: inline-flex; align-items: baseline; }
.with_icon .icon { margin-inline-end: var(--icon_gap) }

/* Site specific */

:root
{ --color-redish: #B52F29;
  --page_margin: var(--sp_m);

  --nav-hr-color: black;
  --nav-font-size: var(--font_xxl);
  --black-nav-font-weight: 700;
  --white-nav-font-weight: 650;

  --page-background: white;
  --page-font-color: black;
  --page-nav-font-weight: var(--black-nav-font-weight);
  --page-nav-hover-color: var(--color-redish);
  --page-nav-hover-font-weight: var(--black-nav-font-weight);

  --page-nav-min-height: 100%;

  --date-font-size: var(--font_l);
  --date-margin-top: var(--sp_xxs);

  --footer-color: #444444;
  --footer-hover-color: var(--color-redish);

  --color-link: white;
  --color-visited: #552551;}

/* Plots */

.plot small { font-size: var(--font_xs); }
.plot > * { margin-left: var(--sp_xs); margin-right: var(--sp_xs); }
/* Footer */

footer { font-size: var(--font_s); color: var(--footer-color); }
footer.box { --box_pad: var(--page_margin) }
footer.cluster
{ --cluster_justify: space-between;
  --cluster_align: baseline; }

footer a { color: var(--footer-color); }
footer a:hover, footer a:hover:visited { color: var(--footer-hover-color); }
footer .stamp { font-size: var(--font_xs); font-style: italic }

/* Body */

body { color: var(--page-font-color); background: var(--page-background); }
body.cover { --cover_gap: 0; }

/* Pages */

article.center, nav div.center { --center_pad: var(--page_margin) }

nav
{ /* Removes annoying gray flashes on iOS */
  -webkit-tap-highlight-color: rgba(0,0,0,0); }

nav hr { border-top-color: var(--nav-hr-color); }

nav h1, nav h2
{ font-size: var(--nav-font-size);
  font-weight: var(--page-nav-font-weight); }

nav > a { display: block } /* For rotations */
nav a { text-decoration: none; }

nav a:hover h1, nav a:hover:visited h1,
nav a:hover h2, nav a:hover:visited h2
{ color: var(--page-nav-hover-color);
  font-weight: var(--page-nav-hover-font-weight); }

.page-info
{ display: flex;
  line-height: 1;
  align-items: last baseline;
  margin-block-start: var(--sp_s);
  margin-block-end: var(--sp_s); }

.page-info .page-date
{ display: block;
  line-height: var(--leading_ratio_m);
  flex:none;
  padding-inline-end:var(--sp_s);
  font-variant-numeric: tabular-nums;
  font-size: var(--date-font-size);
  z-index: 1; /* Avoid overlap with title on hover */ }

.page-info h2 { flex-grow: 1; text-align: right; }

/* Devijacija */

:root { --devijacija: -6deg; }

header { overflow: hidden; }

nav > * { transform-origin: bottom left; }
nav > * { transform: rotate(var(--devijacija)); }
#page-index nav > * { transform: rotate(calc(-1 * var(--devijacija))); }

/* Compensate hr lengths, since we rotate it needs to get longer */

nav hr { width: calc(100dvw / cos(var(--devijacija))); }

/* Compensate nav block height. Since we rotate block elements that have the
   size of window width the following computes the additional height
   added by the rotation. For the index page we add this height at the
   end of the nav and for other pages at the beginning. This ensures
   that content doesn't get cropped by the [header] element. */

nav { margin-block-start: calc(tan(-1 * var(--devijacija)) * 100dvw); }

#page-index nav
{ margin-block-start: 0; /* Disable preceeding rule */
  margin-block-end: calc(tan(-1 * var(--devijacija)) * 100dvw); }

/* Compensate these div on the index page so that the hover effects
   leaves no gap at the end. We are not very precise here because to
   compute it we'd need to know the nav item height. The second rule
   is to make it work when there is no longer a margin, notably on
   mobile. */

#page-index nav > a > div
{ width:200%; transform: translate(-25%,0); }

#page-index nav > a > div > div
{ width: calc(100dvw - 2 * var(--page_margin)); }

/* Index page */

@media only screen /* Otherwise the print stylesheet can't override */
{ #page-index
  { background: black;
    color: white;
    --footer-hover-color: white; }
}

#page-index nav h1, #page-index nav h2
{ font-weight: var(--white-nav-font-weight); }

#page-index nav a:hover h2
{ font-weight: var(--page-nav-font-weight); }

#page-index nav a:hover > div, #page-index nav a:hover h2
{ background: var(--page-background);
  color: var(--page-font-color); }

#page-index hr { border-top-color: #404040; }

/* o-nama page */

#page-o-nama-index p
{ text-align: center;
  font-size: var(--font_l);
  line-height: var(--leading_ratio_l) }

#page-o-nama-index p:last-child
{ margin-block-start: var(--sp_l);
  font-weight: 600;
  font-size: var(--font_xl);
  line-height: var(--leading_ratio_xl); }

/* Other pages */

/* N.B. doesn't seem to work on mobile android browsers */
#page-test-tamnoplava-šema .page-info h2 { hyphens: auto }

/* Page schemes */

/* A few color candidates to add */

#page-test-siva-šema
{ --page-background: #DCE2D7;
  --page-font-color: black;
  --page-nav-font-weight: var(--black-nav-font-weight);
  --page-nav-hover-color: var(--color-redish);
  --page-nav-hover-font-weight: var(--black-nav-font-weight);
  --color-link: #474747;
  --footer-color: #767676;
  --footer-hover-color: var(--color-redish); }

#page-test-plava-šema
{ --page-background: #469CC6;;
  --page-font-color: black;
  --page-nav-font-weight: var(--black-nav-font-weight);
  --page-nav-hover-color: white;
  --page-nav-hover-font-weight: var(--white-nav-font-weight);
  --footer-hover-color: #98eaff; }

#page-test-žuta-šema, #page-plaće-index
{ --page-background: #CAB03E;
  --page-font-color: black;
  --page-nav-font-weight: var(--black-nav-font-weight);
  --page-nav-hover-color: white;
  --page-nav-hover-font-weight: var(--white-nav-font-weight);
  --footer-hover-color: #fffa8d; }

#page-test-zelena-šema, #page-o-nama-index
{ --page-background: #489358;
  --page-font-color: black;
  --page-nav-font-weight: var(--black-nav-font-weight);
  --page-nav-hover-color: white;;
  --page-nav-hover-font-weight: var(--white-nav-font-weight);
  --footer-color: #063006;
  --footer-hover-color: #a6f4b4; }

#page-test-ljubičasta-šema
{ --page-background: #2D2B2E;
  --page-font-color: white;
  --page-nav-font-weight: var(--white-nav-font-weight);
  --page-nav-hover-color: black;
  --page-nav-hover-font-weight: var(--black-nav-font-weight);
  --nav-hr-color: white;
  --color-link: black;
  --footer-color: #827c86;
  --footer-hover-color: #f4e7fa; }

#page-test-crvena-šema
{ --page-background: #B52F29;
  --page-font-color: white;
  --page-nav-font-weight: var(--white-nav-font-weight);
  --page-nav-hover-color: black;
  --page-nav-hover-font-weight: var(--black-nav-font-weight);
  --nav-hr-color: white;
  --color-link: black;
  --footer-color: #ffd5d3;
  --footer-hover-color: #6b0000; }

#page-test-tamnoplava-šema
{ --page-background: #2c2a78;
  --page-font-color: white;
  --page-nav-font-weight: var(--white-nav-font-weight);
  --page-nav-hover-color: black;
  --page-nav-hover-font-weight: var(--black-nav-font-weight);
  --nav-hr-color: white;
  --color-link: black;
  --footer-color: #7076cd;
  --footer-hover-color: #abb4ff; }

#page-test-ružičasto-šema
{ --page-background: #be2874;
  --page-font-color: white;
  --page-nav-font-weight: var(--white-nav-font-weight);
  --page-nav-hover-color: black;
  --page-nav-hover-font-weight: var(--black-nav-font-weight);
  --nav-hr-color: white;
  --color-link: black;
  --footer-color: #ed5ba0;
  --footer-hover-color: #ffa3e7; }

/* Screen size adjustements */

@media only screen and (min-width:180ch)
{
  :root { font-size: 1.25rem; /* scale body font to 20px */ }
}

@media only screen and (max-width:80ch)
{
  :root
  { --page_margin: var(--sp_s);
    --nav-font-size: var(--font_xl); }
}

@media print
{
  .o-nama { visibility: hidden }
  body
  { color: black;
    background: white; }
}