/* Bramble & Bark Dog Grooming: the four inner pages and the 404. Loaded after site.css, which holds the tokens and shared parts.
   Motion rule (binding on every page): nothing in this file moves. Hover, focus and active changes are instant. */

/* ---------- page head ---------- */
.page-head{padding-top:var(--s6);padding-bottom:var(--s5)}
.page-head h1{font:400 1.75rem/1.12 var(--f-num);letter-spacing:.005em;max-width:20ch;text-wrap:balance}
.page-head .lede{margin-top:var(--s4);max-width:var(--measure)}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);margin-top:var(--s5)}
.page-actions .btn-primary{width:100%}
.link-line{display:inline-flex;align-items:center;min-height:44px}
.sec-head h2,.sec-h2{font:700 1.5rem/1.2 var(--f-body)}
.section+.section{padding-top:0}
.rule-top{border-top:1px solid var(--ink)}
.rule-top .wrap{padding-top:var(--s6)}

/* ---------- the line-up: six dogs on one ground line, drawn to one scale ---------- */
.lineup{--k:1;display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--s6);margin-top:var(--s5)}
.lineup>li{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.lineup .dog-plate{display:flex;align-items:flex-end;justify-content:flex-start;height:calc(240px*var(--k));border-bottom:var(--rule) solid var(--ink)}
.lineup .dog-plate img{display:block;width:calc(var(--w)*1px*var(--k));max-width:100%;height:auto}
.lineup .key-ring{display:flex;margin:var(--s3) 0 var(--s2)}
.lineup .lu-weight{font:400 1.0625rem/1.4 var(--f-body)}
.lineup .lu-weight b{font-family:var(--f-class);font-weight:700;text-transform:uppercase;letter-spacing:.11em}
.lineup .size-desc{margin-top:var(--s1)}

/* ---------- coats ---------- */
.coat-defs{margin-top:var(--s4);max-width:var(--measure)}
.coat-defs>div{padding:var(--s3) 0;border-bottom:1px dotted var(--brass)}
.coat-defs dt{display:flex;align-items:center;gap:var(--s3);font:700 1.0625rem/1.3 var(--f-body)}
.coat-defs dt svg{flex:none;width:34px;height:28px;color:var(--ink)}
.coat-defs dd{margin-top:var(--s1)}

/* ---------- tariff tables on the Prices page ---------- */
.tariff-2 .bath-table{max-width:820px}
.tariff-2 .bath-table td{font-size:1.25rem}
.incl{width:100%;max-width:820px;border-collapse:collapse;margin-top:var(--s4);table-layout:fixed}
.incl th,.incl td{padding:10px 4px;border-bottom:1px dotted var(--brass);text-align:left;vertical-align:baseline}
.incl thead th{font-weight:700;line-height:1.2;border-bottom:1px solid var(--ink);vertical-align:bottom}
.incl tbody th{font-weight:400}
.incl th:first-child{width:46%}
.incl td{font-weight:700}
.incl .tk{display:inline-block;width:20px;height:20px;margin-right:6px;vertical-align:-3px}
.incl .tk path{fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.incl td.no{font-weight:400;color:var(--brass)}
.incl td.val{font-weight:400}

/* ---------- three register tapes ---------- */
.tapes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);margin-top:var(--s5);align-items:start}
.tape{max-width:360px;border:1px solid var(--ink);border-top:10px solid var(--ink);padding:var(--s4) var(--s4) var(--s5);background:var(--paper)}
.tape h3{font:700 1.0625rem/1.3 var(--f-body)}
.tape-lines{margin-top:var(--s3);font-family:var(--f-mono);font-size:1.375rem;line-height:1.3}
.tape-lines>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;padding:6px 0}
.tape-lines dt{grid-column:1/-1;grid-row:1}
.tape-lines>div::after{content:"";grid-row:2;grid-column:1;align-self:end;border-bottom:1px dotted var(--brass);height:0;margin-bottom:6px}
.tape-lines dd{grid-row:2;grid-column:2;font-weight:400}
.tape-total{display:flex;justify-content:space-between;margin-top:var(--s2);padding-top:var(--s2);border-top:2px solid var(--ink);font:400 1.5rem/1.2 var(--f-mono)}
.tape-note{margin-top:var(--s3);font-size:1.0625rem;line-height:1.45}

