/* OTIOLA foundations — canonical visual roles, loaded after layout styles.
   Keep responsive composition in styles.css; resolve typography/state here. */
:root{
  --color-ink:#1d1d1d;
  --color-muted:#65665c;
  --color-surface:#fff;
  --color-warm:#f8f5f0;
  --color-control-surface:#f2f2ef;
  --color-deep:#463a2d;
  --color-brown:#604f3d;
  --color-gold:#9e9268;
  --color-highlight:#edd7b4;
  --color-line:#ded8ce;
  --color-line-inverse:rgb(255 255 255 / 24%);
  --color-inverse:#fff;
  --color-inverse-muted:#c5c5c5;
  --color-hover:#e4dece;
  --color-error:#a43c30;
  --font-heading:'Clenyra Sans',Arimo,Arial,sans-serif;
  --font-body:Arimo,Arial,sans-serif;
  --font-accent:'Rhymes Display',Georgia,serif;
  --weight-heading:500;
  --weight-body:400;
  --weight-navigation:700;
  --type-display:clamp(40px,2.917vw,56px);
  --type-section:clamp(36px,2.865vw,55px);
  --type-section-compact:clamp(32px,2.292vw,44px);
  --type-home-section:clamp(30px,2.083vw,40px);
  --type-pdp-section:clamp(28px,1.875vw,36px);
  --type-statement:clamp(26px,1.875vw,36px);
  --type-statement-long:var(--type-statement);
  --type-product:24px;
  --type-body:18px;
  --type-small:14px;
  --type-caption:18px;
  --type-overline:14px;
  --type-service:16px;
  --type-price:18px;
  --type-navigation:15px;
  --type-action:16px;
  --type-action-compact:14px;
  --leading-display:1.1;
  --leading-heading:1.2;
  --leading-statement:1.35;
  --leading-body:1.6;
  --leading-small:1.5;
  --leading-action:20px;
  --control-height:52px;
  --control-height-compact:44px;
  --control-padding-block:14px;
  --control-padding-inline:24px;
  --icon-size:24px;
  --icon-feature-size:28px;
  --icon-target:44px;
  --icon-stroke:1.5px;
  --line-width:1px;
  --rail-height:3px;
  --radius-pill:999px;
  --radius-circle:50%;
  --shadow-control:0 2px 8px rgb(45 35 24 / 15%);
  --state-duration:180ms;
  --text-primary:var(--color-ink);
  --text-secondary:var(--color-muted);
  --action-bg:var(--color-ink);
  --action-text:var(--color-inverse);
  --action-hover:var(--color-brown);
  --ink:var(--color-ink);
  --cream:var(--color-warm);
  --muted:var(--color-muted);
  --gold:var(--color-gold);
}
@media(max-width:1350px) and (min-width:761px){:root{--type-navigation:14px;--type-caption:16px}}
@media(max-width:1000px) and (min-width:761px){:root{--type-navigation:12px}}
@media(max-width:760px){
  :root{
    --type-display:clamp(32px,9.2vw,36px);
    --type-section:clamp(28px,8.2vw,32px);
    --type-section-compact:clamp(26px,7.2vw,28px);
    --type-home-section:clamp(24px,6.667vw,26px);
    --type-pdp-section:clamp(24px,6.667vw,26px);
    --type-statement:clamp(20px,5.13vw,22px);
    --type-statement-long:18px;
    --type-product:18px;
    --type-body:16px;
    --type-caption:14px;
    --type-overline:12px;
    --type-service:14px;
    --type-price:16px;
    --type-navigation:15px;
    --type-action:15px;
    --control-height:48px;
    --control-padding-block:12px;
    --icon-size:22px;
    --icon-feature-size:24px;
  }
}

/* Theme roles follow the surface instead of maintaining per-section grays. */
body,dialog{font-family:var(--font-body);font-weight:var(--weight-body);color:var(--text-primary)}
.star-products,.site-footer,.about-scroll[data-active-scene="1"]{
  --text-primary:var(--color-inverse);
  --text-secondary:var(--color-inverse-muted);
  --action-bg:var(--color-surface);
  --action-text:var(--color-ink);
  --action-hover:var(--color-hover);
  color:var(--text-primary);
}
.star-products,.about-scroll[data-active-scene="1"]{background-color:var(--color-deep)}
.site-footer,.announcement{background-color:var(--color-ink);color:var(--color-inverse)}
.scenarios,.compression-product{background-color:var(--color-warm)}
mark{background-image:linear-gradient(transparent 57%,var(--color-highlight) 57%,var(--color-highlight) 92%,transparent 92%);color:inherit}

