/*
Theme Name: Low Water Mark
Theme URI: https://lowwatermark.com
Author: The Low Water Mark
Author URI: https://lowwatermark.com
Description: A satirical Masonic broadsheet theme for The Low Water Mark. Aged-paper newspaper styling with masonic navy & gold and a Private Eye spot-red accent. Multi-lodge ready, with a free PDF issue archive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lowwatermark
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
  --paper:#f5efe1;          /* aged cream */
  --paper-2:#efe7d4;        /* slightly deeper panel */
  --ink:#1b1a17;            /* near-black ink */
  --ink-soft:#3d3a33;
  --rule:#c9bda0;           /* hairline rules */
  --navy:#10294a;           /* masonic navy */
  --navy-2:#0a1c34;
  --gold:#b6912f;           /* masonic gold */
  --gold-2:#d9b757;         /* bright gold accent */
  --red:#b1242b;            /* Private Eye spot red */
  --maxw:1180px;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --display: "Playfair Display", Georgia, serif;
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.6;
  /* subtle paper grain */
  background-image:
    radial-gradient(rgba(120,100,60,.04) 1px, transparent 1px);
  background-size:4px 4px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--red);text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.screen-reader-text{position:absolute;left:-9999px}

/* ==========================================================================
   Masthead
   ========================================================================== */
.site-topbar{
  background:var(--navy);
  color:#f3ecdb;
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.04em;
  border-bottom:3px solid var(--gold);
}
.site-topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;flex-wrap:wrap}
.site-topbar a{color:#f3ecdb}
.site-topbar a:hover{color:var(--gold-2);text-decoration:none}
.topbar-motto{font-style:italic;color:var(--gold-2)}

.masthead{
  text-align:center;
  padding:26px 20px 10px;
  border-bottom:1px solid var(--ink);
  position:relative;
}
.masthead .eyebrow{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:12px;
  color:var(--red);
  font-weight:700;
  margin:0 0 6px;
}
.masthead .title{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(40px,8vw,86px);
  line-height:.95;
  margin:0;
  letter-spacing:.01em;
  color:var(--ink);
}
.masthead .title a{color:inherit}
.masthead .title a:hover{color:var(--ink);text-decoration:none}
.masthead .tagline{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(15px,2.4vw,22px);
  margin:8px 0 2px;
  color:var(--ink-soft);
}
.masthead .dateline{
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--ink);
  border-bottom:3px double var(--ink);
  margin-top:12px;padding:6px 0;
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;
}
.masthead .dateline .star{color:var(--red)}

/* ==========================================================================
   Primary navigation
   ========================================================================== */
