/* Ranch Roscoe — "Quiet North". Pale paper, light serif, hairlines, air. Light only, on purpose. */
:root { --bg:#f4f3ef; --ink:#1e2124; --body:#4b5358; --muted:#6a737a; --faint:#a3a9ae; --rule:rgba(30,33,36,.15); --rule-strong:#1e2124; --wash:rgba(20,28,36,.18); }
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:300; -webkit-font-smoothing:antialiased; line-height:1.5 }
a { color:var(--ink); text-decoration:none } a:hover { color:#5b6a72 }
.serif, h1, h2, h3 { font-family:'Cormorant Garamond','Times New Roman',Georgia,serif; font-weight:300; margin:0 }
.lbl { font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:400; color:var(--muted) }
.ph { color:#9a3f2e; font-style:italic }           /* "EDIT ME" placeholders */
.wrap { max-width:1440px; margin:0 auto; padding:0 64px }
.grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px }
.c2-3 { grid-column:2 / span 3 } .c5-7 { grid-column:5 / span 7 } .c2-10 { grid-column:2 / span 10 } .c2-6 { grid-column:2 / span 6 } .c9-3 { grid-column:9 / span 3 }

/* nav */
nav.top { display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 64px }
nav.top .brand { font-size:12px; letter-spacing:.32em; text-transform:uppercase; font-weight:400 }
nav.top .links { display:flex; gap:40px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:400 }
nav.top .links a.on { border-bottom:1px solid var(--ink); padding-bottom:2px }
nav.top .links .who { color:var(--muted); font-weight:300; letter-spacing:.1em; text-transform:none }
nav.top button.menu { display:none; background:none; border:0; padding:8px; cursor:pointer }
nav.top form { display:inline } nav.top form button { background:none; border:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--muted); cursor:pointer; padding:0 }

/* hero */
.hero { position:relative; height:760px; overflow:hidden; background:#26313b }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block }
.hero .wash { position:absolute; inset:0; background:var(--wash) }
.hero .in { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; color:#f4f3ef; text-align:center; padding:0 24px }
.hero h1 { font-size:88px; letter-spacing:.06em; line-height:1 }
.hero .bar { width:40px; height:1px; background:rgba(244,243,239,.7) }
.hero .tag { font-family:'Cormorant Garamond',Georgia,serif; font-size:24px; font-style:italic; letter-spacing:.02em }
.hero .fact { position:absolute; bottom:28px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,243,239,.75) }
.hero .fact.l { left:64px } .hero .fact.r { right:64px }

/* rows */
.linkrow { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 0; border-bottom:1px solid var(--rule-strong); min-height:44px }
.linkrow .t { display:flex; align-items:baseline; gap:28px; flex-wrap:wrap } .linkrow h2 { font-size:28px; font-weight:400 } .linkrow .s { font-size:15px; color:var(--body) }
.linkrow svg { flex:none }
section.block { padding:112px 0 0 } section.block.last { padding-bottom:128px }
.lead { font-size:34px; line-height:1.35; text-wrap:pretty }
.about { font-size:17px; line-height:1.65; color:var(--body); max-width:62ch; margin-top:28px }
.hl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 32px }
.hl > div { border-top:1px solid var(--rule-strong); padding-top:18px; display:flex; flex-direction:column; gap:10px }
.hl h3 { font-size:24px; font-weight:400 } .hl p { margin:0; font-size:15px; line-height:1.55; color:var(--body) }
figure.photo { margin:0; height:460px; overflow:hidden; background:#d9d2c4 } figure.photo img { width:100%; height:100%; object-fit:cover; display:block }
.caption { display:flex; flex-direction:column; gap:14px; padding-bottom:8px } .caption .q { font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-style:italic; line-height:1.45 }
footer.site { display:flex; justify-content:space-between; align-items:center; padding:28px 64px; border-top:1px solid var(--rule); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }

/* page heads */
.pagehead { padding:96px 0 72px } .pagehead h1 { font-size:64px; line-height:1; letter-spacing:.01em } .pagehead .intro { font-size:17px; line-height:1.65; color:var(--body); max-width:60ch; margin-top:20px }

/* accordions (instructions) */
.acc { border-top:1px solid var(--rule-strong) }
.acc details { border-bottom:1px solid var(--rule) } .acc details:last-child { border-bottom:1px solid var(--rule-strong) }
.acc summary { list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:34px 0; cursor:pointer; min-height:44px }
.acc summary::-webkit-details-marker { display:none }
.acc summary .h { display:flex; flex-direction:column; gap:8px } .acc summary h2 { font-size:38px; font-weight:400; line-height:1.05 }
.acc summary .sub { font-size:16px; line-height:1.55; color:var(--body); max-width:60ch } details[open] summary .sub { display:none }
.acc summary .pm { flex:none; width:20px; height:20px; position:relative } .acc summary .pm::before, .acc summary .pm::after { content:""; position:absolute; background:var(--ink); left:2px; right:2px; top:9.5px; height:1px }
.acc summary .pm::after { transform:rotate(90deg) } details[open] summary .pm::after { display:none }
.acc .body { padding:8px 0 56px }
.groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 64px }
.group { display:flex; flex-direction:column; gap:14px } .group ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }
.group li label { display:flex; gap:14px; align-items:flex-start; font-size:16px; line-height:1.5; cursor:pointer }
.group li input { appearance:none; width:14px; height:14px; border:1px solid var(--ink); flex:none; margin:5px 0 0; background:none; cursor:pointer }
.group li input:checked { background:var(--ink) } .group li input:checked + span { color:var(--muted); text-decoration:line-through }
.group li .note { display:block; font-size:14px; color:var(--muted) }
.tools { display:flex; gap:24px; align-items:center; margin-top:32px; font-size:13px; letter-spacing:.12em; text-transform:uppercase } .tools button, .tools a { background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--muted); cursor:pointer; border-bottom:1px solid var(--rule) }
.prose { font-size:17px; line-height:1.65; color:var(--body); max-width:62ch } .prose ul { padding-left:1.1em } .prose li { margin:.3em 0 }
.cols2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 64px }
dl.kv { margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 24px; font-size:16px } dl.kv dt { color:var(--muted) } dl.kv dd { margin:0 }

