/* ═══════════════════════════════════════════════
   pause n play — brand stylesheet
   pausenplay.in
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  --olive:    #2C3B2E;
  --cream:    #F5F0E8;
  --rust:     #A85E3C;
  --gold:     #C99B57;
  --plum:     #5E4B56;
  --oatmeal:  #E8E2D6;
  --cream-dk: #DDD6C8;
  --dim:      #7A6E60;
  --body:     #3A3028;
  /* ⏸ = oatmeal, ▶ = rust — fixed everywhere */
  --pause-color: #E8E2D6;
  --play-color:  #A85E3C;
  /* pillar accent — overridden per post */
  --accent:             var(--olive);
  --accent-tint:        rgba(44,59,46,.07);
  --accent-callout-bg:  #f5f7f5;
  --accent-callout-bd:  rgba(44,59,46,.15);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;font-size:16px;}

body{
  background:var(--cream);color:var(--body);
  font-family:'DM Sans',sans-serif;font-weight:300;
  line-height:1.8;min-height:100vh;
}

body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:.45;
}

/* NAV */
nav{
  padding:24px 60px;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--cream-dk);
  position:sticky;top:0;background:rgba(245,240,232,.93);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:100;
}
.nav-brand{
  font-family:'DM Serif Display',serif;font-size:17px;font-weight:400;
  color:var(--olive);text-decoration:none;display:flex;align-items:center;gap:5px;
}
.nav-brand .sp{color:var(--plum);font-size:13px;}
.nav-brand .sv{color:var(--play-color);font-size:13px;}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;}
.nav-links a{font-size:12.5px;color:var(--dim);text-decoration:none;letter-spacing:.04em;transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:var(--olive);}
.nav-cta{border:1px solid var(--cream-dk);padding:6px 16px;border-radius:2px;font-size:11.5px;color:var(--olive)!important;transition:all .2s!important;}
.nav-cta:hover{background:var(--olive)!important;color:var(--cream)!important;border-color:var(--olive)!important;}

/* FOOTER */
footer{
  border-top:1px solid var(--cream-dk);padding:32px 60px;
  display:flex;align-items:center;justify-content:space-between;margin-top:100px;
}
.footer-brand{
  font-family:'DM Serif Display',serif;font-size:15px;color:var(--olive);
  display:flex;align-items:center;gap:5px;
}
.footer-brand .sp{color:var(--plum);font-size:12px;}
.footer-brand .sv{color:var(--play-color);font-size:12px;}
.footer-right{display:flex;gap:24px;}
.footer-right a{font-size:12px;color:var(--dim);text-decoration:none;transition:color .2s;}
.footer-right a:hover{color:var(--olive);}

/* LAYOUT */
.container{max-width:760px;margin:0 auto;padding:0 40px;}
main{padding:72px 0 0;}
.post-wrap{max-width:660px;}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:9px;margin-bottom:44px;font-size:11.5px;color:var(--dim);}
.breadcrumb a{color:var(--dim);text-decoration:none;transition:color .2s;}
.breadcrumb a:hover{color:var(--olive);}
.bc-sep{opacity:.3;font-size:10px;}

/* POST HEADER */
.post-header{margin-bottom:52px;}
.post-tag-row{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.ptag{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  padding:4px 12px;border-radius:2px;
  background:var(--accent-tint);color:var(--accent);font-weight:500;
}
.post-date{font-size:11.5px;color:var(--dim);opacity:.7;}
.post-read{font-size:11.5px;color:var(--dim);opacity:.55;}
.post-headline{
  font-family:'DM Serif Display',serif;
  font-size:clamp(30px,4.5vw,44px);font-weight:400;
  line-height:1.1;color:var(--olive);margin-bottom:22px;
}
.post-headline em{font-style:italic;color:var(--accent);}
.post-deck{
  font-size:17px;color:var(--dim);line-height:1.78;
  border-left:2px solid var(--cream-dk);padding-left:20px;
  font-style:italic;font-family:'DM Serif Display',serif;
}

/* POST BODY */
.post-body{font-size:16px;line-height:1.9;color:var(--body);margin-top:44px;}
.post-body p{margin-bottom:28px;}
.post-body strong{font-weight:400;color:var(--olive);}
.post-body h2{
  font-family:'DM Serif Display',serif;font-size:22px;font-weight:400;
  color:var(--olive);margin:56px 0 18px;line-height:1.3;
}
.post-body h2 em{font-style:italic;color:var(--accent);}
.post-body a{
  color:var(--accent);text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.15);text-underline-offset:3px;transition:text-decoration-color .2s;
}
.post-body a:hover{text-decoration-color:var(--accent);}
/* symbol colours in body copy */
.sp{color:var(--plum);}
.sv{color:var(--play-color);}

