/* ============================================================================
   NEW ARRIVALS, 2026-09-17.

   Your words: "I do not see dev or journi on the site. I need you to build a
   new arrival so those things can be easy to find."

   This sits at the top of Omega World, above the city, so the newest things
   are the first thing you see and nobody has to hunt the painting for them.
   It uses the same ink, gold and serif as the rail and the district list in
   world2.css, so it reads as part of your world rather than a banner laid on
   top of it. The same file styles the standalone /new-arrivals page.
   ========================================================================= */

.na{
 --na-gold:var(--ow-gold,#F4C45D);
 --na-gold2:var(--ow-gold2,#FFE7A2);
 --na-gold-deep:var(--ow-gold-deep,#7B4B09);
 --na-muted:var(--ow-muted,#B9C7E6);
 --na-serif:var(--ow-serif,Georgia,"Playfair Display",serif);
 --na-body:var(--ow-body,Inter,"Segoe UI",Arial,sans-serif);
 margin:0 0 18px;padding:18px 18px 16px;border-radius:20px;
 background:linear-gradient(180deg,rgba(9,22,54,.96),rgba(2,7,24,.96));
 border:1px solid rgba(244,196,93,.32);
 box-shadow:0 24px 70px rgba(0,0,0,.45);
 scroll-margin-top:18px;min-width:0;
}
.na:target,.na.na-flash{box-shadow:0 0 0 2px rgba(244,196,93,.55),0 24px 70px rgba(0,0,0,.45)}

.na-head{
 display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
 flex-wrap:wrap;margin:0 0 14px;
}
.na-eyebrow{
 margin:0 0 4px;font:800 11px/1 var(--na-body);letter-spacing:.18em;
 text-transform:uppercase;color:var(--na-gold);
}
.na-title{
 margin:0;font-family:var(--na-serif);font-weight:700;color:#ffe9ab;
 font-size:clamp(22px,2.4vw,30px);line-height:1.15;
}
.na-all{
 color:var(--na-gold2);text-decoration:none;white-space:nowrap;
 font:800 11px/1 var(--na-body);letter-spacing:.14em;text-transform:uppercase;
 padding:10px 14px;border-radius:999px;border:1px solid rgba(244,196,93,.45);
 background:rgba(244,196,93,.08);
}
.na-all:hover,.na-all:focus-visible{background:rgba(244,196,93,.18);border-color:var(--na-gold);outline:none}

/* ------------------------------------------------------------- the cards */
.na-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.na-card{
 display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;
 padding:12px;border-radius:16px;min-width:0;
 background:linear-gradient(180deg,#071635,#020718);
 border:1px solid rgba(244,196,93,.28);
 transition:border-color .18s ease,transform .18s ease;
}
.na-card:hover{border-color:rgba(244,196,93,.7)}
.na-art{
 width:112px;height:112px;border-radius:12px;overflow:hidden;display:block;text-decoration:none;
 background:#010511;border:1px solid rgba(244,196,93,.25);
}
.na-art img{width:100%;height:100%;object-fit:cover;display:block}
/* Dev Lab has no artwork of its own yet, so it gets your mark in gold instead
   of a picture somebody invented for it. */
.na-mark{
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 background:radial-gradient(circle at 50% 35%,#1b2c5c,#010511 75%);
}
.na-mark b{
 font:700 44px/1 var(--na-serif);color:transparent;
 background:linear-gradient(160deg,var(--na-gold2),var(--na-gold) 55%,var(--na-gold-deep));
 -webkit-background-clip:text;background-clip:text;
}
.na-mark span{font:800 10px/1 var(--na-body);letter-spacing:.22em;color:var(--na-gold2)}

.na-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.na-chip{
 align-self:flex-start;padding:5px 9px;border-radius:999px;
 font:800 9px/1 var(--na-body);letter-spacing:.14em;text-transform:uppercase;
 color:var(--na-gold2);background:rgba(244,196,93,.1);border:1px solid rgba(244,196,93,.4);
}
.na-name{margin:0;font:700 17px/1.2 var(--na-serif);color:#ffe9ab;overflow-wrap:anywhere}
.na-copy{margin:0;color:#c8d4ee;font:500 13px/1.5 var(--na-body)}
.na-note{margin:0;color:var(--na-gold2);font:700 12px/1.4 var(--na-body)}
.na-cta{
 align-self:flex-start;margin-top:4px;display:inline-block;text-decoration:none;
 padding:9px 14px;border-radius:999px;font:800 12px/1 var(--na-body);
 background:linear-gradient(135deg,var(--na-gold-deep),#f4c85f);color:#160e00;
 border:1px solid #f4c85f;
}
.na-cta:hover,.na-cta:focus-visible{filter:brightness(1.08);outline:2px solid rgba(255,231,162,.6);outline-offset:2px}

/* ------------------------------------------------ your tools, only for you */
.na-owner{
 margin-top:14px;padding:14px;border-radius:16px;
 background:rgba(244,196,93,.06);border:1px dashed rgba(244,196,93,.5);
}
.na-owner-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.na-owner-title{margin:0;font:700 18px/1.2 var(--na-serif);color:#ffe9ab}
.na-owner-only{margin:0;color:var(--na-muted);font:600 11px/1.3 var(--na-body)}
.na-tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.na-tool{
 display:block;text-decoration:none;padding:11px 12px;border-radius:12px;min-width:0;
 background:linear-gradient(180deg,#071635,#020718);border:1px solid rgba(244,196,93,.3);
 color:#fff;font:700 13px/1.3 var(--na-body);
}
.na-tool span{display:block;margin-top:3px;color:var(--na-muted);font:600 11px/1.35 var(--na-body)}
.na-tool:hover,.na-tool:focus-visible{border-color:var(--na-gold);color:var(--na-gold2);outline:none}

/* the rail link: a small gold dot so the newest door is easy to spot */
.ow-rail-link.na-rail-new::after{
 content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-radius:50%;
 background:var(--ow-gold,#F4C45D);box-shadow:0 0 8px rgba(244,196,93,.8);vertical-align:middle;
}
.ow-rail-link.na-rail-new.is-here::after{background:#160E00;box-shadow:none}

/* ------------------------------------------------------- narrower screens */
@media (max-width:1280px){
 .na-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1180px){
 .na-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
 .na{padding:14px 12px 12px;border-radius:18px;margin-bottom:14px}
 .na-grid{grid-template-columns:1fr;gap:10px}
 .na-card{grid-template-columns:84px minmax(0,1fr);gap:12px;padding:10px}
 .na-art{width:84px;height:84px}
 .na-mark b{font-size:34px}
 .na-mark span{font-size:8px}
 .na-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){ .na-card{transition:none} }

/* ------------------------------------------------- the standalone page */
.na-page{max-width:1240px;margin:0 auto}
.na-page .ow-toolbar{max-width:none;margin:0 0 14px}
.na-page .na-title{font-size:clamp(26px,3.4vw,40px)}
.na-page .na-card{grid-template-columns:160px minmax(0,1fr)}
.na-page .na-art{width:160px;height:160px}
.na-page .na-grid{grid-template-columns:1fr}
.na-page .na-copy{font-size:14px}
.na-page .na-name{font-size:21px}
@media (max-width:760px){
 .na-page .na-card{grid-template-columns:96px minmax(0,1fr)}
 .na-page .na-art{width:96px;height:96px}
 .na-page .na-name{font-size:18px}
}