/* ==========================================================================
   Ruth Korn - memorial site
   --------------------------------------------------------------------------
   Rebuilt as plain static HTML and CSS from the original site, which ran
   WordPress with the Twenty Eleven theme. Every color, size and spacing
   value below was taken from the original stylesheet, so the page looks
   the same as it always did.

   Everything you are likely to want to change lives in the SETTINGS block
   directly below. Change a value there and it updates everywhere it is used.
   ========================================================================== */


/* ==========================================================================
   SETTINGS - edit these
   ========================================================================== */

:root {

  /* ---- Colors ------------------------------------------------------------
     Written as #rrggbb. Any color picker will give you this format.        */

  --color-page-background:  #f1f1f1;   /* the gray area around the page */
  --color-sheet:            #ffffff;   /* the white sheet the text sits on */
  --color-text:             #373737;   /* body text */
  --color-heading:          #000000;   /* the big heading and the dates */
  --color-subtitle:         #7a7a7a;   /* the dates in the hidden header */
  --color-link:             #1982d1;   /* links */
  --color-link-focus:       #21759b;   /* the skip link when tabbed to */
  --color-rule:             #bbbbbb;   /* the thin line across the very top */
  --color-photo-frame:      #dddddd;   /* the thin frame around photographs */

  /* ---- Type --------------------------------------------------------------
     To use a different typeface, change --font-body. Keep the fallback
     names after it so there is always something to fall back on.          */

  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --size-body:         15px;  /* main text, and the dates heading */
  --size-entry-title:  36px;  /* the big "Ruth Korn" heading */
  --size-site-title:   30px;  /* the hidden header's site name */
  --size-subtitle:     14px;  /* the hidden header's dates */

  --line-height: 1.625;       /* space between lines of text */

  /* ---- Layout ------------------------------------------------------------ */

  --page-max-width: 1000px;   /* how wide the white sheet can get */
  --text-max-width: 68.9%;    /* how wide the text column is inside the sheet */
  --sheet-padding:  7.6%;     /* space between the text and the sheet's edge */
  --gap:            1.625em;  /* standard space between paragraphs */

  /* ---- Photographs ------------------------------------------------------- */

  --photo-frame-width: 1px;     /* thickness of the frame around photos */
  --photo-frame-pad:   6px;     /* white space inside the frame */
  --photo-gap:         1.625em; /* space to the right of a wrapped photo */

  /* ---- Show the header ---------------------------------------------------
     The original site kept the site name and dates in the page for search
     engines and screen readers, but hid them from view, because the page
     repeats them immediately below. Change `inset(50%)` to `none` here to
     make them visible.                                                     */

  --header-clip: inset(50%);

}


/* ==========================================================================
   You should not need to edit anything below this line.
   ========================================================================== */


/* ---- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: content-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, figure {
  border: 0;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

ul {
  list-style: none;
}

img {
  border: 0;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
}


/* ---- Page frame ---------------------------------------------------------- */