/* CALLOUT */
.callout{
  margin:44px 0;padding:22px 26px;
  background:var(--accent-callout-bg);
  border:1px solid var(--accent-callout-bd);
  border-left:3px solid var(--accent);
  border-radius:0 3px 3px 0;
}
.callout-label{
  font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--accent);margin-bottom:10px;
}
.callout p{font-size:15px;line-height:1.72;color:var(--olive);margin:0;}

/* RECOGNITION — base */
.recognition{margin:48px 0;border-radius:3px;padding:28px 32px;}
.recognition p{font-family:'DM Serif Display',serif;font-size:18.5px;line-height:1.58;margin:0;font-style:italic;}
.recognition .same{display:block;margin-top:14px;font-style:normal;font-size:13px;letter-spacing:.04em;}

/* P1 olive */
.rec-olive{background:var(--olive);}
.rec-olive p{color:var(--cream);}
.rec-olive .same{color:rgba(245,240,232,.38);}
/* P2 plum */
.rec-plum{background:var(--plum);}
.rec-plum p{color:var(--cream);}
.rec-plum .same{color:rgba(245,240,232,.38);}
/* P3 rust border */
.rec-rust{background:white;border-left:4px solid var(--rust);border-radius:0 3px 3px 0;}
.rec-rust p{color:var(--olive);}
.rec-rust .same{color:var(--rust);}
/* P4 olive + gold same */
.rec-gold{background:var(--olive);position:relative;overflow:hidden;}
.rec-gold::before{
  content:'⏸▶';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:72px;opacity:.05;line-height:1;letter-spacing:-8px;color:var(--gold);
}
.rec-gold p{color:var(--cream);}
.rec-gold .same{color:var(--gold);opacity:.85;}

/* POST END */
.post-end{margin-top:68px;padding-top:36px;border-top:1px solid var(--cream-dk);display:flex;align-items:center;gap:12px;}
.post-end .ep{font-size:22px;color:var(--pause-color);line-height:1;}
.post-end .ev{font-size:22px;color:var(--play-color);line-height:1;}
.post-end .et{font-family:'DM Serif Display',serif;font-size:14px;font-style:italic;color:var(--dim);opacity:.75;}

/* FAQ */
.faq-section{margin-top:60px;padding-top:40px;border-top:1px solid var(--cream-dk);}
.faq-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);opacity:.6;margin-bottom:24px;}
.faq-item{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--cream-dk);}
.faq-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.faq-q{font-family:'DM Serif Display',serif;font-size:16px;font-weight:400;color:var(--olive);margin-bottom:8px;}
.faq-a{font-size:14px;color:var(--dim);line-height:1.68;}

/* RELATED */
.related{margin-top:68px;padding-top:40px;border-top:1px solid var(--cream-dk);}
.related-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);opacity:.6;margin-bottom:22px;}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.related-card{
  padding:22px 24px;border:1px solid var(--cream-dk);border-radius:3px;
  text-decoration:none;color:inherit;background:white;
  transition:border-color .2s;display:block;
}
.related-card:hover{border-color:var(--olive);}
.rc-tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;opacity:.65;}
.rc-title{font-family:'DM Serif Display',serif;font-size:15.5px;font-weight:400;color:var(--olive);line-height:1.3;}

@media(max-width:680px){
  nav{padding:20px 24px;}
  .nav-links{gap:16px;}
  .nav-links li:first-child{display:none;}
  main{padding:48px 0 0;}
  .container{padding:0 24px;}
  .post-headline{font-size:28px;}
  .related-grid{grid-template-columns:1fr;}
  footer{padding:28px 24px;flex-direction:column;gap:16px;}
}

.pc-readmore {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--olive);
  letter-spacing: .04em;
  opacity: .7;
  transition: opacity .2s, gap .2s;
}

.post-card:hover .pc-readmore {
  opacity: 1;
  gap: 8px;
}
/* GO DEEPER — further reading block for the HPA paper */
.go-deeper {
  margin-top: 48px;
  padding: 24px 28px;
  background: var(--olive);
  border-radius: 3px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-decoration: none;
  transition: background .2s;
}
.go-deeper:hover { background: #1e2b20; }
.go-deeper-label {
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
  margin-bottom: 7px;
}
.go-deeper-title {
  font-family: 'DM Serif Display', serif;
  font-size: 17px;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 6px;
  font-style: italic;
}
.go-deeper-desc {
  font-size: 12.5px;
  color: var(--oatmeal);
  line-height: 1.6;
  opacity: .75;
}
.go-deeper-arrow {
  font-size: 20px;
  color: var(--gold);
  opacity: .7;
  flex-shrink: 0;
  margin-top: 4px;
  transition: opacity .2s;
}
.go-deeper:hover .go-deeper-arrow { opacity: 1; }