/* ==========================================================
   Philly Dynamic IFS — One-page site (v3 with teaching notes)
   EDITING GUIDE
   - Colors live in :root (search for --maroon and --cream)
   - Spacing lives in .section padding
   - Headline sizes: search for hero__text h1
   ========================================================== */

:root{
  /* COLORS (safe to tweak) */
  --ink:#141112;
  --muted:#3f3537;
  --cream:#fbf6ee;
  --white:#ffffff;
  --maroon:#701f2b;
  --maroon2:#4f141e;

  /* LAYOUT (safe to tweak) */
  --max: 1100px;
  --pad: 28px;

  /* BORDERS */
  --line: rgba(20,17,18,.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
}

a{color:var(--maroon); text-decoration:none;}
a:hover{text-decoration:underline; color:var(--maroon2);}
img{max-width:100%; height:auto; display:block;}

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

.skip{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left: 14px; top: 14px;
  width:auto; height:auto;
  padding:.55rem .75rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:10px;
  z-index:9999;
}

.topbar{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(251,246,238,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(140%);
}
.topbar__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 0;
}
.brand{
  color: var(--ink);
  text-decoration:none;
  line-height:1.05;
}
.brand__name{
  display:block;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size: 1.12rem;
}
.brand__sub{
  display:block;
  margin-top:6px;
  font-size:.9rem;
  color: rgba(20,17,18,.65);
  font-weight:500;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  justify-content:flex-end;
  align-items:center;
  font-weight:600;
}
.nav a{
  color: rgba(20,17,18,.72);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover{
  text-decoration:none;
  color: var(--maroon);
  border-bottom-color: rgba(112,31,43,.35);
}
.nav__disabled{
  opacity:.45;
  cursor:default;
}
.nav__disabled:hover{
  border-bottom-color:transparent;
  color: rgba(20,17,18,.72);
}

/* SECTIONS */
.section{ padding: 70px 0; background: transparent; }
.section--hero{ padding: 80px 0 60px; }
.section--alt{ background: var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section--statement{ background: var(--maroon); color: rgba(255,255,255,.92); padding: 56px 0; }
.section--contact{ background: var(--white); border-top: 1px solid var(--line); }

/* HERO */
.hero{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items:center;
}
.hero__art img{
  width:100%;
  max-height: 420px;
  object-fit: contain;
}
.kicker{
  margin:0 0 12px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:700;
  color: rgba(20,17,18,.62);
}
.hero__text h1{
  font-family:"Crimson Pro", ui-serif, Georgia, "Times New Roman", serif;
  font-weight:500;
  font-size: 3.1rem;
  line-height:1.02;
  margin: 0 0 18px;
  letter-spacing:.01em;
}
.lede{
  font-family:"Crimson Pro", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
  line-height:1.35;
  margin: 0 0 14px;
  color: rgba(20,17,18,.82);
}
.hero__text p{ margin: 0 0 14px; font-size: 1.05rem; color: rgba(20,17,18,.78); }
.meta{ margin-top: 18px; font-size: .98rem; color: rgba(20,17,18,.62); }

.cta{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 18px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid rgba(112,31,43,.28);
  color: var(--maroon);
  font-weight:700;
}
.btn:hover{ text-decoration:none; background: rgba(112,31,43,.06); }
.btn--primary{
  background: rgba(112,31,43,.12);
  border-color: rgba(112,31,43,.45);
  color: var(--maroon2);
}
.btn--small{ padding: 10px 14px; border-radius: 12px; }

/* Statement band */
.statement{
  text-align:center;
  font-family:"Crimson Pro", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  line-height:1.35;
  max-width: 900px;
  margin: 0 auto;
}

/* GRID SECTIONS */
.grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:start;
}
.grid--reverse{ grid-template-columns: .95fr 1.05fr; }

.grid__text h2{
  font-family:"Crimson Pro", ui-serif, Georgia, "Times New Roman", serif;
  font-weight:500;
  font-size: 2.2rem;
  margin: 0 0 10px;
}
.grid__text p{ margin: 0 0 14px; color: rgba(20,17,18,.78); font-size: 1.05rem; }
.grid__media img{
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.bullets{ margin-top: 22px; display:grid; gap: 16px; }
.bullet h3{ margin:0 0 6px; font-size: 1.05rem; font-weight:800; color: rgba(20,17,18,.88); }
.bullet p{ margin:0; }

/* FAQ */
.faq{ margin-top: 18px; max-width: 860px; }
.qa{ border-top: 1px solid var(--line); padding: 14px 0; }
.qa:last-child{ border-bottom: 1px solid var(--line); }
.qa summary{ cursor:pointer; list-style:none; font-weight:800; font-size: 1.05rem; }
.qa summary::-webkit-details-marker{ display:none; }
.qa__a{ padding-top: 10px; color: rgba(20,17,18,.78); }

/* Photo */
.photo{ margin:0; border-radius: 18px; overflow:hidden; }
.photo img{ width:100%; height: 520px; object-fit: cover; filter: saturate(95%) contrast(102%); }

/* Contact */
.contact{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items:start;
}
.contact__cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.card{
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: var(--cream);
}
.card h3{ margin:0 0 10px; font-weight:800; }
.small{ font-size: .96rem; color: rgba(20,17,18,.68); margin: 10px 0 0; }

/* Blog is hidden until you're ready */
.section--hidden{ display:none; }

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
  background: var(--cream);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.footer__name{ font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.footer__sub{ color: rgba(20,17,18,.65); margin-top: 6px; }
.footer__links{ font-weight:700; color: rgba(20,17,18,.75); }

/* Responsive */
@media (max-width: 980px){
  .hero, .grid, .contact{ grid-template-columns: 1fr; }
  .photo img{ height: 420px; }
  .contact__cards{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  :root{ --pad: 18px; }
  .hero__text h1{ font-size: 2.45rem; }
  .lede{ font-size: 1.22rem; }
  .section{ padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}