@charset "UTF-8";
/*
Theme Name: Quietsite
Theme URI: https://aquietsite.com/themes/quietsite
Author: Quietsite
Author URI: https://aquietsite.com
Description: Quietsite is a minimal blog WordPress theme for bloggers, freelancers, travelers, instagram creators, photographers, indiehackers
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.0
Version: 0.9.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quietsite
Tags: one-column, custom-menu, custom-logo, editor-style, featured-images, theme-options, threaded-comments, translation-ready, blog
*/
/* ============================================================================
   TABLE OF CONTENTS
   ----------------------------------------------------------------------------
   All SCSS lives in this single file. Compile with:  sass style.scss style.css

   00. Setup ......... breakpoints mixin + a11y helpers
   01. Normalize ..... normalize.css v8.0.1
   02. Tokens ........ CSS custom properties (kept for the Customizer)
   03. Elements ...... base element rules
   04. Layout ........ containers, spacing rhythm
   05. Blocks ........ WordPress core blocks: alignment + layout only
   06. Header ........ site header, primary nav
   07. Footer ........ site footer
   08. Single ........ single post / page content
   09. Archives ...... archive / index layout
   10. Notes ......... the notes stream and a single note
   11. Portfolio ..... the project grid
   12. Widgets ....... widget area
   13. Link styles ... Customizer > Design > Link style, as body classes
   14. Reduced motion  honour prefers-reduced-motion
   ========================================================================== */
/* ============================================================================
   00. SETUP
   ========================================================================== */
/**
 * a11y
 */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.skip-link:focus {
  background-color: #f1f1f1;
  clip-path: none;
  display: block;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* ============================================================================
   01. NORMALIZE
   ========================================================================== */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  background-color: white;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration-style: dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* ============================================================================
   02. TOKENS
   ----------------------------------------------------------------------------
   Layout, spacing, and the one color the theme has an opinion about. The page,
   the body text and the links are still left to the browser (and to the block
   editor's own per-block settings) — only the secondary text below is set here.
   ========================================================================== */
:root {
  /* Layout */
  --narrow-width: 660px;
  --wide-width: 900px; /* alignwide width, between reading and full */
  --container-width: 1230px;
  /* Color

     The lines that name a piece of writing without being part of it: the
     tagline under the site title, and every meta line the theme prints. Set a
     step back from the body text so a date reads as a label rather than as the
     first line of the post — and still dark enough to clear AA on white, since
     a date and a category are read, not merely noticed.

     Used by .site-description, .entry-meta, .quietsite-meta-date and
     .note-header-meta (and the links inside them) in the sections below.
     Customizer > Design > Colors > Secondary text color overrides this token —
     see quietsite_design_inline_css() in customizer/customizer.php. */
  --secondary-text: #6b6b6b;
  /* Type */
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  /* Headings follow the base font until Customizer > Design > Typography picks a
     font of their own, at which point the inline CSS overrides this token. */
  --heading-font: var(--body-font);
  /* How heavy h1-h6 and the site title are set. 700 is where the browser has
     always had headings, so stating it changes nothing on its own — it is here so
     Customizer > Design > Typography > Heading font weight has one place to move,
     and so the site title stops depending on whether the view happened to print
     it as an <h1> or a <p>. */
  --heading-font-weight: 700;
  /* Form controls
     One height and one horizontal padding shared by every control, so a field
     and the button next to it line up without either being measured twice. */
  --control-height: 36px;
  --control-padding: 12px;
  /* Spacing */
  --spacing-huge: 60px;
  --spacing-big: 40px;
  --spacing-medium: 30px;
  --spacing-small: 16px;
  --spacing-vertical: 30px;
  --spacing-horizontal: 20px;
}
@media only screen and (max-width: 591.98px) {
  :root {
    --spacing-vertical: 24px;
  }
}
:root {
  /* Admin-bar height */
  --admin-bar--height: 0px;
}

@media screen and (max-width: 700px) {
  :root {
    --narrow-width: 100%;
  }
}
.admin-bar {
  --admin-bar--height: 32px;
}
@media only screen and (max-width: 782px) {
  .admin-bar {
    --admin-bar--height: 46px;
  }
}

/* ============================================================================
   03. ELEMENTS
   ========================================================================== */
/* box sizing
https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
------------------------------------------------- */
html {
  /* Apply border-box across the entire page. */
  box-sizing: border-box;
}

/**
 * Relax the definition a bit, to allow components to override it manually.
 */
*, *::before, *::after {
  box-sizing: inherit;
}

/* body
------------------------------------------------- */
body {
  font-family: var(--body-font);
  line-height: 1.55;
  overflow-wrap: break-word;
}

/* heading
------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  font-weight: var(--heading-font-weight);
  line-height: 1.25;
}

/* media
------------------------------------------------- */
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
video {
  max-width: 100%;
}

/* Media captions */
figcaption,
.wp-caption-text,
.wp-block-embed figcaption {
  line-height: 1.4;
  margin-top: 0.5em;
}

/* WP Smiley */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* hr
------------------------------------------------- */
/* The class is named as well as the element: core's block library gives
   .wp-block-separator its own border-top and border-bottom, and a class beats a
   bare element selector, so `hr` alone would leave the bottom rule standing. */
hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid;
}

/* table
------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
}

td,
th {
  padding: 0.25em 0.5em 0.25em 0;
  text-align: left;
  vertical-align: top;
}

/* form
   ----------------------------------------------------------------------------
   As with everything else here, no colors are named. The border is mixed out of
   the current text color, so a form drops into a light page or a dark one and
   picks up the palette it lands in; browsers without color-mix() fall back to a
   plain currentColor border, which is heavier but never wrong.
------------------------------------------------- */
input,
select,
textarea {
  max-width: 100%;
}

textarea,
.site textarea {
  width: 100%;
}

/* The text-entry types, spelled out rather than caught with a bare `input`:
   checkboxes, radios, files and ranges are drawn by the browser and a height
   and a padding would only get in their way. */
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=password],
input[type=search],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime-local],
select,
textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0;
  padding: 0 var(--control-padding);
  height: var(--control-height);
  /* The one square-corner exception in the theme is honoured here too: iOS
     rounds search fields and inputs on its own. */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

/* Left off the list above so the native caret survives. */
select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
       appearance: auto;
  padding-right: calc(var(--control-padding) / 2);
}

/* A textarea is the one field that grows, so it takes vertical padding and a
   height of its own. */
textarea {
  height: auto;
  min-height: calc(var(--control-height) * 3);
  padding: 10px var(--control-padding);
  line-height: inherit;
  vertical-align: top;
}

input:focus,
select:focus,
textarea:focus {
  border-color: currentColor;
}

::-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}

::placeholder {
  color: inherit;
  opacity: 0.5;
}

