@font-face{font-family:"et-book";src:url("fonts/eb-garamond-ext.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap;unicode-range:U+0100-02FF,U+0300-036F,U+0370-03FF,U+0400-04FF,U+1E00-1EFF,U+1F00-1FFF,U+2070-209F}
@font-face{font-family:"et-book";src:url("fonts/eb-garamond-italic-ext.woff2") format("woff2");font-weight:normal;font-style:italic;font-display:swap;unicode-range:U+0100-02FF,U+0300-036F,U+0370-03FF,U+0400-04FF,U+1E00-1EFF,U+1F00-1FFF,U+2070-209F}
@font-face{font-family:"et-book";src:url("fonts/et-book-roman-old-style-figures.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"et-book";src:url("fonts/et-book-display-italic-old-style-figures.woff") format("woff");font-weight:normal;font-style:italic;font-display:swap}
:root{--ink:#111;--soft:#6b6b6b;--rule:#d9d4c7;--paper:#fffff8;--accent:#8a1c1c}
*{box-sizing:border-box}
html{font-size:15px}
body{margin:0 auto;max-width:1100px;padding:3rem 6% 4rem 10%;background:var(--paper);color:var(--ink);font-family:et-book,Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-size:1.4rem;line-height:1.55}
a{color:inherit;text-decoration:none;background:linear-gradient(var(--rule),var(--rule)) 0 100%/100% 1px no-repeat}
a:hover{color:var(--accent)}
.masthead{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.2rem}
.brand{font-size:2.2rem;font-style:italic;background:none}
.tag,.sc{font-variant:small-caps;letter-spacing:.06em;color:var(--soft);font-size:1.1rem}
h1{font-weight:normal;font-size:3.6rem;line-height:1.1;margin:0 0 .2rem}
h2{font-weight:normal;font-style:italic;font-size:1.6rem;margin:3rem 0 1rem;color:var(--soft)}
.lede{width:55%;margin:.4rem 0 1rem}
.muted{color:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem 1.2rem;margin:2.4rem 0 0}
.grid a{background:none;display:block}
.grid svg{width:100%;height:auto;display:block}
.grid .cap{font-size:1.05rem;line-height:1.3;margin-top:.4rem}
.grid .cap b{font-weight:normal;font-size:.95rem;display:block;margin-top:.15rem}
.grid .cap i{font-size:1.25rem}
.grid .cap span{display:block;color:var(--soft)}
.product{display:grid;grid-template-columns:minmax(0,62%) minmax(0,1fr);column-gap:5%;align-items:start;margin-top:1.2rem}
.product svg{width:100%;height:auto;display:block}
.colorway{margin:0 0 .4rem;font-size:1.1rem}
.colorway button{font:inherit;background:none;border:0;padding:0;margin-right:1rem;color:var(--soft);cursor:pointer}
.colorway button[aria-pressed=true]{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat}
.chain{list-style:none;padding:0 0 0 1rem;margin:0 0 1.4rem;border-left:1px solid var(--rule);font-size:1.15rem;line-height:1.35}
.chain li{margin:0 0 .45rem}
.chain .lang{display:block;font-variant:small-caps;letter-spacing:.04em;color:var(--soft);font-size:.95rem}
.chain .form{font-style:italic}
.buy{margin:1.4rem 0 .4rem}
.buy button{font:inherit;font-size:1.25rem;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 .1rem;color:var(--soft);cursor:not-allowed}
.note{font-size:1.05rem;color:var(--soft);margin:.3rem 0}
.myth{font-size:1.15rem;line-height:1.4;margin:0 0 1.2rem}
.myth p{margin:0 0 .9rem}
.myth s{color:var(--soft)}
footer{margin-top:5rem;width:55%;font-size:1rem;color:var(--soft)}
footer p{margin:.3rem 0}
footer .fmark{margin-top:1.2rem;padding-top:.6rem;border-top:1px solid var(--rule,#d8d3c4);width:12rem}footer .fmark a{color:var(--soft);text-decoration:none}
/* Two peer choices: same type, same space, one vertical hairline between them. No boxes. */
.paths{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:2.4rem 0 3rem;padding:2rem 0 2.2rem}
.paths .path{padding:0 3rem 0 0}
.paths .path+.path{border-left:1px solid var(--rule);padding:0 0 0 3rem}
.paths.solo{grid-template-columns:minmax(0,34rem);border-bottom:0}.paths.solo .path{padding:0}
.ph{font-style:normal;color:var(--ink);font-size:2.2rem;margin:0 0 .3rem;line-height:1.15}
.pl{margin:.2rem 0 1.1rem;color:var(--soft);font-size:1.15rem}
.lead{margin:0 0 .8rem}.lead .big{font-size:1.6rem;color:var(--ink)}
.act{display:inline-block;font:inherit;font-size:1.25rem;background:none;border:0;border-bottom:1px solid var(--ink);padding:0 0 .1rem;color:var(--ink);text-decoration:none}
button.act[disabled]{color:var(--soft);cursor:not-allowed}
.or{margin:1.6rem 0 .3rem;color:var(--soft);font-size:1.1rem}
.amts{border:0;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.4rem;font-size:1.4rem}
.amts legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.amts label{cursor:pointer;color:var(--soft)}
.amts input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.amts input[type=radio]:checked+span{color:var(--ink);border-bottom:1px solid var(--ink)}
.amts input[type=radio]:focus-visible+span{outline:1px dotted var(--soft);outline-offset:3px}
.amts .custom input{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);width:2.6em;padding:0}
.more{margin:1.2rem 0 0;font-size:1.05rem}
.fsup{color:var(--soft)}
@media (max-width:760px){body{padding:1.6rem 6%}.grid{grid-template-columns:repeat(2,1fr);gap:1.6rem .8rem}.product{display:block}.product>div+div{margin-top:1.6rem}.lede,footer{width:100%}.paths{grid-template-columns:1fr}.paths .path{padding:0}.paths .path+.path{border-left:0;border-top:1px solid var(--rule);padding:1.8rem 0 0;margin-top:1.8rem}h1{font-size:2.8rem}}