/* =============================================================================
GLOBAL CSS
============================================================================= */

/* @FONT-FACE DECLARATIONS
   ======================= */
/* Self-host fonts for maximum performance in deployment */

/* CSS RESET
   ========= */
/* Remove margins and padding */
body,
h1,
h2,
h3,
h4,
p,
address,
figure,
blockquote,
ul,
ol,
dl,
dd,
button {
  margin: 0;
  margin-block: 0;
  margin-inline: 0;
  padding: 0;
  padding-inline: 0;
  padding-block: 0;
}

/* Remove list styles when role is defined */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Prevent font size inflation */
html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

/* Use native kerning tables and common ligatures */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Inherit fonts for inputs and butttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make images responsive */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Remove animations and transitions for people who prefer reduced motion */
@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;
  }
}

/* CUSTOM PROPERTIES
   ================= */
:root {
  /* BOX MODEL */
  /* Margin and padding values */
  --space-s: clamp(0.3125rem, 0.25rem + 0.3125vw, 0.625rem);
  --space-base: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  --space-m: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
  --space-l: clamp(1.125rem, 0.9rem + 1.125vw, 2.25rem);
  --space-xl: clamp(1.6875rem, 1.35rem + 1.6875vw, 3.375rem);
  --space-xxl: clamp(2.5rem, 2rem + 2.5vw, 5rem);

  --space-inline-base: clamp(1rem, 5vw, 6rem);

  /* Safe area insets */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  /* TYPOGRAPHY */
  /* Font families */
  --ff-heads:
    itc-avant-garde-gothic-pro, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --ff-body: freight-text-pro, georgia, garamond, serif;

  /* Font sizes - viewport-based */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --fs-s: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --fs-base: clamp(1.125rem, 1.075rem + 0.25vw, 1.375rem);
  --fs-m: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
  --fs-l: clamp(1.25rem, 1rem + 1.25vw, 2.125rem);
  --fs-xl: clamp(1.375rem, 1rem + 1.875vw, 2.625rem);
  --fs-xxl: clamp(1.625rem, 1rem + 2.5vw, 3.375rem);
  --fs-display: clamp(1.75rem, 1rem + 3.75vw, 5.5rem);

  /* Available font weights */
  --fw-book: 300; /* Avant Garde */
  --fw-regular: 400; /* Freight */
  --fw-medium: 500; /* all */
  --fw-demi: 600; /* all */
  --fw-bold: 700; /* all */
  /* --fw-extra-light: 100; */
  /* --fw-light: 200; */
  /* --fw-extra-bold: 800; */
  /* --fw-black: 900; */

  /* Line heights */
  --lh-heads: 1.1;
  --lh-body: 1.33;
  --lh-l: 1.6;

  /* Line lengths */
  --ll-p-min: 34ch;
  --ll-p-base: 49ch;
  --ll-p-max: 64ch;

  /* COLOR */
  /* darks - WCAG 2.0 AA on white */
  --color-primary: #d8067a;
  --color-analog: #9937ad;
  --color-comp-split: #0c7baa;
  --color-dark: #031f2b;

  /* lights - WCAG 2.0 AA on black */
  --color-primary-tint: #f2acd3;
  --color-analog-tint: #f9f4fb;
  --color-comp: #30bf37;
  --color-comp-split-2: #2bc7c7;
  --color-light: #f3fcfc;

  /* client colors */
  --color-sde: #002fa7;
  --color-swff-steve: #0f1c37;
  --color-swff-wicked: #b74a3a;
  --color-swff-vermiglio: #123c49;
  --color-swff-intregalde: #0e2a5e;
  --color-swff-time: #d6cd02;
}

/* DESIGN TOKENS
   ============= */
.fs-xs {
  font-size: var(--fs-xs);
}

.fs-base {
  font-size: var(--fs-base);
}

.fs-medium {
  font-size: var(--fw-medium);
}

.fs-xxl {
  font-size: var(--fs-xxl);
}

.fw-demi {
  font-weight: var(--fw-demi);
}

.ls-03 {
  letter-spacing: 0.03em;
}

