/* wedops — the brand, as CSS. one sheet, two papers. generated from mockups/build-sections.py */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&family=Work+Sans:wght@500;800&display=swap');

:root{
  /* paper mode: off-white stock, blue + orange ink */
  --paper:#f3efe4;
  --ink:#1a1a1a;        /* body text: the "black" ink, actually near-black */
  --ink-1:#0078bf;      /* first ink: wordmark, primary button, structure rules */
  --ink-2:#ff6c2f;      /* second ink: stickers, section heads, the overprint offset */
  --on-ink:#ffffff;     /* text knocked out of an ink fill */
  --mute:#6e6a60;       /* meta that should recede */
  --overprint:multiply; /* how two inks meet */
  --grain:#000;         /* colour of the paper grain dots */
  /* structure */
  --rule:4px; --dot:3px; --tilt:-2deg; --tilt-2:8deg; --offset:4px;
  /* type */
  --font-display:'Rubik Mono One','Courier New',monospace;
  --font-text:'Work Sans',system-ui,sans-serif;
  /* motion */
  --slap:cubic-bezier(.2,.9,.3,1.2); --t:200ms;
}
@media (prefers-color-scheme: dark){ html:not(.light){--paper:#0b2a45;--ink:#f3efe4;--ink-1:#ff6c2f;--ink-2:#f3efe4;--on-ink:#0b2a45;--mute:#8fa3b8;--overprint:screen;--grain:#fff} }
html.dark{
  /* blue paper mode: the blue becomes the stock. orange + cream ink. */
  --paper:#0b2a45; --ink:#f3efe4; --ink-1:#ff6c2f; --ink-2:#f3efe4; --on-ink:#0b2a45; --mute:#8fa3b8; --overprint:screen; --grain:#fff;
}

html{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--font-text);font-weight:500;line-height:1.45;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.10;background-image:radial-gradient(var(--grain) .6px,transparent .7px);background-size:3px 3px;mix-blend-mode:var(--overprint);z-index:1}
a{color:inherit;text-decoration:none} h1,h2,h3,p{margin:0} ul{list-style:none;margin:0;padding:0}

/* type roles */
.display{font-family:var(--font-display);text-transform:uppercase;line-height:.95}
.label{font-family:var(--font-text);font-weight:800;text-transform:uppercase;font-size:.8rem;letter-spacing:.01em}
.body{font-family:var(--font-text);font-weight:500;font-size:1.05rem;line-height:1.5;max-width:34rem}
.mute{color:var(--mute)}
.h1{font-size:clamp(3.5rem,11vw,8.5rem)} .h2{font-size:clamp(2rem,6vw,4rem)} .h3{font-size:1.25rem}
.wordmark{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;color:var(--ink-1)}

/* overprint: the display line printed twice, second ink offset */
.over{position:relative;color:var(--ink-1);mix-blend-mode:var(--overprint)}
.over::after{content:attr(data-text);position:absolute;left:.06em;top:.06em;color:var(--ink-2);z-index:-1;mix-blend-mode:var(--overprint)}

/* stickers: labels that were slapped on */
.sticker{display:inline-block;background:var(--ink-2);color:var(--on-ink);font-weight:800;text-transform:uppercase;font-size:.8rem;padding:.25rem .6rem;transform:rotate(var(--tilt));mix-blend-mode:var(--overprint)}
.sticker.alt{background:var(--ink-1)}
.round{display:inline-flex;align-items:center;justify-content:center;text-align:center;width:9rem;height:9rem;border-radius:50%;background:var(--ink-2);color:var(--on-ink);font-family:var(--font-display);font-size:1rem;text-transform:uppercase;line-height:1.1;padding:1rem;transform:rotate(var(--tilt-2));mix-blend-mode:var(--overprint)}

/* rules */
.rule{border-top:var(--rule) solid var(--ink-1)} .rule-2{border-top:var(--rule) solid var(--ink-2)} .dotted{border-top:var(--dot) dotted var(--ink-1)}

/* actions */
.btn{display:inline-block;background:var(--ink-1);color:var(--on-ink);font-weight:800;text-transform:uppercase;font-size:.9rem;padding:.9rem 1.5rem;transform:rotate(-1deg);box-shadow:var(--offset) var(--offset) 0 var(--ink-2);transition:transform var(--t) var(--slap),box-shadow var(--t) var(--slap)}
.btn:hover{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:calc(var(--offset) + 2px) calc(var(--offset) + 2px) 0 var(--ink-2)}
.btn:active{transform:rotate(-1deg) translate(2px,2px);box-shadow:0 0 0 var(--ink-2)}
.link{font-weight:800;text-transform:uppercase;font-size:.9rem;border-bottom:3px solid var(--ink-2);padding-bottom:.1rem} .link:hover{border-color:var(--ink-1)}

/* numbered list: the set list */
.setlist{counter-reset:n} .setlist li{counter-increment:n;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:var(--dot) dotted var(--ink-1);font-weight:800;text-transform:uppercase;font-size:1.25rem}
.setlist li::before{content:counter(n,decimal-leading-zero);font-family:var(--font-display);color:var(--ink-2)} .setlist li span{flex:1} .setlist small{font-size:.75rem;color:var(--ink-1)} .setlist .hot small{color:var(--ink-2)}

/* forms: ink boxes on paper. no radius, no focus glow, a fat rule when active. */
.form label{display:block;font-weight:800;text-transform:uppercase;font-size:.8rem;margin-top:1rem}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:.4rem;padding:.75rem .9rem;font:500 1rem var(--font-text);color:var(--ink);background:transparent;border:var(--dot) solid var(--ink-1);border-radius:0;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-1) 50%),linear-gradient(135deg,var(--ink-1) 50%,transparent 50%);background-position:calc(100% - 1.2rem) 55%,calc(100% - .8rem) 55%;background-size:.4rem .4rem,.4rem .4rem;background-repeat:no-repeat;padding-right:2.5rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ink-2);box-shadow:var(--offset) var(--offset) 0 var(--ink-2)}
.form textarea{resize:vertical;min-height:7rem}
.form ::placeholder{color:var(--mute)}
.form button.btn{font-family:var(--font-text);border:0;cursor:pointer}
.form button.btn:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none}

/* page furniture */
.wrap{max-width:70rem;margin:0 auto;padding:0 2rem}
.mast{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;border-bottom:var(--rule) solid var(--ink-1)}
.mast nav{display:flex;gap:1.5rem} .mast nav a{font-weight:800;text-transform:uppercase;font-size:.8rem;white-space:nowrap} .mast nav a.cta{color:var(--ink-2)}
@media(max-width:48rem){.wrap{padding:0 1.25rem} .mast{flex-direction:column;align-items:flex-start;gap:.75rem;padding:1rem 0} .mast nav{gap:1.25rem} .wordmark{font-size:.9rem}}
section{padding:clamp(3rem,7vw,5rem) 0}
.foot{display:flex;justify-content:space-between;padding:1.5rem 0;border-top:var(--rule) solid var(--ink-1);font-size:.8rem;font-weight:800;text-transform:uppercase}