/* Tonoli Gioielli — "Come cammina un pendolo".
   The page is the inside of a jewel case: wine velvet, brass drawn in line, steel for arbors and hands, enamel for the words.
   The only paper on the page is the workshop's repair tag (the notes, the request, the cookie notice). */
:root {
  --velvet: #3A0B1A; --velvet-deep: #2A0711; --velvet-lift: #4C1426;
  --enamel: #F4EDE1; --enamel-2: #DCCBBF; --line: rgba(244, 237, 225, .18);
  --brass: #E3B24C; --brass-2: #B98A2C; --steel: #A9C3DE; --ruby: #F0668C;
  --tag: #E9D6A6; --tag-2: #DCC68F; --tag-ink: #2A1710; --tag-ink-2: #5A432E; --stamp: #A3152C;
  --disp: 'Gloock', 'Times New Roman', serif; --text: 'Spectral', Georgia, serif;
  --left: clamp(20px, 11vw, 190px); --pad: clamp(20px, 3vw, 44px); --col: 640px;
  --out: cubic-bezier(.16, 1, .3, 1); --io: cubic-bezier(.87, 0, .13, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--velvet) radial-gradient(110% 70% at 88% -6%, var(--velvet-lift) 0%, rgba(76, 20, 38, 0) 62%) no-repeat; color: var(--enamel); font: 400 20px/1.62 var(--text); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--brass); color: var(--velvet-deep); }
a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .25s var(--out); }
a:hover { color: var(--enamel); }
:focus-visible { outline: 2px solid var(--enamel); outline-offset: 3px; border-radius: 2px; }
p { margin: 0 0 1.05em; } i, em { font-style: italic; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* masthead: the publisher's line, not a navigation bar */
.mast { display: flex; align-items: center; gap: 28px; padding: 18px var(--pad) 16px var(--left); border-bottom: 1px solid var(--line); }
.mast-brand img { display: block; height: 38px; width: auto; }
.mast-note { margin: 0 0 0 auto; font-size: 15px; color: var(--enamel-2); }
.lang { display: flex; gap: 14px; }
.lang button { background: none; border: 0; padding: 4px 0; color: var(--enamel-2); font: 500 15px var(--text); cursor: pointer; border-bottom: 1.5px solid transparent; transition: color .25s var(--out), border-color .25s var(--out); }
.lang button:hover { color: var(--enamel); } .lang button[aria-pressed="true"] { color: var(--brass); border-bottom-color: var(--brass); }

/* opening */
.open { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 430px); column-gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 5vw, 64px) var(--pad) 0 var(--left); align-items: start; }
.title { margin: 0 0 .32em -.045em; font: 400 clamp(58px, 9.9vw, 150px)/.9 var(--disp); letter-spacing: -.028em; }
.title .ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; } .title .ln > span { display: inline-block; }
.title .ln:nth-child(3) > span { color: var(--brass); }
.deck { max-width: 22em; margin: 0 0 20px; font: 400 clamp(22px, 2.3vw, 30px)/1.28 var(--text); font-style: italic; }
.by { margin: 0 0 clamp(36px, 5vw, 64px); padding-top: 16px; max-width: var(--col); border-top: 1px solid var(--line); font-size: 16px; color: var(--enamel-2); } .by b { font-weight: 600; color: var(--enamel); }
.col { max-width: var(--col); }
.fig0 { margin: 0; } .fig0 svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig0 figcaption { margin-top: 6px; font-size: 15px; font-style: italic; color: var(--enamel-2); text-align: right; }