/* Buttons carry the faintest of fills — enough to read as pressable next to a
   field of the same height, not enough to become a block of color. */
button,
input[type=button],
input[type=reset],
input[type=submit] {
  font: inherit;
  color: inherit;
  background-color: color-mix(in srgb, currentColor 7%, transparent);
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0;
  padding: 0 calc(var(--control-padding) * 1.5);
  height: var(--control-height);
  line-height: 1;
  cursor: pointer;
}

button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

button[disabled],
input[disabled] {
  cursor: default;
  opacity: 0.5;
}

input[type=email],
input[type=url] {
  /*rtl:ignore*/
  direction: ltr;
}

fieldset {
  max-width: 100%;
}

.post-password-form input[type=password] {
  margin-right: 0.5em;
}

/* pre / code
------------------------------------------------- */
pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.entry-content > code {
  display: block;
}

/* list
------------------------------------------------- */
ul,
ol {
  padding-left: 1.5em;
}
ul.aligncenter,
ol.aligncenter {
  list-style-position: inside;
  padding: 0;
}
ul.alignright,
ol.alignright {
  list-style-position: inside;
  text-align: right;
  padding: 0;
}

dd {
  margin-left: var(--spacing-horizontal);
}

/* classic gallery
------------------------------------------------- */
.gallery {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -4px;
}

.gallery-item {
  display: block;
  padding: 4px;
  margin: 0;
}

.gallery-columns-2 .gallery-item {
  width: 50%;
}

.gallery-columns-3 .gallery-item {
  width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  width: 25%;
}

.gallery-columns-5 .gallery-item {
  width: 20%;
}

.gallery-columns-6 .gallery-item {
  width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  width: 11.11%;
}

.gallery-columns-10 .gallery-item {
  width: 10%;
}

/* helpful classes
------------------------------------------------- */
.quietsite-warning {
  padding: 10px 0;
}

.hide {
  display: none;
}

/* pagination — layout only
------------------------------------------------- */
.wp-block-query-pagination-numbers, .page-links, .nav-links {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
}
.wp-block-query-pagination-numbers > * + *, .page-links > * + *, .nav-links > * + * {
  margin-left: 10px;
}
.wp-block-query-pagination-numbers > *.next, .page-links > *.next, .nav-links > *.next, .wp-block-query-pagination-numbers > *.prev, .page-links > *.prev, .nav-links > *.prev {
  display: flex;
  align-items: center;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg, .wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
  width: 16px;
  height: 16px;
}
.wp-block-query-pagination-numbers > *.next svg, .page-links > *.next svg, .nav-links > *.next svg {
  margin-left: 4px;
}
.wp-block-query-pagination-numbers > *.prev svg, .page-links > *.prev svg, .nav-links > *.prev svg {
  margin-right: 4px;
}

/* ============================================================================
   04. LAYOUT
   ========================================================================== */
/* clearing
------------------------------------------------- */
.container:before,
.container:after,
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.container:after,
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/* body padding
------------------------------------------------- */
/* Customizer > Design > Layout > Body padding, as a class from
   quietsite_body_padding_class(). Padding on the body insets header, content and
   footer in one move, so the whole site sits as a block inside the window.

   The steps roughly double as they climb rather than stepping evenly, because an
   even scale makes the middle of the slider feel like it does nothing: each notch
   has to be far enough from the last to be worth moving to.

   min() against a viewport unit caps each step on narrow screens: 120px of frame
   is a frame on a desktop and half the reading width on a phone. The small steps
   never reach their cap and so never change. */
body {
  padding: var(--body-padding, 0);
}

.body-padding-xs {
  --body-padding: 12px;
}

.body-padding-sm {
  --body-padding: min(24px, 4vw);
}

.body-padding-md {
  --body-padding: min(48px, 6vw);
}

.body-padding-lg {
  --body-padding: min(80px, 8vw);
}

.body-padding-xl {
  --body-padding: min(120px, 10vw);
}

/* No frame on a phone, whichever step is set. The min() caps above already shrink
   the larger steps, but shrinking is the wrong answer at this width: a frame is a
   deliberate margin around the site, and on a screen this narrow every pixel of it
   comes off the reading width, which is the one thing a phone has too little of.
   The .container's own max-width still holds the text off the glass.

   The padding, not the custom property: only this declaration reads it, and going
   through the property would have to out-specify five classes to land. */
@media only screen and (max-width: 591.98px) {
  body {
    padding: 0;
  }
}
/* site layout
------------------------------------------------- */
.container {
  width: var(--container-width);
  display: block;
  max-width: calc(100% - 20px);
  margin: 0 auto;
}

/* vertical rhythm inside content areas
------------------------------------------------- */
.site-main > article > *,
.site-main > .not-found > *,
.entry-content > *,
[class*=inner-container] > *,
.wp-block-template-part > *,
.wp-block-post-template :where(li > *) {
  margin-top: var(--spacing-vertical);
  margin-bottom: var(--spacing-vertical);
}
.site-main > article > *:first-child,
.site-main > .not-found > *:first-child,
.entry-content > *:first-child,
[class*=inner-container] > *:first-child,
.wp-block-template-part > *:first-child,
.wp-block-post-template :where(li > *):first-child {
  margin-top: 0;
}
.site-main > article > *:last-child,
.site-main > .not-found > *:last-child,
.entry-content > *:last-child,
[class*=inner-container] > *:last-child,
.wp-block-template-part > *:last-child,
.wp-block-post-template :where(li > *):last-child {
  margin-bottom: 0;
}

/* ============================================================================
   05. BLOCKS
   ----------------------------------------------------------------------------
   Alignment and layout only — colors, borders and type come from the browser
   and from the block editor's own settings.
   ========================================================================== */
/* ---------------------------- general align */
@media only screen and (min-width: 482px) {
  .entry-content > .alignright,
  .entry-content > .alignleft,
  .entry-content > .blocks-gallery-grid:not(.has-nested-images).alignleft,
  .entry-content > .blocks-gallery-grid:not(.has-nested-images).alignright,
  .entry-content > .wp-block-gallery:not(.has-nested-images).alignleft,
  .entry-content > .wp-block-gallery:not(.has-nested-images).alignright {
    max-width: 50%;
  }
  .alignright,
  .blocks-gallery-grid:not(.has-nested-images).alignright,
  .wp-block-gallery:not(.has-nested-images).alignright {
    float: right;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 1em;
  }
  .alignleft,
  .blocks-gallery-grid:not(.has-nested-images).alignleft,
  .wp-block-gallery:not(.has-nested-images).alignleft {
    float: left;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-right: 1em;
  }
}
/* alignwide / alignfull - centered breakout, only when the screen is wide enough.

   The breakout is done with symmetric negative margins rather than
   `margin-left: 50%` + `translateX(-50%)`. The transform is visual only: the
   layout box still sat half a parent-width to the right, so every ancestor up
   to <html> inherited that overflow and the document grew a horizontal
   scrollbar. Negative margins move the real box, so nothing overflows and
   #page needs no `overflow: hidden` to paper over it. */