/* Typography roles: a statement is not a section heading or a product title. */
h1,h2,h3{font-family:var(--font-heading);font-weight:var(--weight-heading);color:inherit}
.hero h1{font-size:var(--type-display);line-height:var(--leading-display);color:var(--text-primary)}
.section-heading h2,.compression-copy h2,.star-products .section-heading h2,.comparison .section-heading h2{font-size:var(--type-section);line-height:var(--leading-heading);font-weight:var(--weight-heading)}
.newsletter h2{font-size:var(--type-section-compact);line-height:var(--leading-heading)}
#pdp-benefits h2,#pdp-steps h2,#pdp-faq h2{font-size:var(--type-pdp-section);line-height:1.25}
#scenarios-title,#comparison-title,#star-title,#community-title{font-size:var(--type-home-section);line-height:1.25}
/* Brand page remains a local draft; retain its source while hiding entry points. */
.site-footer a[href="brand.html"],.pdp a[href="brand.html"],.about-scroll [data-action="story"]{display:none}
@media(max-width:760px){.scenario-slider{display:none}}
.about-statement h2{font-size:var(--type-statement);line-height:var(--leading-statement)}
.supporting,.hero .supporting,.star-products .section-heading .supporting,.compression-copy>p:last-child,.info-dialog>p{font:var(--weight-body) var(--type-body)/var(--leading-body) var(--font-body);color:var(--text-secondary)}
.overline,.hero .overline,.about-copy>.overline{font:var(--weight-body) var(--type-overline)/var(--leading-small) var(--font-body);color:var(--text-secondary)}
.intro p{font-family:var(--font-accent);font-style:italic;font-weight:100;line-height:1.45;color:var(--text-primary)}
.scenario h3{font:var(--weight-body) var(--type-caption)/1.4 var(--font-body);text-transform:none;color:var(--text-secondary)}
.compression-product h3,.shop-look .star-details h3,.product-dialog-copy h2,.cart-line h3{font:var(--weight-heading) var(--type-product)/1.25 var(--font-heading);color:var(--text-primary)}
.compression-product p,.shop-look .star-details p,#dialog-product-price{font:var(--weight-body) var(--type-price)/var(--leading-small) var(--font-body);font-variant-numeric:tabular-nums;color:var(--text-primary)}
.star-details del{color:var(--text-secondary)}
.newsletter>p,.newsletter #newsletter-status,.services p,.footer-links a,.footer-bottom small,.cart-notice,.cart-line p,.wishlist-action,.continue-shopping{font:var(--weight-body) var(--type-small)/var(--leading-small) var(--font-body);color:var(--text-secondary)}
.site-header nav{font:var(--weight-navigation) var(--type-navigation)/1.2 var(--font-body)}
.services h3{font:var(--weight-heading) var(--type-service)/1.4 var(--font-heading);color:var(--text-primary);text-transform:none}
.services article>img{width:var(--icon-feature-size);height:var(--icon-feature-size);margin-bottom:12px}
.services p{margin-top:8px}
.cart-header h2,.info-dialog h2{font:var(--weight-heading) var(--type-section-compact)/var(--leading-heading) var(--font-heading)}
.cart-header span,.product-dialog-copy fieldset legend{font:var(--weight-body) var(--type-small)/var(--leading-small) var(--font-body)}
.footer-links summary{font:var(--weight-navigation) var(--type-action)/var(--leading-small) var(--font-body)}

