/* LoGrasso's Barbershop — 331 W Broadway, South Boston
   Archetype: Retro / Period Sign (Southie storefront sign painter)
   Palette sampled from the shop's own photos + the window decal. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100..125,400..900;1,100..125,400..900&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&display=swap');

:root{
  --ink:#1b1511;          /* chair leather / shop darks */
  --ink-2:#2e2623;        /* wood floor shadow */
  --cream:#e9e0c6;        /* the shop's own wall color */
  --paper:#f4efe0;
  --tan:#8a6039;          /* wood trim / whiteboard frame */
  --red:#b4232f;          /* barber pole */
  --blue:#23407a;         /* barber pole */
  --muted:#6b5f52;
  --rule:rgba(27,21,17,.16);
  --wide:"Archivo",system-ui,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wide{font-family:var(--wide);font-variation-settings:"wdth" 118;letter-spacing:-.01em}
.label{
  font-family:var(--wide);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.shell{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- barber-pole stripe (drawn, never an emoji) ---------- */
.pole{
  height:26px;
  background:repeating-linear-gradient(74deg,
    var(--red) 0 46px, #fbfaf6 46px 92px, var(--blue) 92px 138px, #fbfaf6 138px 184px);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}

/* ---------- header ---------- */
header.top{background:var(--ink);color:var(--cream)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 24px;max-width:1180px;margin:0 auto}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cream)}
.mark svg{width:16px;height:34px;flex:none}
.mark b{
  font-family:var(--wide);font-variation-settings:"wdth" 125;font-weight:800;
  font-size:1.02rem;letter-spacing:.03em;text-transform:uppercase;line-height:1;
}
nav ul{list-style:none;display:flex;align-items:center;gap:26px}
nav a{
  font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:rgba(233,224,198,.72);padding:6px 0;border-bottom:2px solid transparent;
}
nav a:hover{color:var(--cream)}
nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--red)}
.txt-btn{
  font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  background:var(--red);color:#fff;padding:11px 17px;white-space:nowrap;
}
.txt-btn:hover{background:#8e1a24}
.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.menu-box{display:flex;align-items:center;gap:14px}
.burger{display:none}
.drawer{display:none}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink)}
.hero img{width:100%;height:min(78vh,660px);object-fit:cover;object-position:58% 62%;opacity:.62}
.hero-type{
  position:absolute;inset:auto 0 0 0;padding:0 24px 46px;
  max-width:1180px;margin:0 auto;left:0;right:0;
}
.hero h1{
  font-family:var(--wide);font-variation-settings:"wdth" 125;font-weight:800;
  text-transform:uppercase;color:#fff;line-height:.86;letter-spacing:-.015em;
  font-size:clamp(2.6rem,10.5vw,7.4rem);
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.hero h1 em{display:block;font-style:normal;font-size:.365em;letter-spacing:.055em;color:var(--cream);margin-top:.5em}
.hero p.sub{
  color:rgba(255,255,255,.9);max-width:33ch;margin-top:18px;font-size:1.08rem;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.hero-tag{
  position:absolute;top:26px;right:24px;text-align:right;color:rgba(255,255,255,.82);
  font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:600;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.9;
}

/* ---------- generic sections ---------- */
section{padding:74px 0}
.kicker{display:block;margin-bottom:14px}
h2{
  text-wrap:balance;
  font-family:var(--wide);font-variation-settings:"wdth" 122;font-weight:800;
  text-transform:uppercase;line-height:.94;letter-spacing:-.01em;
  font-size:clamp(1.9rem,4.6vw,3.05rem);
}
h3{font-family:var(--wide);font-variation-settings:"wdth" 115;font-weight:700;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase}
p+p{margin-top:1em}
.lede{font-size:1.22rem;line-height:1.55;max-width:38ch}

/* two-column editorial split, deliberately uneven */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,86px);align-items:start}
.split .col-narrow{max-width:46ch}

/* ---------- text-Sal block ---------- */
.urgent{background:var(--ink);color:var(--cream)}
.urgent .shell{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(26px,5vw,70px);align-items:center}
.urgent h2{color:#fff}
.urgent p{color:rgba(233,224,198,.85);margin-top:16px;max-width:44ch}
.urgent .big-text{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-family:var(--wide);font-variation-settings:"wdth" 118;font-weight:800;
  font-size:clamp(1.15rem,3.4vw,1.75rem);text-transform:uppercase;letter-spacing:.02em;
  padding:20px 30px;line-height:1;
}
.urgent .big-text:hover{background:#8e1a24}
.urgent .num{
  display:block;margin-top:12px;font-family:var(--wide);font-variation-settings:"wdth" 112;
  font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(233,224,198,.6)
}

/* ---------- price board (echoes the whiteboard on his wall) ---------- */
.board{
  background:#fbfaf6;border:9px solid var(--tan);
  box-shadow:0 18px 44px rgba(27,21,17,.14);
  padding:clamp(24px,4vw,42px);max-width:560px;
}
.board .row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--rule)}
.board .row:last-child{border-bottom:0}
.board .row span:first-child{font-family:var(--wide);font-variation-settings:"wdth" 115;font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.03em}
.board .row span:last-child{font-family:var(--wide);font-variation-settings:"wdth" 125;font-weight:800;font-size:1.5rem}
.board small{display:block;color:var(--muted);font-size:.82rem;margin-top:3px;font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400}
.board .foot{margin-top:22px;color:var(--muted);font-size:.92rem}