/* chapters */
.cap { padding: clamp(96px, 13vw, 200px) var(--pad) 0 var(--left); }
.cap-h { position: relative; margin-bottom: clamp(24px, 3vw, 44px); }
.cap-n { display: block; margin-left: -.05em; font: 400 clamp(150px, 25vw, 360px)/.74 var(--disp); letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1.5px var(--brass-2); user-select: none; }
.cap h2 { position: relative; margin: clamp(-64px, -4.4vw, -30px) 0 0; font: 400 clamp(44px, 6.6vw, 96px)/.96 var(--disp); letter-spacing: -.022em; text-wrap: balance; }
.cap--end h2 { margin-top: 0; font-size: clamp(38px, 4.6vw, 66px); max-width: 14em; }
.cap-m { margin: 14px 0 0; font-size: 15px; font-style: italic; color: var(--enamel-2); }
.formula { margin: 34px 0 30px; font: italic 400 clamp(38px, 5.4vw, 64px)/1.1 var(--text); color: var(--brass); white-space: nowrap; }
.formula .rt { font-style: normal; margin-right: -.06em; } .formula .fr { display: inline-block; padding: .02em .16em 0; border-top: .055em solid currentColor; } .formula .fr b { font-weight: 400; font-style: normal; padding: 0 .08em; }

/* figures: drawn straight on the velvet, wider than the text */
.fig { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "draw side" "ctl side"; column-gap: clamp(28px, 4vw, 60px); row-gap: 8px; align-items: start; max-width: 1060px; margin: clamp(36px, 5vw, 64px) 0; }
.fig--tall { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "draw side" "draw ctl"; grid-template-rows: auto 1fr; max-width: 980px; row-gap: 28px; }
.fig-draw { grid-area: draw; min-width: 0; } .fig-draw svg { display: block; width: 100%; max-width: calc(var(--vw, 520) * 1.36px); height: auto; overflow: visible; }
.fig-side { grid-area: side; min-width: 0; padding-top: 10px; }
.fig figcaption { font-size: 16px; line-height: 1.5; color: var(--enamel-2); } .fig figcaption b { display: block; margin-bottom: 6px; font: 400 26px/1 var(--disp); color: var(--brass); letter-spacing: 0; } .fig figcaption i { color: var(--enamel); }

/* the control: a brass rail with a knurled nut, labelled with what it moves and its unit */
.ctl { grid-area: ctl; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: end; min-width: 0; padding-top: 6px; }
.ctl label { grid-column: 1; font: 600 12.5px/1.2 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.ctl output { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 4.6ch; text-align: right; font: 400 34px/1 var(--disp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctl input[type="range"] { grid-column: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 40px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; }
.ctl input[type="range"]:active { cursor: grabbing; }
.ctl input[type="range"]::-webkit-slider-runnable-track { height: 13px; background: linear-gradient(var(--brass), var(--brass)) 0 50% / 100% 1.5px no-repeat, repeating-linear-gradient(90deg, rgba(227, 178, 76, .75) 0 1.5px, rgba(227, 178, 76, 0) 1.5px 100%) 0 0 / 5% 100%; }
.ctl input[type="range"]::-moz-range-track { height: 1.5px; background: var(--brass); }
.ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -10.5px; border-radius: 50%; border: 2px solid var(--velvet); background: radial-gradient(circle, var(--velvet-deep) 0 4.5px, var(--brass) 5px 9px, rgba(227, 178, 76, 0) 9.5px), repeating-conic-gradient(var(--brass) 0 7.5deg, var(--brass-2) 7.5deg 15deg); box-shadow: 0 0 0 1.5px var(--brass), 0 8px 16px -4px rgba(0, 0, 0, .7); transition: transform .25s var(--out); }
.ctl input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--velvet); background: radial-gradient(circle, var(--velvet-deep) 0 4.5px, var(--brass) 5px 9px, rgba(227, 178, 76, 0) 9.5px), repeating-conic-gradient(var(--brass) 0 7.5deg, var(--brass-2) 7.5deg 15deg); box-shadow: 0 0 0 1.5px var(--brass); }
.ctl input[type="range"]:hover::-webkit-slider-thumb, .ctl input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1) rotate(30deg); }
.ctl input[type="range"]:focus-visible { outline: none; } .ctl input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1.5px var(--brass), 0 0 0 5px var(--enamel); } .ctl input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1.5px var(--brass), 0 0 0 5px var(--enamel); }
.ctl-s { grid-column: 1; display: flex; justify-content: space-between; margin-top: -2px; font-size: 13px; line-height: 1.2; color: var(--enamel-2); font-variant-numeric: tabular-nums; }
.ctl-s--btn { position: relative; display: block; height: 26px; } .ctl-s--btn button { position: absolute; left: calc(17px + (100% - 34px) * var(--p)); transform: translateX(-50%); white-space: nowrap; background: none; border: 0; padding: 4px 0; font: inherit; color: var(--brass); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .ctl-s--btn button:hover { color: var(--enamel); }
.lever { grid-column: 1 / -1; justify-self: start; margin-top: 18px; padding: 11px 18px 10px; background: transparent; color: var(--steel); border: 1.5px solid var(--steel); border-radius: 2px; font: 600 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .25s var(--out), color .25s var(--out), transform .25s var(--out); }
.lever:hover { background: var(--steel); color: var(--velvet-deep); } .lever:active { transform: translateY(-3px); }

/* legend and readings */
.read { margin: 18px 0 0; font-size: 15.5px; line-height: 1.35; }
.read div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0 8px; border-top: 1px solid var(--line); }
.read dt { color: var(--enamel-2); } .read dt i { margin-right: 4px; font-size: 20px; color: var(--enamel); }
.read dd { flex: none; max-width: 62%; margin: 0; text-align: right; font-variant-numeric: tabular-nums; } .read dd i { font-size: 1.1em; }
.read .m dt { color: var(--enamel); } .read .m dd { font: 400 21px/1.15 var(--disp); color: var(--brass); }
.read .ok dd { color: var(--steel); } .read .bad dd { color: var(--ruby); font-size: 18px; max-width: 12em; }
.read .f { display: block; } .read .f dd { text-align: left; } .read .eq { display: block; margin: 4px 0 2px; font-size: 18px; font-style: italic; color: var(--enamel-2); } .read .eq i { font-size: 1em; }
.read .f b { display: block; font: 400 clamp(68px, 8.4vw, 124px)/.92 var(--disp); letter-spacing: -.03em; color: var(--enamel); white-space: nowrap; }

