/* normalize 3.0.2 and skeleton 2.0.4 */

img,legend{border:0}
h1,h2,h3{letter-spacing:-.1rem}
pre,textarea{overflow:auto}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent;color:#1EAEDB}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,optgroup,strong{font-weight:700}
dfn{font-style:italic}
h1{margin:.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
body,h6{line-height:1.6}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid silver;margin:0 2px}
legend{padding:0}
table{border-collapse:collapse;border-spacing:0}
.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}
ol,p,ul{margin-top:0}
.column,.columns{width:100%;float:left;box-sizing:border-box}
@media (min-width:400px){.container{width:85%;padding:0}
}
html{font-size:62.5%}
body{font-size:1.5em;font-weight:400;font-family:Raleway,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#222}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}
h1{font-size:4rem;line-height:1.2}
h2{font-size:3.6rem;line-height:1.25}
h3{font-size:3rem;line-height:1.3}
h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}
h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}
h6{font-size:1.5rem;letter-spacing:0}
@media (min-width:550px){.container{width:80%}
.column,.columns{margin-left:4%}
.column:first-child,.columns:first-child{margin-left:0}
.one.column,.one.columns{width:4.66666666667%}
.two.columns{width:13.3333333333%}
.three.columns{width:22%}
.four.columns{width:30.6666666667%}
.five.columns{width:39.3333333333%}
.six.columns{width:48%}
.seven.columns{width:56.6666666667%}
.eight.columns{width:65.3333333333%}
.nine.columns{width:74%}
.ten.columns{width:82.6666666667%}
.eleven.columns{width:91.3333333333%}
.twelve.columns{width:100%;margin-left:0}
.one-third.column{width:30.6666666667%}
.two-thirds.column{width:65.3333333333%}
.one-half.column{width:48%}
.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}
.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}
.offset-by-three.column,.offset-by-three.columns{margin-left:26%}
.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}
.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}
.offset-by-six.column,.offset-by-six.columns{margin-left:52%}
.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}
.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}
.offset-by-nine.column,.offset-by-nine.columns{margin-left:78%}
.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}
.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}
.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}
.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}
.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}
h1{font-size:5rem}
h2{font-size:4.2rem}
h3{font-size:3.6rem}
h4{font-size:3rem}
h5{font-size:2.4rem}
h6{font-size:1.5rem}
}
a:hover{color:#0FA0CE}
.button,button,input[type=button],input[type=reset],input[type=submit]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}
.button:focus,.button:hover,button:focus,button:hover,input[type=button]:focus,input[type=button]:hover,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:focus,input[type=submit]:hover{color:#333;border-color:#888;outline:0}
.button.button-primary,button.button-primary,input[type=button].button-primary,input[type=reset].button-primary,input[type=submit].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}
.button.button-primary:focus,.button.button-primary:hover,button.button-primary:focus,button.button-primary:hover,input[type=button].button-primary:focus,input[type=button].button-primary:hover,input[type=reset].button-primary:focus,input[type=reset].button-primary:hover,input[type=submit].button-primary:focus,input[type=submit].button-primary:hover{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}
input[type=email],input[type=text],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=search],select,textarea{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}
input[type=email],input[type=text],input[type=tel],input[type=url],input[type=password],input[type=number],input[type=search],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}
textarea{min-height:65px;padding-top:6px;padding-bottom:6px}
input[type=email]:focus,input[type=text]:focus,input[type=tel]:focus,input[type=url]:focus,input[type=password]:focus,input[type=number]:focus,input[type=search]:focus,select:focus,textarea:focus{border:1px solid #33C3F0;outline:0}
label,legend{display:block;margin-bottom:.5rem;font-weight:600}
fieldset{padding:0;border-width:0}
input[type=checkbox],input[type=radio]{display:inline}
label>.label-body{display:inline-block;margin-left:.5rem;font-weight:400}
ul{list-style:circle inside}
ol{list-style:decimal inside}
ol,ul{padding-left:0}
ol ol,ol ul,ul ol,ul ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}
.button,button,li{margin-bottom:1rem}
code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}
pre>code{display:block;padding:1rem 1.5rem;white-space:pre}
td,th{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}
fieldset,input,select,textarea{margin-bottom:1.5rem}
blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}
.u-full-width{width:100%;box-sizing:border-box}
.u-max-full-width{max-width:100%;box-sizing:border-box}
.u-pull-right{float:right}
.u-pull-left{float:left}
hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}
.container:after,.row:after,.u-cf{content:"";display:table;clear:both}


