/* Layouts: where the navigation lives (body[data-layout]) and whether pages sit on cards
   (body[data-surface]). Every interface style picks one of each; both can be changed on their own.
   Layouts are desktop only: phones keep the bottom tab bar. Placement rules are written in full;
   the look of the nav container goes through :where() so a style (Liquid Glass…) can restyle it. */

@media (min-width: 761px) {
  body:is([data-layout=dock], [data-layout=rail], [data-layout=sidebar], [data-layout=vertical], [data-layout=status]) .nav { z-index: 60; }
  body:is([data-layout=dock], [data-layout=rail], [data-layout=sidebar]) .nav-i { display: block; }

  /* ═════ DOCK: a floating capsule at the bottom, icons that swell under the pointer ═════ */
  body[data-layout=dock] .nav { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); gap: 4px; padding: 7px; border-radius: 24px; }
  body[data-layout=dock] :where(.nav) {
    background: rgba(18, 18, 22, .55); border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 26px 60px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .12);
  }
  body[data-layout=dock] .nav a { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 16px; transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), color .3s; }
  body[data-layout=dock] .nav a:hover { transform: translateY(-9px) scale(1.24); }
  body[data-layout=dock] .nav a:hover + a, body[data-layout=dock] .nav a:has(+ a:hover) { transform: translateY(-3px) scale(1.08); }
  body[data-layout=dock] .nav-t {
    position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 9px;
    font-size: 11.5px; color: #fff; background: rgba(10, 10, 12, .92); box-shadow: 0 8px 20px -8px #000; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; text-transform: none; letter-spacing: 0;
  }
  body[data-layout=dock] .nav a:hover .nav-t { opacity: 1; transform: translate(-50%, 0); }
  body[data-layout=dock] .nav a.on::after { content: ''; position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .8; }
  body[data-layout=dock] .nav-ind { border-radius: 16px; }
  body[data-layout=dock] main { padding-bottom: 130px; }

  /* ═════ RAIL: a slim floating column on the left, icon over label ═════ */
  body[data-layout=rail] #app { padding-left: 90px; }
  body[data-layout=rail] .topbar { grid-template-columns: minmax(0, 1fr); }
  body[data-layout=rail] .brand { position: fixed; left: 14px; top: 14px; width: 64px; height: 62px; justify-content: center; z-index: 61; }
  body[data-layout=rail] .brand span { display: none; }
  body[data-layout=rail] .nav { position: fixed; left: 14px; top: 14px; bottom: 14px; width: 64px; flex-direction: column; justify-content: safe center; gap: 2px; padding: 72px 6px 12px; border-radius: 22px; overflow-y: auto; scrollbar-width: none; }
  body[data-layout=rail] :where(.nav) {
    background: rgba(14, 14, 17, .5); border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  body[data-layout=rail] .nav a { width: 100%; flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 7px; border-radius: 14px; font-size: 9.5px; letter-spacing: .02em; }
  body[data-layout=rail] .nav-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body[data-layout=rail] .nav-ind { border-radius: 14px; }

  /* ═════ SIDEBAR: a full-height column with labels, like a pro tool ═════ */
  body[data-layout=sidebar] #app { padding-left: 236px; }
  body[data-layout=sidebar] .topbar { grid-template-columns: minmax(0, 1fr); padding-left: 26px; }
  body[data-layout=sidebar] .brand { position: fixed; left: 22px; top: 20px; z-index: 61; font-size: 16px; }
  body[data-layout=sidebar] .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 236px; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1px; padding: 74px 12px 20px; border-radius: 0; overflow-y: auto; }
  body[data-layout=sidebar] :where(.nav) {
    background: rgba(10, 10, 12, .62); border-right: 1px solid var(--line);
    backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  }
  body[data-layout=sidebar] .nav::before { content: 'Workspace'; padding: 0 12px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
  body[data-layout=sidebar] .nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; }
  body[data-layout=sidebar] .nav a[data-nav=community] { margin-top: 18px; }
  body[data-layout=sidebar] .nav a[data-nav=community]::before { content: 'Social'; position: absolute; top: -18px; left: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
  body[data-layout=sidebar] .nav-i { opacity: .9; }
  body[data-layout=sidebar] .nav-ind { border-radius: 10px; }

  /* ═════ VERTICAL: labels turned on their side down the left edge ═════ */
  body[data-layout=vertical] #app { padding-left: 62px; }
  body[data-layout=vertical] .nav { position: fixed; left: 0; top: 0; bottom: 0; width: 54px; flex-direction: column; justify-content: safe center; gap: 4px; padding: 12px 8px; border-radius: 0; }
  body[data-layout=vertical] :where(.nav) { background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .15)); border-right: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  body[data-layout=vertical] .nav a { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 0; border-radius: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
  body[data-layout=vertical] .nav-ind { border-radius: 10px; }

  /* ═════ STATUS: a tmux line along the bottom edge ═════ */
  body[data-layout=status] .nav { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; gap: 0; padding: 0 10px; border-radius: 0; counter-reset: win -1; font-family: var(--mono); }
  body[data-layout=status] :where(.nav) { background: rgba(var(--accent-rgb), .1); border-top: 1px solid rgba(var(--accent-rgb), .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  body[data-layout=status] .nav::before { content: '[mercury]'; padding-right: 16px; font-size: 12px; color: rgb(var(--accent-rgb)); font-weight: 600; }
  body[data-layout=status] .nav::after { content: '● live'; margin-left: auto; font-size: 11.5px; color: rgba(var(--accent-rgb), .65); }
  body[data-layout=status] .nav a { counter-increment: win; height: 30px; display: flex; align-items: center; padding: 0 11px; border-radius: 0; font-size: 12px; letter-spacing: 0; text-transform: lowercase; }
  body[data-layout=status] .nav-t::before { content: counter(win) ':'; opacity: .6; }
  body[data-layout=status] .nav a.on .nav-t::after { content: '*'; }
  body[data-layout=status] .nav a.on { color: #000; text-shadow: none; }
  body[data-layout=status] .nav-ind { border-radius: 0; background: rgb(var(--accent-rgb)); box-shadow: 0 0 16px rgba(var(--accent-rgb), .5); clip-path: none; filter: none; }
  body[data-layout=status] main { padding-bottom: 80px; }
  body[data-layout=status] .sidebar { padding-bottom: 60px; }

  /* ═════ MASTHEAD: a newspaper head: dateline, centred title, numbered sections under a rule ═════ */
  body[data-layout=masthead] .topbar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "date brand right" "nav nav nav"; row-gap: 12px; padding: 16px 28px 0; }
  body[data-layout=masthead] .topbar::before { content: attr(data-date); grid-area: date; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-family: var(--mono); }
  body[data-layout=masthead] .brand { grid-area: brand; gap: 12px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 36px; letter-spacing: -.01em; }
  body[data-layout=masthead] .brand svg { width: 28px; height: 28px; }
  body[data-layout=masthead] .brand > span { font-size: 26px; }
  body[data-layout=masthead] .topbar-right { grid-area: right; }
  body[data-layout=masthead] .nav { grid-area: nav; justify-self: stretch; justify-content: center; gap: 4px; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 3px 0 -2px var(--line); counter-reset: sec; }
  body[data-layout=masthead] .nav a { counter-increment: sec; border-radius: 0; padding: 4px 14px; font-size: 13px; letter-spacing: .01em; }
  body[data-layout=masthead] .nav a::before { content: counter(sec, decimal-leading-zero); margin-right: 6px; font-family: var(--mono); font-size: 9.5px; vertical-align: 3px; opacity: .5; }
  body[data-layout=masthead] .nav a.on { color: var(--text); }
  body[data-layout=masthead] .nav-ind { background: none; box-shadow: none; border-radius: 0; clip-path: none; filter: none; border-bottom: 1px solid rgb(var(--accent-rgb)); }
  body[data-layout=masthead] main { padding-top: 22px; }
}
/* Short screens: turned labels don't fit, so the vertical nav shows icons */
@media (min-width: 761px) and (max-height: 860px) {
  body[data-layout=vertical] .nav a { writing-mode: horizontal-tb; transform: none; padding: 11px 0; }
  body[data-layout=vertical] .nav-t { display: none; }
  body[data-layout=vertical] .nav-i { display: block; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  body[data-layout=sidebar] #app { padding-left: 72px; }
  body[data-layout=sidebar] .nav { width: 62px; padding-left: 8px; padding-right: 8px; }
  body[data-layout=sidebar] .nav::before, body[data-layout=sidebar] .nav a::before, body[data-layout=sidebar] .nav-t, body[data-layout=sidebar] .brand span { display: none; }
  body[data-layout=sidebar] .nav a { justify-content: center; padding: 10px 0; }
  body[data-layout=masthead] .topbar::before { display: none; }
}

/* ═════ OPEN SURFACE: no cards. Sections sit on the page, split by hairlines ═════ */
body[data-surface=open] #main :is(.panel, .stat, .day-group).glass { background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-surface=open] #main :is(.panel, .stat, .day-group).glass::before,
body[data-surface=open] #main :is(.panel, .stat, .day-group).glass::after { display: none; }
body[data-surface=open] #main .panel { border-top: 1px solid var(--line); padding: 20px 2px 12px; }
body[data-surface=open] #main .panel-title { color: var(--text); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
body[data-surface=open] #main .stats-row { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body[data-surface=open] #main .stat { padding: 18px 22px; border-left: 1px solid var(--line-2); }
body[data-surface=open] #main .stat:first-child { border-left: 0; padding-left: 2px; }
/* phones: two stats per row, each row starting at the left edge */
@media (max-width: 760px) {
  body[data-surface=open] #main .stat { padding: 14px 14px 14px 16px; }
  body[data-surface=open] #main .stat:nth-child(odd) { border-left: 0; padding-left: 2px; }
  body[data-surface=open] #main .stat:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
}
body[data-surface=open] #main .stat:hover { transform: none; background: rgba(255, 255, 255, .02); }
body[data-surface=open] #main :is(.dw-grid, .gp-grid) { column-gap: 44px; }
body[data-surface=open] #main .day-group { border-top: 1px solid var(--line); }
/* smaller glass pieces (tiles, podium, banners) keep a quiet outline */
body[data-surface=open] #main .glass:not(.panel):not(.stat):not(.day-group) { background: rgba(255, 255, 255, .015); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border: 1px solid var(--line); }
body[data-surface=open] #main .glass:not(.panel):not(.stat):not(.day-group)::before { display: none; }
body[data-surface=open] #main :is(.gr, .gp-totals > div) { background: none; border-radius: 0; border-width: 0 0 1px; }
body[data-surface=open] .sidebar { border-left-color: var(--line); }

/* ═════ FOLIO: an editorial look. Cream on ink, big serif numbers, mono labels ═════ */
body[data-ui=folio] {
  --text: #efe6d2; --text-2: rgba(239, 230, 210, .66); --text-3: rgba(239, 230, 210, .42);
  --line: rgba(239, 230, 210, .16); --line-2: rgba(239, 230, 210, .08); --hover: rgba(239, 230, 210, .05); --chart-line: #ecdcb9;
}
body[data-ui=folio] .glass { background: rgba(14, 13, 11, .94); border: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 70px -40px #000; }
body[data-ui=folio] .glass::before { display: none; }
body[data-ui=folio] .h-title { font-family: var(--serif); font-style: normal; font-weight: 400; font-size: 66px; letter-spacing: -.025em; line-height: .95; }
body[data-ui=folio] :is(.hero-v, .stat-v, .sb-big, .pod-pnl, .gr-pnl, .gg-v b, .pt-v b, .lb-you-p) { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
body[data-ui=folio] .hero-v { font-size: clamp(70px, 9vw, 132px); line-height: .9; }
body[data-ui=folio] .stat-v { font-size: 38px; }
body[data-ui=folio] :is(.panel-title, .stat-k, .hero-k, .lbl, .sb-head, .gp-totals em, .gt-stats em, .gg-k, .cal-dow) { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
body[data-ui=folio] .hero-k em { font-family: var(--serif); font-style: italic; font-size: 20px; text-transform: none; letter-spacing: 0; }
body[data-ui=folio] .panel-title .ic { display: none; }
body[data-ui=folio] .btn { border-radius: 999px; background: transparent; border: 1px solid var(--line); }
body[data-ui=folio] .btn:hover { border-color: rgba(239, 230, 210, .4); background: transparent; }
body[data-ui=folio] .btn.primary { background: #ecdcb9; color: #15120c; border-color: transparent; }
body[data-ui=folio] .seg { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
body[data-ui=folio] .seg button { border-radius: 0; padding: 6px 11px; }
body[data-ui=folio] .seg button.on { background: none; box-shadow: inset 0 -1px 0 #ecdcb9; color: var(--text); }
body[data-ui=folio] .cal-day { border-radius: 0; background: none; border-color: var(--line-2); }
body[data-ui=folio] .cal-day.win { background: rgba(236, 220, 185, .1); border-color: rgba(236, 220, 185, .45); box-shadow: none; }
body[data-ui=folio] .nav a { color: var(--text-3); }
body[data-ui=folio] .nav a:hover { color: var(--text); }
body[data-ui=folio] .nav a.on { color: var(--text); }
body[data-ui=folio] .nav-ind { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid #ecdcb9; }
body[data-ui=folio] :is(input[type=text], input[type=search], input[type=number], input[type=url], input[type=password], select, textarea) { background: transparent; border-radius: 0; border-width: 0 0 1px; }
body[data-ui=folio] .tb-avatar { box-shadow: 0 0 0 1px var(--line); }
body[data-ui=folio] ::selection { background: #ecdcb9; color: #000; }
/* a drop cap on the page title */
body[data-ui=folio] .h-title::first-letter { font-style: italic; color: #ecdcb9; }

/* ═════ per-style touches for their own navigation ═════ */
@media (min-width: 761px) {
  /* Quicksilver: a machined steel rail with a chrome edge */
  body[data-ui=quicksilver][data-layout=rail] .nav {
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), linear-gradient(90deg, #2c2c33, #121216 60%, #1d1d22);
    border: 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(0, 0, 0, .8), 0 0 0 1px #000, 0 0 0 2px #6f717a, 0 30px 60px -20px #000;
  }
  body[data-ui=quicksilver][data-layout=rail] .nav a { color: #9fa1aa; }
  body[data-ui=quicksilver][data-layout=rail] .nav a.on { color: #111; }
  /* HUD: angled marker and a tick ruler down the edge */
  body[data-ui=hud][data-layout=vertical] .nav { background: linear-gradient(90deg, rgba(var(--accent-rgb), .08), transparent); border-right: 1px solid rgba(var(--accent-rgb), .3); box-shadow: inset -6px 0 0 -5px rgba(var(--accent-rgb), .2); }
  body[data-ui=hud][data-layout=vertical] .nav::after { content: ''; position: absolute; right: 3px; top: 10%; bottom: 10%; width: 4px; background: repeating-linear-gradient(180deg, rgba(var(--accent-rgb), .45) 0 1px, transparent 1px 10px); }
  body[data-ui=hud][data-layout=vertical] .nav a { color: rgba(var(--accent-rgb), .6); }
  body[data-ui=hud][data-layout=vertical] .nav a.on { color: #001014; }
  body[data-ui=hud][data-layout=vertical] .nav-ind { border-radius: 0; clip-path: polygon(0 10px, 100% 0, 100% calc(100% - 10px), 0 100%); }
  /* Studio: a quiet solid sidebar */
  body[data-ui=studio][data-layout=sidebar] .nav { background: #0b0b0e; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body[data-ui=studio][data-layout=sidebar] .nav a { color: var(--text-2); }
  body[data-ui=studio][data-layout=sidebar] .nav a:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
  /* Terminal: the status line is the only chrome */
  body[data-ui=terminal][data-layout=status] .nav { background: rgba(var(--accent-rgb), .08); }
}

/* ═════ layout picker (Customize, Settings) ═════ */
.lay-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-bottom: 8px; }
.lay-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px 7px; border-radius: 12px; border: 1px solid var(--line); font-size: 11.5px; color: var(--text-2); transition: border-color .2s, color .2s, background .2s; }
.lay-pick:hover { color: var(--text); border-color: rgba(255, 255, 255, .2); }
.lay-pick.on { color: var(--text); border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .05); }
.lay-th { --cl: 6px; --ct: 6px; position: relative; display: block; width: 56px; height: 38px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); overflow: hidden; }
.lay-th i { position: absolute; background: rgba(255, 255, 255, .8); border-radius: 2px; }
.lay-th b { position: absolute; background: rgba(255, 255, 255, .15); border-radius: 2px; }
.lay-th b:nth-of-type(1) { left: var(--cl); right: 5px; top: var(--ct); height: 6px; }
.lay-th b:nth-of-type(2) { left: var(--cl); width: calc((100% - var(--cl) - 8px) / 2); top: calc(var(--ct) + 9px); height: 11px; }
.lay-th b:nth-of-type(3) { right: 5px; width: calc((100% - var(--cl) - 8px) / 2); top: calc(var(--ct) + 9px); height: 11px; }
.lt-top { --ct: 10px; } .lt-top i { left: 14px; right: 14px; top: 4px; height: 3px; }
.lt-dock i { left: 17px; right: 17px; bottom: 3px; height: 4px; border-radius: 3px; }
.lt-rail { --cl: 12px; } .lt-rail i { left: 3px; top: 4px; bottom: 4px; width: 5px; border-radius: 3px; }
.lt-sidebar { --cl: 19px; } .lt-sidebar i { left: 0; top: 0; bottom: 0; width: 14px; border-radius: 0; opacity: .45; }
.lt-vertical { --cl: 9px; } .lt-vertical i { left: 3px; top: 7px; bottom: 7px; width: 2px; }
.lt-status i { left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; }
.lt-masthead { --ct: 13px; } .lt-masthead i { left: 8px; right: 8px; top: 9px; height: 1px; box-shadow: 0 -5px 0 0 transparent; }
.lt-masthead::before { content: ''; position: absolute; left: 22px; right: 22px; top: 3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .5); }

/* ═════ style cards: where each style puts its nav ═════ */
.uip .uip-nav { position: absolute; z-index: 2; background: currentColor; opacity: .55; border-radius: 3px; }
.uip[data-nav-at=top] .uip-nav { left: 34%; right: 34%; top: 5px; height: 3px; }
.uip[data-nav-at=dock] .uip-nav { left: 32%; right: 32%; bottom: 4px; height: 5px; }
.uip[data-nav-at=dock] > span { bottom: 14px; }
.uip[data-nav-at=rail] .uip-nav { left: 4px; top: 12px; bottom: 12px; width: 5px; }
.uip[data-nav-at=sidebar] .uip-nav { left: 0; top: 0; bottom: 0; width: 14px; border-radius: 0; opacity: .14; }
.uip[data-nav-at=vertical] .uip-nav { left: 4px; top: 22%; bottom: 22%; width: 2px; }
.uip[data-nav-at=status] .uip-nav { left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0; opacity: .7; }
.uip[data-nav-at=status] > span { bottom: 12px; }
.uip[data-nav-at=masthead] .uip-nav { left: 10px; right: 10px; top: 11px; height: 1px; opacity: .45; }
.uip:is([data-nav-at=rail], [data-nav-at=sidebar], [data-nav-at=vertical]) > span { left: 20px; }
.uip[data-nav-at=masthead] > span { top: 18px; }

.uip-folio { background: radial-gradient(90% 80% at 50% 0%, #201c15, #0c0b09 70%); color: #efe6d2; font-family: 'Geist', system-ui, sans-serif; }
.uip-folio::before { content: 'Mercury'; position: absolute; top: 1px; left: 0; right: 0; text-align: center; font-family: 'Unbounded', 'Geist', system-ui, sans-serif; font-weight: 500; font-size: 7px; letter-spacing: -.02em; opacity: .8; }
.uip-folio > span { padding: 6px 2px; justify-content: flex-end; gap: 2px; }
.uip-folio em { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 7.5px; }
.uip-folio strong { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 30px; letter-spacing: -.01em; color: #ecdcb9; }
.uip-folio u { display: none; }