@font-face{font-family:Vollkorn;font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/vollkorn.woff2) format('woff2')}
@font-face{font-family:Vollkorn;font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/vollkorn-italic.woff2) format('woff2')}
@font-face{font-family:"Fira Code";font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/firacode.woff2) format('woff2')}

:root{
--base:#E2E2E2;
--contrast:#3B3B3B;
--ink:#191919;
--amber:#ffb43c;
--orange:#e68b14;
/* live's #a65a00 is only 2.9:1 on the amber hero; this darker shade keeps the
   hue and clears AA for body-size text */
--rust:#7a4200;
--purple:#650DD4;
--line:#3B3B3B33;
--pad:clamp(1.25rem,5vw,3.125rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--base);
color:var(--contrast);
font-family:"Fira Code",monospace;
font-size:clamp(1rem,1rem + ((1vw - .2rem) * .196),1.125rem);
font-weight:300;
line-height:1.5;
letter-spacing:-.18px;
}
h1,h2,h3,h4,h5,h6{
color:var(--ink);
font-family:Vollkorn,serif;
font-weight:400;
line-height:1.125;
letter-spacing:-.1px;
margin:0 0 .5em;
}
h1{font-size:clamp(2.15rem,2.15rem + ((1vw - 3.2px) * 1.333),3rem);letter-spacing:-.96px}
h2{font-size:clamp(1.75rem,1.75rem + ((1vw - 3.2px) * .392),2rem);letter-spacing:-.96px}
h3{font-size:clamp(1.25rem,1.25rem + ((1vw - 3.2px) * 1.176),2rem);letter-spacing:-.64px}
h4{font-size:1.25rem}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
a{color:var(--purple);text-decoration-thickness:1px;text-underline-offset:.1em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
img{max-width:100%;height:auto}
figure{margin:0}
code{font-family:"Fira Code",monospace}
ul,ol{margin:0 0 1.2em;padding-left:1.4em}
li{margin:.35em 0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
blockquote{margin:0 0 1.2em;padding-left:1em;border-left:3px solid var(--line)}

.wrap{max-width:1340px;margin-inline:auto;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;color:#000;padding:.75rem}

/* header */
.site-head{background:#000}
.site-head__inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;padding-block:1.5rem}
.site-title{margin:0;font-size:inherit;line-height:inherit}
.site-title a{
color:#fff;
font-family:Vollkorn,serif;
font-size:clamp(1.75rem,1.75rem + ((1vw - 3.2px) * .392),2rem);
font-weight:700;
letter-spacing:-.5px;
text-decoration:none;
}
.site-title a:hover{text-decoration:underline}
.site-head nav ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0}
.site-head nav a{color:#fff;text-decoration:none}
.site-head nav a:hover,.site-head nav a[aria-current]{text-decoration:underline}

/* hero */
.hero{padding:clamp(2.5rem,6vw,5rem) var(--pad);margin-bottom:clamp(2rem,5vw,3.5rem)}
.hero--amber{background:var(--amber);min-height:66vh;display:grid;align-content:center}
.hero--orange{background:var(--orange);padding:clamp(3rem,7vw,7rem) var(--pad)}
.hero--photo{
background:var(--amber) var(--hero-sm,none) center 43%/cover no-repeat;
color:#fff;
min-height:30vh;
display:grid;
place-items:center;
}
.hero--photo::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4)}
.hero--photo{position:relative}
.hero--photo>*{position:relative}
.hero__title{
color:var(--ink);
font-family:Vollkorn,serif;
font-size:clamp(3rem,3rem + ((1vw - 3.2px) * 4.766),6.125rem);
font-weight:700;
letter-spacing:-2px;
line-height:.9;
text-transform:uppercase;
margin:0 0 .25em;
}
.hero--photo .hero__title{color:#fff}
.hero__title--light{color:#fff}
.hero__title mark{color:var(--rust);background:none}
.hero__sub{
color:var(--rust);
font-size:clamp(1.5rem,1.5rem + ((1vw - 3.2px) * 1.565),2.5rem);
font-style:italic;
font-weight:200;
line-height:.9;
text-transform:uppercase;
text-align:center;
margin:0;
}
.hero--orange .hero__title{
text-align:right;
font-size:clamp(67.975px,4.248rem + ((1vw - 3.2px) * 7.846),148px);
letter-spacing:-4px;
line-height:.8;
}

/* about */
.about{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(1.5rem,4vw,3rem);
align-items:center;
margin-bottom:clamp(2.5rem,7vw,5rem);
}
.about__art{position:relative}
.about__art img{width:100%}
.about__art .flower-grid{position:absolute;bottom:-4rem;right:-3rem;width:202px;border:6px solid var(--base)}
@media (max-width:781px){.about{grid-template-columns:1fr}.about__art .flower-grid{width:120px;bottom:-2rem;right:0}}

/* services + cards */
.services{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(1.5rem,4vw,3rem);
margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media (max-width:781px){.services{grid-template-columns:1fr}}
.services__img{aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:1.5rem}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
gap:clamp(1.25rem,3vw,2.5rem);
margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.card{
border:1px solid var(--line);
border-radius:10px;
padding:clamp(1.25rem,4vw,3.125rem);
}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.cards ul{list-style:none;padding:0 0 .625rem;margin:0}
.cards li{padding-inline-start:1.6ch;text-indent:-1.6ch;font-size:.875rem}
.cards li::before{content:"✓\00a0";color:var(--purple)}

/* bordered card look, applied to pricing blocks */
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(1.5rem,4vw,3rem);
align-items:center;
margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
@media (max-width:781px){.split{grid-template-columns:1fr}}
.split__img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* tables */
/* live renders these spec tables with no cell borders and no header row */
table{border-collapse:collapse;width:100%;margin:0 0 1.5em}
table th,table td{padding:.4em .6em .4em 0;text-align:left;vertical-align:top}
/* GFM needs a header row; live has none, so drop ours when it is empty */
table thead:has(tr:only-child th:empty){display:none}

/* pill */
.pill{
display:inline-block;
background:var(--purple);
color:var(--base);
border-radius:16px;
font-size:1.125rem;
padding:.2rem .6rem .25rem;
}

/* qr */
.qr{
display:block;
margin-inline:auto;
max-width:100%;
height:auto;
border-radius:100px;
}
/* home crops the code into a rounded square, matching live */
.qr--crop{width:min(425px,100%);aspect-ratio:1;object-fit:cover}
/* hardware shows the full portrait code, matching live */
.qr--full{width:min(459px,100%)}

/* posts */
.posts{display:grid;gap:2.5rem;padding-bottom:clamp(2rem,5vw,3rem)}
.post{border-bottom:1px solid var(--line);padding-bottom:2rem}
.post:last-child{border-bottom:0}
.post__date{color:var(--contrast);font-size:.875rem;margin:0 0 .35em}
.post__title{margin:0 0 .5em}
.post__title a{color:var(--ink);text-decoration:none}
.post__title a:hover{text-decoration:underline}
/* listing thumbnail; only the makeover post has one, matching live */
.post__thumb{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;margin:0 0 1em}
.post__excerpt{margin:0 0 .5em}
.post__more{display:inline-block}
.entry{max-width:52rem;margin-inline:auto;padding-bottom:2rem}
.entry__title{margin:0 0 .75em}
.entry img{border-radius:8px;margin-bottom:1.5em}
/* post sections are h2/apps h3 for a clean outline; sizes match live's
   48px section / 38px app scale rather than the shared 32px defaults */
.entry h2{font-size:clamp(2.15rem,2.15rem + ((1vw - 3.2px) * 1.333),3rem);letter-spacing:-.96px;margin-top:2em}
.entry h3{font-size:clamp(1.75rem,1.75rem + ((1vw - 3.2px) * .622),2.375rem);letter-spacing:-.96px;margin-top:1.6em}
/* the makeover featured image is full-width at 3/2, matching live */
.post__figure{width:100%;aspect-ratio:3/2;object-fit:cover}
.app-icon{width:120px;height:auto;margin:0 0 .5em}
.post-hero{width:223px;max-width:100%;height:auto}
.entry-img{width:383px;max-width:100%;height:auto}

/* footer */
.site-foot{background:var(--ink);color:var(--base);margin-top:clamp(2rem,5vw,3.5rem)}
.site-foot .wrap{padding-block:1.5rem;text-align:center}
.social{display:flex;gap:1rem;justify-content:center;list-style:none;margin:0 0 .5rem;padding:0}
.social a{
display:flex;
padding:.4rem;
border-radius:9999px;
background:#f0f0f0;
color:#444;
}
.social a:hover{transform:scale(1.1)}
.social svg{fill:currentColor;height:1.25em;width:1.25em}
.foot-note{margin:0;font-size:.875rem}
.site-foot a{color:var(--base)}

@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
.social a{transition:transform .1s ease}
}

@media (min-width:801px){
.hero--photo{background-image:var(--hero-lg,none)}
}