/* Standard and compact actions; colors are surface-aware. */
.pill,.hero .pill,.about-statement .pill,.about-scroll[data-active-scene="1"] .about-statement .pill,.compression-product .pill,.shop-look .star-details .pill,.newsletter .pill,.product-dialog-copy>.pill,.cart-footer .pill,.info-dialog .pill{
  font:var(--weight-body) var(--type-action)/var(--leading-action) var(--font-body);
  letter-spacing:0;text-transform:none;border:var(--line-width) solid transparent;border-radius:var(--radius-pill);
  min-height:var(--control-height);padding:var(--control-padding-block) var(--control-padding-inline);
  color:var(--action-text);background:var(--action-bg);
  transition:color var(--state-duration),background-color var(--state-duration),border-color var(--state-duration);
}
.pill.light{color:var(--color-ink);background:var(--color-surface)}
.pill:hover,.pill.light:hover,.about-scroll[data-active-scene="1"] .about-statement .pill:hover{color:var(--action-text);background:var(--action-hover)}
.pill.light:hover{color:var(--color-ink);background:var(--color-hover)}
.pill:active{filter:brightness(.94)}
.pill:disabled{opacity:.4;cursor:not-allowed;filter:none}
.pill.compact,.compression-product .pill,.about-statement .pill{min-height:var(--control-height-compact);font-size:var(--type-action-compact);padding:10px 20px}
.newsletter input,.info-dialog form input{
  font:var(--weight-body) var(--type-action)/24px var(--font-body);height:var(--control-height);min-height:var(--control-height);
  padding:10px 22px;border:var(--line-width) solid var(--color-line);border-radius:var(--radius-pill);color:var(--text-primary);background:transparent;
}
.newsletter input::placeholder,.info-dialog form input::placeholder{color:var(--text-secondary);opacity:1}
.newsletter input:focus,.info-dialog form input:focus{border-color:var(--color-brown)}
.newsletter input:user-invalid,.info-dialog form input:user-invalid{border-color:var(--color-error)}
.newsletter .pill{height:var(--control-height);min-height:var(--control-height)}
.size-options button,.cart-quantity button{font:var(--weight-body) var(--type-small)/20px var(--font-body);border:var(--line-width) solid var(--color-line);min-height:var(--icon-target)}
.size-options button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-inverse);border-color:var(--color-ink)}
.size-options button:hover:not([aria-pressed="true"]),.cart-quantity button:hover:not(:disabled){background:var(--color-warm);border-color:var(--color-brown)}
.cart-quantity .remove-line{border:0;color:var(--text-secondary);font-size:var(--type-small)}
.cart-header,.cart-line,.cart-footer{border-color:var(--color-line)}
.cart-line>a{display:block;min-width:0;align-self:start;overflow:hidden;height:110px}
.cart-line>a>img{width:84px;height:110px;object-fit:contain;background:var(--color-warm)}
.cart-line.is-stripe>a>img{position:relative;left:-70%;width:240%;max-width:none;object-fit:cover}
.cart-shipping{margin-bottom:24px}.cart-shipping p{font:var(--type-small)/1.5 var(--font-body);color:var(--text-secondary)}
.cart-shipping progress{appearance:none;width:100%;height:var(--rail-height);margin-top:12px;border:0;background:var(--color-line);accent-color:var(--color-gold)}
.cart-shipping progress::-webkit-progress-bar{background:var(--color-line)}.cart-shipping progress::-webkit-progress-value{background:var(--color-gold)}
.site-header,.site-header #primary-nav{border-color:var(--color-line)}
.footer-links details{border-color:var(--color-line-inverse)}

/* One icon weight; the hit target is deliberately larger than its drawing. */
.icon-button{width:var(--icon-target);height:var(--icon-target);padding:calc((var(--icon-target) - var(--icon-size)) / 2);border-radius:var(--radius-circle)}
.icon-button img{width:var(--icon-size);height:var(--icon-size);object-fit:contain}
.dialog-close{font:var(--weight-body) 24px/1 var(--font-body)}
.icon-button:not(:disabled):hover{background:var(--color-warm)}
.menu-lines,.menu-lines:before,.menu-lines:after{height:var(--icon-stroke);border-radius:1px;background:var(--color-ink)}
.look-hotspot{width:var(--icon-target);height:var(--icon-target)}
.look-hotspot span{border-color:rgb(96 79 61 / 35%);box-shadow:var(--shadow-control)}
.look-hotspot span:before,.look-hotspot span:after{height:var(--icon-stroke);background:var(--color-brown)}
.look-hotspot.is-selected span{border-color:var(--color-brown)}
.comparison-divider{width:2px;background:var(--color-surface)}
.comparison-divider span{width:var(--icon-target);height:var(--icon-target);background:var(--color-brown);color:var(--color-inverse);box-shadow:var(--shadow-control);font:var(--weight-body) 18px/1 var(--font-body)}
.about-progress{height:var(--rail-height);border-radius:var(--radius-pill);background:var(--color-line);overflow:hidden}
.about-progress span{background:var(--color-gold)}
.about-scroll[data-active-scene="1"] .about-progress{background:var(--color-line-inverse)}
.about-scroll[data-active-scene="1"] .about-progress span{background:var(--color-highlight)}
.about-controls button{border-color:var(--color-line);font:var(--weight-body) var(--type-small)/20px var(--font-body)}
.scenario-slider input::-webkit-slider-runnable-track{height:var(--rail-height);background:var(--color-line)}
.scenario-slider input::-moz-range-track{height:var(--rail-height);background:var(--color-line)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-brown);outline-offset:4px}
.star-products button:focus-visible,.site-footer a:focus-visible,.site-footer summary:focus-visible,.about-scroll[data-active-scene="1"] button:focus-visible{outline-color:var(--color-highlight)}
.comparison-view:focus-within{outline:none}

