/*
Theme Name: Hair & Groom
Template: oceanwp
Version: 1.0.0
Text Domain: hair-and-groom
Description: A tactile tool-bench journal for everyday grooming.
*/
:root { --ink:#182326; --steel:#50636a; --paper:#e8e4d9; --chalk:#f5f2e9; --ochre:#bd7c27; --line:rgba(24,35,38,.2); --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --sans:Arial,Helvetica,sans-serif; --body:Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.hag-body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); font-size:17px; line-height:1.55; }
body.hag-body #main, body.hag-body #content-wrap, body.hag-body .site-content { width:auto; max-width:none; padding:0; }
body.hag-body #site-header, body.hag-body #site-footer, body.hag-body #footer, body.hag-body .page-header { display:none; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid var(--ochre); outline-offset:4px; }
.hag-header { position:relative; z-index:2; min-height:91px; padding:23px max(4vw,28px); border-bottom:1px solid var(--line); background:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:28px; }
.hag-mark,.hag-footer__mark { display:inline-flex; align-items:baseline; gap:3px; color:var(--ink); font-family:var(--sans); font-size:clamp(25px,2.4vw,38px); font-weight:700; letter-spacing:-.015em; line-height:1; text-decoration:none; white-space:nowrap; }
.hag-mark b,.hag-footer__mark b { font-family:var(--body); font-size:.7em; font-weight:400; color:var(--ochre); transform:rotate(-12deg); }
.hag-nav { display:flex; align-items:center; gap:18px; font:700 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.hag-nav > a { text-decoration:none; }
.hag-nav .hag-topic { display:none; }
.hag-search { border:1px solid var(--ink); padding:9px 11px; }
.hag-search span { color:var(--ochre); font-size:16px; }
.hag-main { overflow:hidden; }
.hag-bench { min-height:590px; display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.85fr); border-bottom:1px solid var(--line); }
.hag-bench__copy { padding:clamp(70px,11vw,155px) max(4vw,28px) 70px max(7vw,50px); align-self:center; }
.hag-kicker { margin:0 0 17px; color:var(--steel); font:700 10px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.hag-bench h1,.hag-rack h2,.hag-notes h2,.hag-list-header h1,.hag-article h1,.hag-empty h1 { margin:0; font-family:var(--sans); font-weight:700; font-size:clamp(55px,7.7vw,116px); line-height:.99; letter-spacing:-.015em; text-transform:uppercase; }
.hag-bench h1 em { color:var(--ochre); font-family:var(--body); font-size:.66em; font-weight:400; letter-spacing:-.1em; text-transform:none; }
.hag-lede { max-width:430px; margin:28px 0; font-size:20px; line-height:1.45; }
.hag-arrow-link { display:inline-flex; gap:18px; align-items:center; border-bottom:2px solid var(--ink); padding-bottom:7px; font:700 11px/1 var(--mono); letter-spacing:.06em; text-decoration:none; text-transform:uppercase; }
.hag-arrow-link span { color:var(--ochre); font-size:20px; }
.hag-bench__art { min-height:440px; overflow:hidden; background:var(--ink); position:relative; }
.hag-bench__art img { display:block; width:100%; height:100%; object-fit:cover; }
.hag-tools { position:absolute; inset:0; background:linear-gradient(115deg,#34464b,#182326 55%,#26383d); overflow:hidden; }
.hag-tools::before { content:""; position:absolute; left:11%; top:15%; width:82%; height:70%; border:1px solid rgba(245,242,233,.42); box-shadow:inset 0 0 0 13px rgba(24,35,38,.35); transform:rotate(-5deg); }
.hag-tools i { position:absolute; display:block; background:var(--ochre); transform:rotate(31deg); }
.hag-tools i:nth-child(1) { width:15px; height:74%; left:31%; top:6%; border-radius:10px; }
.hag-tools i:nth-child(2) { width:105px; height:15px; left:48%; top:39%; border-radius:12px; }
.hag-tools i:nth-child(3) { width:18px; height:54%; left:66%; top:18%; background:var(--chalk); border-radius:15px; }
.hag-tools i:nth-child(4) { width:55px; height:55px; left:40%; top:18%; background:transparent; border:9px solid var(--chalk); border-radius:50%; }
.hag-tools span { position:absolute; bottom:27px; right:27px; color:var(--chalk); font:700 9px var(--mono); letter-spacing:.18em; transform:rotate(-5deg); }
.hag-rack { padding:clamp(55px,8vw,115px) max(4vw,28px); display:grid; grid-template-columns:.9fr 1.1fr; gap:45px; background:var(--chalk); }
.hag-rack h2,.hag-notes h2 { font-size:clamp(44px,5vw,77px); }
.hag-topic-list { border-top:1px solid var(--ink); }
.hag-topic { display:grid; grid-template-columns:78px minmax(110px,.5fr) 1fr; gap:13px; padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none; align-items:baseline; transition:padding .18s ease, background .18s ease; }
.hag-topic:hover { padding-left:10px; background:rgba(189,124,39,.08); }
.hag-topic span { color:var(--ochre); font:700 10px var(--mono); letter-spacing:.09em; }.hag-topic strong { font-family:var(--sans); font-size:28px; letter-spacing:-.04em; text-transform:uppercase; }.hag-topic small { color:var(--steel); font-size:14px; line-height:1.3; }
.hag-notes { display:grid; grid-template-columns:.75fr 1.25fr; gap:8vw; padding:clamp(55px,8vw,115px) max(4vw,28px); background:var(--ink); color:var(--chalk); }.hag-notes__heading p:last-child { max-width:250px; color:#b7c1bd; }.hag-notes .hag-kicker { color:#d0b174; }
.hag-post-stack { border-top:1px solid rgba(245,242,233,.35); }.hag-post { border-bottom:1px solid var(--line); }.hag-notes .hag-post { border-color:rgba(245,242,233,.25); }.hag-post__link { display:grid; grid-template-columns:100px minmax(150px,.8fr) 1.2fr 130px; gap:20px; align-items:center; padding:26px 0; color:inherit; text-decoration:none; }.hag-post__type { color:var(--ochre); font:700 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }.hag-post h2 { margin:0; font-family:var(--sans); font-size:28px; line-height:.94; letter-spacing:-.04em; text-transform:uppercase; }.hag-post p { margin:0; color:#b7c1bd; font-size:15px; line-height:1.35; }.hag-post__read { font:700 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; text-align:right; }.hag-post__read b { color:var(--ochre); font-size:19px; margin-left:5px; }
.hag-empty { padding:65px 0; }.hag-empty h3,.hag-empty h2 { margin:0 0 12px; font-family:var(--sans); font-size:40px; line-height:.9; letter-spacing:-.05em; text-transform:uppercase; }.hag-empty p { max-width:390px; }.hag-notes .hag-empty { color:var(--chalk); }
.hag-list-header { padding:clamp(70px,10vw,130px) max(7vw,50px) 50px; border-bottom:1px solid var(--line); }.hag-list-header h1 { font-size:clamp(53px,7vw,100px); }.hag-archive-description { max-width:520px; }.hag-list { padding:0 max(7vw,50px) 100px; }.hag-list .hag-post__link { grid-template-columns:110px minmax(210px,1fr) 1.1fr 120px; }.hag-list .hag-post p { color:var(--steel); }.navigation.pagination { padding-top:32px; font:700 11px var(--mono); letter-spacing:.06em; }.navigation.pagination .nav-links { display:flex; gap:14px; align-items:center; }.navigation.pagination a,.navigation.pagination span { padding:8px; }
.hag-article { max-width:930px; padding:clamp(65px,10vw,130px) max(7vw,50px) 65px; }.hag-article header { max-width:760px; }.hag-article h1 { margin-bottom:26px; font-size:clamp(50px,7vw,100px); }.hag-article .hag-kicker a { text-decoration:none; }.hag-deck { max-width:600px; font-size:22px; line-height:1.4; }.hag-content { max-width:670px; margin-top:55px; font-size:19px; }.hag-content > * { max-width:100%; }.hag-content h2,.hag-content h3 { margin-top:2.2em; font-family:var(--sans); font-size:36px; line-height:.95; letter-spacing:-.04em; text-transform:uppercase; }.hag-content a { color:#7d4c12; }.hag-content figure { margin:32px 0; }.hag-content img { height:auto; }.hag-article__footer { margin-top:55px; border-top:1px solid var(--line); padding-top:18px; font:700 11px var(--mono); text-transform:uppercase; }.hag-recommendations,.hag-discovery { padding:55px max(7vw,50px); background:var(--chalk); }.hag-recommendations h2 { margin:0 0 25px; font-family:var(--sans); font-size:47px; letter-spacing:-.05em; text-transform:uppercase; }.hag-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--ink); }.hag-card-grid .hag-post:nth-child(odd) { padding-right:22px; }.hag-card-grid .hag-post:nth-child(even) { padding-left:22px; border-left:1px solid var(--line); }.hag-card-grid .hag-post__link { display:block; }.hag-card-grid .hag-post h2 { margin:11px 0; }.hag-card-grid .hag-post p { color:var(--steel); }.hag-card-grid .hag-post__read { display:block; margin-top:15px; text-align:left; }.hag-discovery { padding-top:10px; }.hag-discovery__links { border-top:1px solid var(--line); }.hag-discovery__links a { display:flex; justify-content:space-between; gap:25px; padding:15px 0; border-bottom:1px solid var(--line); text-decoration:none; font-family:var(--sans); font-size:25px; letter-spacing:-.03em; text-transform:uppercase; }.hag-discovery__links span { color:var(--ochre); }
.hag-footer { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:30px; padding:45px max(4vw,28px); background:#10191b; color:var(--chalk); }.hag-footer__mark { color:var(--chalk); }.hag-footer p { margin:0; color:#b7c1bd; font-size:14px; }.hag-footer nav { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:16px; font:700 10px var(--mono); letter-spacing:.05em; text-transform:uppercase; }.hag-footer nav a { color:var(--chalk); }
.hag-404 { padding:clamp(80px,15vw,180px) max(7vw,50px); min-height:60vh; }.hag-404 h1 { max-width:650px; font-size:clamp(55px,9vw,130px); }.hag-404 p { max-width:380px; }
@media (max-width: 820px) { .hag-header { align-items:flex-start; }.hag-nav { gap:10px; flex-wrap:wrap; justify-content:flex-end; }.hag-nav > a:not(.hag-search):not(:first-child) { display:none; }.hag-bench,.hag-rack,.hag-notes { grid-template-columns:1fr; }.hag-bench__copy { padding:75px 28px 55px; }.hag-bench__art { min-height:360px; }.hag-rack { padding:65px 28px; }.hag-notes { gap:38px; padding:65px 28px; }.hag-post__link,.hag-list .hag-post__link { grid-template-columns:80px 1fr 90px; }.hag-post p { display:none; }.hag-footer { grid-template-columns:1fr; }.hag-footer nav { justify-content:flex-start; } }
@media (max-width: 480px) { body.hag-body { font-size:16px; }.hag-header { min-height:73px; padding:20px 18px; gap:14px; }.hag-mark { font-size:26px; }.hag-nav { font-size:9px; }.hag-search { padding:7px; }.hag-bench h1 { font-size:59px; }.hag-bench__art { min-height:300px; }.hag-rack,.hag-notes { padding:55px 18px; }.hag-topic { grid-template-columns:63px 1fr; }.hag-topic small { grid-column:2; }.hag-post__link,.hag-list .hag-post__link { grid-template-columns:1fr 55px; gap:10px; padding:20px 0; }.hag-post__type { grid-column:1 / -1; }.hag-post h2 { font-size:24px; }.hag-post__read { grid-column:2; grid-row:2; font-size:0; }.hag-post__read b { font-size:21px; }.hag-list-header,.hag-list,.hag-article,.hag-recommendations,.hag-discovery,.hag-404 { padding-left:18px; padding-right:18px; }.hag-card-grid { grid-template-columns:1fr; }.hag-card-grid .hag-post:nth-child(n) { padding-left:0; padding-right:0; border-left:0; }.hag-footer { padding:35px 18px; }.hag-content { margin-top:36px; font-size:18px; }.hag-content h2,.hag-content h3 { font-size:31px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.hag-topic { transition:none; } }

/* OceanWP heading defaults are intentionally overridden for readable bench lettering. */
body.hag-body .hag-topic strong,
body.hag-body .hag-post h2,
body.hag-body .hag-empty h2,
body.hag-body .hag-empty h3,
body.hag-body .hag-content h2,
body.hag-body .hag-content h3,
body.hag-body .hag-recommendations h2,
body.hag-body .hag-discovery__links a {
	font-family:var(--sans);
	font-weight:700;
	line-height:1;
	letter-spacing:-.015em;
}
body.hag-body .hag-notes h2,
body.hag-body .hag-notes .hag-empty h2,
body.hag-body .hag-notes .hag-empty h3,
body.hag-body .hag-notes .hag-post h2 { color:var(--chalk); }
body.hag-body .hag-notes__heading p:last-child,
body.hag-body .hag-notes .hag-empty p,
body.hag-body .hag-notes .hag-post p { color:#dbe0d9; }
body.hag-body .hag-notes .hag-kicker { color:#e0b56a; }