/* forms */
form.f { display:flex; flex-direction:column; gap:16px; max-width:640px }
form.f label { display:flex; flex-direction:column; gap:6px } form.f label span { font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:400; color:var(--muted) }
form.f input, form.f textarea { font:inherit; font-weight:300; padding:10px 0; border:0; border-bottom:1px solid var(--ink); background:none; color:var(--ink); border-radius:0; outline:none; min-height:44px }
form.f textarea { min-height:100px; resize:vertical } form.f .row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:24px }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 28px; border:1px solid var(--ink); background:var(--ink); color:#f4f3ef; font:inherit; font-size:12px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; align-self:flex-start }
.btn.ghost { background:none; color:var(--ink) } .btn.sm { min-height:36px; padding:6px 16px; font-size:11px }
.err { color:#9a3f2e; font-size:15px }
.gate { border-top:1px solid var(--rule); padding-top:24px; font-size:15px; color:var(--body) } .gate a { border-bottom:1px solid var(--ink) }

/* logs (notes, stays, comments) */
.log { list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-strong) }
.log li { padding:24px 0; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:200px 1fr; gap:24px }
.log .meta { display:flex; flex-direction:column; gap:4px } .log .meta b { font-weight:400 } .log .meta span { font-size:13px; color:var(--muted) }
.log .txt { font-size:17px; line-height:1.6; color:var(--body); white-space:pre-line }
.empty { color:var(--faint); font-style:italic; padding:24px 0 }

