
/***
 4.1 The document element
 https://html.spec.whatwg.org/multipage/semantics.html#the-root-element

 4.3 Sections
 https://html.spec.whatwg.org/multipage/sections.html
 ***/

html {
	font-family: var(--main-font);
	line-height: var(--rhythm, 1.4rem);

	background: var(--bg);
	color: var(--fg);

	scroll-padding-block-start: calc(4 * var(--gap));
  @supports selector(::-webkit-scrollbar-thumb) {
    ::-webkit-scrollbar-thumb { background-color: var(--accent); }
    ::-webkit-scrollbar-track { background-color: transparent;   }
  }
  @supports (scrollbar-color: gray transparent) {
    scrollbar-color: var(--accent) transparent;
  }
}
html, body {
  scrollbar-width: auto;
  & * { scrollbar-width: thin; }
}

body {
	margin: 0;
}

header, footer, section + section {
	margin-block: calc(2 * var(--gap));
}

nav {
	& :is(a:not(.\<button\>), .\<a\>) {
		text-decoration: none;
		color: var(--accent);
	}
}

aside {
	font-size: .8em;
	line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
	--gap: calc(var(--rhythm, 1rlh) * var(--density) * 2 / 3);

	border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
	border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
	padding-block: var(--gap);
	margin-block: calc(var(--gap) * 3 / 2);

	&.bg {
		padding-inline: var(--gap);
	}

	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {
		font-size: 1em;
		text-transform: none;
		letter-spacing: normal;
	}

	&:is(.big, .\<big\>) {
		/* Pull quote */
		background: none;
		border: none;
		border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--muted-fg);
		border-radius: 0;
		padding: 0;
		padding-inline-start: var(--rhythm, 1rlh);
		font-style: italic;
		color: var(--accent);
	}
}

h1, h2, h3, h4, h5, h6,
.\<h1\>, .\<h2\>, .\<h3\>, .\<h4\>, .\<h5\>, .\<h6\> {
	margin-block-end: var(--gap);
	font-family: var(--display-font);
	font-size: 1em;
	margin-block-start: calc(2 * var(--gap));
	position: relative;
}

h1, .\<h1\> {
	font-size: 2em;
	text-transform: none;
	line-height: calc(2 * var(--rhythm, 1rlh));
	letter-spacing: 0;
}

h2, .\<h2\> {
	font-size: 1.6em;
	text-transform: none;
	line-height: calc(1.5 * var(--rhythm, 1rlh));
	letter-spacing: 0;
}

h3, .\<h3\> {
	font-size: 1.17em;
	line-height: calc(1 * var(--rhythm, 1rlh));
}

h4, .\<h4\>, h5, .\<h5\>, h6, .\<h6\> {
	font-size: 1em;
	text-transform: none;
	line-height: calc(1 * var(--rhythm, 1rlh));
	letter-spacing: 0;
	margin-block-start: var(--gap);
}

h1 + h2,
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
	margin-block-start: var(--gap);
}

h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
	outline: none;
	&::before {
		content: "";
		display: block;
		position: absolute;
		left: -.5em;
		width: 4px;
		height: 100%;
		background: var(--accent);
	}
}

header {
	font-family: var(--display-font);
	border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
}

footer {
	font-family: var(--secondary-font);
	font-size: .8em;
	line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
	border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
}

body > header,
body > footer,
main + footer {
	padding: var(--rhythm, 1rlh) calc((100% - var(--eff-line-length)) / 2)
}

address {
	--density: 0;
}

/***
 4.4 Grouping content
 https://html.spec.whatwg.org/multipage/grouping-content.html
 ***/

p {
	margin-block: var(--gap);
}

hr {
	color: inherit;
	margin-inline: 0;
	margin-block: var(--gap);

	flex: 0 1 0px;
	border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--accent);
	block-size: auto;
	border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--accent);
	border-block-end: none;
	border-inline-end: none;
}

