:root{--ink:#14294a;--paper:#f6f0e4;--panel:#fdf9f1;--line:#d8dcd2;--muted:#4d5b6b;--accent:#2f6b62;--accent-dark:#245349;--accent-light:#bfd9cb;--gold:#b3903f;--radius:16px;--display-weight:600;--display-font:'Fraunces';--body-font:'Source Sans 3';}
/* lwkit base.css: the Loomwest site standard, tokenised. Every colour, font and radius is a variable set
   by the build from the site's theme; nothing brand-specific lives here. Components: the header with the
   hamburger on the LEFT on desktop and on the RIGHT on a phone, pill navigation, the slide-in panel of pill
   links that opens from the hamburger's own side, the sticky action bar on phones, buttons, sections, cards,
   the service menu with search and category chips, the gallery with a lightbox, the before/after slider,
   the contact form, the footer, and the scroll reveal. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--body-font),system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--display-font),Georgia,serif;font-weight:var(--display-weight,700);line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(38px,5.6vw,68px)} h2{font-size:clamp(28px,3.6vw,44px)} h3{font-size:clamp(20px,2.2vw,26px)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,92vw);margin:0 auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:8px;top:-70px;z-index:100;background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px} .skip:focus{top:8px}
section[id]{scroll-margin-top:84px}

/* header: hamburger left, wordmark, pills across the top, one action on the right */
header.site{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;height:70px;gap:14px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display-font),Georgia,serif;font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--ink);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.logo img{height:38px;width:auto}
.logo .short,.hdr-cta .short{display:none} @media(max-width:560px){.logo .full,.hdr-cta .full{display:none} .logo .short,.hdr-cta .short{display:inline}}
/* The hamburger glyph is placed, not centred (2026-09-17). The old build centred three 2px arms in a flex
   column, so their position was (content height - glyph height) / 2: a division whose inputs changed with the
   button size, the header height and the 1px border, and which could land a hairline on a half pixel. That
   renders faint or eaten on a real phone while looking perfect in an emulator, which is what Andre saw. Now
   each arm states its own whole-pixel offset from the button's top edge, so there is no division left to
   round: no gap, no justify-content, no border inside the box, and appearance:none so no UA button padding
   can creep back in. The arms sit at 10/18/26 in a 44px box, which is 2px higher than centred and leaves 16px
   of clear button beneath the bottom arm: Andre's "slide it up a little". Travel for the X is 8px because the
   arm tops are 8px apart; if those offsets ever change, the travel changes with them or the X misses centre.
   Parity rule: the button height must match the header row height in parity or align-items:center puts the
   whole button on a half pixel. 44 against rows of 70 and 64 gives whole 13px and 10px offsets. */
.tog{position:relative;display:block;width:44px;height:44px;overflow:visible;line-height:0;background:none;border:0;border-radius:12px;cursor:pointer;padding:0;order:-1;flex:none;-webkit-appearance:none;appearance:none}
.tog:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.tog span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s ease,opacity .3s ease;transform-origin:center}
.tog span:nth-child(1){top:10px} .tog span:nth-child(2){top:18px;background:var(--accent)} .tog span:nth-child(3){top:26px}
.tog[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)} .tog[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)} .tog[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.pills{display:flex;gap:6px;margin:0 auto;align-items:center;justify-content:center;flex-wrap:wrap}
.pills a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;letter-spacing:.04em;color:var(--ink);background:color-mix(in srgb,var(--panel) 60%,transparent);transition:.25s;white-space:nowrap}
.pills a:hover{border-color:var(--accent);color:var(--accent)} .pills a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hdr-cta{margin-left:auto;white-space:nowrap;flex:none}
@media(max-width:980px){.pills{display:none}}
@media(max-width:560px){header.site .wrap{height:64px;gap:10px} .logo{font-size:18px} .logo img{height:32px} .hdr-cta{padding:9px 14px;font-size:12.5px}}
/* the narrow-screen override is width only: the arms stay 22px wide and keep their whole-pixel offsets */
@media(max-width:400px){.logo{font-size:16px} .hdr-cta{padding:8px 12px;font-size:12px} .tog{width:40px} .tog span{left:9px;right:9px}}

/* the slide-in panel: pages, sections of this page, the actions, the hours */
#menu-scrim{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);z-index:64;opacity:0;pointer-events:none;transition:opacity .35s} #menu-scrim.open{opacity:1;pointer-events:auto}
#menu-panel{position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:var(--paper);border-right:1px solid var(--line);z-index:65;padding:88px 22px 30px;transform:translateX(-103%);transition:transform .42s cubic-bezier(.33,.02,.2,1);overflow-y:auto}
#menu-panel.open{transform:translateX(0)}
#menu-panel .sub{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:22px 0 10px;padding-left:16px} #menu-panel .sub:first-child{margin-top:0}
#menu-panel a{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;margin:0 0 8px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);font-family:var(--display-font),Georgia,serif;font-size:18px;line-height:1.1;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .3s ease .08s,transform .3s ease .08s,background .2s,border-color .2s,color .2s}
#menu-panel.open a{opacity:1;transform:none} #menu-panel a:hover{border-color:var(--accent);color:var(--accent)} #menu-panel a.here{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#menu-panel a.small{font-family:var(--body-font),sans-serif;font-size:14px;letter-spacing:.02em;padding:11px 18px;margin-bottom:6px}
#menu-panel a.small.go{background:var(--accent);color:#fff;border-color:var(--accent)} #menu-panel a.small.go:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
#menu-panel .mh{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)} #menu-panel .mh b{display:block;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--accent);margin-bottom:8px} #menu-panel .mh span{display:block;padding:2px 0}
body.menu-open{overflow:hidden}
/* Mobile right-hand navigation (Andre 2026-09-17, amending the 9/7 nav standard). A phone is held in one hand
   and the thumb reaches the right side, so below the width where the top pill row stops showing, the
   hamburger and its panel move to the right. The breakpoint is tied to .pills going away rather than to a
   guessed phone width, so the button moves on exactly the screens where it is the whole navigation and the
   two can never drift apart. Desktop does not move. This is order and CSS only; the button stays first in the
   DOM so keyboard and screen-reader order still meet the menu before the wordmark.
   This block MUST stay after the #menu-panel rules above: the specificity is identical, so source order is
   the only thing deciding which wins. The header's free space is handed to the logo here rather than relying
   on .hdr-cta's auto margin, because the header CTA is optional in a built site and without it order:1 alone
   would leave the toggle sitting next to the wordmark. No sideways scroll: #menu-panel is position:fixed, so
   its off-screen transform adds nothing to the document's scrollable width. */
