.size-layout{width:100%;min-width:0;max-width:1320px;margin:auto;padding:22px 40px 64px}.size-preview-note{font-size:12px;opacity:.6;margin:0 0 26px}.size-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin:0 0 38px}.size-heading h1{font:700 clamp(58px,6vw,84px)/1 var(--f-display);margin:0}.size-heading p{font-size:16px;line-height:1.7;margin:0 0 4px;opacity:.7}.guide-tabs{display:flex;gap:35px;border-bottom:1px solid var(--color-rule);margin-bottom:30px}.guide-tabs button{font:inherit;font-size:17px;background:none;color:inherit;border:0;border-bottom:3px solid transparent;padding:16px 4px;cursor:pointer;min-height:48px}.guide-tabs button[aria-pressed=true]{color:var(--color-primary);border-bottom-color:var(--color-primary)}.guide-tabs button:hover{color:var(--color-primary)}.chart-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.chart-heading h2{font-size:24px;font-weight:400;margin:0 0 6px}.chart-heading p{font-size:14px;margin:0;opacity:.65}.chart-scroll-controls{display:flex;align-items:center;gap:8px;direction:ltr}.chart-scroll-controls span{font-size:12px;opacity:.6;margin-right:6px;direction:rtl}.chart-scroll-controls button{height:42px;width:42px;border:1px solid var(--color-rule);background:none;border-radius:50%;font-size:22px;cursor:pointer;color:var(--color-primary)}.chart-scroll-controls button:disabled{opacity:.3;cursor:default}.size-table-scroll{overflow:auto;direction:ltr;border:1px solid var(--color-rule);border-radius:8px;scrollbar-color:var(--color-sand-300) transparent;scrollbar-width:thin}.size-table-scroll table{border-collapse:separate;border-spacing:0;white-space:nowrap;direction:ltr;width:100%;font-size:15px;font-variant-numeric:tabular-nums}.size-table-scroll th,.size-table-scroll td{text-align:center;padding:24px 15px;min-width:65px;font-weight:400;border-inline-end:1px solid color-mix(in srgb,var(--color-rule) 55%,transparent);border-bottom:1px solid var(--color-rule)}.size-table-scroll thead th{background:#e9e3d8;color:var(--color-foreground);font-size:17px}.size-table-scroll tbody tr:nth-child(even){background:color-mix(in srgb,var(--color-sand-300) 10%,var(--paper-background))}.size-table-scroll tr:last-child td,.size-table-scroll tr:last-child th{border-bottom:0}.size-table-scroll .row-label{direction:rtl;position:sticky;right:0;min-width:145px;text-align:right;background:var(--paper-background);border-left:1px solid var(--color-rule);border-right:0;padding-inline:20px;z-index:1}.size-table-scroll thead .row-label{background:#e9e3d8}.size-table-scroll tbody tr:nth-child(even) .row-label{background:#f1ede4}.size-table-scroll tbody tr:hover td{background:color-mix(in srgb,var(--color-primary) 6%,var(--paper-background))}.size-disclaimer{font-size:13px;line-height:1.8;opacity:.65;margin:17px 0 0}.measure-guide{margin-top:38px;padding:26px 30px;background:color-mix(in srgb,var(--color-sand-300) 14%,var(--paper-background));border-radius:8px}.measure-heading{display:flex;align-items:baseline;gap:25px;margin-bottom:22px}.measure-heading h2{font-size:22px;font-weight:400;margin:0}.measure-heading p{font-size:14px;opacity:.65;margin:0}.measure-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.measure-steps>div+div{border-inline-start:1px solid var(--color-rule);padding-inline-start:30px}.measure-steps h3{font-size:16px;font-weight:400;color:var(--color-primary);margin:0 0 8px}.measure-steps p,#foot-instructions p{font-size:14px;line-height:1.7;margin:0;max-width:650px;opacity:.8}.size-contact{display:flex;gap:20px;align-items:center;justify-content:center;padding-top:30px;font-size:14px}.size-contact p{margin:0}.size-contact a{color:var(--color-primary);text-underline-offset:5px}.size-layout [hidden]{display:none!important}.size-layout :focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:650px){.size-layout{padding:20px 20px 44px}.size-preview-note{font-size:10px;line-height:1.6;margin-bottom:24px}.size-heading{display:block;margin-bottom:22px}.size-heading h1{font-size:62px}.size-heading p{font-size:14px;margin-top:14px}.guide-tabs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-bottom:24px}.guide-tabs button{font-size:15px;padding:14px 2px}.chart-heading{gap:8px}.chart-heading h2{font-size:21px}.chart-heading p{font-size:12px}.chart-scroll-controls span{display:none}.chart-scroll-controls button{width:44px;height:44px}.size-table-scroll th,.size-table-scroll td{padding:22px 12px;min-width:72px;font-size:14px}.size-table-scroll thead th{font-size:15px}.size-table-scroll .row-label{min-width:105px;max-width:105px;padding:16px 12px;font-size:12px;white-space:normal}.size-disclaimer{font-size:12px}.measure-guide{padding:22px;margin-top:28px}.measure-heading{display:block;margin-bottom:20px}.measure-heading h2{font-size:21px}.measure-heading p{font-size:13px;margin-top:9px;line-height:1.7}.measure-steps{display:block}.measure-steps>div+div{border-inline-start:0;border-top:1px solid var(--color-rule);padding:15px 0 0;margin-top:15px}.measure-steps h3{font-size:15px;margin-bottom:4px}.measure-steps p{font-size:13px}.size-contact{flex-direction:column;gap:10px}}

/* English retains the composition with a readable Latin type scale. */
html[lang^="en"] .size-heading h1{font-size:clamp(42px,5vw,70px);line-height:1.12}html[lang^="en"] .size-heading{flex-wrap:wrap}html[lang^="en"] .guide-tabs button{white-space:normal}

/* Crosshair: size-guide-preview.js marks the hovered size column (.is-col); the row
   tint is the tr:hover rule above. Where they cross, the value itself turns blue. */
.size-table-scroll th,.size-table-scroll td{transition:background-color var(--motion-feedback) var(--ease-out),color var(--motion-feedback) var(--ease-out)}
.size-table-scroll td.is-col{background:color-mix(in srgb,var(--color-primary) 6%,var(--paper-background))}
.size-table-scroll thead th.is-col{background:color-mix(in srgb,var(--color-primary) 12%,#e9e3d8);color:var(--color-primary)}
.size-table-scroll tbody tr:hover td.is-col{background:color-mix(in srgb,var(--color-primary) 14%,var(--paper-background));color:var(--color-primary)}
.size-table-scroll tbody tr:hover .row-label{color:var(--color-primary)}
@media(prefers-reduced-motion:reduce){.size-table-scroll th,.size-table-scroll td{transition:none}}

html[lang^="en"] .size-table-scroll .row-label{direction:ltr;left:0;right:auto;text-align:left;border-right:1px solid var(--color-rule);border-left:0}html[lang^="en"] .chart-scroll-controls span{direction:ltr}