.color-primary {
  color: var(--color-primary);
}

.color-analog {
  color: var(--color-analog);
}

.color-dark {
  color: var(--color-dark);
}

.color-comp-split {
  color: var(--color-comp-split);
}

.color-dark {
  color: var(--color-dark);
}

.color-primary-tint {
  color: var(--color-primary-tint);
}

.color-comp {
  color: var(--color-comp);
}

.color-comp-split-2 {
  color: var(--color-comp-split-2);
}

.color-light {
  color: var(--color-light);
}

.background-analog-tint {
  background: var(--color-analog-tint);
}

.background-light {
  background: var(--color-light);
}

/* ELEMENTS
   ======== */

html {
  scroll-behavior: smooth;
}

body {
  max-width: 1920px;
  margin-inline: auto;
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-dark);
  background: white;
}

@media (width <= 48rem) {
  body {
    --flow-space: var(--space-l);
    line-height: 1.6;
  }
}

main:focus {
  outline: none;
}

p {
  max-width: var(--ll-p-max);
  text-wrap: pretty;
}

h4,
h3,
h2,
h1 {
  font-family: var(--ff-heads);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heads);
  text-wrap: balance;
}

h4 {
  font-size: var(--fs-m);
}

h3 {
  font-size: var(--fs-l);
}

h2 {
  font-size: var(--fs-xl);
}

h1 {
  font-size: var(--fs-xxl);
}

a {
  color: var(--color-comp-split);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.1875em;
  text-decoration-skip-ink: auto;
}

a:visited {
  color: var(--color-analog);
}

a:focus-visible {
  border-radius: 0.2em;
  outline: 2px solid currentColor;
  outline-offset: 0.2em;
  color: var(--color-primary);
}

a:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  a {
    transition:
      text-decoration-color 200ms ease,
      color 200ms ease;
  }

  a:hover {
    color: var(--color-primary);
  }
}

figcaption {
  padding-block-start: var(--space-base);
  font-family: var(--ff-heads);
  font-size: var(--fs-s);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
}

strong {
  font-weight: var(--fw-bold);
}

code {
  font-size: 0.9em;
}

/* =============================================================================
COMPOSITION
============================================================================= */

/* FLOW SPACING (similar to Stack layout below) */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-base));
}

/* REGION SPACING */
.region {
  margin-block: var(--region-space, var(--space-xl));
}

/* STACK LAYOUT (similar to Flow spacing above) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-base));
}

/* SWITCHER LAYOUT */
.switcher {
  --switcher-threshold: 60rem;
  --switcher-gap: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap);
  justify-content: center;
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
}

/* =============================================================================
UTILITIES
============================================================================= */
.display-block {
  display: block;
}

.display-inline-block {
  display: inline-block;
}

.wrapper {
  --wrapper-padding: var(--space-inline-base);
  max-width: var(--ll-p-max);
  margin-inline: auto;
  padding-inline-start: calc(var(--wrapper-padding) + var(--sal));
  padding-inline-end: calc(var(--wrapper-padding) + var(--sar));
}

.margin-top {
  margin-block-start: var(--space-xxl);
}

.margin-top-l {
  margin-block-start: var(--space-l);
}

.pad-block-end {
  padding-block-end: var(--space-base);
}

.center {
  margin-inline: auto;
}

.caption {
  font-size: var(--fs-s);
  font-style: italic;
}