@media(max-width:980px){
  .tog{order:1}
  .logo{margin-right:auto} .hdr-cta{margin-left:0}
  #menu-panel{left:auto;right:0;border-right:0;border-left:1px solid var(--line);transform:translateX(103%)}
  #menu-panel.open{transform:translateX(0)}
  #menu-panel a{transform:translateX(8px)} #menu-panel.open a{transform:none}
}

/* the sticky action bar on phones: never covers a hero, always reachable */
#stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--paper) 96%,transparent);border-top:1px solid var(--line);box-shadow:0 -6px 18px color-mix(in srgb,var(--ink) 10%,transparent)}
#stickybar a{flex:1 1 0;min-height:44px;display:flex;align-items:center;justify-content:center;font:700 16px var(--display-font),Georgia,serif;border-radius:10px}
#stickybar .sb-main{background:var(--accent);color:#fff} #stickybar .sb-call{color:var(--accent-dark);border:2px solid var(--accent-dark)}
/* the search pill (Karson's idea, 2026-09-12): a third pill that opens the site's service search from anywhere */
#stickybar .sb-search{flex:0 0 auto;min-width:48px;padding:0 12px;color:var(--ink);border:2px solid var(--line);background:var(--panel)} #stickybar .sb-search svg{width:18px;height:18px}
@media(max-width:820px){#stickybar{display:flex} body{padding-bottom:74px}}

/* buttons, sections, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:var(--radius-pill,999px);font-weight:600;font-size:15px;letter-spacing:.02em;transition:.25s;border:1px solid transparent;cursor:pointer;min-height:44px}
.btn.solid{background:var(--accent);color:#fff} .btn.solid:hover{background:var(--accent-dark)}
.btn.ghost{border-color:var(--ink);color:var(--ink)} .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.sm{padding:9px 16px;font-size:13px;min-height:0}
section{padding:88px 0} @media(max-width:820px){section{padding:60px 0}}
section.alt{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.band{background:var(--ink);color:var(--paper)} section.band .kick{color:var(--accent-light,var(--accent))} section.band .lede{color:color-mix(in srgb,var(--paper) 82%,transparent)}
/* ghost buttons on the dark band (2026-09-15): ink on ink was invisible; paper border and text, as in the hero */
section.band .btn.ghost{border-color:color-mix(in srgb,var(--paper) 70%,transparent);color:var(--paper)} section.band .btn.ghost:hover{background:var(--paper);color:var(--ink)}
/* heading rhythm (2026-09-15, Andre, from his phone): the kick, the heading and the paragraph under it each get room to breathe, the same few
   pixels at every width. These used to be inline styles in the build (14px under a heading, 16 or 18px above the copy); they live here now so a
   site's extra_css can tune them. The hero keeps its own spacing, and the menu's category heads keep theirs (.cathead, further down). */
.kick{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;font-weight:700} .hero .kick{margin-bottom:14px}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:62ch} h2+.lede,h3+.lede{margin-top:18px}
.copy{margin-top:22px} .copy:first-child{margin-top:0} .copy p{max-width:68ch;margin-bottom:14px;color:var(--muted)} .copy p:last-child{margin-bottom:0}
/* .sec-head, a bespoke heading block inside an html section (a span.kick, the h2, then a paragraph, as the Pastelaria pages use it): the same rhythm */
.sec-head .kick{display:block} .sec-head h2{margin-bottom:18px}

/* The heading underline gauge (Andre's spec, 2026-08-27, from South County; into the kit 2026-09-17).
   Every section heading carries an underline that draws itself in on load and then tracks scroll: the
   further a heading has climbed the screen, the fuller its own line. The selector is written once in
   lwkit/__init__.py (ULINE_PARTS) and substituted into this file and into base.js, so the look and the
   driver cannot drift apart and no heading needs a hand-added class. The colour is the theme's, never a
   hard-coded one, and only a transform ever changes, so scrolling costs no layout and no text repaint. */
:root{--uline-a:var(--accent);--uline-b:color-mix(in srgb,var(--accent) 28%,transparent)}
/* on ink (the dark band) and over a hero photo, the light end of the accent carries instead */
section.band,.hero:not(.plain){--uline-a:var(--accent-light,var(--accent));--uline-b:color-mix(in srgb,var(--accent-light,var(--accent)) 26%,transparent)}
/* the line ends where the words end, never at the column edge; a heading too long for its column still
   wraps as normal and the line then spans the column, which is the two-line case, not a broken one */
