/* A Photographer's Guide — Golden Hour Theme */
:root{
  --bg:#07050a;
  --panel:#130b0b;
  --card:#140c0e;
  --text:#fff6ef;
  --muted:#d7c1b4;
  --brand:#ffcc7a;   /* sunlit gold */
  --brand2:#ff6f4d;  /* warm ember */
  --border:rgba(255,246,239,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 20px;
  --max: 1120px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  line-height:1.55;
  background:
    radial-gradient(1200px 650px at 18% 10%, rgba(255,204,122,.16), transparent 58%),
    radial-gradient(1000px 720px at 90% 0%, rgba(255,111,77,.12), transparent 60%),
    radial-gradient(700px 500px at 70% 85%, rgba(255,204,122,.08), transparent 62%),
    linear-gradient(180deg, #05040a 0%, #16090a 52%, #05040a 100%);
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--brand)}
img{max-width:100%; height:auto; border-radius:16px; box-shadow: 0 18px 60px rgba(0,0,0,.35)}

/* Soft film grain */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.07;
  mix-blend-mode:soft-light;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
/* Subtle vignette */
body::after{
  content:"";
  position:fixed;
  inset:-2px;
  pointer-events:none;
  background: radial-gradient(closest-side at 50% 35%, transparent 70%, rgba(0,0,0,.45) 100%);
  opacity:.45;
}

.container{max-width:var(--max); margin:0 auto; padding:0 18px}

.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,5,10,.93), rgba(7,5,10,.45));
  border-bottom: 1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px}
.brand{display:flex; gap:10px; align-items:center; font-weight:750; letter-spacing:.3px}
.logo{width:34px; height:34px; border-radius:12px; background: linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 10px 25px rgba(255,204,122,.12)}

.nav-links{display:flex; flex-wrap:wrap; gap:8px}
.nav-links a{padding:9px 12px; border: 1px solid transparent; border-radius: 999px; color:var(--muted)}
.nav-links a[aria-current="page"]{color:var(--text); border-color: var(--border); background: rgba(19,11,11,.55)}
.nav-links a:hover{color:var(--text); border-color: rgba(255,204,122,.22); background: rgba(19,11,11,.55)}

.hero{padding:44px 0 18px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:stretch}
@media (max-width: 900px){.hero-grid{grid-template-columns:1fr}}

.panel, .card{
  background: linear-gradient(180deg, rgba(19,11,11,.86), rgba(19,11,11,.62));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel{padding:18px}
.card{padding:16px; grid-column: span 4; transition: transform .18s ease, border-color .18s ease, background .18s ease}
.card:hover{transform: translateY(-3px); border-color: rgba(255,204,122,.30); background: linear-gradient(180deg, rgba(20,12,14,.90), rgba(20,12,14,.62))}

@media (max-width: 900px){ .card{grid-column: span 6} }
@media (max-width: 520px){ .card{grid-column: span 12} }

.kicker{display:inline-flex; gap:10px; align-items:center; font-size:13px; color:var(--muted); padding:6px 10px; border: 1px solid rgba(255,204,122,.28); border-radius:999px; background: rgba(20,12,14,.65)}

h1{font-family:var(--serif); font-size:40px; line-height:1.1; margin:14px 0 10px; letter-spacing:.2px; font-weight:650}
@media (max-width: 520px){ h1{font-size:34px} }
.section-title h2{font-family:var(--serif); letter-spacing:.2px}

.lead{color:var(--muted); font-size:16px; margin:0 0 14px}
.meta{color:var(--muted); font-size:13px; margin:0 0 10px}
.small{font-size:13px; color:var(--muted)}

.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius: 999px; border:1px solid var(--border); background: rgba(20,12,14,.55); color:var(--text)}
.btn.primary{border-color: transparent; background: linear-gradient(135deg, rgba(255,204,122,1), rgba(255,111,77,1)); color:#1b0b08; font-weight:700; box-shadow: 0 14px 34px rgba(255,204,122,.14)}
.btn:hover{transform: translateY(-1px)}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; margin: 18px 0 44px}
.card h3{margin:8px 0 6px}
.tag{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:12px; background: rgba(19,11,11,.55)}

.section-title{display:flex; align-items:end; justify-content:space-between; gap:14px; margin: 26px 0 10px}
.section-title h2{margin:0; font-size:22px}
.section-title a{color:var(--muted)}
.section-title a:hover{color:var(--brand)}

.footer{border-top:1px solid var(--border); padding:26px 0; color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: 1.3fr .7fr; gap:14px}
@media (max-width: 900px){ .footer-grid{grid-template-columns:1fr} }

.form{display:grid; gap:10px; margin-top:12px}
input, textarea{width:100%; padding:12px 12px; border-radius: 14px; border:1px solid var(--border); background: rgba(19,11,11,.7); color: var(--text)}
textarea{min-height: 140px; resize: vertical}
.note{font-size:13px; color:var(--muted)}
hr{border:0; border-top:1px solid var(--border); margin:16px 0}

/* Share strip */
.share{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:14px 0 0; padding:12px 14px; border-radius: 16px; border: 1px solid rgba(255,204,122,.18); background: rgba(20,12,14,.45)}
.share .share-links{display:flex; gap:10px; flex-wrap:wrap}
.share a{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius: 999px; border: 1px solid rgba(255,246,239,.10); background: rgba(19,11,11,.45); color: var(--muted); font-size: 13px}
.share a:hover{color: var(--text); border-color: rgba(255,204,122,.28); background: rgba(19,11,11,.62)}

@media (prefers-reduced-transparency: reduce){ body::before, body::after{display:none} }
@media (prefers-reduced-motion: reduce){ .card, .btn{transition:none} .btn:hover{transform:none} }