/* @import '/src/styles/style.css';
        @import '/src/styles/header.css';
        @import '/src/styles/nav.css';
        @import '/src/styles/main.css';
        @import '/src/styles/context.css';
        @import '/src/styles/aside.css';
        @import '/src/styles/search.css';
        @import '/src/styles/footer.css';  */

        /* Standard proudly uses the free-for-all ☂Merriweather font, subsetted for performance and adjusted for Romanian diacritics usage quirks. 
Credit for the snazzy typography goes to Eben Sorkin and his team @ Sorkin Type */

@font-face {font-family:'Standard'; font-style:normal; src:url(/standard.woff) format('woff');}
@font-face {font-family:'Standard'; font-style:italic; src:url(/standard.woff2) format('woff2');}

:root {
  --white:#fafafa;
  --black:#050505;
  --dark:#393939;
  --gray:#505050;
  --light:#6d6d6d;
  --indigo: #305070;
  --crimson:#a03020;
  --sheer: rgba(255,255,255,.5);
  --opaque: rgba(0,0,0,.5);
  --border: 1px solid lightgray;
  --drop: .33px .33px .33px rgba(0,0,0,.5);
  --mask: linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%);
  --outset: 0px 0px 1px 1px rgba(0,0,0,0.25);
  --inset: inset 0px 0px 1px 1px rgba(0,0,0,0.25);
  --spine: 720px;
  --frame: 1280px;
  --gutter: 20px;
  --button: 48px;
}

html {
scroll-behavior:smooth;
overflow-x:hidden;
height:100%;
}

body {
scroll-behavior:inherit;
font-family: 'Standard', Georgia, serif;
text-rendering:auto;
text-align:center;
background:var(--white);
color:var(--black);
margin:0;
padding:0;
overflow-x:hidden;
overflow-y: auto;
height: 100%;
}

img {
max-width:100%;
height:auto;
}

p, h1, h2, h3, h4, h5, h6, figure {
  margin:0;
  padding:0;
  font-size:1em;
}

a {text-decoration:none;}

a[href] {
color:var(--indigo);
}

a[href]:hover {
  color:var(--crimson);
}

a:focus {       
  outline:medium inset var(--crimson);
  z-index:9999;
}

a:focus-within {
  z-index:9999;
}

i {
  font-style:italic;

}

s {
  text-decoration:none;
  font-weight:300;
}

u {
  text-decoration:none;
  font-weight:500;
}

button {
  border:none;
  outline:0;
  background:transparent;
  font-family:inherit;
  font-weight:thin;
}

nav, search {
  display:block;
  position:relative;
  height:var(--button);
  min-height:var(--button);
  line-height:var(--button);
  overflow:hidden;
  background:var(--tinted);
  border-top:1px solid black;
  border-bottom:1px solid black;
}

header, nav, main, search, aside, footer {
  max-width:1280px;
  margin-inline:auto;
}

#top, #bottom, #right, #left {
    display:block;
    position:absolute;
    text-decoration:none !important;
    font-weight:bold;
    background:inherit;
    background:var(--indigo);
    color:var(--white);
    padding:10px;
    z-index:9999;
  }

#top, #right {
    top:4px;
    margin-top:-80px;
  }

#bottom, #left {
    bottom:4px;
    margin-bottom:-80px;
  }

#top, #left {
    left:4px;
  }

#bottom, #right {
    right:4px;
  }

#top:focus, #right:focus {
    margin-top:0;
  }

#bottom:focus, #left:focus{
    margin-bottom:0;
  }

  [hidden] {
  display: none !important;
}

header {
  position:relative;
  text-align:center;
  text-shadow:var(--drop);
}

header a {
  display:inline-block;
  position:relative;
  width:fit-content;  
  margin-inline:auto;
  color:inherit;  
}

header h1, 
header p, 
header menu {
margin:0;
padding:0;
font-size:1em;
}

header b, 
header i {
display:block;
margin-inline:auto;
position:relative;
z-index:1000;
width:fit-content;
height:3rem;
line-height:3rem;
}

header b {
  z-index:500;
  font-size:5rem;
  font-weight:800;
  min-width:360px;
  width:100%;
  height:90px;
  line-height:90px;
  margin-block:-13px;
  max-width:fit-content;
  text-align:center;
  text-decoration:inherit;
  position:relative;
  color:var(--indigo);
}

header i {
padding-inline:.5rem;
font-size:1.5rem;
font-style:italic;
font-weight:700;
height:48px;
text-decoration:inherit;
color:var(--crimson);
}

header [translate] {
  margin-inline:auto;
  position:relative;
  line-height:2.75rem;
  z-index:2000;
}

