/* ============================
   Base, variables, fonts, body
   ============================ */

/* Local masthead fonts (place files in /assets/fonts) */
@font-face {
  font-family:'HarbourDecor';
  src:url('/assets/fonts/Harbour-Decor.woff2') format('woff2'),
      url('/assets/fonts/Harbour-Decor.woff') format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face {
  font-family:'HarbourRegular';
  src:url('/assets/fonts/Harbour-Regular.woff2') format('woff2'),
      url('/assets/fonts/Harbour-Regular.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

/* Variables */
:root{
  --paper:#fbfaf5;
  --ink:#111;
  --rule:#ccc7b8;
  --accent:#d9b14e;
  --max:1200px;
  --gutter:22px;
}

/* Body + typography */
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font:16px/1.6 'Lora',serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(ellipse at center, rgba(0,0,0,.03) 0%, rgba(0,0,0,0) 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 .02 .04 .02 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size:100% 100%,140px 140px;
  background-blend-mode:multiply,normal;
}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
a:hover{color:var(--accent)}