body {
  background: var(--color-page-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: 300;
  line-height: var(--line-height);
  padding: 0;
}

.page {
  background: var(--color-sheet);
  margin: 2em auto;
  max-width: var(--page-max-width);
}


/* ---- Links --------------------------------------------------------------- */

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus,
a:active {
  text-decoration: underline;
}


/* ---- Skip link (visible only when tabbed to) ----------------------------- */

.assistive-text {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
}

a.assistive-text:focus {
  background-color: #f1f1f1;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip-path: none;
  color: var(--color-link-focus);
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 17px 22px 15px;
  text-decoration: none;
  top: 7px;
  width: auto;
  z-index: 100000;
}


/* ---- Header -------------------------------------------------------------- */

.branding {
  border-top: 2px solid var(--color-rule);
  padding-bottom: 10px;
  position: relative;
  z-index: 9999;
}

.branding hgroup {
  margin: 0 var(--sheet-padding);
}

.site-title,
.site-description {
  clip-path: var(--header-clip);
  position: absolute;
}

.site-title {
  margin-right: 270px;
  padding: 3.65625em 0 0;
}

.site-title a {
  color: #111;
  font-size: var(--size-site-title);
  font-weight: bold;
  line-height: 36px;
}

.site-description {
  color: var(--color-subtitle);
  font-size: var(--size-subtitle);
  margin: 0 270px 3.65625em 0;
}


/* ---- The article --------------------------------------------------------- */

.main {
  clear: both;
  padding: var(--gap) 0 0;
}

/* Layout wrapper carried over from the original site. It floats, which is
   what produces the spacing at the foot of the page. */
.primary {
  float: left;
  margin: 0;
  width: 100%;
}

.content {
  margin: 0 var(--sheet-padding);
  position: relative;
}

.entry {
  margin: 0 0 var(--gap);
  padding: 3.5em 0 0;
  position: relative;
}

.entry-header,
.entry-content,
.entry-meta {
  margin: 0 auto;
  width: var(--text-max-width);
}

.entry-meta {
  clear: both;
}

.entry-title {
  clear: both;
  color: var(--color-heading);
  font-size: var(--size-entry-title);
  font-weight: bold;
  line-height: 48px;
  padding: 15px 0 0.3em;
}

.entry-content {
  padding: var(--gap) 0 0;
}

.entry-content p {
  margin-bottom: var(--gap);
}

/* Headings inside the text, such as the dates. These inherit the body
   size on the original site, which is why they are not large. */
.entry-content h1,
.entry-content h2 {
  color: var(--color-heading);
  font-weight: bold;
  margin: 0 0 0.8125em;
}


/* ---- Photographs --------------------------------------------------------- */

.entry-content img {
  border: var(--photo-frame-width) solid var(--color-photo-frame);
  max-width: calc(100% - 14px);
  padding: var(--photo-frame-pad);
}

/* Scales with the text size, so it stays correct on phones too. */
.entry-content p img {
  margin-top: 0.4em;
}

.entry-content img.alignleft {
  display: inline;
  float: left;
  margin-bottom: var(--gap);
  margin-right: var(--photo-gap);
}


/* ---- Optional document list ---------------------------------------------- */

.doc-list {
  margin: 0 0 var(--gap);
}

.doc-list li {
  margin-bottom: 0.5em;
  padding-left: 1.2em;
  position: relative;
}

.doc-list li::before {
  content: "\2022";
  left: 0;
  position: absolute;
}


/* ---- Footer -------------------------------------------------------------- */

.colophon {
  clear: both;
}

/* The floated wrapper above needs the footer to clear it. */
.main::after {
  clear: both;
  content: "";
  display: table;
}


/* ==========================================================================
   Smaller screens - these match the original site's breakpoints
   ========================================================================== */

/* Tablets and narrow windows: let the text use the full sheet. */
@media (max-width: 800px) {

  .content {
    margin: 0 var(--sheet-padding);
    width: auto;
  }

  .entry-header,
  .entry-content,
  .entry-meta {
    width: 100%;
  }

}

/* Phones: smaller type, and floated photographs become full-width blocks. */
@media (max-width: 650px) {

  body {
    font-size: 13px;
  }

  .site-title a {
    font-size: 24px;
  }

  .site-title {
    padding: 5.30625em 0 0;
  }

  .site-title,
  .site-description {
    margin-right: 0;
  }

  .site-description {
    font-size: 12px;
  }

  .entry-title {
    font-size: 28px;
  }

  .entry-content img.alignleft {
    display: block;
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  .entry {
    padding: 1.625em 0 0;
  }

}

/* Very small phones: remove the gray margin so the sheet fills the screen. */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

  body {
    padding: 0;
  }

  .page {
    margin-top: 0;
  }

  .branding {
    border-top: none;
  }

}


/* ==========================================================================
   Printing - matches the original site's print styles
   ========================================================================== */

@media print {

  body {
    background: none !important;
    font-size: 10pt;
    padding: 0;
  }

  .page {
    margin: 0;
    max-width: none;
  }

  .entry {
    padding: 0;
  }

  .entry-title {
    font-size: 21pt;
  }

  a {
    color: #000;
    text-decoration: none;
  }

}