/* 121 Auto Care. Taken from the shop: red brick with white letters, blue lift posts, yellow lift arms, a concrete floor.
   Static fonts on purpose: variable fonts drew thin in the WebKit test build. */
:root{
  --navy:#152036;--navy-2:#1C2A45;--blue:#1F4FC4;--blue-d:#173C99;--yellow:#F4C21B;--yellow-d:#B98F00;
  --concrete:#E7E6E1;--paper:#F5F4F0;--steel:#C9CED6;--amber:#FFB020;--muted:#4F5866;--line:#D2D1CB;
  --sans:Barlow,system-ui,sans-serif;--cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --brick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24'%3E%3Cpath d='M0 .5H64M0 12.5H64M.5 0V12M32.5 12V24' stroke='%23000' stroke-opacity='.4' fill='none'/%3E%3Cpath d='M0 1.5H64M0 13.5H64M1.5 1V12M33.5 13V24' stroke='%23fff' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .2 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --brickwall:var(--brick),linear-gradient(180deg,rgba(24,34,56,.9),rgba(15,22,38,.94)),#7A3326;
  --g:clamp(16px,4vw,40px);--head:72px;--demo:28px;
  --lift:0 1px 0 rgba(21,32,54,.08),0 10px 20px -12px rgba(21,32,54,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--navy);font:400 1.06rem/1.6 var(--sans)}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;line-height:1.04}
h1,h2{font-family:var(--cond);font-weight:800;letter-spacing:-.005em}
h2{font-size:clamp(2.3rem,4.8vw,3.7rem);line-height:.98;margin-bottom:.35em}
/* a painted bay line under each section heading */
.sec h2::after{content:"";display:block;width:58px;height:6px;margin-top:14px;border-radius:1px;background:var(--yellow);box-shadow:0 2px 0 var(--yellow-d)}
h3{font-weight:700;font-size:1.28rem;line-height:1.2}
p{margin:0 0 1em}
a{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.top :focus-visible,.hero :focus-visible,.sched :focus-visible,.foot :focus-visible,.page-hero :focus-visible,.fab :focus-visible{outline-color:var(--yellow)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--g)}
.narrow{max-width:860px}
.lede{font-size:1.16rem;color:var(--muted);max-width:36em}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px}

