@charset "UTF-8";
@import url("_reset.css");
@import url("_fonts.css");
:root { --gutter: 8vw; --gutter-horizontal: var(--gutter); --gutter-vertical: calc(var(--gutter) * 0.666); --main-side-padding: 1rem; }
@media (min-width: 1200px) { :root { --gutter: 96px; } }

svg:not(.no-color-scheme) .st0, svg:not(.no-color-scheme) path:not([class]) { fill: var(--site-foreground); }
svg:not(.no-color-scheme) .fill { fill: var(--site-foreground) !important; }
svg:not(.no-color-scheme) .stroke { stroke: var(--site-foreground) !important; }

svg .stroke { fill: none !important; }
svg .stroke * { stroke: inherit !important; }
svg .fill { stroke: none !important; }
svg .fill * { fill: inherit !important; }

#color-scheme-buttons { margin-top: 0.1em; display: grid; width: 100%; font-size: 2em; font-weight: bold; grid-template-rows: 1.2em 1.2em; grid-auto-columns: 1fr; grid-auto-flow: column; grid-gap: 3px; }
#color-scheme-buttons > li { text-align: right; color: white; }
#color-scheme-buttons > li.dark { color: #1e2222; }
#color-scheme-buttons input[type=radio] { position: absolute; left: -200vw; }
#color-scheme-buttons input[type=radio] + label, #color-scheme-buttons dl.order-detail input[type=radio] + dt, dl.order-detail #color-scheme-buttons input[type=radio] + dt { display: block; width: 100%; height: 100%; box-sizing: border-box; padding: 0 4px; cursor: pointer; }
#color-scheme-buttons input[type=radio] + label span, #color-scheme-buttons dl.order-detail input[type=radio] + dt span, dl.order-detail #color-scheme-buttons input[type=radio] + dt span { font-size: 1px; color: transparent; position: absolute; left: -200vw; }
#color-scheme-buttons input[type=radio] + label::before, #color-scheme-buttons dl.order-detail input[type=radio] + dt::before, dl.order-detail #color-scheme-buttons input[type=radio] + dt::before { content: none; }
#color-scheme-buttons input[type=radio] + label::after, #color-scheme-buttons dl.order-detail input[type=radio] + dt::after, dl.order-detail #color-scheme-buttons input[type=radio] + dt::after { content: "a"; }

:root { --site-background: #353939; --site-foreground: white; --site-accent: #8E9090; --site-dark-line: #1e2222; --site-light-line: var(--site-accent); --site-button-color: var(--site-accent); }

.light-text:root, .header-popup-form { --site-foreground: white; --input-background: rgba(255, 255, 255, 0.22); }

.dark-text:root { --site-foreground: #1e2222; --input-background: rgba(0, 0, 0, 0.12); }

:root { --track-color: var(--site-accent); --gnubbel-color: var(--site-foreground); }

[contenteditable]:focus { outline: 1px dotted var(--site-accent); }

fieldset, .fieldset { display: block; margin: 0; padding: 0; border: 0 none transparent; }

.hide-disabled:disabled { display: none !important; }

/* default: fields are full width with labels above */
label, dl.order-detail dt { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 0.8rem; text-transform: uppercase; }
label a, dl.order-detail dt a { text-decoration: underline; }

label.required::after, dl.order-detail dt.required::after, .required label::after, .required dl.order-detail dt::after, dl.order-detail .required dt::after { content: " *"; }

input[type=text], input[type=search], input[type=email], input[type=number], input[type=password], input[type=tel], textarea { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; border: 0 none transparent; border-radius: 0; padding: 0.5em 0.25rem 0.3em; width: 100%; -webkit-appearance: none; background: var(--input-background); color: var(--site-foreground); vertical-align: middle; }
input[type=text]:disabled, input[type=search]:disabled, input[type=email]:disabled, input[type=number]:disabled, input[type=password]:disabled, input[type=tel]:disabled, textarea:disabled { opacity: 0.25; }
input[type=text]::placeholder, input[type=search]::placeholder, input[type=email]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=tel]::placeholder, textarea::placeholder { color: var(--site-foreground); }
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=tel]:focus, textarea:focus { outline: 1px dotted var(--site-accent); }

textarea { height: 8em; line-height: 1.4; }
textarea:disabled { opacity: 0.25; }
textarea:focus { outline: 1px dotted var(--site-accent); }

input[type=checkbox], input[type=radio] { /* don't hide it or it's not keyboard-accessible */ position: absolute; /* keep it on-screen but invisible so that form validation for required fields places the callout in the right place */ z-index: -1; opacity: 0; }
input[type=checkbox] + label, dl.order-detail input[type=checkbox] + dt, input[type=radio] + label, dl.order-detail input[type=radio] + dt { position: relative; display: inline-block; text-transform: none; margin: 0; font-size: 100%; }
input[type=checkbox] + label::before, dl.order-detail input[type=checkbox] + dt::before, input[type=radio] + label::before, dl.order-detail input[type=radio] + dt::before { display: inline; content: "☐"; padding-right: 0.25em; }
input[type=checkbox]:checked + label::before, dl.order-detail input[type=checkbox]:checked + dt::before, input[type=radio]:checked + label::before, dl.order-detail input[type=radio]:checked + dt::before { content: "☑"; }
input[type=checkbox]:disabled + label, dl.order-detail input[type=checkbox]:disabled + dt, input[type=radio]:disabled + label, dl.order-detail input[type=radio]:disabled + dt { opacity: 0.25; }
input[type=checkbox]:focus + label, dl.order-detail input[type=checkbox]:focus + dt, input[type=radio]:focus + label, dl.order-detail input[type=radio]:focus + dt { outline: 1px dotted var(--site-accent); }

form.submitted { /* need to recreate "invalid" styling for replaced elements */ }
form.submitted input[type=checkbox]:invalid + label, form.submitted dl.order-detail input[type=checkbox]:invalid + dt, dl.order-detail form.submitted input[type=checkbox]:invalid + dt, form.submitted input[type=radio] + label, form.submitted dl.order-detail input[type=radio] + dt, dl.order-detail form.submitted input[type=radio] + dt { color: #e51727; }

input[type=radio] + label::before, dl.order-detail input[type=radio] + dt::before { content: "○"; }
input[type=radio]:checked + label::before, dl.order-detail input[type=radio]:checked + dt::before { content: "◉"; }

button, input[type=submit], input[type=reset], a.button { -webkit-appearance: none; display: inline-block; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; padding: 0.5em 2em; letter-spacing: 0.0666em; background: var(--site-button-color); color: white; vertical-align: middle; transition: transform 0.04s; }
button:active, input[type=submit]:active, input[type=reset]:active, a.button:active { transform: scale(0.9); }
button.plain, input[type=submit].plain, input[type=reset].plain, a.button.plain { padding: 0; margin: 0; color: inherit; background: transparent; color: #e51727; cursor: pointer; text-transform: uppercase; font-weight: 200; }
button:disabled, input[type=submit]:disabled, input[type=reset]:disabled, a.button:disabled { opacity: 0.25; }
button:disabled:active, input[type=submit]:disabled:active, input[type=reset]:disabled:active, a.button:disabled:active { transform: none; }
button:focus, input[type=submit]:focus, input[type=reset]:focus, a.button:focus { outline: 1px dotted var(--site-accent); }

button.minimalist, input.minimalist, .button.minimalist { letter-spacing: 0.0333em; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 700; font-size: 0.9rem; background: transparent; color: #e51727; border: 1px solid #e51727; padding: 0.333em 1.333em; }

.dark-text select { background-image: url("images/select-arrow-black.svg"); }

select { display: inline-block; font-size: 13px; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; background-color: var(--input-background); color: var(--site-foreground); line-height: 1.3; padding: .4em 0.5em .5em 1.333em !important; max-width: 100%; box-sizing: border-box; border: 0 none var(--site-foreground); box-shadow: none; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; padding-left: 1.333em; background-image: url("images/select-arrow-white.svg"); background-repeat: no-repeat, repeat; background-position: left .45em top 50%; background-size: .6em auto; /* &:hover { 	border-color: #888; }
*/ /* &:focus { 	border-color: $positype-blue; 	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); 	box-shadow: 0 0 0 3px -moz-mac-focusring;
//     	color: #222;  	outline: none; }
*/ }
select option { -moz-appearance: auto; -webkit-appearance: auto; appearance: auto; background: initial; color: initial; padding: initial; margin: initial; }
select:empty { min-width: 1in; }
select::-ms-expand { display: none; }
select:disabled { opacity: 0.25; }
select:focus { outline: 1px dotted var(--site-accent); }

/* sliders */
[type='range'] { -webkit-appearance: none; margin: 8px 0; width: 2in; /* &:focus::-webkit-slider-runnable-track { background: var(--track-color); }  &:focus::-ms-fill-lower { background: var(--track-color); }  &:focus::-ms-fill-upper { background: var(--track-color); }
*/ }
[type='range']:focus { outline: 1px dotted var(--site-accent); }
[type='range']::-webkit-slider-runnable-track { cursor: pointer; height: 1px; transition: all 0.2s ease; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--track-color); border: 0; border-radius: 0; }
[type='range']::-webkit-slider-thumb { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--gnubbel-color); border: 0; border-radius: 12px; cursor: pointer; height: 12px; width: 12px; -webkit-appearance: none; margin-top: -6px; }
[type='range']::-moz-range-track { cursor: pointer; height: 1px; transition: all 0.2s ease; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--track-color); border: 0; border-radius: 0; }
[type='range']::-moz-range-thumb { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--gnubbel-color); border: 0; border-radius: 12px; cursor: pointer; height: 12px; width: 12px; }
[type='range']::-ms-track { cursor: pointer; height: 1px; transition: all 0.2s ease; background: transparent; border-color: transparent; border-width: 8px 0; color: transparent; }
[type='range']::-ms-fill-lower { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--track-color); border: 0; border-radius: 0; }
[type='range']::-ms-fill-upper { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--track-color); border: 0; border-radius: 0; }
[type='range']::-ms-thumb { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(13, 13, 13, 0.2); background: var(--gnubbel-color); border: 0; border-radius: 12px; cursor: pointer; height: 12px; width: 12px; margin-top: 0; }
[type='range']:disabled { opacity: 0.25; }

