/* Braids By Taja — palette and type extracted from her own brand graphics.
Greige field, near-black display serif, warm taupe signature script. */
:root{
--bg:#E9E7E5; --surface:#F1F1F1; --white:#FFFFFF;
--ink:#131313; --muted:#797877;
--accent:#A38E7E; --accent-deep:#6E5E53; --accent-soft:#BFB0A5;
--rule:#CBC9C7;
--serif:'Cormorant Garamond',Georgia,serif;
--script:'Sacramento',cursive;
--sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--wrap:1180px; --r:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
a{color:inherit}
/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0}
h1{font-size:clamp(2.6rem,7vw,5rem);letter-spacing:.02em}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.25rem}
.display{text-transform:uppercase;letter-spacing:.14em}
.script{font-family:var(--script);color:var(--accent);
font-size:clamp(1.8rem,4vw,2.9rem);line-height:1;font-weight:400}
.label{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.muted{color:var(--muted)}
.lede{font-size:1.08rem;max-width:62ch}
/* her signature thin rule + right-angle corner motif */
.rule{height:1px;background:var(--ink);border:0;margin:0}
.corner{position:relative;padding-top:26px}
.corner::before{content:'';position:absolute;top:0;left:0;width:64%;height:1px;background:var(--ink)}
.corner::after{content:'';position:absolute;top:-14px;left:64%;width:1px;height:14px;background:var(--ink)}
section{padding:clamp(56px,9vw,116px) 0}
.alt{background:var(--surface)}
.dark{background:var(--ink);color:var(--surface)}
.dark h2,.dark h3{color:var(--white)}
.dark .label{color:var(--accent-soft)}
/* buttons */
.btn{display:inline-block;padding:16px 34px;background:var(--ink);color:var(--white);
text-decoration:none;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
font-weight:500;border:1px solid var(--ink);border-radius:var(--r);transition:.25s;cursor:pointer}
.btn:hover{background:transparent;color:var(--ink)}
.dark .btn:hover{color:var(--white);border-color:var(--white)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--white)}
.btn-accent{background:var(--accent);border-color:var(--accent)}
.btn-accent:hover{background:transparent;color:var(--accent-deep);border-color:var(--accent-deep)}
/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(233,231,229,.94);
backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 24px;
max-width:var(--wrap);margin:0 auto}
.brand{font-family:var(--serif);font-size:1.18rem;letter-spacing:.16em;text-transform:uppercase;
text-decoration:none;white-space:nowrap}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
color:var(--ink);opacity:.75}
.nav-links a:hover{opacity:1}
/* Hiding the links on mobile left a phone user with no way to reach Services,
Portfolio, About or Policies — only the Book button. Wrap them onto a second
row instead. No JS, no hamburger. */
@media(max-width:860px){
.nav-in{flex-wrap:wrap;row-gap:10px;padding-top:12px;padding-bottom:12px}
.brand{flex:1;font-size:1.05rem}
.nav-links{order:3;flex:1 0 100%;gap:0;justify-content:space-between;
border-top:1px solid var(--rule);padding-top:10px}
.nav-links a:not(.btn){font-size:.66rem;letter-spacing:.1em;opacity:.85}
.nav-links a.btn{order:2;flex:0 0 auto;padding:11px 20px;font-size:.66rem}
}
@media(max-width:400px){
.nav-links a:not(.btn){font-size:.6rem;letter-spacing:.06em}
}
/* grids */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(275px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
/* cards */
.card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
display:flex;flex-direction:column;transition:.25s}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--surface)}
.card-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.price{font-family:var(--serif);font-size:1.5rem}
.meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* gallery */
.tile{position:relative;overflow:hidden;border-radius:var(--r);background:var(--surface)}
.tile img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;transition:.5s}
.tile:hover img{transform:scale(1.045)}
/* availability strip — the honest scarcity signal */
.avail{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 20px;
background:var(--white);border:1px solid var(--accent-soft);border-radius:var(--r)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:8px}
/* policies */
.policy{display:grid;gap:10px}
.policy h3{font-family:var(--sans);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
form input,form textarea,form select{width:100%;padding:13px 15px;border:1px solid var(--rule);
background:var(--white);font-family:var(--sans);font-size:.94rem;font-weight:300;border-radius:var(--r);color:var(--ink)}
form label{display:block;margin-bottom:7px}
.field{margin-bottom:18px}
footer{background:var(--ink);color:var(--accent-soft);padding:64px 0 34px;font-size:.86rem}
footer a{color:var(--accent-soft);text-decoration:none}
footer a:hover{color:var(--white)}
/* Not every service has a photo on her Acuity listing. Rather than a blank
box, fall back to a typographic tile in her palette so the grid stays even. */
.card-fallback{width:100%;aspect-ratio:4/5;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;
background:linear-gradient(150deg,var(--surface) 0%,var(--accent-soft) 100%)}
.card-fallback .mark{font-family:var(--script);font-size:2.6rem;color:var(--accent-deep);line-height:1}
.card-fallback .cat{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);opacity:.8}
/* `.nav-links a` (0,2,0) outranks `.btn` (0,1,0), which silently turned the
nav Book button into black-on-black. Restore the button's own colours. */
.nav-links a.btn{color:var(--white);opacity:1}
.nav-links a.btn:hover{color:var(--ink)}
/* Smooth scrolling is mostly an image-decode problem. Reserving each tile's box
stops layout shift, and content-visibility lets the browser skip rendering
work for tiles that are still off screen. */
/* The width/height attributes on ![]()
(added to reserve space and kill CLS)
are presentational attributes. With `width:100%` and no `height`, the
attribute's 800px won over `aspect-ratio` and every card image rendered
361x800 instead of 361x451. `height:auto` on the image rules is the fix. */
.tile,.card{contain:layout paint style}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.card,.tile img{transition:none}
}
/* An honest placeholder beats a photo of the wrong service. 18 services have
no image of that exact style in her library — these read as intentional
rather than broken, and tell her which ones still need a photo. */
.card-fallback .mark{font-family:var(--script);font-size:1.9rem;color:var(--accent-deep);line-height:1.1}
.card-fallback .soon{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);opacity:.55;margin-top:4px}
/* Grid children stretch to the tallest in the row so a card with a placeholder
lines up with a card carrying a photo. */
.grid{align-items:stretch}
.grid > .card,.grid > .cat-card{height:100%}
/* ── Category accordion ────────────────────────────────────────────────────
One page, categories open in place. Native /: no client
JS, keyboard operable, announced by screen readers. */
.accordion{margin-top:34px;border-top:1px solid var(--ink)}
.cat{border-bottom:1px solid var(--rule)}
.cat > summary{
list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:20px;
padding:26px 4px;transition:.2s}
.cat > summary::-webkit-details-marker{display:none}
.cat > summary:hover{padding-left:10px}
.cat > summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cat-name{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.75rem);flex:1;line-height:1.2}
.cat-meta{display:flex;align-items:baseline;gap:18px;white-space:nowrap}
.cat-range{font-family:var(--serif);font-size:1.05rem;color:var(--accent-deep)}
/* the +/− mark, drawn rather than an icon font */
.cat-mark{position:relative;width:13px;height:13px;flex:0 0 13px;margin-left:4px}
.cat-mark::before,.cat-mark::after{content:'';position:absolute;background:var(--ink);transition:transform .25s ease}
.cat-mark::before{top:6px;left:0;width:13px;height:1px}
.cat-mark::after{left:6px;top:0;width:1px;height:13px}
.cat[open] > summary .cat-mark::after{transform:scaleY(0)}
.cat[open] > summary{padding-bottom:14px}
.cat[open] > summary .cat-name{color:var(--accent-deep)}
.cat-panel{padding:6px 0 40px}
@media(max-width:620px){
.cat > summary{flex-wrap:wrap;gap:8px;padding:20px 4px}
.cat-name{flex:1 0 100%}
.cat-meta{gap:14px}
}
@media (prefers-reduced-motion:reduce){
.cat > summary,.cat-mark::before,.cat-mark::after{transition:none}
}
/* A deep link (/services#take-downs, or an old /services/take-downs redirect)
opens that category without any script. */
.cat:target{border-color:var(--accent)}
/* ── Portfolio mosaic ──────────────────────────────────────────────────────
A uniform grid of 22 identical tiles reads as a clump. Letting a few shots
run wide or tall gives the page rhythm, the way a printed lookbook does. */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;
grid-auto-flow:dense}
.shot{display:block;overflow:hidden;border-radius:var(--r);background:var(--surface);
position:relative;aspect-ratio:4/5}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.shot:hover img{transform:scale(1.05)}
.shot::after{content:'';position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .3s}
.shot:hover::after{opacity:.06}
.shot.wide{grid-column:span 2;aspect-ratio:8/5}
.shot.tall{grid-row:span 2;aspect-ratio:4/10}
@media(max-width:1000px){
.mosaic{grid-template-columns:repeat(3,1fr)}
.shot.tall{grid-row:span 1;aspect-ratio:4/5}
}
@media(max-width:660px){
.mosaic{grid-template-columns:repeat(2,1fr);gap:10px}
.shot.wide{grid-column:span 2;aspect-ratio:8/5}
}
/* Lightbox — native