/* Point No Point — Bluff palette, Zilla Slab + Karla */

:root{
  --sand:#ece6da;
  --navy:#0f2841;
  --rust:#8a5a2b;
  --ink:#33291d;
  --contour:#c8b89c;
  --rule:rgba(51,41,29,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

body{
  font-family:'Karla',system-ui,-apple-system,sans-serif;
  background:var(--sand);
  color:var(--ink);
  line-height:1.6;
  padding-bottom:82px;
}
@media (min-width:820px){ body{padding-bottom:0} }

.wrap{max-width:760px;margin:0 auto;padding:0 26px}
a{color:var(--navy)}
img{display:block;max-width:100%;height:auto}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:var(--sand);
  padding:12px 18px;z-index:100;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- masthead ---------- */
.top{padding:34px 0 0}
.logo{width:100%;max-width:240px}
@media (min-width:820px){ .logo{max-width:300px} }

nav{
  margin-top:24px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:12px 0;
}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:22px}
nav a{
  font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  font-size:.76rem;color:var(--rust);text-decoration:none;
}
nav a:hover{color:var(--navy)}
nav a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
nav a[aria-current="page"]{color:var(--navy);text-decoration:underline;text-underline-offset:4px}

/* ---------- hero ---------- */
.hero{padding:42px 0 38px}
.hero h1{
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;
  font-size:clamp(2.4rem,8.6vw,3.8rem);line-height:1.03;
  letter-spacing:-.01em;color:var(--navy);
}
.hero p{
  margin-top:18px;max-width:32ch;color:var(--rust);
  font-size:clamp(1.06rem,4.1vw,1.28rem);
}

.contour{width:100%;color:var(--contour)}

/* ---------- prose ---------- */
.story{padding:42px 0}
.story p{font-size:clamp(1.05rem,4vw,1.18rem);max-width:52ch}
.story p + p{margin-top:18px}
.story b{color:var(--navy)}

.eyebrow{
  font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  font-size:.75rem;color:var(--rust);
}

/* ---------- photos ---------- */
.work{padding:24px 0 42px}
.work .lead{margin-top:12px;max-width:46ch}
figure{margin-top:32px}
figure img{width:100%;border-radius:3px}
figcaption{
  margin-top:10px;font-size:.9rem;color:var(--rust);
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
figcaption span{
  flex-shrink:0;opacity:.7;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;
}

.more{
  display:inline-block;margin-top:34px;
  font-weight:700;color:var(--navy);
  text-underline-offset:5px;
}

/* ---------- services ---------- */
.services{padding:42px 0}
.services ul{list-style:none;margin-top:22px}
.services li{
  font-family:'Zilla Slab',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,6vw,2rem);color:var(--navy);
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.services li:first-child{border-top:1px solid var(--rule)}
.services li small{
  display:block;font-family:'Karla',sans-serif;font-weight:400;
  font-size:.9rem;color:var(--rust);margin-top:3px;
}

/* ---------- ask list (contact page) ---------- */
.ask{padding:8px 0 4px}
.ask ol{list-style:none;counter-reset:a;margin-top:20px}
.ask li{
  counter-increment:a;position:relative;
  padding:15px 0 15px 44px;
  border-bottom:1px solid var(--rule);
  font-size:clamp(1.06rem,4.1vw,1.2rem);
}
.ask li:first-child{border-top:1px solid var(--rule)}
.ask li::before{
  content:counter(a);
  position:absolute;left:0;top:16px;
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;
  color:var(--contour);font-size:1.4rem;line-height:1;
}
.ask li small{
  display:block;font-size:.88rem;color:var(--rust);margin-top:2px;
}

/* ---------- dark band + call to action ---------- */
.area{background:var(--navy);color:var(--sand);margin-top:20px}
.area .wrap{padding-top:50px;padding-bottom:54px}
.area h2{
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;
  font-size:clamp(1.85rem,6.8vw,2.5rem);line-height:1.1;
}
.area p{margin-top:14px;max-width:36ch;color:rgba(236,230,218,.82)}
.area .alt{margin-top:20px;font-size:.94rem}
.area .alt a{color:var(--sand)}

.cta{
  display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-top:28px;
  background:var(--sand);color:var(--navy);text-decoration:none;
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;font-size:1.3rem;
  padding:18px 30px;border-radius:3px;
  transition:transform .15s ease;
}
.cta:hover{transform:translateY(-2px)}
.cta:focus-visible{outline:3px solid var(--sand);outline-offset:4px}
.cta span{font-family:'Karla',sans-serif;font-weight:400;font-size:.92rem;opacity:.62}

/* ---------- footer ---------- */
footer{padding:32px 0 54px;font-size:.88rem;color:var(--rust)}
footer p + p{margin-top:5px}
footer a{color:var(--rust)}

/* ---------- fixed text bar (phones) ---------- */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--navy);
  padding:14px 24px calc(14px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;
  box-shadow:0 -8px 24px rgba(51,41,29,.25);
}
.bar a{
  color:var(--sand);text-decoration:none;
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;font-size:1.15rem;
}
.bar a:focus-visible{outline:2px solid var(--sand);outline-offset:4px}
@media (min-width:820px){ .bar{display:none} }

/* ---------- section headers on the landing page ---------- */
.sect{padding:40px 0 8px}
.sect h2{
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;
  font-size:clamp(1.7rem,6.2vw,2.3rem);line-height:1.1;
  color:var(--navy);letter-spacing:-.01em;
}
.sect p{margin-top:12px;max-width:46ch;color:var(--rust)}

/* ---------- link through to a gallery ---------- */
.more{
  display:inline-block;margin-top:30px;
  font-family:'Zilla Slab',Georgia,serif;font-weight:700;
  font-size:1.12rem;color:var(--navy);
  text-underline-offset:5px;
}
.more:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

/* ---------- before and after pair ---------- */
.pair{margin-top:32px}
.pair figure{margin-top:0}
.pair figure + figure{margin-top:18px}
@media (min-width:700px){
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .pair figure + figure{margin-top:0}
  .pair figure img{height:100%;object-fit:cover}
}
.tag{
  display:inline-block;margin-bottom:6px;
  font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.68rem;color:var(--rust);
}