.font-small {
  font-size: var(--fs-s);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.keep-together {
  white-space: nowrap;
}

.balance {
  text-wrap: balance;
}

.pretty {
  text-wrap: pretty;
}

.img-border {
  --img-border-color: var(--color-dark);
  box-sizing: border-box;
  border: 8px double var(--img-border-color);
  border-radius: 32px;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =============================================================================
GLOBAL BLOCKS
============================================================================= */

/* BUTTON BLOCK
   ============ */
.button {
  display: inline-block;
  padding: 0.5em 1em;
  border-width: 3px;
  border-style: solid;
  border-color: var(--color-comp-split);
  border-radius: 1em;
  font-family: var(--ff-heads);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  color: white;
  background: var(--color-comp-split);
  cursor: pointer;
}

.button:visited {
  color: white;
}

@media (hover: hover) {
  .button:hover {
    border-color: var(--color-primary);
    color: white;
    background: var(--color-primary);
    transition: none;
  }
}

.button:focus-visible {
  border-color: var(--color-primary);
  border-radius: 1em;
  outline-width: 3px;
  outline-style: solid;
  outline-color: var(--color-primary);
  outline-offset: 6px;
  color: var(--color-light);
  background: var(--color-primary);
  transition: none;
}

.button:active {
  transform: scale(0.95);
  transition: none;
}

/* MODAL BLOCK
   =========== */
dialog[data-modal="base"] {
  --flow-space: var(--space-l);
  max-width: 100%;
  inset: var(--sat) max(var(--space-inline-base), var(--sar)) var(--sab)
    max(var(--space-inline-base), var(--sal));
  padding-block: var(--space-l);
  padding-inline: var(--space-xl);
  border: 8px double var(--color-primary);
  border-radius: 1em;
  outline: none;
}

dialog[data-modal="base"]::backdrop {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
}

dialog[data-modal="base"] h2 {
  font-size: var(--fs-l);
  text-align: left;
  color: var(--color-primary);
}

/* TEASER BLOCK
   ============ */
.teaser {
  margin-inline: var(--space-inline-base);
}

.teaser h2 {
  padding-block-end: var(--space-m);
}

.teaser-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  align-items: center;
  max-width: 30rem;
  text-align: center;
}

.teaser-card p {
  text-align: center;
  text-wrap: balance;
}

.teaser-card a {
  display: block;
  max-width: 100%;
}

.teaser-card > :first-child {
  margin-block-end: var(--space-m);
}

.teaser-card > :nth-child(3) {
  margin-block-end: var(--space-m);
}

.teaser-card > :nth-child(4) {
  margin-block-start: auto;
}

/* SITE HEAD BLOCK
   =============== */
.site-head {
  margin-bottom: var(--space-m);
  padding-block-start: calc(var(--space-base) + var(--sat));
  padding-block-end: var(--space-base);
  border-top: 2px solid transparent;
  border-bottom: 2px solid var(--color-primary);
  overflow-x: clip;
  color: var(--color-dark);
}

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  gap: 0 var(--space-xxl);
  padding-inline-start: var(--sal);
  padding-inline-end: var(--sar);
}

.site-head__brand img {
  font-size: var(--fs-xxl);
  width: 2.25em;
}

/* SITE NAV BLOCK
   ============== */
/* Burger menu trigger (hamburger bars SVG) hidden */
.burger-menu__trigger {
  display: none;
}

/* Primary nav links lay out naturally in a single row */
burger-menu nav ul {
  display: flex;
  gap: var(--space-m);
}

/* SITE FOOTER BLOCK
   ================= */
.site-foot {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-base);
  padding-block-end: calc(var(--space-l) + var(--sab));
  padding-inline-start: var(--sal);
  padding-inline-end: var(--sar);
  overflow-x: clip;
  border-top: 2px solid var(--color-primary);
}

.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: var(--space-l);
  column-gap: var(--space-xxl);
  padding-inline: var(--space-inline-base);
}

.site-foot address {
  --flow-space: var(--space-s);
}

/* SITE ADDRESS BLOCK
   ================== */
.contact :is(p, a) {
  font-family: var(--ff-heads);
  font-size: var(--fs-base);
  font-style: normal;
  text-align: center;
}

@media (pointer: coarse) {
  address.contact.stack {
    --stack-gap: var(--space-l);
  }
}

/* =============================================================================
PAGE-LEVEL BLOCKS
============================================================================= */

/* HERO BLOCKS
   ============ */
/* HERO BLOCK - MAIN PAGE */
.hero-main {
  background: var(--color-light);
}

.hero-main__inner {
  display: grid;
  padding-inline-start: var(--sal);
  padding-inline-end: var(--sar);
}

