/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');*/
@font-face {font-family: 'Montserrat';src: url('montserrat-variable.ttf') format('truetype');font-weight:100 900;font-style: normal;}

/* ---------------------------------------------------------------------------
   calx - colours.

   Same arrangement as the control panel: every colour in the theme comes from
   one of the tokens below, and the dark set is the same list with different
   values. No rule underneath this block names a colour directly, so the two
   themes cannot drift apart.

   The light values are exactly what the theme used before, to the byte, so
   nothing changes for a visitor whose system is set to light.

   Three tokens are #E1E1E1 in light and different in dark. That is deliberate,
   not duplication: the one grey was doing three jobs - drawing a border, filling
   a chip, and lighting a row on hover. On a dark background those want to move
   in different directions, a border darker than the surface and a hover lighter,
   so they had to be told apart before they could be inverted.
--------------------------------------------------------------------------- */
:root {
  /* tells the browser to render scrollbars and default form controls to match,
     which is most of what stops a dark page from having white furniture */
  color-scheme: light dark;

  --ground:       #E4E4E4;  /* the page behind the card */
  --surface:      #FFFFFF;  /* the card itself */
  --surface-2:    #F4F4F4;  /* every other blog row */
  --line:         #E1E1E1;  /* borders and rules */
  --line-2:       #C4C4C4;  /* the double borders, and input outlines */
  --chip-bg:      #E1E1E1;  /* menu and language buttons */
  --hover:        #E1E1E1;  /* a row or tag lighting up under the pointer */

  --text:         #4E1515;  /* body copy */
  --muted:        #5A5A5A;  /* dates, captions, sources, photo descriptions */
  --chip-text:    #000000;
  --msg-text:     #464646;  /* the four message bars */

  /* brand fills a background; accent is the same idea as text. They are one
     colour here and two in dark mode, where a red dark enough to sit behind
     white lettering is far too dark to BE lettering. */
  --brand:        #4E1515;
  --accent:       #4E1515;
  --on-brand:     #E1E1E1;  /* on a brand-filled chip */
  --on-brand-hi:  #FFFFFF;  /* on the submit button */
  --glow:         #802929;  /* the halo behind the wordmark */

  --shadow-1:     #00000030;
  --shadow-2:     #0000003b;

  /* gradient stops. These are the reason a theme cannot be inverted by swapping
     a background colour: white is written into the middle of six of them, and a
     white stop on a dark page is a hole burnt in it. */
  --head-from:    #e1e1e1;
  --head-to:      #ffffff;
  --foot-from:    rgba(225, 225, 225, 1);
  --foot-to:      rgba(255, 255, 255, 1);
  --msg-edge:     #ffffff;  /* both ends of the four status bars */
  --msg-error:    #e74646;
  --msg-attention:#e3de50;
  --msg-success:  #4feb45;
  --msg-notice:   #999999;

  /* The wordmark logo, as a data URI, and the SAME data URI in both themes: the
     mark is brand identity and does not get recoloured for a colour scheme.
     What changes is the halo underneath it. filter: drop-shadow follows the
     alpha channel rather than the box, so the glow traces the angular mark
     itself and not the 40x40 square it sits in. */
  --logo-filter:  none;
  --logo: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 240" version="1.1"><g id="surface1"><path style=" stroke:none;fill-rule:evenodd;fill:%23802929;fill-opacity:1;" d="M 0 60 L 0 180 L 180 0 L 60 0 C 0 0 0 60 0 60 "/><path style=" stroke:none;fill-rule:evenodd;fill:%23802929;fill-opacity:1;" d="M 0 240 L 120 120 L 0 180 Z M 0 240 "/><path style=" stroke:none;fill-rule:evenodd;fill:%23802929;fill-opacity:1;" d="M 180 240 L 60 240 L 240 60 L 240 180 C 240 240 180 240 180 240 "/><path style=" stroke:none;fill-rule:evenodd;fill:%23802929;fill-opacity:1;" d="M 240 0 L 120 120 L 240 60 Z M 240 0 "/></g></svg>');
}