pre {
	font-family: var(--mono-font);
	font-size: .9em;
	line-height: var(--rhythm, 1rlh);
	tab-size: 2;

	margin: var(--gap) 0;

	overflow-x: auto;
}

blockquote {
	margin-inline: 0 var(--gap);
	padding-inline: var(--gap) 0;
	margin-block: var(--gap);

	font-size: 1.1em;
	line-height: var(--rhythm, 1rlh);
	font-style: italic;

	border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
	color: var(--muted-fg);

	& em, & cite, & dfn, & var, & i, & address {
		font-style: normal;
	}

	& footer {
		text-align: right;
		text-align: end;
	}
}

ul, ol {
	padding-inline-start: var(--rhythm, 1rlh);
	margin-block: var(--gap);

	& & {
		padding-inline-start: var(--gap);
	}

	&[role="list"], &[role="listbox"] {
		padding-inline-start: 0;
		list-style: none;
	}
}

ul {
}

ol {
}

dl {
	margin-block: var(--gap);
}
	dt {
		font-weight: bold;
		font-family: var(--secondary-font);
	}

	dd {
		margin-inline-start: var(--rhythm, 1rlh);
	}

@supports selector(li::marker) {
  li::marker {
  	font-family: var(--secondary-font);
  }
}

figure {
	max-width: 100%;
	margin-inline: 0;

    /* SEE components/box.css */
}
figcaption {
	margin-block: var(--gap);

	font-family: var(--secondary-font);

	color: var(--muted-fg);
}

main {
	max-inline-size: var(--eff-line-length);
	inline-size: 100%;
	margin-inline: auto;

	&:first-child { padding-top: var(--gap); }
}

/***
 4.5 Text-level semantics
 https://html.spec.whatwg.org/multipage/text-level-semantics.html

 4.7 Edits
 https://html.spec.whatwg.org/multipage/edits.html
 ***/

/* Text-level semantics */

a, .\<a\> {
	color: var(--link-fg, var(--accent));
	border-radius: var(--interactive-border-radius);
	outline-offset: 1px;
	background: none;
	border: none;
	font-size: 1em;
  font-family: inherit;
	text-decoration: 1px dotted underline;

	/* button-specific resets */
  padding: 0;

	.list-of-links & {
		text-decoration: none;
	}

	&:hover, &:focus {
		text-decoration: 2px solid underline;
		cursor: pointer;
		outline: none;
	}
}

small[role="note"] {
	/***
	 Sidenote
	 ***/
	display: block;
	float: inline-end;
	clear: inline-end;

	--sidenote-width: 20ch;

	max-inline-size: var(--sidenote-width);
	padding-inline: 1.5ch 1ch;

	margin-inline-end: calc(1em - var(--sidenote-width));
	margin-block-end: var(--rhythm, 1rlh);

	font-family: var(--secondary-font);

	background: var(--bg);
	border-block-start: var(--border-block-start-width) var(--border-block-start-style) transparent;
	border-block-end: var(--border-block-end-width) var(--border-block-end-style) transparent;
	border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) transparent;
	border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) transparent;

	transition: transform .1s ease-in-out;

	&:hover, &:focus-within {
		border-color: var(--graphical-fg);
		border-radius: var(--border-radius);
		transform: translateX(calc(
			0px - var(--sidenote-width)
			+ min(var(--gutter-width), var(--sidenote-width))
		))
	}
}

small, .\<small\> {
	font-size: .8em;
	line-height: calc(var(--rhythm, 1rlh) * 2 / 3);
}

s {
	color: var(--bad-fg);
}

q {
	font-style: italic;

	& em, & cite, & dfn, & var, & i, & address {
		font-style: normal;
	}
}

time {
	font-variant-numeric: tabular-nums;
}

code, samp, kbd {
	font-family: var(--mono-font);
	font-style: normal;
}

samp {
	color: var(--ok-fg);
}