header [translate]::before,
header [translate]::after {
  content: "\2022\0020\2022\0020\2022";
  display: inline-block;
  margin-inline:.25rem;
  opacity: 0.25;
}

header [translate] a {
  display:inline-block;
  height:3rem;
}

header [translate] s {
  font-weight:600;
  color:var(--light);
}

header [translate] u {
  font-weight:300;
  color:var(--grey);
}

header [translate] u {position:relative;}
header [translate] u[lang=ro] {padding-right:70px;}
header [translate] u[lang=en] {padding-left:70px;}

header [translate] u::before, 
header [translate] u::after {
  position:absolute;
  display:block;
  font-weight:bold;
  line-height:22px;
}

header [translate] u[lang]::before {
  background:var(--indigo);
  box-shadow:var(--outset);
  color:var(--white);
  width:24px;
  height:24px;
  margin:2px;
  /* border:2px solid rgba(0,0,0,.1); */
  border-radius:50%;
  z-index:200;
  top:-3px;
}

header [translate] u[lang]::after {
  color:var(--indigo);
  border:1px solid var(--light);
  box-shadow:var(--inset);
  border-radius:15px;
  width:48px;
  height:24px;
  padding:1px;
  top:-3px;
}

header [translate] u[lang=ro]::before {
  content:"en";
  right:5px;
}

header [translate] u[lang=en]::before {
  content:"ro";
  left:5px;
}

header [translate] u[lang=ro]::after {
  content:"ro";
  right:5px;
  padding-left:6px;
  text-align:left;
}

header [translate] u[lang=en]::after {
  content:"en";
  left:5px;
  padding-right:6px;
  text-align:right;
}

nav p {
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
scroll-snap-align:center;
scroll-snap-stop:always;
scroll-snap-type:x mandatory;
scroll-padding:0 50%;
scroll-padding-inline:50%;
white-space:nowrap;
mask-image: var(--mask);
font-size:15px;
}

nav a {
position:relative;
padding:10px 10px 10px 15px;
margin-left:-1px;
}

nav a:not(:last-child):after {
display:block;
position:absolute;
right:0;
top:8px;
content:"";
width:1px;
height:24px;
background:black;
}

nav b {
    font-weight:900;
}

nav mark {
    color:white;
    background:var(--indigo);
    border-radius:5px;
    padding:3px 6px;
}

main {
  text-align:left;
}

main h1, main h2, main h3 {margin-block:10px;}
main h1 {font-size:2em;}
main h2 {font-size:1.5em;}
main h3 {font-size:1.25em;}

article {
  margin-top:30px;
  margin-inline:auto;
}

article a[href]:hover {
  text-decoration:none;
}

hgroup {
  margin-block:var(--gutter);
  padding-inline:var(--gutter);
  max-width:var(--spine);
  margin-inline:auto;
}

hgroup #label {
  color:white;
  background:var(--indigo);
  text-transform:uppercase;
  border-radius:7px;
  padding:2px 6px;
  margin-right:6px;
  margin-left:-2px;
  font-weight:600;
}

hgroup #title {
  font-weight:lighter;
  color:var(--crimson);
  font-weight:500;
}

hgroup #summary {
  font-weight:bolder;
  color:dimgray;
}

figure {
  margin-inline:auto;
  position:relative;
  margin-top:24px;
}

figure img {
  display:block;
  text-align:right;
}

figcaption p:has(q) {
  position:absolute;
  font-style:italic;
  max-width:45%;
  margin:10px;
  bottom:0;
  left:0;
}

figcaption p:has(b) {
  position:absolute;
  direction:rtl;
  float:right;
  text-align:right;
  margin:10px;
  top:0;
  right:0;
}

figcaption p :is(b,i,u,s,q) {
  width:fit-content;
  padding-inline:5px;
  color:var(--white);
  background:rgba(0,0,0,0.75);
  border-bottom:1px solid rgba(255,255,255,0.25);
  box-decoration-break: clone;
  display:block;
  direction:ltr;
}

figcaption p q {
  display:inline;
  line-height:1.33;
}

 figure small {
  position:absolute;
  color:dimgray;
  display:block;
  font-size:14px;
  font-weight:300;

  bottom:0;
  left: -20px;
  text-orientation: sideways;
  writing-mode:sideways-lr;
  /* top:-20px;
  right:0; */
 }

blockquote {
  position:relative;
  font-style:italic;
  margin:0;
  padding:2px 20px;
  background:gainsboro;
  border-left:5px solid dimgray;
  border-right:5px solid dimgray;
}