@media (prefers-color-scheme: dark) {
:root {
  /* the same values the control panel uses, so the site and the panel read as
     one thing rather than two dark themes that happen to share a domain */
  --ground:       #161010;
  --surface:      #201717;
  --surface-2:    #2A1E1E;
  --line:         #3B2B2B;
  --line-2:       #4A3838;
  --chip-bg:      #2A1E1E;
  --hover:        #332626;

  /* Body copy is deliberately NOT the brightest thing available. #EFE7E6 on this
     card measures 14.4:1, which is where dark mode starts to glare; this is
     10.2:1 - still more than twice the 4.5:1 needed, and far enough from --muted
     (1.76:1 apart) that secondary text still reads as secondary. */
  --text:         #D0C2C1;
  --muted:        #A2908F;
  --chip-text:    #D0C2C1;
  /* The one that stays bright, and for a measured reason: this text sits on the
     middle of the four status bars, not on the card. Dimming it to match the
     body drops the attention bar to 3.4:1 and success to 3.8:1, both under the
     floor. At #EFE7E6 the worst of the four is 4.8:1. */
  --msg-text:     #EFE7E6;

  --brand:        #8E3232;
  --accent:       #DB9090;
  --on-brand:     #F6EDEC;
  --on-brand-hi:  #FFFFFF;
  --glow:         #C25A5A;

  --shadow-1:     #00000066;
  --shadow-2:     #00000077;

  --head-from:    #2A1E1E;
  --head-to:      #201717;
  --foot-from:    #2A1E1E;
  --foot-to:      #201717;
  --msg-edge:     #201717;
  /* the hues are kept and the lightness taken out of them. A saturated green on
     a dark bar glares; this still reads as green, red, yellow, grey. */
  --msg-error:    #7E2B2B;
  --msg-attention:#6E6620;
  --msg-success:  #2C6B27;
  --msg-notice:   #4A4242;

  /* The logo stays brand red; on a dark page it gets an edge rather than a new
     colour. The halo is --ground, DARKER than the card it sits on, and that
     direction is the whole point. A halo in the brand red is three times
     brighter than the mark it surrounds (luminance .195 against .063), so the
     glow becomes the brightest thing in the header and the logo reads as a dark
     shape inside a bloom. Sinking the ground instead leaves the mark as the
     brightest element and simply pulls the card away from underneath it.
     Erman's call, from looking at the two side by side. */
  --logo-filter:  drop-shadow(0 0 2px var(--ground)) drop-shadow(0 0 6px var(--ground));
}
}

* {padding:0px;margin:0px}
body {background-color:var(--ground);font-family: "Montserrat", sans-serif;font-optical-sizing: auto;font-weight: 500;font-style: normal;font-size:1em;color:var(--text)}
p {margin: 15px 0px;line-height:1.5em}
h1, h2, h3, h4, h5 {line-height:1.5em;padding:0px 15px;background: linear-gradient(30deg,var(--head-from) 31%, var(--head-to) 100%);font-weight:700}
.error, .attention, .success, .notice {color:var(--msg-text);text-align:center;padding:10px 5%;font-weight:700;font-size:1.1em}
.error {background: linear-gradient(90deg,var(--msg-edge) 0%, var(--msg-error) 50%, var(--msg-edge) 100%)}
.attention {background: linear-gradient(90deg,var(--msg-edge) 0%, var(--msg-attention) 50%, var(--msg-edge) 100%)}
.success {background: linear-gradient(90deg,var(--msg-edge) 0%, var(--msg-success) 50%, var(--msg-edge) 100%)}
.notice {background: linear-gradient(90deg,var(--msg-edge) 0%, var(--msg-notice) 50%, var(--msg-edge) 100%)}
.pule {text-align:left}
.puri {text-align:right}
.puce {text-align:center}
#outerwrapper {background-color:var(--surface);display: block;margin:auto;width:100%;max-width:1280px;box-shadow: var(--shadow-1) 0px 10px 20px, var(--shadow-2) 0px 6px 6px}
#innerwrapper {display:inline-block;margin:auto;width:100%}
.c100 {display:inline-block;width:98%;padding:0px 1%}
.l20, .l50, .l80 {float:left}
.r20, .r50, .r80 {float:right}
.l80, .r80 {display:inline-block;width:80%;padding:0px 1%}
.r20, .l20 {display:inline-block;width:20%;padding:0px 1% 10px 1%;min-width:200px}
.l50, .r50 {display:inline-block;width:50%;padding:0px 1%}
.r50, .r20 {border-left:1px solid var(--line)}
.l20 {border-right:1px solid var(--line)}
#header {display:inline-block;width:100%;height:80px}
#identityarea {display:block;float:left;min-width:350px}
#identityarea div {display:flex;justify-content:space-evenly;align-items:center}
#ermanaktan_logo {width:40px;height:40px;background-size:contain;background-repeat:no-repeat;background-image:var(--logo);filter:var(--logo-filter)}
/* the wordmark is the same colour as the card it sits on, so only the halo draws
   it. Tying it to --surface rather than to white is what keeps that effect in
   both themes instead of turning it into plain light text on dark. */