/* the drawings */
svg .br { fill: rgba(227, 178, 76, .1); stroke: var(--brass); stroke-width: 1.25; stroke-linejoin: round; }
svg .br.dim { fill: rgba(227, 178, 76, .04); stroke-opacity: .5; }
svg .br.new { fill: rgba(227, 178, 76, .3); stroke-width: 1.5; }
svg .br.solid { fill: var(--brass); stroke: var(--velvet-deep); stroke-width: 1; }
svg .st { fill: rgba(169, 195, 222, .16); stroke: var(--steel); stroke-width: 1.25; stroke-linejoin: round; }
svg .st.new { fill: rgba(169, 195, 222, .42); stroke-width: 1.5; } svg .st.solid { fill: var(--steel); stroke: var(--velvet-deep); stroke-width: 1; }
svg .st.thin { fill: none; stroke-width: 3; stroke-linecap: round; } svg .nofill { fill: none !important; stroke-width: 1.3 !important; }
svg .crutch { opacity: .55; } svg .crutch .st.thin { stroke-width: 2; }
svg .rod { stroke: var(--brass); stroke-width: 3; } svg .cord { fill: none; stroke: var(--enamel); stroke-width: 1.4; }
svg .arb { fill: var(--velvet-deep); stroke: var(--steel); stroke-width: 1.2; } svg .dot { fill: var(--brass); } svg .ruby { fill: var(--ruby); } svg .pin { fill: var(--enamel); }
svg .in { fill: none; stroke: rgba(42, 7, 17, .55); stroke-width: 1.2; }
svg .ghost { fill: rgba(244, 237, 225, .03); stroke: rgba(244, 237, 225, .3); stroke-width: 1; stroke-dasharray: 2 6; }
svg .dial { fill: rgba(244, 237, 225, .05); stroke: rgba(244, 237, 225, .55); stroke-width: 1; }
svg .floor { stroke: rgba(244, 237, 225, .45); stroke-width: 1; } svg .tick { stroke: rgba(244, 237, 225, .7); stroke-width: 1; } svg .tick.dim { stroke-opacity: .4; }
svg .lead { stroke: rgba(244, 237, 225, .4); stroke-width: 1; stroke-dasharray: 3 4; }
svg .hands line { stroke: var(--steel); stroke-width: 3.6; stroke-linecap: round; } svg .hands circle { fill: var(--steel); } svg .hands.fine line { stroke-width: 2.4; }
svg .lt text { font: italic 500 21px var(--text); fill: var(--enamel); } svg .lt line { stroke: rgba(244, 237, 225, .55); stroke-width: .9; }
svg .lt-on { font: italic 600 22px var(--text); fill: var(--velvet-deep); }
svg .sc { font: 400 14px var(--text); fill: var(--enamel-2); } svg .sc2 { fill: var(--brass); font-style: italic; } svg .sc.big { font: 400 24px var(--disp); fill: var(--steel); }
svg .eng { font: 400 15px var(--disp); fill: var(--brass); } svg .tl { fill: none; stroke: var(--brass); stroke-width: 1.2; } svg .tl.on { fill: var(--brass); }
svg .tic { font: 400 54px var(--disp); fill: var(--enamel); letter-spacing: -.02em; }
svg .tic.go { animation: tic 1.1s var(--out) both; }
@keyframes tic { 0% { opacity: 0; transform: translateY(14px); } 18% { opacity: 1; transform: none; } 100% { opacity: .55; } }
svg .hit { fill: transparent; stroke: none; } .wh { cursor: grab; touch-action: pan-y; } svg.drag, svg.drag .wh { cursor: grabbing; }
.wh:hover .br { fill: rgba(227, 178, 76, .4); }
#f3-w, #f2-g, #f2-c, #f2-t { transition: none; } #f3-w { transition: transform .09s var(--out); }
svg .call line { stroke: rgba(244, 237, 225, .5); stroke-width: .9; } svg .call .cn { font: 400 25px var(--disp); fill: var(--brass); } svg .call .ct { font: italic 400 17px var(--text); fill: var(--enamel); transition: fill .25s var(--out); }
svg a.call:hover .ct, svg a.call:focus-visible .ct { fill: var(--brass); text-decoration: underline; } svg a { outline-offset: 4px; }
svg a.part .br, svg a.part .st { transition: fill .3s var(--out); } svg a.part:hover .br:not(.solid) { fill: rgba(227, 178, 76, .34); }