@media only screen and (min-width: 822px) {
  .alignwide,
  .wp-block-gallery:not(.has-nested-images).alignwide {
    --breakout-width: min(var(--wide-width), 90vw);
    width: var(--breakout-width);
    margin-left: calc(50% - var(--breakout-width) / 2);
    margin-right: calc(50% - var(--breakout-width) / 2);
  }
  .alignwide figcaption,
  .alignwide .wp-element-caption,
  .wp-block-gallery:not(.has-nested-images).alignwide figcaption,
  .wp-block-gallery:not(.has-nested-images).alignwide .wp-element-caption {
    max-width: var(--narrow-width);
    margin-inline: auto;
  }
}

@media only screen and (min-width: 822px) {
  .alignfull,
  .wp-block-gallery:not(.has-nested-images).alignfull {
    --breakout-width: 96vw;
    width: var(--breakout-width);
    margin-left: calc(50% - var(--breakout-width) / 2);
    margin-right: calc(50% - var(--breakout-width) / 2);
  }
  .alignfull figcaption,
  .alignfull .wp-element-caption,
  .wp-block-gallery:not(.has-nested-images).alignfull figcaption,
  .wp-block-gallery:not(.has-nested-images).alignfull .wp-element-caption {
    max-width: var(--narrow-width);
    margin-inline: auto;
  }
}

/* ---------------------------- image */
.entry-content > figure:not(.alignwide):not(.alignfull) {
  max-width: 100%;
}

.wp-block-image .alignright {
  margin-left: var(--spacing-horizontal);
}
.wp-block-image .alignleft {
  margin-right: var(--spacing-horizontal);
}

.entry-content > *[class=wp-block-image],
.entry-content [class*=inner-container] > *[class=wp-block-image] {
  margin-top: 0;
}
.entry-content > *[class=wp-block-image] + *,
.entry-content [class*=inner-container] > *[class=wp-block-image] + * {
  margin-top: 0;
}

@media only screen and (max-width: 591.98px) {
  .entry-content > .wp-block-image > .alignleft,
  .entry-content > .wp-block-image > .alignright {
    max-width: 50%;
  }
}

/* ---------------------------- drop cap */
.has-drop-cap:not(:focus):first-letter {
  float: left;
  font-size: 4em;
  font-style: normal;
  line-height: 0.7;
  margin: 0.2em 0.2em 0 0;
}

/* ---------------------------- button */
/* Square corners. Core ships the pill (border-radius: 9999px) as the default,
   which is the one thing about a button that reads as decoration here. A radius
   set per-block in the editor still wins — that arrives as an inline style. */
.wp-block-button__link {
  border-radius: 0;
}

/* ---------------------------- media text */
@media only screen and (max-width: 591.98px) {
  .wp-block-media-text > .wp-block-media-text__content {
    padding: 20px 10px 0;
  }
}

/* ============================================================================
   06. HEADER
   ========================================================================== */
/* ---------------------------- header layout */
.site-header .container {
  display: flex;
  align-items: flex-end;
  position: relative;
  /* Lets the menu drop to a line of its own on small screens. */
}
@media only screen and (max-width: 821.98px) {
  .site-header .container {
    flex-wrap: wrap;
  }
}
.site-header svg path {
  fill: currentColor;
}

/* Customizer > Header > Header width = Narrow. Caps the header row at the reading
   width, so branding and menu line up with the column the article text runs in
   rather than with the outer page margins. Below 700px --narrow-width is 100%,
   which leaves the container's own width to hold. */
.site-header-narrow .container {
  max-width: var(--narrow-width);
}

/* Customizer > Header > Vertical align. Where the menu sits against the branding,
   which is the taller of the two whenever a logo, a title and a tagline are stacked
   in it — with only a title there is nothing to align and none of the three differ.

   Bottom is the default and is what the flex-end above already does, so it carries no
   class of its own; only the two that move the row need one. Inline only: the class is
   withheld in quietsite_header_align_class() when the layout is Stack, where branding
   holds a line to itself and there is no second item on it to align to. */
.site-header-align-top .container {
  align-items: flex-start;
}

.site-header-align-middle .container {
  align-items: center;
}

/* Customizer > Header > Header layout = Stack. Branding takes a line of its own and
   the menus wrap onto the next one.

   Only from the tablet breakpoint up: below it the menu already takes a line of its
   own under the branding, so the stack layout is what the header does there anyway. */
@media only screen and (min-width: 822px) {
  .site-header-stack .container {
    flex-wrap: wrap;
    row-gap: var(--spacing-small);
  }
  .site-header-stack .site-branding {
    flex: 0 0 100%; /* forces the wrap; everything after it starts a new line. */
    max-width: none;
  }
  .site-header-stack .primary-navigation {
    /* Left-aligned under the branding rather than pushed to the far right. */
    margin-left: 0;
  }
}

/* Stack at the full header width: both lines centred. Narrow already lines the
   header up with the text column, so left-aligning there keeps branding, menu and
   article on the same edge; at full width there is no such edge to hold to, and a
   title sitting alone in a wide row reads better centred over the menu than pinned
   to the far left of the page. */