#logotext {color:var(--surface);font-size:240%;text-shadow:var(--glow) 0px 0px 10px}
#languagearea {display:block;float:right;width:50%;padding:6px 6px 0px 0px}
#languagearea ul {display:flex;list-style:none;justify-content:flex-end;flex-wrap:wrap}
#languagearea a {font-size:80%;display:block;padding:5px;margin:5px;background-color:var(--chip-bg);color:var(--chip-text);border-radius:5px;text-decoration:none;transition:0.5s background-color, 0.5s color;border:1px double var(--line-2)}
#languagearea a:hover {background-color:var(--brand);color:var(--on-brand)}
#mainmenu {box-shadow: var(--shadow-1) 0px 10px 10px -4px inset}
#mainmenu ul {display:flex;list-style:none;justify-content:center;padding:25px 0px 0px 0px;margin:0px}
#mainmenu ul li {margin:0px 20px}
#mainmenu a {display:block;padding:5px 25px;margin:5px;background-color:var(--chip-bg);color:var(--chip-text);border-radius:5px;text-decoration:none;transition:0.5s background-color, 0.5s color;border:1px double var(--line-2)}
#mainmenu a:hover {background-color:var(--brand);color:var(--on-brand)}
#breadcrumb {width:96%;margin:auto;font-size:75%;border-bottom:1px solid var(--line)}
#breadcrumb a {color:var(--muted);transition:0.5s color;text-decoration:none}
#breadcrumb a:hover {color:var(--accent)}
.contentholder, .contentholder-r {width:98%;margin:20px 1%;display:flex;clear:both;justify-content:space-between;flex-direction:row}
article img {max-width:950px;border-radius:10px;padding:3px;border:1px solid var(--line)}
article p {text-align:justify}
article ul, article ol {margin:10px 0px 10px 20px}
article ul {list-style-type:square}
article ol {list-style-type:decimal-leading-zero}
article ul li, article ol li {margin:10px 0px;line-height:1.5em}
.articleimg {width:50%}
.articleimg div {display:flex;flex-direction:column;align-items:center}
.articleimg img {min-width:200px}
.articleimg p {font-size:80%;text-align:center}
article sup {font-size:75%;line-height:0.5em}
article sup:before {content:"("}
article sup:after {content:")"}
#footer {width:94%;padding:10px 3%;display:block;font-size:75%;text-align:justify;background: linear-gradient(180deg,var(--foot-from) 0%, var(--foot-to) 100%)}
.blogtags {margin:15px 0px;list-style:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));gap:10px}
.blogtags a, .blogyears a {display:block;text-align:center;text-decoration:none;color:var(--accent);padding:5px;border:1px solid var(--line);border-radius:10px;transition:0.5s background-color}
.blogtags a:hover, .blogyears a:hover {background-color:var(--hover)}
.blogyears {margin:15px 0px;list-style:none;display:grid;grid-template-columns:repeat(auto-fit, minmax(70px, 1fr));gap:10px}
#blogentries {list-style:none;display:flex;flex-direction:column;margin:15px 0px}
#blogentries li {margin:0px}
#blogentries li:nth-child(odd) {background-color:var(--surface-2)}
#blogentries a {display:block;margin:4px 0px;padding:5px;color:inherit;text-decoration:none;transition:0.5s background-color}
#blogentries a:hover{background-color:var(--hover)}
#blogentries .blogtitle {font-weight:700}
#blogentries .bloginfo {color:var(--muted);font-size:90%}
#blogmeta {margin:10px 0px 0px 0px;display:inline-block;width:100%;color:var(--muted);font-size:75%}
#blogmeta p {margin:0px;float:left}
#blogmeta time {float:right}
#references {list-style:decimal;list-style-position:outside;display:flex;flex-direction:column;flex-wrap:nowrap;margin:10px 0px 10px 25px;color:var(--muted)}
#references li {padding:5px;transition:0.5s background-color}
#references li:hover {background-color:var(--hover)}
#references a {display:inline-block;text-decoration:none;vertical-align:middle}
#references .source {font-size:75%;font-weight:700;color:var(--muted)}
#references .accessed {font-size:70%;color:var(--muted)}
#filelist {list-style:none;display:grid;grid-template-columns:repeat(auto-fit,20%)}
#filelist a {text-align:center;display:block;margin:2px;padding:5px;color:inherit;text-decoration:none;transition:0.5s background-color;border:3px double var(--line);border-radius:30px}
#filelist a:hover {background-color:var(--hover)}
/* the file icon stays mid grey in both themes on purpose: #999999 reads against
   the white card and against the dark one, so it needs no second copy the way
   the wordmark does */