section>.wrap>h1:not(.no-uline),section>.wrap>h2:not(.no-uline),section>.wrap>h3:not(.no-uline),section>.wrap>.ctr>h1:not(.no-uline),section>.wrap>.ctr>h2:not(.no-uline),section>.wrap>.ctr>h3:not(.no-uline),section>.wrap>.grid2>div>h1:not(.no-uline),section>.wrap>.grid2>div>h2:not(.no-uline),section>.wrap>.grid2>div>h3:not(.no-uline),.cathead>h2:not(.no-uline),.cathead>h3:not(.no-uline),.sec-head>h1:not(.no-uline),.sec-head>h2:not(.no-uline),.sec-head>h3:not(.no-uline),.uline:not(.no-uline){width:max-content;max-width:100%}
/* the hero keeps its own line length: the rule above is more specific than .hero h1, so re-assert it */
section.hero>.wrap>h1{max-width:min(14ch,100%)}
/* the h1 now has a line under it, so the lede needs the same room beneath a heading that h2 and h3 already had */
h1+.lede{margin-top:18px}
/* A text column beside a photo must be allowed to shrink below the heading's max-content width, or the
   heading's column swallows the row and the photo column collapses to nothing (Max's site, 2026-08-27). */
.grid2>*,.sec-head,.copy{min-width:0}
/* a centred set (the cta) centres the words, so the line has to be centred under them as well */
.ctr>h1,.ctr>h2,.ctr>h3{margin-inline:auto}
section>.wrap>h1:not(.no-uline)::after,section>.wrap>h2:not(.no-uline)::after,section>.wrap>h3:not(.no-uline)::after,section>.wrap>.ctr>h1:not(.no-uline)::after,section>.wrap>.ctr>h2:not(.no-uline)::after,section>.wrap>.ctr>h3:not(.no-uline)::after,section>.wrap>.grid2>div>h1:not(.no-uline)::after,section>.wrap>.grid2>div>h2:not(.no-uline)::after,section>.wrap>.grid2>div>h3:not(.no-uline)::after,.cathead>h2:not(.no-uline)::after,.cathead>h3:not(.no-uline)::after,.sec-head>h1:not(.no-uline)::after,.sec-head>h2:not(.no-uline)::after,.sec-head>h3:not(.no-uline)::after,.uline:not(.no-uline)::after{content:"";display:block;width:100%;height:3px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,var(--uline-a),var(--uline-b));transform:scaleX(var(--up,0));transform-origin:left;transition:transform .16s linear}
/* asked for nothing to move: the underline is simply there, complete and still */
@media(prefers-reduced-motion:reduce){section>.wrap>h1:not(.no-uline)::after,section>.wrap>h2:not(.no-uline)::after,section>.wrap>h3:not(.no-uline)::after,section>.wrap>.ctr>h1:not(.no-uline)::after,section>.wrap>.ctr>h2:not(.no-uline)::after,section>.wrap>.ctr>h3:not(.no-uline)::after,section>.wrap>.grid2>div>h1:not(.no-uline)::after,section>.wrap>.grid2>div>h2:not(.no-uline)::after,section>.wrap>.grid2>div>h3:not(.no-uline)::after,.cathead>h2:not(.no-uline)::after,.cathead>h3:not(.no-uline)::after,.sec-head>h1:not(.no-uline)::after,.sec-head>h2:not(.no-uline)::after,.sec-head>h3:not(.no-uline)::after,.uline:not(.no-uline)::after{transform:scaleX(1);transition:none}}
.hero{position:relative;min-height:78vh;display:grid;align-items:end;color:#fff;overflow:hidden;padding:0}
.hero.plain{min-height:0;color:var(--ink);align-items:start}
.hero .bg{position:absolute;inset:0;background:var(--ink) center/cover no-repeat}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 15%,transparent),color-mix(in srgb,var(--ink) 72%,transparent) 70%,color-mix(in srgb,var(--ink) 92%,transparent))}
.hero .wrap{position:relative;padding:110px 0 70px} .hero.plain .wrap{padding:70px 0 20px}
.hero h1{max-width:14ch;text-wrap:balance} .hero .lede{color:color-mix(in srgb,#fff 88%,transparent)} .hero.plain .lede{color:var(--muted)}
.hero .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .btn.ghost{border-color:color-mix(in srgb,#fff 70%,transparent);color:#fff} .hero .btn.ghost:hover{background:#fff;color:var(--ink)}
.hero.plain .btn.ghost{border-color:var(--ink);color:var(--ink)}
.hero .note{margin-top:22px;font-size:14px;opacity:.85}
/* the cta set, centred (2026-09-15): the lede's 62ch box needs auto margins under a centred heading, and the button row is a flex row here */
.ctr{text-align:center} .ctr .lede{margin-left:auto;margin-right:auto} .ctr .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:36px}
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .4s ease,box-shadow .4s ease}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px color-mix(in srgb,var(--ink) 16%,transparent)}
.card .imgbox{aspect-ratio:4/3;overflow:hidden;background:var(--line)} .card .imgbox img{width:100%;height:100%;object-fit:cover}
.card .t{padding:20px 22px 24px} .card h3{margin-bottom:6px} .card p{font-size:15px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} @media(max-width:900px){.grid2{grid-template-columns:1fr;gap:28px}}
.ph{border-radius:var(--radius);overflow:hidden;background:var(--line);box-shadow:0 24px 60px color-mix(in srgb,var(--ink) 18%,transparent);line-height:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px;margin-top:36px}
.fact{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-top:16px} .fact b{display:block;font-family:var(--display-font),Georgia,serif;font-size:40px;color:var(--accent-light,var(--accent))} .fact span{font-size:14px;opacity:.8}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .rev .stars{color:var(--gold,#c9a45c);letter-spacing:2px;margin-bottom:10px} .rev p{font-size:15.5px} .rev .who{margin-top:12px;font-size:13px;color:var(--muted)}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:36px}
.info div{padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)} .info b{display:block;font-family:var(--display-font),Georgia,serif;font-size:22px;margin-bottom:6px} .info p{font-size:15px;color:var(--muted);overflow-wrap:anywhere}
/* map links (2026-09-15): the street address opens Google Maps, the small link beside it opens Apple Maps; underlined so they read as links inside text */
.maplink{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .maplink:not(.alt){margin-right:6px}
.maplink.alt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* the gap sits on the address's trailing edge, not the Apple link's leading edge: a start margin indented the link by 6px whenever it wrapped onto its
   own line, and mid-line after the zip it read as offset (Andre, on his phone, 2026-09-15). On phones the Apple link takes its own line, flush with the
   address above and the line below; the <br> the build puts after it is dropped there, or it would leave a blank line. */
@media(max-width:560px){.maplink.alt{display:block;margin-top:2px} .maplink.alt+br{display:none}}

/* the service menu with search, predictive suggestions and category chips */
.svc-search{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.svc-box{position:relative;flex:1;min-width:260px}
.svc-box input{width:100%;padding:14px 20px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font:inherit;font-size:15px;color:var(--ink);box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 6%,transparent)}
.svc-count{font-size:13px;color:var(--muted);letter-spacing:.04em}
.svc-sug{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 16%,transparent);list-style:none;margin:0;padding:8px;z-index:30;max-height:340px;overflow:auto}
.svc-sug[hidden]{display:none}
.svc-sug li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 12px;border-radius:12px;cursor:pointer;align-items:baseline} .svc-sug li:hover,.svc-sug li.sel{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.svc-sug .n{font-family:var(--display-font),Georgia,serif;font-size:18px} .svc-sug .n mark{background:color-mix(in srgb,var(--accent) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.svc-sug .c{font-size:12px;color:var(--muted);letter-spacing:.04em} .svc-sug .p{font-family:var(--display-font),Georgia,serif;font-size:17px;color:var(--accent-dark)}
.svc-cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,transparent);font:inherit;font-size:13px;color:var(--ink);cursor:pointer;letter-spacing:.03em;transition:.2s} .chip:hover{border-color:var(--accent);color:var(--accent)} .chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.svc-empty{padding:40px 0;color:var(--muted);font-size:17px}
.cathead{margin:60px 0 18px} .cathead:first-of-type{margin-top:0} .cathead h2{margin-bottom:8px} .cathead .lede{margin-top:0}
.menu{display:grid;grid-template-columns:1fr}
.mrow{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.mrow .n{font-family:var(--display-font),Georgia,serif;font-size:21px} .mrow .d{font-size:14px;color:var(--muted);grid-column:1/-1;margin-top:-6px;max-width:70ch}
.mrow .m{font-size:13px;color:var(--muted);letter-spacing:.04em} .mrow .p{font-family:var(--display-font),Georgia,serif;font-size:21px;color:var(--accent-dark)}
@media(max-width:620px){.mrow{grid-template-columns:1fr auto} .mrow .m{display:none}}
/* menu thumbnails (2026-09-15): a 58px picture slot per row when the section has thumbs; a blank slot shows the item's initial on a tint */
.menu.thumbs .mrow{grid-template-columns:58px 1fr auto auto;align-items:center} .menu.thumbs .mrow .d{grid-column:2/-1}
.mrow .th{grid-row:1/2;width:58px;height:58px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:var(--panel);display:grid;place-items:center;user-select:none} .mrow .th img{width:100%;height:100%;object-fit:cover}
.mrow .th.blank{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent-dark);font-family:var(--display-font),Georgia,serif;font-weight:var(--display-weight,700);font-size:24px;line-height:1}
@media(max-width:620px){.menu.thumbs .mrow{grid-template-columns:58px 1fr auto}}
.mrow.hit{background:color-mix(in srgb,var(--accent) 18%,transparent);border-radius:12px;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 18%,transparent);animation:hitfade 3s ease forwards} @keyframes hitfade{to{background:transparent;box-shadow:none}}
.hide{display:none!important}

/* gallery and lightbox */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr);gap:14px}} @media(max-width:520px){.gal{grid-template-columns:1fr}}
.gal .shot{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--line);box-shadow:0 16px 42px color-mix(in srgb,var(--ink) 12%,transparent)}
.gal .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zoom{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--ink) 93%,transparent);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:34px 22px 64px} .lb.on{display:flex}
.lb img{max-width:min(1120px,94vw);max-height:84vh;width:auto;height:auto;border-radius:var(--radius);box-shadow:0 40px 110px rgba(0,0,0,.55)}
.lb .x{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:#fff;font:400 26px/1 sans-serif;cursor:pointer}
.lb .cap{position:absolute;left:0;right:0;bottom:24px;text-align:center;color:rgba(255,255,255,.78);font-size:13.5px;padding:0 26px}

/* before / after slider: pointer-driven, no loop, native on touch */
.ba{position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 16%,transparent);touch-action:none;cursor:ew-resize;--cut:50%;margin-top:30px}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .before{clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut);width:0;pointer-events:none}
.ba .handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--accent);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.ba .grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 32%,transparent)}
.ba .tag{position:absolute;top:12px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:5px;background:color-mix(in srgb,var(--ink) 62%,transparent);color:#fff;pointer-events:none} .ba .tag.b{left:12px} .ba .tag.a{right:12px}

/* the contact form */
.form{max-width:720px;margin-top:30px} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:18px} .fgrid .wide{grid-column:1/-1}
.form label{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700} .form label span{display:block;margin-bottom:6px}
.form input,.form textarea{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:16px;outline:none}
.form input:focus,.form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent)}
.form textarea{min-height:120px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .status{margin-top:14px;font-size:15px;min-height:1.3em;color:var(--muted)} .form.sent .fgrid,.form.sent .btn{display:none} .form.sent .status{font-size:17px;color:var(--ink)}
.form .consent{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:62ch} .form .consent a{color:var(--accent-dark);text-decoration:underline} .form.sent .consent{display:none}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}}