@media only screen and (min-width: 822px) {
  .site-header-stack:not(.site-header-narrow) .site-branding {
    align-items: center;
    max-width: 100%;
    text-align: center;
  }
  .site-header-stack:not(.site-header-narrow) {
    /* Auto on both sides, against the margin-left: 0 the stack rule sets. */
  }
  .site-header-stack:not(.site-header-narrow) .primary-navigation {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------- branding */
/* Logo, title, tagline: each on a line of its own, at every width, and each one
   optional — a site can show any of the three. Set as a column rather than left
   to the block flow so they stay aligned to the start edge whatever the header
   row does around them. */
.site-branding {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 60%;
  /* The menu is on the line below rather than beside it, so there is nothing to
     leave room for: a long title gets the whole width instead of wrapping at 60%. */
}
@media only screen and (max-width: 821.98px) {
  .site-branding {
    max-width: 100%;
  }
}
.site-branding img {
  height: 44px;
  width: auto;
  display: block;
}

/* The title reads as the menu does — the body font at body size and regular
   weight — so the header is one line of type rather than a brand with a smaller
   menu beside it. The menu carries no type rules of its own; this is the side
   that moves.

   All three stated rather than inherited, because the title is an <h1> on the
   front page and a <p> everywhere else and both have to read the same: left to
   the elements the <h1> would take the heading font, the heading weight and 2em
   from section 03, and the title would change on the way off the blog index. */
.site-title {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1em;
  margin: 0;
  line-height: 1.2;
  /* Only when it is running under a logo — on its own it is the top of the
     block and takes no space above it. */
}
.site-logo-image + .site-title {
  margin-top: 6px;
}

/* Under the title rather than beside it, so the gap is a small vertical one and
   the same at every width. */
.site-description {
  margin: 4px 0 0;
  line-height: 1.3;
  color: var(--secondary-text);
}

/* ---------------------------- primary navigation */
/* One menu at every width — there is no off-canvas panel to hand the small
   screens over to. Up to the tablet breakpoint the header row wraps and the menu
   takes the line under the branding, left-aligned, rather than being squeezed in
   beside it. */
.primary-navigation {
  margin-left: auto;
}
@media only screen and (max-width: 821.98px) {
  .primary-navigation {
    flex: 0 0 100%;
    margin-left: 0;
    margin-top: var(--spacing-small);
  }
}

.primary-navigation ul.menu-wrapper {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  /* As a gap rather than a margin on the items: when the menu wraps onto a second
     line — which it does on small screens, where it has the width to itself — a
     left margin would indent every row after the first. */
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* The row's vertical breathing room, on the item rather than on the link
     inside it. The link is a box a link style can paint — see section 13 — and
     padding there would make a hover background stand taller than the text it
     sits behind. Same total spacing either way: an item in a flex row keeps its
     margins, and they add to the row gap above. */
}
.primary-navigation ul.menu-wrapper li {
  margin: 5px 0;
}
.primary-navigation ul.menu-wrapper > li {
  display: flex;
  align-items: center;
}

/* ============================================================================
   07. FOOTER
   ========================================================================== */
.site-footer .container {
  padding: var(--spacing-huge) 0 var(--spacing-big);
}

.footer-navigation {
  margin: 0 auto var(--spacing-small);
  max-width: var(--narrow-width);
}
.footer-navigation .menu-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--spacing-small);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-navigation a {
  text-decoration: none;
}
.footer-navigation a:hover, .footer-navigation a:focus {
  text-decoration: underline;
}

/* Always the last line in the footer, so it carries no margin under it: the
   space to the foot of the page is the container's padding and nothing else. */
.copyright {
  margin: 0 auto;
  max-width: var(--narrow-width);
}

/* ============================================================================
   08. SINGLE
   ========================================================================== */
.entry-content {
  margin-top: 1.5em;
  counter-reset: footnotes;
}

/* Pages link
---------------------------------------- */
.page-links-label {
  display: block;
  margin-right: 20px;
}

/* tags
---------------------------------------- */
.entry-tags {
  margin-top: 2em;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.entry-tags a {
  display: block;
  margin-right: 10px;
}

.tags-label {
  display: block;
  margin-right: 10px;
}

/* Comments
---------------------------------------- */
:root {
  --comment-avatar-width: 56px;
  --comment-avatar-text-spacing: 16px;
}
@media only screen and (max-width: 821.98px) {
  :root {
    --comment-avatar-width: 48px;
  }
}
@media only screen and (max-width: 591.98px) {
  :root {
    --comment-avatar-width: 36px;
    --comment-avatar-text-spacing: 8px;
  }
}

.comments-area {
  margin-top: 3em;
}

.comment-body {
  position: relative;
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.comment-list li.comment {
  overflow: hidden;
  position: relative;
  margin-top: var(--spacing-medium);
}
.comment-list > li:first-child {
  margin-top: 0;
}
.comment-list {
  /* main body */
}
.comment-list li + li > .comment-body {
  padding: 0;
  display: block;
  position: relative;
}
.comment-list {
  /* author */
}
.comment-list .comment-author img {
  float: left;
  margin-right: var(--comment-avatar-text-spacing);
  width: var(--comment-avatar-width);
  display: block;
  margin-top: 3px;
}
.comment-list .fn {
  font-style: normal;
  display: table;
  margin-bottom: 4px;
}
.comment-list {
  /* nested */
}
.comment-list ul.children {
  margin: 0;
  list-style: none;
}

.comment-list .children {
  position: relative;
  padding-left: var(--comment-avatar-width);
}

.comment-metadata .edit-link {
  margin-left: 16px;
}

.reply {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.comment-metadata,
.comment .reply,
.comment-content,
.comment .comment-respond {
  padding-left: calc(var(--comment-avatar-width) + var(--comment-avatar-text-spacing));
}

.comment-content {
  padding-top: 0.7em;
}
.comment-content > * {
  margin: 1em 0;
}
.comment-content > *:first-child {
  margin-top: 0;
}
.comment-content > *:last-child {
  margin-bottom: 0;
}

.says {
  display: none;
}

.comments-pagination {
  margin-top: var(--spacing-medium);
}

/* Comment Form
---------------------------------------- */
#reply-title,
.comments-title {
  margin-bottom: var(--spacing-small);
  margin-top: 2em;
}

#reply-title small {
  display: block;
  margin-top: 10px;
}

.no-comments {
  margin-top: 2em;
}

#commentform .logged-in-as,
#commentform .comment-notes {
  margin-bottom: 1.5em;
}

#commentform p {
  margin: 0 0 1em;
}
#commentform p input[type=text],
#commentform p input[type=url],
#commentform p input[type=email],
#commentform p input[type=password],
#commentform p input[type=number] {
  width: 100%;
}

label[for=comment],
label[for=email],
label[for=author],
label[for=url] {
  display: block;
  margin: 0 0 0.2em;
}

.comment-form-cookies-consent {
  display: flex;
  align-items: center;
}
.comment-form-cookies-consent input[type=checkbox] {
  flex: none;
  margin-right: 6px;
}

#commentform .form-submit {
  margin-top: 2em;
}

/* ============================================================================
   09. ARCHIVES
   ========================================================================== */
/* ---------------------------- layout */
.main {
  padding: var(--spacing-big) 0;
  margin: 0 auto;
  width: var(--narrow-width);
  max-width: 100%;
}
@media only screen and (max-width: 821.98px) {
  .main {
    padding: var(--spacing-medium) 0;
  }
}

.quietsite-post {
  margin-bottom: var(--spacing-huge);
}
@media only screen and (max-width: 821.98px) {
  .quietsite-post {
    margin-bottom: var(--spacing-big);
  }
}
.quietsite-post:last-of-type {
  margin-bottom: 0;
}

/* ---------------------------- blog layout: inline
   Customizer > Blog > Blog layout > Inline (the default), printed by
   template-parts/content-inline.php: one line per post, the date and then the
   title, so a page of them reads as an index instead of as a run of entries.

   The same shape as the homepage list and the archives page, which is the point
   — those are already lists, and a blog index set the same way makes the three
   read as one site rather than as three ideas about what a list of posts is.
   The homepage list is not merely the same shape: it prints this same template
   part, so these rules dress it too. */