@media(max-width:1350px) and (min-width:761px){.hero .supporting{font-size:16px}}
@media(max-width:760px){
  .shop-look .section-heading h2{font-size:var(--type-section-compact)}
  .shop-look .section-heading .supporting{font-size:var(--type-small);line-height:var(--leading-small)}
  .about-scroll[data-active-scene="1"] .about-statement h2{font-size:var(--type-statement-long);line-height:var(--leading-statement)}
  .shop-look .star-details h3{font-size:16px;line-height:1.25}
  .shop-look .star-details p{font-size:var(--type-small)}
  .shop-look .star-details .pill{min-height:var(--control-height-compact);font-size:var(--type-action-compact);padding:10px 20px}
  .compression-product h3{font-size:var(--type-product)}
  .compression-product p{font-size:var(--type-small)}
  .services h3{min-height:40px;display:grid;place-content:start center}
  .services p{font-size:var(--type-small);line-height:var(--leading-small)}
  .services{align-items:start;row-gap:28px}
  .scenario:focus-visible{outline-offset:-2px}
}
@media(prefers-reduced-motion:reduce){.pill{transition:none}}

/* Shared floating utilities: compact targets, V2 colors, and mobile purchase-bar clearance. */
.floating-tools{position:fixed;right:24px;bottom:var(--floating-bottom,24px);z-index:40;display:flex;flex-direction:column;gap:10px}
.floating-tools button{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:10px;border:1px solid var(--color-line);border-radius:50%;background:var(--color-surface);color:var(--color-ink);box-shadow:0 3px 12px rgb(29 29 29 / 8%);transition:background 180ms ease,transform 180ms ease}
.floating-tools button[hidden],.floating-care[hidden]{display:none}
.floating-tools svg{width:22px;height:22px}
.floating-tools button>span{position:absolute;right:calc(100% + 10px);padding:7px 10px;border-radius:6px;background:var(--color-ink);color:var(--color-inverse);font:400 12px/1.4 var(--font-body);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 180ms ease}
.floating-tools button:hover{background:var(--color-warm);transform:translateY(-2px)}
.floating-tools button:hover>span,.floating-tools button:focus-visible>span{opacity:1;visibility:visible}
.floating-care{position:fixed;z-index:41;right:82px;bottom:var(--floating-bottom,24px);width:340px;max-height:calc(100dvh - var(--floating-bottom,24px) - var(--header,75px) - 24px);overflow:auto;padding:20px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-surface);color:var(--color-ink);box-shadow:0 8px 32px rgb(29 29 29 / 12%);font:400 14px/1.6 var(--font-body)}
.floating-care-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.floating-care-heading h2{font:500 22px/1.25 var(--font-heading)}
.floating-care-heading .icon-button{flex-shrink:0;font-size:24px}
.floating-care [data-care]>p{margin-bottom:12px}.floating-care details{border-top:1px solid var(--color-line)}
.floating-care summary{padding-block:14px;cursor:pointer}.floating-care details p{color:var(--color-muted);padding-bottom:14px}.floating-care a{display:inline-block;min-height:44px;text-decoration:underline;text-underline-offset:4px}.floating-care-notice{color:var(--color-muted)}
body.modal-open .floating-tools,body.modal-open .floating-care{visibility:hidden;pointer-events:none}
@media(max-width:760px){.floating-tools{right:12px;gap:8px}.floating-care{right:12px;bottom:calc(var(--floating-bottom,16px) + 156px);width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - var(--floating-bottom,16px) - 244px);padding:16px}.floating-tools button>span{display:none}}
@media(prefers-reduced-motion:reduce){.floating-tools button,.floating-tools button>span{transition:none}.floating-tools button:hover{transform:none}}