/* Gifty CSS - general */

.container {
    margin-top: 3rem;
}

button {
    padding: 0 1.5rem;
    font-size: 1.5rem;
    background-color: white;
}

.button-subtext {
    color: #888;
}

button.button-primary {
    background-color: #b21972;
    border-color: #b21972;
}

button.button-primary:hover,
button.button-primary:focus
{
    background-color: #77114c;
    border-color: #77114c;
}

/* Greyed out while htmx has a request in flight (hx-disabled-elt). */
button:disabled,
button.button-primary:disabled,
button.button-primary:disabled:hover,
button.button-primary:disabled:focus {
    background-color: #ccc;
    border-color: #ccc;
    color: #fff;
    cursor: default;
}

a {
    color: #b21972;
}

a:hover {
    color: #77114c;
}

/* Outside markers hang left of the text, so wrapped lines line up with the first. */
ul,
ol {
    list-style-position: outside;
    padding-left: 2rem;
}

li {
    text-indent: 0;
    padding-left: 0;
}

/* Markerless lists laid out by hand: the indent above would push them off-centre. */
.navbar-list,
.footer ul {
    padding-left: 0;
}

blockquote {
    margin: 0 2rem;
}

/* Mirrors Skeleton's focus selectors, so no input keeps its default blue border. */
input[type=email]:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=search]:focus,
select:focus,
textarea:focus {
    border: 1px solid #b21972;
}

form {
    margin: 0 0 0.5rem 0;
}

.form-error {
    margin-top: -2rem;
    color: red;
}

.input-error {
    margin: -1rem 0 1rem 0;
    color: red;
}

/* Settings colour chooser: a radio and a primary-colour swatch per option. */
.color-schemes {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    /* An input's height, so swatches line up with the field beside them. */
    min-height: 3.8rem;
    align-items: center;
    /* Level with the fields beside it, which carry Skeleton's own margin. */
    margin-bottom: 1.5rem;
}

.color-scheme {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}

.color-scheme input {
    margin: 0;
    cursor: pointer;
}

.color-swatch {
    display: inline-block;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 3px;
    /* So a pale scheme still reads as a swatch rather than a gap. */
    border: 1px solid rgba(0, 0, 0, 0.15);
}

label {
    margin-bottom: 0.2rem;
}

.label-subtext {
    color: #aaa;
    float: right;
}

label.checkbox-label {
    display: inline;
    margin-left: 0.5rem;
}

form button {
    margin-top: 1rem;
}

p {
    margin: 1.2rem 0;
}

textarea {
    margin-bottom: 0.7rem;
}

.input-close {
    color: #ddd;
    text-decoration: none;
    float: right;
    margin-top: -2.5rem;
}

.input-close:hover {
    color: #f0f0f0;
}

.beside-button {
    padding-left: 0.5rem;
}

h2 {
    margin-top: 3rem;
}

.desktop {
    display: none;
}
.mobile {
    display: inline;
}

img.solo {
    margin-top: 1.5rem;
}


/* homepage */

body.home {
    background-position: -275px 0;
    background-size: 743px 300px;
    background-repeat: no-repeat;
}

.home h1 {
    margin: 4rem 0 -1rem 0;
    font-size: 6rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    min-height: 14.5rem;
}

.home h1,
.home h2,
.home .hero .subtitle,
.home .hero .column,
.home .bottom-action {
    text-align: center;
}

.bottom-action {
    margin-top: 5rem;
}

.home .subtitle {
    margin: 3rem 0 0 0;
    font-size: 2.3rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    min-height: 7.5rem;
}

.hero {
    margin-bottom: 7rem;
}

.hero-actions {
    margin: 5.3rem auto 0 auto;
    width: 27rem;
    height: 6rem;
    padding: 1.5rem 0;
    background: #eee;
    border-radius: 3px;
}

.hero .create-registry {
    text-align: center;
}

.hero .create-registry .button-subtext {
    margin-top: -0.5rem;
    color: #888;
    font-weight: bold;
}

.hero .find-registry {
    margin: 3rem 0 0 0;
    text-align: center;
}

#description {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.main-sign-in {
    position: absolute;
    top: 0.7rem;
    right: 0.9rem;
    z-index: 60;
}

.scroll-down-arrow {
    display: none;
}

.scroll-down-arrow img {
    width: 5rem;
    /* An edge for the white arrow: drop-shadow follows the PNG's alpha. */
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.8))
            drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}



/* footer */