.quietsite-post-inline {
  display: flex;
  align-items: baseline;
  line-height: 1.35;
  margin-bottom: 0.4em;
}
.quietsite-post-inline:last-of-type {
  margin-bottom: 0;
}
.quietsite-post-inline .quietsite-meta-date {
  flex: none;
  font-variant-numeric: tabular-nums;
  margin-right: var(--spacing-small);
  min-width: 10.5em;
  white-space: nowrap;
}
.quietsite-post-inline .entry-title {
  flex: 1;
  min-width: 0;
  font-size: 1em;
  font-weight: inherit;
  margin: 0;
}
@media only screen and (max-width: 591.98px) {
  .quietsite-post-inline {
    display: block;
    margin-bottom: 0.8em;
  }
  .quietsite-post-inline .quietsite-meta-date {
    display: block;
    margin-right: 0;
  }
}

/* ---------------------------- blog layout: stack
   Customizer > Blog > Blog layout > Stack, printed by
   template-parts/content-stack.php: title, meta, thumbnail, excerpt. Every part
   is styled by the shared rules below — including .entry-header, which wraps the
   title and the meta line here exactly as it does on the single post. */
/* ---------------------------- thumbnail */
.post-thumbnail {
  margin: 0 0 1em;
  max-width: 100%;
}
.post-thumbnail > figcaption {
  margin: 0.4em 0 0;
}

.post-thumbnail > a {
  display: block;
  margin: 0;
}

@media only screen and (min-width: 822px) {
  .post-has-thumbnail-vertical .post-thumbnail {
    width: 360px;
  }
}

/* ---------------------------- entry header
   Title and meta line as one block — printed by content-single.php and by the
   stack blog layout, which is every view that shows both. The space below the
   pair is stated on the wrapper rather than on the meta line, so a post with its
   meta switched off opens the same gap before its thumbnail or its text. Pages
   and portfolio projects, which print a title and no meta, wrap it in the same
   header so they open that gap too. */
.entry-header {
  margin-bottom: 1.8em;
}

/* ---------------------------- title */
.entry-title {
  margin: 0 0 0.1em;
  overflow-wrap: break-word;
}

.quietsite-post-stack .entry-title a {
  color: inherit;
}

/* ---------------------------- excerpt */
.entry-excerpt p {
  margin: 0;
}

/* ---------------------------- meta */
/* The date, the categories and the edit link, wherever they are printed: inside
   an .entry-meta line on the stack layout and the single post, on their own on
   an inline blog row, and inside a note's header on the stream.

   The links are named too, and that is deliberate: a category, an edit link and
   a linked note date are meta before they are links, and leaving them to the
   link color would paint half of a line one color and half of it another. A
   class beats an element, so these hold against the Customizer's accent rule
   however the two land in the cascade — and .note-header-meta rather than
   .note-header, so a single note's "Back to all notes" stays a link.

   This list is the only statement of what "secondary text" reaches: Customizer >
   Design > Colors > Secondary text color moves the token and nothing else, so
   anything added here follows it without the emitter needing to know. */
.entry-meta,
.entry-meta a,
.quietsite-meta-date,
.quietsite-meta-date a,
.note-header-meta,
.note-header-meta a {
  color: var(--secondary-text);
}

.entry-meta {
  display: flex;
  flex-flow: row wrap;
}
.entry-meta > * {
  display: block;
}
.entry-meta > * + * {
  margin-left: 10px;
}

/* ---------------------------- pagination
   quietsite_pagination() prints .navigation.pagination, and every list on the
   site ends with one: the blog in both layouts, the search results, the notes
   stream and the portfolio grid.

   The space above it is stated here rather than left to whichever list happens
   to be above. Left to the lists it came out at four different sizes — and at
   nothing at all under the notes and the projects, where the last row zeroes
   its own bottom margin and the grid never had one, so the page numbers ran on
   from the last note as if they were another line of it. */
.pagination {
  margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .pagination {
    margin-top: var(--spacing-medium);
  }
}

.wp-block-query-pagination {
  margin-top: 2em;
}

/* ---------------------------- archive header
   Sits above .main rather than inside it, so it has to open the space under the
   site header itself — and it opens the same amount .main does, so an archive
   title starts on the line a page title would have started on. */
.archive-header {
  padding: var(--spacing-big) 0 0;
  margin: 0 auto;
  width: var(--narrow-width);
  max-width: 100%;
}
@media only screen and (max-width: 821.98px) {
  .archive-header {
    padding-top: var(--spacing-medium);
  }
}
.archive-header h1 {
  margin: 0;
}

.archive-description {
  margin: 0.4em 0 0;
}
.archive-description p {
  margin: 0;
}

/* search
--------------------------------------------- */
.search-result-count {
  margin: 0.2em 0 0;
}
.search-result-count p {
  margin: 0;
}

/* The count and the form under the title, still inside the header: the padding
   above and the space below both come from .archive-header and .main, as on
   every other archive, so a longer head does not move where the results start
   relative to the title. */
.search-header .search-form {
  margin-top: 1em;
}

/* No bottom margin: the pagination under it carries its own space, and with no
   results there is nothing here to hold open. */
.quietsite-search {
  margin: 0;
}

.quietsite-post-search + .quietsite-post-search {
  margin-top: var(--spacing-medium);
}

.quietsite-post-search {
  overflow: hidden;
}
.quietsite-post-search .entry-excerpt {
  margin-top: 0.5em;
}

.quietsite-post-search-thumbnail {
  margin: 0 0 0 10px;
  width: 54px;
  float: right;
}
.quietsite-post-search-thumbnail a {
  display: block;
}
.quietsite-post-search-thumbnail img {
  width: 100%;
  display: block;
}

.quietsite-post-search-text {
  overflow: hidden;
}

/* archives index
---------------------------------------------
   The archives page — every published post, grouped year > month.

   Titles only, so the rows are set tight and the columns carry the structure.
   The month is set at the same size as the titles it heads — it is a date on
   the row, not a heading over it. The year is a step up from both, and no
   more: it is the only thing on the page set larger, so it does not need to
   shout to be found when scrolling.

   The year heads everything filed under it, on its own line above the months;
   the month and its titles are two columns beside each other. So the page is
   read straight down — year, then month by month — and only the months carry
   a second column. Both are flush left, which puts the year, the months and
   the titles' first characters on one edge rather than three. Month and
   titles share one font size, and both columns hang from the top of the row,
   so they land on one line with no nudging. Nothing is drawn to mark any of
   it, so there is no rule between years either — years are parted by space
   alone, and by enough of it that none is missed.

   Two optional sections can sit above the index — the categories and the
   popular tags, both switched on in Customizer > Blog — each headed the way a
   year is, with its links running as one wrapped line underneath. */
