/* Imported WOMIO material pages, adapted to the HOME reader. */
.material-sheet{--ink:#3E3A36;--muted:#7C746C;--paper:#F9F7F1;--copper:#6B8E23;--line:rgba(62,58,54,.18);font-family:"Noto Sans TC","PingFang TC",system-ui,sans-serif;container-type:inline-size}
.material-sheet>a,.material-sheet>a>img{display:block;width:100%;height:100%}
.material-sheet>a>img{object-fit:contain}
.custom-page {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 8.5% 9%;
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(168,135,94,.12), transparent 34%),
    var(--paper);
}

.custom-page::after {
  content: attr(data-page);
  position: absolute;
  right: 7%; bottom: 3.8%;
  font: .52rem/1 Georgia, serif;
  letter-spacing: .18em;
  color: rgba(48,39,31,.48);
}

.cover-page { align-items: center; justify-content: flex-start; text-align: center; padding: 12% 10% 8%; }
.cover-page .cover-logo { width: 64%; max-height: 18%; object-fit: contain; margin: 19% 0 15%; }
.cover-page .eyebrow, .chapter-page .eyebrow, .brand-page .eyebrow { font: 500 .55rem/1.4 Georgia, serif; letter-spacing: .32em; color: var(--copper); }
.cover-page h1 { margin: 0 0 4%; font: 400 clamp(1.35rem, 2.6vw, 2.4rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: .1em; }
.cover-page p { margin: 0; font-size: clamp(.58rem, 1vw, .84rem); letter-spacing: .2em; color: var(--muted); }
.cover-page .year { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: auto; font: .58rem/1 Georgia, serif; letter-spacing: .25em; color: var(--muted); }
.cover-page .year::before, .cover-page .year::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* Full-bleed material cover follows the portfolio's photographic layout. */
.material-cover{display:block;padding:0;overflow:hidden;background:#665947;text-align:left;font-size:clamp(9px,2.3cqw,16px)}
.material-cover::after{display:none}
.material-cover-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:52% center}
.material-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,25,20,.67) 0%,transparent 37%,rgba(19,21,17,.22) 56%,rgba(15,18,14,.85) 100%)}
.material-cover-top{position:absolute;top:6.5%;left:7%;right:7%;display:flex;align-items:flex-start;justify-content:space-between;gap:2%;color:#f8f5ed}
.material-cover-top img{display:block;width:42%;height:auto;filter:brightness(0) invert(1)}
.material-cover-top span{font:500 .7em/1.4 Georgia,serif;letter-spacing:.2em;text-align:right}
.material-cover-bottom{position:absolute;left:8%;right:8%;bottom:7%;color:#fff}
.material-cover-rule{display:block;width:14%;height:2px;background:#afbd81;margin-bottom:6%}
.material-cover-bottom p{margin:0 0 5%;font:600 .85em/1.3 system-ui,sans-serif;letter-spacing:.23em}
.material-cover-bottom h1{margin:0 0 7%;font:400 3.6em/1.28 Georgia,"Noto Serif TC",serif;letter-spacing:.04em;text-shadow:0 1px 9px #0005}
.material-cover-bottom small{display:block;border-top:1px solid #ffffff8c;padding-top:4%;font:400 .8em/1.7 system-ui,sans-serif;letter-spacing:.12em}
.flip-leaf .material-cover .material-cover-photo{height:100%;object-fit:cover}
.flip-leaf .material-cover-top img{width:42%;height:auto}

.brand-page h2, .chapter-page h2, .standard-page h2 { margin: 16% 0 5%; font: 400 clamp(1.45rem, 3vw, 2.8rem)/1.15 Georgia, "Noto Serif TC", serif; }
.brand-page .lead { font-size: clamp(.72rem, 1.05vw, .98rem); line-height: 1.9; color: #665a50; }
.brand-principles { margin-top: auto; display: grid; gap: 7%; }
.principle { border-top: 1px solid var(--line); padding-top: 4%; display: grid; grid-template-columns: 2rem 1fr; gap: 4%; }
.principle b { font: 400 .68rem/1 Georgia, serif; color: var(--copper); }
.principle strong { display: block; margin-bottom: 1.5%; font-size: clamp(.65rem, 1vw, .9rem); letter-spacing: .08em; }
.principle span { display: block; font-size: clamp(.54rem, .82vw, .75rem); line-height: 1.7; color: var(--muted); }

.chapter-page { justify-content: center; }
.chapter-page .giant { position: absolute; top: 9%; right: 4%; font: 400 clamp(4rem, 10vw, 8rem)/.8 Georgia, serif; color: rgba(168,135,94,.09); letter-spacing: -.06em; }
.chapter-page h2 { margin: 4% 0; max-width: 80%; }
.chapter-page p { max-width: 75%; margin: 0; font-size: clamp(.62rem, .95vw, .86rem); line-height: 1.8; color: var(--muted); }
.chapter-page .chapter-line { width: 24%; height: 2px; margin-top: 10%; background: var(--copper); }

.photo-page { padding: 0; background: var(--paper); }
.photo-page img { width: 100%; height: 58%; object-fit: cover; }
.photo-page img.page-21-space { object-position: 65% center; }
.photo-page .photo-copy { flex: 1; padding: 8% 9%; }
.photo-page h2 { margin: 2% 0 5%; font: 400 clamp(1.2rem, 2.5vw, 2.2rem)/1.1 Georgia, serif; }
.photo-page p { margin: 0; max-width: 85%; font-size: clamp(.58rem, .9vw, .82rem); line-height: 1.8; color: var(--muted); }

.standard-page h2 { margin-top: 8%; }
.standard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; margin-top: 5%; }
.standard-card { border-top: 1px solid var(--line); padding-top: 8%; }
.standard-card strong { display: block; margin-bottom: 5%; font-size: clamp(.62rem, .95vw, .85rem); }
.standard-card p { margin: 0; font-size: clamp(.52rem, .8vw, .72rem); line-height: 1.75; color: var(--muted); }
.standard-note { margin-top: auto; padding: 5%; background: rgba(168,135,94,.09); font-size: clamp(.52rem, .8vw, .72rem); line-height: 1.75; color: #6d6054; }

.spec-art-page { padding: 0; background: #faf8f3; }
.spec-art-page::after { display: none; }
.spec-art-page > img { width: 100%; height: 100%; display: block; object-fit: contain; }

.material-proof-page {
  padding: 6.2% 7% 5.5%;
  background:
    radial-gradient(circle at 92% 8%, rgba(182,145,96,.14), transparent 25%),
    linear-gradient(150deg, rgba(255,255,255,.8), transparent 38%),
    #f8f5ee;
}
.material-proof-head { text-align: center; }
.material-proof-head > img { width: 26%; max-height: 6.2%; object-fit: contain; margin-bottom: 3.2%; }
.material-proof-head .eyebrow { display: block; font: 500 clamp(.38rem,.62vw,.58rem)/1.3 Georgia,serif; letter-spacing: .3em; color: var(--copper); }
.material-proof-head h2 { margin: 3.2% 0 4%; font: 400 clamp(1rem,2.05vw,1.9rem)/1.18 Georgia,"Noto Serif TC",serif; letter-spacing: .04em; }
.material-proof-visual {
  height: 22%;
  border-radius: 2px;
  background-image: linear-gradient(90deg, rgba(48,39,31,.03), transparent 24%, transparent 76%, rgba(48,39,31,.03)), url("./assets/material/page-26-material-hardware.png");
  background-size: 100% auto;
  background-position: center 39%;
  box-shadow: inset 0 0 0 1px rgba(75,57,41,.08);
}
.material-proof-metrics { display: grid; grid-template-columns: 1fr 1fr 1.15fr; margin: 4.2% 0 4%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.material-proof-metrics > div { min-width: 0; padding: 6% 5% 5%; text-align: center; }
.material-proof-metrics > div + div { border-left: 1px solid var(--line); }
.material-proof-metrics strong { display: block; font: 400 clamp(1.05rem,2.35vw,2rem)/1 Georgia,serif; color: #3c2e26; letter-spacing: .02em; }
.material-proof-metrics strong small { font-size: .44em; letter-spacing: .04em; }
.material-proof-metrics span { display: block; margin-top: 6%; font-size: clamp(.42rem,.68vw,.62rem); letter-spacing: .08em; color: var(--muted); }
.material-proof-metrics .load { background: #3b2d25; }
.material-proof-metrics .load strong { color: #f7f1e7; }
.material-proof-metrics .load span { color: rgba(255,255,255,.7); }
.material-proof-details { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; }
.material-proof-details section { min-width: 0; }
.material-proof-details section > span { display: block; color: var(--copper); font: 500 clamp(.36rem,.58vw,.52rem)/1 Georgia,serif; letter-spacing: .24em; }
.material-proof-details h3 { margin: 4% 0 4%; font-size: clamp(.56rem,.9vw,.8rem); font-weight: 500; letter-spacing: .06em; }
.material-proof-details p { margin: 0; color: var(--muted); font-size: clamp(.43rem,.66vw,.6rem); line-height: 1.65; }
.material-proof-warranty { display: flex; align-items: center; justify-content: space-between; gap: 4%; margin-top: auto; padding: 3.3% 4%; background: rgba(168,135,94,.1); border-left: 2px solid var(--copper); }
.material-proof-warranty b { font-size: clamp(.48rem,.76vw,.68rem); font-weight: 500; letter-spacing: .06em; }
.material-proof-warranty span { color: var(--muted); font-size: clamp(.38rem,.6vw,.54rem); }
.material-proof-note { margin: 2.8% 2% 0; color: #776b60; font-size: clamp(.34rem,.5vw,.46rem); line-height: 1.55; }
.material-proof-page::after { right: 7%; bottom: 2.3%; }

.closing-page { align-items: center; justify-content: center; text-align: center; }
.closing-page img { width: 62%; max-height: 20%; object-fit: contain; }
.closing-page h2 { margin: 12% 0 5%; font: 400 clamp(1.2rem, 2.5vw, 2.2rem)/1.2 Georgia, serif; letter-spacing: .08em; }
.closing-page p { margin: 0; font-size: clamp(.58rem, .9vw, .82rem); line-height: 1.8; color: var(--muted); }
.back-page { background: var(--ink); color: #f8f4ec; }
.back-page p { color: rgba(255,255,255,.62); }
.back-page img { filter: brightness(0) invert(1); }

.flip-leaf>.custom-page{width:100%;height:100%}
.zoom-stage .material-sheet{display:block;width:min(100%,680px);aspect-ratio:1123/1654;height:auto;margin:auto;background:#F9F7F1;overflow:hidden}
.zoom-stage .material-sheet .custom-page{height:100%}