/* footer */
footer.site{background:var(--ink);color:color-mix(in srgb,var(--paper) 80%,transparent);padding:56px 0 40px;font-size:14px}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px} @media(max-width:900px){footer.site .wrap{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer.site .wrap{grid-template-columns:1fr}}
footer.site h4{color:var(--paper);font-family:var(--display-font),Georgia,serif;font-size:20px;margin-bottom:10px} footer.site a:hover{color:var(--accent-light,var(--accent))} footer.site .tag{letter-spacing:.2em;text-transform:uppercase;font-size:11px;color:var(--accent-light,var(--accent));margin-top:14px}
footer.site .credit{grid-column:1/-1;margin-top:20px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--paper) 15%,transparent);font-size:12.5px;opacity:.7}

/* scroll reveal, and nothing moves for people who asked for nothing to move */
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s ease,transform .9s ease} .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} html{scroll-behavior:auto}}

/* site */

/* Auburn Sewing Studio, version two (2026-09-22): the Dresden plate palette and the sewing-room effects.
   Every colour here is the quilt's: navy ground, sea green, cream, pale blue florals, brass for the pins. */
body{font-size:17.5px}
h1,h2,h3{letter-spacing:0} h1 em,h2 em,h3 em{font-style:italic;font-weight:500}
section.alt{background:#eef3ee;border-top-color:#dfe6de;border-bottom-color:#dfe6de} section.alt .ph{background:#dfe6de}
.hero .bg::after{background:linear-gradient(90deg,rgba(11,34,65,.9) 0%,rgba(11,34,65,.7) 44%,rgba(11,34,65,.3) 100%)}
.hero .wrap{z-index:2}
.hero canvas.thread{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero .hint{margin-top:18px;font-size:13.5px;letter-spacing:.04em;opacity:.78}
.hero.plain .hint{color:var(--muted);opacity:1}
/* the thimble: the cursor over the home hero, pushing the needle that draws the thread; the arrow and the hand come back on anything you can click */
#sew-home{cursor:url("assets/thimble.svg") 6 4,auto} #sew-home a,#sew-home button{cursor:pointer}

/* stitched buttons: a running stitch just inside the edge that tightens on hover */
.btn{position:relative}
.btn::after{content:"";position:absolute;inset:4px;border:1.5px dashed currentColor;border-radius:inherit;opacity:.5;pointer-events:none;transition:inset .25s ease,opacity .25s ease}
.btn.sm::after{inset:3px;border-width:1px}
@media(hover:hover){.btn:hover::after{inset:2px;opacity:.9} .btn:hover{transform:translateY(-1px)}}

/* running-stitch seams where sections meet: the line sews itself across as the section arrives, a knot at the end */
main>section.seam{position:relative;--seam:var(--accent)} main>section.seam.band{--seam:var(--accent-light)}
main>section.seam.alt{border-top:0}
main>section.seam::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1120px,92vw);height:2px;background:repeating-linear-gradient(90deg,var(--seam) 0 9px,transparent 9px 15px);clip-path:inset(0 100% 0 0);transition:clip-path 1.2s ease .1s}
main>section.seam.in::before{clip-path:inset(0 0 0 0)}
main>section.seam::after{content:"";position:absolute;top:-3px;left:calc(50% + min(560px,46vw) - 4px);width:8px;height:8px;border-radius:50%;background:var(--seam);transform:scale(0);transition:transform .3s cubic-bezier(.2,.9,.3,1.4) 1.25s}
main>section.seam.in::after{transform:scale(1)}

