/* Who's Legacy, base ground. Global resets and the all-serif defaults every
   surface inherits. No sans-serif fallbacks; placeholders are styled explicitly. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--weight-regular);
  letter-spacing:0;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:400;
  color:var(--text-primary);
  margin:0;
  letter-spacing:var(--tr-section);
  line-height:var(--lh-section);
}

p{margin:0 0 1em}

/* Editorial links, hairline crimson underline, full crimson on hover */
a{color:var(--crimson);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.16em;text-decoration-color:rgba(139,14,14,0.4);transition:color .18s ease,text-decoration-color .18s ease}
a:hover{color:var(--crimson-hover);text-decoration-color:var(--crimson-hover)}

/* Placeholders are styled, never the browser default grey */
::placeholder{color:var(--grey-secondary-paper);opacity:1;font-style:italic}
/* Form fields on crimson / ink grounds get a paper-tinted placeholder */
.wl-on-dark ::placeholder{color:rgba(244,246,252,0.58);opacity:1}

::selection{background:var(--crimson);color:var(--paper)}

img{max-width:100%;display:block}
hr{border:0;border-top:var(--hairline) solid var(--rule-on-light);margin:var(--space-6) 0}
strong,b{font-weight:var(--weight-bold)}

/* The label, connective tissue. Small, uppercase, widely letterspaced body serif. */
.wl-label{font-family:var(--font-body);font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--tr-label);text-transform:none;font-weight:var(--weight-medium);color:var(--text-brand)}