/* Inner-page pieces the homepage design did not need, in the design's own
   tokens (dial.css :root). dial.css itself is byte-identical to d1.html. */

/* the band: the hero copy without the photo */
.dl-band .dl-hero-copy{max-width:860px}
.dl-band .dl-h1{font-size:clamp(27px,6vw,54px)}
@media (min-width:900px){.dl-band{padding:40px 0 64px}}
.dl-crumb{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 16px;font:600 12px/1.4 var(--dl-hd);letter-spacing:.16em;text-transform:uppercase;color:var(--dl-muted)}
.dl-crumb a{color:var(--dl-lume);text-decoration:none}
.dl-crumb a:hover{text-decoration:underline}
.dl-crumb>*:not(:last-child)::after{content:"/";margin:0 10px;color:var(--dl-steel2)}
.dl-cta-gap{margin-top:18px}

/* the page you are on, in the bracelet and on the tray */
.dl-link[aria-current="page"]{background:linear-gradient(#FF8A4A,var(--dl-orange) 50%,#E85A12);color:#1A0C04}
.dl-link[aria-current="page"] small{color:#1A0C04;text-shadow:none}
.dl-cush[aria-current="page"],.dl-cush-s[aria-current="page"]{box-shadow:inset 0 0 0 2px var(--dl-lume),0 8px 16px rgba(0,0,0,.45)}

/* tiles: a steel plate per area, kind or page, the count in lume on the right */
.dl-tiles{display:grid;gap:12px;margin-bottom:28px}
@media (min-width:760px){.dl-tiles{grid-template-columns:repeat(2,1fr);gap:16px}}
.dl-tile{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:100%;padding:16px 18px;border-radius:6px;text-decoration:none;background:linear-gradient(#4B4E56,#30323A);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 10px 22px rgba(0,0,0,.35);transition:transform .18s}
.dl-tile::before{content:"";position:absolute;inset:0;background:var(--dl-brush);opacity:.5;border-radius:6px;pointer-events:none}
.dl-tile:hover{transform:translateY(-2px)}
.dl-tile-tx{position:relative;display:grid;gap:6px}
.dl-tile-tx b{font:700 20px/1.1 var(--dl-hd);letter-spacing:.03em;color:#fff}
.dl-tile-tx span{font-size:16px;line-height:1.5;color:#E3DDD5}
.dl-tile-n{position:relative;flex:none;display:grid;justify-items:center;min-width:64px;font:800 34px/1 var(--dl-hd);color:var(--dl-lume);text-shadow:0 0 10px var(--dl-glow)}
.dl-tile-n small{margin-top:4px;font:600 10px/1 var(--dl-hd);letter-spacing:.16em;text-transform:uppercase;color:#CFCBC4;text-shadow:none}
.dl-side-h{margin:8px 0 14px;font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--dl-lume);text-shadow:0 0 8px var(--dl-glow)}

/* chips: a labelled row of small steel links */
.dl-chips{margin:0 0 26px}
.dl-chips-h{margin:0 0 10px;font:700 16px/1.2 var(--dl-hd);letter-spacing:.1em;text-transform:uppercase;color:var(--dl-text)}
.dl-chips-row{display:flex;flex-wrap:wrap;gap:8px}
.dl-chips-row a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;text-decoration:none;background:linear-gradient(#5A5D65,#3D3F46);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 8px rgba(0,0,0,.35);font:700 15px/1 var(--dl-hd);letter-spacing:.05em;color:#fff}
.dl-chips-row a:hover{color:var(--dl-lume)}
.dl-chips-row small{color:var(--dl-lume);font-size:12px}

/* one girl's own price plate: length on the left, her price on the right */
.dl-ptab-one th small{display:block;margin-top:4px;font:italic 400 14px/1.3 var(--dl-tx);letter-spacing:0;text-transform:none;color:#CFCBC4}
.dl-ptab-one td{font-size:24px}
.dl-more-link{margin:18px 0 0}
.dl-more-link a{color:var(--dl-lume);font:700 15px/1.3 var(--dl-hd);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.dl-more-link a:hover{text-decoration:underline}