.archives-index {
  /* The month's gutter and the gap beside it. In rem rather than em so the
     months are one fixed spine down the whole page, whatever a month label
     happens to measure — a long name wraps inside its column rather than
     moving the titles beside it. */
  --archives-month-column: 7rem;
  --archives-column-gap: 1.25rem;
  margin-top: var(--spacing-medium);
  /* Only when the page above it wrote something. An .entry-content that the
     template skipped for an empty page leaves the index directly under the
     title, where the title's own margin is the right amount of space. */
}
.entry-content + .archives-index {
  margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .entry-content + .archives-index {
    margin-top: var(--spacing-medium);
  }
}

.archives-year {
  /* Space between years, no rule. It has to do the whole job of the missing
     line, so it is set well clear of the gap between months below — the two
     are what tell you which level you are looking at. */
}
.archives-year + .archives-year {
  margin-top: 3.2em;
}

.archives-year-title {
  line-height: 1.35;
  /* Closer to the months under it than to the year above it, so it is read
     as heading the list that follows rather than closing the one before. */
  margin: 0 0 0.8em;
}

.archives-month {
  display: grid;
  grid-template-columns: var(--archives-month-column) minmax(0, 1fr);
  -moz-column-gap: var(--archives-column-gap);
       column-gap: var(--archives-column-gap);
  /* The month heads its posts rather than centring on them, so both columns
     hang from the top of the row. */
  align-items: start;
}
.archives-month + .archives-month {
  margin-top: 0.9em;
}
@media only screen and (max-width: 591.98px) {
  .archives-month {
    /* Under the phone breakpoint there is no room for two columns: the
       month goes back to being a heading above its list, as the year
       already is. */
    display: block;
  }
  .archives-month + .archives-month {
    margin-top: 1.4em;
  }
}

/* Same size as the titles beside it, so the row reads as one line and the two
   need no nudging onto each other. It is a date on the row rather than a
   heading over it, so it also drops the bold a heading would carry. */
.archives-month-title {
  font-size: inherit;
  font-weight: normal;
  line-height: 1.35;
  margin: 0;
}
@media only screen and (max-width: 591.98px) {
  .archives-month-title {
    margin-bottom: 0.35em;
  }
}

.archives-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archives-list li {
  margin: 0 0 0.4em;
  line-height: 1.35;
}
.archives-list li:last-child {
  margin-bottom: 0;
}

.archives-empty {
  margin-top: var(--spacing-medium);
}

/* ---------------------------- categories and popular tags
   The two optional sections above the index, printed by
   quietsite_the_archives_categories() and quietsite_the_archives_tags().

   Headed the way the years are: the heading on its own line, flush left, at the
   one size this page sets anything larger, and its links as a single wrapped
   line beneath it. So the page is read down as three sections of one kind —
   Categories, Popular tags, then the years — rather than as two labels and then
   an index.

   The links run across rather than down. There is no chronology to a set of
   categories, so nothing is gained by giving each one its own line, and a blog
   with forty of them would otherwise open its archives page with forty rows
   before the archive itself began. */
.archives-terms {
  margin-top: var(--spacing-medium);
}
.entry-content + .archives-terms {
  margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .entry-content + .archives-terms {
    margin-top: var(--spacing-medium);
  }
}
.archives-terms + .archives-terms {
  margin-top: 2em;
}

.archives-terms + .archives-index {
  margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .archives-terms + .archives-index {
    margin-top: var(--spacing-medium);
  }
}

.archives-terms-title {
  line-height: 1.35;
  margin: 0 0 0.8em;
}

.archives-terms-list {
  display: flex;
  flex-flow: row wrap;
  -moz-column-gap: 1.25em;
       column-gap: 1.25em;
  row-gap: 0.4em;
  line-height: 1.35;
  list-style: none;
  margin: 0;
  padding: 0;
}
.archives-terms-list li {
  margin: 0;
}

.archives-term-count {
  font-variant-numeric: tabular-nums;
  margin-left: 0.35em;
}

/* homepage: latest posts
---------------------------------------------
   The list printed under a static front page's content, switched on in
   Customizer > Homepage Settings.

   Title and date per row: this is the way through from a homepage to the
   writing, not a second copy of the blog, and anything more per row would make
   it compete with the page above it.

   The rows are the Inline blog layout's rows — .quietsite-post-inline, styled
   above — so there is nothing to set here but the space above the section. The
   heading is left as the h2 the browser and the theme's element rules already
   set: it is a heading on the page like any other, and one sized specially for
   this list would be the only one on the site that is. The arrangement is the
   archives index minus its year and month columns; a handful of recent posts
   needs no grouping to be read. */
.homepage-posts {
  margin-top: var(--spacing-big);
}
@media only screen and (max-width: 821.98px) {
  .homepage-posts {
    margin-top: var(--spacing-medium);
  }
}

/* nothing found
---------------------------------------------
   Two templates print the same page: 404.php, for an address that resolves to
   nothing, and template-parts/content-none.php, for an archive that came back
   empty. Both set it inside .main, which holds it to the reading width and
   opens the space above the title and below the search form, so all that is
   left here is the gap between the two — the same one an archive keeps between
   its title and the first thing under it. */
.no-results .page-title {
  margin: 0;
}

.page-content-404 {
  width: var(--narrow-width);
  max-width: 100%;
  margin: var(--spacing-big) auto 0;
}
@media only screen and (max-width: 821.98px) {
  .page-content-404 {
    margin-top: var(--spacing-medium);
  }
}
.page-content-404 .search-form {
  margin-top: 10px;
}

/* ============================================================================
   10. NOTES
   ----------------------------------------------------------------------------
   Notes are short posts with no title: inc/notes.php registers the type,
   archive-note.php prints the stream, single-note.php prints one on its own.

   With no title, the date does a title's work. In the stream it heads the note
   and carries the link to it; on a single note it sits at the other end of the
   line from the way back. Both use .note-header, so the two read as the same
   object seen at two distances.
   ========================================================================== */
/* The page's own writing, when the stream is built on the page named in
   Customizer > Notes.

   Closer to the stream than one note is to the next, and deliberately: the notes
   are separated from each other by the space one note keeps from the next, and
   an intro held that far off as well would read as the first note in the stream
   rather than as the page speaking before it. Enough to tell the two apart, and
   no more — most of these pages carry a title and nothing else, where a wider
   gap is just an empty screen above the writing. */
.quietsite-notes-intro {
  margin-bottom: var(--spacing-medium);
}
@media only screen and (max-width: 821.98px) {
  .quietsite-notes-intro {
    margin-bottom: var(--spacing-small);
  }
}

.note-header {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25em 1.5em;
}

/* The date and the edit link travel as one thing, because the header holds its
   parts apart: on a single note the way back is at one end and this pair at the
   other, and a loose edit link would push the date into the middle of the line
   — for the one person who can edit the note, and for nobody else. */