/* the tag: what goes wrong here, what puts it right, what it costs */
.lab { position: relative; z-index: 0; isolation: isolate; max-width: 760px; margin: clamp(48px, 6vw, 84px) 0 0 -18px; padding: 30px 40px 32px 96px; color: var(--tag-ink); font-size: 18px; line-height: 1.5; --r: -.7deg; transform: rotate(var(--r)); transform-origin: 44px 50%; }
.lab::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 44px 50%, rgba(42, 23, 16, 0) 0 9px, rgba(42, 23, 16, .2) 9.5px 17px, rgba(42, 23, 16, 0) 17.5px), linear-gradient(100deg, var(--tag) 0%, var(--tag) 62%, var(--tag-2) 100%); clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px), 0 34px); -webkit-mask: radial-gradient(circle at 44px 50%, transparent 0 8.5px, #000 9px); mask: radial-gradient(circle at 44px 50%, transparent 0 8.5px, #000 9px); }
.lab::before { content: ''; position: absolute; right: calc(100% - 44px); top: 50%; width: clamp(40px, 9vw, 150px); height: 1.5px; background: var(--enamel-2); transform: rotate(9deg); transform-origin: 100% 50%; }
.cap:nth-of-type(even) > .lab { --r: .55deg; } .cap:nth-of-type(even) > .lab::before { transform: rotate(-7deg); }
.lab-k { margin: 0 0 14px; font: 600 12.5px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--stamp); }
.lab h3 { margin: 22px 0 10px; font: 400 clamp(27px, 3vw, 36px)/1.04 var(--disp); letter-spacing: -.012em; text-wrap: balance; }
.lab p { margin: 0 0 .8em; } .lab-w { padding-bottom: 18px; border-bottom: 1.5px solid rgba(42, 23, 16, .7); } .lab-w b { font-weight: 700; }
.lab a { color: inherit; } .lab a:hover { color: var(--stamp); }
.lab-d { margin: 14px 0 20px; } .lab-d div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 14px; padding: 7px 0 6px; border-bottom: 1px solid rgba(42, 23, 16, .32); }
.lab-d dt { padding-top: 4px; font: 600 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--tag-ink-2); } .lab-d dd { margin: 0; }
.tbc { display: inline-block; padding: 2px 6px 0; border: 1.5px solid currentColor; border-radius: 2px; font: 600 11px/1.45 var(--text); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--stamp); transform: rotate(-1.6deg); white-space: nowrap; vertical-align: .08em; }
.ask { display: inline-block; padding: 0 0 1px; font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; transition: color .25s var(--out), padding .3s var(--out); }
.ask::after { content: ' \2192'; display: inline-block; margin-left: .3em; transition: transform .3s var(--out); } .ask:hover::after { transform: translateX(5px); }
.lab-2nd { margin-top: 28px; padding-top: 6px; border-top: 1.5px solid rgba(42, 23, 16, .7); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1060px; margin: clamp(28px, 4vw, 48px) 0 clamp(36px, 5vw, 60px) -18px; align-items: start; }
.pair .lab { margin: 0; padding: 28px 30px 28px 84px; } .pair .lab:last-child { --r: .6deg; margin-top: 26px; } .pair .lab::before { width: 46px; }