#filelist .fileicon {width:50px;height:50px;margin:5px auto;background-size:contain;background-repeat:no-repeat;background-image:url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F><svg fill="%23999999" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"><g><path d="M350.17,0H64v512h384V97.83L350.17,0z M405.333,469.333H106.667V42.667h225.83l72.837,72.837V469.333z"/><path d="M170.667,149.333h106.667c11.782,0,21.333-9.551,21.333-21.333c0-11.782-9.551-21.333-21.333-21.333H170.667 c-11.782,0-21.333,9.551-21.333,21.333C149.333,139.782,158.885,149.333,170.667,149.333z"/><path d="M149.333,213.333c0,11.782,9.551,21.333,21.333,21.333h170.667c11.782,0,21.333-9.551,21.333-21.333 c0-11.782-9.551-21.333-21.333-21.333H170.667C158.885,192,149.333,201.551,149.333,213.333z"/><path d="M341.333,277.333H170.667c-11.782,0-21.333,9.551-21.333,21.333c0,11.782,9.551,21.333,21.333,21.333h170.667 c11.782,0,21.333-9.551,21.333-21.333C362.667,286.885,353.115,277.333,341.333,277.333z"/><path d="M341.333,362.667H170.667c-11.782,0-21.333,9.551-21.333,21.333c0,11.782,9.551,21.333,21.333,21.333h170.667 c11.782,0,21.333-9.551,21.333-21.333C362.667,372.218,353.115,362.667,341.333,362.667z"/></g></svg>')}
#filelist .filename {font-weight:700;word-break:break-word}
#flielist .filesize {font-size:70%;color:var(--muted)}
/* ------------------------------------------------------------- library -- */
/* The shelf. Each category is a branch with the entries hanging under it, and
   the heading picks up the same gradient band every other h2 on the site has -
   which is what makes the grouping read as structure rather than as spacing.
   Nothing here existed before: .info-list, .info-entry and .info-body were all
   written into the markup and never styled. */
.info-tree {margin:10px 0px 0px 0px}
.info-branch {margin:0px 0px 18px 0px}
.info-branch h2 {font-size:1.05em}
.info-list {margin:8px 0px 0px 20px}
.info-list li {margin:4px 0px;line-height:1.5em}
/* an entry is a row in a listing, not a link in a sentence, so it reads the way
   #blogentries does - the text colour of the page, lighting up under the pointer */
.info-list a {display:inline-block;padding:2px 6px;border-radius:5px;color:inherit;
              text-decoration:none;transition:0.5s background-color}
.info-list a:hover {background-color:var(--hover)}
.info-entry {margin:10px 0px}
.info-entry hr {margin:15px 0px 8px 0px}
.info-entry small {color:var(--muted)}