.footer-line {
    border-top: 1px solid #ddd;
    margin-top: 3rem;
}

.footer {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.footer ul {
    float: right;
    margin: 0;
}

.footer li {
    display: inline;
    list-style-type: none;
}

/* Inline list items would otherwise run together with only a space. */
.footer li + li {
    margin-left: 2rem;
}

.footer a {
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.logo {
    float: left;
    margin: -7px 0 -10px 0;
    width: 32px;
    line-height: 32px;
    font-size: 30px;
    text-align: center;
    color: white;
    background-color: #ddd;
    border-radius: 3px;
}

.logo:after {
    content: 'G';
}

.how-it-works-diagram {
    border: solid 1px #ddd;
    border-radius: 3px;
}

/* flashed messages */

.flash-message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    z-index: 101;
    background-color: #a6c46d;
    color: #f8fcf8;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s;
}

.flash-message .inner {
    margin: 0 auto;
    max-width: 60rem;
}

.flash-message.error {
    background-color: #f00;
}

.flash-message.hidden {
    opacity: 0;
}


/* modal popups */

.modal-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99;
    overflow: auto;
}

.modal {
    position: relative;
    border-radius: 3px;
    background: white;
    margin: 0.5rem;
    padding: 1.5rem 2rem 0.5rem 2rem;
    z-index: 5;
}

.modal h2 {
    margin-top: 0;
}

.modal .container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.modal-close {
    color: #ddd;
    font-size: 18px;
    line-height: 28px;
    position: absolute;
    text-align: center;
    right: 6px;
    top: 6px;
    width: 28px;
    text-decoration: none;
    z-index: 500;
}

.modal-close:hover {
    color: #f0f0f0;
}


/* registry and gifts */

/* Narrower than the rest of the page, as the old registry was. */
.registry-main {
    margin: 0 auto;
    max-width: 60rem;
}

.category {
    font-size: 2.5rem;
    font-weight: bold;
    color: #b21972;
    border-bottom: solid 1px #aaa;
}

.gift-name {
    font-weight: bold;
}

.gift-name a, .gift-name a:hover, .gift-name a:visited {
    text-decoration: none;
    color: #222;
}

.gift-quantity {
    color: #aaa;
    font-weight: bold;
}

.gift-price {
    padding-left: 1.6rem;
}

.gift-link {
    padding-left: 1.6rem;
}

/* The gap belongs to the gift, not to its optional details paragraph. */
.gift {
    margin-bottom: 1.5rem;
}

.gift p {
    margin: 0;
}

/* Clearfix for the cross-off/un-cross buttons, which float right. */
.gift:after {
    content: "";
    display: table;
    clear: both;
}

/* A secondary action inline to the right of a button (legacy Gifty's rule). */
.beside-button {
    padding-left: 1rem;
}

.registry-message {
    color: #888;
}

.bought {
    color: #aaa;
    text-decoration: line-through;
}

.bought a, .bought a:hover, .bought a:visited {
    color: #aaa;
}

.bought-by {
    float: right;
    text-decoration: none;
    color: #222;
    font-style: italic;
}

.category-crossed {
    color: #aaa;
}

.registry-add-gift,
.registry-image button,
.registry-message button,
.gift-button,
.undo-button,
/* Direct child, so this can't reach into the Manage menu's items. */
.main-sign-in > button,
.main-sign-in > .manage-menu > summary
{
    font-size: 1rem;
    padding: 0 1rem;
    line-height: 1rem;
    height: 2.3rem;
    margin-bottom: 0;
}

.main-sign-in > button,
.main-sign-in > .manage-menu > summary {
    font-size: 1.2rem;
    padding: 0 1.4rem;
    height: 2.8rem;
}

.main-sign-in > .manage-menu > summary {
    padding: 0 0.9rem 0 1.4rem;
}

/* The couple's Manage dropdown: a <details>, so opening it needs no JS. */
.manage-menu {
    display: inline-block;
    position: relative;
}

.manage-menu > summary {
    /* Remove the disclosure triangle; .button supplies the chrome. */
    list-style: none;
    display: inline-flex;
    align-items: center;
}

.manage-menu > summary::-webkit-details-marker {
    display: none;
}

/* Our own arrow, pointing the way the menu will move. */
.manage-menu > summary::after {
    content: "▼";
    margin-left: 0.5rem;
}

.manage-menu[open] > summary::after {
    content: "▲";
}

