/* Additions for the published site (kept separate from the approved design files). */
a.project{display:block;color:inherit;text-decoration:none}
.collection-notice{margin:14px 0 0;font-size:11px;line-height:1.5;letter-spacing:.04em;color:var(--muted,#666)}
.collection-notice a{color:inherit}
.arkhaus-notice{margin-top:14px}
.arkhaus-notice[data-state=error]{color:#8a1c1c}
.arkhaus-turnstile{position:fixed;right:16px;bottom:16px;z-index:60}
/* Footer links (services, Notes, questions, privacy): centred on the page, plain text, no underline. */
.site-credit a{color:inherit;text-decoration:none;border:0;font:inherit;letter-spacing:inherit}
.site-credit .credit-links{position:absolute;top:0;left:calc(50vw - var(--margin));transform:translateX(-50%);white-space:nowrap}
.site-credit a:hover,.site-credit a:focus-visible{opacity:.65}
@media(max-width:760px){.site-credit .credit-links{position:static;transform:none;display:block;margin-top:4px}}
.site-credit .credit-sep{margin:0 .5em;opacity:.6}
/* Headings receive focus for screen readers when a stage opens; they are not controls. */
#journey :is(h1,h2)[tabindex="-1"]:focus{outline:none}

/* The tracing sheet's mask is its cut-outs only (the cursor "press" was removed on the owner's request, 25 Oct 2026:
   it cost a moving mask and pointer-driven repaints). The sheet keeps its full blur, texture and grain at all times. */
.surface-trace{mask-size:100% 100%;mask-position:0 0;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-position:0 0;-webkit-mask-repeat:no-repeat}
/* Credit line (owner, 10 Oct): the © text at half size; on phones it sits under the Services · Notes … links. */
.site-credit .credit-text{font-size:50%}
@media(max-width:760px){body>.site-credit{display:flex;flex-direction:column;align-items:center}body>.site-credit .credit-links{order:-1;margin:0 0 2px}}
/* Contact sheet (owner, 10 Oct): a second piece of tracing paper fixed at the right. At rest only its edge shows,
   halfway between the photos and the screen edge; it slides across over the existing paper with the contact details. */
.contact-sheet{--sheet-tilt:0deg;--sheet-over:56px;--sheet-w:min(620px,92vw);--sheet-peek:max(12px,calc(var(--margin) / 2));position:fixed;top:calc(var(--sheet-top,0px) - 2mm);bottom:calc(-1 * var(--sheet-over));right:calc(-1 * var(--sheet-over));width:calc(var(--sheet-w) + var(--sheet-over));z-index:35;transform-origin:0 0;transform:translateX(calc(100% - var(--sheet-peek) - var(--sheet-over) + var(--sheet-intro-x,0px))) rotate(var(--sheet-tilt));transition:transform .55s cubic-bezier(.22,.68,.2,1);box-shadow:-1px 0 0 rgba(0,0,0,.07);isolation:isolate}
.contact-sheet-paper::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--trace-texture);background-size:var(--trace-texture-scale);opacity:var(--sheet-grain,var(--trace-texture-intensity));filter:url(#trace-fibre-extract)} /* the same fibre filter as the main tracing paper's grain */
.contact-sheet.open{transform:rotate(var(--sheet-tilt))}
.contact-sheet-edge{position:absolute;top:0;bottom:0;left:0;width:max(28px,var(--sheet-peek));padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink,#252525)}
.contact-sheet-edge span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 11px/1 var(--font-label,Arial,Helvetica,sans-serif);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.contact-sheet-edge:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.contact-sheet-body{position:absolute;top:0;bottom:var(--sheet-over,0px);left:var(--sheet-peek);right:var(--sheet-over,0px);padding:48px 36px 48px 28px;overflow:auto;color:#222}
.contact-sheet-kicker{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:#444}
.contact-sheet-title{font-size:clamp(1.8rem,2.4vw,2.4rem);margin:0 0 28px}
.contact-sheet-list{margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 18px;font-size:1rem}
.contact-sheet-list dt{font-size:.75rem;letter-spacing:.12em;text-transform:var(--case-labels,uppercase);color:#555;padding-top:3px}
.contact-sheet-list dd{margin:0;color:#222}
.contact-sheet-list a{color:inherit;border-bottom:1px solid #2224}
.contact-sheet-ask{margin-top:34px;padding:10px 0;border:0;border-bottom:1px solid #2225;background:none;font-size:1.05rem;cursor:pointer;color:#222}
@media(max-width:760px){.contact-sheet-body{padding:32px 24px 40px 18px}.contact-sheet-edge span{font-size:9px;letter-spacing:.12em}}
@media(prefers-reduced-motion:reduce){.contact-sheet{transition:none}}
@media(forced-colors:active){.contact-sheet{border-left:2px solid CanvasText;background:Canvas}}
.contact-sheet-list a[href^="mailto:"]{text-transform:none;overflow-wrap:anywhere}
.contact-sheet-list dd{overflow-wrap:anywhere;min-width:0}
/* The sheet's top edge is 2mm above the top of the logo (the logo line is set by app.js); the tab is 7mm below that edge. */
/* Phones (owner, 10 Oct): the footer links run exactly from the left margin to the right margin, like the photos
   above them: first link on the left edge, last on the right, the rest spread evenly; the © line stays centred below. */
@media(max-width:760px){
  body>.site-credit{left:var(--margin);right:var(--margin);text-align:center}
  body>.site-credit .credit-links{display:flex;justify-content:space-between;align-self:stretch;width:100%}
  body>.site-credit .credit-sep{display:none}
}
/* Phones: the gap between the photos and the screen edge is only ~20px, so 2° would lean the sheet's edge over the
   photos by the foot of the screen. 1.2° keeps the whole edge in the gap. */
@media(max-width:760px){.contact-sheet{--sheet-tilt:0deg}} /* straight again (owner, 10 Oct); the tilt stays adjustable here */
/* Contact tab (owner's artwork, 10 Oct): a paper tab stuck to the contact sheet, perpendicular to its left edge, its
   top exactly 1cm below the sheet's top edge. Its left half hangs off the sheet's edge, its right half lies on the sheet.
   It is part of the sheet, so it slides and rotates with it. The canvas is the supplied artwork at its own proportions
   (2172 x 724); the strip in it spans x 824-1381 and y 295.5-397.6, which is placed exactly on the tab's box. */
.contact-tab{--tab-w:clamp(96px,9vw,150px);--tab-hx:2;position:absolute;z-index:2;top:7mm;left:calc(var(--tab-w) / -2);width:var(--tab-w);height:calc(var(--tab-w) * 102.1 / 557 * var(--tab-hx));padding:0;margin:0;border:0;background:none;cursor:pointer;overflow:visible;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.contact-tab canvas{position:absolute;display:block;max-width:none;width:calc(var(--tab-w) * 2172 / 557);height:calc(var(--tab-w) * 724 / 557 * var(--tab-hx));left:calc(var(--tab-w) * -824 / 557);top:calc(var(--tab-w) * -295.5 / 557 * var(--tab-hx));pointer-events:none}
.contact-tab:focus-visible{outline:1.5px solid #9aa0a6;outline-offset:4px}
/* Contact sheet form (owner, 10 Oct): no printed text. Every letter, line and tile outline is cut out of the sheet's
   paper (contact-form.js draws the holes into the paper's mask), showing whatever is beneath. */
.contact-sheet-paper{position:absolute;inset:0;z-index:0;background:rgba(var(--trace-colour),var(--sheet-opacity,var(--trace-opacity)));backdrop-filter:blur(var(--sheet-blur,var(--trace-blur))) saturate(var(--sheet-saturation,var(--trace-saturation,1))) contrast(var(--sheet-contrast,var(--trace-contrast)));-webkit-backdrop-filter:blur(var(--sheet-blur,var(--trace-blur))) saturate(var(--sheet-saturation,var(--trace-saturation,1))) contrast(var(--sheet-contrast,var(--trace-contrast)));isolation:isolate;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.contact-sheet-shade{position:absolute;inset:0;z-index:1;pointer-events:none}
.contact-sheet-shade svg{position:absolute;left:0;top:0;overflow:visible}
.contact-sheet-edge{z-index:2}.contact-sheet-body{z-index:2}
.cs{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:470px;margin:0 auto}
.cs [data-cut],.cs [data-cut] *,.cs input,.cs textarea{color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;filter:none!important} /* nothing painted: the letters are only holes in the sheet (the site's paper-letter heading style must not apply) */
.cs input,.cs textarea{caret-color:#333;background:transparent;border:0;outline:0;width:100%;font-family:var(--font-text,Arial,Helvetica,sans-serif);font-size:16px;letter-spacing:.02em;padding:6px 0 8px;text-transform:none}
.cs textarea{resize:vertical;min-height:72px;line-height:1.5}
.cs ::selection{background:rgba(0,0,0,.12)}
.cut-line{display:block;height:1px;width:100%}
.cs-kicker{font-family:var(--font-label,var(--font-text));font-size:12px;letter-spacing:.42em;margin:0 0 14px;text-transform:var(--case-labels,uppercase)}
.cs-rule{width:34px;margin:0 auto}
.cs-title{font-family:var(--font-heading);font-size:clamp(32px,3.3vw,48px);line-height:1.05;letter-spacing:-.01em;margin:18px 0 12px;font-weight:var(--heading-weight,400)}
.cs-intro{font-family:var(--font-label,var(--font-text));font-size:11px;letter-spacing:.34em;margin:0 0 26px;text-transform:var(--case-labels,uppercase)}
.cs-form{width:100%;text-align:left}
.cs-choices{border:0;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cs-choice,.cs-send{position:relative;min-height:44px;padding:8px 6px;border:0;background:transparent;cursor:pointer;font-family:var(--font-text);font-size:13px;letter-spacing:.02em;line-height:1.2}
.cs-choice:focus-visible,.cs-send:focus-visible,.cs-more-toggle:focus-visible{outline:1.5px dashed #555;outline-offset:3px}
.cs-field{display:block;margin:0 0 14px}
.cs-label{display:block;font-family:var(--font-text);font-size:13px;letter-spacing:.04em;margin-bottom:2px}
.cs-field:focus-within .cut-line{height:2px}
.cs-more{margin:6px 0 18px}
.cs-more-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;padding:8px 0 10px;border:0;background:none;cursor:pointer;text-align:left;font-family:var(--font-text);font-size:13px;letter-spacing:.04em}
.cs-plus{font-size:20px;line-height:1}
.cs-more-toggle[aria-expanded=true] .cs-plus{transform:rotate(45deg)}
.cs-details{margin-top:12px}
.cs-send{display:block;width:100%;margin-top:8px}
.cs-message{min-height:1.4em;margin:12px 0 0;font-family:var(--font-text);font-size:13px;letter-spacing:.03em}
.cs-direct{display:flex;flex-direction:column;align-items:center;gap:8px;margin:20px 0 0}
.cs-direct a{font-family:var(--font-text);font-size:16px;letter-spacing:.08em;text-decoration:none;text-transform:none}
.cs > .cs-rule:last-of-type{margin-top:22px}
@media(max-width:760px){.contact-sheet{--sheet-w:92vw}.cs-title{font-size:32px}.cs-choices{grid-template-columns:1fr 1fr}}
/* Centred on the sheet (owner, 10 Oct): across the visible paper and down it; it scrolls if the screen is short. */
.contact-sheet-body{display:flex;flex-direction:column;padding-left:32px;padding-right:calc(32px + var(--sheet-peek))} /* equal margins either side of the visible paper: the form is centred and never clipped */
.cs{margin:auto;width:100%;position:relative}
/* Home intro (owner, 10 Oct): the sheet is off screen while the big logo is centred and slides in with it as it moves up
   (contact-form.js follows the intro frame by frame, so no transition of its own while that happens). */
.contact-sheet.intro-follow{transition:none}
:root.intro-cutouts .contact-sheet:not(.intro-follow){transform:translateX(200%)} /* until contact-form.js follows the intro */
/* Contact form text (owner, 10 Oct): everything that is not the heading takes the "Selected projects" caption style
   from under the main page tiles: the labels font, 11px, label weight and tracking, labels capitals (Design → Typography). */
.cs-kicker,.cs-intro,.cs-label,.cs-choice,.cs-more-toggle,.cs-send,.cs-message,.cs-direct a,.cs input,.cs textarea{font-family:var(--font-label,var(--font-text));font-size:var(--caption-size,11px);font-weight:var(--label-weight,400);letter-spacing:var(--label-tracking,.24em);line-height:1.5;text-transform:var(--case-labels,uppercase)}
.cs-plus{font-size:16px;letter-spacing:0}
.cs input{padding:8px 0 9px}.cs textarea{line-height:1.7}
/* Phones zoom into any form box under 16px, so typed text is 16px there (same font, tracking and capitals). */
@media(max-width:760px){.cs input,.cs textarea{font-size:16px}}
/* The tracked caption lettering needs the room: choices two by two on every screen. */
.cs-choices{grid-template-columns:1fr 1fr}
/* Contact form (owner, 10 Oct): only the heading is cut out. Everything else is printed in the "Selected projects"
   caption ink (#111), in the caption style above; lines and tile outlines in the same ink. */
.cs{--cs-ink:#111}
.cs [data-cut]:not(.cs-title),.cs [data-cut]:not(.cs-title) *,.cs input,.cs textarea{color:var(--cs-ink)!important;-webkit-text-fill-color:var(--cs-ink)!important}
.cs .cut-line{background:var(--cs-ink);opacity:.55}
.cs-field:focus-within .cut-line{opacity:.9}
.cs-choice,.cs-send{box-shadow:inset 0 0 0 1px rgba(17,17,17,.55);border-radius:2px}
.cs-choice[aria-pressed=true]{background:var(--cs-ink)!important}
.cs-choice[aria-pressed=true] [data-cut],.cs-choice[aria-pressed=true] [data-cut] *{color:#f4f4f4!important;-webkit-text-fill-color:#f4f4f4!important}
.cs input::placeholder,.cs textarea::placeholder{color:rgba(17,17,17,.45)}
.cs input,.cs textarea{text-transform:none} /* what is typed shows as typed */
@media(max-width:760px){.contact-sheet-body{padding-left:16px;padding-right:calc(16px + var(--sheet-peek))}}
/* Project pages (owner, 11 Oct 2026): the page-turning book has been taken off again and the pages are left blank for
   now. The gallery stays hidden; the project's words stay in the page for screen readers and search, visually hidden. */
.work-detail{position:relative}
.work-detail>.work-gallery{display:none!important}
.work-detail>.words{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap}
/* You and About questions (owner, 11 Oct): the answers, "Something else…", the hint, Continue and the small note take
   the "Selected projects" caption style from the main page, linked to Design → Typography (menu and labels):
   the labels font, 11px, label weight and tracking, labels capitals, caption ink (#111). */
.visitor-choices button,.visitor-custom label,.visitor-custom input,.visitor-custom-confirm,.visitor-copy .visitor-note,.visitor-choices .choice-mark{font-family:var(--font-label,var(--font-text));font-size:var(--caption-size,11px);font-weight:var(--label-weight,400);letter-spacing:var(--label-tracking,.24em);line-height:1.5;text-transform:var(--case-labels,uppercase);color:#111;-webkit-text-fill-color:#111}
.visitor-custom input{text-transform:none} /* what is typed shows as typed */
@media(max-width:760px){.visitor-choices button,.visitor-custom label{font-size:var(--caption-size,11px)}.visitor-custom input{font-size:16px}} /* phones zoom into form boxes under 16px */
/* Contact sheet checks (owner, 11 Oct): the box to fix shows a darker rule; "Did you mean …?" fills the suggestion in. */
/* (the box to fix: see the recessed boxes below) */
.cs-suggest{all:unset;cursor:pointer;text-transform:none;letter-spacing:.06em;text-decoration:underline;text-underline-offset:2px}.cs-suggest:focus-visible{outline:1px solid #111;outline-offset:2px}
/* Contact sheet typing boxes pressed slightly into the paper (owner, 11 Oct 2026, reference image): a shallow recess lit
   from above. The upper lip casts a fine shadow onto the top inside edge; the lower inside wall faces the light and the
   lower outer lip catches it as a thin bright line; the sides take only a trace of shade; the floor is a touch darker
   nearer the top, where less light reaches. Every edge stays within 1-2px (one thickness of paper). The recess
   replaces the underline. */
.cs{--well-floor:rgba(0,0,0,.035);--well-floor-top:rgba(0,0,0,.06);--well-lip:rgba(0,0,0,.2);--well-lip-soft:rgba(0,0,0,.07);--well-light:rgba(255,255,255,.5);--well-wall:rgba(255,255,255,.22);--well-side:rgba(0,0,0,.05)}
.cs-field>.cut-line,.cs-details>.cut-line{display:none}
.cs-field .cs-label{display:block;margin-bottom:7px}
.cs .cs-field input,.cs .cs-field textarea{box-sizing:border-box;border-radius:3px;padding:12px 14px;min-height:46px;
  background:linear-gradient(to bottom,var(--well-floor-top),var(--well-floor) 45%,var(--well-floor))!important;
  box-shadow:inset 0 1px 1.2px var(--well-lip),inset 0 2px 4px var(--well-lip-soft),inset 1px 0 .5px var(--well-side),inset -1px 0 .5px var(--well-side),inset 0 -1px 0 var(--well-wall),0 1px 0 var(--well-light),0 -.5px 0 rgba(0,0,0,.04);
  transition:box-shadow .25s ease}
.cs .cs-field textarea{min-height:92px;padding-top:12px}
/* Typing: the recess reads a fraction deeper (the shadow under the top lip lengthens by half a pixel). */
.cs .cs-field input:focus,.cs .cs-field textarea:focus{box-shadow:inset 0 1.5px 1.5px rgba(0,0,0,.26),inset 0 3px 6px rgba(0,0,0,.08),inset 1px 0 .5px var(--well-side),inset -1px 0 .5px var(--well-side),inset 0 -1px 0 var(--well-wall),0 1px 0 var(--well-light),0 -.5px 0 rgba(0,0,0,.04)}
/* The box to fix: a fine ink rim inside the recess. */
.cs .cs-field input[aria-invalid]{box-shadow:inset 0 0 0 1px rgba(17,17,17,.55),inset 0 1px 1.2px var(--well-lip),inset 0 2px 4px var(--well-lip-soft),0 1px 0 var(--well-light)}
/* Dark theme: the paper is lit the same way, so keep the same shading at slightly gentler highlights. */
:root[data-theme=dark] .cs{--well-light:rgba(255,255,255,.18);--well-wall:rgba(255,255,255,.1)}
/* You, last screen ("Start with one question"), cleaner (owner, 11 Oct 2026, mockup). Every piece reads the shared
   Design settings: the answer tags and the note are caption style (labels font, caption size, label spacing, labels
   capitals, caption ink); the sentence and the typing boxes are the text font at the text size; "Send your query" is
   the heading font with the site's own arrow. The boxes stay cut through the tracing paper, now with a fine outline
   and no shadow; no rule above the note; one way forward (the Ask panel's own button is not shown here). */
.you-screen[data-visitor-stage="4"]{--you5-line:rgba(17,17,17,.24)}
.you-screen[data-visitor-stage="4"] .visitor-context{gap:10px;margin-top:30px}
.you-screen[data-visitor-stage="4"] .visitor-context button{font-family:var(--font-label,var(--font-text));font-size:calc(var(--caption-size,11px) - 1px);font-weight:var(--label-weight,400);letter-spacing:var(--label-tracking,.24em);line-height:1.4;text-transform:var(--case-labels,uppercase);color:#111;-webkit-text-fill-color:#111;background:transparent;border:1px solid var(--you5-line);padding:10px 12px 10px 13px;gap:16px}
.you-screen[data-visitor-stage="4"] .visitor-context button>span:last-child{font-size:calc(var(--caption-size,11px) + 1px);letter-spacing:0;line-height:1;opacity:.75}
.you-screen[data-visitor-stage="4"] .visitor-context button:hover{border-color:rgba(17,17,17,.5)}
.you-screen[data-visitor-stage="4"] .visitor-copy>p:not(.visitor-note){font-family:var(--font-text);font-size:var(--text-size,14px);letter-spacing:.01em;line-height:1.6;text-transform:var(--case-text,none);color:#111;-webkit-text-fill-color:#111;margin-top:26px}
.you-screen[data-visitor-stage="4"] .visitor-question,.you-screen[data-visitor-stage="4"] .visitor-site{max-width:590px;border:1px solid var(--you5-line);box-shadow:none;border-radius:0;transition:border-color .2s ease}
.you-screen[data-visitor-stage="4"] .visitor-question{margin-top:26px;min-height:104px;padding:14px 16px;font-family:var(--font-text);font-size:var(--text-size,14px);letter-spacing:.01em;line-height:1.6;color:#111;-webkit-text-fill-color:#111;text-transform:none}
.you-screen[data-visitor-stage="4"] .visitor-question::placeholder{color:rgba(17,17,17,.5);-webkit-text-fill-color:rgba(17,17,17,.5);text-transform:var(--case-text,none)}
.you-screen[data-visitor-stage="4"] .visitor-question:focus,.you-screen[data-visitor-stage="4"] .visitor-site:focus-within{border-color:rgba(17,17,17,.55);box-shadow:none}
.you-screen[data-visitor-stage="4"] .visitor-site{margin-top:14px;min-height:50px}
.you-screen[data-visitor-stage="4"] .visitor-site .visitor-custom-mark{display:none}
.you-screen[data-visitor-stage="4"] .visitor-site label,.you-screen[data-visitor-stage="4"] .visitor-site input{font-family:var(--font-text);font-size:var(--text-size,14px);font-weight:400;letter-spacing:.01em;line-height:1.5;padding:13px 16px}
.you-screen[data-visitor-stage="4"] .visitor-site label{text-transform:var(--case-text,none);color:rgba(17,17,17,.5);-webkit-text-fill-color:rgba(17,17,17,.5)}
.you-screen[data-visitor-stage="4"] .visitor-site input{text-transform:none}
.you-screen[data-visitor-stage="4"] .visitor-copy .visitor-note{border-top:0;padding-top:0;margin-top:22px}
.you-screen[data-visitor-stage="4"] .visitor-route-actions{margin-top:38px}
.you-screen[data-visitor-stage="4"] .visitor-review.primary{font-family:var(--font-text);font-weight:400;letter-spacing:.04em; /* (owner, 11 Oct 2026: normal-size text is Montserrat) */text-transform:var(--case-headings,none);font-size:clamp(18px,1.55vw,24px);line-height:1.2;color:#111;padding:0 2px 10px 0;border:0;border-bottom:1px solid rgba(17,17,17,.45);gap:20px;background:none}
.you-screen[data-visitor-stage="4"] .visitor-review.primary::after{width:20px;height:19px;flex-basis:20px}
.you-screen[data-visitor-stage="4"] .visitor-review.primary:hover::after{transform:rotate(90deg) translateY(-3px);transition:transform .25s ease}
.you-screen[data-visitor-stage="4"] .visitor-ask{display:none}
@media(max-width:760px){.you-screen[data-visitor-stage="4"] .visitor-question,.you-screen[data-visitor-stage="4"] .visitor-site input,.you-screen[data-visitor-stage="4"] .visitor-site label{font-size:16px}.you-screen[data-visitor-stage="4"] .visitor-context button{font-size:calc(var(--caption-size,11px) - 1.5px)}}
/* The same clean-up on every screen built like it: all You and About screens (owner, 11 Oct 2026). Reading text in the
   text font at the text size, evenly spaced; notes without the rule above them; one fine outline colour for lines, tags
   and boxes; typing boxes outlined, never shadowed. */
.visitor-screen{--visitor-line:rgba(17,17,17,.24)}
.you-screen[data-visitor-stage="4"]{--you5-line:var(--visitor-line)}
.visitor-screen .visitor-copy p:not(.visitor-note){font-family:var(--font-text);letter-spacing:.01em;line-height:1.6;color:#111;-webkit-text-fill-color:#111}
.visitor-screen .visitor-copy p:not(.visitor-note)+p:not(.visitor-note){margin-top:16px}
/* A small note cleared in Console → Content leaves no gap (owner, 12 Oct 2026). */
.visitor-note:empty{display:none}
.visitor-screen .visitor-copy .visitor-note{border-top:0;padding-top:0;margin-top:22px}
.visitor-screen .visitor-choices{border-top-color:var(--visitor-line)}
.visitor-screen .visitor-choices button{border-bottom-color:var(--visitor-line)}
.visitor-screen .visitor-choices button[aria-pressed=true]{border-bottom-color:#111}
.visitor-screen .visitor-custom:not(.visitor-site){border:1px solid var(--visitor-line);box-shadow:none;margin-top:14px;padding-right:6px}
.visitor-screen .visitor-custom:not(.visitor-site):focus-within{border-color:rgba(17,17,17,.55);box-shadow:none}
.visitor-screen .visitor-custom-confirm{border-color:var(--visitor-line);padding:7px 12px}
.visitor-screen .visitor-custom-confirm:hover{border-color:rgba(17,17,17,.55);background:transparent}
.visitor-screen .visitor-custom:not(.visitor-site) label,.visitor-screen .visitor-custom:not(.visitor-site) input{padding-left:14px}
.visitor-screen .visitor-custom:not(.visitor-site) label{display:flex;align-items:center;padding-top:0;padding-bottom:0}
/* Contact sheet collection notice (review, 11 Oct 2026): the Ask panel's own words and Privacy link, in caption print. */
.cs-privacy{margin:14px 0 0;font-family:var(--font-label,var(--font-text));font-size:calc(var(--caption-size,11px) - 1px);font-weight:var(--label-weight,400);letter-spacing:var(--label-tracking,.24em);line-height:1.6;text-transform:var(--case-labels,uppercase);color:rgba(17,17,17,.7);-webkit-text-fill-color:rgba(17,17,17,.7)}
.cs-privacy a{color:inherit;-webkit-text-fill-color:inherit;text-decoration:underline;text-underline-offset:2px}
.visitor-screen .visitor-custom:not(.visitor-site) label{max-width:calc(100% - 128px);white-space:normal;line-height:1.3} /* wraps before it can reach Continue, at any caption size */
/* Paper flap buttons (owner's design, 11 Oct 2026; paper-flap.js): the project-type tiles and Send are flaps cut into
   the contact sheet. The flap's shading lies over our own sheet paper (see-through black and white, no blend). While
   it runs it replaces the drawn outline and the ink fill of a chosen tile; the words sit on the flap and travel with it
   (a pressed flap is a hair lower). Without WebGL the outline stays. */
.cs{--flap-highlight:3.2}
:root[data-theme=dark] .cs{--flap-highlight:.45}
.flap-layer{position:absolute;pointer-events:none;display:block}
.flap-layer canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.flap-ready .cs-choice.has-flap,.flap-ready .cs-send.has-flap{box-shadow:none;border-radius:0;background:transparent!important;overflow:visible}
.flap-ready .cs-choice.has-flap[aria-pressed=true] [data-cut],.flap-ready .cs-choice.has-flap[aria-pressed=true] [data-cut] *{color:var(--cs-ink)!important;-webkit-text-fill-color:var(--cs-ink)!important}
.has-flap>:not(.flap-layer){position:relative;z-index:1;display:inline-block;transform:translateY(calc(var(--flap-s,0) * 1px))}
.flap-ready .cs-choices{gap:14px 12px}
.flap-ready .cs-send.has-flap{margin-top:18px}
/* Typing boxes: the same paper as the rest of the sheet (owner, 11 Oct 2026: the boxes looked darker). No floor tint;
   the recess is told only by its lit edges: the fine shadow under the top lip and the bright lower lip. */
.cs{--well-floor:transparent;--well-floor-top:transparent;--well-lip-soft:rgba(0,0,0,.035)}
.cs .cs-field input,.cs .cs-field textarea{background:transparent!important}
/* Logo design 2 (owner, 11 Oct 2026): pressed into the tracing paper rather than cut through it. The logo is no longer
   a hole (paper-type.js); its shape draws only the contact card's typing-box edges (#logo-deboss): a fine shadow under
   each top edge, a lit lower wall and a bright lower lip, light from above. Design 1 (no data-logo) is unchanged. */
/* (CSS filters apply before masks, so the deboss sits on the logo's box and reads the masked letters inside it.) */
html[data-logo=deboss] .material-logo{filter:url(#logo-deboss)!important}
html[data-logo=deboss] .logo-aperture{background:#000!important;background-image:none!important;filter:none!important}
html[data-logo=deboss] #entrance .material-logo,html[data-logo=deboss] #entrance .entrance-identity .material-logo,html[data-logo=deboss] header .material-logo{filter:url(#logo-deboss)!important}html[data-logo=deboss] #entrance .logo-aperture,html[data-logo=deboss] header .logo-aperture{background:#000!important;background-image:none!important;filter:none!important} /* (as specific as the cover and header rules it replaces) */
/* Logo design 3 (owner, 11 Oct 2026): design 2's deboss with the letters filled in bronze foil (#logo-foil: an uneven
   crumple lit from above, fine glints, then the same deboss edges over it). */
html[data-logo=foil] .material-logo,html[data-logo=foil] #entrance .material-logo,html[data-logo=foil] #entrance .entrance-identity .material-logo,html[data-logo=foil] header .material-logo{filter:url(#logo-foil)!important}
html[data-logo=foil] .logo-aperture,html[data-logo=foil] #entrance .logo-aperture,html[data-logo=foil] header .logo-aperture{background:#000!important;background-image:none!important;filter:none!important}
/* Project pages: the owner's card stack (11 Oct 2026; project-cards.js). Sizes in card units (1em = 1% of a card's
   width; the script sets the stage's font-size so the left pile meets the logo's left edge and the fan the right
   margin). Card stock, geometry, timing and every shadow as supplied; the taupe backdrop is gone (the cards lie on our
   paper and tracing paper); the lettering follows Design → Typography: headings for the titles, text for the
   paragraphs, labels for the brand and the counter. */
.project-cards{--pc-card:#f0eeea;--pc-ink:#2b2925;--pc-ink-soft:#3a3733;--pc-move-ms:900ms;--pc-move-ease:cubic-bezier(.45,.05,.2,1);
  position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none}
.pc-stage{position:absolute;left:0;top:0;width:254.5em;height:190.9em;font-size:5px}
.pc-card{position:absolute;left:0;top:0;width:100em;height:100em;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform var(--pc-move-ms) var(--pc-move-ease);will-change:transform;pointer-events:none}
.pc-card.is-hidden{visibility:hidden}
.pc-card.no-anim,.pc-card.no-anim .pc-face{transition:none!important}
.pc-lift{position:absolute;inset:0;will-change:transform}
.pc-face{position:absolute;inset:0;background-color:var(--pc-card);
  background-image:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%,rgba(120,105,85,.05) 100%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.32  0 0 0 0 0.28  0 0 0 0.42 -0.13'/></filter><rect width='260' height='260' filter='url(%23p)'/></svg>");
  background-size:cover,260px 260px;border-radius:.12em;box-shadow:var(--shadow);transition:box-shadow var(--pc-move-ms) var(--pc-move-ease);color:var(--pc-ink);overflow:hidden}
/* The card paper is editable (Design → Project cards): a texture from the library at its size, and the grain's
   strength. Unset = the supplied card stock at full strength. The highlight sheen stays on the face. */
.pc-face{background-image:linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%,rgba(120,105,85,.05) 100%);background-size:cover}
/* Card paper brightness (owner, 13 Oct 2026): the stock's colour and its texture together; 1 = as supplied. */
.pc-face{background-color:color-mix(in srgb,color-mix(in srgb,var(--pc-card),#fff calc(max(0,var(--pc-brightness,1) - 1) * 100%)),#000 calc(max(0,1 - var(--pc-brightness,1)) * 100%))}
/* (owner, 11 Oct 2026) The card paper is linked to the background paper: its texture and size follow Design → Paper
   background unless Design → Project cards picks a texture for the cards on purpose. */
.pc-face::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--pc-grain,1);filter:saturate(var(--pc-saturation,1)) brightness(var(--pc-brightness,1));background:var(--pc-texture,var(--base-paper-texture-light,var(--base-paper-texture))) 0 0/var(--pc-texture-size,var(--base-paper-scale-light,var(--base-paper-scale,1200px 1800px)))} /* (always the light paper: cards are white stock in either theme) */
.pc-brand,.pc-count{position:absolute;margin:0;font-family:var(--font-label,var(--font-text));font-weight:var(--label-weight,400);text-transform:uppercase;white-space:nowrap;color:var(--pc-ink-soft);line-height:1}
.pc-brand{font-size:2.55em;letter-spacing:.42em}
.pc-count{font-size:1.3em;letter-spacing:.3em;margin-right:-.3em} /* (owner, 11 Oct 2026: half the supplied size; positions below doubled to stay put) */
.pc-brand{display:none} /* (owner, 11 Oct 2026: no ARKHAUS label on the cards) */
/* text card (measured from "Site & Setting") */
.pc-card--text .pc-brand{left:3.7em;top:3.55em}
.pc-card--text .pc-rule{position:absolute;left:9.4em;top:21.6em;width:7.4em;height:.2em;background:var(--pc-ink-soft)}
.project-cards .pc-title{position:absolute;left:9.4em;top:38.2em;margin:0;width:80em;font-size:1em;font-family:var(--font-text);font-weight:400; /* (owner, 11 Oct 2026: at half size the title is normal-size text, so the text font: Montserrat) */line-height:1;text-transform:var(--case-headings,uppercase);color:var(--pc-ink);-webkit-text-fill-color:var(--pc-ink);background:none;filter:none;text-shadow:none}
.project-cards .pc-title span{font-size:2.75em;letter-spacing:-.005em} /* (owner, 11 Oct 2026: half the supplied size) */
.pc-body{position:absolute;left:4.82em;top:25.5em;margin:0;width:40.4em;max-height:21em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:16;font-size:1.95em; /* (owner, 11 Oct 2026: half the supplied size, same place and width) */font-family:var(--font-text);font-weight:400;line-height:1.313;text-transform:var(--case-text,none);color:var(--pc-ink)}
.pc-card--text .pc-count{right:6.2em;bottom:3.5em}
/* image card (measured from card 2) */
.pc-card--image .pc-brand{left:2.78em;top:2.1em}
/* (owner, 13 Oct 2026: the photograph sits an equal 7 card units in from every edge; the counter sits in the bottom margin) */
.pc-pic{position:absolute;left:7em;top:7em;width:86em;height:86em;background:#d8d4ce center/cover no-repeat}
.pc-card--image .pc-count{right:5.3em;bottom:2.5em}
/* click zones (as supplied) */
.pc-zone{font:inherit;position:absolute;width:112em;height:118em;padding:0;border:0;background:transparent;cursor:pointer;z-index:5000;-webkit-tap-highlight-color:transparent;border-radius:1em;pointer-events:auto}
.pc-zone:focus{outline:none}
.pc-zone:focus-visible{outline:.35em solid rgba(17,17,17,.45);outline-offset:-.5em}
.pc-zone[disabled]{cursor:default}
.pc-zone--left{left:12.6em;top:33.4em}
.pc-zone--right{left:133.8em;top:33.3em}
@media (prefers-reduced-motion:reduce){.project-cards{--pc-move-ms:1ms}}
/* ===== Contact form styles (owner, 11 Oct 2026: "sharper" options; Design → Contact form; contact-form.js sets
   data-form-style). Same words and behaviour; only the look changes. Unset = the recessed boxes and paper flaps. ===== */
.contact-sheet[data-form-style] .flap-layer{display:none!important}
.contact-sheet[data-form-style] .has-flap>:not(.flap-layer){transform:none!important}
.contact-sheet[data-form-style] .cs .cs-field input,.contact-sheet[data-form-style] .cs .cs-field textarea{box-shadow:none!important;border-radius:0!important;background:transparent!important;min-height:0}
.contact-sheet[data-form-style] .cs-choice,.contact-sheet[data-form-style] .cs-send{box-shadow:none!important;border-radius:0!important;background:transparent!important}
.contact-sheet[data-form-style] .cs-choice[aria-pressed=true] [data-cut],.contact-sheet[data-form-style] .cs-choice[aria-pressed=true] [data-cut] *{color:var(--cs-ink)!important;-webkit-text-fill-color:var(--cs-ink)!important}
.contact-sheet[data-form-style] .cs-field .cs-label{margin-bottom:0}

/* 1. Title block: one ruled grid, like the title block of an architect's drawing. Cells meet on 1px ink lines (each
   cell draws half); labels sit small in the cells' corners; the types are numbered; Send is a solid ink bar. */
.contact-sheet[data-form-style=titleblock]{--tb-line:rgba(17,17,17,.82)}
.contact-sheet[data-form-style=titleblock] .cs-choices{gap:0;margin:0;counter-reset:tb}
.contact-sheet[data-form-style=titleblock] .cs-choice,.contact-sheet[data-form-style=titleblock] .cs-field,.contact-sheet[data-form-style=titleblock] .cs-more{box-shadow:0 0 0 .5px var(--tb-line)!important}
.contact-sheet[data-form-style=titleblock] .cs-choice{min-height:58px;text-align:left;padding:24px 14px 10px}
.contact-sheet[data-form-style=titleblock] .cs-choice::before{counter-increment:tb;content:counter(tb,decimal-leading-zero);position:absolute;left:14px;top:9px;font:400 8px/1 var(--font-label,var(--font-text));letter-spacing:.2em;color:var(--cs-ink);opacity:.55}
.contact-sheet[data-form-style=titleblock] .cs-choice[aria-pressed=true]{background:#111!important}
.contact-sheet[data-form-style=titleblock] .cs-choice[aria-pressed=true] [data-cut],.contact-sheet[data-form-style=titleblock] .cs-choice[aria-pressed=true] [data-cut] *,.contact-sheet[data-form-style=titleblock] .cs-choice[aria-pressed=true]::before{color:#f4f4f4!important;-webkit-text-fill-color:#f4f4f4!important}
.contact-sheet[data-form-style=titleblock] .cs-field{margin:0;padding:10px 14px 0}
.contact-sheet[data-form-style=titleblock] .cs-field .cs-label{font-size:calc(var(--caption-size,11px) - 2.5px);opacity:.62}
.contact-sheet[data-form-style=titleblock] .cs .cs-field input,.contact-sheet[data-form-style=titleblock] .cs .cs-field textarea{padding:6px 0 12px}
.contact-sheet[data-form-style=titleblock] .cs-more{margin:0;padding:0 14px}
.contact-sheet[data-form-style=titleblock] .cs-more>.cut-line{display:none}
.contact-sheet[data-form-style=titleblock] .cs-more-toggle{padding:16px 0}
.contact-sheet[data-form-style=titleblock] .cs-details{margin:0 -14px;padding:0 14px}
.contact-sheet[data-form-style=titleblock] .cs-send{margin:0;min-height:58px;background:#111!important;box-shadow:0 0 0 .5px #111!important}
.contact-sheet[data-form-style=titleblock] .cs-send [data-cut],.contact-sheet[data-form-style=titleblock] .cs-send [data-cut] *{color:#f4f4f4!important;-webkit-text-fill-color:#f4f4f4!important}
.contact-sheet[data-form-style=titleblock] .cs-send:hover{background:#2a2725!important}

/* 2. Cut through: the typing boxes and the tiles are windows cut through the tracing paper (contact-form.js cuts them,
   with the heading's fine cut edge); what is behind the sheet shows through. A chosen type is backed in ink. */
.contact-sheet[data-form-style=cut] .cs-choices{gap:10px}
.contact-sheet[data-form-style=cut] .cs-choice{min-height:48px}
.contact-sheet[data-form-style=cut] .cs-choice[aria-pressed=true]{background:rgba(17,17,17,.86)!important}
.contact-sheet[data-form-style=cut] .cs-choice[aria-pressed=true] [data-cut],.contact-sheet[data-form-style=cut] .cs-choice[aria-pressed=true] [data-cut] *{color:#f4f4f4!important;-webkit-text-fill-color:#f4f4f4!important}
.contact-sheet[data-form-style=cut] .cs-field .cs-label{margin-bottom:7px}
.contact-sheet[data-form-style=cut] .cs .cs-field input,.contact-sheet[data-form-style=cut] .cs .cs-field textarea{padding:13px 14px;min-height:48px}
.contact-sheet[data-form-style=cut] .cs-send{min-height:52px;margin-top:16px}
.contact-sheet[data-form-style=cut] .cs-send:hover{background:rgba(255,255,255,.12)!important}

/* 3. Schedule: a specification schedule. Numbered rows on hairline rules, label left and answer right; the types as
   square tick boxes; Send as a text link with an arrow (as "Send your query" on the You page). */
.contact-sheet[data-form-style=schedule] .cs-form{counter-reset:row;border-top:1px solid rgba(17,17,17,.75)}
.contact-sheet[data-form-style=schedule] .cs-choices{gap:0 18px;margin:0;padding:14px 0 12px;border-bottom:.5px solid rgba(17,17,17,.4)}
.contact-sheet[data-form-style=schedule] .cs-choice{min-height:34px;text-align:left;padding:6px 0 6px 24px}
.contact-sheet[data-form-style=schedule] .cs-choice::before{content:"";position:absolute;left:0;top:50%;width:11px;height:11px;margin-top:-6px;box-shadow:inset 0 0 0 1px rgba(17,17,17,.8)}
.contact-sheet[data-form-style=schedule] .cs-choice[aria-pressed=true]::before{background:#111;box-shadow:inset 0 0 0 1px #111,inset 0 0 0 3px #f4f4f4}
.contact-sheet[data-form-style=schedule] .cs-field{display:grid;grid-template-columns:40% 1fr;align-items:center;margin:0;min-height:50px;border-bottom:.5px solid rgba(17,17,17,.4)}
.contact-sheet[data-form-style=schedule] .cs-field .cs-label::before{counter-increment:row;content:counter(row,decimal-leading-zero);display:inline-block;width:2.6em;opacity:.5}
.contact-sheet[data-form-style=schedule] .cs .cs-field input{padding:14px 0}
.contact-sheet[data-form-style=schedule] .cs-details{display:block}
.contact-sheet[data-form-style=schedule] .cs-details:not([hidden]){border-bottom:.5px solid rgba(17,17,17,.4)}
.contact-sheet[data-form-style=schedule] .cs-more{margin:0}
.contact-sheet[data-form-style=schedule] .cs-more>.cut-line{background:rgba(17,17,17,.4);opacity:1;height:.5px}
.contact-sheet[data-form-style=schedule] .cs-more-toggle{padding:16px 0}
.contact-sheet[data-form-style=schedule] .cs-send{display:flex;align-items:center;gap:14px;width:max-content;margin:26px 0 0 auto;min-height:0;padding:0 0 7px;border-bottom:1px solid rgba(17,17,17,.6)}
.contact-sheet[data-form-style=schedule] .cs-send::after{content:"\2192";font-size:16px;letter-spacing:0;color:var(--cs-ink);transition:transform .25s ease}
.contact-sheet[data-form-style=schedule] .cs-send:hover::after{transform:translateX(4px)}

/* 4. Bronze line: minimal. Single hairlines; the field you are in draws a bronze line across; a chosen type takes a
   bronze underline; Send is a bronze foil bar whose sheen moves when you point at it (logo design 3's bronze). */
.contact-sheet[data-form-style=bronze]{--bz:linear-gradient(90deg,#7e4b2d,#c78f6b 38%,#9a6342 62%,#d3a07c 82%,#8a5534);--bz-hair:linear-gradient(rgba(17,17,17,.24),rgba(17,17,17,.24))}
.contact-sheet[data-form-style=bronze] .cs-choices{gap:4px 22px;margin-bottom:26px}
.contact-sheet[data-form-style=bronze] .cs-choice{min-height:40px;text-align:left;padding:10px 0;background:var(--bz) left bottom/0% 2px no-repeat,var(--bz-hair) left bottom/100% 1px no-repeat!important;transition:background-size .45s ease}
.contact-sheet[data-form-style=bronze] .cs-choice:hover{background-size:30% 2px,100% 1px!important}
.contact-sheet[data-form-style=bronze] .cs-choice[aria-pressed=true]{background-size:100% 2px,100% 1px!important}
.contact-sheet[data-form-style=bronze] .cs-choice[aria-pressed=true] [data-cut],.contact-sheet[data-form-style=bronze] .cs-choice[aria-pressed=true] [data-cut] *{color:#6f4127!important;-webkit-text-fill-color:#6f4127!important}
.contact-sheet[data-form-style=bronze] .cs-field{margin:0 0 18px;background:var(--bz) left bottom/0% 1.5px no-repeat,var(--bz-hair) left bottom/100% 1px no-repeat;transition:background-size .5s ease}
.contact-sheet[data-form-style=bronze] .cs-field:focus-within{background-size:100% 1.5px,100% 1px}
.contact-sheet[data-form-style=bronze] .cs .cs-field input,.contact-sheet[data-form-style=bronze] .cs .cs-field textarea{padding:10px 0 11px}
.contact-sheet[data-form-style=bronze] .cs-more>.cut-line{background:rgba(17,17,17,.24);opacity:1}
.contact-sheet[data-form-style=bronze] .cs-send{min-height:50px;margin-top:22px;background:linear-gradient(100deg,#7b4a2c 0%,#c38a64 22%,#9b6342 44%,#d7a47f 62%,#8c5636 82%,#b47a55 100%) 0 0/220% 100%!important;transition:background-position .9s ease;box-shadow:inset 0 1px 0 rgba(255,236,220,.35),inset 0 -1px 0 rgba(60,30,15,.35)!important}
.contact-sheet[data-form-style=bronze] .cs-send:hover{background-position:100% 0!important}
.contact-sheet[data-form-style=bronze] .cs-send [data-cut],.contact-sheet[data-form-style=bronze] .cs-send [data-cut] *{color:#fff6ee!important;-webkit-text-fill-color:#fff6ee!important}
/* (Cut through: each window is lightly glazed, so the photo behind still shows but the words stay readable.) */
.contact-sheet[data-form-style=cut] .cs-choice:not([aria-pressed=true]),.contact-sheet[data-form-style=cut] .cs-send,.contact-sheet[data-form-style=cut] .cs .cs-field input,.contact-sheet[data-form-style=cut] .cs .cs-field textarea{background:rgba(247,246,244,.72)!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.contact-sheet[data-form-style=cut] .cs-send:hover{background:rgba(247,246,244,.86)!important}
/* The one base wallpaper as its own layer (owner, 25 Oct 2026: the logo cut-out must show the wallpaper beneath, and
   it should move with the page). Identical to body::before (site.css), which it replaces once app.js has added it. It
   is one texture tile taller at each end and slides by the scroll distance modulo one tile, set on this element only
   (style.translate), so the pattern lines up and nothing else on the page is restyled or repainted while scrolling. */
html.has-wallpaper body::before{display:none}
.base-wallpaper{position:fixed;left:0;top:calc(var(--paper-tile,0px) * -1);height:calc(100% + var(--paper-tile,0px) * 2);z-index:-1;pointer-events:none;background-color:var(--base-paper-colour);background-image:linear-gradient(var(--base-paper-wash),var(--base-paper-wash)),var(--base-paper-texture);background-size:auto,var(--base-paper-scale);background-position:0 0;transform:translateX(var(--workspace-x));transition:transform var(--ask-motion) cubic-bezier(.22,.68,.2,1);width:calc(100% + var(--ask-shift));filter:brightness(calc((1 - var(--paper-darken)) * var(--paper-bright)));will-change:transform,translate}
@media(prefers-reduced-motion:reduce){.base-wallpaper{transition:none}}