/* Decision source: docs/ui/iphone-web-design.yaml. Content and controls are separate layers. */
:root {
  --canvas:#ffffff; --surface:#ffffff; --text:#161c28; --secondary:#566175;
  --separator:#dbe2ed; --accent:#145bc2; --discount:#b42335; --points:#16643d;
  --pressed:#e8f0fc; --control:#f4f7fc; --cover-placeholder:#f7f7f8; --cover-outline:#c2c7cf;
  --mobile-row-gap:.25rem; --card-action-gap:.125rem;
  --card-text-gap:.25rem; --line-card-title:1.4; --line-card-meta:1.45;
  --font-body:1rem; --font-small:.875rem; --font-heading:1.5rem; --line-body:1.65;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;
  --page-gutter:1rem; --content-max:82.5rem; --target:2.75rem;
  --radius-control:.625rem; --radius-search:.75rem; --radius-sheet:1.25rem; --radius-cover:.125rem;
  --shadow-sheet:0 -8px 32px rgb(0 0 0 / .10); --motion-fast:160ms;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP",sans-serif;
  font-size:16px; line-height:var(--line-body); color:var(--text); background:var(--canvas);
}
*{box-sizing:border-box}
body{margin:0}
a{color:var(--accent);text-underline-offset:4px}
button,input,select{font:inherit;color:inherit}
button,select,a{touch-action:manipulation}
button{cursor:pointer}
button,a,input,select,summary{scroll-margin-block:5rem 7rem}
button,select,input{min-height:var(--target)}
button{min-width:var(--target);border:0;border-radius:var(--radius-control);background:var(--control);padding:.5rem .875rem}
button:active,a:active{background:var(--pressed)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
main:focus{outline:none}
html{scroll-padding-block:5rem 7rem}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:var(--space-4);padding:.25rem max(var(--page-gutter),calc((100% - var(--content-max))/2));min-height:3.5rem;background:var(--surface);border-bottom:1px solid var(--separator)}
.brand{display:inline-flex;align-items:center;min-height:var(--target);color:var(--text);font-size:1.25rem;font-weight:750;text-decoration:none;white-space:nowrap}
header{flex-wrap:wrap}
header.expanded-header{position:relative}
.brand-lockup{display:flex;align-items:center;flex-wrap:wrap;flex:1 1 14rem;min-width:min(100%,14rem);gap:0 var(--space-2)}
.brand-lockup .brand{flex:none;gap:var(--space-2);max-width:100%;font-size:1.25rem;white-space:nowrap}
.brand-art{display:flex;align-items:center;gap:var(--space-2);max-width:100%;min-width:0}
.brand-art .brand{flex:0 0 auto;min-width:0}
.brand img,.brand .brand-wordmark{display:block;width:7.5rem;max-width:calc(100vw - var(--page-gutter) - var(--page-gutter) - var(--font-body) - var(--space-2));height:auto;object-fit:contain;flex-shrink:0}
.brand-art .brand-divider{flex-shrink:0}
.brand-name{color:var(--text);min-width:0;white-space:normal;overflow-wrap:anywhere}
.brand-divider{color:var(--secondary);font-size:var(--font-body)}
.brand-descriptor{flex:1 1 18rem;min-width:0;font-size:var(--font-body);line-height:var(--line-body);overflow-wrap:anywhere}
.brand-tagline{margin:0;font-size:var(--font-body);font-weight:400;line-height:var(--line-body);color:var(--secondary);flex:1 1 14rem;min-width:0;overflow-wrap:anywhere}
.primary-nav{position:fixed;inset:auto 0 0;display:flex;justify-content:space-around;gap:0;background:var(--surface);border-top:1px solid var(--separator);padding:.375rem var(--space-2) calc(.375rem + env(safe-area-inset-bottom));z-index:6}
.primary-nav a{display:flex;flex:1;align-items:center;justify-content:center;min-height:var(--target);min-width:var(--target);font-size:var(--font-body);text-decoration:none;color:var(--secondary);border-radius:var(--radius-control)}
.primary-nav a[aria-current=page]{font-weight:700;color:var(--accent);background:var(--control)}
@supports (backdrop-filter:blur(16px)) {
 .primary-nav{background:rgb(255 255 255 / .96);backdrop-filter:blur(16px)}
 @media(min-width:768px){header{background:rgb(255 255 255 / .96);backdrop-filter:blur(16px)}}
 dialog:modal{background:rgb(255 255 255 / .97);backdrop-filter:blur(16px)}
}
main{max-width:var(--content-max);margin:auto;padding:var(--space-4) var(--page-gutter) var(--space-8);min-height:70vh}
h1{font-size:var(--font-heading);line-height:1.65;margin:0 0 var(--space-3);overflow-wrap:anywhere}
h2{font-size:1.25rem;line-height:1.65}
h3{font-size:1rem;line-height:1.65}
p{overflow-wrap:anywhere}
.note,.metadata,.eyebrow,small{font-size:var(--font-small);line-height:1.65;color:var(--secondary)}
.eyebrow{margin:0 0 var(--space-1)}
.intro{margin:var(--space-3) 0 var(--space-6)}
.search-filter{max-width:35rem;min-width:0;margin-bottom:var(--space-3)}
.search-filter label{display:block;font-size:1rem;font-weight:600;margin-bottom:var(--space-2)}
.search-controls{display:flex;gap:var(--space-2);min-width:0}
.search-controls input{flex:1;min-width:0;max-width:100%;background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius-search);padding:.625rem var(--space-3)}
.sale-chips{display:flex;min-width:0;max-width:100%;overflow-x:auto;scroll-padding-inline:.375rem;overscroll-behavior-inline:contain;gap:var(--space-1);padding:.375rem;background:var(--control);border-radius:var(--radius-control);margin:0 0 var(--space-3)}
.sale-chips button{flex:1 0 auto;white-space:nowrap;min-width:var(--target);background:transparent;padding:.5rem .25rem;font-size:1rem;border-radius:.375rem}
.sale-chips button[aria-pressed=true]{background:var(--surface);font-weight:700;color:var(--accent)}
.result-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin:var(--space-3) 0 var(--space-2)}
.result-toolbar p{margin:0;font-size:1rem;color:var(--secondary)}
#open-filters{background:var(--surface);border:1px solid var(--separator)}
.filter-summary{font-size:var(--font-small);color:var(--secondary);margin:0 0 var(--space-3);overflow-wrap:anywhere}
.filter-summary:empty{display:none}
.filter-panel{margin:auto 0 0;position:fixed;inset:auto 0 0;max-width:none;width:100%;max-height:85vh;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;background:var(--surface);color:var(--text);padding:var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));box-shadow:var(--shadow-sheet)}
.filter-panel::backdrop{background:rgb(0 0 0 / .25)}
.filter-panel:modal{animation:sheet-in var(--motion-fast) ease-out}
.sheet-heading{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}
.sheet-heading h2{margin:0;font-size:1.25rem}
.filter-group{min-width:0;padding-block:var(--space-3);border-top:1px solid var(--separator)}
.filter-group>p{margin:0 0 var(--space-2);font-size:1rem;font-weight:600}
.filter-group .note{font-weight:400;font-size:var(--font-small);margin:var(--space-2) 0 0}
.category-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);min-width:0;max-width:100%;padding:3px}
.category-chips button{font-size:1rem;max-width:100%;background:var(--control)}
.category-chips button[aria-pressed=true]{background:var(--accent);color:var(--surface);font-weight:600}
#year{display:none}
select{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius-control);padding:.5rem .75rem;max-width:100%}
.sheet-done{display:block;width:100%;background:var(--accent);color:var(--surface);margin-top:var(--space-4);font-weight:600}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-3)}
.work-card{display:flex;flex-direction:column;min-width:0;align-self:start}
.cover-frame{position:relative;aspect-ratio:2/3;background:var(--cover-placeholder);border-radius:var(--radius-cover);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--space-2);color:var(--secondary);font-size:var(--font-small);overflow:hidden;flex-shrink:0}
.cover-placeholder{border:1px solid var(--separator)}
.cover-frame:not(.cover-placeholder){background:transparent}
.cover-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.cover-frame img[hidden]{display:none}
.book{width:2.5rem;height:3.5rem;border:1px solid var(--cover-outline);border-left:3px solid var(--cover-outline);border-radius:2px}
.work-card h2{font-size:1rem;line-height:var(--line-card-title);font-weight:650;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;margin:var(--space-2) 0 var(--space-1)}
.metadata{margin:0 0 var(--card-text-gap);overflow-wrap:anywhere}
.benefits{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-1);font-size:var(--font-small);min-width:0}
.benefits small{font-size:var(--font-small)}
.discount,.coupon{color:var(--discount);font-weight:700}
.points{color:var(--points);font-weight:700}
.observations{min-width:0}
.amazon-link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);min-width:var(--target);max-width:100%;padding:.5rem .625rem;color:var(--accent);background:var(--control);border-radius:var(--radius-control);font-size:1rem;text-decoration:none}
.work-card .amazon-link{align-self:stretch;margin-top:var(--card-text-gap)}
.work-card .benefits{align-items:stretch}
.detail-link{display:flex;align-items:center;justify-content:center;min-height:var(--target);min-width:var(--target);margin-top:var(--space-1);font-size:1rem;text-decoration:none}
.back-link{display:inline-flex;align-items:center;min-height:var(--target);padding:var(--space-2) 0;margin-bottom:var(--space-4);font-size:1rem}
.detail-heading{display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--space-8)}
.detail-heading .cover-frame{width:10.5rem;max-width:100%;align-self:center}
.series-info{min-width:0}
.series-info>p{margin:0 0 var(--space-3)}
.series-info h1{font-size:1.5rem}
.summary-benefits .benefits{font-size:1rem;gap:var(--space-2)}
.summary-benefits .discount,.summary-benefits .points,.summary-benefits .coupon{font-size:1.125rem}
.summary-benefits .amazon-link{margin-top:var(--space-2);align-self:start}
.detail-heading+h2{margin:0 0 var(--space-2)}
.products{max-width:54rem}
.product{padding:var(--space-4) 0;border-top:1px solid var(--separator);overflow-wrap:anywhere}
.product h3{margin:0 0 var(--space-2)}
.product p{margin:var(--space-2) 0}
.product .benefits{font-size:1rem}
.product .amazon-link{margin-top:var(--space-2)}
.product .minor-benefit{color:var(--secondary);font-weight:400}
.product .observed-at{display:block;margin:var(--space-2) 0;font-size:var(--font-small)}
.coupon-benefit{min-width:0;max-width:100%;overflow-wrap:anywhere}
.coupon-terms{font-size:var(--font-small);color:var(--secondary);overflow-wrap:anywhere}
.coupon-terms summary{cursor:pointer;min-height:var(--target);padding:.625rem 0;text-decoration:underline;text-underline-offset:3px}
.coupon-terms p{margin:var(--space-2) 0}
.coupon-terms a{display:inline-flex;align-items:center;min-height:var(--target);min-width:var(--target);padding:.5rem 0}
.history-heading{display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.history-heading h1{margin-bottom:var(--space-1)}
.history-heading p{margin:0}
.history-unavailable{min-width:0;align-self:start;padding-block:var(--space-4);border-top:1px solid var(--separator);overflow-wrap:anywhere}
.history-unavailable h2{font-size:1rem;margin:0 0 var(--space-2)}
.history-unavailable p{margin:0}
.empty,.load-state{padding:var(--space-8) 0;font-size:1rem}
footer{border-top:1px solid var(--separator);padding:var(--space-6) var(--page-gutter) calc(6rem + env(safe-area-inset-bottom));max-width:var(--content-max);margin:auto;color:var(--secondary);font-size:var(--font-small)}
footer p{margin:0 0 var(--space-3)}
footer nav a{display:inline-flex;align-items:center;min-height:var(--target);padding:.5rem 0}
.skip-link{position:fixed;left:var(--space-4);top:-100px;z-index:20;background:var(--surface);padding:var(--space-3)}
.skip-link:focus{top:var(--space-2)}
.static-page{max-width:50rem}
.static-page h2{font-size:1.25rem;margin-top:var(--space-6)}
.static-page article p{line-height:1.75}
.blog-list{list-style:none;padding:0;display:grid;gap:var(--space-6)}
.blog-card{min-width:0;border-top:1px solid var(--separator);padding-top:var(--space-4)}
.blog-list h2{font-size:1.125rem;margin:0 0 var(--space-2);line-height:1.65}
.blog-list a{display:flex;align-items:center;min-height:var(--target);overflow-wrap:anywhere}
.blog-list p{font-size:var(--font-small);color:var(--secondary);margin:0;line-height:1.75}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:640px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--space-6)}.detail-heading{display:grid;grid-template-columns:12rem minmax(0,1fr);align-items:center}.detail-heading .cover-frame{width:12rem}.blog-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){
 :root{--page-gutter:1.5rem}
 header{min-height:4rem;flex-wrap:wrap}
 .primary-nav{position:static;flex-wrap:wrap;margin-left:auto;width:auto;border:0;background:none;backdrop-filter:none;padding:0;gap:var(--space-2)}
 .primary-nav a{flex:none;padding:.5rem 1rem}
 main{padding-top:var(--space-6)}
 .filters{display:flex;flex-wrap:wrap;gap:0 var(--space-6);align-items:end}
 .search-filter{margin:0;flex:1 1 20rem}
 .sale-chips{margin:0;align-self:end;flex:1 1 20rem}
 .filter-panel{position:static;display:block;width:100%;max-height:none;margin:var(--space-4) 0 0;padding:0;flex-basis:100%;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
 .filter-panel:not([open]){display:none}
 .sheet-heading,.sheet-done,#open-filters{display:none}
 .filter-panel .filter-groups{display:flex;flex-wrap:wrap;gap:0 var(--space-6)}
 #year{display:block;width:100%}.year-chips{display:none}
 .arrival-filter{flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
 .arrival-filter>p:first-child{margin:0}
 .arrival-filter .note{flex-basis:100%;margin:0}
 .result-toolbar{flex-basis:100%;order:3;justify-content:start;margin:var(--space-3) 0 0}
 .filter-summary{flex-basis:100%;order:4;margin-top:var(--space-2)}
 .filter-group{padding-block:var(--space-3)}
 .category-chips{padding-left:0}
 .intro{margin:var(--space-3) 0 var(--space-6)}
 footer{padding-bottom:var(--space-8)}
 .series-info h1{font-size:1.75rem}
}
@media(min-width:900px){.work-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1180px){.work-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1380px){.work-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-transparency:reduce){header,.primary-nav,dialog:modal{background:var(--surface);backdrop-filter:none}}
@media(forced-colors:active){button,.amazon-link,.sale-chips{border:1px solid ButtonText}.primary-nav a[aria-current=page],button[aria-pressed=true]{outline:2px solid Highlight}}
footer nav a{font-size:1rem}

.benefit-guide{font-size:var(--font-small);color:var(--secondary);margin:0 0 var(--space-3)}
.benefits{overflow-wrap:anywhere}

.display-modes{display:flex;gap:var(--space-1);background:var(--control);padding:var(--space-1);border-radius:var(--radius-control)}
.display-modes button{padding:.375rem .5rem;background:transparent}
.display-modes button[aria-pressed=true]{background:var(--surface);color:var(--accent);font-weight:700}
.cover-results{container-type:inline-size}
@media(max-width:639px){.work-grid[data-display-mode=fast]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container(width < 18rem){.work-grid[data-display-mode=fast]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:640px){.display-modes{display:none}}
main{container-type:inline-size}

/* Owner revision: brighter functional palette, priority filters and true fast anatomy. */
.brand{flex:1;min-width:0;white-space:normal}
.primary-nav a{flex-direction:column;gap:.125rem}
.primary-nav svg{width:1.25rem;height:1.25rem;flex-shrink:0}
.search-toggle{display:flex;align-items:center;justify-content:center;padding:.5rem;width:var(--target);flex-shrink:0;background:transparent;color:var(--accent)}
.search-toggle svg{width:1.375rem;height:1.375rem}
.search-toggle.is-active{background:var(--control)}
[hidden]{display:none!important}
.search-popover{position:fixed;inset:4rem 1rem auto;width:auto;max-width:35rem;margin:0 auto;max-height:80dvh;overflow:auto;padding:var(--space-4);border:0;border-radius:var(--radius-search);color:var(--text);background:var(--surface);font:inherit;box-shadow:var(--shadow-sheet)}
.search-popover::backdrop{background:rgb(22 28 40 / .18)}
.search-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.search-heading label{font-weight:600;min-width:0}
.search-heading button{flex-shrink:0}
.visible-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:var(--space-3);margin:var(--space-3) 0;min-width:0}
.visible-filters label{display:flex;flex-direction:column;gap:var(--space-1);font-size:1rem;min-width:0}
.visible-filters select,#year{display:block;width:100%;min-width:0}
.sale-chips button[aria-pressed=true]{background:var(--accent);color:var(--surface)}
.active-query:empty{display:none}
.active-query button{max-width:100%;text-align:left;overflow-wrap:anywhere;margin:var(--space-2) 0}
.display-modes{order:0;margin-right:auto}
.display-modes button{min-width:var(--target)}
#open-filters{order:1}
.result-toolbar p{order:2;flex-basis:100%}
.title-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:24px;min-width:var(--target);color:var(--text);font:inherit;text-decoration:none;overflow-wrap:anywhere;outline-offset:-2px}
.amazon-link{background:var(--accent);color:var(--surface)}
.amazon-link:active{color:var(--accent)}
.action-fast{display:none}
@media(max-width:767px){
 .work-grid[data-display-mode=fast] .metadata,.work-grid[data-display-mode=fast] .detail-link,.work-grid[data-display-mode=fast] .benefits>small,.work-grid[data-display-mode=fast] .action-full{display:none}
 .work-grid[data-display-mode=fast] .action-fast{display:block}
 .work-grid[data-display-mode=fast] .amazon-link{margin-top:var(--card-text-gap)}
}
@media(min-width:768px){
 .brand{flex:none}
 .primary-nav a{flex-direction:row;gap:var(--space-2)}
 .visible-filters{flex:1 1 24rem;margin:0}
 .result-toolbar p{flex-basis:auto}
 .filter-summary{margin-bottom:0}
}

.visible-filters select{padding-inline:.5rem}

/* Bounded refinement: compact functional controls. */
.visible-filters label{font-size:var(--font-small);font-weight:400;color:var(--secondary);gap:0}
.visible-filters select{font-size:var(--font-body);color:var(--text);padding-block:.375rem}
.ui-icon{width:1.25rem;height:1.25rem;flex-shrink:0;pointer-events:none}
#open-filters,.detail-link,.back-link,.volume-heading{display:flex;align-items:center;gap:var(--space-2)}
.back-link{display:inline-flex}
.display-modes button{display:flex;align-items:center;justify-content:center;width:var(--target);padding:var(--space-2)}
.display-modes .ui-icon{width:1.5rem;height:1.5rem}
.display-mode-help{font-size:var(--font-small);color:var(--secondary);margin:0 0 var(--space-3)}
@media(min-width:640px){.display-mode-help{display:none}}

.result-toolbar p{flex-basis:auto}
@media(min-width:768px){#open-filters{display:none}}

/* Card rows are compact; long-form content keeps --line-body. */
.work-card .metadata,.work-card .benefits{line-height:var(--line-card-meta)}
.work-card .benefits{gap:var(--card-text-gap)}
.work-card .benefits>small{line-height:inherit}

.work-card .detail-label-short{display:none}
/* Mobile actions stay44px; only within-card and between-row spacing is tightened. */
@media(max-width:767px){
 .work-grid{row-gap:var(--mobile-row-gap)}
 .work-card .detail-label-full{display:none}
 .work-card .detail-label-short{display:inline}
 .work-card .detail-link{margin-top:var(--card-action-gap);padding:.375rem .5rem;background:var(--control);color:var(--secondary);border-radius:var(--radius-control)}
 .work-card .detail-link:focus-visible{outline-offset:-3px}
 .work-card .detail-link:active{background:var(--pressed)}
}

/* Row-measured titles reserve only the wrapped text of that visual row. */
.work-card h2{display:block;overflow:visible}
.work-card .amazon-link{padding:.125rem .25rem;min-height:44px}