/* Header */
.top{position:sticky;top:0;z-index:40;background:var(--brickwall);color:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.7)}
.top::after{content:"";display:block;height:5px;background:linear-gradient(180deg,var(--yellow) 0 3px,var(--blue) 3px)}
.demo{background:#0D1524;color:#B9C2D0;font-size:.82rem;line-height:var(--demo);height:var(--demo);text-align:center;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .wrap{display:flex;align-items:center;gap:18px;min-height:var(--head);max-width:none}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
/* Wordmark: the shield badge, then the name in heavy condensed caps like a shop sign */
.badge{width:46px;height:52px;flex:none;filter:drop-shadow(0 4px 5px rgba(0,0,0,.55))}
.badge.sm{width:34px;height:39px}
.word{display:block;font:800 1.9rem/.86 var(--cond);text-transform:uppercase;letter-spacing:.025em;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.word small{display:block;font:600 .8rem/1 var(--sans);text-transform:none;letter-spacing:.06em;color:var(--yellow);margin-top:5px;text-shadow:none}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{color:#fff;text-decoration:none;padding:8px 12px;font:700 1.22rem var(--cond);letter-spacing:.02em}
.nav a:hover{color:var(--yellow)}
.nav .tel{color:var(--steel)}
.nav .btn{margin-left:6px}
.menu-btn{display:none;margin-left:auto;width:46px;height:46px;border:0;background:none;cursor:pointer;padding:12px 9px}
.menu-btn span{display:block;height:3px;background:#fff;margin:4px 0;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Buttons: lift-arm yellow, with a pressed lower edge */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 26px;
  background:linear-gradient(180deg,#FFD23D,var(--yellow) 55%,#E5B200);color:var(--navy);border:0;border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 var(--yellow-d),0 12px 20px -10px rgba(0,0,0,.55);
  font:800 1.22rem/1 var(--cond);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background .16s}
.btn:hover{background:linear-gradient(180deg,#FFDA5C,#FFC820)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 var(--yellow-d),0 5px 10px -8px rgba(0,0,0,.6)}
.btn.line{background:rgba(255,255,255,.05);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 10px 18px -12px #000}
.btn.line:hover{background:#fff;color:var(--navy)}
.sec .btn.line{color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.sec .btn.line:hover{background:var(--navy);color:#fff}
.sched .btn.line{color:#fff;box-shadow:inset 0 0 0 2px #fff}
.btn.sm{min-height:44px;padding:6px 18px;font-size:1.08rem}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* Hero: the real brick front, pulled down to navy, with the cluster in front of it */
.hero{position:relative;color:#fff;background:var(--navy);padding:clamp(34px,6vw,84px) 0 clamp(70px,8vw,110px);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url(../photos/hero-brick.webp) 30% 30%/cover no-repeat;filter:saturate(.8)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 55% 65% at 70% 46%,rgba(31,79,196,.28),transparent 70%),
  linear-gradient(100deg,rgba(21,32,54,.95) 30%,rgba(21,32,54,.82) 60%,rgba(21,32,54,.9))}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(2.7rem,4.6vw,4.5rem);line-height:.92;text-transform:uppercase;margin-bottom:.4em;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.hero .lede{color:#C9D1DD;max-width:30em}
.rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 26px;font-weight:600;color:#E4E8EE}
.stars{display:inline-flex;gap:3px}
.stars i{width:18px;height:18px;background:var(--yellow);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.part{background:linear-gradient(90deg,var(--yellow) 90%,#4A556A 90%)}

.dash{position:relative}
.dash-stage{position:relative;aspect-ratio:1200/760;width:100%}
/* contact shadow: the cluster sits on something, it doesn't float */
.dash-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(4px)}
.dash-stage img,.dash-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.dash-still{object-fit:contain;transition:opacity .5s}
#dash{opacity:0;transition:opacity .6s ease-out;touch-action:pan-y}
#dash.on{opacity:1}
.dash-stage:has(#dash.on) .dash-still{opacity:0}
.dash-ask{margin:2px 0 10px;text-align:center;font-weight:600;font-size:1.06rem;color:#fff}
.lamps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lamp{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 14px 6px 10px;border:0;border-radius:999px;cursor:pointer;
  background:#0E1626;color:#D4DAE3;font:600 .94rem var(--sans);box-shadow:inset 0 0 0 1px #34415A,0 6px 12px -8px #000}
.lamp .ico{width:12px;height:12px;border-radius:50%;background:#353B45;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.lamp-engine,.lamp-tire{--lc:var(--amber)}
.lamp-oil,.lamp-battery,.lamp-brake{--lc:#FF4A3D}
.lamp:hover .ico{background:color-mix(in srgb,var(--lc) 55%,#353B45)}
.lamp[aria-pressed=true]{color:#fff;box-shadow:inset 0 0 0 1px var(--lc),0 0 18px -4px var(--lc)}
.lamp[aria-pressed=true] .ico{background:var(--lc);box-shadow:0 0 10px 2px var(--lc)}
.light-card{margin:14px auto 0;max-width:620px;background:rgba(10,16,28,.88);border-radius:10px;padding:18px 22px;
  box-shadow:inset 4px 0 0 var(--lc,var(--amber)),0 18px 34px -18px #000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.light-card.c-engine,.light-card.c-tire{--lc:var(--amber)}
.light-card.c-oil,.light-card.c-battery,.light-card.c-brake{--lc:#FF4A3D}
.light-card h3{color:#fff;margin-bottom:6px}
.light-card .means{color:#CDD4DE;margin-bottom:8px}
.light-card .fix{color:#AAB3C0;margin-bottom:12px}
.light-card .fix a{color:var(--yellow);font-weight:700}

/* Shop details: three steel plates bolted over the hero's lower edge */
.plate-row{position:relative;z-index:2;margin-top:-46px;background:linear-gradient(180deg,transparent 46px,var(--concrete) 46px)}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plate{position:relative;display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:8px;color:var(--navy);text-decoration:none;
  background:linear-gradient(180deg,#FFFFFF,#EEF0F3);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.06),0 1px 0 rgba(21,32,54,.12),0 18px 26px -16px rgba(21,32,54,.6)}
.plate svg{width:30px;height:30px;flex:none;color:var(--blue)}
.plate b{display:block;font:700 1.28rem/1.15 var(--cond)}
.plate span{color:var(--muted);font-size:.95rem;line-height:1.35}
a.plate:hover b{color:var(--blue-d)}

/* Services: cards that go up on the lift, while their shadow stays on the floor */
.sec{padding:clamp(56px,8vw,104px) 0}
.services{background:var(--grain),linear-gradient(180deg,#DEDDD7,var(--concrete) 30%)}
.cards{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:30px 22px}
.card{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--navy);text-decoration:none;border-radius:8px;
  box-shadow:0 1px 0 rgba(21,32,54,.1),inset 0 -5px 0 var(--blue);transition:transform .2s cubic-bezier(.3,.7,.4,1)}
.card::after{content:"";position:absolute;left:8%;right:8%;bottom:-13px;height:16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(21,32,54,.42),transparent);transition:transform .2s,opacity .2s}
.card:hover{transform:translateY(-6px)}
.card:hover::after{transform:translateY(6px) scaleX(.86);opacity:.6}
.card-img{display:block;overflow:hidden;border-radius:8px 8px 0 0}
.card img{width:100%;aspect-ratio:16/11;object-fit:cover}
.card-body{padding:16px 18px 22px}
.card b{display:block;font:800 1.45rem/1.02 var(--cond);margin-bottom:6px}
.card-img{position:relative}.card-img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -24px 24px -20px rgba(0,0,0,.45)}
.card-body>span{color:var(--muted);font-size:.98rem;line-height:1.45}

/* From the bays: the real photos, mounted like prints on the wall */
.work{background:var(--grain),var(--paper)}
.wall{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;grid-auto-flow:dense;gap:14px}
/* prints pinned to the wall: white border, a slight tilt, a shadow that falls away from the wall */
.w{position:relative;margin:0;overflow:hidden;border-radius:3px;border:6px solid #fff;background:var(--navy);box-shadow:0 2px 3px rgba(21,32,54,.18),0 18px 28px -14px rgba(21,32,54,.55)}
.w:nth-child(odd){transform:rotate(-.7deg)}.w:nth-child(3n){transform:rotate(.6deg)}
.w.tall{grid-row:span 2}.w.wide{grid-column:span 2}
.w img{width:100%;height:100%;object-fit:cover}
.w figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;font-size:.92rem;line-height:1.3;
  background:linear-gradient(180deg,transparent,rgba(13,21,36,.85))}

/* Reviews */
.reviews{background:var(--grain),var(--concrete)}
.reviews .rate{color:var(--navy)}
.reviews .stars i.part{background:linear-gradient(90deg,var(--yellow) 90%,#C8C7C0 90%)}
.topics-head{font-weight:600;margin-bottom:10px}
.topics{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-wrap:wrap;gap:8px}
.topics li{display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;background:#fff;border-radius:999px;font-weight:500;box-shadow:0 1px 0 rgba(21,32,54,.12),0 6px 10px -8px rgba(21,32,54,.5)}
.topics b{min-width:28px;height:28px;padding:0 6px;display:inline-grid;place-items:center;border-radius:999px;background:var(--blue);color:#fff;font-size:.88rem}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}
.quotes figure{margin:0;background:#fff;border-radius:8px;padding:24px;box-shadow:var(--lift)}
.quotes blockquote{margin:0 0 14px;font-size:1.1rem}
.quotes figcaption{font-weight:700}
.quotes figcaption span{display:block;font-weight:400;color:var(--muted);font-size:.92rem}
.quotes .ph{background:repeating-linear-gradient(-45deg,#fff 0 14px,#F4F4F1 14px 28px);color:#7D8592}

/* Visit */
.visit{background:var(--paper)}
.visit-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,56px);align-items:center}
.visit-map{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#DADBD6;box-shadow:0 1px 0 rgba(21,32,54,.1),0 26px 40px -26px rgba(21,32,54,.7)}
.visit-map iframe{width:100%;height:100%;border:0;display:block}
.hours{margin:6px 0 8px}
.hours div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.hours dt{color:var(--muted)}.hours dd{margin:0;font-weight:700}
.access{font-weight:500;margin-bottom:22px}

/* Schedule */
.sched{background:var(--navy-2);background-image:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff}
.sched .lede{color:#C9D1DD}.sched .lede a{color:var(--yellow);font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.form{background:var(--paper);color:var(--navy);border-radius:10px;padding:clamp(20px,4vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
  box-shadow:inset 0 5px 0 var(--yellow),0 26px 44px -26px #000}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
/* iPhone Safari gives date and time boxes a built-in minimum width, so they ran off the form */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;display:block;text-align:left}
input::-webkit-date-and-time-value{text-align:left}
.field.full,.form .full{grid-column:1/-1}
label{font-weight:600}
input,select,textarea{font:inherit;padding:12px 14px;border:1.5px solid #B4B8BF;border-radius:6px;background:#fff;color:var(--navy);min-height:48px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:1px}
[aria-invalid=true]{border-color:#B3261E}
.err{color:#B3261E;font-size:.95rem;line-height:1.3;min-height:1.3em}/* room reserved so a clearing error can't move the submit button mid-click */
.hp{position:absolute;left:-9999px}
.note{font-size:.95rem;color:var(--muted);margin:10px 0 0}
.done{grid-column:1/-1;background:#fff;border-left:5px solid var(--blue);padding:20px 22px}
.done h3{margin-bottom:6px}

/* FAQ */
.faq{background:var(--paper)}
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;font-weight:700;font-size:1.14rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:800 1.5rem/1 var(--sans);color:var(--blue)}
details[open] summary::after{content:"\2013"}
details p{color:var(--muted)}

/* Inner pages */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:clamp(56px,8vw,110px) 0;isolation:isolate;overflow:hidden}
.page-hero img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(21,32,54,.95) 25%,rgba(21,32,54,.55))}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--yellow)}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.4rem);max-width:13em}
.page-hero p{margin:14px 0 26px;font-size:1.22rem;color:#DDE2EA;max-width:32em}
.crumb{margin-bottom:12px}.crumb a{color:#D0D6DF}
.list{list-style:none;padding:0;margin:18px 0 0}
.list li{padding:11px 0 11px 28px;border-bottom:1px solid var(--line);position:relative}
.list li::before{content:"";position:absolute;left:2px;top:20px;width:14px;height:6px;border-radius:2px;background:var(--yellow);box-shadow:0 2px 0 var(--yellow-d)}
.photo{margin:0;position:relative}
.photo img{border-radius:8px;box-shadow:0 1px 0 rgba(21,32,54,.1),0 26px 40px -24px rgba(21,32,54,.75)}
.sec.work .split{align-items:center}

/* Footer */
.foot{background:var(--brickwall);color:#C2CAD6;padding:56px 0 110px;border-top:6px solid var(--yellow)}
.foot a{color:#fff;text-decoration:none}
.foot svg{width:18px;height:18px;vertical-align:-3px;margin-right:8px;color:var(--yellow)}
.foot .badge{margin:0;width:34px;height:39px}
.foot h3{color:#fff;font:800 1.4rem var(--cond);margin-bottom:10px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot-grid p{margin:0 0 8px}
.foot-brand{display:flex;align-items:center;gap:10px;font:800 1.7rem var(--cond);text-transform:uppercase;letter-spacing:.02em;color:#fff;margin-bottom:16px!important}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:0 0 6px}
.small{font-size:.86rem;color:#8792A3;margin-top:28px}

.fab{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);padding-bottom:env(safe-area-inset-bottom,0);transition:transform .22s;box-shadow:0 -8px 20px -10px #000}
.fab.away{transform:translateY(110%)}
.fab a{flex:1;min-height:58px;display:flex;align-items:center;justify-content:center;font:800 1.3rem var(--cond);text-transform:uppercase;letter-spacing:.04em;color:#fff;text-decoration:none}
.fab a.pri{background:var(--yellow);color:var(--navy);flex:1.5}

@media (max-width:1080px){
  .nav a:not(.btn):not(.tel){padding:8px 8px}
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .menu-btn{display:block}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:var(--navy);padding:8px 16px 18px;display:none;margin:0;border-top:1px solid #2A3854}
  .nav.open{display:flex}
  .nav a{padding:12px 10px;font-size:1.18rem}
  .nav .btn{margin:8px 0 0}
  .plates{grid-template-columns:1fr;gap:10px}
  .plate{padding:14px 16px}
  .visit-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--head:60px}
  .badge{width:38px;height:43px}
  .word{font-size:1.55rem}.word small{font-size:.72rem;margin-top:3px}
  .hero-grid,.split,.foot-grid{grid-template-columns:1fr}
  .hero{padding-top:24px}
  /* Phone: the dash goes right under the headline, so the 3D is on the first screen */
  .hero-copy{display:contents}
  .hero h1{order:1;font-size:clamp(2.3rem,10.4vw,3rem);margin-bottom:0}
  .dash{order:2;margin:0 calc(var(--g) * -.6)}
  .hero .lede{order:3;margin-top:8px}.hero .rate{order:4}.hero .btns{order:5}
  .hero-grid{gap:14px}
  .lamp{min-height:40px;padding:5px 12px 5px 9px;font-size:.9rem}
  .quotes{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;gap:22px 12px}
  .card-body{padding:10px 10px 16px}
  .card b{font-size:1.2rem}
  .card-body>span{font-size:.86rem;line-height:1.4}
  .card img{aspect-ratio:4/3}
  .wall{grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:8px}
  .w{border-width:4px}
  .w figcaption{font-size:.8rem;padding:26px 10px 8px}
  .form{grid-template-columns:1fr}
  .fab{display:flex}
}