#guestbook_read {display:flex;flex-direction:column;flex-wrap:wrap}
#guestbook_read article {width:75%;margin:0px auto 10px auto;border-bottom:2px solid var(--line)}
#guestbook_read article h2 {display:block;float:left;background:none;font-size:110%;font-weight:700}
#guestbook_read article time {display:block;float:right;font-size:80%;margin:2px 10px 0px 0px;font-size:80%;color:var(--muted)}
#guestbook_read article p {display:inline-block;text-align:center;width:100%;font-style:italic;color:var(--muted)}
#guestbook_sign form {margin:auto}
/* the background and colour here are new. The rule only ever set a border, which
   left the browser to paint the field - white, with black text - and that is a
   pair of white boxes on a dark page. */
#guestbook_sign input, textarea {font-family:"Montserrat", sans-serif;font-size:90%;border:1px solid var(--line-2);background-color:var(--surface);color:var(--text);display:block;width:98%;margin:25px 0px;padding:1%}
#guestbook_sign input[type=text], textarea {box-shadow:var(--shadow-1) 0px 0px 10px 2px}
#guestbook_sign textarea {height:100px;resize:none}
#guestbook_sign input[type=submit], #guestbook_sign input[type=button] {width:200px;padding:10px 0px;margin:25px auto;color:var(--on-brand-hi);background-color:var(--brand);border-radius:18px;cursor:pointer}
#guestbook_sign form ul {width:30%;margin:10px auto}
#guestbook_sign form ul li {list-style: square;font-size:90%;margin:0px 0px 0px 10px}
#gallery_list ul {width:100%;margin:20px 0px;display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:10px}
#gallery_list ul li {list-style:none;width:100%}
#gallery_list img {display:block;margin:auto;width:98%;border-radius:20px;padding:1%;border:1px solid var(--line);opacity:90%;transition:0.5s opacity}
#gallery_list img:hover {opacity:100%}
#gallery {width:100%;}
#imageblock {width:100%;position:relative}
#imageblock img {max-width:1200px;display:block;margin:auto;border-radius:25px}
#imageblock #prev, #imageblock #next {position:absolute;display:block;height:100%;width:50%;opacity:0;top:0px}
#imageblock #prev {left:0px}
#imageblock #next {right:0px}
#detailsblock {width:50%;display:block;margin:auto}
#detailsblock .phototitle {text-align:center;font-weight:700;font-size:110%}
#detailsblock .photodesc {text-align:center;font-style:italic;color:var(--muted)}
#detailsblock ul {display:flex;flex-direction:column;justify-content:flex-start;flex-wrap:wrap;margin:0px 10px}
#detailsblock ul li {padding:3px 0px;list-style:none;height:1.5em}
#detailsblock .definition {float:left;width:25%}
#detailsblock .value {float:right;width:75%;text-align:right}
.aperture {font-family:Times New Roman;font-style:italic;font-size:120%;font-weight:700}

@media (width < calc(49rem)) {
#outerwrapper {box-shadow:none}
#header {height:auto}
#identityarea {display:flex;justify-content:center;margin:10px 0px 0px 0px;flex-direction:row;min-width:auto}
#identityarea div {flex-direction:column}
#logotext {font-size:180%;line-height:1em}
#languagearea {padding:0px}
#languagearea ul {justify-content:space-evenly}
#languagearea a {font-size:80%}
#mainmenu ul {padding:15px 0px 0px 0px;flex-wrap:wrap;justify-content:center}
#mainmenu ul li {margin:0px;padding:5px}
#mainmenu a {padding:5px 10px}
.contentholder {flex-direction:column}
.contentholder-r {flex-direction:column-reverse}
h1 {font-size:150%}
h2 {font-size:120%}
h4 {font-size:90%}
h5 {font-size:85%}
.articleimg {display:block}
.l80, .l20, .r80, .r20, .l50, .r50 {width:98%;margin: 10px 0px}
.r20, .r50, .l20 {border-left:none}
form {width:80%}
input, textarea {font-size:90%;width:94%;margin:10px 0px;padding:3%}
input[type=submit] {padding:10px 0px;margin:auto}
#imageblock img, #detailsblock, #guestbook_read article, #guestbook_sign form ul, input[type=submit], #languagearea, #identityarea, .articleimg {width:100%}
#detailsblock ul li {font-size:80%;margin:0px}
#guestbook_sign form {width:95%}
#guestbook_sign form ul li {margin:0px 0px 0px 10px}
}