/* ---------- closer ---------- */
.closer{border-top:3px solid var(--ink);padding-block:var(--s6) var(--s7)}
.closer p{max-width:var(--measure)}
.closer .btn-primary{margin-top:var(--s4);width:100%}

/* ---------- about ---------- */
.dated{max-width:var(--measure);margin-top:var(--s4)}
.dated>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;padding:var(--s3) 0;border-bottom:1px dotted var(--brass)}
.dated dt{font:700 1.1875rem/1.3 var(--f-body);color:var(--brass)}
.dated dd{min-width:0}
.plan-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)}
.plan{position:relative;margin:0;border:3px solid var(--ink);padding:5px}
.plan-frame{position:relative;border:1px solid var(--ink)}
.plan-svg{display:block;width:100%;height:auto}
.plan-n{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transform:translate(-50%,-50%);border:3px solid var(--brass);border-radius:50%;background:var(--paper);font:700 1.0625rem/1 var(--f-body);color:var(--ink)}
.plan figcaption{padding:var(--s2) var(--s3) var(--s3);font:400 1.0625rem/1.45 var(--f-body)}
.plan-key{display:grid;gap:var(--s3);list-style:none;counter-reset:pk}
.plan-key li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--s3);align-items:start;padding-bottom:var(--s3);border-bottom:1px dotted var(--brass)}
.plan-key .key-ring{margin:0}
.plan-key b{display:block;font-weight:700}
.people{max-width:var(--measure);margin-top:var(--s4)}
.people>div{padding:var(--s3) 0;border-bottom:1px dotted var(--brass)}
.people dt{font:700 1.0625rem/1.3 var(--f-body)}
.people dd{margin-top:var(--s1)}
.about-card-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s4);align-items:start}
.index-card{max-width:440px;border:1px solid var(--ink);border-top:6px solid var(--ink);padding:var(--s4) var(--s4) var(--s5);background:var(--paper)}
.index-card .ic-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--ink)}
.index-card .ic-name{font:700 1.75rem/1.1 var(--f-hand);color:var(--pen)}
.index-card .ic-tag{font-family:var(--f-class);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:1.0625rem}
.index-card dl{margin-top:var(--s2)}
.index-card dl>div{padding:var(--s2) 0;border-bottom:1px dotted var(--brass)}
.index-card dt{font-weight:700;color:var(--brass)}
.index-card dd{font:700 1.25rem/1.35 var(--f-hand);color:var(--pen);overflow-wrap:anywhere}
.limits{max-width:var(--measure);margin-top:var(--s4)}
.limits li{padding:var(--s2) 0 var(--s2) var(--s6);border-bottom:1px dotted var(--brass);position:relative}
.limits li::before{content:"";position:absolute;left:0;top:calc(var(--s2) + .62em);width:var(--s5);border-top:3px solid var(--ink)}

/* ---------- gallery ---------- */
.plates{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);margin-top:var(--s5)}
.plate{margin:0;min-width:0}
.plate img{display:block;width:100%;height:auto;border-bottom:var(--rule) solid var(--ink)}
.plate figcaption{margin-top:var(--s3);max-width:var(--measure)}
.plate .pl-no{display:block;font:700 1.1875rem/1.3 var(--f-body);color:var(--brass);margin-bottom:2px}
.plate .pl-credit{display:block;margin-top:var(--s2);font:400 1.0625rem/1.4 var(--f-body);color:var(--brass)}
.plate .pl-src{display:inline-flex;align-items:center;min-height:44px;color:var(--pen)}
.plate-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
.credits{max-width:var(--measure);margin-top:var(--s4)}
.credits li{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);padding:2px 0;border-bottom:1px dotted var(--brass)}
.credits .cr-n{flex:none;min-width:8.5rem;font-weight:700;color:var(--brass)}
.credits .cr-link{display:inline-flex;align-items:center;min-height:44px;flex:1 1 14rem}
.note-block{max-width:var(--measure);margin-top:var(--s4)}
.note-block p+p{margin-top:var(--s3)}