/* ---------- gallery mosaic (asymmetric on purpose) ---------- */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.mosaic figure{margin:0;position:relative;overflow:hidden;background:var(--ink)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.m-d img{object-position:78% 45%}
.m-b img{object-position:50% 40%}
.m-a{grid-column:span 4;aspect-ratio:4/3}
.m-b{grid-column:span 2;aspect-ratio:3/4}
.m-c{grid-column:span 3;aspect-ratio:5/4}
.m-d{grid-column:span 3;aspect-ratio:5/4}
.mosaic figcaption{
  position:absolute;left:0;bottom:0;background:rgba(27,21,17,.78);color:var(--cream);
  font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:600;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;
}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:38px;max-width:960px}
.quote{border-left:3px solid var(--red);padding-left:24px}
.quote:nth-child(even){margin-left:auto;border-left:0;border-right:3px solid var(--blue);padding:0 24px 0 0;text-align:right;max-width:58ch}
.quote p{font-size:clamp(1.12rem,2.6vw,1.5rem);line-height:1.42;font-style:italic;color:var(--ink-2)}
.quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- hours / facts ---------- */
.hours{width:100%;border-collapse:collapse;max-width:460px}
.hours td{padding:11px 0;border-bottom:1px solid var(--rule);font-size:1rem}
.hours td:last-child{text-align:right;font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:600;font-size:.9rem}
.hours tr.closed td{color:var(--muted)}
.facts p{margin-bottom:18px}
.facts a{font-weight:600}
.map{border:0;width:100%;height:380px;filter:saturate(.86)}
.note{color:var(--muted);font-size:.92rem}
.bracket{border-bottom:1px dashed var(--tan);color:var(--tan)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(233,224,198,.78);padding:56px 0 28px;margin-top:10px}
footer .shell{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
footer a{color:rgba(233,224,198,.78);text-decoration:none}
footer a:hover{color:#fff}
footer h4{font-family:var(--wide);font-variation-settings:"wdth" 115;font-weight:700;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:14px}
footer ul{list-style:none;line-height:2}
.credit{max-width:1180px;margin:38px auto 0;padding:16px 24px 0;border-top:1px solid rgba(233,224,198,.15);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:rgba(233,224,198,.45)}
.credit a{color:rgba(233,224,198,.45);text-decoration:underline;text-underline-offset:3px}

/* ---------- sticky mobile action bar ---------- */
.dock{display:none}

@media (max-width:900px){
  .split,.urgent .shell,footer .shell{grid-template-columns:1fr}
  .urgent .shell{gap:30px}
  .quote:nth-child(even){text-align:left;border-right:0;border-left:3px solid var(--blue);padding:0 0 0 24px;margin-left:0}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .m-a,.m-d{grid-column:span 4}
  .m-b,.m-c{grid-column:span 2;aspect-ratio:1/1}
}
@media (max-width:760px){
  body{font-size:18px}
  .hero-tag{display:none}
  .hero img{height:min(74vh,560px)}
  .bar{padding:12px 16px;gap:8px}
  .mark svg{width:13px;height:28px}
  .mark b{font-size:.78rem;letter-spacing:.02em}
  .txt-btn{padding:10px 12px;font-size:.62rem;letter-spacing:.1em}
  .burger{padding:10px 11px;font-size:.62rem;letter-spacing:.1em}
  section{padding:54px 0}
  /* CSS-only menu */
  nav{display:none}
  .burger{display:block;
    font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:700;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
    border:1px solid rgba(233,224,198,.35);padding:10px 14px;cursor:pointer;
  }
  .drawer{background:var(--ink);border-top:1px solid rgba(233,224,198,.15)}
  .menu-toggle:checked ~ .drawer{display:block}
  .drawer ul{list-style:none;padding:8px 24px 20px}
  .drawer a{
    display:block;padding:13px 0;text-decoration:none;color:var(--cream);
    font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:600;
    font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
    border-bottom:1px solid rgba(233,224,198,.12);
  }
  .dock{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    border-top:1px solid rgba(27,21,17,.25);
  }
  .dock a{
    text-align:center;padding:15px 8px;text-decoration:none;color:#fff;background:var(--ink);
    font-family:var(--wide);font-variation-settings:"wdth" 112;font-weight:700;
    font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  }
  .dock a.hot{background:var(--red)}
  body{padding-bottom:54px}
}