/* tiles that stitch themselves into place */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:36px}
.tile{position:relative;display:block;background:var(--panel);border-radius:var(--radius);padding:26px 24px 24px;min-height:200px;color:inherit;transform:translateY(22px) rotate(-1.4deg) scale(.985);opacity:0;transition:transform 1.1s cubic-bezier(.2,.9,.28,1.12),opacity .6s ease,box-shadow .35s ease}
.tile.in{transform:none;opacity:1}
a.tile:hover{box-shadow:0 16px 34px rgba(11,34,65,.12)} a.tile:hover h3{color:var(--accent-dark)}
.tile svg.seam{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tile svg.seam rect{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:7 5;stroke-dashoffset:var(--peri,2000);stroke-linecap:round;transition:stroke-dashoffset 1.5s ease-out .15s}
.tile.in svg.seam rect{stroke-dashoffset:0}
.tile .pin{position:absolute;top:-7px;left:26px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 1px 0 rgba(0,0,0,.25),inset 0 -2px 3px rgba(0,0,0,.18);transform:scale(0);transition:transform .35s cubic-bezier(.2,.9,.3,1.4) 1.35s}
.tile.in .pin{transform:scale(1)}
.tile .body{opacity:0;transform:translateY(8px);transition:opacity .7s ease .75s,transform .7s ease .75s}
.tile.in .body{opacity:1;transform:none}
.tile i{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-weight:600;font-size:15px;margin-bottom:14px;font-family:var(--body-font),sans-serif}
.tile h3{font-size:clamp(20px,2vw,24px);margin-bottom:8px}
.tile p{margin:0;color:var(--muted);font-size:15.5px}
.tile .more{display:inline-block;margin-top:14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dark);font-weight:600}

