/* ============================================================
   PSM WEB — SHARED DESIGN SYSTEM
   Derived from the visual language of PSM's main Instagram feed.
   Shared: typography, core palette, the stacked lockup, the mono
   caption block, duotone imagery, paper grain, square corners.
   Varies per site: the field colour, the display colour, the
   accent block, density and grid.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- core palette, shared by all three sites --- */
  --psm-red:      #E02127;
  --psm-scarlet:  #ED3237;
  --psm-maroon:   #5C1518;
  --psm-deep:     #9B1B1E;
  --ink:          #141110;
  --paper:        #E7DCC6;
  --newsprint:    #DEDCD8;
  --mustard:      #E9CE80;
  --white:        #FFF8F2;
  --grey:         #8A807C;

  /* --- type --- */
  --display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    'Space Mono', 'Courier New', monospace;

  /* --- per-site slots, overridden by the theme classes below --- */
  --field:     var(--white);
  --display-c: var(--ink);
  --accent:    var(--psm-red);
  --block-bg:  var(--psm-maroon);
  --block-fg:  var(--psm-scarlet);
  --rule:      rgba(20,17,16,.22);
  --body-c:    #2B2422;
  --duo-dark:  #3A0E10;
  --duo-light: var(--psm-scarlet);
}

/* ---------- THEME: partisosialis.org — scarlet field, maroon type ---------- */
.t-parti{
  --field:#ED3237; --display-c:#5C1518; --accent:#5C1518;
  --block-bg:#5C1518; --block-fg:#ED3237;
  --rule:rgba(92,21,24,.35); --body-c:#5C1518;
  --duo-dark:#4A1013; --duo-light:#ED3237;
}
/* ---------- THEME: sosialis.net — paper & newsprint, black + red ---------- */
.t-sosialis{
  --field:#E7DCC6; --display-c:#141110; --accent:#E02127;
  --block-bg:#E02127; --block-fg:#FFF8F2;
  --rule:rgba(20,17,16,.24); --body-c:#2B2422;
  --duo-dark:#141110; --duo-light:#E7DCC6;
}
/* ---------- THEME: thinkleft.net — mustard field, deep maroon type ---------- */
.t-thinkleft{
  --field:#E9CE80; --display-c:#9B1B1E; --accent:#9B1B1E;
  --block-bg:#7E1417; --block-fg:#E9CE80;
  --rule:rgba(126,20,23,.3); --body-c:#4A2418;
  --duo-dark:#5C1518; --duo-light:#E9CE80;
}

/* ================= base ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--field); color:var(--body-c);
  font-family:var(--body); font-size:17px; line-height:1.55;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}

/* paper grain — the texture every Instagram card carries */
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.16; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
.wrap--narrow{max-width:860px}

/* ================= the stacked lockup ================= */
/* One word small, one word huge. The core PSM headline gesture. */
.lockup{font-family:var(--display); color:var(--display-c); text-transform:uppercase;
  line-height:.86; letter-spacing:-.01em; margin:0}
.lockup__lead{display:block; font-size:clamp(26px,4.4vw,58px)}
.lockup__main{display:block; font-size:clamp(46px,11vw,148px); letter-spacing:-.025em}
.lockup--flip .lockup__lead{font-size:clamp(30px,5.6vw,76px)}
.lockup--flip .lockup__main{font-size:clamp(40px,8.2vw,108px)}

/* ================= the mono caption block ================= */
/* Solid rectangle, letter-spaced mono, centred. Straight off the feed. */
.caption-block{
  background:var(--block-bg); color:var(--block-fg);
  font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.22em; font-size:clamp(11px,1.35vw,17px); line-height:1.85;
  text-align:center; padding:20px 26px; margin:0;
}
.caption-block--left{text-align:left; letter-spacing:.16em}