/* Out of flow so the page doesn't move; right-aligned to fit narrow screens. */
.manage-menu > ul {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0.4rem 0 0 0;
    padding: 0.5rem 0;
    min-width: 18rem;
    list-style: none;
    text-align: left;
    background: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Undo the site-wide "li" hanging indent, which misaligns menu items. */
.manage-menu > ul li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}

/* Items are <a>s except Sign out, a real <button>: reset both to match. */
.manage-menu > ul a,
.manage-menu > ul button {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0;
    background: none;
    color: #333;
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.6;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.manage-menu > ul a:hover,
.manage-menu > ul a:focus,
.manage-menu > ul button:hover,
.manage-menu > ul button:focus {
    color: #b21972;
    background: #f7f7f7;
    text-decoration: none;
}

/* Sign out isn't one of the editing actions above it. */
.manage-menu-last {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e1e1e1;
}

/* Skeleton's form margin would leave a gap under Sign out. */
.manage-menu > ul form {
    margin: 0;
}

.gift-button {
    float: right;
    margin-left: 1rem;
    /* Opaque, because these sit over page text. */
    background-color: #fff;
}

/* An <a> styled as a button doesn't centre its label; flex does it. */
a.gift-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.undo-button {
    float: right;
    border: none;
    color: #888;
    padding-right: 0;
}

.undo-button:hover {
    color: #333;
}

.registry-top {
    position: relative;
}

.registry-manage {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 50;
    margin: -2rem -1.2rem 0 0;
    width: 65px;
    height: 15px;
    padding: 3px 10px;
    color: #555;
    background-color: white;
    text-align: right;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    white-space: nowrap;
    transition: width 0.25s, height 0.25s;
}

.registry-manage:hover {
    color: #333;
    border-color: #888;
}

.registry-manage .registry-manage-menu {
    transition: opacity 0.25s;
}

.registry-manage.closed .registry-manage-menu {
    opacity: 0;
    display: none;
}

.registry-manage.open {
    height: 11.8rem;
    width: 14.2rem;
}

.registry-manage.open .buttonText:after {
    content: ' ▲';
}

.registry-manage.closed .buttonText:after {
    content: ' ▼';
}

.registry-image {
    position: relative;
    margin-top: 2rem;
}

.registry-image button {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.registry-add-gift {
    float: right;
}


/* media CSS min-width overrides */

@media (min-width:400px) {

body.home {
    background-position: -195px 0;
}

.container {
    width: 100%;
    padding: 0 20px;
}

.home h1 {
    margin: 2rem 0 -1rem 0;
    font-size: 7rem;
}

}  /* end @media (min-width: 400px) */


@media (min-width: 518px) {

.home h1 {
    font-size: 7.5rem;
}

}  /* end @media (min-width: 518px) */


@media (min-width: 550px) {

.desktop {
    display: inline;
}
.mobile {
    display: none;
}

body.home {
    background-position: top;
    background-size: 1920px 775px;
}

.home h1 {
    margin: 4rem 0 2rem 0;
    font-size: 12rem;
}

.home .subtitle {
    margin: -1rem 0 10rem 0;
    font-size: 3.3rem;
}

.hero {
    margin-bottom: 20rem;
}

.hero-actions {
    margin: 11rem auto 0 auto;
    width: 56rem;
    height: 6rem;
    background: rgba(255, 255, 255, 0.6);
}

.hero .create-registry {
    margin: 0 0 0 1.3rem;
    float: left;
    text-align: center;
}

.hero .find-registry {
    float: right;
    margin: 0 1.3rem 0 0;
}

.hero .create-registry .button-subtext {
    color: #555;
}

.registry-admin button {
    margin-bottom: 4rem;
}

button {
    padding: 0 3rem;
}

.modal {
    width: 60rem;
    margin: 5% auto;
}

.registry-image {
    margin: 0;
}

.scroll-down-arrow {
    display: block;
    position: absolute;
    left: 50%;
    bottom: -0.5rem;
    margin-left: -2.5rem;
    opacity: 0.6;
}

.registry-manage {
    margin: 0 0.8rem 0 0;
}

}  /* end @media (min-width: 550px) */


/* Past 827px the arrow floats below the photo; after the block above, so it wins. */
@media (min-height: 827px) {
    .scroll-down-arrow {
        display: none;
    }
}


@media (min-width: 869px) {

.hero {
    margin-bottom: 35rem;
}

}  /* end @media (min-width: 870px) */


/* browser-specific fixes */

input:-ms-input-placeholder {
    color: #bba9a9;
}

textarea:-ms-input-placeholder {
    color: #bba9a9;
}


/* ############################### */

/* The wedding-page nav: flex, not Skeleton's fixed-height bar, so links wrap. */
.navbar {
    width: 100%;
    background: #fff;
    z-index: 99;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; }
.navbar-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2.4rem;
    list-style: none;
    margin-bottom: 0; }
.navbar-item {
    /* The usual li hanging indent would drag these off the bar. */
    text-indent: 0;
    padding-left: 0;
    margin-bottom: 0; }
.navbar-link {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .2rem;
    text-decoration: none;
    /* Padding, not line-height, which gave wrapped rows the bar's full height. */
    line-height: 1.6;
    padding: 1.4rem 0;
    color: #222; }
.navbar-link.active {
    color: #33C3F0; }

/* Wedding pages are centred; the gift list reads as a table, so it isn't. */
.navbar-list {
    justify-content: center;
}

.wedding-title {
    text-align: center;
    /* Room to breathe around the couple's names. */
    margin: 3.5rem 0 3rem;
}

.content-area {
    text-align: center;
    /* Clear of the nav's bottom rule. */
    margin-top: 2.5rem;
}

/* Desktop proportions; after the min-width section above, to win on source order. */
@media (min-width: 550px) {
    .navbar-list {
        column-gap: 3.5rem;
    }
    .navbar-link {
        padding: 2.4rem 0;
    }
    .wedding-title {
        margin: 6rem 0 4.5rem;
    }
    .content-area {
        margin-top: 4rem;
    }
}

/* The current page renders as a <span>, so it stands out from the links. */
span.navbar-link {
    font-weight: 600;
}


/* edit pages / edit page content */

.page-edit-row {
    margin-bottom: 1rem;
}

.page-drag-handle,
.page-edit-row input[type="text"],
.page-edit-row .button-link {
    vertical-align: middle;
}

.page-edit-row input[type="text"] {
    margin-bottom: 0;
}

/* Without touch-action the browser claims the drag as a scroll and Sortable
   never starts; the rest keeps a long press from selecting the glyph. */
.page-drag-handle,
.section-drag-handle {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Thumb-sized, and no taller than the title input beside it. */
.page-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    min-height: 3.8rem;
    color: #999;
    cursor: grab;
}

/* Holds the handle column for the home row, without offering a grip. */
.page-drag-handle-fixed {
    cursor: default;
    touch-action: auto;
}

/* The home row's title: disabled, but settled rather than broken. */
.page-edit-row input[disabled] {
    background-color: #fafafa;
    color: #888;
    cursor: default;
}

/* Clear of the title input: a text link has no chrome to space it out. */
.page-edit-row .button-link {
    margin-left: 1rem;
}

/* Air on both sides, so a bare text link reads as its own thing. */
.page-add {
    display: inline-block;
    margin: 1rem 0 2rem 0;
}

/* normalize's [hidden] loses to .page-add on source order; say it again. */
.page-add[hidden] {
    display: none;
}

/* Two of these side by side (Add page, Add registry back) need parting. */
.page-add + .page-add {
    margin-left: 2rem;
}

/* Says why "Add page..." has gone grey; hidden until it has. */
.limit-note {
    margin-left: 1rem;
    color: #777;
    font-size: 1.3rem;
}

.button-link {
    background: none;
    border: none;
    height: auto;
    padding: 0;
    color: #b21972;
    font-size: 1.4rem;
    line-height: normal;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
}

.button-link:hover,
.button-link:focus {
    color: #77114c;
    text-decoration: underline;
}


/* A two-column grid: sections span both, people take one each from 550px up. */
.content-area {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    /* The one place the space between sections is decided. */
    row-gap: 4rem;
    /* And the same below the last one, clear of the footer rule. */
    margin-bottom: 4rem;
}

/* Every child, not just .section: stray paragraphs are direct children too. */
.content-area > * {
    grid-column: 1 / -1;
}

/* A trailing margin would add to row-gap, so only the last child loses its. */
.content-area > *,
.content-area > * > :last-child {
    margin-bottom: 0;
}

.person-photo {
    display: block;
    width: 100%;
    /* Capped and centred, so nobody gets a page-wide portrait. */
    max-width: 30rem;
    margin: 0 auto 1.5rem auto;
    /* A uniform square crop, so a row of people lines up. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.person-name {
    margin-bottom: 0.5rem;
    font-size: 2.4rem;
}

.person-role {
    margin-bottom: 1rem;
    color: #999;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: .15rem;
}

@media (min-width: 550px) {
    .content-area > .section-person {
        grid-column: auto;
    }
}

/* Photo sections: both full width on a phone, where half would be a stamp. */
.section-photo-full-width img,
.section-photo-half-width img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 550px) {
    .section-photo-half-width img {
        width: 50%;
    }
    /* Prose reads badly in a wide measure, and worse centred. */
    .section-text,
    .content-area > .registry-message {
        max-width: 66%;
        margin-left: auto;
        margin-right: auto;
    }
}

.section-edit-row {
    margin-bottom: 1.5rem;
}

.section-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.section-edit-header label,
.section-edit-header button {
    margin: 0;
}

.section-edit-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Thumb-sized too; the negative margin keeps the header row as tight as before. */
.section-drag-handle {
    display: inline-flex;
    justify-content: center;
    min-width: 2.4rem;
    padding: 0.9rem 0;
    margin: -0.9rem 0;
    color: #999;
    cursor: grab;
}

.section-textarea {
    min-height: 190px;
}

/* A person's editor row: photo widget, with the fields beside it above 550px. */
.person-editor {
    margin-bottom: 1.5rem;
}

.person-editor .photo-editor {
    margin-bottom: 1.5rem;
}

.person-bio-textarea {
    min-height: 90px;
    margin-bottom: 0;
}

@media (min-width: 550px) {
    .person-editor {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }
    .person-editor .photo-editor {
        margin-bottom: 0;
    }
    .person-fields {
        flex: 1;
    }
}

/* The formatting-help modal's "what you type / what you get" table. */
.markdown-help {
    margin-bottom: 1.5rem;
}

.markdown-help td,
.markdown-help th {
    vertical-align: middle;
}

/* A real 4.2rem heading would swamp a table cell. */
.markdown-help-heading {
    margin: 0;
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: normal;
}

/* An aside under a "what you type" example, in ordinary text. */
.markdown-help-note {
    display: block;
    margin-top: 0.5rem;
    color: #888;
    font-size: 1.3rem;
}

.markdown-help-more {
    margin-bottom: 1.5rem;
}

/* A photo section's thumbnail with its "Upload..." button alongside. */
.photo-editor {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.photo-editor button {
    margin-bottom: 0;
    background-color: #fff;
}

/* A fixed box whatever the photo's shape; the empty state below matches it. */
.photo-thumbnail {
    width: 16rem;
    height: 10rem;
    object-fit: cover;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.photo-thumbnail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #fafafa;
    color: #999;
    font-size: 1.3rem;
}

.upload-note {
    color: #777;
    font-size: 1.3rem;
}

/* Separates the modal's two ways of adding a photo. */
.upload-or {
    color: #777;
    font-style: italic;
    margin-bottom: 1rem;
}

/* Submit button with the upload spinner beside it. The button's own bottom
   margin moves to the row, so the spinner lines up with the button itself. */
.upload-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.upload-actions button {
    margin-bottom: 0;
}

/* Shown only while an htmx request is in flight: htmx's own styles fade
   .htmx-indicator in on the enclosing form's .htmx-request class. */
.spinner {
    margin-top: 0.8rem;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid #e5e5e5;
    border-top-color: #b21972;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Superuser screens (/_admin). Deliberately plain: dense tables. */

/* Wider than the couple's 960px: dense tables, so fewer scroll sideways. */
.container.superuser {
    max-width: 1500px;
}

.superuser-nav {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1.4rem;
}

.superuser-nav form {
    margin: 0;
}

/* Wide tables scroll inside their own box rather than the page. */
.superuser-scroll {
    overflow-x: auto;
}

.superuser-table {
    font-size: 1.3rem;
    white-space: nowrap;
}

.superuser-table th,
.superuser-table td {
    padding: 0.4rem 1rem 0.4rem 0;
    /* Short cells line up with the first line of a tall neighbour. */
    vertical-align: top;
}

/* The rate limiters' reset button is a form of its own per row, like the
   ones in the nav above: without this its margin sets the row's height. */
.superuser-table form {
    margin: 0;
}

.superuser-table .button-link {
    margin: 0;
    font-size: inherit;
}

/* A cell of prose (gift details): as wide as it needs, up to a limit, then wrapped. */
.superuser-table td.superuser-wrap {
    max-width: 40ch;
    white-space: normal;
}

.superuser-totals {
    font-weight: bold;
}

/* Stats bar: the width comes from an inline style, scaled per table. */
.superuser-bar {
    background-color: #ddd;
}

.superuser h2 {
    margin-top: 3rem;
}