/* the Dresden plate that pieces itself together */
.plate-sec .grid2{align-items:center}
.plate{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background-color:#0b2241;box-shadow:0 24px 60px rgba(11,34,65,.22);isolation:isolate;
  background-image:repeating-linear-gradient(90deg,#e9e2d3 0 12px,#bdd8c8 12px 22px,#0b2241 22px 27px,#cfdde7 27px 41px,#6f93b4 41px 49px,#2c4a75 49px 57px),
                   repeating-linear-gradient(90deg,#cfdde7 0 10px,#e9e2d3 10px 24px,#6f93b4 24px 31px,#bdd8c8 31px 45px,#0b2241 45px 50px),
                   repeating-linear-gradient(180deg,#bdd8c8 0 11px,#e9e2d3 11px 23px,#2c4a75 23px 30px,#cfdde7 30px 44px,#0b2241 44px 49px),
                   repeating-linear-gradient(180deg,#e9e2d3 0 13px,#cfdde7 13px 22px,#6f93b4 22px 29px,#bdd8c8 29px 43px,#0b2241 43px 48px);
  background-size:100% 16px,100% 16px,16px 100%,16px 100%;background-position:top,bottom,left,right;background-repeat:no-repeat}
.plate .field{position:absolute;inset:22px;border-radius:6px;overflow:hidden;background:#0b2241}
.plate .wedges{position:absolute;inset:0;width:100%;height:100%}
.plate .w{transform-box:view-box;transform-origin:200px 200px;opacity:0;transform:rotate(calc(var(--a) - 40deg)) translateY(-46px) scale(.7);transition:transform 1.05s cubic-bezier(.2,.9,.3,1.08) var(--d),opacity .5s ease var(--d)}
.plate.in .w{opacity:1;transform:rotate(var(--a))}
.plate .c{opacity:0;transform-box:view-box;transform-origin:200px 200px;transform:scale(.4);transition:opacity .5s ease 1.4s,transform .6s cubic-bezier(.2,.9,.3,1.3) 1.4s}
.plate.in .c{opacity:1;transform:none}
.plate .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease 2.2s}
.plate.in .photo{opacity:1}
.plate-sec h2{font-style:italic;font-weight:500}

/* pinked edges: the zigzag a pair of pinking shears leaves, cut by the site script to each card's width */
.gal .shot{border-radius:0;box-shadow:none;--pk:10px}
.gal .shot img{clip-path:none}
.gal .frame{filter:drop-shadow(0 14px 22px rgba(11,34,65,.16))}
.env{position:relative;filter:drop-shadow(0 12px 18px rgba(11,34,65,.12))}
.env-in{--pk:9px;background:var(--panel);display:flex;flex-direction:column;height:100%;padding-top:var(--pk)}

/* pattern envelopes: each class laid out like the front of a sewing pattern */
.envs{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:24px;margin-top:36px}
.env .head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 20px 12px;border-bottom:1px dashed #c9d2c8;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-dark);font-weight:600}
.env .head b{font-family:var(--display-font),Georgia,serif;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.env .win{margin:16px 20px 0;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:var(--line);border:1px solid #c9d2c8}
.env .win img{width:100%;height:100%;object-fit:cover}
.env h3{padding:18px 20px 4px;font-size:clamp(21px,2vw,25px)}
.env .sizes{list-style:none;padding:6px 20px 0;margin:0}
.env .sizes li{display:flex;align-items:baseline;gap:8px;font-size:14.5px;padding:6px 0;line-height:1.4}
.env .sizes li span:first-child{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;font-weight:600;flex:none}
.env .sizes li i{flex:1;border-bottom:1px dotted #8a97a5;min-width:14px;transform:translateY(-4px)}
.env .sizes li span:last-child{text-align:right;color:var(--ink);max-width:62%}
.env .tag{margin:18px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap}
.env .price{font-family:var(--display-font),Georgia,serif;font-size:26px;line-height:1.1;color:var(--accent-dark)} .env .price small{display:block;font-family:var(--body-font),sans-serif;font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin-top:2px}
.env .note{padding:14px 20px 20px;font-size:13.5px;color:var(--muted);line-height:1.5;margin-top:auto}
.env .tag:last-child{padding-bottom:20px}

/* the measuring tape along the top of the page: it unrolls as you scroll, the brass pin at the leading edge */
#tape{position:fixed;top:0;left:0;right:0;height:10px;z-index:70;pointer-events:none;background:#f3ecd9 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2210%22%20viewBox%3D%220%200%201600%2010%22%20fill%3D%22%2314294a%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2250%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2270%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2280%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22103%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E1%3C%2Ftext%3E%3Crect%20x%3D%22110%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22130%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22140%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22160%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22170%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22180%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22190%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22203%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E2%3C%2Ftext%3E%3Crect%20x%3D%22210%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22230%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22240%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22250%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22260%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22270%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22280%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22290%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22300%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22303%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E3%3C%2Ftext%3E%3Crect%20x%3D%22310%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22320%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22330%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22340%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22350%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22360%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22370%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22380%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22390%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22400%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22403%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E4%3C%2Ftext%3E%3Crect%20x%3D%22410%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22420%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22430%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22440%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22450%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22460%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22470%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22480%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22490%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22503%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E5%3C%2Ftext%3E%3Crect%20x%3D%22510%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22520%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22530%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22540%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22550%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22560%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22570%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22580%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22590%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22600%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22603%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E6%3C%2Ftext%3E%3Crect%20x%3D%22610%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22620%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22630%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22640%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22650%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22660%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22670%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22680%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22690%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22700%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22703%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E7%3C%2Ftext%3E%3Crect%20x%3D%22710%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22720%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22730%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22740%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22750%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22760%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22770%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22780%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22790%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22800%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22803%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E8%3C%2Ftext%3E%3Crect%20x%3D%22810%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22820%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22830%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22840%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22850%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22860%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22870%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22880%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22890%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22900%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%22903%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E9%3C%2Ftext%3E%3Crect%20x%3D%22910%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22920%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22930%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22940%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22950%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%22960%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22970%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22980%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%22990%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221000%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%221003%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E10%3C%2Ftext%3E%3Crect%20x%3D%221010%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221020%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221030%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221040%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221050%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%221060%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221070%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221080%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221090%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221100%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%221103%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E11%3C%2Ftext%3E%3Crect%20x%3D%221110%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221120%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221130%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221140%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221150%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%221160%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221170%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221180%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221190%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221200%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%221203%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E12%3C%2Ftext%3E%3Crect%20x%3D%221210%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221230%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221240%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221250%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%221260%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221270%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221280%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221290%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221300%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%221303%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E13%3C%2Ftext%3E%3Crect%20x%3D%221310%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221320%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221330%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221340%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221350%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%221360%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221370%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221380%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221390%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221400%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%221403%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E14%3C%2Ftext%3E%3Crect%20x%3D%221410%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221420%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221430%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221440%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221450%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%221460%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221470%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221480%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221490%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221500%22%20y%3D%220%22%20width%3D%221%22%20height%3D%229%22%2F%3E%3Ctext%20x%3D%221503%22%20y%3D%229%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227%22%3E15%3C%2Ftext%3E%3Crect%20x%3D%221510%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221520%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221530%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221540%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221550%22%20y%3D%220%22%20width%3D%221%22%20height%3D%226%22%2F%3E%3Crect%20x%3D%221560%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221570%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221580%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3Crect%20x%3D%221590%22%20y%3D%220%22%20width%3D%221%22%20height%3D%223%22%2F%3E%3C%2Fsvg%3E") repeat-x left top/1600px 10px;box-shadow:0 1px 0 rgba(11,34,65,.22)}
#tape .cover{position:absolute;inset:0;background:var(--paper);transform-origin:right center;transform:scaleX(1)}
#tape .pin{position:absolute;top:-1px;left:-6px;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1.5px #fff,0 1px 2px rgba(0,0,0,.35)}
#tape .len{position:absolute;right:10px;top:13px;font-size:11px;letter-spacing:.08em;color:var(--muted);background:color-mix(in srgb,var(--paper) 88%,transparent);padding:1px 7px;border-radius:4px;opacity:0;transition:opacity .3s}
#tape.end .len{opacity:1}
@media(max-width:560px){#tape .len{display:none}}

/* the spool while the calendar loads */
.spoolbox{position:relative;margin-top:32px;border:1.5px dashed #c9d2c8;border-radius:var(--radius);background:var(--panel);padding:26px 26px;display:grid;grid-template-columns:120px 1fr;gap:26px;align-items:center}
.spoolbox b{display:block;font-family:var(--display-font),Georgia,serif;font-size:21px;margin-bottom:6px} .spoolbox p{font-size:15.5px;color:var(--muted)} .spoolbox p a{color:var(--accent-dark);text-decoration:underline}
@media(max-width:560px){.spoolbox{grid-template-columns:1fr;justify-items:center;text-align:center}}
.spool{width:112px;height:112px}
.spool .wraps line{transition:none}
.spool.turn .wraps{animation:spoolturn 1.6s linear infinite}
.spool .thr{stroke-dasharray:70;stroke-dashoffset:70}
.spool.turn .thr{animation:unwind 2.4s ease-out infinite}
@keyframes spoolturn{to{transform:translateX(-4px)}}
@keyframes unwind{60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.spoolbox iframe{width:100%;min-height:520px;border:0;grid-column:1/-1;border-radius:10px}
.spoolbox.loaded .spool,.spoolbox.loaded>div{display:none}

/* her own fabrics as a quiet patchwork behind the studio strip */
section.patchbg{position:relative;overflow:hidden} section.patchbg .wrap{position:relative;z-index:1}
.patch{position:absolute;inset:0;z-index:0;display:grid;pointer-events:none}
.patch div{background-size:cover;background-position:center;opacity:.12;box-shadow:inset 0 0 0 3px var(--ink);transition:opacity .6s ease}
.patch div.lit{opacity:.24}
section.patchbg .row{margin-top:34px}

/* the quilt label above the footer, the way one is sewn to a backing */
/* even room above and below the label (Andre 2026-09-22): after a dark band the gap is the label section's own padding; after a paper
   section the section above already carries its bottom padding, so the label's top padding goes and a negative margin evens it out */
.qlabel-sec{padding:64px 0} section:not(.band)+.qlabel-sec{padding-top:0;margin-top:-24px}
@media(max-width:820px){.qlabel-sec{padding:44px 0} section:not(.band)+.qlabel-sec{margin-top:-16px}}
.qlabel-sec.seam::before,.qlabel-sec.seam::after{display:none}
.qlabel{margin:0 auto;max-width:560px;background:#fffdf7;border:1.6px dashed var(--accent);border-radius:10px;padding:22px 26px;font-family:var(--display-font),Georgia,serif;font-size:17px;line-height:1.55;color:var(--ink);position:relative;text-align:center}
.qlabel::before{content:"";position:absolute;inset:6px;border:1px solid #d8dcd2;border-radius:6px;pointer-events:none}
.qlabel small{display:block;font-family:var(--body-font),sans-serif;font-size:11.5px;color:var(--accent-dark);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;font-weight:600}
.qlabel b{font-weight:600;font-style:italic;font-size:20px}
.qlabel .maplink{color:var(--accent-dark)}
.qlabel .hand{display:block;margin-top:10px;font-style:italic;color:var(--muted);font-size:16px}

/* the heading underline gauge, painted as the same running stitch as the seams (Andre 2026-09-22: the studio page's stitched
   seam, applied to every heading's line). The kit's driver is untouched: it still draws on load and tracks scroll through --up,
   transform only. Only the paint changes: a 2px stitch in the seam's rhythm, clipped by the same scaleX, and a knot at the right
   end that scales in over the last four percent of the fill, so it lands as the line completes. Accent-light on the ink band
   and over the photo hero comes from the kit's own --uline-a. */
section>.wrap>h1:not(.no-uline),section>.wrap>h2:not(.no-uline),section>.wrap>h3:not(.no-uline),section>.wrap>.ctr>h1:not(.no-uline),section>.wrap>.ctr>h2:not(.no-uline),section>.wrap>.ctr>h3:not(.no-uline),section>.wrap>.grid2>div>h1:not(.no-uline),section>.wrap>.grid2>div>h2:not(.no-uline),section>.wrap>.grid2>div>h3:not(.no-uline),.cathead>h2:not(.no-uline),.cathead>h3:not(.no-uline),.sec-head>h1:not(.no-uline),.sec-head>h2:not(.no-uline),.sec-head>h3:not(.no-uline),.uline:not(.no-uline){position:relative}
section>.wrap>h1:not(.no-uline)::after,section>.wrap>h2:not(.no-uline)::after,section>.wrap>h3:not(.no-uline)::after,section>.wrap>.ctr>h1:not(.no-uline)::after,section>.wrap>.ctr>h2:not(.no-uline)::after,section>.wrap>.ctr>h3:not(.no-uline)::after,section>.wrap>.grid2>div>h1:not(.no-uline)::after,section>.wrap>.grid2>div>h2:not(.no-uline)::after,section>.wrap>.grid2>div>h3:not(.no-uline)::after,.cathead>h2:not(.no-uline)::after,.cathead>h3:not(.no-uline)::after,.sec-head>h1:not(.no-uline)::after,.sec-head>h2:not(.no-uline)::after,.sec-head>h3:not(.no-uline)::after,.uline:not(.no-uline)::after{height:2px;border-radius:0;background:repeating-linear-gradient(90deg,var(--uline-a) 0 9px,transparent 9px 15px)}
section>.wrap>h1:not(.no-uline)::before,section>.wrap>h2:not(.no-uline)::before,section>.wrap>h3:not(.no-uline)::before,section>.wrap>.ctr>h1:not(.no-uline)::before,section>.wrap>.ctr>h2:not(.no-uline)::before,section>.wrap>.ctr>h3:not(.no-uline)::before,section>.wrap>.grid2>div>h1:not(.no-uline)::before,section>.wrap>.grid2>div>h2:not(.no-uline)::before,section>.wrap>.grid2>div>h3:not(.no-uline)::before,.cathead>h2:not(.no-uline)::before,.cathead>h3:not(.no-uline)::before,.sec-head>h1:not(.no-uline)::before,.sec-head>h2:not(.no-uline)::before,.sec-head>h3:not(.no-uline)::before,.uline:not(.no-uline)::before{content:"";position:absolute;right:-4px;bottom:-3px;width:8px;height:8px;border-radius:50%;background:var(--uline-a);transform:scale(clamp(0,(var(--up,0) - .96)*25,1));transition:transform .16s linear;pointer-events:none}
/* the class list's icon pictures and the envelope photos open the lightbox (Andre 2026-09-22); their boxes clip, so the ring sits inside */
.mrow .th img:focus-visible,.env .win img:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}
.mrow .th:has(img.zoom){cursor:zoom-in}

/* nothing moves for people who asked for nothing to move: every effect at rest, the tape and the thread gone */
@media(prefers-reduced-motion:reduce){
  .tile{transform:none;opacity:1} .tile .body{opacity:1;transform:none} .tile svg.seam rect{stroke-dashoffset:0} .tile .pin{transform:scale(1)}
  .plate .w{opacity:1;transform:rotate(var(--a))} .plate .c{opacity:1;transform:none} .plate .photo{opacity:1}
  main>section.seam::before{clip-path:none} main>section.seam::after{transform:none}
  #tape,.hero canvas.thread,.hero .hint{display:none}
  .spool.turn .wraps,.spool.turn .thr{animation:none} .spool .thr{stroke-dashoffset:0}
  .patch div.lit{opacity:.12}
  section>.wrap>h1:not(.no-uline)::before,section>.wrap>h2:not(.no-uline)::before,section>.wrap>h3:not(.no-uline)::before,section>.wrap>.ctr>h1:not(.no-uline)::before,section>.wrap>.ctr>h2:not(.no-uline)::before,section>.wrap>.ctr>h3:not(.no-uline)::before,section>.wrap>.grid2>div>h1:not(.no-uline)::before,section>.wrap>.grid2>div>h2:not(.no-uline)::before,section>.wrap>.grid2>div>h3:not(.no-uline)::before,.cathead>h2:not(.no-uline)::before,.cathead>h3:not(.no-uline)::before,.sec-head>h1:not(.no-uline)::before,.sec-head>h2:not(.no-uline)::before,.sec-head>h3:not(.no-uline)::before,.uline:not(.no-uline)::before{transform:scale(1);transition:none}
}