/* eyebrow / kicker */
.kicker{font-family:var(--mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:12px; color:var(--accent); margin:0 0 12px}

/* ================= duotone imagery ================= */
.duotone{position:relative; background:var(--duo-dark); overflow:hidden}
.duotone img{filter:grayscale(1) contrast(1.08) brightness(1.02);
  mix-blend-mode:screen; width:100%; height:100%; object-fit:cover}
.duotone::after{content:''; position:absolute; inset:0;
  background:var(--duo-light); mix-blend-mode:multiply}
.duotone--flat::after{display:none}

/* ================= masthead & nav ================= */
.masthead{border-bottom:3px solid var(--display-c)}
.utility{display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:var(--mono); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em; padding:11px 0; border-bottom:1px solid var(--rule)}
.utility__langs{display:flex; gap:16px; flex-wrap:wrap}
.utility__langs a[aria-current]{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.brandbar{display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding:22px 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:14px; min-width:0}
.brand__mark{width:54px; height:54px; flex:0 0 54px; border-radius:50%; object-fit:contain}
/* PSM's mark is red, so on the scarlet field it needs a light disc to sit on.
   On paper and mustard it reads directly and is placed bare. */
.t-parti .brand__mark{background:#FFF8F2; padding:3px}
.brand__name{font-family:var(--display); text-transform:uppercase; line-height:.92;
  color:var(--display-c); font-size:20px; letter-spacing:-.01em}
.brand__tag{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin-top:5px}
.nav{display:flex; gap:26px; flex-wrap:wrap; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.06em; padding-bottom:14px}
.nav a{padding:6px 0; border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--accent); text-decoration:none}
.nav a[aria-current]{border-bottom-color:var(--accent)}
.btn{display:inline-block; background:var(--accent); color:var(--field);
  font-family:var(--mono); font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  font-size:12px; padding:13px 22px; border:0}
.btn:hover{text-decoration:none; opacity:.88}
.btn--ghost{background:transparent; color:var(--display-c); border:3px solid var(--display-c)}

/* ================= sections ================= */
.section{padding:60px 0}
.section--tight{padding:38px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; border-bottom:3px solid var(--display-c); padding-bottom:12px; margin-bottom:30px;
  flex-wrap:wrap}
.section-head h2{font-family:var(--display); text-transform:uppercase; font-size:clamp(22px,3.2vw,34px);
  color:var(--display-c); margin:0; letter-spacing:-.01em; line-height:1}
.section-head a{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent)}

.grid{display:grid; gap:34px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--lead{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}

/* article card */
.card__media{aspect-ratio:16/10; margin-bottom:16px}
.card h3{font-family:var(--display); text-transform:uppercase; line-height:1.02;
  font-size:22px; margin:0 0 10px; color:var(--display-c); letter-spacing:-.005em}
.card p{margin:0 0 12px; font-size:15px; line-height:1.5}
.meta{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}

/* list rows */
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:118px minmax(0,1fr); gap:22px;
  padding:18px 0; border-bottom:1px solid var(--rule); align-items:start}
.row:first-child{border-top:1px solid var(--rule)}
.row h4{font-family:var(--body); font-weight:700; font-size:17px; line-height:1.32; margin:0}

/* footer */
.foot{background:var(--display-c); color:var(--field); margin-top:64px; padding:52px 0 40px}
.foot a{color:var(--field)}
.foot .grid{gap:34px}
.foot h5{font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 14px; opacity:.72}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:15px}
.foot__bar{border-top:1px solid rgba(255,248,242,.26); margin-top:34px; padding-top:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.72}

/* mockup chrome — the review banner, not part of the design */
.review-bar{background:var(--ink); color:#FFF8F2; font-family:var(--mono); font-size:11px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:11px 0}
.review-bar .wrap{display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; align-items:center}
.review-bar a{color:#ED3237}

/* Flex and grid children default to a min-content floor and refuse to shrink
   past it, which is what pushes a narrow page into horizontal scroll. */
.wrap > *, .grid > *, .nav, .utility > *, .brandbar > *, .review-bar .wrap > *{min-width:0}
.lockup__main, .lockup__lead{overflow-wrap:anywhere}

@media (max-width:640px){
  .review-bar .wrap{flex-direction:column; align-items:flex-start; gap:5px}
  .utility{flex-direction:column; align-items:flex-start; gap:9px}
  .caption-block{letter-spacing:.12em}
  .meta,.kicker{letter-spacing:.12em}
  .brand__mark{width:44px; height:44px; flex:0 0 44px}
}

@media (max-width:900px){
  .grid--3,.grid--2,.grid--lead{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr); gap:8px}
  .nav{gap:16px; font-size:13px}
  .section{padding:42px 0}
}