@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..800;1,6..72,400..800&family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700;800&display=swap');
/* ======================================================================
fp-skin.css - THE ONE STYLESHEET FOR FRONT PORCH (2026-09-22).
Lifted VERBATIM out of back-porch.html, which is where this skin was designed
(2026-09-20, the Portal's clothes). Nothing here is new, and nothing here is
page-specific: tokens, the band and nav, the section rule, the card, the search
bar and its suggestions, the (i) explainer, the sign-in gate.
A page links this and then adds only what is ITS OWN. Adding a page-specific
rule here is how one stylesheet becomes five again.
THE FONTS COME WITH IT (2026-09-22). The three the Portal uses - Newsreader,
Inter, Barlow Condensed - are imported at the top of this file, so a page that
links the skin cannot end up wearing Georgia because someone forgot the .
That is exactly what Donor Lookup did on its first reskinned deploy.
====================================================================== */
:root{
--paper:#F7F6F2; --card:#FFFFFF; --ink:#1D1D1F;
--text:#1A1A18; --text-2:#5F5C54; --text-3:#85817A;
--line:#E8E4DA; --line-soft:#F3F1EA;
--red:#B5302A; --brass:#B8945C; --brass-text:#8A6D22;
--gold-bg:#FBF3DE; --gold-line:#E6D3A0; --gold-deep:#4A3B14;
--ok:#3F6B3A;
--serif:'Newsreader',Georgia,'Times New Roman',serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--cond:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
}
*{box-sizing:border-box;}
html{background:var(--paper);}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--brass-text);text-decoration:none;}
a:hover{color:#5E4A17;}
.num{font-variant-numeric:tabular-nums;}
/* ---- band: the porch photo, the nav inside it, washing out into paper */
.band{position:relative;height:290px;overflow:hidden;background:var(--ink);}
.band .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.band .wash{position:absolute;inset:0;background:linear-gradient(180deg,
rgba(24,24,26,.90) 0%, rgba(24,24,26,.56) 26%, rgba(32,30,28,.34) 58%,
rgba(247,246,242,.86) 93%, var(--paper) 100%);}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;
gap:24px;padding:0 48px;height:76px;flex-wrap:nowrap;}
/* THE BRAND IS THE SWING AND "tmp" (2026-09-22, Adam) - the same mark Front Porch's
own nav wears: red swing, brass italic wordmark. Spelling out "Twenty Manor
Projects" was Back Porch's alone and read as a different product. */
.nav .brand{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none;}
.nav .brand .swing{width:42px;height:34px;color:var(--red);flex:none;}
.nav .brand .tmp{font-family:var(--serif);font-size:32px;font-style:italic;font-weight:400;
color:var(--brass);letter-spacing:-.025em;line-height:.85;}
.nav .right{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;min-width:0;}
.nav .right a{white-space:nowrap;}
.nav .right a{font-family:var(--cond);font-size:15px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:#DAD6CC;}
.nav .right a:hover{color:#fff;}
.nav .av{width:32px;height:32px;border-radius:50%;background:var(--brass);color:var(--ink);
font-family:var(--sans);font-size:13px;font-weight:600;display:flex;align-items:center;
justify-content:center;flex:none;border:0;cursor:pointer;padding:0;}
.nav .av:hover{filter:brightness(1.08);}
/* ---- the Tasks pill, in the bar. The dot only shows when something is open,
and it pulses on a slow cycle - the same treatment as Front Porch's own. */
/* THE PILL SITS ON A PHOTOGRAPH, so an outline alone is at the mercy of whatever
is behind it - on the brick it nearly vanished (Adam, 2026-09-22). It now carries
its own dark ground: a translucent fill that darkens the photo under the pill only,
so the contrast is the pill's, not the picture's. Blur is a progressive nicety -
where backdrop-filter is unsupported the flat fill already does the work. */
.nav .fp-tasks{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
border:1px solid rgba(255,255,255,.34);border-radius:8px;font-family:var(--cond);
font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:#F4F1E9;text-decoration:none;
background:rgba(18,18,17,.42);
-webkit-backdrop-filter:saturate(140%) blur(6px);backdrop-filter:saturate(140%) blur(6px);
box-shadow:0 1px 10px rgba(0,0,0,.26);
transition:background .16s ease,border-color .16s ease;}
.nav .fp-tasks:hover{background:rgba(18,18,17,.62);border-color:rgba(255,255,255,.7);color:#fff;}
.nav .fp-tasks b{color:#F0968E;font-weight:700;margin-left:2px;}
.fp-dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;display:none;
box-shadow:0 0 6px rgba(181,48,42,.5);}
.nav .fp-tasks.has-tasks .fp-dot{display:inline-block;animation:fp-pulse 5.5s ease-in-out infinite;}
@keyframes fp-pulse{
0%,72%{box-shadow:0 0 6px rgba(181,48,42,.5);transform:scale(1);}
82%{box-shadow:0 0 16px rgba(181,48,42,1),0 0 28px rgba(181,48,42,.45);transform:scale(1.35);}
92%,100%{box-shadow:0 0 6px rgba(181,48,42,.5);transform:scale(1);}
}
@media(max-width:700px){
.nav .fp-tasks{padding:6px 11px;letter-spacing:.08em;font-size:13px;gap:6px;
white-space:nowrap;flex:none;}
}
/* ---- the nav menu: the map of the house, behind the circle (2026-09-22).
Groups closed except the one you are in - "I don't want to have every single
one automatically there" - and opened one click at a time, the same move as
the Portal's client switcher. */
/* THE MENU HANGS FROM THE BODY, NOT THE BAND. The band clips its photo with
overflow:hidden, so a panel inside it is cut off at the wash - which is exactly
what the first build did. Fixed position, placed under the circle by fp-nav.js. */
.fp-menu{position:fixed;z-index:60;width:264px;
background:var(--card);border:1px solid var(--line);border-radius:14px;
box-shadow:0 18px 44px rgba(20,20,19,.22);padding:8px 0;display:none;text-align:left;
max-height:calc(100vh - 96px);overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;}
.fp-menu::-webkit-scrollbar{width:9px;}
.fp-menu::-webkit-scrollbar-thumb{background:#D8D2C6;border-radius:9px;border:3px solid var(--card);}
.fp-menu.open{display:block;}
.fp-who{padding:10px 16px 12px;border-bottom:1px solid var(--line-soft);}
.fp-who b{display:block;font-family:var(--serif);font-size:17px;font-weight:400;color:var(--text);}
.fp-who span{display:block;font-size:12.5px;color:var(--text-3);}
/* A PHONE BROWSER TURNED THE NAME + EMAIL INTO LINKS (Adam's phone, 2026-09-22): its
entity detector wrapped "Waldeck adam@..." in its own , which broke the name onto two
lines with a gap and underlined both. Whatever it injects inside the name block is
flattened back to plain text here. */
/* Chrome on iOS does it AFTER load (Adam: "first it's correct, then my last name drops
down"): it wraps detected names/emails in with an underline. */
.fp-who a,.fp-who chrome_annotation{color:inherit!important;text-decoration:none!important;
font:inherit!important;display:inline!important;border:0!important;background:none!important;
padding:0!important;margin:0!important;pointer-events:none;}
.fp-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:2px 8px 2px 0;}
.fp-menu .fp-head a{flex:1;padding:10px 6px 10px 16px;font-family:var(--cond);font-size:15px;
font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-2);}
.fp-menu .fp-head a:hover{color:var(--text);background:#FBF7EE;}
.fp-caret{background:none;border:0;padding:8px;color:var(--text-3);cursor:pointer;line-height:0;}
.fp-caret:hover{color:var(--text);}
.fp-caret svg{transition:transform .15s ease;}
.fp-grp.on .fp-head a{color:var(--text);}
.fp-grp.on .fp-caret svg{transform:rotate(180deg);}
.fp-items{display:none;padding:0 0 8px;}
.fp-grp.on .fp-items{display:block;}
/* .nav .right a is brass caps for the header links - a menu row is not that. */
.fp-menu .fp-items a{display:block;padding:8px 16px 8px 26px;font-family:var(--sans);
font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-2);}
.fp-menu .fp-items a:hover{background:#FBF7EE;color:var(--text);}
/* A group with no children (Back Porch) - no caret, set off from the list above. */
.fp-menu .fp-solo{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-soft);}
.fp-menu .fp-solo .fp-head a{padding-right:16px;}
.fp-foot{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:6px;display:flex;
justify-content:space-between;gap:8px;}
.fp-foot button{background:none;border:0;padding:8px 16px;font:inherit;font-size:13.5px;
color:var(--text-2);cursor:pointer;}
.fp-foot button:hover{color:var(--red);}
.title{position:relative;padding:30px 48px 0;}
.title h1{margin:0;font-family:var(--serif);font-weight:400;font-size:58px;line-height:1;
letter-spacing:-.02em;color:#fff;}
.title h1 em{font-style:italic;color:inherit;} /* a page-level `h1 em` (Courier) must not tint the band */
/* optional dictionary-style subtitle (data-pron / data-sub on the band) */
.title.has-def{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;}
.title .pron{font-family:var(--serif);font-size:22px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.65);}
.title .pron i{color:#E3C48E;margin-left:6px;}
.title .band-sub .num{font-style:normal;font-weight:600;color:#E3C48E;margin-right:8px;}
.title .band-sub{flex-basis:100%;margin:10px 0 0;font-family:var(--serif);font-style:italic;font-size:21px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.65);}
.wrap{display:flex;flex-direction:column;gap:24px;padding:24px 48px 64px;max-width:1360px;margin:0 auto;}
/* ---- section heading: the black bar-and-rule, same as the Portal's screens */
.sec{display:flex;align-items:center;gap:16px;margin:4px 0 14px;}
.sec h2{margin:0;font-family:var(--cond);font-weight:700;font-size:23px;letter-spacing:.10em;
text-transform:uppercase;color:var(--text);}
.sec .rule{flex:1;height:1px;background:var(--text);opacity:.12;}
.sub-lab{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.16em;
text-transform:uppercase;color:var(--brass-text);}
/* ---- one card treatment, borrowed from the Portal */
.card{background:linear-gradient(180deg,#FFFFFF 0%,#FBFAF6 100%);border:1px solid var(--line);
border-radius:14px;box-shadow:0 1px 2px rgba(20,20,19,.04);}
/* ---- search: what Donor Lookup became */
.searchbar{display:flex;align-items:center;gap:12px;background:var(--card);
border:1px solid var(--line);border-radius:12px;padding:6px 8px 6px 18px;}
.searchbar svg{flex:none;}
.searchbar input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--text);
background:none;padding:12px 0;min-width:0;}
.searchbar button{font-family:var(--cond);font-size:15px;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:#fff;background:var(--ink);border:0;border-radius:8px;
padding:12px 22px;cursor:pointer;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
#gate,#denied{text-align:center;padding:78px 24px;background:var(--card);border:1px solid var(--line);
border-radius:16px;margin:24px 48px;}
#gate p,#denied p{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--text-2);margin:0 0 20px;}
.btn-red{background:var(--red);color:#fff;border:0;border-radius:999px;padding:12px 26px;
font-family:var(--cond);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;}
#denied a{color:var(--red);font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase;font-size:13px;}
/* ---- search suggestions: the answer under the bar, not a page away */
.searchwrap{position:relative;}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);
border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(20,20,19,.12);
overflow:hidden;display:none;}
.sugg.open{display:block;}
.sugg button{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;background:none;
border:0;border-bottom:1px solid var(--line-soft);padding:11px 16px;font:inherit;font-size:14px;
color:var(--text);cursor:pointer;}
.sugg button:last-child{border-bottom:0;}
.sugg button:hover,.sugg button.on{background:#FBF7EE;}
.sugg .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sugg .meta{color:var(--text-3);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sugg .gave{margin-left:auto;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;}
.sugg .more{color:var(--text-2);font-family:var(--cond);letter-spacing:.08em;text-transform:uppercase;
font-size:13px;font-weight:700;}
.sugg .none{padding:12px 16px;font-size:13.5px;color:var(--text-3);}
/* ---- the (i): one line of plain English on hover or focus, nothing more */
.info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
border:1px solid #C9C3B5;color:var(--text-3);font-family:Georgia,serif;font-style:italic;
font-size:11px;line-height:1;cursor:help;position:relative;flex:none;vertical-align:1px;margin-left:6px;}
.info:hover,.info:focus{color:var(--text);border-color:var(--text-3);outline:0;}
.info:hover::after,.info:focus::after{content:attr(data-tip);position:absolute;z-index:20;
left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:max-content;max-width:240px;
background:var(--ink);color:#fff;font-family:var(--sans);font-style:normal;font-size:12.5px;
line-height:1.4;padding:8px 11px;border-radius:7px;white-space:normal;text-align:left;
box-shadow:0 6px 18px rgba(0,0,0,.18);}
/* ---- FRONT PORCH TABS (2026-09-24). data-tabs="front" on the band: the
sections across the top in the Portal's shape - condensed caps, the current
one white and underlined. fp-nav.js writes the markup. */
.nav .tabs{display:flex;align-items:center;gap:30px;min-width:0;margin-right:auto;margin-left:40px;}
.nav .tabs a,.nav .tabs .soon{font-family:var(--cond);font-size:16px;font-weight:600;letter-spacing:.13em;
text-transform:uppercase;color:#D2D8E2;text-decoration:none;white-space:nowrap;
padding:3px 0;border-bottom:2px solid transparent;}
.nav .tabs a:hover{color:#fff;}
.nav .tabs a.on{color:#fff;font-weight:700;border-bottom-color:var(--red);}
.nav .tabs .soon{color:rgba(218,214,204,.42);cursor:default;}
.nav .tabs .soon em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.01em;
font-size:13px;font-weight:400;margin-left:3px;}
/* Adam's door to Back Porch - brass, apart from the sections, beside the circle. */
.nav .right a.bp-door{color:var(--brass);}
.nav .right a.bp-door:hover{color:#E3C58E;}
/* ---- phone. Only the SHARED pieces; a page's own layout stays on the page. */
@media(max-width:700px){
.band{height:200px;}
.nav{padding:0 16px;height:58px;gap:10px;}
/* the wordmark stays on a phone - it is two letters now, not a company name */
.nav .brand .swing{width:32px;height:26px;}
.nav .brand .tmp{font-size:26px;}
/* THE BAR HAS TO FIT (2026-09-22). At 390px the brand, the pill, the page links
and the circle were wider than the phone, so the bar wrapped ON TOP OF ITSELF -
and the pill's new translucent fill made the collision visible, two AWs and a
ghost BACK PORCH showing through. The page links come out: every one of them is
already in the menu behind the circle, which is the whole reason the menu exists.
The pill and the circle stay, because those are the two things you tap. */
.nav .right a:not(.fp-tasks){display:none;}
/* TABS ON A PHONE: four sections, the swing without the wordmark, Scribe (not
clickable yet) out. Checked at 390px; the sideways scroll is only a safety net
for a narrower phone, never an overlap. */
.band.tabbed .nav .brand .tmp{display:none;}
.nav .tabs{margin-left:10px;gap:11px;overflow-x:auto;scrollbar-width:none;}
.nav .tabs::-webkit-scrollbar{display:none;}
.nav .tabs a{font-size:12px;letter-spacing:.03em;flex:none;}
.nav .tabs .soon{display:none;}
/* With the Tasks pill beside them, three tabs overran a 390px phone. Home drops
out of the row on a phone only - the swing on the left IS the way home. */
.nav .tabs a[href="/index.html"]{display:none;}
/* NO TABS ON A PHONE (Adam, 2026-09-24): The Drop and Courier are already in
the menu behind the circle, and squeezed to 12px they were too small to use.
The phone bar is the red porch swing, the Tasks pill and the circle. */
.nav .tabs{display:none;}
.nav .right{gap:10px;}
.nav .av{width:30px;height:30px;font-size:12px;}
.fp-menu{width:min(264px,calc(100vw - 24px));}
.title{padding:16px 16px 0;}
.title h1{font-size:40px;}
.title .pron{font-size:17px;}
.title .band-sub{font-size:17px;margin-top:6px;}
.wrap{padding:14px 16px 48px;gap:16px;}
.sec h2{font-size:19px;}
#gate,#denied{margin:24px 16px;}
}