.note-header-meta {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 0.25em 1em;
}

/* ---------------------------- the stream (archive-note.php) */
.quietsite-note {
  margin-bottom: var(--spacing-huge);
}
@media only screen and (max-width: 821.98px) {
  .quietsite-note {
    margin-bottom: var(--spacing-big);
  }
}
.quietsite-note:last-of-type {
  margin-bottom: 0;
}
.quietsite-note .entry-content {
  margin-top: 0.5em;
}

/* The date out in the margin, from the breakpoint where the page is wide enough
   to have one: the reading column is capped well short of the container, and the
   room beside it is where a date belongs on a stream of writing that has no
   titles. Taken out of the flow, so a note begins at the top of its own text and
   the dates read as a column down the left rather than as a run of headings.

   Under the breakpoint the margin is not there to write in, and the header stays
   where the rules above put it: on its own line over the note.

   Fixed width, and right-aligned inside it, so every date ends the same distance
   from the text no matter how long the month is — the same reason the inline
   blog list holds its dates to a min-width. Wide enough for a written-out date
   in em, so it grows with Customizer > Design > Base font size instead of
   crowding the writing when the page is read larger. */
@media only screen and (min-width: 1090px) {
  .quietsite-notes .quietsite-note {
    position: relative;
  }
  .quietsite-notes .quietsite-note .note-header {
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
    width: 10.5em;
    padding-right: var(--spacing-small);
    text-align: right;
  }
  .quietsite-notes .quietsite-note .note-header .note-header-meta {
    display: block;
  }
  .quietsite-notes .quietsite-note .entry-content {
    margin-top: 0;
  }
}
/* ---------------------------- one note (single-note.php)
   Carries .quietsite-note as well, so this is only where the two differ. */
.quietsite-note-single {
  margin-bottom: 0;
}
.quietsite-note-single .entry-content {
  margin-top: 1.5em;
}

/* ============================================================================
   11. PORTFOLIO
   ----------------------------------------------------------------------------
   inc/portfolio.php registers the project post type;
   archive-quietsite_portfolio.php prints the grid, either at /projects/ or on
   the page named in Customizer > Portfolio; single-quietsite_portfolio.php
   prints one project on its own.

   Two columns of picture and title, and nothing else — no dates, no borders. A
   portfolio is looked at rather than read, so the only thing the layout has to
   do is get out of the way of the photographs and keep their tops and bottoms
   lined up. A project with no photograph puts its excerpt in the frame instead,
   which keeps that alignment rather than breaking it.
   ========================================================================== */
/* The page's own writing, when the grid is built on a page. It ends where the
   grid begins, at the same distance a post keeps from what follows it. */
.quietsite-portfolio-intro {
  margin-bottom: var(--spacing-huge);
}
@media only screen and (max-width: 821.98px) {
  .quietsite-portfolio-intro {
    margin-bottom: var(--spacing-big);
  }
}

.quietsite-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-big) var(--spacing-medium);
}
@media only screen and (max-width: 591.98px) {
  .quietsite-portfolio-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-medium);
  }
}

/* The picture is a link and the title is a link, both to the project. This is
   the picture's: it fills the frame it is inside, so the whole photograph is the
   target it looks like it is. */
.quietsite-project-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* A fixed shape rather than each image's own, so the titles sit on one line
   across the row and the grid reads as a grid. object-fit crops to it; the
   uncropped photograph is on the project's own page. Shared by all three things
   that can fill the frame — the picture, the excerpt standing in for it, and the
   empty frame standing in for both.

   4:3 is the default of Customizer > Portfolio > Photo ratio, which is why the
   ratio is written here and not emitted: any other choice overrides this one
   declaration from quietsite_portfolio_inline_css() in inc/portfolio.php. */
.quietsite-project-thumbnail {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.quietsite-project-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* A project with writing but no photograph yet: the excerpt takes the frame, so
   the row keeps its rhythm and the titles still line up. Small and clamped to
   the frame — it is standing in for a picture, not asking to be read through. */
.quietsite-project-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  font-size: 0.875em;
  line-height: 1.5;
}

/* A project with neither. Faint rather than empty, so the gap does not read as a
   broken picture. */
.quietsite-project-thumbnail-empty {
  background: currentColor;
  opacity: 0.08;
}

/* Set as label text, not as a heading: it is an h2 for anything reading the
   outline, but at heading size it would compete with the picture above it. */
.quietsite-project-title {
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.35;
  margin: 0.6em 0 0;
}

/* ---------------------------- one project (single-quietsite_portfolio.php)
   The way back to the grid, above the title. Kept at a navigating line's
   distance from the title rather than a label's. */
.project-back {
  margin: 0 0 1.5em;
}

/* ============================================================================
   12. WIDGETS
   ========================================================================== */
.widget-area .wp-block-heading,
.widget-area .widgettitle,
.widget-area .widget-title {
  font-size: 1em;
  margin-bottom: 0.5em;
}

/* ---------------------------- calendar */
.wp-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5em;
}

/* ---------------------------- search form */
/* Capped rather than filled: a search field is a few words long, and a rule
   drawn the whole width of the reading column reads as a section divider. The
   cap is a max, so inside anything narrower — a widget, a phone — it still
   takes what it is given. */