.site-nav{background:var(--paper-2);border-bottom:1px solid var(--ink)}
.site-nav .container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}
.site-nav li{position:relative}
.site-nav a{
  display:block;padding:12px 18px;
  font-family:var(--serif);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:13px;
  color:var(--ink);
}
.site-nav a:hover,.site-nav .current-menu-item>a{color:var(--red);text-decoration:none;background:rgba(16,41,74,.05)}
.site-nav ul ul{display:none;position:absolute;top:100%;left:0;background:var(--paper);border:1px solid var(--ink);min-width:220px;z-index:40;flex-direction:column}
.site-nav li:hover>ul{display:flex}
.site-nav ul ul a{border-bottom:1px solid var(--rule)}
.nav-toggle{display:none}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-main{padding:28px 0 40px}
.layout{display:grid;grid-template-columns:1fr 320px;gap:34px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

/* Section labels */
.section-label{
  font-family:var(--serif);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:13px;color:var(--red);
  border-bottom:2px solid var(--ink);padding-bottom:4px;margin:0 0 16px;
  display:flex;align-items:center;gap:8px;
}
.section-label::before,.section-label::after{content:"\25C8";color:var(--gold);font-size:11px}
.section-label::after{margin-left:auto}

/* ==========================================================================
   Front page
   ========================================================================== */
.lead-story{border-bottom:3px double var(--ink);padding-bottom:22px;margin-bottom:22px}
.lead-story .kicker{color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.lead-story h2{font-family:var(--display);font-weight:900;font-size:clamp(30px,5vw,52px);line-height:1.02;margin:.2em 0}
.lead-story h2 a{color:var(--ink)}
.lead-story .standfirst{font-size:20px;font-style:italic;color:var(--ink-soft);margin:.4em 0}

.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:640px){.story-grid{grid-template-columns:1fr}}
.story{border-top:1px solid var(--rule);padding-top:14px}
.story h3{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.1;margin:.1em 0 .3em}
.story h3 a{color:var(--ink)}
.story .meta{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.story .lodge-tag{color:var(--navy);font-weight:700}
.story-thumb{margin:0 0 10px;border:1px solid var(--ink)}
.dropcap:first-letter{font-family:var(--display);font-weight:900;font-size:3.2em;line-height:.72;float:left;padding:6px 8px 0 0;color:var(--navy)}

/* Columns for long articles (broadsheet feel) */
.article-body{font-size:18px}
.article-body p{margin:0 0 1em}
.article-body h2,.article-body h3{font-family:var(--display)}
.article-body blockquote{border-left:4px solid var(--gold);margin:1.2em 0;padding:.2em 1em;font-style:italic;color:var(--ink-soft);background:var(--paper-2)}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.sidebar .widget{background:var(--paper-2);border:1px solid var(--ink);padding:16px;margin-bottom:22px}
.sidebar .widget-title{font-family:var(--display);font-weight:900;font-size:20px;margin:0 0 10px;border-bottom:2px solid var(--red);padding-bottom:6px}
.sidebar ul{list-style:none;margin:0;padding:0}
.sidebar li{border-bottom:1px dotted var(--rule);padding:7px 0;font-size:16px}
.box-notice{border:3px double var(--ink);background:var(--paper);padding:16px;text-align:center;margin-bottom:22px}
.box-notice .tyler{font-family:var(--display);font-style:italic;color:var(--red);font-weight:700}

/* ==========================================================================
   PDF archive
   ========================================================================== */
.pdf-intro{border:3px double var(--ink);padding:18px 20px;margin-bottom:26px;background:var(--paper-2)}
.pdf-intro .free-flag{display:inline-block;background:var(--red);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;padding:3px 10px;margin-bottom:8px}
.issue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:26px}
.issue-card{border:1px solid var(--ink);background:var(--paper);display:flex;flex-direction:column}
.issue-card .cover{border-bottom:1px solid var(--ink);background:var(--navy);aspect-ratio:1/1.414;display:flex;align-items:center;justify-content:center;overflow:hidden}
.issue-card .cover img{width:100%;height:100%;object-fit:cover}
.issue-card .cover .placeholder{color:var(--gold-2);font-family:var(--display);text-align:center;padding:16px}
.issue-card .body{padding:14px;flex:1;display:flex;flex-direction:column}
.issue-card h3{font-family:var(--display);font-size:19px;margin:0 0 4px;line-height:1.1}
.issue-card .issue-date{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:10px}
.btn-download{margin-top:auto;display:inline-block;text-align:center;background:var(--navy);color:#f3ecdb;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:10px 12px;border:1px solid var(--navy-2)}
.btn-download:hover{background:var(--red);color:#fff;text-decoration:none}

/* ==========================================================================
   Contribute / forms
   ========================================================================== */
.contribute-box{border:3px double var(--ink);background:var(--paper-2);padding:22px}
.contribute-box label{display:block;font-weight:700;margin:14px 0 4px;font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.contribute-box input,.contribute-box textarea,.contribute-box select{width:100%;padding:10px;border:1px solid var(--ink);background:var(--paper);font-family:var(--serif);font-size:16px}
.contribute-box button{margin-top:18px;background:var(--red);color:#fff;border:none;padding:12px 22px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.contribute-box button:hover{background:var(--navy)}
.anon-note{font-style:italic;color:var(--ink-soft);margin-top:12px}

/* ==========================================================================
   Article meta / single
   ========================================================================== */
.entry-header{border-bottom:3px double var(--ink);padding-bottom:14px;margin-bottom:20px}
.entry-header .kicker{color:var(--red);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px}
.entry-title{font-family:var(--display);font-weight:900;font-size:clamp(28px,5vw,48px);line-height:1.03;margin:.15em 0}
.entry-meta{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.entry-meta a{color:var(--navy);font-weight:700}
.lodge-badge{display:inline-block;background:var(--navy);color:var(--gold-2);padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* pagination */
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.pagination a,.pagination span{border:1px solid var(--ink);padding:8px 14px;font-weight:700}
.pagination .current{background:var(--navy);color:#f3ecdb}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy);color:#e8ddc4;margin-top:40px;border-top:4px solid var(--gold)}
.site-footer a{color:var(--gold-2)}
.site-footer .container{padding:30px 20px}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
@media(max-width:760px){.footer-cols{grid-template-columns:1fr}}
.site-footer h4{font-family:var(--display);font-size:18px;margin:0 0 10px;color:#fff}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand .compass{font-size:28px;color:var(--gold-2)}
.footer-legal{border-top:1px solid rgba(255,255,255,.15);margin-top:24px;padding-top:16px;font-size:12px;color:#c9bd9c;text-align:center;line-height:1.7}
.footer-legal .disclaimer{font-style:italic}

/* ==========================================================================
   Mobile nav
   ========================================================================== */
@media(max-width:760px){
  .nav-toggle{display:block;background:var(--navy);color:#f3ecdb;border:none;width:100%;padding:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
  .site-nav ul{display:none;flex-direction:column;width:100%}
  .site-nav.open ul{display:flex}
  .site-nav a{border-bottom:1px solid var(--rule);width:100%;text-align:center}
  .site-nav ul ul{position:static;border:none}
}