/* ===========================================================================
   Daphne's Fantasies (dfn) storefront styles
   ---------------------------------------------------------------------------
   Styles both the portal landing page (home.html) and the service/account
   pages (login, join, offer, age gate, error) so the whole site coordinates.
   Follows the mct theme's palette and type feel.

   Palette
     bg              #110022   page background
     topbar          #0d0018
     band A / band B #150a24 / #12081f   alternating property bands
     network extra   #0e0619
     accent          #c97bdb   (brand violet)
     accent bright   #e8a0bf   (brand pink; hover)
     chip border     #2a2a3e
     rail divider    #2c2140
   Type
     body            Alegreya Sans
     UI / labels     Nunito
     brand wordmark  "Daphne Script"  (areminiscentsmile, self-hosted)
     property marks  Public Gothic Vintage (MCT) / Anton (MCC) / DM Serif (MCP)
   =========================================================================== */

/* ---- Brand & display faces (self-hosted) -------------------------------- */
@font-face {
    font-family: 'Daphne Script';
    src: url('/static/dfn/fonts/areminiscentsmile-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Daphne Script';
    src: url('/static/dfn/fonts/areminiscentsmile-RegularOblique.ttf') format('truetype');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Daphne Script';
    src: url('/static/dfn/fonts/areminiscentsmile-Thin.ttf') format('truetype');
    font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Daphne Script';
    src: url('/static/dfn/fonts/areminiscentsmile-ThinOblique.ttf') format('truetype');
    font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Public Gothic Vintage';
    src: url('/static/dfn/fonts/PublicGothicVintage.woff2') format('woff2'),
         url('/static/dfn/fonts/PublicGothicVintage.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

/* ---- Shiver: TerrorXXX logo hover (matches daphnesfantasies.com) --------- */
@keyframes t3xShiver {
      0% { transform: translate(0,0)        rotate(0);      }
     20% { transform: translate(-1.5px,1px) rotate(-.4deg); }
     40% { transform: translate(1.5px,-1px) rotate(.4deg);  }
     60% { transform: translate(-1px,-1.5px) rotate(-.3deg);}
     80% { transform: translate(1px,1.5px)  rotate(.3deg);  }
    100% { transform: translate(0,0)        rotate(0);      }
}

/* ===== Base ============================================================== */
* { box-sizing: border-box; }

body {
    background: #110022;
    font-family: 'Alegreya Sans', sans-serif;
    color: #ddd;
    font-weight: 400;
    font-size: 14pt;
    margin: 0;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; }

a:link,    a:visited { color: #c97bdb; font-weight: 700; text-decoration: none; }
a:hover,   a:active  { color: #e8a0bf; font-weight: 700; text-decoration: none; }

/* ===== Top bar (header block) =========================================== */
.dfn-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 34px;
    background: #0d0018;
    border-bottom: 1px solid #241633;
}

.dfn-logo { display: flex; align-items: center; }
.dfn-logo img { height: 34px; width: auto; display: block; border-radius: 8px; }

.dfn-nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
    font-weight: 700;
}
.dfn-nav ul li:not(:last-child)::after { content: "|"; color: #463357; margin-left: 14px; }
.dfn-nav a:link, .dfn-nav a:visited { color: #eee; }
.dfn-nav a:hover, .dfn-nav a:active { color: #e8a0bf; }
.dfn-nav .cart-badge,
.dfn-nav .chat-badge {
    display: inline-block; margin-left: 4px; padding: 0 6px;
    background: #c97bdb; color: #150022; border-radius: 10px;
    font-size: 11px; font-weight: 800;
}

/* ===== Hero ============================================================== */
.dfn-hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: #000;
}
.dfn-hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    opacity: .9;
}
.dfn-hero-logo {
    /* Age-gated fallback for the hero video (#498): DF wordmark lockup
       centered on the black hero. inset:0 + margin:auto centers the
       intrinsically-sized image on both axes. */
    position: absolute; inset: 0; margin: auto;
    max-width: 72%; max-height: 46%;
    object-fit: contain;
}
.dfn-hero-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(11,0,24,.90) 0%,
        rgba(11,0,24,.35) 45%,
        rgba(17,0,34,.55) 100%);
}
.dfn-hero-content {
    position: absolute;
    left: 52px; bottom: 46px;
    max-width: 940px;
}
.dfn-wordmark {
    margin: 0;
    font-family: 'Daphne Script', 'Playfair Display', cursive;
    font-weight: 400;
    font-size: 58px;
    line-height: .9;
    color: #fff;
    letter-spacing: .01em;
    text-shadow: 0 6px 34px rgba(0,0,0,.6);
    border: 0;
}
.dfn-hero-rule {
    display: block;
    width: 64px; height: 3px;
    margin: 16px 0 14px;
    background: #c97bdb;
    border-radius: 2px;
}
.dfn-hero-tagline {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .06em;
    color: #cdbfe0;
}

/* ===== Portal: property bands =========================================== */
.portal-matrix { margin: 0; }

.property-block {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #241633;
    background: #150a24;
}
.property-block:nth-of-type(even) { background: #12081f; }

.property-rail {
    width: 284px;
    flex: none;
    padding: 34px 30px;
    border-right: 1px solid #2c2140;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.property-name {
    margin: 0;
    border: 0;
    line-height: .92;
    font-size: 38px;
    color: #e7ddce;
}
/* Optional per-property logo. Sits INSIDE .property-name (the <h2>) and replaces
   its text, so the section keeps a heading -- an img's alt is not a heading.
   Caps BOTH dimensions, for the reason .netlogo img already documents: logos
   vary in aspect ratio, and a width-only cap lets a tall/square mark's auto
   height grow unchecked. 224px = the rail's usable width (284 border-box - 60
   padding - 1 border, with the global border-box). 92px is a deliberate ceiling
   rather than a match for the ~35px wordmark: it allows a chunky lockup while
   staying well inside the ~168px of rail headroom the 210px feed chips leave, so
   the logo can never be what drives the band's height.
   display:block kills the inline line box, so the h2's line-height adds no
   leading above the image. */
.property-logo {
    max-width: 224px;
    max-height: 92px;
    display: block;
}
.property-visit {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13px;
}

/* Per-property wordmark treatments (prop-<code> hook) */
.prop-mct .property-name {
    font-family: 'Public Gothic Vintage', sans-serif;
    font-size: 40px; color: #ecdcf3; letter-spacing: .01em;
}
.prop-mcc .property-name {
    font-family: 'Anton', sans-serif;
    font-size: 37px; color: #f4e7c6; letter-spacing: .03em;
    text-transform: uppercase;
}
.prop-mcp .property-name {
    font-family: 'DM Serif Display', serif;
    font-size: 35px; color: #e7ddce;
}
/* dfx's own face (#544). Crimson-tinted cream rather than dfx's #ED1A4D accent:
   the accent is picked for dfx's white pages and reads muddy on this dark rail. */
.prop-dfx .property-name {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 800;
    font-size: 34px; color: #f2dbdf; letter-spacing: .02em;
    text-transform: uppercase;
}
/* ygh's own face (ADR 0344): Fredoka, the storefront wordmark font. Warm cream
   rather than ygh's brass (#c17a3f), which is tuned for its cream pages and
   goes dull on this dark rail -- the dfx precedent. */
.prop-ygh .property-name {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 36px; color: #f7e6c8; letter-spacing: .01em;
}

/* Recent-additions row: left-anchored; newest sits right within the group (#542) */
.feed {
    flex: 1;
    padding: 28px 34px;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

/* ===== Poster chip ====================================================== */
.feed-item {
    position: relative;
    width: 180px; height: 210px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #2a2a3e;
    display: block;
    transition: border-color .18s, transform .18s;
}
.feed-item:hover { border-color: #c97bdb; transform: translateY(-3px); }
.feed-item--new { border: 2px solid #c97bdb; }

.feed-item-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.feed-item-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(180deg, transparent, rgba(8,0,18,.92));
}
.feed-item-title {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-weight: 800; color: #fff; font-size: 14px; line-height: 1.2;
}
.feed-item-date {
    display: block;
    margin-top: 3px;
    font-family: 'Nunito', sans-serif;
    color: #b79cc9; font-size: 10px;
    letter-spacing: .07em; text-transform: uppercase;
}
.feed-badge-new {
    position: absolute; top: 9px; right: 9px;
    background: #c97bdb; color: #150022;
    font-family: 'Nunito', sans-serif;
    font-weight: 900; font-size: 9px;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 20px;
}

.portal-empty {
    padding: 48px 34px;
    font-size: 1rem; color: #b79cc9;
}

/* ===== Network extras (static-logo members) ============================= */
.network-extra {
    padding: 34px 44px 40px;
    background: #0e0619;
}
.network-extra-label {
    font-family: 'Nunito', sans-serif;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 12px;
    color: #7a7a95;
    font-weight: 800;
    margin-bottom: 18px;
}
.network-logos { display: flex; gap: 22px; flex-wrap: wrap; }
/* A tier header above a property block reuses the "Also in the network" label
   look but sits on the page background (not the .network-extra plate), so it
   carries its own horizontal padding to align with the property gutters. */
.tier-header { padding: 30px 44px 8px; margin-bottom: 0; }

.netlogo {
    width: 248px; height: 118px;
    border: 1px solid #2a2a3e;
    border-radius: 10px;
    background: #141020;
    display: flex; align-items: center; justify-content: center;
    padding: 16px 30px;
    transition: border-color .18s;
}
.netlogo:hover { border-color: #c97bdb; }
/* Cap both dimensions, not just width — logos vary in aspect ratio (wide
   wordmarks vs. square social marks). max-width/max-height shrinks any of them
   to fit the fixed chip without upscaling; the flex parent centers the result.
   The old width:100%;height:auto capped only width, so a square logo's auto
   height overflowed the chip. */
.netlogo img { max-width: 100%; max-height: 100%; display: block; }
.netlogo-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 900; font-size: 26px;
    letter-spacing: -.01em; color: #dcdce8;
}
/* TerrorXXX: darker plate, red hover edge + shiver */
.netlogo--shiver { background: #15070f; }
.netlogo--shiver:hover {
    border-color: #e01f2d;
    animation: t3xShiver .13s linear infinite;
}

/* ===== Footer =========================================================== */
footer {
    border-top: 1px solid #2a2036;
    margin-top: 0;
    padding: 26px 46px 34px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    color: #6a6a80;
    clear: both;
}
footer nav ul {
    list-style: none; margin: 0 0 10px; padding: 0;
}
footer nav ul li { display: inline; }
footer nav ul li:not(:last-child)::after { content: "|"; color: #3a3350; margin: 0 8px; }
footer a:link, footer a:visited { color: #8a8aa2; font-weight: 600; }
footer a:hover, footer a:active { color: #e8a0bf; }
footer p { margin: 0; }

/* ===== Age gate ========================================================= */
/* body.age-page + <div id="age_page"> come from the shared age_page.html.  */
body.age-page { background: #0e0619; }

#age_page {
    position: relative;
    max-width: 760px;
    margin: 40px auto 12px;
    border: 1px solid #2a2036;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 32%, rgba(17,0,34,.55), rgba(9,0,20,.95)),
        #110022;
    text-align: center;
}
.age-splash { padding: 56px 64px 40px; }
.age-splash-icon {
    height: 168px; width: auto; display: block; margin: 0 auto 26px;
    filter: drop-shadow(0 8px 30px rgba(0,0,0,.5));
}
.age-splash-kicker {
    margin: 0 0 20px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800; font-size: 11px;
    letter-spacing: .32em; text-transform: uppercase;
    color: #c97bdb;
}
.age-splash-wordmark {
    margin: 0;
    border: 0;
    font-family: 'Daphne Script', 'Playfair Display', cursive;
    font-weight: 400; font-size: 58px; line-height: .9;
    color: #fff; letter-spacing: .01em;
    text-shadow: 0 6px 30px rgba(0,0,0,.55);
}
.age-splash-copy {
    max-width: 440px;
    margin: 30px auto 0;
    font-size: 18px; line-height: 1.5; color: #cdbfe0;
}
.age-cta {
    display: inline-block;
    margin: 40px 0 0;
    font-family: 'Nunito', sans-serif;
    font-weight: 800; font-size: 16px;
    color: #fff !important;
    background: linear-gradient(135deg, #c97bdb, #e8a0bf);
    padding: 15px 52px; border-radius: 8px;
    letter-spacing: .02em;
    box-shadow: 0 12px 30px rgba(201,123,219,.32);
    transition: transform .15s, box-shadow .15s;
}
.age-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(201,123,219,.45); }
.age-leave {
    display: block;
    margin-top: 16px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700; font-size: 13px;
    color: #8a8aa2 !important;
}
.age-legal {
    margin: 22px 0 0;
    font-family: 'Nunito', sans-serif;
    font-size: 11px; color: #5f5f76;
}
/* CCPA link the shared age_page.html appends after #age_page */
.age-ccpa {
    text-align: center;
    margin: 0 auto 40px;
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
}
.age-ccpa a:link, .age-ccpa a:visited { color: #8a8aa2; font-weight: 600; }

/* ===== Service pages: content wrappers, forms, buttons ================== */
#page_content, #info_content {
    margin: 40px 50px;
    max-width: 900px;
}

.login-register-form-container,
.join-form-container {
    display: inline-block;
    vertical-align: top;
    margin: 50px 0 60px 100px;
    width: 350px;
}
.login-register-form, .join-form { width: 300px; }
.login-register-form input[type=text],
.login-register-form input[type=email],
.login-register-form input[type=password] {
    font-size: 15pt; font-weight: 200; width: 300px; margin-bottom: 15px;
}
.login-register-form .nope { border: #ff0432 3px solid; }
p .nope { color: #ff0432; }

.button {
    font-size: 13pt; font-weight: 600; padding: 6px;
    font-family: 'Nunito', sans-serif;
    min-width: 100px; margin-left: 30px;
    background: transparent; color: #fff;
    cursor: pointer;
}
.login-register-button, .join-button { margin-left: 205px; border: 3px solid #c97bdb; }
.hot-button  { border: 3px solid #f22; }
.cool-button { border: 3px solid #22f; }

/* ===== Service pages: offer cards ======================================= */
.offer-page { text-align: center; padding: 40px 20px; }
.offer-page-title { margin-bottom: 32px; }
.offer-cards {
    display: flex; gap: 20px; justify-content: center; align-items: stretch;
    flex-wrap: wrap; max-width: 900px; margin: 0 auto;
}
.offer-card {
    flex: 1; min-width: 220px; max-width: 270px;
    border: 2px solid #3a3a5c; border-radius: 12px;
    padding: 28px 20px; cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    text-align: center; position: relative; display: block;
}
.offer-card input[type="radio"] { display: none; }
.offer-card-selected {
    border-color: #c97bdb; transform: scale(1.05);
    box-shadow: 0 0 24px rgba(201,123,219,.3);
}
.offer-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: #c97bdb; color: #1a1a2e; padding: 3px 16px; border-radius: 12px;
    font-size: .75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .5px; white-space: nowrap;
}
.offer-card-name { margin: 0 0 16px; }
.offer-card-price { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.offer-card-regular { font-size: .85rem; font-style: italic; opacity: .7; }
.offer-card-sale-end { font-size: .8rem; margin-top: 4px; }
.offer-card-description { margin-top: 12px; font-size: .9rem; }
.offer-card-description p { font-weight: lighter; font-style: italic; }
.offer-submit { margin-top: 32px; }
.offer-login { text-align: center; margin-top: 16px; font-size: 14px; }

/* ===== Error pages ====================================================== */
body.error-page { background: #0e0619; }
#error_page { margin: auto; text-align: center; padding: 80px 20px; }
#error_page p { font-size: 20pt; font-weight: 800; color: #fff; }

/* ===== Responsive ======================================================= */
@media (max-width: 900px) {
    .property-block { flex-direction: column; }
    .property-rail {
        width: auto;
        border-right: 0;
        border-bottom: 1px solid #2c2140;
        padding: 22px 24px;
    }
    .feed { justify-content: flex-start; flex-wrap: wrap; padding: 22px 24px; }
    .dfn-hero-content { left: 24px; right: 24px; }
    .dfn-wordmark { font-size: 44px; }
    .age-splash { padding: 40px 26px 32px; }
    .age-splash-wordmark { font-size: 44px; }
}