kbd kbd /*
	We apply the key-like styling to a nested kbd element, a pattern shown in
	WHATWG HTML for marking up keyboard input:

	> Here the kbd element is used to indicate keys to press:
	>   ~~~ html
	>   <p>To make George eat an apple, press <kbd><kbd>Shift</kbd> + <kbd>F3</kbd></kbd></p>
	>   ~~~

	The plain kbd element can also be used for clicking menus (<kbd>File |
	New...</kbd>) or voice input (<kbd>Hey Siri, </kbd>)
*/ {
	display: inline-block;

	padding: 0 .3em;
	font-size: .8em;
	line-height: 1.1em;

	background: var(--interactive-bg);
	border: 1px outset var(--graphical-fg);
	border-block-end-width: 3px;
	border-radius: var(--interactive-border-radius);
}

sub {
	vertical-align: bottom;
	line-height: 1;
}

sup {
	vertical-align: top;
	line-height: 1;
}

mark {
	background: var(--warn-bg);
	color: var(--warn-fg);
}

/* Edits */

ins {
	background: var(--ok-bg);
	color: var(--ok-fg);
}

del {
	background: var(--bad-bg);
	color: var(--bad-fg);
}

/***
 4.8 Embedded content
 https://html.spec.whatwg.org/multipage/embedded-content.html
 ***/

img, video, audio, iframe, object, embed {
	max-inline-size: 100%;
	inline-size: max-content;
	block-size: auto;
}
:is(object, embed)[type="image/svg+xml"] {
  /* https://issues.chromium.org/issues/40811132 */
  color-scheme: light;
}

/***
 4.9 Tabular data
 https://html.spec.whatwg.org/multipage/tables.html
 ***/

table {
	font-variant-numeric: tabular-nums;
	font: inherit;
}

caption {
	text-align: start;
	font-family: var(--secondary-font);
	font-style: italic;
}

tbody {
	border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--faded-fg);
	border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--faded-fg);
}

thead {
}

tfoot {
}

tr {

}

td, th {
	vertical-align: top;

	&:not(:last-child) {
		padding-inline-end: var(--rhythm, 1rlh);
	}
}

	td {
	}

	th {
		font-family: var(--secondary-font);
		text-align: start;
	}

/***
 4.10 Forms
 https://html.spec.whatwg.org/multipage/forms.html
 ***/

input { display: block; }
label :is(input, select):not([specificity-hack]) {
	display: inline; padding-block: 0;
}

:where(
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  .\<button\>
):not(.\<a\>) {
  /* Any changes made here must also be made to ::file-selector-button below */
	display: inline-block;
	padding: 0 calc(var(--rhythm, 1rlh) / 4);
	vertical-align: middle;
	box-sizing: border-box;

	font-size: .8rem;
	line-height: 1.125em;
	font-family: var(--secondary-font);
	min-height: var(--rhythm, 1rlh);

	background: var(--interactive-bg);
	color: var(--fg);
	border: var(--interactive-border-width) var(--interactive-border-style) var(--muted-fg);
	box-shadow: var(--shadow);
	border-radius: var(--interactive-border-radius);

	/* a-specific resets */
	color: var(--fg);
	text-decoration: none;
	display: inline-flex;
	justify-content: center;
	align-items: center;
  cursor: default;

  &:is(.plain, .info, .ok, .warn, .bad) {
    /* Must define these before pseudo-classes */
    --interactive-bg: var(--box-bg);
    --muted-fg: var(--graphical-fg);
    --fg: var(--accent);
  }

	&:hover, &:focus-visible {
		filter: brightness(1.1);
		box-shadow: var(--shadow-focus);
  }
  &:hover, &:focus {
		/* a-specific resets */
		text-decoration: none;
	}

	&:active {
		box-shadow: var(--shadow-active);
	}

	&:active:is([aria-pressed], [aria-expanded]) {
		color: var(--accent);
		box-shadow: var(--pressed-shadow-active);
	}

	&:where([aria-pressed="true"], [aria-expanded="true"]) {
		box-shadow: var(--pressed-shadow);
		background: var(--pressed-interactive-bg);
		color: var(--accent);

		&:hover, &:focus-visible {
			box-shadow: var(--pressed-shadow-focus);
		}
	}

	&:disabled {
    cursor: not-allowed;
		--fg: var(--muted-fg);
		box-shadow: var(--shadow-disabled);
	}

	&:is(.big, .\<big\>) {
		min-block-size: calc(1.5 * var(--rhythm, 1rlh));
		font-size: 1rem;
		padding-inline: calc(.5 * var(--rhythm, 1rlh));
		line-height: var(--rhythm, 1rlh);
	}
}
a.\<button\>:not([specificity-hack]) {
  /* ¯\_(ツ)_/¯ */
  cursor: default;
}

