/* ============================================================
   Houselow — Stylesheet
   Design: Gallery First (Anthracite / White / Gold-Beige)

   FONTS: no Google Fonts CDN is loaded (GDPR — the operator is
   based in Germany). System serif + sans stacks are used.
   To self-host a display serif, drop the woff2 files into
   /assets/fonts/ and enable the @font-face block below.
   ============================================================ */

/*
@font-face{font-family:'Houselow Serif';src:url('fonts/serif-400.woff2') format('woff2');font-weight:400;font-display:swap;}
*/

:root{
  --ink:#232323;
  --ink-deep:#141414;
  --grey:#6E6A62;
  --grey-light:#8A857C;
  --line:#E4E1DC;
  --white:#FFFFFF;
  --paper:#FAF9F7;
  --gold:#C2A878;
  --gold-deep:#A88C58;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:100;}
.skip-link:focus{left:0;}

.label{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.label.light{color:var(--gold);}

/* ---------- Image placeholders (replace with <img>) ---------- */
.ph{position:relative;background:#B8B2A7;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ph::after{content:attr(data-label);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:center;padding:0 16px;}
.ph.dark{background:#3A3A38;}
.ph.mid{background:#6E6A62;}
.ph.light{background:#CFC9BE;}
.ph-card{height:270px;}
.ph-big{height:420px;}
.ph-wide{height:460px;}
.ph-inline{height:340px;margin:40px 0;}

/* Real images */
img.pic{width:100%;display:block;background:var(--paper);}
img.pic.ph-card{height:270px;object-fit:cover;}
img.pic.ph-big{height:420px;object-fit:cover;}
img.pic.ph-wide{height:auto;aspect-ratio:16/9;object-fit:cover;}
img.pic.ph-inline{height:auto;margin:40px 0;}
.card a img.pic{transition:transform .5s ease;}

/* ---------- Header ---------- */
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);z-index:20;}
.head{max-width:1240px;margin:0 auto;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;}
.brand{font-family:var(--serif);font-size:22px;letter-spacing:6px;font-weight:400;}
.brand .roof{color:var(--gold);}
nav ul{display:flex;gap:30px;list-style:none;}
nav a{font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent;display:block;}
nav a:hover,nav a.active{border-bottom-color:var(--gold);}
.head-side{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);}

/* ---------- Hero ---------- */
.hero{position:relative;height:640px;background:var(--ink-deep);overflow:hidden;}
.hero .ph,.hero img.pic{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;}
.hero-body{position:absolute;left:0;right:0;bottom:0;padding:120px 28px 56px;
  background:linear-gradient(transparent, rgba(15,15,15,.15) 30%, rgba(15,15,15,.82));}
.hero-inner{max-width:1240px;margin:0 auto;}
.hero h1{font-family:var(--serif);font-size:56px;line-height:1.08;color:#fff;font-weight:400;max-width:16ch;margin:14px 0 16px;}
.hero p{color:rgba(255,255,255,.82);font-size:17px;max-width:52ch;}
.hero-meta{margin-top:22px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);}

/* ---------- Sections ---------- */
section{max-width:1240px;margin:0 auto;padding:76px 28px 0;}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:34px;}
.sec-head h2{font-family:var(--serif);font-size:26px;font-weight:400;}
.sec-head a{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);}
.sec-head a:hover{color:var(--gold-deep);}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;}
.card .picbox{overflow:hidden;}
.card .ph,.card img.pic{transition:transform .5s ease;}
.card:hover .ph,.card:hover img.pic{transform:scale(1.04);}
.card .label{display:block;margin-top:16px;}
.card h3{font-family:var(--serif);font-size:21px;line-height:1.32;font-weight:400;margin:8px 0;}
.card p{font-size:15px;color:var(--grey);}
.card .meta{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--grey-light);margin-top:12px;}
.big h3{font-size:30px;}

/* ---------- Dark band ---------- */
.band{background:var(--ink);color:#fff;margin-top:88px;}
.band-inner{max-width:1240px;margin:0 auto;padding:76px 28px;}
.band .sec-head{border-bottom-color:rgba(255,255,255,.18);}
.band .sec-head h2{color:#fff;}
.band .sec-head a{color:rgba(255,255,255,.6);}
.band .card h3{color:#fff;}
.band .card p{color:rgba(255,255,255,.65);}
.band .card .meta{color:rgba(255,255,255,.45);}

/* ---------- Category tiles ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.cat{background:var(--white);padding:34px 22px;text-align:center;display:block;}
.cat:hover{background:var(--paper);}
.cat .num{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:2px;}
.cat h3{font-family:var(--serif);font-size:19px;font-weight:400;margin:10px 0 6px;}
.cat p{font-size:13px;color:var(--grey);}

/* ---------- Newsletter ---------- */
.letter{background:var(--paper);margin-top:88px;border-top:1px solid var(--line);}
.letter-inner{max-width:660px;margin:0 auto;padding:76px 28px;text-align:center;}
.letter h2{font-family:var(--serif);font-size:30px;font-weight:400;margin:14px 0 12px;}
.letter p{font-size:15px;color:var(--grey);}
.btn{display:inline-block;margin-top:26px;padding:14px 34px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;}
.btn:hover{background:var(--gold-deep);}

/* ---------- Article pages ---------- */
.art-hero{position:relative;height:560px;background:var(--ink-deep);overflow:hidden;}
.art-hero .ph,.art-hero img.pic{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;}
.art-hero-body{position:absolute;left:0;right:0;bottom:0;padding:140px 28px 52px;
  background:linear-gradient(transparent, rgba(15,15,15,.2) 30%, rgba(15,15,15,.85));}
.art-hero-inner{max-width:900px;margin:0 auto;}
.art-hero h1{font-family:var(--serif);font-size:46px;line-height:1.12;color:#fff;font-weight:400;margin:14px 0 16px;}
.art-hero .stand{color:rgba(255,255,255,.8);font-size:17px;max-width:60ch;}
.art-meta{margin-top:20px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.58);}

article.body{max-width:740px;margin:0 auto;padding:60px 28px 0;}
article.body h2{font-family:var(--serif);font-size:30px;font-weight:400;margin:54px 0 16px;line-height:1.25;}
article.body h3{font-family:var(--serif);font-size:22px;font-weight:400;margin:38px 0 12px;}
article.body p{margin-bottom:20px;}
article.body ul,article.body ol{margin:0 0 22px 22px;}
article.body li{margin-bottom:10px;}
article.body strong{font-weight:600;color:var(--ink-deep);}
article.body a{color:var(--ink);border-bottom:1px solid var(--gold);}
article.body a:hover{color:var(--gold-deep);}
article.body em{font-style:italic;}
.table-wrap{overflow-x:auto;margin:30px 0 34px;}
article.body table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px;}
article.body th{background:var(--ink);color:#fff;font-weight:600;text-align:left;padding:12px 14px;font-size:11px;letter-spacing:1px;text-transform:uppercase;}
article.body td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
article.body tr:nth-child(even) td{background:var(--paper);}
.note{background:var(--paper);border-left:3px solid var(--gold);padding:22px 26px;margin:34px 0;}
.note p:last-child{margin-bottom:0;}
.faq{border-top:1px solid var(--line);padding-top:22px;margin-top:22px;}
.faq h3{margin-top:0;}
.more{max-width:1240px;margin:0 auto;padding:84px 28px 0;}

/* ---------- Legal pages ---------- */
.legal{max-width:740px;margin:0 auto;padding:64px 28px 0;}
.legal h1{font-family:var(--serif);font-size:42px;font-weight:400;margin:14px 0 20px;}
.legal h2{font-family:var(--serif);font-size:25px;font-weight:400;margin:46px 0 14px;}
.legal h3{font-family:var(--serif);font-size:20px;font-weight:400;margin:30px 0 10px;}
.legal p{margin-bottom:18px;font-size:16px;}
.legal ul{margin:0 0 20px 22px;}
.legal li{margin-bottom:8px;font-size:16px;}
.legal .addr{background:var(--paper);padding:20px 24px;margin-bottom:20px;font-size:16px;line-height:1.9;border-left:3px solid var(--gold);}
.legal a{color:var(--ink);border-bottom:1px solid var(--gold);}
.updated{margin-top:46px;font-size:13px;color:var(--grey-light);letter-spacing:1px;}

/* ---------- Footer ---------- */
footer{background:var(--ink-deep);color:rgba(255,255,255,.62);margin-top:88px;}
.foot{max-width:1240px;margin:0 auto;padding:60px 28px 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;font-size:14px;}
.foot .brand{color:#fff;font-size:19px;}
.pin-btn{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:11px 18px;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.78);
  font-size:10px;letter-spacing:2.5px;text-transform:uppercase;transition:.2s;}
.pin-btn:hover{border-color:var(--gold);color:#fff;background:rgba(255,255,255,.05);}
.pin-btn svg{flex:none;}
footer h4{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600;}
footer li{list-style:none;padding:4px 0;}
footer a:hover{color:#fff;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:11px;letter-spacing:1.5px;padding:18px;color:rgba(255,255,255,.38);}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body{font-size:16px;}
  .head{flex-wrap:wrap;gap:14px;justify-content:center;}
  nav ul{gap:18px;flex-wrap:wrap;justify-content:center;}
  .head-side{display:none;}
  .hero{height:460px;}
  .hero h1{font-size:32px;}
  .hero-body{padding:80px 20px 36px;}
  .art-hero{height:440px;}
  .art-hero h1{font-size:30px;}
  .art-hero-body{padding:90px 20px 34px;}
  .grid-3,.grid-2{grid-template-columns:1fr;gap:36px;}
  .big h3{font-size:24px;}
  .cats{grid-template-columns:repeat(2,1fr);}
  .foot{grid-template-columns:1fr 1fr;}
  section{padding-top:56px;}
  article.body h2{font-size:25px;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}