main-content {
  display:block;
  line-height:1.75rem;
  margin-inline:auto;
  margin-block:var(--gutter);
  padding-inline:var(--gutter);
  max-width:var(--spine);
}

main-content:first-letter {
  initial-letter:2;
}

main-content p {
  margin-block:10px;
}

#main section h2 {font-size:2em; font-size:clamp(2em,5vw,3em); font-weight:900; padding-top:1em;color:gray; text-align:center;}

#main section h2::before,
#main section h2::after {
  content: "\2022\0020\2022\0020\2022";
  display: inline-block;
  margin-inline:0.5rem;
  opacity: 0.5;
}

#main article h3 {font-size:2em; font-size:clamp(2em,6vw,3em); padding:0.4em 0.6em 0;}

#main article a > u {
  color:var(--crimson);
  border-bottom:3px solid;
  padding:0 6px 4px;
}

main-context {
  position:relative;
  display:block;
  max-width:var(--spine);
  margin-inline:auto;
  padding-block: 5px;
  padding-left:70px;
  box-sizing:border-box;
  font-size:16px;
  line-height:1.4;
}

main-context address {
display:block;
}

main-context img {
  left:10px;
  position:absolute;
  display:block;
  border-radius:50%;
  border:2px solid var(--white);
  box-shadow:var(--outset);
  background:var(--indigo);
  height:var(--button);
  width:var(--button);
}

main-context #byline img {
 top:0;
}

main-context #tagline img {
 bottom:0;
}

main-context p {
font-style:italic;
}

main-context span {
  color:dimgray;
}

main-context data {
  display:inline-block;
}

main-context time {
  display:inline-block;
}

main-context b {
  position:relative;
  font-kerning:none;
  word-spacing:0.022em;
}

main-context b::before {
  position:absolute;
  content:attr(title);
  text-transform:capitalize;
  font-weight:bold;
  opacity:0.6;
}

.main-context b::after {
  position:absolute;
  left:100%;
  content:attr(data-domain);
  font-weight:bold;
  opacity:0.6;
}

aside {
  z-index:1000;
  display:block;
  position:sticky !important;
  user-select:none;
  inset:0;
    text-align:center;
  /* width:calc(100% + 40px); */
  /* margin-inline:-20px; */
  margin-inline:auto;
  margin-block:20px;;
  background:var(--white);
  background:rgba(250,250,250,0.9);
}

aside p {
  margin-inline:auto;
  margin-block:0;
  width:fit-content;
  max-width:720px;
  padding:0;
  position:relative;
}

aside a {
  display:block;
}

aside img {
  display:block;
  aspect-ratio:97/25;
  object-fit: contain;
  margin-inline:auto;
  max-width:720px;
  max-height:25vh;
  width:100%;
  height:auto;
}

@media all and (orientation:landscape) {
  aside {
    padding-block:5px;
  }
  aside img, figure img {
    border-radius:10px;
  }
}

aside small {
color:dimgray;
background:var(--white);
font-size:14px;
font-weight:300;
line-height:15px;
display:block;
position:absolute;
/* top:-15px;
right:10px; */
  bottom:0;
  left: -20px;
  text-orientation: sideways;
  writing-mode:sideways-lr;
}

aside input {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
text-align:center;
font-size:0;
border:none;
color:black;
background:
  linear-gradient(45deg, transparent calc(50% - 1px), var(--opaque) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) center / 20px 20px no-repeat,
  linear-gradient(-45deg, transparent calc(50% - 1px), var(--opaque) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) center / 20px 20px no-repeat,
  radial-gradient(circle 20px at center, var(--sheer) 19px, transparent 20px);
}

search {

}

search form {
display:block;
margin:auto;
max-width:var(--spine);
padding:12px 20px;
}

search form input {
height:24px;
font-size:2rem;
font-weight:300;
width:100%;
border:none;
display:block;
box-sizing:border-box;
border:none;
border-radius:12px;
font-size:1rem;
font-family:inherit;
padding-left:8px;
color:var(--indigo);
box-shadow:var(--inset);
}

search form input:focus {
  background:white;
}

search form input::placeholder {
  color:var(--indigo);
}

footer {
display:block;
overflow:hidden;
position:relative;
margin:auto;
text-shadow:var(--drop);
}

footer img {
  display:inline-block;
  vertical-align:middle;
  margin:.5rem;
  border-radius:50%;
  box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.75);
}

footer p a {
  display:inline-block;
  min-height:2rem;
}

footer p a:not(:first-of-type)::before {
 content:"\25cf";
 color:gray;
 padding-right:.4em;
 padding-left:.6em;
}

search a {
  padding-inline:0.5em;
}