:root { --ink:#151515; --black:#111; --yellow:#ffd43b; --cream:#fff9df; --paper:#fffef8; --line:rgba(17,17,17,.18); --muted:#5e5e56; --radius:1.25rem; --shadow:0 24px 70px rgba(17,17,17,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; padding-bottom:76px; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; line-height:1.65; }
img { display:block; max-width:100%; }
a { color:inherit; }
.skip-link { position:fixed; top:.75rem; left:.75rem; z-index:30; padding:.75rem 1rem; color:white; background:var(--black); border-radius:.5rem; transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.test-banner { position:fixed; left:50%; bottom:1rem; z-index:25; width:max-content; max-width:calc(100% - 2rem); margin:0; padding:.72rem 1.1rem; color:white; background:rgba(17,17,17,.96); border:2px solid var(--yellow); border-radius:999px; box-shadow:0 10px 32px rgba(0,0,0,.3); font-size:.92rem; line-height:1.35; text-align:center; transform:translateX(-50%); }
.test-banner strong { color:var(--yellow); }
.wrap { width:min(1180px,calc(100% - 2.5rem)); margin-inline:auto; }
header { position:relative; z-index:20; background:var(--paper); border-bottom:1px solid var(--line); }
.topbar { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { text-decoration:none; font:700 clamp(1.25rem,2vw,1.6rem)/1.1 Georgia,serif; letter-spacing:-.025em; white-space:nowrap; }
.brand span { color:#9a6b00; }
nav { overflow-x:auto; }
nav ul { display:flex; align-items:center; gap:1.25rem; margin:0; padding:0; list-style:none; white-space:nowrap; }
nav a { text-decoration:none; color:#34342f; font-size:.88rem; font-weight:700; }
nav a:hover,nav a:focus-visible,nav a[aria-current="page"] { color:#795500; text-decoration:underline; text-underline-offset:5px; }
h1,h2,h3 { margin-top:0; font-family:Georgia,"Times New Roman",serif; line-height:1.07; letter-spacing:-.035em; }
.eyebrow { margin:0 0 1rem; color:#654700; font-size:.78rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.button,.text-link { display:inline-flex; align-items:center; min-height:46px; padding:.75rem 1.1rem; color:white; background:var(--black); border:1px solid var(--black); border-radius:999px; text-decoration:none; font-weight:800; transition:transform .2s ease,background .2s ease; }
.button:hover,.button:focus-visible,.text-link:hover,.text-link:focus-visible { background:#333; transform:translateY(-2px); }
.hero { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:470px; overflow:hidden; background:var(--yellow); }
.hero-copy,.hero-image { position:relative; z-index:2; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,6vw,5rem) clamp(2rem,6vw,5.5rem); }
.hero h1 { margin-bottom:1.35rem; font-size:clamp(2.6rem,5vw,4.8rem); }
.hero-lead { max-width:37rem; margin:0 0 1.8rem; color:#292921; font:clamp(1.08rem,1.6vw,1.35rem)/1.48 Georgia,serif; }
.hero-image { min-height:360px; overflow:hidden; }
.hero-image img { width:100%; height:100%; object-fit:cover; object-position:47% center; }
.hero-caption { position:absolute; right:1.25rem; bottom:1.25rem; margin:0; padding:.6rem .85rem; color:white; background:rgba(17,17,17,.9); border-radius:999px; font-size:.84rem; font-weight:750; }
.autumn-leaves { position:absolute; inset:0; z-index:3; overflow:hidden; pointer-events:none; }
.autumn-leaves span { position:absolute; top:-12%; left:var(--x); color:#9f3f13; font-size:var(--size); line-height:1; opacity:var(--opacity,.45); animation:leaf-fall var(--duration) linear var(--delay) infinite; }
@keyframes leaf-fall { 0%{transform:translate3d(0,-10%,0) rotate(0)} 40%{transform:translate3d(var(--sway),48vh,0) rotate(220deg)} 100%{transform:translate3d(var(--drift),118vh,0) rotate(540deg)} }
.section { padding:clamp(3.5rem,6vw,5.5rem) 0; }
.section-head { display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; align-items:end; margin-bottom:2.5rem; }
.section-head h2 { margin:0; font-size:clamp(2rem,3.5vw,3.6rem); }
.section-head p { max-width:42rem; margin:0; color:var(--muted); font-size:1.08rem; }
.updates { background:var(--paper); }
.update-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; }
.update-card { min-height:285px; display:flex; flex-direction:column; justify-content:space-between; padding:1.55rem; background:white; border:2px solid var(--black); border-radius:var(--radius); box-shadow:8px 8px 0 var(--yellow); }
.update-meta { color:#735000; font-size:.78rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.update-card h3 { margin:1.3rem 0 .8rem; font-size:clamp(1.55rem,2vw,2rem); }
.update-card p { margin:0 0 1.4rem; color:#55554e; }
.update-card .text-link { align-self:flex-start; min-height:42px; padding:.6rem .9rem; }
.section-dark { color:white; background:var(--black); }
.section-dark h2 { color:white; }
.category-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.18); }
.category-card { padding:2rem; background:var(--black); text-decoration:none; }
.category-card:hover,.category-card:focus-visible { background:#262626; }
.category-card span { color:var(--yellow); font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.category-card h3 { margin:1rem 0 .75rem; font-size:1.8rem; }
.category-card p { margin:0; color:#d9d6cc; }
.page-hero { padding:clamp(3.5rem,8vw,7rem) 0; background:var(--yellow); }
.page-hero h1 { max-width:850px; margin-bottom:1.2rem; font-size:clamp(2.7rem,6vw,5.4rem); }
.page-hero p { max-width:720px; margin:0; color:#373326; font:clamp(1.08rem,2vw,1.35rem)/1.5 Georgia,serif; }
.post-preview-photo { grid-template-columns:160px minmax(0,1fr) auto; }
.post-preview-photo > img { width:160px; height:112px; object-fit:cover; border:2px solid var(--black); border-radius:.7rem; }
.memory-photo { margin:2rem 0; }
.memory-photo img { width:100%; max-height:360px; object-fit:cover; border:2px solid var(--black); border-radius:var(--radius); }
.memory-photo figcaption { margin-top:.55rem; color:#6a685f; font-size:.82rem; line-height:1.45; }
.memory-photo-wide img { max-height:390px; }
.memory-gallery { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.memory-gallery .memory-photo { margin:1rem 0 2rem; }
.tofik-quote { margin:2.4rem 0; padding:1.35rem 1.5rem; background:var(--cream); border:2px solid var(--black); border-left:9px solid var(--yellow); border-radius:var(--radius); font:1.2rem/1.6 Georgia,serif; }
.tofik-quote cite { display:block; margin-top:.65rem; color:#735000; font-size:.9rem; font-style:normal; font-weight:850; }
.listing { display:grid; gap:1.25rem; }
.post-preview { display:grid; grid-template-columns:160px 1fr auto; gap:1.5rem; align-items:center; padding:1.5rem; background:white; border:2px solid var(--black); border-radius:var(--radius); }
.post-date { color:#735000; font-size:.78rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.post-preview h2 { margin:.35rem 0 .55rem; font-size:clamp(1.6rem,3vw,2.4rem); }
.post-preview p { margin:0; color:var(--muted); }
.empty-state { padding:2rem; background:var(--cream); border:2px solid var(--black); border-radius:var(--radius); }
.empty-state h2 { margin-bottom:.75rem; }
.feature { display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; background:var(--cream); border:2px solid var(--black); border-radius:calc(var(--radius) + .4rem); box-shadow:12px 12px 0 var(--yellow); }
.feature-copy { padding:clamp(2.25rem,6vw,5.5rem); }
.feature-copy h2 { margin-bottom:1.25rem; font-size:clamp(2.2rem,4vw,4rem); }
.feature-copy p { max-width:38rem; margin:0 0 1.1rem; color:#4c4c45; font-size:1.08rem; }
.feature-image { min-height:440px; }
.feature-image img { width:100%; height:100%; object-fit:cover; object-position:48% center; }
.rule { display:inline-block; margin-top:1rem; padding:.55rem .8rem; background:var(--yellow); font-weight:850; }
.article { width:min(780px,calc(100% - 2.5rem)); margin:0 auto; padding:clamp(3rem,7vw,6rem) 0; }
.article .back { display:inline-block; margin-bottom:2rem; color:#735000; font-weight:800; text-underline-offset:4px; }
.article h1 { margin-bottom:1rem; font-size:clamp(2.6rem,6vw,5rem); }
.article-meta { margin-bottom:2.5rem; color:#735000; font-size:.82rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.article p { margin:0 0 1.35rem; color:#3f3f39; font:1.16rem/1.78 Georgia,serif; }
.signature { color:#8a6100!important; font-size:1.5rem!important; font-style:italic; }
.gallery-section { color:white; background:var(--black); }
.gallery { display:grid; grid-template-columns:repeat(5,110px); justify-content:center; align-items:start; gap:.85rem; }
.gallery figure { margin:0; }
.photo-button { width:110px; height:110px; display:block; padding:0; overflow:hidden; background:transparent; border:2px solid var(--yellow); border-radius:.7rem; cursor:zoom-in; }
.photo-button img { width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .3s ease; }
.photo-button:hover img,.photo-button:focus-visible img { transform:scale(1.025); }
.gallery figcaption { display:none; }
.gallery strong { color:var(--yellow); }
dialog { width:min(94vw,1180px); max-height:92vh; padding:0; overflow:hidden; background:var(--black); border:2px solid var(--yellow); border-radius:var(--radius); box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(0,0,0,.82); }
dialog img { width:100%; max-height:calc(92vh - 88px); object-fit:contain; }
#dialog-caption { margin:0; padding:1rem 1.25rem 1.1rem; color:white; background:var(--black); font:1rem/1.5 Georgia,serif; text-align:center; }
#dialog-caption strong { color:var(--yellow); }
.dialog-close { position:absolute; top:.85rem; right:.85rem; width:44px; height:44px; color:var(--black); background:var(--yellow); border:2px solid var(--black); border-radius:50%; font-size:1.5rem; font-weight:900; cursor:pointer; }
.contact-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,7vw,6rem); align-items:start; }
.contact-copy h2 { margin-bottom:1.15rem; font-size:clamp(2.1rem,3.5vw,3.6rem); }
.contact-copy p { color:var(--muted); font-size:1.08rem; }
.contact-form { display:grid; gap:1.1rem; padding:clamp(1.5rem,4vw,2.5rem); background:white; border:2px solid var(--black); border-radius:var(--radius); box-shadow:10px 10px 0 var(--yellow); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-field { display:grid; gap:.4rem; }
.form-field label { font-weight:750; }
.form-field input,.form-field textarea { width:100%; padding:.8rem .9rem; color:var(--ink); background:var(--paper); border:1px solid #8b897f; border-radius:.65rem; font:inherit; }
.form-field textarea { min-height:160px; resize:vertical; }
.form-field input:focus-visible,.form-field textarea:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
.consent { display:flex; align-items:flex-start; gap:.65rem; color:#4d4d46; font-size:.9rem; line-height:1.45; }
.consent input { width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--black); }
.contact-form .button { cursor:pointer; }
.form-note { margin:-.2rem 0 0; color:#66645c; font-size:.82rem; }
footer { padding:2.4rem 0; color:#ece9db; background:var(--black); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
footer p { margin:0; }
footer a { color:var(--yellow); text-underline-offset:4px; }
.footer-counter { display:flex; align-items:center; gap:.55rem; color:#ece9db; font-size:.8rem; white-space:nowrap; }
.footer-counter .footer-counter-value { display:inline-flex; align-items:center; min-width:2ch; min-height:1.25rem; color:var(--yellow); font-weight:700; }
.footer-counter-source { color:#c9c6b9; }
.footer-counter-source a { color:var(--yellow); }
@media (max-width:950px) { .topbar{align-items:flex-start;flex-direction:column;gap:.7rem;padding:1rem 0} nav{width:100%;padding-bottom:.2rem} .hero{grid-template-columns:1fr} .hero-image{min-height:340px} .section-head{grid-template-columns:1fr;align-items:start} .update-grid{grid-template-columns:repeat(2,1fr)} .category-grid{grid-template-columns:1fr} .post-preview,.post-preview-photo{grid-template-columns:1fr} .post-preview-photo > img{width:100%;height:180px} .feature{grid-template-columns:1fr} .feature-image{min-height:360px} .gallery{grid-template-columns:repeat(2,1fr)} .contact-layout{grid-template-columns:1fr} }
@media (max-width:620px) { body{padding-bottom:94px} .wrap,.article{width:min(100% - 1.5rem,1180px)} nav ul{gap:1rem} .hero-copy{padding:3rem 1.25rem} .hero-image{min-height:270px} .hero-caption{right:.75rem;bottom:.75rem} .autumn-leaves span:nth-child(n+7){display:none} .update-grid,.gallery,.memory-gallery{grid-template-columns:1fr} .form-row{grid-template-columns:1fr} .feature{box-shadow:7px 7px 0 var(--yellow)} .footer-inner{align-items:flex-start;flex-direction:column} .test-banner{bottom:.65rem;width:calc(100% - 1.25rem);max-width:none;padding:.65rem .85rem;border-radius:.85rem;font-size:.84rem} }
@media (max-width:950px) { .gallery{grid-template-columns:repeat(3,105px);justify-content:center} .photo-button{width:105px;height:105px} }
@media (max-width:620px) { .gallery{grid-template-columns:repeat(2,96px);justify-content:center;gap:.75rem} .photo-button{width:96px;height:96px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important} .autumn-leaves{display:none} }