/* Table 1 */
.tab-w { max-width: 1060px; }
.tab { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.4; }
.tab caption { caption-side: top; text-align: left; margin-bottom: 22px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-style: italic; } .tab caption b { display: block; margin-bottom: 8px; font: 400 clamp(44px, 5vw, 66px)/1 var(--disp); font-style: normal; color: var(--brass); }
.tab th, .tab td { padding: 16px 18px 15px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.tab thead th { padding-bottom: 10px; border-top: 0; border-bottom: 1.5px solid var(--brass); font: 600 12.5px/1.2 var(--text); letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.tab tbody th { width: 25%; font: 400 22px/1.12 var(--disp); } .tab tbody td:nth-child(2) { color: var(--enamel-2); } .tab td:nth-child(3), .tab td:nth-child(4) { width: 15%; white-space: nowrap; } .tab td:last-child { padding-right: 0; text-align: right; }
.tab .ask { white-space: nowrap; } .tab .tl { display: none; } .tab .tbc, .cap > .col .tbc { color: var(--brass); }
.tab .tbc { display: block; width: max-content; margin-top: 5px; }
.rule { max-width: var(--col); margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--brass); font-style: italic; }

/* the request: the tag you fill in */
.tagform { position: relative; z-index: 0; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; max-width: 860px; margin: 36px 0 0 -18px; padding: 36px 44px 36px 104px; color: var(--tag-ink); font-size: 18px; --r: 0deg; }
.tagform::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 46px 96px, rgba(42, 23, 16, 0) 0 10px, rgba(42, 23, 16, .2) 10.5px 19px, rgba(42, 23, 16, 0) 19.5px), var(--tag); clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px); -webkit-mask: radial-gradient(circle at 46px 96px, transparent 0 9.5px, #000 10px); mask: radial-gradient(circle at 46px 96px, transparent 0 9.5px, #000 10px); }
.tagform::before { content: ''; position: absolute; right: calc(100% - 46px); top: 96px; width: clamp(40px, 9vw, 150px); height: 1.5px; background: var(--enamel-2); transform: rotate(14deg); transform-origin: 100% 50%; }
.tagform > * { grid-column: 1 / -1; min-width: 0; } .tagform .lab-k { margin: 0; }
.tagform .f { grid-column: span 1; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.tagform .f--what, .tagform .f--note, .tagform .f--job { grid-column: 1 / -1; }
.tagform label, .tagform legend { padding: 0; font: 600 12px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--tag-ink-2); }
.tagform input[type="text"], .tagform input[type="tel"], .tagform select, .tagform textarea { width: 100%; padding: 6px 0 7px; background: transparent; border: 0; border-bottom: 1.5px solid rgba(42, 23, 16, .7); border-radius: 0; color: var(--tag-ink); font: 500 20px/1.35 var(--text); transition: border-color .25s var(--out), background .25s var(--out); }
.tagform select { -webkit-appearance: none; appearance: none; padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232A1710' stroke-width='1.8'/%3E%3C/svg%3E") right 2px center no-repeat; text-overflow: ellipsis; cursor: pointer; }
.tagform textarea { resize: vertical; min-height: 132px; line-height: 32px; padding: 0; border-bottom: 0; background: repeating-linear-gradient(transparent 0 30.5px, rgba(42, 23, 16, .45) 30.5px 32px); }
.tagform ::placeholder { color: rgba(42, 23, 16, .62); font-weight: 400; font-style: italic; }
.tagform input:focus-visible, .tagform select:focus-visible, .tagform textarea:focus-visible { outline: none; border-bottom-color: var(--stamp); background-color: rgba(255, 255, 255, .28); }
.f--what { flex-direction: row !important; flex-wrap: wrap; gap: 10px 26px !important; align-items: center; } .f--what legend { float: left; margin-right: 26px; padding-top: 3px; }
.f--what label { display: inline-flex; align-items: center; gap: 9px; font: 500 20px/1.3 var(--text); letter-spacing: 0; text-transform: none; color: var(--tag-ink); cursor: pointer; }
.f--what input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--tag-ink); border-radius: 1px; background: transparent; cursor: pointer; transition: background .2s var(--out), box-shadow .2s var(--out); }
.f--what input:checked { background: var(--stamp); border-color: var(--stamp); box-shadow: inset 0 0 0 3px var(--tag); } .f--what input:focus-visible { outline: 2px solid var(--tag-ink); outline-offset: 3px; }
.f-err { margin: 0; font-weight: 600; color: var(--stamp); }
.tf-b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.tf-b button { padding: 15px 22px 14px; border-radius: 2px; border: 1.5px solid var(--tag-ink); font: 600 17px/1 var(--text); cursor: pointer; transition: background .25s var(--out), color .25s var(--out), transform .25s var(--out); }
.tf-b .b1 { background: var(--tag-ink); color: var(--tag); } .tf-b .b1:hover { background: var(--stamp); border-color: var(--stamp); } .tf-b .b2 { background: transparent; color: var(--tag-ink); } .tf-b .b2:hover { background: var(--tag-ink); color: var(--tag); }
.tf-b button:active { transform: translateY(2px); } .tf-b button:focus-visible { outline: 2px solid var(--tag-ink); outline-offset: 3px; }
.tagform .tf-n { background-color: var(--tag); } /* the paper under the privacy line, stated on a real element */
.tf-out { padding-top: 16px; border-top: 1.5px solid rgba(42, 23, 16, .7); } .tf-ok { font-weight: 600; margin-bottom: 10px; }
.tf-out pre { margin: 0 0 12px; padding: 14px 16px; background: rgba(255, 255, 255, .34); border-left: 3px solid var(--stamp); font: 400 17px/1.5 var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-l { margin: 0; } .tf-l a { color: var(--tag-ink); font-weight: 600; } .tf-l a:hover { color: var(--stamp); }

/* who writes */
.who { padding-bottom: clamp(72px, 9vw, 130px); }
.adr { margin: 30px 0; padding: 20px 0 18px; border-top: 1.5px solid var(--brass); border-bottom: 1px solid var(--line); font-style: normal; font-size: 21px; line-height: 1.55; }
.fine { font-size: 15px; color: var(--enamel-2); }

/* arrival */
@keyframes up { from { transform: translateY(108%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sway { 0% { transform: rotate(-5.5deg); opacity: 0; } 14% { opacity: 1; } 32% { transform: rotate(2.6deg); } 56% { transform: rotate(-1.9deg); } 78% { transform: rotate(.2deg); } 100% { transform: rotate(var(--r, -.7deg)); } }
.title .ln > span { animation: up 1.05s var(--out) both; } .title .ln:nth-child(2) > span { animation-delay: .09s; } .title .ln:nth-child(3) > span { animation-delay: .18s; }
.deck, .by, .open .col, .fig0 { animation: rise 1s var(--out) both; animation-delay: .32s; } .by { animation-delay: .4s; } .open .col { animation-delay: .48s; } .fig0 { animation-delay: .2s; }
.cap-h.wait { opacity: 0; transform: translateY(26px); } .cap-h.wait.in { opacity: 1; transform: none; transition: opacity .9s var(--out), transform .9s var(--out); }
.lab.wait, .tagform.wait { opacity: 0; } .lab.wait.in, .tagform.wait.in { opacity: 1; animation: sway 1.5s var(--out) both; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
html.static { scroll-behavior: auto; } html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
html.static .wait { opacity: 1 !important; transform: none; }

/* legal pages (the shell is privacy.html) */
.docbody .mast { padding-left: var(--pad); }
.doc { max-width: 820px; margin: 0 auto; padding: 44px 22px 96px; font-size: 17px; line-height: 1.62; overflow-wrap: break-word; }
.doc h1 { margin: 0 0 22px; font: 400 clamp(38px, 6vw, 64px)/1 var(--disp); letter-spacing: -.02em; }
.doc h2 { margin: 2em 0 .5em; font: 400 25px/1.15 var(--disp); color: var(--brass); }
.doc h3 { margin: 1.5em 0 .4em; font: 600 18px/1.3 var(--text); }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .9em; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); }
.doc th { font: 600 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); border-bottom: 1.5px solid var(--brass); }
.doc code { font-size: .88em; overflow-wrap: anywhere; color: var(--steel); }
.doc .ck-page .st { border-color: var(--brass); border-radius: 2px; } .doc .ck-page button { border-radius: 2px; border-color: var(--brass); color: var(--brass); } .doc .ck-page button:hover { background: var(--brass); color: var(--velvet-deep); }

/* smaller screens */
@media (max-width: 1020px) {
  .fig, .fig--tall { grid-template-columns: minmax(0, 1fr); grid-template-areas: "draw" "ctl" "side"; row-gap: 14px; max-width: 640px; }
  .fig--tall { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); grid-template-areas: "draw side" "ctl ctl"; grid-template-rows: auto auto; column-gap: 20px; }
  .tab thead { display: none; } .tab, .tab caption, .tab tbody, .tab tr, .tab th, .tab td { display: block; width: auto !important; }
  .tab tr { padding: 18px 0 16px; border-top: 1px solid var(--line); } .tab th, .tab td { padding: 0 0 6px; border: 0; white-space: normal !important; text-align: left !important; }
  .tab tbody th { font-size: 25px; margin-bottom: 4px; } .tab .tl { display: inline-block; min-width: 5.6em; font: 600 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); } .tab .tbc { display: inline-block; margin: 0 0 0 6px; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 36px; } .pair .lab:last-child { margin-top: 0; }
}
@media (max-width: 960px) {
  .open { display: flex; flex-direction: column; } .open-t { display: contents; }
  .title { order: 1; } .deck { order: 2; } .by { order: 3; margin-bottom: 20px; } .fig0 { order: 4; width: min(100%, 400px); margin: 0 0 34px; } .open .col { order: 5; }
  .fig0 figcaption { text-align: left; }
  .mast-note { display: none; } .lang { margin-left: auto; }
}
@media (max-width: 640px) {
  body { font-size: 18.5px; }
  .mast { gap: 14px; padding-top: 14px; padding-bottom: 12px; } .mast-brand img { height: 30px; }
  .lab, .tagform { margin-left: 0; padding: 86px 22px 28px; --r: -.5deg; transform-origin: 50% 40px; font-size: 17.5px; } .tagform { --r: 0deg; }
  .lab::after, .tagform::after { background: radial-gradient(circle at 50% 40px, rgba(42, 23, 16, 0) 0 9px, rgba(42, 23, 16, .2) 9.5px 17px, rgba(42, 23, 16, 0) 17.5px), linear-gradient(170deg, var(--tag) 0%, var(--tag) 62%, var(--tag-2) 100%); clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%, 0 30px); -webkit-mask: radial-gradient(circle at 50% 40px, transparent 0 8.5px, #000 9px); mask: radial-gradient(circle at 50% 40px, transparent 0 8.5px, #000 9px); }
  .tagform::after { background: radial-gradient(circle at 50% 40px, rgba(42, 23, 16, 0) 0 9px, rgba(42, 23, 16, .2) 9.5px 17px, rgba(42, 23, 16, 0) 17.5px), var(--tag); }
  .lab::before, .tagform::before { right: 50%; top: 40px; width: 1.5px; height: 64px; transform: translateY(-100%) rotate(8deg); transform-origin: 50% 100%; }
  .cap:nth-of-type(even) > .lab::before { transform: translateY(-100%) rotate(-7deg); }
  .pair .lab { padding: 86px 22px 28px; } .pair .lab::before { width: 1.5px; }
  .lab-d div { grid-template-columns: 5.4em minmax(0, 1fr); gap: 10px; }
  .tagform { grid-template-columns: minmax(0, 1fr); } .tagform .f { grid-column: 1 / -1; }
  .f--what legend { float: none; width: 100%; margin: 0 0 4px; } .tf-b button { width: 100%; }
  .ctl output { font-size: 28px; } .fig--tall { grid-template-columns: minmax(0, 1fr); grid-template-areas: "draw" "ctl" "side"; } .fig--tall .fig-draw { max-width: 250px; }
  .adr { font-size: 19px; }
}

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: laboratorio-orafo-e-di-orologeria-tonoli */
.ck { --ck-bottom: 12px; left: 26px; bottom: 24px; width: 410px; max-width: none; padding: 20px 24px 20px 72px; color: #2A1710; font-family: var(--text); background: radial-gradient(circle at 36px 50%, rgba(42, 23, 16, 0) 0 7.5px, rgba(42, 23, 16, .2) 8px 15px, rgba(42, 23, 16, 0) 15.5px), linear-gradient(100deg, #E9D6A6 0%, #E9D6A6 60%, #DCC68F 100%); clip-path: polygon(28px 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px), 0 28px); -webkit-mask: radial-gradient(circle at 36px 50%, transparent 0 7px, #000 7.5px); mask: radial-gradient(circle at 36px 50%, transparent 0 7px, #000 7.5px); transform: rotate(-1.3deg); transform-origin: 36px 50%; }
.ck .ck-k { margin-bottom: 6px; font: 600 11.5px/1.2 var(--text); letter-spacing: .16em; text-transform: uppercase; color: #A3152C; }
.ck .ck-t b { display: block; margin-bottom: 6px; font: 400 23px/1.05 var(--disp); letter-spacing: -.01em; }
.ck .ck-p { font-size: 14.5px; line-height: 1.42; padding-bottom: 12px; border-bottom: 1px solid rgba(42, 23, 16, .4); }
.ck .b { gap: 10px 14px; }
.ck button { padding: 10px 14px 9px; border-radius: 2px; border: 1.5px solid #2A1710; font: 600 14px/1 var(--text); transition: background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1); }
.ck .ok { background: #2A1710; color: #E9D6A6; } .ck .ok:hover { background: #A3152C; border-color: #A3152C; }
.ck .no { background: transparent; color: #2A1710; } .ck .no:hover { background: #2A1710; color: #E9D6A6; }
.ck .more { font: 600 14px/1 var(--text); color: #2A1710; text-decoration: underline; text-underline-offset: 3px; } .ck .more:hover { color: #A3152C; }
.ck button:focus-visible, .ck .more:focus-visible { outline: 2px solid #2A1710; outline-offset: 2px; }
@media (max-width: 600px) { .ck { padding: 16px 16px 16px 64px; } }
/* seller block: the colophon under the article, on the same velvet, under a brass rule */
footer.seller { padding: 26px var(--pad) 34px var(--left); border-top: 1.5px solid var(--brass); font-size: 14px; color: var(--enamel-2); }
footer.seller .seller-in { max-width: 1060px; margin: 0; } footer.seller b { opacity: 1; color: var(--brass); letter-spacing: .15em; } footer.seller strong { font: 400 19px/1.2 var(--disp); color: var(--enamel); } footer.seller a { color: var(--enamel); }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }