@font-face{font-family:'Space Grotesk';src:url('../fonts/heading-space-grotesk.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap} @font-face{font-family:'Newsreader';src:url('../fonts/body-newsreader.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap} :root{ --harbor:#17454F; --harbor-2:#1D5460; --harbor-line:#2C6B78; --tag:#F7F1E4; --tag-line:#DCD1BC; --ink:#16333A; --ink-dim:#55707A; --chalk:#EAF2F3; --chalk-dim:#A9C3C8; /* .dim follows its ground. The default is the dark one, because is dark; light-ground containers re-point it below. It used to be ink-dim unconditionally, which measured 1.99:1 on the harbor ground. */ --dim:var(--chalk-dim); --strong:var(--chalk); --flag:var(--rose); --marigold:#F7B733; --marigold-dp:#DE9B10; --rose:#FFA8BE; --sky:#7EC8D6; --lnk:var(--marigold); --lnk-h:var(--chalk); --lnk-a:var(--rose); --quiet:var(--chalk); --pad:20px; --r:10px; --rail:260px; --display:var(--catalog-font-heading); --body:var(--catalog-font-body); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--harbor);color:var(--chalk); font:400 16px/1.65 var(--body)} img{max-width:100%;height:auto;display:block} h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.15; margin:0 0 .5em;letter-spacing:-.01em} h1{font-size:clamp(1.85rem,1.2rem + 2.4vw,2.9rem);font-weight:800} h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem)} h3{font-size:1.12rem} p,ul,ol,dl,table{margin:0 0 1em} ul,ol{padding-left:1.15em} a{color:var(--lnk);text-underline-offset:3px} a:hover{color:var(--lnk-h)} a:active{color:var(--lnk-a)} /* Light-ground containers re-point the link tokens. A custom property inherits, so one declaration covers every link inside without the descendant selectors that used to reach into .btn and .chip. */ .tag,.card,.coat,.chit,.note,.mixed,.score,.feature,.ask,.fallback, .contactline,.slab--tag,.person-ask,.crew li,.board-card{ --lnk:#0F5A68; --lnk-h:var(--ink); --lnk-a:#8A4A00; --quiet:var(--ink)} /* Marigold is too light for #0F5A68 body links - it measures 4.39. */ .ask{--lnk:var(--ink); --lnk-h:var(--harbor); --lnk-a:#8A4A00} /* Light grounds only. .board-card is deliberately absent - it appears in the link list above but its background is --harbor-2, so ink-dim would repeat the very defect this token exists to fix. */ .tag,.card,.coat,.chit,.note,.mixed,.score,.feature,.ask,.fallback, .contactline,.slab--tag,.person-ask,.crew li{ --dim:var(--ink-dim); --strong:var(--ink); --flag:#9B2C4A} :focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px} .skip{position:absolute;left:-9999px;top:0;background:var(--marigold);color:var(--ink); padding:10px 16px;z-index:20;font-weight:700} .skip:focus{left:8px;top:8px} .vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .wrap{max-width:1200px;margin:0 auto;padding:0 16px} @media (min-width:600px){.wrap{padding:0 24px}} /* ---- masthead ---------------------------------------------------------- */ .mast{background:var(--harbor-2);border-bottom:1px solid var(--harbor-line)} .mast-in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:14px 0} .brand{font-family:var(--display);font-weight:800;font-size:1.22rem;color:var(--chalk); text-decoration:none;letter-spacing:-.02em;margin-right:auto} .brand:hover{color:var(--marigold)} .brand:active{color:var(--rose)} .brand span{color:var(--marigold)} .nav{display:flex;flex-wrap:wrap;gap:4px 6px;list-style:none;margin:0;padding:0} .nav a{display:block;padding:8px 11px;border-radius:8px;color:var(--chalk); text-decoration:none;font-size:.94rem;font-weight:600} .nav a:hover{background:var(--harbor-line);color:var(--chalk)} .nav a[aria-current=page]{background:var(--harbor);color:var(--marigold); box-shadow:inset 0 0 0 1px var(--harbor-line)} .nav a[aria-current=page]:hover{background:var(--harbor-line);color:var(--chalk)} .nav a:active{background:var(--harbor);color:var(--marigold)} .nav a[aria-current=page]:active{background:var(--ink);color:var(--marigold)} .burger{display:none;align-items:center;gap:8px;background:var(--harbor);color:var(--chalk); border:1px solid var(--harbor-line);border-radius:8px;padding:9px 13px;font:inherit; font-size:.94rem;font-weight:700;cursor:pointer} .burger:hover{background:var(--harbor-line)} .burger-bars,.burger-bars::before,.burger-bars::after{display:block;width:17px;height:2px; background:var(--marigold);content:""} .burger-bars{position:relative} .burger-bars::before{position:absolute;top:-5px} .burger-bars::after{position:absolute;top:5px} /* Only a masthead that JavaScript has claimed collapses. With JS off the list stays open at every width, so the nav is never a button that does nothing. */ @media (max-width:719px){ .mast[data-nav] .burger{display:inline-flex} .mast[data-nav] nav{width:100%} .mast[data-nav] .nav{display:none} .mast[data-nav][data-open=true] .nav{display:flex;flex-direction:column;gap:4px} .mast[data-nav][data-open=true] .nav a{padding:11px 13px} } /* ---- shell: board rail + tag column ------------------------------------ Below 768px the rail is REMOVED FROM THE FLOW, not hidden: display:contents dissolves its box and promotes its cards to grid items of .shell, so the content stays in the document and in the reading order. */ .shell{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 0 44px} @media (min-width:768px){ .shell{grid-template-columns:var(--rail) minmax(0,1fr);gap:28px;align-items:start} } .board{display:contents} @media (min-width:768px){ .board{display:block} .board>*+*{margin-top:16px} } .col{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px} /* ---- the tag card ------------------------------------------------------ */ .tag{background:var(--tag);color:var(--ink);border:1px solid var(--tag-line); border-radius:var(--r);padding:var(--pad); box-shadow:0 1px 0 rgba(22,51,58,.06)} @media (min-width:600px){.tag{padding:26px}} .tag h2,.tag h3{color:var(--ink)} .tag a:not(.btn):hover{color:var(--ink);text-decoration:underline} .tag a:not(.btn):active{color:var(--harbor);text-decoration:underline} .dim{color:var(--dim)} .tag--punch{border-top:5px solid var(--marigold)} .ground h2{color:var(--chalk)} .ground p{color:var(--chalk-dim)} /* the punched hole that makes a luggage tag read as one */ .tag--hole{position:relative;padding-top:36px} .tag--hole::before{content:"";position:absolute;top:14px;left:var(--pad); width:13px;height:13px;border-radius:50%;background:var(--harbor); box-shadow:inset 0 0 0 2px var(--tag-line)} /* ---- the board rail cards --------------------------------------------- */ .board-card{background:var(--harbor-2);border:1px solid var(--harbor-line); border-radius:var(--r);padding:18px} .board-card h2,.board-card h3{color:var(--chalk);font-size:1rem; text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px} .board-card p,.board-card li{color:var(--chalk-dim);font-size:.93rem;margin:0 0 .5em} .board-card strong{color:var(--chalk)} .board-card a:not(.btn){color:var(--marigold)} .board-card a:not(.btn):hover{color:var(--chalk);text-decoration:underline} .board-card a:not(.btn):active{color:var(--rose);text-decoration:underline} .hours{list-style:none;margin:0;padding:0} .hours li{display:flex;justify-content:space-between;gap:12px; padding:5px 0;border-bottom:1px dashed var(--harbor-line);margin:0} .hours li:last-child{border-bottom:0} .hours .shut{font-style:italic} /* ---- buttons: the four-state ladder ------------------------------------ */ .btn{display:inline-block;font-family:var(--display);font-weight:700;font-size:1rem; line-height:1.2;padding:13px 22px;border-radius:8px;border:2px solid transparent; background:var(--marigold);color:var(--ink);text-decoration:none;cursor:pointer; transition:background-color .15s ease,transform .15s ease,color .15s ease} .btn:hover{background:var(--marigold-dp);color:var(--ink);transform:translateY(-2px)} .btn:active{background:var(--harbor);color:var(--marigold);transform:translateY(0)} .btn[aria-disabled=true],.btn:disabled{background:var(--harbor-line); color:var(--chalk-dim);cursor:not-allowed;transform:none} .btn--quiet{background:transparent;color:var(--quiet);border-color:var(--quiet)} .btn--quiet:hover{background:var(--ink);color:var(--tag);transform:translateY(-2px)} .btn--quiet:active{background:var(--harbor);color:var(--marigold);border-color:var(--harbor)} .btn--wide{display:block;width:100%;text-align:center} .btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} /* ---- chips ------------------------------------------------------------- */ .chip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.8rem; font-weight:700;color:var(--ink);background:var(--sky);letter-spacing:.02em} .chip--rose{background:var(--rose)} .chip--tag{background:var(--tag);box-shadow:inset 0 0 0 1px var(--tag-line)} .chip:hover,.chip:active{color:var(--ink);text-decoration:none} .chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0 0 1em;padding:0} /* ---- hero -------------------------------------------------------------- */ .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} @media (min-width:768px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;gap:28px}} .hero-art{border-radius:var(--r);overflow:hidden;border:1px solid var(--harbor-line)} .lede{font-size:1.06rem;color:var(--chalk-dim)} .tag .lede{color:var(--ink-dim)} /* ---- tables ------------------------------------------------------------ */ .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1em} table{border-collapse:collapse;width:100%;font-size:.95rem} caption{text-align:left;font-weight:700;padding-bottom:8px;color:var(--strong); font-family:var(--display)} th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--tag-line); vertical-align:top} th{font-family:var(--display);font-weight:700} thead th{white-space:nowrap} tbody tr:last-child td{border-bottom:0} .price{white-space:nowrap;font-weight:700} /* ---- grids ------------------------------------------------------------- */ .grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;list-style:none; margin:0 0 1em;padding:0} @media (min-width:600px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:600px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1200px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}} .card{background:var(--tag);border:1px solid var(--tag-line);border-radius:var(--r); padding:16px;color:var(--ink)} .card h3{margin-bottom:.35em} .card p:last-child{margin-bottom:0} .shot{border-radius:8px;overflow:hidden;border:1px solid var(--tag-line);margin-bottom:12px} /* ---- staff monogram ---------------------------------------------------- */ .crew{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;list-style:none; margin:0 0 1em;padding:0} @media (min-width:600px){.crew{grid-template-columns:repeat(2,minmax(0,1fr))}} .crew li{display:flex;gap:14px;align-items:flex-start;background:var(--tag); border:1px solid var(--tag-line);border-radius:var(--r);padding:15px;color:var(--ink)} .mono{flex:0 0 48px;width:48px;height:48px;border-radius:8px;background:var(--sky); color:var(--ink);font-family:var(--display);font-weight:800;font-size:1.1rem; display:flex;align-items:center;justify-content:center;letter-spacing:.02em} .crew li:nth-child(2n) .mono{background:var(--rose)} .crew h3{margin:0 0 .2em;font-size:1.02rem} .crew p{margin:0;font-size:.92rem;color:var(--ink-dim)} /* ---- the Coat Check ---------------------------------------------------- The static matrix is the DEFAULT. The interactive panel is hidden until the component's own initialisation sets data-enhanced on this wrapper, and a runtime throw removes that attribute again. min-height is sized to the taller of the two states so the swap cannot shift the page. */ .coat{background:var(--tag);border:1px solid var(--tag-line);border-radius:var(--r); padding:var(--pad);color:var(--ink);min-height:540px} @media (min-width:600px){.coat{padding:26px;min-height:480px}} .coat[data-enhanced=true] .coat-panel{display:block;animation:fade .12s ease-in} .coat[data-enhanced=true] .coat-static{display:none} @keyframes fade{from{opacity:0}to{opacity:1}} .picks{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 18px} @media (min-width:600px){.picks{grid-template-columns:repeat(3,minmax(0,1fr))}} .pick{border:0;margin:0;padding:0;min-width:0} .pick legend{font-family:var(--display);font-weight:700;font-size:.95rem;padding:0 0 7px} .opts{display:flex;flex-wrap:wrap;gap:6px} .opt{position:relative} .opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0; cursor:pointer} .opt span{display:block;padding:8px 12px;border-radius:999px;font-size:.88rem; font-weight:600;background:#fff;border:1px solid var(--tag-line);color:var(--ink)} .opt input:checked+span{background:var(--harbor);color:var(--marigold); border-color:var(--harbor)} .opt input:hover+span{background:var(--tag);border-color:var(--harbor)} .opt input:active+span{background:var(--sky);border-color:var(--harbor)} .opt input:checked:hover+span{background:var(--harbor-2);color:var(--marigold); border-color:var(--harbor-2)} .opt input:checked:active+span{background:var(--ink);color:var(--marigold); border-color:var(--ink)} .opt input:focus-visible+span{outline:3px solid var(--marigold);outline-offset:2px} .opt input:disabled+span{background:var(--tag);color:var(--ink-dim);opacity:.65; cursor:not-allowed} .result{border-top:2px solid var(--marigold);padding-top:16px} .result dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 14px} .result dt{font-weight:700;font-family:var(--display)} .result dd{margin:0} .note{background:#fff;border-left:4px solid var(--sky);padding:11px 14px; border-radius:0 8px 8px 0;font-size:.93rem;margin:0 0 14px} /* ---- forms ------------------------------------------------------------- */ .field{margin:0 0 15px} .field label{display:block;font-weight:700;font-size:.94rem;margin-bottom:5px} .hint{display:block;font-weight:400;font-size:.86rem;color:var(--ink-dim);margin-top:2px} input,select,textarea{width:100%;font:400 1rem/1.5 var(--body);color:var(--ink); background:#fff;border:1px solid var(--ink-dim);border-radius:8px;padding:11px 12px} textarea{min-height:110px;resize:vertical} select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%), linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px} input:hover,select:hover,textarea:hover{border-color:var(--harbor)} input:active,select:active,textarea:active{border-color:var(--harbor); box-shadow:0 0 0 3px rgba(126,200,214,.45)} input:focus,select:focus,textarea:focus{border-color:var(--harbor); box-shadow:0 0 0 3px rgba(126,200,214,.45);outline:0} .duet{display:grid;grid-template-columns:minmax(0,1fr);gap:0 15px} @media (min-width:600px){.duet{grid-template-columns:repeat(2,minmax(0,1fr))}} .req{color:var(--flag)} /* M011 submit-control rule. The control is authored inside .send, which the BASE stylesheet hides. Only a form component whose own initialisation returned successfully sets data-enhanced on itself, and only that reveals it; a runtime throw removes the attribute and the control disappears again. With JavaScript unavailable, disabled or failed, no submit control renders at all and the phone number and email above the form are the visible path. */ .swap>*{margin:14px 0 0} .send{display:none} [data-enhanced=true] .send{display:block} .fallback{background:var(--sky);color:var(--ink);border-radius:8px;padding:12px 14px; font-size:.93rem;font-weight:600;margin:14px 0 0} [data-enhanced=true] .fallback{display:none} /* a white panel inherits the deep band's chalk text and becomes unreadable. It carries its own foreground, like every other light surface here. */ .contactline{background:#fff;color:var(--ink);border:1px solid var(--tag-line); border-radius:8px;padding:13px 15px;margin:0 0 18px;font-size:.97rem} .contactline strong{font-family:var(--display)} .formstate{margin:14px 0 0;padding:13px 15px;border-radius:8px;font-weight:600; border-left:4px solid var(--marigold);background:#fff} .formstate:empty{display:none} /* ---- footer ------------------------------------------------------------ */ .foot{background:var(--harbor-2);border-top:1px solid var(--harbor-line); padding:30px 0;font-size:.93rem;color:var(--chalk-dim)} .foot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} @media (min-width:600px){.foot-in{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1200px){.foot-in{grid-template-columns:repeat(4,minmax(0,1fr))}} .foot h2{font-size:.92rem;text-transform:uppercase;letter-spacing:.07em; color:var(--chalk);margin-bottom:8px} .foot ul{list-style:none;margin:0;padding:0} .foot li{margin-bottom:5px} .foot a{color:var(--chalk);text-decoration:none} .foot a:hover{color:var(--marigold);text-decoration:underline} .foot a:active{color:var(--rose);text-decoration:underline} .foot-end{border-top:1px solid var(--harbor-line);margin-top:24px;padding-top:16px; font-size:.87rem} /* ======================================================================== ART DIRECTION - CAT-A-P0-058 The old grammar was ONE silhouette repeated on every page: a 260px rail, a column, and a uniform card grid. What follows replaces it with full-bleed bands, a ticket/tag signature drawn in CSS, editorial photo cropping, and per-page shapes. Nothing a passing check depends on is removed - the rail classes stay defined so no page breaks mid-rebuild. ==================================================================== */ /* ---- bands: the page is no longer one column on one ground ------------- */ .slab{padding:52px 0} @media (min-width:768px){.slab{padding:76px 0}} .slab--tag{background:var(--tag);color:var(--ink)} .slab--tag h1,.slab--tag h2,.slab--tag h3,.slab--tag h4{color:var(--ink)} .slab--tag p,.slab--tag li{color:var(--ink-dim)} .slab--deep{background:var(--ink)} .slab--rule{border-top:1px solid var(--harbor-line)} .slab>.wrap>:last-child{margin-bottom:0} /* The tear-off perforation: a real ticket edge, in CSS, no image request. */ .perf{height:14px;margin:0; background:radial-gradient(circle at 7px 7px,transparent 6px,var(--tag) 6.5px) 0 0/14px 14px repeat-x} .perf--out{background:radial-gradient(circle at 7px 7px,transparent 6px,var(--harbor) 6.5px) 0 0/14px 14px repeat-x} /* ---- editorial type ---------------------------------------------------- */ .kicker{display:flex;align-items:center;gap:10px;font-family:var(--display); font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase; color:var(--marigold);margin:0 0 14px} .kicker::after{content:"";flex:1;height:2px;background:currentColor;opacity:.35} .slab--tag .kicker{color:#0F5A68} .headline{font-family:var(--display);font-weight:800;letter-spacing:-.025em; line-height:1.03;font-size:clamp(2.2rem,1.1rem + 5vw,4.4rem);margin:0 0 .32em} .headline em{font-style:normal;text-decoration:underline;text-decoration-skip-ink:none; text-decoration-color:rgba(247,183,51,.9);text-decoration-thickness:.085em; text-underline-offset:.1em} .slab--tag .headline em{text-decoration-color:rgba(15,90,104,.75)} .deck{font-size:clamp(1.04rem,.98rem + .5vw,1.26rem);line-height:1.55;max-width:56ch; color:var(--chalk-dim)} .slab--tag .deck{color:var(--ink-dim)} /* ---- inner-page opener: nine pages shared one silhouette and left a wide viewport half empty (CAT-A-P0-058). Headline left, read beside it. Below 900px nothing applies. */ @media (min-width:900px){ .prelude{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); column-gap:56px} /* the kicker spans both columns so auto-placement in column 2 starts at row 2; the headline spans down so nothing in column 1 collides. */ .prelude .kicker{grid-column:1/-1;grid-row:1} .prelude .headline{grid-column:1;grid-row:2/span 6;margin:0} .prelude>:not(.kicker):not(.headline){grid-column:2;margin:0 0 18px} .prelude>:last-child{margin-bottom:0} } /* ---- home opener: image-led, overlapping, not a 50/50 card pair -------- */ .topper{position:relative;padding:0 0 34px} .topper-art{position:relative;border-radius:var(--r);overflow:hidden; border:1px solid var(--harbor-line);aspect-ratio:3/2;background:var(--harbor-2)} .topper-art img{width:100%;height:100%;object-fit:cover;display:block} .topper-say{position:relative;padding:26px 0 0} @media (min-width:900px){ .topper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;padding:34px 0 46px} .topper-art{aspect-ratio:5/4;grid-column:2;grid-row:1;margin-left:-6%} .topper-say{grid-column:1;grid-row:1;z-index:2;margin-right:-16%;padding:34px 30px; background:var(--harbor);border-radius:var(--r); box-shadow:0 24px 60px -28px rgba(0,0,0,.65)} } .topper-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:22px 0 0} .topper-line{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--chalk)} /* ---- the stub: a two-part cloakroom docket ---------------------------- */ .chit{display:grid;grid-template-columns:minmax(0,1fr);background:var(--tag); color:var(--ink);border:1px solid var(--tag-line);border-radius:var(--r); overflow:hidden} @media (min-width:700px){.chit{grid-template-columns:minmax(0,1fr) 172px}} .chit-main{padding:24px} @media (min-width:600px){.chit-main{padding:30px}} .chit-main>:last-child{margin-bottom:0} .chit-off{background:var(--harbor);color:var(--chalk);padding:22px 20px; border-top:2px dashed var(--tag-line);display:flex;flex-direction:column; justify-content:center;gap:4px} @media (min-width:700px){.chit-off{border-top:0;border-left:2px dashed var(--tag-line)}} .chit-off .num{font-family:var(--display);font-weight:800;font-size:2.3rem; line-height:1.05;color:var(--marigold)} .chit-off .lab{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase; color:var(--chalk-dim);font-weight:700} /* ---- editorial cropping: photographs are not all one rectangle -------- */ .figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; list-style:none;margin:0;padding:0} @media (min-width:800px){.figs{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}} .figs li{margin:0;min-width:0} .figs figure{margin:0} .figs figcaption{font-size:.84rem;color:var(--chalk-dim);margin-top:8px;line-height:1.45} .slab--tag .figs figcaption{color:var(--ink-dim)} @media (min-width:800px){ .figs li:nth-child(2){margin-top:34px} .figs li:nth-child(4){margin-top:22px} } .frame{position:relative;border-radius:var(--r);overflow:hidden; border:1px solid var(--harbor-line);background:var(--harbor-2);display:block} .slab--tag .frame{border-color:var(--tag-line);background:#fff} .frame img{width:100%;display:block} .frame--wide{aspect-ratio:16/9} .frame--tall{aspect-ratio:3/4} .frame--sq{aspect-ratio:1/1} .frame--wide img,.frame--tall img,.frame--sq img{height:100%;object-fit:cover} /* ---- the paw mark: drawn, never an image request ---------------------- */ .paw{display:inline-block;width:22px;height:18px;flex:0 0 22px;position:relative; vertical-align:-3px} .paw::before{content:"";position:absolute;left:4px;top:7px;width:14px;height:11px; border-radius:50% 50% 46% 46%;background:currentColor} .paw::after{content:"";position:absolute;left:1px;top:0;width:20px;height:6px; background: radial-gradient(circle at 2.5px 3px,currentColor 2.4px,transparent 2.6px), radial-gradient(circle at 8px 1.6px,currentColor 2.4px,transparent 2.6px), radial-gradient(circle at 13.5px 1.6px,currentColor 2.4px,transparent 2.6px), radial-gradient(circle at 19px 3px,currentColor 2.4px,transparent 2.6px)} .pawlist{list-style:none;margin:0 0 1em;padding:0} .pawlist li{display:flex;gap:11px;align-items:flex-start;margin:0 0 .7em;line-height:1.55} .pawlist .paw{color:var(--marigold);margin-top:4px} .slab--tag .pawlist .paw{color:#0F5A68} /* ---- the question list: a hanging mark, not another card -------------- */ .qa{margin:0 0 1em} .qa dt{font-family:var(--display);font-weight:700;font-size:1.06rem;margin:0 0 .35em; position:relative;padding-left:28px} .qa dt::before{content:"?";position:absolute;left:0;top:-1px;font-size:1.3rem; font-weight:800;line-height:1.15;color:var(--marigold)} .slab--tag .qa dt::before{color:#B87400} .qa dd{margin:0 0 26px;padding-left:28px;border-left:2px solid var(--harbor-line)} .slab--tag .qa dd{border-left-color:var(--tag-line)} .qa dd:last-child{margin-bottom:0} .qa dd>:last-child{margin-bottom:0} /* ---- steps with oversized numerals ------------------------------------ */ .steps{display:grid;grid-template-columns:minmax(0,1fr);list-style:none; margin:0 0 1em;padding:0;counter-reset:s} @media (min-width:800px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}} .steps li{counter-increment:s;position:relative;padding:24px 0 24px 62px; border-top:1px solid var(--tag-line);margin:0} @media (min-width:800px){.steps li{border-top:2px solid var(--marigold);padding:20px 0 0}} .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0; top:18px;font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1; color:var(--marigold)} @media (min-width:800px){.steps li::before{position:static;display:block; margin:0 0 8px;font-size:2.5rem}} .steps h3{margin:0 0 .3em;font-size:1.12rem} /* ---- coat swatches: pet-scale personality, drawn in CSS --------------- */ .swatches{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 1em;padding:0} .swatch{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px; border-radius:999px;background:#fff;border:1px solid var(--tag-line); color:var(--ink);font-weight:700;font-size:.88rem;margin:0} .swatch:hover,.swatch:active{color:var(--ink)} .swatch i{width:22px;height:22px;border-radius:50%;flex:0 0 22px;font-style:normal} .sw-short{background:repeating-linear-gradient(90deg,#C69C6D 0 2px,#A87C4F 2px 4px)} .sw-double{background:repeating-radial-gradient(circle at 50% 50%,#8FA9AE 0 3px,#5E7C83 3px 6px)} .sw-wire{background:repeating-linear-gradient(45deg,#8C7A5E 0 2px,#5E5342 2px 5px)} .sw-silky{background:linear-gradient(160deg,#E5C89A,#B98F53 60%,#8C6B3D)} .sw-curly{background:repeating-radial-gradient(circle at 30% 30%,#3F4B52 0 4px,#6B7A82 4px 7px)} .sw-cat{background:repeating-linear-gradient(115deg,#9AA7AC 0 4px,#67757B 4px 7px)} /* ---- groomers: alternating editorial rows, not identical cards -------- */ .people{list-style:none;margin:0;padding:0} .person{border-top:1px solid var(--tag-line);padding:30px 0;margin:0} .person:first-child{border-top:0;padding-top:4px} @media (min-width:820px){ .person{display:grid;grid-template-columns:190px minmax(0,1fr) minmax(0,.8fr); gap:30px;align-items:start} .person:nth-child(even){grid-template-columns:minmax(0,.8fr) minmax(0,1fr) 190px} .person:nth-child(even) .person-id{order:3} .person:nth-child(even) .person-ask{order:1} } .person-id{text-align:center} /* CAT-A-P0-068. The four groomers were initial tiles with no picture at all. These are original illustrated portraits drawn for this site: one construction grammar, four palette grounds. The ground alternation the tiles used to carry now lives inside each file, so the nth-child rule goes with them. Vector art needs no responsive encode set. */ .person-face{width:128px;height:128px;margin:0 auto 12px;border-radius:18px; display:block} .person-id .role{font-family:var(--display);font-weight:700;font-size:.8rem; letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin:0} .person h3{font-size:1.45rem;margin:0 0 .12em} .person-ask{background:#fff;border:1px solid var(--tag-line);border-radius:var(--r); padding:16px 18px} .person-ask h4{font-family:var(--display);font-size:.78rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-dim);margin:0 0 8px} .person-ask p{margin:0 0 .6em;font-size:.93rem} .person-ask p:last-child{margin:0} .detail{font-style:italic} /* ---- reviews: three genuinely different treatments -------------------- */ .credhero{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:center} @media (min-width:800px){.credhero{grid-template-columns:220px minmax(0,1fr);gap:34px}} .score{background:var(--tag);color:var(--ink);border:1px solid var(--tag-line); border-radius:var(--r);padding:20px;text-align:center} .score .big{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:1; display:block} .score .of{color:var(--ink-dim);font-size:.9rem;display:block;margin:2px 0 10px} .bars{list-style:none;margin:0;padding:0;font-size:.86rem} .bars li{display:grid;grid-template-columns:38px minmax(0,1fr) 34px;gap:8px; align-items:center;margin:0 0 5px} .bar{height:8px;border-radius:999px;background:rgba(22,51,58,.16);overflow:hidden} .bar i{display:block;height:100%;background:var(--marigold);border-radius:999px} .feature{background:var(--tag);color:var(--ink);border-radius:var(--r); border:1px solid var(--tag-line);padding:26px} @media (min-width:820px){.feature{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:30px;padding:38px}} .feature blockquote{margin:0;font-family:var(--display);font-weight:700; font-size:clamp(1.25rem,1.05rem + 1vw,1.85rem);line-height:1.3;letter-spacing:-.015em} .feature-who{border-top:2px solid var(--marigold);padding-top:16px;margin-top:20px} @media (min-width:820px){.feature-who{border-top:0;border-left:2px solid var(--marigold); padding:0 0 0 24px;margin:0}} .feature-who p{margin:0 0 .4em;font-size:.93rem} .feature-who p:last-child{margin:0} .strip{list-style:none;margin:0;padding:0;border-top:1px solid var(--tag-line)} .strip li{border-bottom:1px solid var(--tag-line);padding:18px 0;margin:0} @media (min-width:720px){.strip li{display:grid; grid-template-columns:160px minmax(0,1fr) 96px;gap:20px;align-items:baseline}} .strip .who{font-family:var(--display);font-weight:700} .strip .svc{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-dim);display:block;margin-top:2px} .strip p{margin:0} .rate{font-family:var(--display);font-weight:700;white-space:nowrap} .rate .stars{color:#8A4A00;letter-spacing:.05em} .mixed{background:#fff;color:var(--ink);border-left:4px solid var(--sky); border-radius:0 var(--r) var(--r) 0;padding:20px 22px} .mixed h3{margin:0 0 .3em;font-size:1.05rem} .mixed p:last-child{margin:0} .filters{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 22px;padding:0} .filters li{margin:0} .filters button{width:auto;font:700 .88rem/1.2 var(--display);padding:9px 15px; border-radius:999px;border:1px solid var(--tag-line);background:#fff;color:var(--ink); cursor:pointer} .filters button:hover{border-color:var(--harbor);background:var(--tag)} .filters button:active{background:var(--marigold);border-color:var(--marigold)} .filters button[aria-pressed=true]{background:var(--harbor);color:var(--marigold); border-color:var(--harbor)} .rgroup h3{font-family:var(--display);font-size:.8rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-dim);margin:26px 0 12px} /* ---- video figure ------------------------------------------------------ */ .vid{margin:0 0 22px} .vid video{width:100%;height:auto;display:block;border-radius:var(--r); border:1px solid var(--harbor-line);background:#000} .vid figcaption{font-size:.9rem;color:var(--chalk-dim);margin-top:10px;line-height:1.5} .slab--tag .vid figcaption{color:var(--ink-dim)} .slab--tag .vid video{border-color:var(--tag-line)} /* ---- small polished interactions -------------------------------------- */ .lift{transition:transform .18s ease,box-shadow .18s ease} .lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(0,0,0,.55)} .frame img{transition:transform .35s ease} .lift:hover .frame img,.figs li:hover .frame img{transform:scale(1.03)} .more{font-family:var(--display);font-weight:700;text-decoration:none; display:inline-flex;align-items:center;gap:7px} .more::after{content:"\2192";transition:transform .18s ease} .more:hover::after{transform:translateX(4px)} /* ---- one honest closing ask, repeated calmly -------------------------- */ .ask{background:var(--marigold);color:var(--ink);border-radius:var(--r); padding:26px;display:grid;gap:16px} @media (min-width:760px){.ask{grid-template-columns:minmax(0,1fr) auto; align-items:center;padding:32px 34px;gap:28px}} .ask h2{margin:0 0 .3em;color:var(--ink)} .ask p{margin:0;color:#4A3A10;font-weight:600} .ask .btn{background:var(--harbor);color:var(--marigold)} .ask .btn:hover{background:var(--ink);color:var(--chalk)} .ask .btn:active{background:var(--tag);color:var(--ink)} /* ---- utility ----------------------------------------------------------- */ .two{display:grid;grid-template-columns:minmax(0,1fr);gap:26px} @media (min-width:800px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}} .narrow{max-width:70ch} .rule{border:0;border-top:1px solid var(--harbor-line);margin:34px 0} .slab--tag .rule{border-top-color:var(--tag-line)} .mt0{margin-top:0} .mb0{margin-bottom:0} [hidden]{display:none!important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms!important; animation-iteration-count:1!important;transition-duration:1ms!important; scroll-behavior:auto!important} .btn:hover,.btn--quiet:hover,.lift:hover{transform:none} .lift:hover .frame img,.figs li:hover .frame img{transform:none} .more:hover::after{transform:none} .coat[data-enhanced=true] .coat-panel{animation:none} } /* Catalogue typography identity — headings and reading text. */ :root{--catalog-font-heading:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--catalog-font-body:'Newsreader', Georgia, 'Times New Roman', serif;--display:var(--catalog-font-heading);--body:var(--catalog-font-body)} html body,input,select,textarea,button{font-family:var(--catalog-font-body)} h1,h2,h3,h4,h5,h6,.display,.disp,.brand,.logo{font-family:var(--catalog-font-heading)} /* aajwebz-mailto-nowrap — an address is one token, never split across lines */ a[href^="mailto:"] { overflow-wrap: normal; word-break: normal; white-space: nowrap; display: inline-block; max-width: 100%; } @media (max-width: 380px) { a[href^="mailto:"] { font-size: 0.88em; } }