strong > :where(
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"],
  .\<button\>
):not(.\<a\>) {
	background: var(--accent);
	color: var(--box-bg);
	border-color: transparent;
	font-weight: bold;

  &:is(.plain, .info, .ok, .warn, .bad) {
    --fg: var(--box-bg);
    --muted-accent: var(--graphical-fg);
  }

	&:active:is([aria-pressed], [aria-expanded]) {
    color: var(--graphical-fg);
		box-shadow: var(--pressed-shadow-active);
	}

	&:where([aria-pressed="true"], [aria-expanded="true"]) {
		box-shadow: var(--pressed-shadow);
		background: var(--pressed-interactive-bg);
		color: var(--graphical-fg);
    border-color: var(--muted-fg);

		&:hover, &:focus-visible {
			box-shadow: var(--pressed-shadow-focus);
		}
	}

  &:disabled {
    /* c.f. strong > input:disabled::file-selector-button */
  }
}


input::file-selector-button {
  /* CSS nesting does not support pseudo-elements such as ::file-selector-button, so
   * we have to duplicate styles from above. */

	display: inline-block;
	padding: 0 calc(var(--rhythm, 1rlh) / 4);
	vertical-align: middle;
	box-sizing: border-box;

	font-size: .8rem;
	line-height: 1.125em;
	font-family: var(--secondary-font);
	min-height: var(--rhythm, 1rlh);

	background: var(--interactive-bg);
	color: var(--fg);
	border: var(--interactive-border-width) var(--interactive-border-style) var(--muted-fg);
	box-shadow: var(--shadow);
	border-radius: var(--interactive-border-radius);
}
input:is(.plain, .info, .ok, .warn, .bad)::file-selector-button {
  --interactive-bg: var(--box-bg);
  --muted-fg: var(--graphical-fg);
  --fg: var(--accent);
}
input::file-selector-button:is(:hover, :focus-visible) {
	filter: brightness(1.1);
	box-shadow: var(--shadow-focus);

	/* a-specific resets */
	text-decoration: none;
}
input::file-selector-button:active {
	box-shadow: var(--shadow-active);
}
input:disabled::file-selector-button {
  cursor: not-allowed;
	--fg: var(--muted-fg);
	box-shadow: var(--shadow-disabled);
}
input:is(.big, .\<big\>)::file-selector-button {
	min-block-size: calc(1.5 * var(--rhythm, 1rlh));
	font-size: 1rem;
	padding-inline: calc(.5 * var(--rhythm, 1rlh));
	line-height: var(--rhythm, 1rlh);
}
strong > input::file-selector-button {
	background: var(--accent);
	color: var(--box-bg);
	border-color: transparent;
	font-weight: bold;
}
strong > input:is(.plain, .info, .ok, .warn, .bad)::file-selector-button {
  --fg: var(--box-bg);
  --muted-accent: var(--graphical-fg);
}
strong > input:disabled::file-selector-button {
  /* c.f. strong > button:disabled */
}


input:not([type]),
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
	padding: calc(var(--rhythm, 1rlh) / 4);
	vertical-align: top;

	font-size: 1rem;
	line-height: inherit;
	font-family: var(--main-font);

	background: var(--bg);
	color: var(--fg);
	border: var(--interactive-border-width) var(--interactive-border-style) var(--graphical-fg);
	border-radius: var(--interactive-border-radius);

	vertical-align: top;

	&:focus-visible {
		border: var(--interactive-border-width) var(--interactive-border-style) var(--accent);
	}

	&::placeholder {
		color: var(--muted-fg);
		opacity: 1;
		text-align: end;
	}
}