/* renovation */
.idea { padding:48px 0; border-top:1px solid var(--rule-strong) } .idea:first-child { border-top:0 }
.idea .head { display:grid; grid-template-columns:120px 1fr auto; gap:32px; align-items:baseline }
.idea h2 { font-size:38px; font-weight:400; line-height:1.05 } .idea .meta { display:flex; gap:24px; flex-wrap:wrap; margin-top:10px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.idea .sum { font-size:20px; line-height:1.5; margin:24px 0 0; max-width:64ch; font-family:'Cormorant Garamond',Georgia,serif }
.idea .details { margin:16px 0 0; padding-left:1.1em; color:var(--body); font-size:16px; max-width:64ch } .idea .details li { margin:.3em 0 }
.idea .imgs { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px } .idea .imgs img { height:180px; width:auto; display:block }
.vote { display:flex; flex-direction:column; align-items:flex-end; gap:6px } .vote .n { font-family:'Cormorant Garamond',Georgia,serif; font-size:44px; line-height:1 } .vote .who { font-size:12px; color:var(--muted); text-align:right; max-width:200px }
.idea .thread { margin-top:32px; display:grid; grid-template-columns:120px 1fr; gap:32px } .idea .thread .log li { grid-template-columns:160px 1fr; padding:16px 0 } .idea .thread .log { border-top:1px solid var(--rule) }
.idea .thread form.f { margin-top:16px; max-width:560px }
.status { font-weight:400 } .status.st-done { color:#4f6b3a } .status.st-in-progress { color:#8a4b2a }

/* published remodel designs */
.publication-list { display:flex; flex-direction:column; gap:48px }
.publication-card { border-top:1px solid var(--rule-strong); padding-top:24px }
.publication-card > a { display:grid; grid-template-columns:minmax(280px,1.35fr) minmax(240px,1fr); gap:36px; align-items:start }
.publication-card img { width:100%; height:auto; display:block; background:#d9d2c4 }
.publication-copy { padding-top:8px }.publication-copy h2 { margin-top:10px; font-size:40px; line-height:1.05 }
.publication-copy p { color:var(--body); font-size:16px; line-height:1.6; margin:16px 0 }
.publication-count { color:var(--muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase }
.publication-images { max-width:1200px; margin:0 auto; padding-bottom:128px; display:flex; flex-direction:column; gap:88px }
.publication-image { border-top:1px solid var(--rule-strong); padding-top:22px }
.publication-image-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:18px }
.publication-image-head h2 { font-size:34px; margin-top:4px }
.public-image-wrap { position:relative; line-height:0; background:#d9d2c4 }
.public-comment-image { width:100%; height:auto; display:block; cursor:crosshair }
.public-pin { position:absolute; z-index:2; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; display:grid; place-items:center; background:#d4632a; color:#fff; font:500 12px/1 'Jost',sans-serif; box-shadow:0 2px 10px rgba(0,0,0,.28); pointer-events:none }
.public-pin.pending { background:var(--ink) }
.public-pin[hidden] { display:none }
.public-thread { list-style:none; padding:0; margin:20px 0 0; border-top:1px solid var(--rule) }
.public-thread li { padding:16px 0; border-bottom:1px solid var(--rule) }.public-thread b { font-weight:400 }.public-thread span { color:var(--muted); font-size:12px; margin-left:12px }
.public-thread p { margin:6px 0 0; color:var(--body); white-space:pre-wrap }
.public-comment-form { margin-top:22px }

/* phone */
@media (max-width: 720px) {
  .wrap { padding:0 24px } .grid { display:flex; flex-direction:column; gap:18px } .c2-3 { padding-top:0 !important }
  nav.top { height:56px; padding:0 20px } nav.top .brand { font-size:11px; letter-spacing:.3em }
  nav.top .links { display:none; position:absolute; top:56px; left:0; right:0; background:var(--bg); flex-direction:column; gap:0; padding:8px 24px 16px; border-bottom:1px solid var(--rule); z-index:5 }
  nav.top .links a, nav.top .links form { padding:12px 0; border-top:1px solid var(--rule) } nav.top .links a.on { border-bottom:0 }
  nav.top.open .links { display:flex } nav.top button.menu { display:block }
  .hero { height:560px } .hero h1 { font-size:52px; letter-spacing:.05em } .hero .tag { font-size:20px } .hero .fact { font-size:10px; bottom:18px } .hero .fact.l { left:20px } .hero .fact.r { right:20px }
  .linkrow { padding:22px 0 } .linkrow .t { flex-direction:column; gap:4px } .linkrow h2 { font-size:24px } .linkrow .s { font-size:14px }
  section.block { padding:64px 0 0 } section.block.last { padding-bottom:64px }
  .lead { font-size:26px } .about { font-size:16px; margin-top:16px }
  .hl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px } .hl h3 { font-size:21px } .hl p { font-size:14px }
  figure.photo { height:300px; margin-right:-24px } .caption .q { font-size:21px }
  footer.site { flex-direction:column; align-items:flex-start; gap:8px; padding:22px 24px 32px; font-size:10px }
  .pagehead { padding:48px 0 40px } .pagehead h1 { font-size:44px } .pagehead .intro { font-size:16px; margin-top:14px }
  .acc summary { padding:26px 0; align-items:flex-start } .acc summary h2 { font-size:30px } .acc summary .sub { font-size:15px } .acc .body { padding:0 0 40px }
  .groups, .cols2 { grid-template-columns:1fr; gap:28px }
  .log li { grid-template-columns:1fr; gap:8px } .log .txt { font-size:16px }
  .idea { padding:32px 0 } .idea .head { grid-template-columns:1fr auto; gap:16px } .idea .head .lbl { grid-column:1 / -1 } .idea h2 { font-size:30px } .idea .sum { font-size:18px }
  .idea .thread { grid-template-columns:1fr; gap:12px } .idea .thread .log li { grid-template-columns:1fr }
  .vote .n { font-size:36px }
  .publication-card > a { grid-template-columns:1fr; gap:18px }.publication-copy h2 { font-size:31px }
  .publication-images { padding-bottom:64px; gap:56px }.publication-image-head { align-items:start }.publication-image-head h2 { font-size:29px }
}