/*
Theme Name: COSE
Theme URI: https://cose.pl
Author: COSE
Description: Motyw magazynu COSE. Zasada: czerń rysuje rzecz, błękit ją opisuje.
Version: 0.1.0
Text Domain: cose
*/

:root{
  --paper:#EFF0F1; --paper-2:#E2E4E7; --ink:#0E0F10;
  --ink-60:rgba(14,15,16,.62); --ink-35:rgba(14,15,16,.35); --ink-12:rgba(14,15,16,.13);
  --nota:#1F44C4;
  --sans:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
     line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

.page{max-width:1120px;margin:0 auto;background:#fff;
      border-left:1px solid var(--ink-12);border-right:1px solid var(--ink-12);min-height:100vh}
.in{padding:0 clamp(20px,5vw,72px)}
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--nota);margin:0 0 16px}
.note{font-family:var(--mono);font-size:11px;color:var(--ink-60);line-height:1.9}

/* NAGŁÓWEK */
.site-head{border-bottom:1px solid var(--ink-12)}
.bar{display:flex;justify-content:space-between;align-items:baseline;
     padding:24px 0 20px;flex-wrap:wrap;gap:16px}
.mk{display:block;color:var(--ink);line-height:0}
.mk svg{height:22px;width:auto;display:block}
.mk .wm{fill:currentColor}
.mk .gl{fill:var(--nota)}
.mk:hover{text-decoration:none}
.nav{font-family:var(--sans);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
     display:flex;gap:24px;flex-wrap:wrap;color:var(--ink-60)}
.nav a{border-bottom:1.5px solid transparent;padding-bottom:2px}
.nav a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--nota)}
.nav .on{color:var(--ink);border-bottom-color:var(--nota)}

/* TABELKA RYSUNKOWA */
.tb{display:flex;border-top:1px solid var(--nota);border-bottom:1px solid var(--nota);
    font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;overflow-x:auto}
.tb div{padding:7px 14px;border-right:1px solid rgba(31,68,196,.28);white-space:nowrap}
.tb div:first-child{padding-left:0}.tb div:last-child{border-right:none}
.tb b{color:var(--nota);font-weight:400}.tb span{color:var(--ink-60)}

/* BANER NUMERU */
.banner{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
        padding-top:38px;padding-bottom:38px;border-bottom:1px solid var(--ink-12);background:var(--paper)}
@media(max-width:760px){.banner{grid-template-columns:1fr;gap:20px}}
.banner .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
           text-transform:uppercase;color:var(--nota)}
.banner h1{font-family:var(--serif);font-size:clamp(38px,6vw,58px);line-height:1;
           margin:12px 0 0;font-weight:400;letter-spacing:-.02em}
.banner p{font-size:17px;color:var(--ink-60);margin:12px 0 0;max-width:46ch}
.banner .cta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
             color:var(--nota);border:1px solid var(--nota);padding:11px 18px;white-space:nowrap}
.banner .cta:hover{background:var(--nota);color:#fff;text-decoration:none}

/* SEKCJE */
.sect{padding-top:46px;padding-bottom:46px;border-bottom:1px solid var(--ink-12)}
.sect-h{font-size:12px;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
        color:var(--nota);font-weight:400;margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:32px}
.card .th{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--paper-2) 0 11px,#D6D9DD 11px 22px);
          margin-bottom:12px}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .d{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-35)}
.card h3{font-size:18px;font-weight:400;margin:7px 0 0;line-height:1.32}
.card:hover h3{text-decoration:underline;text-underline-offset:3px}

/* NEWSLETTER */
.nl{border:1px solid var(--nota);padding:32px;display:grid;grid-template-columns:1fr auto;
    gap:28px;align-items:center;margin:46px 0}
@media(max-width:720px){.nl{grid-template-columns:1fr}}
.nl h2{font-size:24px;font-weight:400;margin:0 0 8px}
.nl p{margin:0;color:var(--ink-60);font-size:16px;max-width:46ch}
.nl .box{display:flex;border:1px solid var(--ink);font-family:var(--mono);font-size:11px}
.nl .box span{padding:12px 16px;color:var(--ink-35);white-space:nowrap}
.nl .box b{padding:12px 18px;background:var(--ink);color:var(--paper);font-weight:400;white-space:nowrap}

/* STOPKA */
.site-foot{padding-top:44px;padding-bottom:60px}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;margin-top:26px;
       font-family:var(--sans);font-size:12.5px;color:var(--ink-60);line-height:2}
.fcols b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
         text-transform:uppercase;color:var(--nota);font-weight:400;margin-bottom:6px}

/* WPIS */
.entry{padding-top:52px;padding-bottom:52px}
.entry h1{font-size:clamp(32px,5vw,52px);line-height:1.05;margin:12px 0 20px;font-weight:400;max-width:20ch}
.entry .lead{font-size:20px;color:var(--ink-60);max-width:56ch;margin:0 0 30px}
.entry-body{font-size:17.5px;max-width:62ch;color:var(--ink-60)}
.entry-body p{margin:0 0 18px}

/* SOCIAL w stopce */
.fsoc a{color:var(--ink-60);border-bottom:1px solid var(--ink-12)}
.fsoc a:hover{color:var(--nota);border-bottom-color:var(--nota);text-decoration:none}

/* ── ZGODY ─────────────────────────────────────────────── */
#zgody{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9999;
       background:var(--paper);border-top:1.5px solid var(--nota);
       padding:20px clamp(20px,5vw,72px)}
.ma-zgode-baner #zgody{display:block}
#zgody .in-z{max-width:1120px;margin:0 auto;display:grid;
             grid-template-columns:1fr auto;gap:26px;align-items:center}
@media(max-width:760px){#zgody .in-z{grid-template-columns:1fr}}
#zgody p{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.85;
         color:var(--ink-60);max-width:70ch}
#zgody p b{color:var(--nota);font-weight:400}
#zgody a{color:var(--ink);border-bottom:1px solid var(--ink-12)}
#zgody .btny{display:flex;gap:12px}
#zgody button{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
              text-transform:uppercase;padding:12px 20px;cursor:pointer;
              border:1px solid var(--ink);background:transparent;color:var(--ink);white-space:nowrap}
#zgody button:hover{background:var(--ink);color:var(--paper)}
/* oba przyciski identyczne — żaden nie może być uprzywilejowany wizualnie */

/* dolna linia stopki: tożsamość do lewej, kanały do prawej */
.foot-bottom{display:flex;justify-content:space-between;align-items:baseline;
             gap:16px 28px;flex-wrap:wrap;margin-top:30px;
             border-top:1px solid var(--ink-12);padding-top:18px}
.foot-bottom p{margin:0}

/* ── NAWIGACJA NA TELEFONIE ─────────────────────────────
   Pięć długich słów nie mieści się w wierszu. Zamiast zawijania
   z sierotą albo hamburgera — jeden pasek przewijany poziomo,
   wychodzący do krawędzi ekranu.                                */
@media(max-width:760px){
  .bar{padding-bottom:0;gap:10px}
  .mk svg{height:26px}
  .nav{flex-wrap:nowrap;overflow-x:auto;width:100%;gap:20px;
       margin:0 calc(-1 * clamp(20px,5vw,72px));
       padding:2px clamp(20px,5vw,72px) 16px;
       scrollbar-width:none;-ms-overflow-style:none;
       -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:none}
  .site-head{position:relative}
  .site-head::after{content:"";position:absolute;right:0;bottom:1px;z-index:2;
                    width:64px;height:44px;pointer-events:none;
                    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 85%)}
}