input[type="range"] {
	width: 100%;
	padding: calc(var(--gap) / 4);
}

input[type="color"] {
	padding: 0;
	margin: 0;
	height: calc(1.5 * var(--rhythm, 1rlh));

	border: none;
	background: none;
}

input[type="file"] {
	padding: calc(var(--gap) / 4) 0;
	font: inherit;
	line-height: calc(var(--rhythm, 1rlh) / 2);
	&::file-selector-button {
		margin-block: .1em 0;
		margin-inline-end: 1ch;
	}
}

select {
	background: var(--bg);
	color: var(--fg);

	&[multiple] {
		vertical-align: top;
	}

	&:not([multiple]) {
		/* UAs force `line-height: normal` instead of `inherit` */
		height: calc(
			2 * var(--interactive-border-width)  /* Top and bottom borders */
			+ 3/2 * var(--rhythm, 1lh)           /* Plus line height and padding-block */
		);
	}

	optgroup::before {
		color: var(--muted-fg);
		font-style: normal;
	}

	& option {
		background: inherit;
		color: inherit;
		border: inherit;

		&:hover {
			/* This currently only applies to select[multiple] */
			background: var(--accent);
			color: var(--bg);
		}
	}
}

meter, progress {
  --border-width: var(--interactive-border-width);
  --border-style: var(--interactive-border-style);
  --border-radius: var(--tab-border-radius);

  @supports (
    selector(::-moz-meter-bar) or
    selector(::-webkit-meter-bar) or
    selector(::-moz-progress-bar) or
    selector(::-webkit-progress-bar)
  ) {
    appearance: none;

  	box-sizing: border-box;
    display: inline-block;
    position: relative;

    background: var(--box-bg);
    border: var(--border-width) var(--border-style) var(--graphical-fg);
    border-radius: var(--border-radius);

    overflow: clip;
    block-size: 1em;
    inline-size: unset;
    min-inline-size: 5em;    /* cf: -webkit UA */
    vertical-align: -0.2em;  /* cf: -moz and -webkit UA */

    transition: all .1s ease-in-out;
  }
}

meter {
  @supports selector(::-webkit-meter-bar) {
    &::-webkit-meter-inner-element {
      /* Wrapper element */
      grid-template-rows: unset;
    }

    &::-webkit-meter-bar {
      /* Outer bar */
      background: var(--box-bg);
      border-radius: 0;
    }

    &::-webkit-meter-even-less-good-value,
    &::-webkit-meter-suboptimum-value,
    &::-webkit-meter-optimum-value {
      /* Inner bar */
      background: var(--accent);
      border-radius: 0;
    }

    /* Partial colorway support */
    background: var(--plain-bg);
    border-color: var(--interactive-bg);
    &::-webkit-meter-optimum-value {
      --accent: var(--ok-fg);
    }
    &::-webkit-meter-suboptimum-value {
      --accent: var(--warn-fg);
    }
    &::-webkit-meter-even-less-good-value {
      --accent: var(--bad-fg);
    }
  }
  @supports selector(::-moz-meter-bar) {
    /* Pseudo-classes allow us to fully implement colorways */
    background: var(--box-bg);
    border-color: var(--graphical-fg);

    &::-moz-meter-bar {
      /* Inner bar */
      background: var(--accent);
      border-radius: 0;
    }
    &:-moz-meter-optimum {
      --box-bg: var(--ok-bg);
      --accent: var(--ok-fg);
      --graphical-fg: var(--ok-graphical-fg);
    }
    &:-moz-meter-sub-optimum {
      --box-bg: var(--warn-bg);
      --accent: var(--warn-fg);
      --graphical-fg: var(--warn-graphical-fg);
    }
    &:-moz-meter-sub-sub-optimum {
      --box-bg: var(--bad-bg);
      --accent: var(--bad-fg);
      --graphical-fg: var(--bad-graphical-fg);
    }
  }
}

