/* wecampbell.org: minimal, gray and white.
   Display: Archivo Black (the W.E.CAMPBELL wordmark face on the old site).
   Text:    Space Grotesk (the old site's body and nav face). */
:root{
  --white:#ffffff;
  --paper:#f4f4f4;
  --line:#dcdcdc;
  --gray:#bfbfbf;          /* the old site's gray, kept */
  --mid:#7a7a7a;
  --ink:#212020;           /* the old site's text color, kept */
  --display:"Archivo Black", "Arial Black", sans-serif;
  --text:"Space Grotesk", system-ui, sans-serif;
  --wrap:1100px;
  --read:680px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font:400 18px/1.6 var(--text);}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main{max-width:var(--wrap);margin:0 auto;padding:0 24px 96px}

/* header */
.site-head{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  max-width:none;padding:14px 24px;}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark img{width:40px;height:40px}
.mark span{font:400 20px/1 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.site-nav{display:flex;gap:28px}
.site-nav a{font-weight:600;font-size:16px;text-decoration:none;color:var(--mid);padding:4px 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink);border-color:var(--ink)}
.menu-toggle,.menu-btn{display:none}

/* home */
.hero{text-align:center;padding:72px 0 48px}
.hero-logo{width:220px;height:220px;margin:0 auto 32px}
.lede{font-size:22px;font-weight:600;max-width:var(--read);margin:0 auto;color:var(--ink)}
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.door{background:var(--white);padding:48px 28px;text-decoration:none;display:flex;flex-direction:column;gap:10px;min-height:200px;transition:background .15s}
.door:hover{background:var(--paper)}
.door-label{font:400 clamp(28px,4vw,44px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.door-sub{font-size:16px;color:var(--mid)}

/* page heads */
.page-head{padding:64px 0 32px;border-bottom:1px solid var(--line);margin-bottom:32px}
h1{font:400 clamp(40px,7vw,72px)/1 var(--display);text-transform:uppercase;letter-spacing:-.02em;margin:0 0 16px}
.page-head .lede{margin:0;color:var(--mid);font-weight:400}

/* lists */
.index-list{list-style:none;margin:0;padding:0}
.index-list li{display:flex;justify-content:space-between;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.index-list a{font-size:24px;font-weight:600;text-decoration:none}
.index-list a:hover{text-decoration:underline}
.index-list time{color:var(--mid);font-size:15px;white-space:nowrap}
.link-rows{list-style:none;padding:0;margin:0}
.link-rows a{display:block;padding:20px 0;border-bottom:1px solid var(--line);font:400 32px/1 var(--display);text-transform:uppercase;text-decoration:none}
.link-rows a:hover{color:var(--mid)}

/* reading */
.piece{max-width:var(--read);margin:0 auto;padding-top:56px}
.crumb{margin:0 0 24px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.crumb a,.back a{color:var(--mid);text-decoration:none}
.piece h1{font-size:clamp(34px,6vw,56px)}
.meta{display:block;color:var(--mid);font-size:15px;margin-bottom:40px}
.piece figure{margin:0 0 40px}
.prose p{margin:0 0 1.2em}
.verse .body{white-space:pre-line;font-size:20px;line-height:1.7}
.back{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-weight:600}

/* merch */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{text-decoration:none;display:flex;flex-direction:column;gap:12px;font-weight:600}
.card .ph,.card img{aspect-ratio:1;background:var(--paper);border:1px solid var(--line)}

/* forms */
.signup{display:flex;gap:12px;max-width:520px}
.signup input{flex:1;font:inherit;padding:14px 16px;border:1px solid var(--gray);background:var(--white)}
.signup button,.btn{font:600 16px var(--text);text-transform:uppercase;padding:14px 24px;border:0;background:var(--ink);color:var(--white);text-decoration:none;display:inline-block}
.big{font-size:120px}

/* footer */
.site-foot{background:var(--paper);border-top:1px solid var(--line);padding:40px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mid);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.social{display:flex;gap:16px}
.social svg{width:22px;height:22px;fill:var(--mid)}
.social a:hover svg{fill:var(--ink)}

/* WORD-SLOTS. Visible only while <body class="draft">. Remove "draft" at launch. */
.slot:empty{display:none}
.draft .slot:empty{display:block;min-height:1.4em;border:1px dashed var(--gray);background:repeating-linear-gradient(45deg,transparent 0 8px,var(--paper) 8px 16px)}
.draft .slot:empty::before{content:attr(data-slot);font:600 12px/1.4 var(--text);text-transform:uppercase;letter-spacing:.06em;color:var(--mid);padding:2px 8px;display:block}
.draft span.slot:empty,.draft time.slot:empty{display:inline-block;min-width:8em}
.draft .slot.tall:empty{min-height:240px}
.draft .lede.slot:empty{margin:0 auto;max-width:var(--read)}

/* phone */
@media (max-width:820px){
  body{font-size:17px}
  main{padding:0 16px 72px}
  .site-head{padding:12px 16px}
  .menu-btn{display:flex;flex-direction:column;gap:6px;cursor:pointer;padding:8px}
  .menu-btn span{width:24px;height:2px;background:var(--ink)}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--white);border-bottom:1px solid var(--line)}
  .site-nav a{padding:16px;border-bottom:1px solid var(--line);font-size:18px}
  .menu-toggle:checked ~ .site-nav{display:flex}
  .doors,.grid{grid-template-columns:1fr 1fr}
  .door{padding:32px 18px;min-height:150px}
  .index-list li{flex-direction:column;gap:4px}
  .site-foot{padding:32px 16px}
}
@media (max-width:480px){.doors,.grid{grid-template-columns:1fr}.signup{flex-direction:column}}