/* ---------- contact ---------- */
.tel-big{display:inline-flex;align-items:center;min-height:56px;font:700 2rem/1.1 var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink);text-decoration-thickness:3px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
.ledger-wide{max-width:var(--measure)}
.ledger-wide>div{grid-template-columns:minmax(0,1fr)}
.ledger-wide dt{padding-bottom:0}
.contact-block h2{font:700 1.5rem/1.2 var(--f-body)}
.contact-block>p{margin-top:var(--s2);max-width:var(--measure)}
.contact-block .ledger{margin-top:var(--s3)}
.note-form-wrap .licence{margin-top:var(--s5)}
.note-form-wrap .licence h3{font:700 1.25rem/1.3 var(--f-body)}
.line .opt{font-weight:400}

/* ---------- 404 ---------- */
.lost-list{max-width:var(--measure);margin-top:var(--s5);border-top:1px solid var(--ink)}
.lost-list li{border-bottom:1px dotted var(--brass)}
.lost-list a{display:grid;grid-template-columns:minmax(0,1fr);align-items:baseline;min-height:56px;padding:var(--s2) 0;color:var(--pen);text-decoration:none}
.lost-list a b{font:700 1.25rem/1.3 var(--f-body);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.lost-list a:hover b{text-decoration-thickness:4px}
.lost-list a span{color:var(--ink)}
.lost-path{margin-top:var(--s4);overflow-wrap:anywhere;font:400 1.375rem/1.4 var(--f-mono)}

/* ---------- wider screens ---------- */
@media (min-width:640px){
  .page-head h1{font-size:2.25rem}
  .page-actions .btn-primary{width:auto}
  .closer .btn-primary{width:auto}
  .lineup{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s4);--k:.85}
  .lineup>li.is-wide{grid-column:span 2}
  .dated>div{grid-template-columns:9.5rem minmax(0,1fr);column-gap:var(--s4)}
  .tapes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s5)}
  .plan-n{width:36px;height:36px}
  .plate-row{grid-template-columns:none;display:flex;align-items:flex-start;gap:var(--s5)}
  .plate-row>.plate{flex:var(--ar,1) 1 0%}
  .tel-big{font-size:2.5rem}
  .lost-list a{grid-template-columns:9rem minmax(0,1fr);column-gap:var(--s4)}
}
@media (min-width:960px){
  .page-head{padding-top:var(--s7)}
  .page-head h1{font-size:2.75rem;line-height:1.06}
  .lineup{display:flex;align-items:stretch;column-gap:0;--k:1}
  .lineup>li{flex:var(--g,1) 1 0;padding-inline:var(--s2)}
  .lineup>li:first-child{padding-left:0}
  .lineup>li:last-child{padding-right:0}
  .tapes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan-wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:var(--s7);align-items:start}
  .about-card-wrap{grid-template-columns:minmax(0,440px) minmax(0,1fr);column-gap:var(--s7)}
  .about-card-wrap .note-block{margin-top:0}
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s8)}
  .plates-lead{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:var(--s6);align-items:end}
  .plates-lead figcaption{margin-top:0;padding-bottom:var(--s1)}
}
@media (max-width:359px){
  .tel-big{font-size:1.75rem}
}
@media print{.page-actions,.closer .btn-primary{display:none}}
.slip-note .slip-inner{grid-template-columns:minmax(0,1fr)}