progress {
  @supports selector(::-moz-progress-bar) {
    &::-moz-progress-bar {
      /* Inner bar */
      background: var(--accent);
      border-radius: 0;
      transition: all .1s ease-in-out;
    }
  }
  @supports selector(::-webkit-progress-bar) {
    &::-webkit-progress-bar {
      /* Outer bar */
      background: var(--box-bg);
      border-radius: 0;
    }
    &::-webkit-progress-value {
      /* Inner bar */
      background: var(--accent);
      border-radius: 0;
    }
  }
  &:not([value]) {
    /* Indeterminate state */
    --track-bg-color: linear-gradient(to right,
      var(--box-bg) 45%,
      var(--accent) 0%,
      var(--accent) 55%,
      var(--box-bg) 0%
    );
    --track-size: 225% 100%;
    --track-bg-position: right;
    --track-animation: progress-loading 4s infinite ease-in-out;
    @media (prefers-reduced-motion) {
      --track-bg-position: center;
      --track-animation: none;
    }

    @supports selector(progress::after) {
      /* Chromium only */
      &::after {
        content: "";
        inset: 0;
        position: absolute;
        background: var(--track-bg-color);
        background-size: var(--track-size);
        background-position: var(--track-bg-position);
        animation: var(--track-animation);
      }
    }
    @supports selector(::-webkit-progress-bar) {
      &::-webkit-progress-bar {
        background: var(--track-bg-color);
        background-size: var(--track-size);
        background-position: var(--track-bg-position);
        animation: var(--track-animation);
      }
    }
    @supports selector(::-moz-progress-bar) {
      &::-moz-progress-bar {
        background: var(--track-bg-color);
        background-size: var(--track-size);
        background-position: var(--track-bg-position);
        animation: var(--track-animation);
      }
    }
  }
}
@keyframes progress-loading {
  50% { background-position: left; }
}

label[for] {
	display: block;
	padding-block: calc(var(--gap) / 4);
}

fieldset {
	position: relative;

    padding: var(--gap);
	margin: var(--gap) 0;
	width: 100%;
	border-radius: var(--border-radius);

	& > legend + * { margin-block-start: 0 }

  border-block-start: var(--border-block-start-width) var(--border-block-start-style) var(--graphical-fg);
  border-block-end: var(--border-block-end-width) var(--border-block-end-style) var(--graphical-fg);
  border-inline-start: var(--border-inline-start-width) var(--border-inline-start-style) var(--graphical-fg);
  border-inline-end: var(--border-inline-end-width) var(--border-inline-end-style) var(--graphical-fg);

}
/***
 4.11 Interactive elements
 https://html.spec.whatwg.org/multipage/interactive-elements.html#interactive-elements
 ***/

details:not(specificity-hack) {
    /* SEE components/box.css */

	padding-block-start: 0;
	&:not([open]) { padding-block-end: 0; }
}

summary {
	margin: calc(0px - var(--gap));
	margin-top: calc(0px - var(--gap));
	margin-bottom: 0;
	padding-inline: var(--gap);

	font-family: var(--secondary-font);
	font-weight: bold;

	cursor: pointer;

	&:focus-visible, &:active {
		filter: brightness(.8);
		outline: none;
	}
}

@supports selector(::details-content) {
  details:target::details-content { content-visibility: visible }
}

dialog {
    /* SEE components/box.css */

    inset-inline: 0;

	block-size: fit-content;
    inline-size: fit-content;

	margin: auto !important;

    background-color: var(--bg);
    color: var(--fg);
	border-color: var(--fg);
}

dialog:is([open], [popover])::backdrop {
	display: block;
	background: black;
	opacity: .4;
	animation: bg 2s;
}

@keyframes bg {
	from { background: transparent; }
}

dialog:not([popover], [open]),
[popover]:not(:popover-open) {
    display: none;
}
