/* elegant-v23 */ *{box-sizing:border-box} :root{ --gold:#b8963e; --gold-dark:#9a7c32; --gold-light:#d4af6a; --charcoal:#1c1917; --bg:#f7f5f0; --card:#fff; --text:#222; --heart:#d8664f; --heart-dark:#b5503c; --font-display:'Fraunces','Georgia','Times New Roman',serif; --font-body:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } html,body{margin:0;padding:0;width:100%;max-width:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body)} html:has(body.image-page){background:#11100e} h1,h2,h3, .header h1,.page-header h1,.home-hero-name, .comments-heading,.about-name{ font-family:var(--font-display);font-weight:600;letter-spacing:.1px; } /* ── Site-wide top navigation ─────────────────────────────────────────────── */ .site-nav{ width:100%; background:var(--charcoal); display:flex;justify-content:center; gap:4px;padding:10px 16px;flex-wrap:wrap; box-sizing:border-box; border-bottom:1px solid rgba(212,175,106,.16); box-shadow:0 2px 14px rgba(0,0,0,.18); } .site-nav a{ position:relative; color:rgba(255,255,255,.72); text-decoration:none; font-size:.83rem;font-weight:600;letter-spacing:.02em; padding:6px 14px;border-radius:18px; transition:background .15s,color .15s; white-space:nowrap; } .site-nav a:hover{ background:rgba(255,255,255,.1); color:#fff; } .site-nav a[aria-current="page"]{ background:rgba(184,150,62,.22); color:var(--gold-light); } /* ── Header ───────────────────────────────────────────────────────────────── */ .header{padding:18px 14px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center} .header h1{margin:0 0 8px;font-size:2rem;letter-spacing:.2px;line-height:1.2} .name-alternates{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-2px 0 4px;color:#7a6b4b;font-size:.86rem} .name-alternates span:not(:last-child)::after{content:"·";margin-inline-start:8px;color:#c8b47a} .lang-switcher{margin:4px 0 8px} .lang-switcher a{color:var(--gold);text-decoration:none;font-weight:700;margin:0 6px} .lang-switcher a:hover{text-decoration:underline} .header img.logo{ width:72px;height:72px;border-radius:50%; object-fit:cover;margin-bottom:10px; box-shadow:0 8px 25px rgba(0,0,0,.18); border:3px solid #fff; } @media(min-width:768px){ .header img.logo{width:90px;height:90px} } /* ── Public content-page header (category/videos/contact/privacy) ─────────── */ /* Scoped to .page-header so admin pages (which reuse bare .header) are untouched. */ .page-header{padding-bottom:22px;border-bottom:1px solid #ece4d0;margin-bottom:6px} .page-header h1{letter-spacing:.2px} .page-header .lang-switcher{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px} .page-header .lang-switcher a{ color:var(--gold);text-decoration:none;font-weight:700;margin:0; font-size:.85rem;padding:6px 16px;border-radius:18px; border:1px solid rgba(184,150,62,.35); transition:all .15s; } .page-header .lang-switcher a:hover{background:rgba(184,150,62,.12);text-decoration:none} .page-header .lang-switcher a.current, .page-header .lang-switcher a[aria-current="page"]{background:var(--gold);color:#fff;border-color:var(--gold)} /* ── Category grid (legacy — retained for any other consumer of .card) ────── */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;max-width:1200px;margin:18px auto;padding:0 14px} .card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--card);border-radius:16px;padding:16px 12px;text-decoration:none;color:inherit;box-shadow:0 6px 20px rgba(0,0,0,.08);height:210px;transition:transform .15s ease,box-shadow .2s ease} .card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.12)} .card img{width:92px;height:92px;border-radius:999px;object-fit:cover;background:#e5e7eb} .card span{font-weight:600;font-size:.98rem;line-height:1.25;max-width:140px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-top:4px} /* ── Homepage hero ─────────────────────────────────────────────────────────── */ .home-hero{ background:linear-gradient(145deg,#1c1917 0%,#3d2b1e 55%,#6b4c1a 100%); color:#fff;text-align:center; padding:52px 20px 40px; } .home-hero-emblem{ width:92px;height:92px;border-radius:50%; object-fit:cover;margin-bottom:18px; border:3px solid rgba(212,175,106,.55); box-shadow:0 8px 30px rgba(0,0,0,.32); } @media(min-width:768px){.home-hero-emblem{width:110px;height:110px}} .home-hero-name{ font-size:clamp(1.7rem,4vw,2.4rem);font-weight:700; margin:0 0 8px;letter-spacing:.2px; } .home-hero .name-alternates{color:rgba(255,255,255,.62);margin:-2px 0 18px} .home-hero .name-alternates span:not(:last-child)::after{color:rgba(212,175,106,.6)} .home-hero-intro{ max-width:560px;margin:0 auto 24px; font-size:1rem;line-height:1.75;color:rgba(255,255,255,.82); } .home-hero-langs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} .home-hero-langs a{ color:rgba(255,255,255,.68);text-decoration:none; font-size:.85rem;font-weight:600;padding:6px 18px;border-radius:18px; border:1px solid rgba(184,150,62,.35); transition:all .15s; } .home-hero-langs a:hover,.home-hero-langs a.current{ background:rgba(184,150,62,.22);color:#fff;border-color:rgba(184,150,62,.7); } /* ── Collections grid (homepage) ──────────────────────────────────────────── */ .home-eyebrow{ max-width:1200px;margin:32px auto 4px;padding:0 18px; font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--gold); } .collection-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:20px;max-width:1200px;margin:12px auto 18px;padding:0 14px; } .collection-tile{ display:flex;flex-direction:column; background:var(--card);border-radius:16px;overflow:hidden; text-decoration:none;color:inherit; border:1px solid rgba(28,25,23,.05); box-shadow:0 6px 20px rgba(0,0,0,.08); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease; } .collection-tile:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(28,25,23,.16); border-color:rgba(184,150,62,.3); } .collection-tile-media{ position:relative;display:block;width:100%;aspect-ratio:1/1; background:linear-gradient(135deg,#efe6cf,#e3d3a8);overflow:hidden; } .collection-tile-media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .collection-tile:hover .collection-tile-media img{transform:scale(1.08)} .collection-tile-media::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(20,17,14,.28),transparent 55%); opacity:0;transition:opacity .25s ease; } .collection-tile:hover .collection-tile-media::after{opacity:1} .collection-tile-media.is-fallback{background:linear-gradient(135deg,#efe6cf,#e3d3a8)} .collection-tile-monogram{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:2.4rem;font-weight:700;color:rgba(120,90,30,.55); user-select:none; } .collection-tile-label{ padding:12px 12px 14px;font-weight:600;font-size:.95rem;line-height:1.3; text-align:center; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .collection-tile--videos .collection-tile-media{ display:flex;align-items:center;justify-content:center; background:#1a1714; } .collection-tile-media--videos svg{width:56%;height:56%} /* ── Gallery grid ─────────────────────────────────────────────────────────── */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1200px;margin:18px auto;padding:0 14px} .gallery .item{ position:relative;border-radius:14px;overflow:hidden; background:linear-gradient(135deg,#efe6cf,#e3d3a8); border:1px solid rgba(28,25,23,.05); box-shadow:0 6px 18px rgba(0,0,0,.08);aspect-ratio:4/3;cursor:pointer; transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease; } .gallery .item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .gallery .item:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(28,25,23,.14);border-color:rgba(184,150,62,.28)} .gallery .item:hover img{transform:scale(1.06)} .gallery .item::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(20,17,14,.22),transparent 50%); opacity:0;transition:opacity .22s ease; } .gallery .item:hover::after{opacity:1} .gallery .item img.is-broken{opacity:0} .gallery .item.is-broken::before{ content:'\1F4F7';position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:1.8rem;opacity:.35; } /* ── Modal ────────────────────────────────────────────────────────────────── */ .modal{position:fixed;inset:0;background:rgba(10,8,6,.92);display:none;align-items:center;justify-content:center;z-index:9999;padding:8px} .modal.show{display:flex} .modal.focus{background:#000;padding:0} .modal-content{ background:radial-gradient(circle at 50% 0%,rgba(184,150,62,.1),transparent 45%),#16130f; border:1px solid rgba(212,175,106,.14); border-radius:16px;width:min(960px,100%); /* An explicit height (not just max-height) gives the flex column a definite size, so .modal-img-wrap's flex-grow has real space to expand into — without it, flex-grow has nothing to distribute and the image area just hugs its min-height floor regardless of viewport height. */ height:calc(100vh - 16px); height:calc(100dvh - 16px); max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); display:flex;flex-direction:column;position:relative;overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); } .modal.focus .modal-content{ border-radius:0;width:100vw;border:none; height:100vh;height:100dvh;max-height:100vh;max-height:100dvh; } /* Floating toolbar */ .modal-toolbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:linear-gradient(to bottom,rgba(0,0,0,.62) 0%,transparent 100%);z-index:20;pointer-events:none} .modal-ctrl-btn{ pointer-events:all;width:36px;height:36px;border-radius:50%; background:rgba(20,17,14,.55); border:1px solid rgba(212,175,106,.25);color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .15s,border-color .15s,transform .15s;line-height:1; } .modal-ctrl-btn:hover{background:rgba(184,150,62,.35);border-color:rgba(212,175,106,.6);transform:scale(1.08)} .modal-ctrl-btn svg{width:15px;height:15px;display:block} .modal-close{font-size:20px} .modal.focus .modal-toolbar{opacity:.5;transition:opacity .3s} .modal.focus:hover .modal-toolbar{opacity:1} /* Image area */ .modal-img-wrap{flex:1 1 auto;min-height:140px;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;cursor:zoom-in;background:#000} .modal.focus .modal-img-wrap{cursor:zoom-out} /* width/height:100% (not max-width/max-height percentages) — a flex item's auto-resolved height isn't reliably a definite containing size for a descendant's percentage max-height in Chrome, so max-height:100% here silently fails to constrain the image and lets it overflow its box. */ .modal-img-wrap img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;display:block;pointer-events:none} .modal.focus .modal-img-wrap img{max-height:100vh} /* Nav arrows */ .nav-btn{ position:absolute;top:50%;transform:translateY(-50%); background:rgba(20,17,14,.5); border:1px solid rgba(212,175,106,.22);color:#fff;width:42px;height:42px; border-radius:50%;cursor:pointer;font-size:18px; display:flex;align-items:center;justify-content:center;z-index:14; transition:background .15s,border-color .15s,opacity .2s; } .nav-btn:hover{background:rgba(184,150,62,.35);border-color:rgba(212,175,106,.55)} #prev-btn{left:10px}#next-btn{right:10px} .modal.focus .nav-btn{opacity:.3} .modal.focus .nav-btn:hover{opacity:1} /* Actions strip */ .modal-actions{ flex-shrink:0;padding:14px 16px; background:rgba(255,255,255,.02);border-top:1px solid rgba(212,175,106,.12); display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between; transition:opacity .2s; } .modal.focus .modal-actions{position:absolute;bottom:0;left:0;right:0;opacity:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 100%);border-top:none;padding:24px 12px 14px} .modal.focus:hover .modal-actions{opacity:1;pointer-events:all} /* ── Engagement bar: Like + Share (shared by modal and standalone photo page) ── */ .engage-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .like-pill{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:999px;flex:0 0 auto; border:1px solid rgba(212,175,106,.35);background:rgba(184,150,62,.08); color:var(--gold-light);font-weight:700;font-size:.92rem;cursor:pointer; transition:background .15s,border-color .15s,transform .1s,color .15s; } .like-pill:hover{background:rgba(184,150,62,.18);border-color:var(--gold-light);transform:translateY(-1px)} .like-pill:active{transform:translateY(0)} .like-pill .heart-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;transition:fill .2s,stroke .2s} .like-pill.is-liked{border-color:rgba(216,102,79,.6);background:rgba(216,102,79,.14);color:var(--heart)} .like-pill.is-liked .heart-icon{fill:var(--heart);stroke:var(--heart);animation:heartPop .4s ease} @keyframes heartPop{0%{transform:scale(1)}35%{transform:scale(1.3)}60%{transform:scale(.94)}100%{transform:scale(1)}} .share-cluster{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* Icon buttons (share cluster + copy link) */ .icon-btn{ width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09); cursor:pointer;display:flex;align-items:center;justify-content:center; text-decoration:none;color:rgba(255,255,255,.85); transition:transform .15s,background .15s,border-color .15s,color .15s; } .icon-btn:hover{transform:translateY(-1px);background:rgba(184,150,62,.22);border-color:rgba(212,175,106,.55);color:#fff} .icon-btn.is-copied{background:var(--gold);border-color:var(--gold);color:#fff} .icon-btn svg{width:17px;height:17px;fill:currentColor;display:block} .mobile-close-action{display:none} .mobile-close-label{color:#fff;font-size:.72rem;line-height:1;opacity:.82} .meta-pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.82);padding:7px 12px;border-radius:999px;font-size:.84rem;white-space:nowrap} /* Comments .comments-wrap is a fixed-size block (never scrolls, never gets clipped) — it holds the heading, the scrollable history, and the always-visible composer. Only .comments-list (the history) scrolls internally, capped to a modest height, so the composer + Post button can never end up below an undiscoverable fold regardless of comment count. */ .comments-wrap{ flex:0 0 auto; background:#16130f;border-top:1px solid rgba(212,175,106,.13); padding:16px;color:#f7f3eb; } .modal.focus .comments-wrap{display:none} .comments-heading{margin:0 0 10px;font-size:1.08rem;font-weight:600;color:#f3ead6;display:flex;align-items:baseline;gap:6px} .comments-count-badge{font-family:var(--font-body);font-weight:600;font-size:.85rem;color:rgba(243,234,214,.5)} .comments-list{ display:flex;flex-direction:column;gap:8px;margin-bottom:12px; overflow-y:auto;min-height:0; max-height:clamp(60px,20dvh,200px); scrollbar-width:thin;scrollbar-color:rgba(184,150,62,.45) rgba(255,255,255,.025); } .comments-list::-webkit-scrollbar{width:9px} .comments-list::-webkit-scrollbar-track{background:rgba(255,255,255,.025);border-radius:999px} .comments-list::-webkit-scrollbar-thumb{background:rgba(170,148,98,.42);border:2px solid #16130f;border-radius:999px} .comments-list::-webkit-scrollbar-thumb:hover{background:rgba(212,175,106,.58)} .comment{ padding:12px 13px;background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.06);border-radius:12px; display:flex;gap:11px;align-items:flex-start; } .comment-avatar{ flex:0 0 32px;width:32px;height:32px;border-radius:50%; background:linear-gradient(145deg,var(--gold),var(--gold-dark)); color:#1c1917;font-weight:700;font-size:.82rem; display:flex;align-items:center;justify-content:center; } .comment-body{flex:1;min-width:0} .comment-meta{display:flex;gap:10px;align-items:baseline;justify-content:space-between;font-size:.92rem} .comment-meta strong{color:#fff;font-weight:700} .comment-when{color:rgba(255,255,255,.48);font-size:.78rem;white-space:nowrap} .comment-text{margin-top:5px;line-height:1.55;color:rgba(255,255,255,.86);text-align:start;unicode-bidi:plaintext;overflow-wrap:anywhere} .comment-empty{opacity:.6;text-align:center;padding:20px 0;font-size:.92rem} /* Mobile-only "Add Comment" disclosure — hidden on desktop/tablet, where the composer always shows in full (see the max-width:600px block below, the only place .comment-composer-toggle is ever made visible). */ .comment-composer-toggle{display:none} .comment-form{display:grid;gap:10px;position:relative} .comment-field{display:grid;gap:5px} .comment-field label{font-size:.84rem;font-weight:700;line-height:1.35;color:rgba(255,255,255,.85);text-align:start} .comment-form input:not(.hp-field),.comment-form textarea{ width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.28);color:#fff;padding:11px 12px;outline:none; font:inherit;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; } .comment-form input:not(.hp-field)::placeholder,.comment-form textarea::placeholder{color:rgba(255,255,255,.4)} .comment-form input:not(.hp-field):focus,.comment-form textarea:focus{ border-color:rgba(212,175,106,.72);box-shadow:0 0 0 3px rgba(184,150,62,.14);background:rgba(0,0,0,.4); } .comment-form textarea{min-height:60px;resize:vertical} /* Inside the modal the composer must stay fully visible at all times, so a manual textarea resize can't be allowed to push Post Comment out of view — the standalone photo page has room to spare and keeps free resize. */ .modal .comment-form textarea{resize:none} .comment-form [aria-invalid=true]{border-color:#e08a7d;box-shadow:0 0 0 2px rgba(224,138,125,.16)} .comment-field-error{min-height:1.15em;color:#f0a99c;font-size:.78rem;line-height:1.35;text-align:start} .comment-submit{ min-height:44px;border:1px solid transparent;border-radius:10px;padding:10px 12px; background:var(--gold);color:#1c1917;font-weight:700;cursor:pointer; transition:background .16s ease,transform .1s ease; } .comment-submit:hover{background:var(--gold-light);transform:translateY(-1px)} .comment-submit:active{transform:translateY(0)} .comment-submit:disabled{opacity:.6;cursor:not-allowed;transform:none} .comment-submit:focus-visible{outline:3px solid rgba(212,175,106,.55);outline-offset:2px} .comment-feedback{ display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-block:0 10px; padding:12px; border-radius:12px; border:1px solid transparent; text-align:start; } .comment-feedback::before, .comment-feedback::after, .comment-feedback *::before, .comment-feedback *::after{ content:none!important; display:none!important; } .comment-feedback[hidden]{display:none!important} .comment-feedback--success{ background:linear-gradient(180deg,rgba(184,150,62,.24),rgba(0,0,0,.28)); border-color:rgba(212,175,106,.55); box-shadow:0 0 0 1px rgba(255,255,255,.04) inset; } .comment-feedback--error{ background:rgba(120,58,44,.28); border-color:rgba(224,138,125,.45); } .comment-feedback-title{ display:block; margin:0; font-size:1rem; line-height:1.35; color:#fff; } .comment-feedback-message{ margin:0; font-size:.9rem; line-height:1.45; color:rgba(255,255,255,.86); } .comment-form-body[hidden]{display:none!important} .comment-submit-status{display:none!important} /* Mobile portrait — bottom-sheet */ @media(max-width:600px){ .modal{padding:0;align-items:flex-end} .modal-toolbar{padding-top:max(14px, calc(8px + env(safe-area-inset-top, 0px)))} /* height (not just max-height) gives flex children a definite dimension */ .modal-content{border-radius:20px 20px 0 0;width:100%;height:96vh;max-height:96vh} .modal-content{height:96dvh;max-height:96dvh} .modal.focus .modal-content{border-radius:0;height:100vh;max-height:100vh} .modal.focus .modal-content{height:100dvh;max-height:100dvh} /* The image stage now hugs the image's own rendered size instead of being flex-sized to a fixed proportion of the viewport — a fixed-height wrapper combined with img{height:100%} let object-fit:contain letterbox inside it, and since the wrapper's own background is black, that letterbox showed up as a visible void between the photo and the toolbar whenever the image's aspect ratio didn't match the wrapper's. flex:0 1 auto means the wrapper's height comes from its content (the image) — it can still shrink if space is tight, but never grows past what the image actually needs. */ .modal-img-wrap{flex:0 1 auto;min-height:0} /* height:auto (not 100%) — the image's own box now matches its rendered content exactly, capped by max-height for tall/portrait photos. object-fit:contain still prevents distortion once that cap applies. */ .modal-img-wrap img{width:100%;height:auto;max-height:55dvh;object-fit:contain} /* Photo-focus mode (tap the photo, or the fullscreen button — both call the same toggleFocus() in gallery.js): the toolbar and comments are already hidden/detached from flow by the shared .modal.focus rules below, so .modal-img-wrap is the only flex child left in normal flow. It must go back to flex:1 (fill + center within the freed space) here, otherwise it stays content-hugged at its normal-mode size and the rest of the newly-freed viewport shows as a plain black gap underneath — the same defect the normal-mode fix above solved, just re-appearing one level up because focus mode changes how much space is available. object-fit:contain (inherited) keeps the photo itself undistorted and uncropped; any leftover space is just centred padding either side. */ .modal.focus .modal-img-wrap{flex:1 1 auto;min-height:0} .modal.focus .modal-img-wrap img{max-height:100vh} .modal.focus .modal-img-wrap img{max-height:100dvh} /* Hover-to-reveal (the desktop behaviour for this rule, left untouched above) has no equivalent on a touchscreen, so on mobile the toolbar would otherwise sit permanently unreachable at opacity:0 — hide it outright instead, matching how .comments-wrap already hides in focus mode for every screen size. */ .modal.focus .modal-actions{display:none} .comments-list{max-height:clamp(50px,16dvh,150px)} .modal-actions{position:relative;padding:8px 62px 8px 12px;gap:6px} .mobile-close-action{display:flex;flex-direction:column;align-items:center;gap:4px;position:absolute;right:8px;top:50%;transform:translateY(-50%)} .mobile-close-action .icon-btn{font-size:20px} #prev-btn{left:6px}#next-btn{right:6px} /* Any vertical space the (now content-sized) image stage no longer claims flows here instead, so the sheet still uses the viewport well without reopening a gap between the photo and the toolbar. */ .comments-wrap{flex:1 1 auto;min-height:0;padding:12px 16px} .comments-heading{margin-bottom:8px;font-size:1rem} /* Comment composer starts collapsed behind a compact "Add Comment" control, so the always-expanded form doesn't dominate the screen. */ .comment-composer-toggle{ display:flex;align-items:center;gap:8px;width:100%; padding:11px 14px;margin-bottom:10px;min-height:44px; border:1px dashed rgba(212,175,106,.4);border-radius:10px; background:rgba(184,150,62,.06);color:var(--gold-light); font:inherit;font-weight:700;font-size:.88rem;cursor:pointer; transition:background .15s ease,border-color .15s ease; } .comment-composer-toggle:hover{background:rgba(184,150,62,.14)} .cct-icon{ width:16px;height:16px;flex:0 0 16px;position:relative; transition:transform .2s ease; } .cct-icon::before,.cct-icon::after{content:'';position:absolute;background:currentColor;border-radius:1px} .cct-icon::before{inset-inline-start:50%;top:1px;bottom:1px;width:2px;margin-inline-start:-1px} .cct-icon::after{top:50%;inset-inline-start:1px;inset-inline-end:1px;height:2px;margin-block-start:-1px} .comment-composer-toggle[aria-expanded="true"] .cct-icon{transform:rotate(45deg)} .comments-wrap.is-composer-collapsed .comment-form{display:none} } /* Mobile landscape — same content-sized image stage as the portrait block */ @media(max-height:480px) and (orientation:landscape){ .modal-img-wrap{flex:0 1 auto;min-height:0} .modal-img-wrap img{width:100%;height:auto;max-height:45dvh;object-fit:contain} .modal.focus .modal-img-wrap{flex:1 1 auto;min-height:0} .modal.focus .modal-img-wrap img{max-height:100vh} .modal.focus .modal-img-wrap img{max-height:100dvh} .modal.focus .modal-actions{display:none} .comments-list{max-height:12dvh} .comments-wrap{flex:1 1 auto;min-height:0} .modal-actions{padding:6px 12px;gap:6px} } /* ── Image page ───────────────────────────────────────────────────────────── */ .image-page{ background: radial-gradient(circle at 50% 18%,rgba(184,150,62,.07),transparent 42%), #11100e; color:#fff;min-height:100vh; } .image-page .image-shell{ width:100%;max-width:720px;margin-inline:auto;box-sizing:border-box; min-height:100vh;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;padding-block:28px 22px;padding-inline:12px;gap:14px; } .image-page .image-main{ max-width:min(980px,96vw);max-height:70vh; border-radius:12px;border:1px solid rgba(255,255,255,.07); box-shadow:0 20px 55px rgba(0,0,0,.58),0 0 28px rgba(184,150,62,.07); cursor:zoom-in; } .is-lightbox-open{overflow:hidden} .image-lightbox{position:fixed;inset:0;width:100%;max-width:100%;box-sizing:border-box;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0);opacity:0;visibility:hidden;z-index:10000;padding:4vh 12px;transition:opacity .24s ease,background .24s ease,visibility 0s linear .24s} .image-lightbox.show{display:flex;background:rgba(0,0,0,.94);opacity:1;visibility:visible;transition:opacity .24s ease,background .24s ease} .image-lightbox img{max-width:95vw;max-height:95vh;width:auto;height:auto;object-fit:contain;cursor:zoom-out;box-shadow:0 20px 60px rgba(0,0,0,.55);transform:translate(var(--lightbox-x,0),var(--lightbox-y,0)) scale(var(--lightbox-scale,.92));opacity:.2;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .22s ease} .image-lightbox.show img{transform:translate(0,0) scale(1);opacity:1} .image-page .engage-bar{width:100%;max-width:520px;justify-content:space-between} .image-page .icon-btn:focus-visible, .image-page .gallery-return-link:focus-visible, .image-page .comment-submit:focus-visible{ outline:3px solid rgba(212,175,106,.4);outline-offset:3px; } .image-page .gallery-return-link{ min-height:42px;display:inline-flex;align-items:center;justify-content:center; gap:8px;padding:8px 15px;border-radius:999px; border:1px solid rgba(212,175,106,.52); background:rgba(184,150,62,.07);color:var(--gold-light); text-decoration:none;font-size:.9rem;font-weight:700;white-space:nowrap; transition:background .16s ease,border-color .16s ease,color .16s ease; } .image-page .gallery-return-link svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6; } .image-page .gallery-return-link:hover{ background:rgba(184,150,62,.18);border-color:var(--gold-light);color:#f1d998; } .pill-link{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-weight:700} .pill-link:hover{background:rgba(255,255,255,.22)} .image-page .comments-wrap{width:min(720px,94vw)} .image-page .comments-list{max-height:420px} .image-page .image-shell>.ad-slot{max-width:720px;margin:8px auto 2px;padding:0} @media(max-width:600px){ .image-page .image-shell{padding-block:14px 18px;padding-inline:12px;gap:12px} .image-page .image-main{max-width:calc(100vw - 20px);border-radius:10px} .image-page .engage-bar{max-width:100%} .image-page .gallery-return-link{width:100%} .image-page .comments-wrap{width:100%;padding:14px;border-radius:14px} .image-page .comments-list{max-height:52vh} .image-page .comment-meta{align-items:flex-start} .image-page .comment-when{white-space:normal;text-align:end} .image-page .image-shell>.ad-slot{width:100%} } /* ── Admin page ───────────────────────────────────────────────────────────── */ .admin{max-width:900px;margin:20px auto;padding:16px} .admin .card{height:auto;align-items:stretch;border-top:4px solid var(--gold)} .admin form{display:grid;gap:14px} .admin label{font-weight:600;font-size:.95rem;color:#333} .admin input[type=password],.admin input[type=text],.admin input[type=email],.admin select{padding:13px 14px;border-radius:10px;border:1px solid #ddd;font-size:1rem;min-height:46px} .admin input[type=file]{padding:10px;background:#fff;border-radius:10px;border:1px dashed #bbb} .admin .actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* Honeypot */ .comment-form .hp-field,.hp-field{position:absolute;inset-block-start:0;inset-inline-start:0;width:1px;height:1px;min-width:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none} /* ── Footer ───────────────────────────────────────────────────────────────── */ .site-footer{ width:100%;box-sizing:border-box; text-align:center; padding:32px 20px 24px; border-top:2px solid #e8d9b0; margin-top:40px; background:#fdf8ef; color:#555;font-size:.88rem; } .footer-brand{ font-size:1rem;font-weight:700; color:var(--gold);letter-spacing:.04em; margin:0 0 14px; } .footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:14px} .footer-nav a{ color:var(--gold);text-decoration:none; font-weight:600;font-size:.83rem; padding:4px 14px;border-radius:16px; border:1px solid #e0c87a; transition:background .15s,color .15s,border-color .15s; } .footer-nav a:hover{background:var(--gold);color:#fff;border-color:var(--gold)} .footer-copy{margin:0;opacity:.5;font-size:.78rem} /* Dark pages (image.php) */ .image-page .site-footer{background:transparent;border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6);margin-top:0} .image-page .site-footer .footer-brand{color:var(--gold-light)} .image-page .site-footer .footer-nav a{color:var(--gold-light);border-color:rgba(255,255,255,.2)} .image-page .site-footer .footer-nav a:hover{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.4)} /* ── Contact profile photo ───────────────────────────────────────────────── */ .contact-profile{text-align:center;margin:28px 0 4px} .contact-profile-photo{ width:100px;height:100px;border-radius:50%; object-fit:cover;object-position:top center; border:3px solid rgba(184,150,62,.5); box-shadow:0 4px 20px rgba(0,0,0,.1); } /* ── Content pages (About, Contact, Privacy) ──────────────────────────────── */ .content-page{max-width:780px;margin:24px auto;padding:0 18px} .content-body{line-height:1.75;color:var(--text)} .content-body h2{margin:28px 0 10px;font-size:1.15rem;color:var(--charcoal)} .content-body p,.content-body ul{margin:0 0 14px} .content-body ul{padding-inline-start:22px} .content-body a{color:var(--gold)} .content-body a:hover{text-decoration:underline} .privacy-card{ background:#fff;border-radius:18px; padding:34px 38px; box-shadow:0 4px 34px rgba(0,0,0,.06); } .privacy-updated{ color:#8a7a5a;font-size:.9rem; margin-bottom:22px; } .privacy-section{ padding:22px 0; border-top:1px solid #f0e8d0; } .privacy-section:first-of-type{border-top:none;padding-top:0} .privacy-section h2{ color:var(--gold); font-size:.78rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; } .privacy-section p{font-size:1rem;line-height:1.85} .contact-email{font-size:1.1rem;font-weight:700} /* ── Ad slots ─────────────────────────────────────────────────────────────── */ .ad-slot{width:100%;max-width:1200px;margin:12px auto;padding:0 14px} .ad-slot--placeholder{ display:flex;align-items:center;justify-content:center; height:90px; border:1px dashed #d4af6a; border-radius:10px; background:rgba(184,150,62,.04); } .ad-slot__label{font-size:.78rem;color:#c9a55a;letter-spacing:.08em;text-transform:uppercase} .gallery .ad-slot{grid-column:1/-1;padding:0} /* ── Load-more ────────────────────────────────────────────────────────────── */ .item--hidden{display:none} .load-more-wrap{text-align:center;padding:8px 14px 24px} .load-more-btn{ display:inline-block; padding:12px 28px;border-radius:999px; border:2px solid var(--gold); background:transparent;color:var(--gold); font-size:1rem;font-weight:700;cursor:pointer; transition:background .15s ease,color .15s ease; } .load-more-btn:hover{background:var(--gold);color:#fff} /* ── Admin media library ──────────────────────────────────────────────────── */ .admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;padding:20px;min-width:0} /* Grid items default to min-width:auto, i.e. "at least as wide as my widest unbreakable content" — a 9-column table or a long unordered list inside a card can then force its own grid cell (and, since these span the full grid via grid-column:1/-1, the WHOLE grid's column track) far wider than the viewport, dragging every other card along with it even if that card's own content would otherwise fit. This is the single root cause behind most of the Admin mobile overflow: min-width:0 lets each card shrink to the grid's actual column width and rely on its own internal scrollers (e.g. .table-scroll) instead of inflating the page. */ .admin-card,.admin-card-full{min-width:0;max-width:100%} @media(max-width:420px){ /* A 340px minimum column is wider than many phones — without this, the admin cards force horizontal overflow (the historical Android narrow-column/blank-space regression). Single column, no minimum. */ .admin-grid{grid-template-columns:1fr;padding:12px;gap:16px} } /* ── Add Photos — the simple, everyday workflow ───────────────────────────── */ .add-photos-card{border-top:4px solid var(--gold)} .upload-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid #f0ece0} .upload-step:first-of-type{border-top:none;padding-top:6px} .upload-step-num{ flex:0 0 34px;width:34px;height:34px;border-radius:50%; background:var(--charcoal);color:#fff;font-weight:700;font-size:1.05rem; display:flex;align-items:center;justify-content:center; } .upload-step-body{flex:1;min-width:0} .upload-step-label{display:block;font-size:1.15rem;font-weight:700;color:var(--charcoal);margin-bottom:8px} .upload-step input[type=file]{ width:100%;padding:16px;border-radius:12px;border:2px dashed #c9b78f; background:#fdfaf3;font-size:1rem;cursor:pointer; } .btn-large{padding:16px 32px;font-size:1.1rem;width:100%;max-width:360px} @media(max-width:600px){.btn-large{max-width:none}} .admin-card{margin:0} .admin-card-full{grid-column:1/-1} .admin-notices{padding:0 20px 4px} .admin-msg{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7;border-radius:8px;padding:10px 14px;margin:6px 0} .admin-err{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;border-radius:8px;padding:10px 14px;margin:6px 0} .admin-warn{background:#fef9c3;color:#713f12;border:1px solid #fde68a;border-radius:8px;padding:10px 14px;margin:6px 0} .admin-comment-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .admin-comment-filters a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid #d1d5db;border-radius:999px;background:#fff;color:#374151;text-decoration:none;font-size:.86rem;font-weight:600} .admin-comment-filters a span{display:inline-flex;min-width:22px;justify-content:center;padding:1px 6px;border-radius:999px;background:#f3f4f6;color:#6b7280;font-size:.75rem} .admin-comment-filters a:hover{border-color:#2563eb;color:#1d4ed8} .admin-comment-filters a.is-active{background:#2563eb;border-color:#2563eb;color:#fff} .admin-comment-filters a.is-active span{background:rgba(255,255,255,.2);color:#fff} .admin-comment-filters a:focus-visible,.comment-action-btn:focus-visible,.btn-danger-xs:focus-visible{outline:3px solid rgba(37,99,235,.35);outline-offset:2px} .comment-status-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.76rem;font-weight:700;border:1px solid transparent} .comment-status-badge--pending{background:#fef3c7;color:#92400e;border-color:#fde68a} .comment-status-badge--approved{background:#d1fae5;color:#065f46;border-color:#6ee7b7} .comment-status-badge--hidden{background:#e5e7eb;color:#374151;border-color:#d1d5db} .comment-status-badge--unknown{background:#fee2e2;color:#991b1b;border-color:#fca5a5} .comment-moderation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:170px} .admin .comment-moderation-actions form{display:flex;flex-wrap:wrap;gap:6px} .comment-action-btn{padding:5px 10px;border-radius:6px;border:1px solid transparent;cursor:pointer;font-size:.8rem;font-weight:700} .comment-action-btn--approve{background:#d1fae5;color:#065f46;border-color:#6ee7b7} .comment-action-btn--approve:hover{background:#a7f3d0} .comment-action-btn--hide{background:#f3f4f6;color:#374151;border-color:#d1d5db} .comment-action-btn--hide:hover{background:#e5e7eb} .btn-primary{padding:13px 22px;border-radius:12px;background:var(--charcoal);color:#fff;border:none;cursor:pointer;font-size:1rem;font-weight:700;transition:background .15s;min-height:46px} .btn-primary:hover{background:#000} .btn-secondary{padding:13px 22px;border-radius:12px;background:var(--gold);color:#fff;border:none;cursor:pointer;font-size:1rem;font-weight:700;transition:background .15s;min-height:46px} .btn-secondary:hover{background:var(--gold-dark)} .btn-xs{padding:5px 12px;border-radius:6px;background:#2563eb;color:#fff;border:none;cursor:pointer;font-size:.82rem;font-weight:600;transition:background .15s} .btn-xs:hover{background:#1d4ed8} .btn-danger-xs{padding:5px 12px;border-radius:6px;background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5;cursor:pointer;font-size:.82rem;font-weight:600;transition:background .15s,color .15s} .btn-danger-xs:hover{background:#b91c1c;color:#fff;border-color:#b91c1c} .cat-checkboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:6px;margin:8px 0;max-height:300px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:10px;padding:10px} .cat-checkboxes--sm{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));max-height:200px} @media(max-width:600px){ .cat-checkboxes,.cat-checkboxes--sm{grid-template-columns:1fr} } .check-label{display:flex;flex-direction:column;gap:4px;padding:12px 12px;min-height:48px;justify-content:center;border-radius:10px;border:1px solid #e5e7eb;cursor:pointer;transition:background .1s,border-color .1s} /* These labels sit inside an element that also carries the shared, public-site .card class — the generic .card span rule (2-line clamp, 140px max-width, centred text) otherwise leaks in and truncates long category names (e.g. "Determination, Persistence and Self-confidence") down to a couple of words. Reset just the leaking properties here. */ .check-label span{display:block;max-width:none;text-align:start;-webkit-line-clamp:unset;overflow:visible;text-overflow:clip} .check-label:hover{background:#fdf8ed;border-color:#d4af6a} .check-label input[type=checkbox]{margin-bottom:3px;cursor:pointer} .cat-en{font-weight:600;font-size:.87rem} .cat-rtl{font-size:.80rem;color:#555;direction:rtl} .cat-count{font-size:.75rem;color:#9ca3af;margin-top:1px} .img-preview{margin:10px 0;border-radius:10px;overflow:hidden;max-width:280px;border:2px solid #e5e7eb} .img-preview img{display:block;width:100%;height:auto} /* ── Bulk upload preview grid ─────────────────────────────────────────────── */ .bulk-preview-wrap{margin:12px 0;padding:12px;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb} .bulk-preview-count{font-size:.88rem;font-weight:600;color:#374151;margin:0 0 10px} .bulk-preview-grid{display:flex;flex-wrap:wrap;gap:8px} .bulk-prev-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:80px} .bulk-prev-img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb;background:#e9eef3} .bulk-prev-name{font-size:.65rem;color:#6b7280;text-align:center;line-height:1.2;max-height:2.4em;overflow:hidden;word-break:break-all} .bulk-prev-more{width:80px;height:80px;border-radius:8px;border:2px dashed #d1d5db;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;color:#6b7280;background:#f3f4f6} /* ── Admin bulk upload progress ───────────────────────────────────────────── */ .upload-progress-wrap{margin-top:12px;padding:14px;border:1px solid #d1d5db;border-radius:10px;background:#f9fafb} .upload-progress-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;font-weight:600;color:#374151} .upload-progress-wrap progress{display:block;width:100%;height:16px;margin:10px 0 6px;accent-color:#2563eb} .upload-progress-detail{min-height:1.2em;color:#6b7280;font-size:.8rem} .upload-progress-result{display:grid;gap:6px;margin-top:10px;font-size:.84rem} .upload-progress-result>div{padding:8px 10px;border-radius:7px;white-space:pre-line} .upload-progress-result--success{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7} .upload-progress-result--warning{background:#fef9c3;color:#713f12;border:1px solid #fde68a} .upload-progress-result--error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5} .upload-progress-result--active{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd} .upload-progress-result--pending{background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb} .upload-progress-media-link{display:inline-block;justify-self:start;margin-top:4px;color:#2563eb;font-weight:600} /* ── Admin media grid ──────────────────────────────────────────────────────── */ .media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .media-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column} .media-card-thumb{width:100%;aspect-ratio:4/3;overflow:hidden;background:#f3f4f6} .media-card-thumb img{width:100%;height:100%;object-fit:cover;display:block} .media-card-body{padding:10px 12px;flex:1;display:flex;flex-direction:column;gap:6px;min-width:0} .media-card-name{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .media-card-meta{font-size:.76rem;color:#9ca3af} .media-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px;align-items:flex-start} .load-more-wrap{text-align:center;padding:20px 0} .load-more-count{font-size:.83rem;color:#9ca3af;margin-top:8px} .media-search-summary{font-size:.85rem;font-weight:400;opacity:.65} .admin .media-search-form{display:flex;align-items:center;gap:8px;margin:0 0 18px;max-width:820px} .admin .media-search-form input[type=search]{flex:1;min-width:180px;padding:10px;border-radius:10px;border:1px solid #d1d5db;font:inherit} .media-filter-check{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid #d1d5db;border-radius:9px;background:#f9fafb;color:#374151;font-size:.86rem;white-space:nowrap;cursor:pointer} .media-filter-check input{margin:0;cursor:pointer} /* This checkbox sits inside an .admin-card, which reuses the shared, public-site .card class — the generic .card span rule (2-line clamp, 140px max-width, ellipsis) otherwise leaks in and truncates its label ("Uncategorised only" was rendering as "Uncategorised o…"). */ label.media-filter-check span{max-width:none;text-align:start;-webkit-line-clamp:unset;overflow:visible;text-overflow:clip;margin-top:0} .media-search-clear{padding:9px 4px;color:#6b7280;font-size:.9rem;font-weight:600;text-decoration:none} .media-search-clear:hover{color:#374151;text-decoration:underline} .media-search-empty{color:#6b7280;margin:4px 0} @media(max-width:600px){ .admin .media-search-form{flex-wrap:wrap} .admin .media-search-form input[type=search]{flex-basis:100%;width:100%} .media-filter-check{flex:1;justify-content:center} .media-grid{grid-template-columns:1fr} } .pills{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0} .pill{font-size:.73rem;padding:2px 8px;border-radius:999px;white-space:nowrap} .pill-cat{background:#fef3d8;color:#7a5c1e} .pill-tag{background:#fef3c7;color:#92400e} .pill-warn{background:#fee2e2;color:#b91c1c} /* Media-card category/tag pills sit inside .media-card, which reuses the shared, public-site .card class — the generic .card span rule (2-line clamp, 140px max-width, ellipsis) otherwise leaks in and truncates any pill whose category name doesn't fit 140px (e.g. "Connection and Nostalgia" was rendering as "Connection and N…"). */ .pills .pill{max-width:none;text-align:start;-webkit-line-clamp:unset;overflow:visible;text-overflow:clip;display:inline-block;margin-top:0} .inline-del{display:inline} details.admin-expand>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d1d5db;background:#f9fafb;font-size:.82rem;font-weight:600;color:#374151;user-select:none} details.admin-expand>summary::-webkit-details-marker{display:none} details.admin-expand>summary::before{content:'▸ ';font-size:.7em;opacity:.7} details.admin-expand[open]>summary::before{content:'▾ '} details.admin-expand>.detail-body{margin-top:10px;padding:12px;border-radius:8px;background:#f9fafb;border:1px solid #e5e7eb} /* ══════════════════════════════════════════════════════════════════════════ Admin Users — premium redesign ══════════════════════════════════════════════════════════════════════════ */ .au-card{ background:#fff;border-radius:18px;padding:24px 26px; box-shadow:0 4px 24px rgba(0,0,0,.05);border-top:4px solid var(--gold); margin:0 0 20px; } .au-section-title{margin:0 0 4px;font-size:1.3rem} .au-section-hint{margin:0 0 18px;color:#6b7280;font-size:.9rem} /* ── Create account (collapsed by default, de-emphasised vs the list) ────── */ .au-create{border:none} .au-create>summary{ cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px; font-weight:700;font-size:1.05rem;color:var(--charcoal); padding:2px 0; } .au-create>summary::-webkit-details-marker{display:none} .au-create-summary-icon{ width:26px;height:26px;border-radius:50%;flex:0 0 26px; background:#f7f2e4;color:var(--gold-dark);font-weight:700; display:flex;align-items:center;justify-content:center;font-size:1.1rem; } .au-create-form{margin-top:18px;display:flex;flex-direction:column;gap:16px} .au-field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px} .au-field{display:flex;flex-direction:column;gap:6px} .au-field>span{font-size:.84rem;font-weight:600;color:#374151} .au-field input,.au-field select{ width:100%;padding:11px 12px;border-radius:10px;border:1px solid #d1d5db; font:inherit;box-sizing:border-box; } .au-field input:focus,.au-field select:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,150,62,.15); } /* ── Role picker: selectable cards instead of a raw