.search-form {
  display: block;
  position: relative;
  max-width: 320px;
}
.search-form input[type=search] {
  width: 100%;
  /* Room for the button sitting over the right end of the field. */
  padding-right: var(--control-height);
}
.search-form {
  /* The submit is an icon inside the field, so it drops the button fill and
     the border and becomes the glyph alone. Square, matching the field height,
     which is what keeps the icon centred on the text. */
}
.search-form button {
  background: none;
  color: inherit;
  border: 0;
  padding: 0;
  margin: 0;
  width: var(--control-height);
  height: var(--control-height);
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-form button:hover {
  background: none;
  opacity: 0.7;
}

/* ---------------------------- search block */
/* The Search block draws itself out of the box — a #949494 field, a filled dark
   button (that fill arrives on .wp-element-button, from core's own global
   styles, so a bare `button` rule never reaches it) held 10px clear of the
   field — and none of that is the theme's. Redrawn here with the same border,
   height and faint fill every other control gets, and capped at the width of
   .search-form so the block and the theme's own form read as one object.
   A colour set on the button in the editor still wins: presets land as
   !important, custom colors as an inline style. */
.wp-block-search {
  max-width: 320px;
}
.wp-block-search .wp-block-search__label {
  display: block;
  font-weight: inherit;
  margin-bottom: 0.5em;
}
.wp-block-search .wp-block-search__input {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0;
  padding: 0 var(--control-padding);
  height: var(--control-height);
  /* Core's 3rem floor would keep the field from shrinking inside a
     sidebar narrower than the two controls together. */
  min-width: 0;
}
.wp-block-search .wp-block-search__input:focus {
  border-color: currentColor;
}
.wp-block-search .wp-block-search__button {
  font: inherit;
  color: inherit;
  background-color: color-mix(in srgb, currentColor 7%, transparent);
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0;
  padding: 0 calc(var(--control-padding) * 1.5);
  height: var(--control-height);
  line-height: 1;
  cursor: pointer;
  /* Centres the glyph when the button is set to an icon. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-block-search .wp-block-search__button:hover {
  background-color: color-mix(in srgb, currentColor 12%, transparent);
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.wp-block-search {
  /* Flush against the field, the two borders pulled onto one seam, rather
     than core's 10px gap. Not on the button-only layout, which has no field
     to sit against. */
}
.wp-block-search:not(.wp-block-search__button-only) .wp-block-search__button {
  margin-left: -1px;
}
.wp-block-search {
  /* Button-inside: the wrapper carries the border, so the two controls give
     theirs up and the pair reads as a single field. */
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  background-color: transparent;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 0;
  padding: 0;
  height: var(--control-height);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  border: 0;
  height: 100%;
  margin: 0;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
  padding: 0 var(--control-padding);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button {
  padding: 0 var(--control-padding);
}

/* ---------------------------- lists */
.wp-block-latest-comments,
.widget_nav_menu nav > ul,
.wp-block-archives-list,
.wp-block-categories-list,
.wp-block-latest-posts__list,
.wp-block-page-list,
.wp-block-rss,
.widget_rss ul,
.widget_archive ul,
.widget_nav_menu ul,
.widget_meta ul,
.widget_recent_comments ul,
.widget_recent_entries ul,
.widget_pages ul,
.widget_categories ul,
.widget_product_categories ul {
  list-style: none;
  margin-block: 0;
  padding: 0;
}
.wp-block-latest-comments ul,
.widget_nav_menu nav > ul ul,
.wp-block-archives-list ul,
.wp-block-categories-list ul,
.wp-block-latest-posts__list ul,
.wp-block-page-list ul,
.wp-block-rss ul,
.widget_rss ul ul,
.widget_archive ul ul,
.widget_nav_menu ul ul,
.widget_meta ul ul,
.widget_recent_comments ul ul,
.widget_recent_entries ul ul,
.widget_pages ul ul,
.widget_categories ul ul,
.widget_product_categories ul ul {
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
}

.wp-block-latest-comments__comment,
.widget_recent_comments li,
.wp-block-latest-posts.wp-block-latest-posts__list li,
.wp-block-rss > li,
.widget_rss ul > li {
  margin-bottom: 0.75em;
  overflow: hidden;
}
.wp-block-latest-comments__comment:last-child,
.widget_recent_comments li:last-child,
.wp-block-latest-posts.wp-block-latest-posts__list li:last-child,
.wp-block-rss > li:last-child,
.widget_rss ul > li:last-child {
  margin-bottom: 0;
}

.wp-block-latest-comments__comment-excerpt > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------- widget in .secondary */
.secondary .widget_block + .widget_block, .secondary .widget_block + .widget,
.secondary .widget + .widget_block,
.secondary .widget + .widget {
  margin-top: 2em;
}

/* ============================================================================
   13. LINK STYLES
   ----------------------------------------------------------------------------
   Customizer > Design > Link style, one block per treatment, applied as a body
   class by quietsite_link_style_class() in inc/template-functions.php. "No
   style" — the default — carries no class and no block: links stay whatever the
   browser and the rules above make them, which is what the theme has always
   done and what every section before this one assumes.

   Last in the sheet on purpose. Each of these is a decision about every link on
   the page, the footer menu included, and section 07 sets a text-decoration on
   that menu at the same specificity these rules have; later position is what
   settles it.

   --accent only exists once Design > Colors sets it, so the two accent
   treatments name LinkText — the browser's own link color — as the fallback and
   stay the browser's blue until an accent is picked. They also outrank the
   a{color:var(--accent)} rule quietsite_design_inline_css() emits, which is
   fine: they resolve to the same token.
   ========================================================================== */
/* Accent color, no line until the pointer is on it. */
.link-style-accent-underline a {
  color: var(--accent, LinkText);
  text-decoration: none;
}
.link-style-accent-underline a:hover, .link-style-accent-underline a:focus {
  text-decoration: underline;
}

/* Accent color, with a wash of it behind the text on hover instead of a line.

   Background alone, no padding to sit it off the text: a link in the primary
   menu is a block with padding of its own and inline links sit in running text,
   so anything added here would move the page on hover. */
.link-style-accent-background a {
  color: var(--accent, LinkText);
  text-decoration: none;
}
.link-style-accent-background a:hover, .link-style-accent-background a:focus {
  background-color: color-mix(in srgb, var(--accent, LinkText) 14%, transparent);
  text-decoration: none;
}

/* The same idea at full strength: the accent fills the box on hover and the text
   reverses out of it in white.

   White rather than the page background: this is the one rule here that has to
   name a color of its own — the background is a token the theme only sets when
   someone picks one, so there is nothing to read back — and white is the color
   that reads against an accent, which is a color chosen to stand out from a page
   that is light by default. A site running a pale accent should use the
   treatment above instead. */
.link-style-accent-fill a {
  color: var(--accent, LinkText);
  text-decoration: none;
}
.link-style-accent-fill a:hover, .link-style-accent-fill a:focus {
  background-color: var(--accent, LinkText);
  color: #fff;
  text-decoration: none;
}

/* The text color, underlined — the one treatment where a link is told apart by
   its line rather than by its color, so the line is the resting state and hover
   takes it away.

   color: inherit rather than a color of its own: it follows Design > Colors >
   Text color, and the accent, if one is set, stops reaching links entirely. */
.link-style-text a {
  color: inherit;
  text-decoration: underline;
}
.link-style-text a:hover, .link-style-text a:focus {
  text-decoration: none;
}

/* The two menus are the exception. A menu is a row of links and already reads as
   one, so underlining every item is noise rather than information — they keep
   the treatment section 07 gives the footer menu: nothing at rest, a line on
   hover. The color still follows the rule above. */
.link-style-text .primary-navigation a,
.link-style-text .footer-navigation a {
  text-decoration: none;
}
.link-style-text .primary-navigation a:hover, .link-style-text .primary-navigation a:focus,
.link-style-text .footer-navigation a:hover,
.link-style-text .footer-navigation a:focus {
  text-decoration: underline;
}

/* ============================================================================
   14. REDUCED MOTION
   ----------------------------------------------------------------------------
   Respect users who ask for less motion (WCAG 2.3.3): drop transitions,
   animations and smooth scrolling. The off-canvas still opens/closes — it
   just snaps instead of sliding.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/*# sourceMappingURL=style.css.map */