/* a universal form class for laying out ungainly sets of fields */
.big-ugly-form, .account-management-form { width: 100%; max-width: 6in; /* default: fields are full width with labels above */ }
.big-ugly-form select, .account-management-form select { width: 100%; }
.big-ugly-form h3, .account-management-form h3 { margin-top: 1em; }
.big-ugly-form label, .big-ugly-form dl.order-detail dt, dl.order-detail .big-ugly-form dt, .account-management-form label, .account-management-form dl.order-detail dt, dl.order-detail .account-management-form dt { display: block; margin-bottom: 0.25em; padding-left: calc(0.25rem + 1px); }
.big-ugly-form * + fieldset, .big-ugly-form * + .fieldset, .big-ugly-form * + label, .big-ugly-form dl.order-detail * + dt, dl.order-detail .big-ugly-form * + dt, .big-ugly-form button, .account-management-form * + fieldset, .account-management-form * + .fieldset, .account-management-form * + label, .account-management-form dl.order-detail * + dt, dl.order-detail .account-management-form * + dt, .account-management-form button { margin-top: 1em; }
.big-ugly-form label + fieldset, .big-ugly-form dl.order-detail dt + fieldset, dl.order-detail .big-ugly-form dt + fieldset, .big-ugly-form label + .fieldset, .big-ugly-form dl.order-detail dt + .fieldset, dl.order-detail .big-ugly-form dt + .fieldset, .account-management-form label + fieldset, .account-management-form dl.order-detail dt + fieldset, dl.order-detail .account-management-form dt + fieldset, .account-management-form label + .fieldset, .account-management-form dl.order-detail dt + .fieldset, dl.order-detail .account-management-form dt + .fieldset { margin-top: 0; }
.big-ugly-form .instructions, .big-ugly-form .inline-error, .account-management-form .instructions, .account-management-form .inline-error { font-size: 80%; margin-top: 0.25em; padding-left: calc(0.25rem + 1px); }
.big-ugly-form .instructions, .account-management-form .instructions { color: var(--site-accent); }
.big-ugly-form .inline-error, .account-management-form .inline-error { color: #e51727; font-weight: bold; }
.big-ugly-form .has-error label, .big-ugly-form .has-error dl.order-detail dt, dl.order-detail .big-ugly-form .has-error dt, .account-management-form .has-error label, .account-management-form .has-error dl.order-detail dt, dl.order-detail .account-management-form .has-error dt { color: #e51727; }
.big-ugly-form .has-error input, .account-management-form .has-error input { border-color: #C00; background-color: #FEE; }
.big-ugly-form a.cancel, .account-management-form a.cancel { padding-left: 2em; padding-right: 2em; }

.big-ugly-form + .big-ugly-form { margin-top: 1rem; }

@media (min-width: 23rem) { @supports (display: grid) { fieldset.two, .fieldset.two { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); grid-column-gap: 0.5em; }
    fieldset.two > *, .fieldset.two > * { width: auto; margin-top: 0; min-width: 0; }
    fieldset.two label, fieldset.two dl.order-detail dt, dl.order-detail fieldset.two dt, .fieldset.two label, .fieldset.two dl.order-detail dt, dl.order-detail .fieldset.two dt { grid-row: 1; }
    fieldset.two input, fieldset.two select, .fieldset.two input, .fieldset.two select { grid-row: 2; } } }
/* GENERAL */
::selection { background: var(--site-accent); color: white; }

html, body { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 15px; }

h1 { font-size: 48px; font-family: "Crave Display Web", "Bodoni", serif; font-weight: 600; margin-bottom: 0.2em; text-transform: capitalize; line-height: 1; }

h2 { font-size: 36px; }

h3 { font-size: 1.666rem; font-family: "Crave Display Web", "Bodoni", serif; font-weight: 400; }

h4 { font-size: 1rem; font-weight: bold; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

h5 { font-size: 0.8rem; font-weight: bold; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

p { font-family: inherit; max-width: 45em; line-height: 1.5; margin: 1em 0; }

ul { line-height: 1.5; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; }

ul.bullet > li { position: relative; margin-left: 1em; }
ul.bullet > li::before { position: absolute; left: -0.666em; content: "•"; }

article { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; }
article h3:not(:first-child), article h4:not(:first-child) { margin-top: 1em; }
article b, article strong { font-weight: 600; }
article a { text-decoration: underline; }
article.has-lede > p:first-of-type, article .has-lede > p:first-of-type { font-family: "Crave Text Web", Georgia, serif; font-size: 160%; font-weight: 400; max-width: 35em; }
article.has-lede > p:first-of-type b, article.has-lede > p:first-of-type strong, article .has-lede > p:first-of-type b, article .has-lede > p:first-of-type strong { font-weight: 400; }

p.lede { font-family: "Crave Text Web", Georgia, serif; font-size: 160%; font-weight: 400; max-width: 35em; }
p.lede b, p.lede strong { font-weight: 400; }

a { color: inherit; text-decoration: none; }

blockquote { margin-left: 1rem; border-left: 4px solid #CCC; padding-left: 1rem; font-family: "Crave Text Web", Georgia, serif; }
blockquote.pull { font-size: 200%; font-style: italic; }

hr { max-width: 45em; }
hr.red { border-top-color: #e51727; }
hr.dotted { border-top-style: dotted; }

.error, .errors, #cart-page main div.disabled::after, #cart-page main section.disabled::after, #cart-page main form.disabled::after, #cart-page #checkout #real-real-payment-form .card-errors { color: #e51727; font-size: 0.85em; text-transform: uppercase; font-weight: 500; }

.notice, .notices { color: #329999; font-size: 0.85em; text-transform: uppercase; font-weight: 500; }

address.street { display: block; }
address.street > * { display: block; }
address.street .city-state-zip > * { display: inline; }
address.street .city-state-zip .city + .state::before { content: ", "; }
address.street .city-state-zip * + .zip::before { content: " "; }

ul.social-media { display: block; }
ul.social-media > li { display: inline; }
ul.social-media figure { display: inline; vertical-align: middle; font-family: "Posifont Web"; font-size: 2rem; text-transform: uppercase; line-height: 0.8; position: relative; top: -0.1em; }

/* OVERALL LAYOUT */
/* mostly positioning stuff, deeper details will come below */
:root { --top-header-size: 16px; --top-header-height: 36px; }
@media (min-width: 1000px) { :root { --top-header-height: 64px; } }

html { background: var(--site-background); /* background-color: #B5B6B6; background-size: 130px; background-attachment: fixed;
*/ }

body { position: relative; max-width: 1200px; background: var(--site-background); color: var(--site-foreground); min-height: 100vh; margin: 0 auto; }
body > header { position: fixed; display: block; left: 0; top: 0; width: 100%; margin: 0; padding: 0; z-index: 2; }
body > header > .wrapper { display: block; position: relative; max-width: 1200px; margin: 0 auto; box-sizing: border-box; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: var(--top-header-size); box-sizing: border-box; height: var(--top-header-height); padding: 0.5em; }
body > header #header-logo { display: inline-block; box-sizing: border-box; height: var(--top-header-height); margin: -0.5em; padding: 0px; overflow: visible; }
body > header #header-logo span { height: 100%; }
body > header #header-logo img, body > header #header-logo svg { height: 100%; width: auto; background: transparent !important; }
body > header #secondary-menu { float: right; }
@media (min-width: 1000px) { body > header > .wrapper { padding: 1.5em 1em; height: 4em; }
  body > header #header-logo { height: 2.4em; margin: -.75em 0; padding: 0; } }
body > main { position: relative; margin-top: var(--top-header-height); padding: var(--gutter-vertical) var(--main-side-padding); z-index: 1; /* floating-sub-header */ /* to be safe, just display it statically and let Javascript float it */ }
body > main .bleed { box-sizing: border-box; margin-left: calc(-1 * (100vw - 100%) / 2); width: 100vw; }
@media (min-width: 1000px) { body > main { min-height: 520px; } }
body > main .bleed .bleed { margin-left: 0; width: 100%; }
body > main > header { position: fixed; z-index: 2; box-sizing: border-box; top: var(--top-header-height); left: 0; right: 0; padding-left: var(--main-side-padding); padding-right: var(--main-side-padding); height: auto; padding-top: var(--gutter-vertical); padding-bottom: calc(var(--gutter-vertical) / 4); transition-property: padding, font-size; transition-duration: 0.25s; background: var(--site-background); }
@media (min-width: 1200px) { body > main > header { left: calc((100vw - 1200px) / 2); right: calc((100vw - 1200px) / 2); } }
body > main > header + * { margin-top: calc(var(--gutter-vertical) * 0.75); }
body > main > header > * { display: inline-block; line-height: 1; margin: 0; padding: 0; }
body > main > header > * + * { margin-left: 1em; }
body > main > header h1 { font-size: 48px; font-weight: normal; }
body > main > header h2 { font-size: 24px; font-weight: normal; white-space: nowrap; }
body > main > header .subnav { float: right; padding-bottom: 0; border-bottom: none; margin-bottom: 0; margin-top: calc(48px * 0.75 - 1rem); }
body > main > header.scrolled { padding-top: calc(var(--gutter-vertical) / 4); padding-bottom: calc(var(--gutter-vertical) / 4); }
body > footer { position: relative; border-top: 1px solid var(--site-light-line); font-size: 0.83rem; }

/* HEADER */
body > header { background: var(--site-background); color: var(--site-foreground); }
body > header #secondary-menu { /* #cart-svg { .stroke { stroke: var(--site-foreground); } .fill { fill: var(--site-foreground); }
 #cart-svg-number { font-family: $ui-font; //fill: $positype-red; font-weight: bold; } }
*/ }
body > header #secondary-menu > a, body > header #secondary-menu > button { -webkit-appearance: none; display: inline-block; position: relative; top: -2px; margin: 0; margin-left: 1rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; height: 1em; position: relative; /* all header images fill the height of their container */ }
body > header #secondary-menu > a img, body > header #secondary-menu > button img { height: 100%; width: auto; }
body > header #secondary-menu > a svg, body > header #secondary-menu > button svg { height: 14px; width: auto; }
@media (min-width: 720px) { body > header #secondary-menu > a, body > header #secondary-menu > button { margin-left: 2rem; } }
body > header #secondary-menu #header-account-link { font-size: 0.9rem; vertical-align: middle; }
body > header #secondary-menu #header-user-icon, body > header #secondary-menu #header-gear-icon, body > header #secondary-menu #header-cart-icon { font-family: "Posifont Web"; font-size: 18px; }
body > header #secondary-menu #header-cart-icon { position: relative; }
body > header #secondary-menu #header-cart-icon .cart-count { position: absolute; display: block; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 10px; font-weight: 600; width: 100%; top: -5%; left: 5%; text-align: center; }
body > header #secondary-menu .header-popup-form { position: absolute; font-size: 0.9rem; right: 0; top: 0; margin: 0; padding: var(--top-header-height) 1rem 1rem; box-sizing: border-box; width: 320px; text-align: left; background: #1e2222 !important; color: white !important; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4); display: none; }
body > header #secondary-menu .header-popup-form, body > header #secondary-menu .header-popup-form label, body > header #secondary-menu .header-popup-form dl.order-detail dt, dl.order-detail body > header #secondary-menu .header-popup-form dt, body > header #secondary-menu .header-popup-form a { color: inherit; margin-left: 0; }
body > header #secondary-menu .header-popup-form p { text-align: left; margin: 0; }
body > header #secondary-menu .header-popup-form.show { display: block; }
body > header #secondary-menu .header-popup-form.show ~ * { color: white !important; }
body > header #secondary-menu #popup-login-form .remember-me { text-align: right; font-size: 90%; }
body > header #secondary-menu #popup-login-form .create-account, body > header #secondary-menu #popup-login-form .forgot-password { margin-top: 0.5em; font-size: 90%; }
body > header #secondary-menu #popup-login-form button { color: white; width: 100%; margin-bottom: 1rem; cursor: pointer; }
body > header #secondary-menu #popup-login-form input { border-color: white !important; color: white !important; }
body > header #secondary-menu #popup-login-form.show ~ #header-user-icon { color: #e51727 !important; }
body > header #secondary-menu #popup-settings-form > label, body > header #secondary-menu dl.order-detail #popup-settings-form > dt, dl.order-detail body > header #secondary-menu #popup-settings-form > dt { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; }
body > header #secondary-menu #popup-settings-form.show ~ #header-gear-icon { color: #e51727 !important; }
body > header #main-menu { position: fixed; box-sizing: border-box; right: 0; top: var(--top-header-height); bottom: 0; left: auto; height: auto; overflow: auto; padding: 1rem; width: 172px; background: var(--site-background); color: var(--site-foreground); text-align: right; line-height: 1.4; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; white-space: nowrap; font-size: 1.25rem; z-index: -1; opacity: 0; pointer-events: none; transition-property: opacity z-index; transition-duration: 0.2s; }
body > header #main-menu.show { z-index: 1000; opacity: 1; pointer-events: auto; }
@media (min-width: 1000px) { body > header #main-menu { z-index: 1 !important; opacity: 1 !important; transition-property: none !important; pointer-events: auto !important; } }
body > header #main-menu a { font: inherit; text-decoration: none; text-transform: capitalize; }
body > header #main-menu > li { display: block; margin-bottom: 0.6em; /* font-weight: 300; font-family: $body-font;
*/ }
body > header #main-menu > li > ul { display: none; font-size: 72%; line-height: 1; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; }
body > header #main-menu > li > ul > li { margin-top: 1em; }
body > header #main-menu > li > ul > li.current a { font-weight: 700; }
body > header #main-menu > li > ul a { text-transform: uppercase; text-decoration: none; font-weight: 400; }
body > header #main-menu > li.current > a { border-bottom: 1px solid var(--site-accent); padding-bottom: 2px; }
body > header #main-menu > li.current > ul { display: block; }
@media (min-width: 1000px) { body > header #main-menu { display: inline-block; left: auto; top: auto; bottom: auto; right: auto; width: auto; height: auto; padding: 0; overflow: visible; font-size: 14px; text-align: left; background: transparent; }
  body > header #main-menu > li { display: inline-block; position: relative; margin: 0; margin-left: 2em; }
  body > header #main-menu > li > ul { display: none !important; }
  body > header #main-menu > li:hover > ul { display: block !important; position: absolute; background: var(--site-background); padding: 1em; margin: 0 -1em; } }

nav.breadcrumbs li { list-style: none; display: inline; }
nav.breadcrumbs li::before { content: " ← "; }

body > footer { padding: var(--gutter); }
body > footer > * { display: inline-block; vertical-align: top; margin-right: 10vw; margin-bottom: 10vw; }
body > footer nav:nth-child(3) { margin-right: 0; }
@media (min-width: 24rem) { body > footer > *, body > footer nav:nth-child(3) { margin-right: 2.4rem; margin-bottom: 2.4rem; } }
@media (min-width: 1000px) { body > footer { padding: 2.4rem; padding-right: 0; } }
body > footer ul.social-media { margin-right: 0; width: 100%; text-align: center; }
body > footer ul.social-media > li { padding: 0 0.1em; }
body > footer h4, body > footer a { line-height: 1.4; text-transform: capitalize; }
body > footer h4 { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: bold; }
body > footer #footer-newsletter { width: calc(320px - 2rem); }
body > footer #footer-newsletter input, body > footer #footer-newsletter button, body > footer #footer-newsletter .button { box-sizing: border-box; font-size: 100%; border-width: 1px; border-style: solid; line-height: 1; }
body > footer #footer-newsletter button, body > footer #footer-newsletter .button { border-color: transparent; position: relative; }
body > footer #footer-newsletter input { width: calc(100% - 8em); }
body > footer #footer-newsletter button { width: 8em; padding-left: 0; padding-right: 0; background: var(--site-button-color); }
body > footer #footer-copyright { display: block; text-align: center; margin-right: 0; margin-bottom: 0; }
body > footer #footer-copyright img, body > footer #footer-copyright svg { display: block; width: 100%; max-width: 2.25in; height: auto; margin: 0 auto 1rem; }

@supports (display: grid) { body > footer { display: grid; grid-template-columns: auto auto auto; grid-gap: 10vw; }
  @media (min-width: 24rem) { body > footer { grid-gap: 2.4rem; } }
  body > footer > * { margin: 0 !important; align-self: start; }
  body > footer > nav { grid-column: auto; }
  body > footer > * { grid-column: 1/4; }
  body > footer ul.social-media { grid-row: 4; }
  body > footer #footer-newsletter { display: grid; width: 100%; max-width: 4in; grid-template-columns: 1fr 8em; margin: 0 auto !important; }
  body > footer #footer-newsletter > * { width: auto !important; justify-self: stretch; }
  body > footer #footer-newsletter input { grid-column: 1; }
  body > footer #footer-newsletter button { grid-column: 2; }
  @media (min-width: 720px) { body > footer { width: 100%; grid-template-columns: auto auto auto 1fr; grid-template-rows: auto auto auto; grid-row-gap: 0; }
    body > footer > nav { grid-row: 1/4; }
    body > footer #footer-newsletter { grid-column: 4; margin-left: 0 !important; }
    body > footer ul.social-media { grid-row: 3; grid-column: 4; text-align: left; }
    body > footer #footer-copyright { grid-column: 4; justify-self: start; padding: 1rem 0; }
    body > footer #footer-copyright img, body > footer #footer-copyright svg { margin: 0; } }
  @media (min-width: 1000px) { body > footer { width: auto; padding-right: 2.4rem; } }
  @media (min-width: 1020px) { body > footer { grid-template-columns: auto auto auto 2fr 1fr; grid-template-rows: auto auto auto; }
    body > footer #footer-newsletter { margin-left: auto !important; }
    body > footer #footer-copyright { grid-column: 5; grid-row: 1/3; padding-top: 0; }
    body > footer ul.social-media { grid-column: 5; grid-row: 3; } } }
@media (min-width: 1000px) { body #secondary-menu { left: 0; right: 0; width: auto; line-height: 1; height: auto; z-index: 1; }
  body #secondary-menu a.hamburger { display: none; } }
/* WIDGETS */
figure.slideshow { display: block; width: 100%; position: relative; /* fix safari flicker */ }
figure.slideshow div div { transform: translateZ(0); }
figure.slideshow.blur-sides .carousel > div { transition: none; }
figure.slideshow .carousel { position: relative; width: 100%; overflow: hidden; }
figure.slideshow .carousel > div { display: grid; grid-template-columns: repeat(100, max-content); transition: transform 0.25s; }
figure.slideshow .carousel figure { display: block; width: 100%; }
figure.slideshow .carousel figure img, figure.slideshow .carousel figure svg { display: block; width: 100%; height: auto; }
figure.slideshow .carousel figure figcaption { display: none; }
figure.slideshow a.previous, figure.slideshow a.next { font-family: "Posifont Web"; font-size: 0.666in; color: white; line-height: 1; position: absolute; box-sizing: content-box; top: calc(50% - 1em * 1.5); padding: 1em 0.1em; width: 1em; background: transparent; opacity: 0; transition: opacity 0.1s; transform: translateZ(0); }
figure.slideshow:hover a.previous, figure.slideshow:hover a.next { opacity: 0.75; }
figure.slideshow a.previous { left: 0; text-align: left; }
figure.slideshow a.previous::after { content: "T"; }
figure.slideshow a.next { right: 0; text-align: right; }
figure.slideshow a.next::after { content: "U"; }
figure.slideshow .toc { display: block; position: absolute; font-size: 8px; top: calc(50% - 1em); right: 0; }
figure.slideshow .toc > * { display: inline-block; width: 1em; height: 1em; margin-right: 1em; background-color: #CCC; }
figure.slideshow .toc > *.current { background-color: #e51727; }
figure.slideshow > figcaption { display: block; position: relative; margin: 1em; font-size: 1rem; min-height: 1em; }
figure.slideshow > figcaption .the-caption > * + * { margin-left: 0.5em !important; }
figure.slideshow > figcaption h4 { display: inline-block; padding: 0; margin: 0; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; }
figure.slideshow > figcaption h4 a { color: inherit; }
figure.slideshow > figcaption aside { display: inline-block; font-size: 0.9rem; }

/*
Positype Black: #1e1e1e
Positype Red: #ef4136
*/
.type-tester { display: block; font-size: 13px; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

.type-tester *:not(select), .type-tester-menu, .type-tester-menu * { position: relative; padding: 0; margin: 0; border: none; color: var(--site-foreground); }

/* popup menus */
/*  In the HTML this is: .type-tester [role=toolbar] [role=menu] But we use a class instead, since the menu has to be moved to the top level <body> to make sure it floats over everything else.
*/
.type-tester-menu { display: none; position: absolute; top: 100%; left: 0; background: #1e2222; padding: 0.5em 0; border-radius: 0.5em; text-align: left; z-index: 100; white-space: nowrap; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }

.type-tester-menu[aria-hidden=false] { display: block; }

.type-tester-menu li { list-style: none; line-height: 1.8em; padding: 0 1em; }

.type-tester-menu li li { padding-left: 0; padding-right: 0; }

.type-tester-menu [role=separator] { height: 0; margin-top: 0.5em; border-top: 1px dotted #999; padding-top: 0.5em; }

/* font styles */
.type-tester-menu.select-style input { /* don't hide it or it's not keyboard navigable/accessible */ position: absolute; left: -9999px; }

.type-tester-menu.select-style input:checked + label, .type-tester-menu.select-style dl.order-detail input:checked + dt, dl.order-detail .type-tester-menu.select-style input:checked + dt { font-weight: bold; }

/*
.type-tester .select-style select { font-famiy: $ui-font; color: $positype-blue; font-weight: bold;
}
*/
/* TOOLBAR */
.dark-text .type-tester select, .dark-text .type-tester .features-toggle button { background-image: url("images/select-arrow-black.svg") !important; }

.light-text .type-tester select, .light-text .type-tester .features-toggle button { background-image: url("images/select-arrow-white.svg") !important; }

.type-tester:hover [role=toolbar], .type-tester.focus [role=toolbar] { color: white; /* dropdowns */ }
.type-tester:hover [role=toolbar] input:focus, .type-tester:hover [role=toolbar] select:focus, .type-tester:hover [role=toolbar] input[type=radio]:focus + label, .type-tester:hover [role=toolbar] dl.order-detail input[type=radio]:focus + dt, dl.order-detail .type-tester:hover [role=toolbar] input[type=radio]:focus + dt, .type-tester:hover [role=toolbar] input[type=checkbox]:focus + label, .type-tester:hover [role=toolbar] dl.order-detail input[type=checkbox]:focus + dt, dl.order-detail .type-tester:hover [role=toolbar] input[type=checkbox]:focus + dt, .type-tester:hover [role=toolbar] button:focus, .type-tester.focus [role=toolbar] input:focus, .type-tester.focus [role=toolbar] select:focus, .type-tester.focus [role=toolbar] input[type=radio]:focus + label, .type-tester.focus [role=toolbar] dl.order-detail input[type=radio]:focus + dt, dl.order-detail .type-tester.focus [role=toolbar] input[type=radio]:focus + dt, .type-tester.focus [role=toolbar] input[type=checkbox]:focus + label, .type-tester.focus [role=toolbar] dl.order-detail input[type=checkbox]:focus + dt, dl.order-detail .type-tester.focus [role=toolbar] input[type=checkbox]:focus + dt, .type-tester.focus [role=toolbar] button:focus { outline-color: white; }
.type-tester:hover [role=toolbar] label.number, .type-tester:hover [role=toolbar] dl.order-detail dt.number, dl.order-detail .type-tester:hover [role=toolbar] dt.number, .type-tester:hover [role=toolbar] .select-line-height::before, .type-tester:hover [role=toolbar] .select-line-height::after, .type-tester.focus [role=toolbar] label.number, .type-tester.focus [role=toolbar] dl.order-detail dt.number, dl.order-detail .type-tester.focus [role=toolbar] dt.number, .type-tester.focus [role=toolbar] .select-line-height::before, .type-tester.focus [role=toolbar] .select-line-height::after { color: white; }
.type-tester:hover [role=toolbar] select, .type-tester:hover [role=toolbar] .features-toggle button, .type-tester.focus [role=toolbar] select, .type-tester.focus [role=toolbar] .features-toggle button { background-image: url("images/select-arrow-white.svg") !important; color: white; }
.type-tester:hover [role=toolbar] input[type=range], .type-tester.focus [role=toolbar] input[type=range] { --track-color: #999; --gnubbel-color: white; }
.type-tester:hover [role=toolbar] .select-alignment input + label, .type-tester:hover [role=toolbar] .select-alignment dl.order-detail input + dt, dl.order-detail .type-tester:hover [role=toolbar] .select-alignment input + dt, .type-tester:hover [role=toolbar] .select-mode input + label, .type-tester:hover [role=toolbar] .select-mode dl.order-detail input + dt, dl.order-detail .type-tester:hover [role=toolbar] .select-mode input + dt, .type-tester.focus [role=toolbar] .select-alignment input + label, .type-tester.focus [role=toolbar] .select-alignment dl.order-detail input + dt, dl.order-detail .type-tester.focus [role=toolbar] .select-alignment input + dt, .type-tester.focus [role=toolbar] .select-mode input + label, .type-tester.focus [role=toolbar] .select-mode dl.order-detail input + dt, dl.order-detail .type-tester.focus [role=toolbar] .select-mode input + dt { color: rgba(255, 255, 255, 0.25); }
.type-tester:hover [role=toolbar] .select-alignment input:checked + label, .type-tester:hover [role=toolbar] .select-alignment dl.order-detail input:checked + dt, dl.order-detail .type-tester:hover [role=toolbar] .select-alignment input:checked + dt, .type-tester:hover [role=toolbar] .select-mode input:checked + label, .type-tester:hover [role=toolbar] .select-mode dl.order-detail input:checked + dt, dl.order-detail .type-tester:hover [role=toolbar] .select-mode input:checked + dt, .type-tester.focus [role=toolbar] .select-alignment input:checked + label, .type-tester.focus [role=toolbar] .select-alignment dl.order-detail input:checked + dt, dl.order-detail .type-tester.focus [role=toolbar] .select-alignment input:checked + dt, .type-tester.focus [role=toolbar] .select-mode input:checked + label, .type-tester.focus [role=toolbar] .select-mode dl.order-detail input:checked + dt, dl.order-detail .type-tester.focus [role=toolbar] .select-mode input:checked + dt { color: white; }
.type-tester:hover [role=toolbar] .buy-now a, .type-tester.focus [role=toolbar] .buy-now a { color: white; }

.type-tester { display: none; }
.type-tester [role="toolbar"] { background: transparent; }
.type-tester:hover [role="toolbar"], .type-tester.focus [role="toolbar"] { background: #1e2222; }
@media (min-width: 720px) { .type-tester { display: block; /* THE ACTUAL SAMPLE */ /* display modes */ }
  .type-tester [role=toolbar] { width: 100%; border-radius: 1em; padding: 1em; z-index: 1; color: var(--site-foreground); /* dropdowns */ /* sliders */ /* .select-size::before { font-family: $icon-font; font-size: 0.85rem; content: "A"; }  .select-size::after { font-family: $icon-font; font-size: 0.85rem; content: "B"; }
*/ /* checkboxes & radio buttons */ /* alignment */ /* features list */ /* buy now */ /* add/remove row */ /* button.add, button.remove { font-family: $icon-font; font-size: 0.85rem; position: relative; top: -4px; }
*/ }
  .type-tester [role=toolbar] > * { display: inline-block; text-align: center; white-space: nowrap; margin-right: 1em; }
  .type-tester [role=toolbar] input:focus, .type-tester [role=toolbar] select:focus, .type-tester [role=toolbar] input[type=radio]:focus + label, .type-tester [role=toolbar] dl.order-detail input[type=radio]:focus + dt, dl.order-detail .type-tester [role=toolbar] input[type=radio]:focus + dt, .type-tester [role=toolbar] input[type=checkbox]:focus + label, .type-tester [role=toolbar] dl.order-detail input[type=checkbox]:focus + dt, dl.order-detail .type-tester [role=toolbar] input[type=checkbox]:focus + dt, .type-tester [role=toolbar] button:focus { outline-color: var(--site-foreground); }
  .type-tester [role=toolbar] select, .type-tester [role=toolbar] .features-toggle button { border: none; width: auto; color: var(--site-foreground); font-weight: inherit; font-size: inherit; background-color: transparent; padding-top: 0 !important; padding-bottom: 0.1em !important; }
  .type-tester [role=toolbar] label.number, .type-tester [role=toolbar] dl.order-detail dt.number, dl.order-detail .type-tester [role=toolbar] dt.number { display: inline-block; width: 3em; text-align: right; vertical-align: baseline; text-transform: none; }
  .type-tester [role=toolbar] label.number + input, .type-tester [role=toolbar] dl.order-detail dt.number + input, dl.order-detail .type-tester [role=toolbar] dt.number + input { margin-left: 0.5em; }
  .type-tester [role=toolbar] input[type=range] { width: 10vw; min-width: 0.5in; max-width: 2in; --track-color: var(--site-accent); --gnubbel-color: var(--site-foreground); }
  .type-tester [role=toolbar] .select-style, .type-tester [role=toolbar] ul { text-align: left; }
  .type-tester [role=toolbar] .buy-now { text-align: right; }
  .type-tester [role=toolbar] .select-line-height::before { font-family: "Posifont Web"; font-size: 0.85rem; content: "C"; }
  .type-tester [role=toolbar] .select-line-height::after { font-family: "Posifont Web"; font-size: 0.85rem; content: "D"; }
  .type-tester [role=toolbar] .select-alignment input, .type-tester [role=toolbar] .select-mode input { /* don't hide it or it's not keyboard navigable/accessible */ position: absolute; left: -9999px; }
  .type-tester [role=toolbar] .select-alignment input + label, .type-tester [role=toolbar] .select-alignment dl.order-detail input + dt, dl.order-detail .type-tester [role=toolbar] .select-alignment input + dt, .type-tester [role=toolbar] .select-mode input + label, .type-tester [role=toolbar] .select-mode dl.order-detail input + dt, dl.order-detail .type-tester [role=toolbar] .select-mode input + dt { font-family: "Posifont Web"; font-size: inherit; display: inline-block; margin: 0 0.333em; color: var(--site-accent); padding-left: 0; margin-left: 0; }
  .type-tester [role=toolbar] .select-alignment input + label::before, .type-tester [role=toolbar] .select-alignment dl.order-detail input + dt::before, dl.order-detail .type-tester [role=toolbar] .select-alignment input + dt::before, .type-tester [role=toolbar] .select-mode input + label::before, .type-tester [role=toolbar] .select-mode dl.order-detail input + dt::before, dl.order-detail .type-tester [role=toolbar] .select-mode input + dt::before { content: none; }
  .type-tester [role=toolbar] .select-alignment input:checked + label, .type-tester [role=toolbar] .select-alignment dl.order-detail input:checked + dt, dl.order-detail .type-tester [role=toolbar] .select-alignment input:checked + dt, .type-tester [role=toolbar] .select-mode input:checked + label, .type-tester [role=toolbar] .select-mode dl.order-detail input:checked + dt, dl.order-detail .type-tester [role=toolbar] .select-mode input:checked + dt { color: var(--site-foreground); }
  .type-tester [role=toolbar] .select-alignment input:checked + label::before, .type-tester [role=toolbar] .select-alignment dl.order-detail input:checked + dt::before, dl.order-detail .type-tester [role=toolbar] .select-alignment input:checked + dt::before, .type-tester [role=toolbar] .select-mode input:checked + label::before, .type-tester [role=toolbar] .select-mode dl.order-detail input:checked + dt::before, dl.order-detail .type-tester [role=toolbar] .select-mode input:checked + dt::before { content: none; }
  .type-tester [role=toolbar] .select-alignment input[value=left] + label::after, .type-tester [role=toolbar] .select-alignment dl.order-detail input[value=left] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-alignment input[value=left] + dt::after, .type-tester [role=toolbar] .select-mode input[value=left] + label::after, .type-tester [role=toolbar] .select-mode dl.order-detail input[value=left] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-mode input[value=left] + dt::after { content: "J"; }
  .type-tester [role=toolbar] .select-alignment input[value=center] + label::after, .type-tester [role=toolbar] .select-alignment dl.order-detail input[value=center] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-alignment input[value=center] + dt::after, .type-tester [role=toolbar] .select-mode input[value=center] + label::after, .type-tester [role=toolbar] .select-mode dl.order-detail input[value=center] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-mode input[value=center] + dt::after { content: "K"; }
  .type-tester [role=toolbar] .select-alignment input[value=right] + label::after, .type-tester [role=toolbar] .select-alignment dl.order-detail input[value=right] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-alignment input[value=right] + dt::after, .type-tester [role=toolbar] .select-mode input[value=right] + label::after, .type-tester [role=toolbar] .select-mode dl.order-detail input[value=right] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-mode input[value=right] + dt::after { content: "L"; }
  .type-tester [role=toolbar] .select-alignment input[value=oneLiner] + label::after, .type-tester [role=toolbar] .select-alignment dl.order-detail input[value=oneLiner] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-alignment input[value=oneLiner] + dt::after, .type-tester [role=toolbar] .select-mode input[value=oneLiner] + label::after, .type-tester [role=toolbar] .select-mode dl.order-detail input[value=oneLiner] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-mode input[value=oneLiner] + dt::after { content: "t"; }
  .type-tester [role=toolbar] .select-alignment input[value=wrap] + label::after, .type-tester [role=toolbar] .select-alignment dl.order-detail input[value=wrap] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-alignment input[value=wrap] + dt::after, .type-tester [role=toolbar] .select-mode input[value=wrap] + label::after, .type-tester [role=toolbar] .select-mode dl.order-detail input[value=wrap] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-mode input[value=wrap] + dt::after { content: "r"; }
  .type-tester [role=toolbar] .select-alignment input[value=paragraph] + label::after, .type-tester [role=toolbar] .select-alignment dl.order-detail input[value=paragraph] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-alignment input[value=paragraph] + dt::after, .type-tester [role=toolbar] .select-mode input[value=paragraph] + label::after, .type-tester [role=toolbar] .select-mode dl.order-detail input[value=paragraph] + dt::after, dl.order-detail .type-tester [role=toolbar] .select-mode input[value=paragraph] + dt::after { content: "s"; }
  .type-tester [role=toolbar] .features-toggle { text-align: left; }
  .type-tester [role=toolbar] .features-toggle button { font: inherit; letter-spacing: inherit; text-transform: none; padding: none; border: none; background: transparent; font-size: inherit; padding-left: 1.333em; background-image: url("images/select-arrow-white.svg"); background-repeat: no-repeat, repeat; background-position: left .45em top 50%; background-size: .6em auto; }
  .type-tester [role=toolbar] .select-features { text-align: left; grid-row: 2; grid-column: 1/7; justify-self: end; }
  .type-tester [role=toolbar] .features-flont { font: inherit; font-size: inherit; }
  .type-tester [role=toolbar] .buy-now a { font-weight: bold; text-transform: uppercase; font-size: inherit; }
  .type-tester samp { display: block; font-size: 72px; margin-top: 4px; white-space: nowrap; color: var(--site-foreground); }
  .type-tester samp span { font: inherit; color: inherit; }
  .type-tester samp.oneLiner { white-space: nowrap; }
  .type-tester samp.wrap { white-space: pre-wrap; }
  .type-tester samp.paragraph { columns: 2; column-gap: 2em; padding: 1em; white-space: pre-wrap; } }

@supports (display: grid) { .type-tester [role=toolbar] { display: grid; width: 100%; grid-template-columns: auto auto 4em auto auto auto auto; grid-gap: 1rem; align-items: middle; }
  .type-tester [role=toolbar] > * { margin: 0; }
  .type-tester [role=toolbar] .features-flont { display: grid; grid-template-rows: auto auto auto auto; grid-auto-columns: auto; grid-auto-flow: column; grid-column-gap: var(--gutter); } }
.glyph-grids-container h4 { color: var(--site-accent); margin: 1em 0; }

.glyphs-grid { display: block; font-size: 3rem; line-height: 1; }
.glyphs-grid li { position: relative; display: inline-block; vertical-align: top; text-align: center; padding: 0.333em 0; cursor: pointer; /* &.alternate { background-color: #F4F4F4; }  &.ligature { background-color: #F4FFF4; }
*/ }
.glyphs-grid li[data-label]::after { content: attr(data-label); display: none; position: absolute; left: 0; right: 0; text-align: center; font-feature-settings: auto; font-family: Verdana, sans-serif; font-size: 10px; color: var(--site-accent); bottom: 4px; }
.glyphs-grid li.unicode[data-label]::after { font-family: Courier, monospace; font-size: 14px; color: var(--site-accent); bottom: 1px; }

@supports (display: grid) { .glyphs-grid { font-family: inherit; display: grid; grid-template-columns: repeat(auto-fill, minmax(1em, 1fr)); grid-gap: 0; border-left: 1px solid var(--site-accent); border-top: 1px solid var(--site-accent); }
  .glyphs-grid li { border-right: 1px solid var(--site-accent); border-bottom: 1px solid var(--site-accent); } }
.positype-site #flont-popup li { background: #999; }

.positype-site #flont-popup li.selected { background: #648dbd; color: white; }

.glyph-detail-view { display: block; position: -webkit-sticky; position: sticky; top: var(--top-header-height); padding: 0; background: var(--site-background); z-index: 2; line-height: 1; font-size: 25vh; }
@media (min-height: 8in) { .glyph-detail-view { font-size: 2in; } }
.glyph-detail-view .glyphs-head { position: absolute; font-size: 1rem; top: 0rem; left: 0rem; right: 0; z-index: 2; }
.glyph-detail-view .glyphs-head select { /* position: absolute; right: 0; top: 0;
*/ }
.glyph-detail-view > .wrapper { display: block; position: relative; z-index: 1; }
.glyph-detail-view canvas { display: block; position: relative; width: 100%; height: 1em; z-index: 1; border-style: none; border-color: var(--site-accent); color: var(--site-foreground); }

main > h1:first-child { margin-top: 0; margin-bottom: calc(var(--gutter-vertical) / 2); }
main > h1:first-child + aside { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; font-style: italic; font-size: 1rem; margin-top: -1em; }
main > h1:first-child + aside a { text-decoration: underline; }
main > h1:first-child + aside p:first-child { margin-top: 0; }

nav.subnav { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-size: 92%; padding-bottom: 1em; border-bottom: 1px solid var(--site-accent); }
nav.subnav > *, nav.subnav ul, nav.subnav li { display: inline-block; }
nav.subnav > * + * { margin-left: 0.75rem; }
nav.subnav > label, dl.order-detail nav.subnav > dt { font-family: "Molecule Web", "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 80%; }
nav.subnav ul { font-weight: inherit; }
nav.subnav li { margin: 0 0.75em; }
nav.subnav a { text-decoration: none; }
nav.subnav a.current, nav.subnav .current a { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; }
nav.subnav #listing-display-modes input[type=radio] { position: absolute; left: -200vw; }
nav.subnav #listing-display-modes label, nav.subnav #listing-display-modes dl.order-detail dt, dl.order-detail nav.subnav #listing-display-modes dt { font-family: "Posifont Web"; font-size: 1.2rem; color: var(--site-accent); }
nav.subnav #listing-display-modes input:checked + label, nav.subnav #listing-display-modes dl.order-detail input:checked + dt, dl.order-detail nav.subnav #listing-display-modes input:checked + dt { color: var(--site-foreground); }
nav.subnav #listing-display-modes label ~ label, nav.subnav #listing-display-modes dl.order-detail dt ~ label, dl.order-detail nav.subnav #listing-display-modes dt ~ label, nav.subnav #listing-display-modes dl.order-detail label ~ dt, dl.order-detail nav.subnav #listing-display-modes label ~ dt, nav.subnav #listing-display-modes dl.order-detail dt ~ dt, dl.order-detail nav.subnav #listing-display-modes dt ~ dt { margin-left: 0.1em; }
nav.subnav #listing-display-modes #fonts-mode-grid-select + label::before, nav.subnav #listing-display-modes dl.order-detail #fonts-mode-grid-select + dt::before, dl.order-detail nav.subnav #listing-display-modes #fonts-mode-grid-select + dt::before { content: "1"; }
nav.subnav #listing-display-modes #fonts-mode-names-select + label::before, nav.subnav #listing-display-modes dl.order-detail #fonts-mode-names-select + dt::before, dl.order-detail nav.subnav #listing-display-modes #fonts-mode-names-select + dt::before { content: "2"; }
nav.subnav #listing-display-modes #fonts-mode-pangrams-select + label::before, nav.subnav #listing-display-modes dl.order-detail #fonts-mode-pangrams-select + dt::before, dl.order-detail nav.subnav #listing-display-modes #fonts-mode-pangrams-select + dt::before { content: "3"; }

/* RELEASE NOTES */
#release-notes-page ul.release-notes > li + li { margin-top: var(--gutter); }
#release-notes-page ul.release-notes figure.double-wide img { width: 50%; height: auto; }
#release-notes-page ul.release-notes h2 { margin: 0.25em 0 0; font-family: "Crave Display Web", "Bodoni", serif; font-weight: 600; }

/* EDITORIAL / INFO PAGES */
.two-thirds-page, .fancy-show-off-page { display: grid; grid-gap: calc(var(--gutter-vertical) / 2) var(--gutter-horizontal); align-items: start; max-width: 1100px; }
.two-thirds-page p.lede, .two-thirds-page article > p:first-of-type, .fancy-show-off-page p.lede, .fancy-show-off-page article > p:first-of-type { margin-top: 0; }

.two-thirds-page > aside { grid-row: 1; }
@media (min-width: 720px) { .two-thirds-page { grid-template-columns: 2fr 1fr; }
  .two-thirds-page > aside { grid-column: 2; } }

@media (min-width: 1000px) { .fancy-show-off-page { grid-template-columns: 1fr 1fr; }
  .fancy-show-off-page > * { grid-column: 1 / 3; }
  .fancy-show-off-page > article { grid-column: 1; }
  .fancy-show-off-page > ul.editorial { grid-column: 2; } }

.read-more a { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; font-size: 93%; }

ul.editorial { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 2em; }
ul.editorial img { width: 100%; height: auto; }
ul.editorial article { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; }

#editorial-entry .slideshow { margin-bottom: 3rem; }

#home-page body > main section { margin-bottom: var(--gutter-vertical); }
#home-page body > main section > h3 { text-align: center; margin-bottom: 1.5rem; }
#home-page .home-page-slideshow .slideshow figcaption { display: none; }
#home-page .home-page-slideshow .links { position: relative; }
#home-page .home-page-slideshow .links > * { display: inline-block; }
#home-page .home-page-slideshow .links > .new-sale { margin-right: 1rem; }
#home-page .home-page-slideshow .links .font-name { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; }
#home-page .home-page-slideshow .links .font-name, #home-page .home-page-slideshow .links .synopsis { padding: 1em 0; }
#home-page .home-page-slideshow .links > .synopsis { margin-left: 2rem; font-style: italic; font-weight: 300; }
#home-page .home-page-slideshow .links > .button { position: absolute; right: 0; top: 0.5rem; }
#home-page #home-page-slideshow { text-align: center; overflow: hidden; height: calc(42vw + 3rem); max-height: calc(504px + 3rem); }
#home-page #home-page-slideshow .bleed { margin-left: 0; width: 100%; }
#home-page #home-page-slideshow .home-page-slideshow { text-align: left; position: relative; display: inline-block; padding: 0; }
#home-page #home-page-slideshow .home-page-slideshow, #home-page #home-page-slideshow .home-page-slideshow img, #home-page #home-page-slideshow .home-page-slideshow svg { height: 42vw; width: 84vw; max-height: 504px; max-width: 1008px; }
#home-page #home-page-slideshow .home-page-slideshow .blur-left, #home-page #home-page-slideshow .home-page-slideshow .blur-right { position: absolute; content: ""; width: 100%; height: 100%; top: 0; filter: blur(0.75vw); overflow: hidden; }
@media (min-width: 1200px) { #home-page #home-page-slideshow .home-page-slideshow .blur-left, #home-page #home-page-slideshow .home-page-slideshow .blur-right { filter: blur(11px); } }
#home-page #home-page-slideshow .home-page-slideshow .blur-left img, #home-page #home-page-slideshow .home-page-slideshow .blur-left svg, #home-page #home-page-slideshow .home-page-slideshow .blur-right img, #home-page #home-page-slideshow .home-page-slideshow .blur-right svg { width: 100%; height: 100%; }
#home-page #home-page-slideshow .home-page-slideshow .blur-left { right: 100%; }
#home-page #home-page-slideshow .home-page-slideshow .blur-right { left: 100%; }
#home-page #featured-fonts h3 { font-family: "Crave Script Web", "Bodoni", serif; font-size: 2.25rem; }
#home-page #featured-fonts #new-releases > ul > li { margin-bottom: var(--gutter-vertical); }
#home-page #featured-fonts #new-releases .slideshow .carousel { height: 24vw; }
#home-page #featured-fonts #new-releases .slideshow .carousel figure, #home-page #featured-fonts #new-releases .slideshow .carousel img, #home-page #featured-fonts #new-releases .slideshow .carousel svg { width: auto; height: 24vw; }
#home-page #featured-fonts .mode-grid ul.name-specimens { text-align: center; /* show one line of tiles */ }
#home-page #featured-fonts .mode-grid ul.name-specimens > li { display: none; }
#home-page #featured-fonts .mode-grid ul.name-specimens > li:first-child { display: inline-block; }
@media (min-width: 440px) { #home-page #featured-fonts .mode-grid ul.name-specimens > li:nth-child(2) { display: inline-block; } }
@media (min-width: 640px) { #home-page #featured-fonts .mode-grid ul.name-specimens > li:nth-child(3) { display: inline-block; } }
@media (min-width: 840px) { #home-page #featured-fonts .mode-grid ul.name-specimens > li:nth-child(4) { display: inline-block; } }
@media (min-width: 1040px) { #home-page #featured-fonts .mode-grid ul.name-specimens > li:nth-child(5) { display: inline-block; } }
@media (min-width: 1240px) { #home-page #featured-fonts .mode-grid ul.name-specimens > li:nth-child(6) { display: inline-block; } }
#home-page #release-notes h4, #home-page #custom-fonts h4 { margin-top: 1em; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; }
@media (min-width: 1000px) { #home-page #release-notes, #home-page #custom-fonts { display: inline-block; width: 50%; vertical-align: top; }
  #home-page #release-notes { padding-right: calc(var(--gutter) / 2); }
  #home-page #custom-fonts { padding-left: calc(var(--gutter) / 2); } }

/* FONTS */
.new-sale { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; display: block; font-size: 0.9rem; padding: 1rem !important; color: white; }

.is-new .new-sale { background: #1e2222; }

.on-sale .new-sale { background: #e51727; }

#type-your-text { display: none; grid-template-columns: max-content 1fr max-content; align-items: center; }
#type-your-text.mode-pangrams { display: grid; }
#type-your-text > * { height: 100%; }
#type-your-text #this-is-your-text { padding-left: 0.75em; }
#type-your-text label, #type-your-text dl.order-detail dt, dl.order-detail #type-your-text dt { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; background: #1e2222; color: white; padding: 0.5em 1em; }

.font-listing > ul, .font-listing > ul li { list-style: none; margin: 0; padding: 0; }
.font-listing .collection-group > h3 { position: relative; font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; margin-bottom: 0.5em; }

.collection-group h3 { margin: 2rem 0; }
.collection-group ul.name-specimens > li > figure.name-specimen { padding-top: 0; }
.collection-group ul.name-specimens > li:not(:last-child) figure { border-bottom: none; }
.collection-group ul.name-specimens > li:not(:last-child) figure .new-sale { display: none; }
.collection-group ul.name-specimens > li:not(:last-child) figure figcaption { margin: 0; }

ul.name-specimens { width: 100%; }
ul.name-specimens > li { display: block; }
ul.name-specimens > li figure { display: grid; align-items: baseline; grid-template-columns: max-content 1fr 10rem; grid-template-rows: auto 3rem; grid-column-gap: 1rem; grid-row-gap: 1rem; justify-items: start; position: relative; padding-top: 2rem; border-bottom: 1px solid var(--site-light-line); }
ul.name-specimens > li figure > * { grid-row: 1; }
@media (min-width: 720px) { ul.name-specimens > li figure { grid-template-columns: max-content 1fr 7rem 10rem; } }
ul.name-specimens > li figure .pangram { display: none; grid-column: 1 / 4; grid-row: 1; font-size: 48px; white-space: nowrap; width: 100%; min-width: 0; overflow-x: hidden; overflow-y: hidden; }
ul.name-specimens > li figure .font-name.specimen { grid-column: 1 / 3; grid-row: 1; position: relative; font-size: 7.2vw; white-space: nowrap; line-height: 1.2; }
@media (min-width: 1000px) { ul.name-specimens > li figure .font-name.specimen { font-size: 72px; } }
ul.name-specimens > li figure .tile-specimen { display: none; font-size: 96px; line-height: 1.2em; grid-row: auto; grid-column: auto; }
ul.name-specimens > li figure .tile-specimen svg { height: 1em; width: auto; display: block; box-sizing: content-box; padding: 0.1em 0; }
ul.name-specimens > li figure .tile-specimen samp { font-size: inherit; display: block; padding: 0; margin: 0; background: transparent; color: inherit; }
ul.name-specimens > li figure figcaption { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif !important; font-size: 0.96rem; font-weight: 500; grid-column: 1 / 4; grid-row: 2; }
ul.name-specimens > li figure figcaption .single-count + .comma, ul.name-specimens > li figure figcaption .starting-at { display: none; }
@media (min-width: 720px) { ul.name-specimens > li figure figcaption { grid-column: 3; grid-row: 1; } }
ul.name-specimens > li figure .buttons { text-align: right; justify-self: end; grid-column: 3; grid-row: 1; }
@media (min-width: 720px) { ul.name-specimens > li figure .buttons { grid-column: 4; } }
ul.name-specimens > li figure.on-sale figcaption, ul.name-specimens > li figure.is-new figcaption { margin-left: 5rem; margin-top: 0.666rem; }
@media (min-width: 720px) { ul.name-specimens > li figure.on-sale figcaption, ul.name-specimens > li figure.is-new figcaption { margin: 0; } }
ul.name-specimens > li figure .new-sale { grid-row: auto; grid-column: auto; position: absolute; bottom: 0; left: 0; }
ul.name-specimens > li figure.is-new .new-sale { background: #1e2222; }
ul.name-specimens > li figure.on-sale .new-sale { background: #e51727; }

@media (min-width: 720px) { .font-listing.mode-pangrams figure { grid-template-columns: max-content 1fr 7rem; } }
.font-listing.mode-pangrams .pangram { display: block; }
.font-listing.mode-pangrams .font-name.specimen { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif !important; font-size: 0.96rem; font-weight: 500; grid-column: 1; grid-row: 2; width: max-content; text-transform: uppercase; margin-top: 0.666rem; font-weight: bold; text-transform: uppercase; }
.font-listing.mode-pangrams figcaption { margin-left: 0 !important; grid-column: 2 / 4; grid-row: 2; margin-top: 0.666rem; }
.font-listing.mode-pangrams .buttons { display: none; }
.font-listing.mode-pangrams .on-sale .font-name.specimen, .font-listing.mode-pangrams .is-new .font-name.specimen { padding-left: 5rem; }

.font-listing.mode-grid ul { display: inline-block; }
.font-listing.mode-grid li { display: inline-block; vertical-align: top; }
.font-listing.mode-grid .collection-group { display: inline; }
.font-listing.mode-grid .collection-group > ul { display: inline; }
.font-listing.mode-grid .collection-group h3 { display: none; }
.font-listing.mode-grid figure { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-gap: 0; justify-items: center; padding: 1rem !important; margin: 0.4rem 1.5rem 0 0; border: none; min-width: min-content; width: 10em; transition: background 0.1s; }
.font-listing.mode-grid figure:hover { background: rgba(0, 0, 0, 0.1); }
.font-listing.mode-grid figure > * { grid-column: 1; }
.font-listing.mode-grid figure.is-new { background: #1e2222; }
.font-listing.mode-grid figure.on-sale { background: #e51727; }
.font-listing.mode-grid figure.is-new, .font-listing.mode-grid figure.on-sale { color: white; }
.font-listing.mode-grid figure.is-new svg path, .font-listing.mode-grid figure.is-new svg g, .font-listing.mode-grid figure.is-new svg rect, .font-listing.mode-grid figure.on-sale svg path, .font-listing.mode-grid figure.on-sale svg g, .font-listing.mode-grid figure.on-sale svg rect { fill: white; }
.font-listing.mode-grid figure.is-new figcaption, .font-listing.mode-grid figure.on-sale figcaption { margin: 0; }
.font-listing.mode-grid figure .new-sale { display: block; position: absolute; left: 0; top: 0; grid-column: auto; grid-row: auto; bottom: auto; background: transparent !important; }
.font-listing.mode-grid .tile-specimen { display: block; grid-row: 1; }
.font-listing.mode-grid .font-name.specimen { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif !important; font-size: 0.96rem; font-weight: 500; grid-row: 2; text-align: center; font-weight: bold; text-transform: uppercase; white-space: normal; line-height: 1.2; margin-bottom: 0.25em; }
.font-listing.mode-grid figcaption { text-align: center; grid-row: 3; }
.font-listing.mode-grid figcaption .comma { display: inline; }
.font-listing.mode-grid figcaption .starting-at { display: block; font-style: italic; }
.font-listing.mode-grid .buttons { display: none; }

#family-page .byline { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; font-style: italic; font-size: 1rem; }
#family-page .byline a { text-decoration: underline; }
#family-page h1 { font-size: 72px; }
#family-page .scrolled h1 { font-size: 48px; }
#family-page main > section, #family-page main > form { margin-top: var(--gutter-vertical); }
#family-page main > section h3, #family-page main > form h3 { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--site-accent); margin-bottom: 1em; /* font-family: $body-font-cond; font-size: 1rem; font-weight: 500; margin-top: 3rem; margin-bottom: 1.5em;
*/ }
#family-page dl.font-info { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: min-content; grid-row-gap: 1em; /* by default, everything spans columns */ /* but the dates */ }
#family-page dl.font-info > dt, #family-page dl.font-info > dd { grid-column: 1/3; }
#family-page dl.font-info > .initial-release { grid-column: 2; }
#family-page dl.font-info > .current-release { grid-column: 1; }
#family-page dl.font-info > dt.initial-release { grid-row: 3; }
#family-page dl.font-info > dt { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--site-accent); }
#family-page dl.font-info > dd { border-bottom: 1px solid var(--site-light-line); padding-bottom: 0.75em; }
#family-page dl.font-info dd.opentype-features { padding-bottom: 0; }
#family-page dl.font-info .opentype-features li { display: inline-block; font-family: "Posifont Web"; font-size: 250%; height: 1em; width: 1em; line-height: 0.8; vertical-align: middle; margin-right: 0.5rem; margin-bottom: 0.5rem; }
#family-page .description p, #family-page .languages { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; }
#family-page #weights-styles figure { display: inline-block; text-align: left; width: min-content; vertical-align: top; white-space: normal; font-size: 69px; margin-right: 0.5em; }
#family-page #weights-styles samp { display: block; font-size: inherit; }
#family-page #weights-styles figcaption { display: block; font-family: "Molecule Web", "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 9px; white-space: normal; }
#family-page .slideshow, #family-page .slideshow img, #family-page .slideshow svg { width: 100vw; height: 50vw; }
@media (min-width: 720px) { #family-page #just-the-facts { display: grid; width: 100%; grid-template-columns: 320px calc(100vw - (2 * var(--main-side-padding)) - 320px - var(--gutter) / 2); grid-gap: calc(var(--gutter) / 2); } }
@media (min-width: 720px) and (min-width: 1200px) { #family-page #just-the-facts { grid-template-columns: 320px calc(1200px - (2 * var(--main-side-padding)) - 320px - var(--gutter) / 2); } }
@media (min-width: 720px) { #family-page #just-the-facts .slideshow { width: calc(100vw - (2 * var(--main-side-padding)) - 320px - var(--gutter) / 2); max-width: calc(1200px - (2 * var(--main-side-padding)) - 320px - var(--gutter) / 2); }
  #family-page #just-the-facts .slideshow, #family-page #just-the-facts .slideshow img, #family-page #just-the-facts .slideshow svg { width: auto; height: calc((calc(100vw - (2 * var(--main-side-padding)) - 320px - var(--gutter) / 2)) / 2); max-height: calc((calc(1200px - (2 * var(--main-side-padding)) - 320px - var(--gutter) / 2)) / 2); }
  #family-page #just-the-facts .bleed { margin: 0 !important; width: auto !important; }
  #family-page #release-notes { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--gutter); align-items: start; } }
#family-page .explore { overflow: hidden; }
#family-page .explore .type-tester { margin-top: 3rem; }
#family-page #buy { margin-top: 3rem; }

#ready-to-buy-floater { padding: 1em; background: var(--site-background); border: 1px solid var(--site-foreground); margin-bottom: var(--gutter-vertical); }
#ready-to-buy-floater button, #ready-to-buy-floater a.button { width: 100%; text-align: center; }
#ready-to-buy-floater h3 { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 120%; font-weight: bold; margin-bottom: 0.5em; margin-top: 1em; }
#ready-to-buy-floater .cart-totals dt, #ready-to-buy-floater .cart-totals dd { width: 100%; line-height: 1.4; }
#ready-to-buy-floater .cart-totals dt::after { content: ":"; }
#ready-to-buy-floater .cart-totals .total { border-top: 1px dashed var(--site-light-line); padding-top: 0.5em; font-size: 120%; font-weight: 500; }
@media (min-width: 720px) and (max-width: 999px) { #ready-to-buy-floater { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: calc(var(--gutter-horizontal) / 2); }
  #ready-to-buy-floater > * { padding: 0; margin: 0; }
  #ready-to-buy-floater .i-agree-eula { grid-column: 2; grid-row: 1; align-self: center; }
  #ready-to-buy-floater .button-container { grid-column: 2; grid-row: 2; align-self: end; }
  #ready-to-buy-floater .cart-totals { grid-column: 1; grid-row: 2; }
  #ready-to-buy-floater h3 { grid-column: 1; grid-row: 1; margin-top: 0; } }

dl.cart-totals { display: grid; grid-template-columns: 1fr 8rem; grid-auto-rows: auto; grid-row-gap: 0.5em; justify-items: end; }
dl.cart-totals dt, dl.cart-totals dd { font-size: 85%; }
dl.cart-totals dd.total { font-size: 100%; }

@media (min-width: 1000px) { .cart-page-container { width: calc(100% - 320px - 3rem); }
  #ready-to-buy-floater { position: -webkit-sticky !important; position: sticky !important; top: var(--top-header-height); float: right; width: 320px; z-index: 2; } }
.price { justify-self: end; text-align: right; }
.price .sale { color: var(--site-accent); font-weight: bolder; }
.price .regular { position: relative; }
.price .regular::after { display: block; content: ""; position: absolute; top: calc(50% - 0.12em); left: 0; right: 0; height: 0.12em; background: var(--site-accent); }

/* ADD TO CART */
#buy { max-width: 1024px; }
@media (min-width: 48rem) { #buy { display: grid; grid-template-columns: 3fr 2fr; grid-gap: calc(var(--gutter-horizontal) / 2); align-items: start; } }
#buy h2 { font-family: "Crave Display Web", "Bodoni", serif; font-weight: 600; font-size: 1.7rem; padding-bottom: 0.3em; }
#buy h2 + aside { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; font-style: italic; font-size: 1rem; }
#buy h2 + aside a { text-decoration: underline; }
#buy h2 + aside a { text-decoration: underline; }
#buy section.products { font-size: 1rem; }
#buy section.products li { display: block; position: relative; border-top: 1px solid var(--site-accent); padding: 1rem 0.5rem; box-sizing: border-box; vertical-align: top; }
@media (min-width: 32rem) { #buy section.products { display: inline-block; vertical-align: top; margin-right: 1rem; }
  #buy section.products ul.has-italics li.single { width: 50%; display: inline-block; }
  #buy section.products ul.has-italics li.second { border-left: 1px solid var(--site-accent); } }
#buy section.products figure.cart-banner img, #buy section.products figure.cart-banner svg { width: auto; height: auto; max-width: 100%; max-height: 4em; }
#buy section.products label, #buy section.products dl.order-detail dt, dl.order-detail #buy section.products dt { display: block; width: 100%; position: relative; box-sizing: border-box; padding-right: 2.5em; }
#buy section.products label .title, #buy section.products dl.order-detail dt .title, dl.order-detail #buy section.products dt .title { font-weight: 500; line-height: 1.4; }
#buy section.products label aside, #buy section.products dl.order-detail dt aside, dl.order-detail #buy section.products dt aside { font-weight: 400; font-size: 92%; }
#buy section.products label .price, #buy section.products dl.order-detail dt .price, dl.order-detail #buy section.products dt .price { position: absolute; right: 0; top: 0; }
#buy section.products label samp, #buy section.products dl.order-detail dt samp, dl.order-detail #buy section.products dt samp { display: block; font-size: 24px; overflow: hidden; }
#buy section.build-your-license { max-width: 24em; }
#buy section.build-your-license ul.build-license li, #buy section.build-your-license ul.update-cart li form { font-size: 0.92rem; display: grid; grid-template-columns: 1fr 2fr; align-items: center; grid-gap: 1em; }
#buy section.build-your-license ul.build-license li select, #buy section.build-your-license ul.update-cart li form select { width: 100%; max-width: 18em; justify-self: start; }
#buy section.build-your-license ul.build-license li select option, #buy section.build-your-license ul.update-cart li form select option { text-align: right; }
#buy section.build-your-license ul.build-license li .price, #buy section.build-your-license ul.update-cart li form .price { font-size: 2rem; }
#buy section.build-your-license ul.build-license li .price::before, #buy section.build-your-license ul.update-cart li form .price::before { content: "$"; }
#buy section.build-your-license ul.build-license li.subtotal .price, #buy section.build-your-license ul.build-license li.discount .price, #buy section.build-your-license ul.update-cart li form.subtotal .price, #buy section.build-your-license ul.update-cart li form.discount .price { font-size: 1rem; }
#buy section.build-your-license ul.build-license li { margin-top: 2px; padding: 0.7rem; }
#buy section.build-your-license ul.build-license li label, #buy section.build-your-license ul.build-license li dl.order-detail dt, dl.order-detail #buy section.build-your-license ul.build-license li dt { font-size: 0.92rem; }
#buy section.build-your-license button { float: right; margin-top: 0.5em; }

#cart-page ul.build-license li, #cart-page ul.update-cart li form { font-size: 0.92rem; display: grid; grid-template-columns: 1fr 2fr; align-items: center; grid-gap: 1em; }
#cart-page ul.build-license li select, #cart-page ul.update-cart li form select { width: 100%; max-width: 18em; justify-self: start; }
#cart-page ul.build-license li select option, #cart-page ul.update-cart li form select option { text-align: right; }
#cart-page ul.build-license li .price, #cart-page ul.update-cart li form .price { font-size: 2rem; }
#cart-page ul.build-license li .price::before, #cart-page ul.update-cart li form .price::before { content: "$"; }
#cart-page ul.build-license li.subtotal .price, #cart-page ul.build-license li.discount .price, #cart-page ul.update-cart li form.subtotal .price, #cart-page ul.update-cart li form.discount .price { font-size: 1rem; }
#cart-page main div.disabled, #cart-page main section.disabled, #cart-page main form.disabled { position: relative; }
#cart-page main div.disabled::after, #cart-page main section.disabled::after, #cart-page main form.disabled::after { display: block; content: attr(aria-label); position: absolute; top: -1em; left: -1em; right: -1em; bottom: -1em; text-align: center; padding-top: 2em; opacity: 0.8; background: var(--site-background); }
#cart-page h2 { font-family: "Crave Display Web", "Bodoni", serif; font-weight: 600; font-size: 1.8rem; padding-bottom: 0.3em; text-transform: capitalize; }
#cart-page ul.update-cart { width: 100%; }
#cart-page ul.update-cart li { margin: 0.5em 0; }
#cart-page ul.update-cart li form { grid-template-columns: 6em 40vw auto; }
@media (min-width: 45em) { #cart-page ul.update-cart li form { grid-template-columns: 6em 18em auto; } }
#cart-page ul.update-cart li form .price { font-size: 1rem; font-weight: 300; }
#cart-page #cart-contents { border-top: 1px solid var(--site-light-line); border-bottom: 1px solid var(--site-light-line); margin-bottom: 0; }
#cart-page #cart-contents > li { padding: 0.25rem; }
#cart-page #cart-contents > li .product-name { display: inline-block; margin-top: 0.5rem; }
#cart-page #cart-contents > li .remove { display: inline-block; font-size: 1.5rem; }
#cart-page #cart-contents > li .remove button { font-size: 100%; font-weight: bold; vertical-align: baseline; padding: 2px; }
#cart-page #cart-contents > li + li { border-top: 1px dashed var(--site-light-line); }
@media (min-width: 720px) { #cart-page #cart-contents > li { display: grid; grid-template-columns: 4rem 1fr 3fr; grid-gap: 1rem; } }
#cart-page #cart-labels { display: none; }
@media (min-width: 720px) { #cart-page #cart-labels { display: grid; grid-template-columns: 4rem 1fr 3fr; grid-gap: 1rem; font-size: 0.8rem; text-transform: uppercase; color: var(--site-accent); }
  #cart-page #cart-labels ul { display: grid; grid-template-columns: 6em 12em auto; grid-gap: 1em; } }
#cart-page .cart-footer { margin: 0; padding: 0.5rem; }
#cart-page .cart-footer form { font-size: 84%; margin-bottom: 1rem; }
#cart-page .cart-footer form input, #cart-page .cart-footer form button, #cart-page .cart-footer form .button { box-sizing: border-box; font-size: 100%; border-width: 1px; border-style: solid; line-height: 1; }
#cart-page .cart-footer form button, #cart-page .cart-footer form .button { border-color: transparent; position: relative; }
#cart-page .cart-footer form label, #cart-page .cart-footer form dl.order-detail dt, dl.order-detail #cart-page .cart-footer form dt { display: block; margin-bottom: 0.5em; }
#cart-page .cart-footer form input { width: 10em; }
#cart-page #cart-footer #discount-form label, #cart-page #cart-footer #discount-form dl.order-detail dt, dl.order-detail #cart-page #cart-footer #discount-form dt { display: inline-block; margin-right: 1em; }
#cart-page #cart-footer #discount-form div { display: inline-block; }
#cart-page #cart-footer #discount-form input { width: 12em; }
@media (min-width: 720px) { #cart-page #cart-footer #discount-form input { width: 25vw; max-width: 18em; } }
#cart-page #cart-login { margin-left: 0; padding-left: 0; margin-top: 2px; }
#cart-page #cart-login form input { width: 100%; margin-top: 4px; }
#cart-page #cart-login form button, #cart-page #cart-login form .button { margin-top: 4px; }
#cart-page #cart-login form .create { background: #017290; }
@media (min-width: 23rem) { #cart-page #cart-login form { text-align: left; }
  #cart-page #cart-login input[type=email] { width: 40vw; max-width: 16em; }
  #cart-page #cart-login input[type=password] { width: 20vw; max-width: 12em; } }
#cart-page #checkout #license-section { padding-bottom: calc(var(--gutter-vertical) / 2); border-bottom: 1px solid var(--site-light-line); }
#cart-page #checkout h2 { margin-top: calc(var(--gutter-vertical) / 2); }
#cart-page #checkout h4 { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; margin: 1em 0; }
#cart-page #checkout h5 { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 600; }
#cart-page #checkout h5 a { text-decoration: underline; }
#cart-page #checkout .stripe-payment-intents-form { width: auto; margin-top: 1rem; }
#cart-page #checkout .stripe-payment-intents-form fieldset.card-data { max-width: 4in; background: var(--input-background); padding: 0.5em; }
#cart-page #checkout .stripe-payment-intents-form fieldset.card-data ::placeholder { color: var(--site-foreground); }
#cart-page #checkout label[for="i-agree-eula"], #cart-page #checkout dl.order-detail dt[for="i-agree-eula"], dl.order-detail #cart-page #checkout dt[for="i-agree-eula"] { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; font-size: 1rem; text-transform: uppercase; }
#cart-page #checkout label[for^="buying-for"], #cart-page #checkout dl.order-detail dt[for^="buying-for"], dl.order-detail #cart-page #checkout dt[for^="buying-for"] { text-transform: uppercase; }
#cart-page #checkout label.select-address, #cart-page #checkout dl.order-detail dt.select-address, dl.order-detail #cart-page #checkout dt.select-address { display: inline-block; padding: 0.333em 1em 1em 1.5em; vertical-align: top; /* &:first-of-type { margin-left: -1em; }
*/ }
#cart-page #checkout label.select-address::before, #cart-page #checkout dl.order-detail dt.select-address::before, dl.order-detail #cart-page #checkout dt.select-address::before { display: block; position: absolute; left: 0.333em; top: 0.333em; }
#cart-page #checkout label.select-address ~ [for$="-new"], #cart-page #checkout dl.order-detail dt.select-address ~ [for$="-new"], dl.order-detail #cart-page #checkout dt.select-address ~ [for$="-new"] { display: block; }
#cart-page #checkout .new-address { display: none; }
#cart-page #checkout form.editing .new-address, #cart-page #checkout .new-address.editing { display: block; }
#cart-page #checkout div.email-signup { font-size: 80%; margin: 1em 0; }
#cart-page #checkout #real-real-payment-form .errors, #cart-page #checkout #real-real-payment-form main div.disabled::after, #cart-page main #checkout #real-real-payment-form div.disabled::after, #cart-page #checkout #real-real-payment-form main section.disabled::after, #cart-page main #checkout #real-real-payment-form section.disabled::after, #cart-page #checkout #real-real-payment-form main form.disabled::after, #cart-page main #checkout #real-real-payment-form form.disabled::after, #cart-page #checkout #real-real-payment-form .card-errors, #cart-page #checkout #real-real-payment-form .card-errors { margin: 1em 0; text-align: center; }
#cart-page #checkout #real-real-payment-form .buttons { margin-top: calc(var(--gutter-vertical) / 2); }

#licensing main > header + * { margin-top: 1rem; }
#licensing main aside { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: normal; font-style: italic; font-size: 1rem; line-height: 1.4; }
#licensing main aside a { text-decoration: underline; }

/* ABOUT */
#info-page-wrapper { max-width: 1024px; }

#foundry-people > ul > li { margin-bottom: var(--gutter-vertical); }
#foundry-people .portrait { width: 3in; height: 3in; background: #017290; margin-bottom: 0.5em; }
#foundry-people .portrait img { width: 100%; height: 100%; }
#foundry-people h4 { margin: 0; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 1.25rem; font-weight: normal; }
#foundry-people h4 aside { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-size: 0.8rem; text-transform: uppercase; font-weight: 300; }
#foundry-people article { font-size: 90%; }
#foundry-people article p { line-height: 1.66; }
#foundry-people .social-media li { display: inline-block; margin-right: 1em; font-size: 0.9rem; }
#foundry-people .social-media a { text-transform: uppercase; font-weight: 300; }
#foundry-people .social-media a::after { content: " ↗︎"; }

@supports (display: grid) { @media (min-width: 720px) { #foundry-people > ul { display: grid; grid-gap: var(--gutter); grid-template-columns: 1fr 1fr; grid-auto-rows: auto; align-items: start; }
    #foundry-people > ul li { margin-bottom: 0; }
    #foundry-people:not(.flourish) > ul > li:first-child { margin-top: 2em; border-top: none; padding-top: none; grid-column: 1/3; display: grid; grid-template-columns: 3in auto; grid-template-rows: auto auto auto; grid-gap: 1em; }
    #foundry-people:not(.flourish) > ul > li:first-child .portrait { grid-row: 1/3; grid-column: 1; margin-bottom: 0; }
    #foundry-people:not(.flourish) > ul > li:first-child h4 { grid-row: 1; grid-column: 2/4; }
    #foundry-people:not(.flourish) > ul > li:first-child article { grid-row: 2; grid-column: 2; }
    #foundry-people:not(.flourish) > ul > li:first-child article p:first-child { margin-top: 0; }
    #foundry-people:not(.flourish) > ul > li:first-child .social-media { grid-row: 3; grid-column: 2; } } }
#contact-section { max-width: 1024px; }
#contact-section article { font-family: "Crave Text Web", Georgia, serif; font-size: 160%; font-weight: 400; max-width: 35em; }
#contact-section article b, #contact-section article strong { font-weight: 400; }

#contact-form .spam .inputs { display: inline-block; white-space: nowrap; }
#contact-form .spam input { display: inline-block; margin: 0 0.5em; width: 3em; text-align: center; }

/* SUPPORT */
#support-content { max-width: 1024px; }

dl.faq > dt { font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-style: italic; margin-top: 2em; font-size: 1.5rem; }

dl.faq-categories > dt { font-size: 2rem; font-weight: 200; line-height: 2; border-bottom: 1px solid var(--site-accent); }
dl.faq-categories > dd + dt { margin-top: calc(var(--gutter-vertical) / 2); }

dl.expando-faq > dt { font-size: 1.1rem; font-weight: 600; padding: 1rem 0 1rem 2.25rem; position: relative; }
dl.expando-faq > dt svg:first-child { display: block; position: absolute; left: 0; top: 1.25em; width: 1.25em; height: auto; transform: rotate(0); transition: transform 0.25s; }
dl.expando-faq > dt.current svg:first-child { transform: rotate(-180deg); }
dl.expando-faq > dd { overflow: hidden; box-sizing: border-box; padding-left: 2.25em; border-bottom: 1px solid var(--site-accent); transition: height 0.2s; }
dl.expando-faq > dd p:first-child { margin-top: 0; }

form.account-management-form { margin: 2rem auto; }
form.account-management-form p { text-align: center; }

#account-page a.profile { font-family: "Agent Sans UI", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 400; text-transform: uppercase; text-decoration: none; font-size: 0.9rem; }
#account-page main section h3 { font-size: 1.5rem; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; text-transform: capitalize; margin-bottom: 0.5rem; }
#account-page main section + section { margin-top: 3rem; }
#account-page section.profile { position: relative; }
#account-page section.profile address { font-size: 2rem; font-family: "Agent Sans Web", "Lucida Grande", "Lucida Sans Unicode", sans-serif; font-weight: 100; margin: 0.2em 0; }
#account-page section.profile a.logout { margin-top: 1rem; display: block; width: 12em; text-align: center; }
@media (min-width: 720px) { #account-page section.profile a.logout { position: absolute; top: 2.4rem; right: 0; margin-top: 0; } }
#account-page section.order-history h3 a { display: block; }
@media (min-width: 720px) { #account-page section.order-history h3 a { display: inline-block; margin-left: 1em; } }

#user-profile-page h3 { margin: 2em 0 1em; }
#user-profile-page #address-book ul.addresses > li + li { margin-top: 2em; }
#user-profile-page #address-book form > fieldset.edit { display: none; }
#user-profile-page #address-book .buttons { margin-top: 1em; text-align: center; }
#user-profile-page #address-book .buttons button { margin-top: 0.5em; }
#user-profile-page #address-book .buttons .delete { background: #e51727; }
#user-profile-page #address-book .buttons .cancel { display: none; }
#user-profile-page #address-book .buttons .save { background: #017290; display: none; }
#user-profile-page #address-book form.editing address { display: none; }
#user-profile-page #address-book form.editing .add-address { display: none; }
#user-profile-page #address-book form.editing .buttons .cancel, #user-profile-page #address-book form.editing .buttons .save { display: inline-block; }
#user-profile-page #address-book form.editing .buttons .edit, #user-profile-page #address-book form.editing .buttons .delete { display: none; }
#user-profile-page #address-book form.editing > fieldset.edit { display: block; }

@supports (display: grid) { @media (min-width: 720px) { #user-profile-page #address-book form { display: grid; grid-template-columns: auto 12em; grid-gap: 2em; align-items: center; }
    #user-profile-page #address-book .buttons button { display: block; width: 100%; } } }
#order-list > li + li { margin-top: 1rem; border-top: 1px solid #017290; padding-top: 1rem; }

dl.order-detail dt { margin-top: 1em; }
dl.order-detail > dt { margin-bottom: 0.25em; }
dl.order-detail dt.fundamental + dd { font-size: 200%; font-weight: 100; }
dl.order-detail dt.grand-total + dd { text-align: left; }
dl.order-detail ul.product-list { padding-bottom: 1rem; border-bottom: 1px dotted #017290; margin-bottom: 1rem; }
dl.order-detail ul.product-list > li { list-style: none; margin-top: 1rem; border-top: 1px dotted #017290; padding-top: 1rem; }
dl.order-detail ul.product-list > li::before { content: none; }
dl.order-detail ul.product-list > li dt.download[data-count="0"], dl.order-detail ul.product-list > li dt.download[data-count="0"] + dd { display: none; }
dl.order-detail ul.product-list > li dt.download + dd a { display: block; }

@supports (display: grid) { @media (min-width: 720px) { dl.order-detail { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
    dl.order-detail dt { margin-top: 0; }
    dl.order-detail > dt.fundamental { grid-row: 1; }
    dl.order-detail > dt.fundamental + dd { grid-row: 2; }
    dl.order-detail > dt.order-number, dl.order-detail > dt.order-number + dd { grid-column: 1; }
    dl.order-detail > dt.order-date, dl.order-detail > dt.order-date + dd { grid-column: 2; }
    dl.order-detail > dt.grand-total, dl.order-detail > dt.grand-total + dd { grid-column: 3; justify-self: end; }
    dl.order-detail > dt.order-contents { display: none; }
    dl.order-detail > dt.order-contents + dd { grid-row: 3; grid-column: 1/4; }
    dl.order-detail > dt.licensee, dl.order-detail > dt.purchased-by, dl.order-detail dt.payment-method { grid-row: 4; }
    dl.order-detail > dt.licensee + dd, dl.order-detail > dt.purchased-by + dd, dl.order-detail dt.payment-method + dd { grid-row: 5; padding-top: 0.5em; }
    dl.order-detail > dt.licensee { grid-column: 1; }
    dl.order-detail > dt.licensee + dd { grid-column: 1; }
    dl.order-detail > dt.purchased-by { grid-column: 2; }
    dl.order-detail > dt.purchased-by + dd { grid-column: 2; }
    dl.order-detail > dt.payment-method { grid-column: 3; }
    dl.order-detail > dt.payment-method + dd { grid-column: 3; }
    dl.order-detail > dt.contact, dl.order-detail > dt.contact + dd { grid-row: 5; grid-column: 3; align-self: end; }
    dl.order-detail ul.product-list > li > dl > dt { display: block !important; }
    dl.order-detail ul.product-list > li + li { margin-top: 0; border-top: none; padding-top: 0; }
    dl.order-detail ul.product-list > li + li > dl > dt { display: none !important; }
    dl.order-detail ul.product-list > li > dl { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; }
    dl.order-detail ul.product-list > li > dl > dt { grid-row: 1; }
    dl.order-detail ul.product-list > li > dl > dd { grid-row: 2; margin-top: 0.25em; }
    dl.order-detail ul.product-list > li > dl > dt.item-price, dl.order-detail ul.product-list > li > dl > dt.item-price + dd { grid-column: 3; justify-self: start; }
    dl.order-detail ul.product-list > li > dl > dt.download { grid-column: 3; justify-self: end; }
    dl.order-detail ul.product-list > li > dl > dt.download + dd { grid-column: 3; justify-self: end; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    dl.order-detail ul.product-list > li > dl > dt.download + dd a { text-align: right; } } }

/*# sourceMappingURL=positype.css.map */