.hero-main__inner picture {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.hero-main__inner h1 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  font-variant-ligatures: discretionary-ligatures;
  font-feature-settings: "dlig" 1;
  color: white;
}

.hero-main__inner h1 > span {
  align-self: flex-end;
  justify-self: flex-end;
  padding-block-end: 6vw;
  padding-inline-end: 15vw;
  text-shadow: 0px 2px 4px rgb(0 0 0 / 0.7);
}

@media (width >= 648px) {
  .hero-main__inner h1 > span {
    padding-block-end: 4.5vw;
  }
}

@media (width >= 1200px) {
  .hero-main__inner h1 > span {
    padding-block-end: 3vw;
  }
}

/* GALLERY BLOCK ======== */
.gallery {
  container-type: inline-size;
  container-name: gallery;
}
@container gallery (min-width: 10rem) {
  .gallery.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

*/ /* LIGHTBOX MODAL ==============
.lightbox {
  max-width: 95vw;
  max-height: 95vh;
  margin: auto;
  padding: 0;
  border: none;
  overflow: visible;
  background: transparent;
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.85);
  backdrop-filter: blur(3px);
}

.lightbox__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-xxl);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.lightbox__img {
  max-width: 85vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 4px 20px rgb(0 0 0 / 0.5);
}

.lightbox__caption {
  color: white;
  margin-top: var(--space-base);
  font-family: var(--ff-body);
  font-size: var(--fs-m);
  text-align: center;
  text-wrap: balance;
}

.lightbox__nav,
.lightbox__close {
  z-index: 10;
  padding-block: var(--space-base);
  padding-inline: var(--space-m);
  font-size: var(--fs-m);
  border: none;
  border-radius: 4px;
  color: white;
  background: rgb(0 0 0 / 0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 200ms ease;
}

.lightbox__close {
  position: absolute;
  top: -4rem;
  right: 0.5rem;
}

.lightbox__nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}

.lightbox__nav--prev {
  left: 0.5rem;
}

.lightbox__nav--next {
  right: 0.5rem;
}

/* =============================================================================
EXCEPTIONS
https://cube.fyi/exception.html#why-data-attributes
DO:
1. Provide a concise variation to a block
2. Use data attributes
DON'T:
1. Variate a block to the point where it isn't recognizable anymore. Create a new block instead
2. Use CSS classes
============================================================================= */
/* ANCHORS
   ======= */

/* IMAGE LINK */
a[data-link="img"]:focus-visible {
  outline: 3px solid currentColor;
  border-radius: 0.375em;
  outline-offset: 0.375em;
  color: var(--color-primary);
  transition: color 200ms ease;
}

a[data-link="img"]:active {
  transform: none;
}

/* NAV LINKS */
a[data-link="nav"] {
  position: relative;
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  font-family: var(--ff-heads);
  letter-spacing: 0.05em;
  text-decoration: none;
  transition:
    text-decoration-color 200ms ease,
    color 200ms ease;
}

a[data-link="nav"]:visited {
  color: var(--color-comp-split);
}

@media (pointer: coarse) {
  a[data-link="nav"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    transform: translate(-50%, -50%);
  }
}

/* Nav link for current page */
a[aria-current="page"] {
  font-weight: var(--fw-demi);
  letter-spacing: 0.08em;
  color: var(--color-dark);
  pointer-events: none;
  cursor: default;
}

/* CONTACT LINKS */
a[data-link="contact"] {
  position: relative;
  display: inline-block;
  min-width: 24px;
  min-height: 24px;
  text-decoration: none;
  transition: color 200ms ease;
}

@media (pointer: coarse) {
  a[data-link="contact"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    transform: translate(-50%, -50%);
  }
}

/* INLINE MODAL LINK */
a[data-link="inline-modal"] {
  color: inherit;
  font-weight: var(--fw-demi);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
  cursor: pointer;
}

a[data-link="inline-modal"]::after {
  content: " ⓘ";
  font-family: system-ui, sans-serif;
  font-size: 0.85em;
  font-weight: normal;
  color: var(--color-primary);
  vertical-align: super;
}

a[data-link="inline-modal"]:hover,
a[data-link="inline-modal"]:focus-visible {
  color: var(--color-primary);
}

/* Suppress default touch/mouse focus ring for modal triggers */
[data-modal-trigger]:focus:not(:focus-visible) {
  outline: none;
}

/* BUTTONS
   ============= */

/* SKIP-TO-CONTENT */
.button[data-button-variant="skip-to-content"] {
  position: absolute;
  top: calc(var(--space-m) + var(--sat));
  left: calc(var(--space-m) + var(--sal));
  z-index: 9999;
}

.button[data-button-variant="skip-to-content"]:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SITE NAV BLOCK
   ============== */
/* JavaScript DOM render
  <burger-menu>
    <button class="burger-menu__trigger>
      <svg class="burger-menu__svg></svg>
    </button>
    <div class="burger-menu__panel>
      <nav class="nav">...</nav>
    </div>
  <burger-menu>
*/

/* Burger menu button trigger */
burger-menu[enabled="true"] .burger-menu__trigger {
  z-index: 20;
  display: inline-flex;
  position: relative;
  min-width: 3rem;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

/* Burger menu button trigger - SVG icon */
.burger-menu__svg rect {
  fill: var(--color-dark);
  transition:
    transform 250ms ease-in-out,
    opacity 250ms ease-in-out;
  transform-box: fill-box;
  transform-origin: center;
}

/* Burger menu panel */
burger-menu[enabled="true"] .burger-menu__panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: max-content;
  padding-block-start: var(--sat);
  padding-inline: var(--sal) var(--sar);
  overflow-y: auto;
  background: var(--color-primary-tint);
}

/* Primary nav links */
burger-menu[enabled="true"] nav ul {
  flex-direction: column;
  align-items: center;
  padding-top: 6rem;
  padding-bottom: 4rem;
}

burger-menu[enabled="true"] nav li {
  font-size: 1.5rem;
}

/* Closed state animations */
burger-menu[enabled="true"][status="closed"] .burger-menu__panel {
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

burger-menu[enabled="true"][status="closed"] .burger-menu__panel > * {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

/* Open state animations */
burger-menu[enabled="true"][status="open"] .burger-menu__panel {
  visibility: visible;
  opacity: 1;
  transition: opacity 300ms ease;
}

burger-menu[enabled="true"][status="open"] .burger-menu__panel > * {
  opacity: 1;
  transition: opacity 350ms ease-in-out 150ms;
}

/* Morph SVG hamburger icon into X menu close icon */
burger-menu[enabled="true"][status="open"] .line-top {
  transform: translateY(30px) rotate(45deg);
}

burger-menu[enabled="true"][status="open"] .line-mid {
  opacity: 0;
}

burger-menu[enabled="true"][status="open"] .line-bot {
  transform: translateY(-30px) rotate(-45deg);
}

/* Resizing utility to prevent structural flash during window scaling */
burger-menu[resizing="true"],
burger-menu[resizing="true"] * {
  transition: none !important;
}

/* LIGHTBOX MODAL
   ============== */
/* Interactive buttons */
.lightbox__nav:hover,
.lightbox__close:hover {
  background: rgb(255 255 255 / 0.3);
}

/* =============================================================================
NOTES
============================================================================= */

/* Logical ordering of CSS properties - "outside-in"

1. Positioning and layout (outer flow)
  a. position (top, right, bottom, left, z-index)
  b. display
  c. Flexbox/Grid parent properties
  d. float and clear

2. Box model and dimensions (physical geometry)
  a. width, height, min-width, max-height
  b. margin, padding
  c. border

3. Box clipping and overflow (boundaries)
  a. overflow
  b. clip-path and clip (deprecated, fallback for older browsers)
  c. visibility, opacity

4. Typography (inner content)
  a. font-family, font-size, font-weight, font-style
  b. letter-spacing, line-height
  c. text-align, text-transform, white-space

5. Color, background, and decorations
  a. color
  b. background
  c. text decorations
  d. other decorations
*/