/* ===========================================================
   pokutan.com — shared stylesheet (editorial direction)
   Used by: Home, Album, CV, Essay
   =========================================================== */
:root{
  --paper:#fbfbf9; --paper2:#f4f3ee; --ink:#2c2c30; --mut:#7e7c73;
  --slate:#334d55; --teal:#006699; --deep:#21536A; --leaf:#3f7d3a; --leaf2:#2f6e2c;
  --line:#e4e2da; --line2:#d8d6cc; --card:#ffffff; --warm:#b95e2e;
  --maxw:1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px;}
.mono{font-family:"JetBrains Mono",monospace;}

/* ---- top bar ---- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(251,251,249,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.topbar .row{display:flex; align-items:center; gap:20px; height:60px;}
.brand{display:flex; align-items:baseline; gap:9px; font:600 16px/1 "Spectral",serif; color:var(--ink); white-space:nowrap;}
.brand a{color:inherit;} .brand a:hover{text-decoration:none;}
.brand .lat{font:600 11px/1 "JetBrains Mono",monospace; color:var(--teal); letter-spacing:.06em;}
nav.main{display:flex; gap:4px; margin-inline-start:auto; flex-wrap:wrap;}
nav.main a{font:600 12px/1 "JetBrains Mono",monospace; letter-spacing:.01em; white-space:nowrap; color:var(--slate); padding:8px 11px; border-radius:8px;}
nav.main a:hover{background:var(--paper2); text-decoration:none; color:var(--ink);}
nav.main a.on{color:var(--teal);}
.langsw{display:flex; gap:2px; background:var(--paper2); border:1px solid var(--line2); border-radius:9px; padding:3px;}
.langsw button{font:600 11px/1 "JetBrains Mono",monospace; color:var(--mut); background:none; border:0; cursor:pointer; padding:6px 8px; border-radius:6px;}
.langsw button.on{background:var(--slate); color:#fff;}

/* ---- shared bits ---- */
.kick{font:700 11px/1 "JetBrains Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--leaf);}
.breadcrumb{font:500 12px/1.5 "JetBrains Mono",monospace; color:var(--mut);}
.breadcrumb a{color:var(--mut);} .breadcrumb a:hover{color:var(--teal);}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 13px/1 "Hanken Grotesk"; color:var(--slate);
  background:var(--card); border:1px solid var(--line2); border-radius:10px; padding:10px 14px; cursor:pointer; transition:.15s;}
.btn:hover{border-color:var(--slate); text-decoration:none; transform:translateY(-1px);}
.btn.solid{background:var(--slate); color:#fff; border-color:var(--slate);}
.btn.solid:hover{background:var(--deep);}

/* ---- footer ---- */
footer.site{background:var(--slate); color:#cdd6d8; padding:42px 0 48px; margin-top:54px;}
footer.site .grid{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start;}
footer.site .brand2{font:600 17px/1.2 "Spectral",serif; color:#fff;}
footer.site .brand2 span{display:block; font:500 11px/1 "JetBrains Mono",monospace; color:#9fb3b6; letter-spacing:.06em; margin-top:6px;}
footer.site nav{display:flex; gap:26px; flex-wrap:wrap;}
footer.site nav a{color:#cdd6d8; font:600 12px/1 "JetBrains Mono",monospace; letter-spacing:.01em;}
footer.site nav a:hover{color:#fff;}
footer.site .legal{width:100%; border-top:1px solid #44606a; margin-top:8px; padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font:500 11.5px/1.5 "JetBrains Mono",monospace; color:#8fa6aa;}
footer.site .legal em{font-style:italic; color:#bcd; font-family:"Spectral",serif;}

/* ---- photo placeholder tints ---- */
.t-madrid{background:linear-gradient(150deg,#d98a3d,#b95e2e 75%);}
.t-madrid2{background:linear-gradient(150deg,#caa15a,#9c5a2e 75%);}
.t-england{background:linear-gradient(150deg,#7d9472,#4f6356);}
.t-usa{background:linear-gradient(150deg,#6f8fb8,#3c5b80);}
.t-dead{background:linear-gradient(150deg,#8fc6c4,#cfd9c2);}
.t-kineret{background:linear-gradient(150deg,#3f8fb0,#1f5f78);}
.t-sea{background:linear-gradient(150deg,#56a8c4,#2c6f92);}
.t-eilat{background:linear-gradient(150deg,#cf6a4a,#5d86a8);}
.t-newyear{background:linear-gradient(150deg,#d9a441,#9c5a2e);}
.t-stone{background:linear-gradient(150deg,#b9a98f,#8a7a64);}
.t-opera{background:linear-gradient(150deg,#9c6a78,#5d3f52);}
.t-night{background:linear-gradient(150deg,#5a5170,#2f2a44);}
.t-old{background:linear-gradient(150deg,#9a948a,#6f6a62);}
.t-screen{background:linear-gradient(150deg,#2c4a52,#16282e);}

@media(max-width:620px){ nav.main{display:none;} }