/* Bryghton Media — Style Catalog. Grid-first, after styles.refero.design: a sticky header, one title row, then the
   cards. Each card is a rounded mat with the capture inside it; the name and number sit under the mat.
   Geometry matched to refero on 2026-09-14 (read from its shipped CSS, not eyeballed): page max 1800px, side padding
   24/40/64/96px, 1/2/3 columns at 640/1280px, gaps 16x32 -> 24x40 -> 32x40, mat radius 32px padded 32/40/48px, shot
   16:10 with an 8px radius and a 1px border, name 20/28px semibold -.025em, caption 13/20px medium -.02em.
   ⛔ DEPARTURES FROM REFERO, both his calls on 2026-09-14 and both deliberate:
   (a) the mat pad is 10/14/18px, not refero's 32/40/48 — "the border around the videos is huge". Refero's mat is a
       white gallery paper where a wide margin reads as framing; on near-black it reads as wasted card.
   (b) the grid is TWO columns on a phone, not one — "make the mobile version two wide". The card body drops to
       14/20 name and a 26px favicon below 640px, because the 20/28 name does not fit half a phone.
   Dark ground, gold accent. No gradients, no shadows, no filters. American spelling. */
:root{
  --accent:#FFAF01; --accent-line:rgba(255,175,1,.36);
  --bg:#060608; --bg-raise:#121217; --bg-hover:#18181E; --bg-inset:#040405;
  --ink:#F2F2EF; --ink-soft:#CFCEC8; --ink-mute:#9A9992; --ink-faint:#6C6B66;
  --rule:rgba(242,242,239,.10); --rule-strong:rgba(242,242,239,.22);
  --font-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --gutter:16px; --shell:1800px; --dgutter:clamp(16px,2.4vw,40px);
  --mat-pad:10px; --mat-radius:20px; --shot-radius:8px; --frame-radius:16px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.4,0,.2,1);
}
@media (min-width:640px){:root{--gutter:40px;--mat-pad:14px;--mat-radius:22px}}
@media (min-width:1024px){:root{--gutter:64px}}
@media (min-width:1280px){:root{--gutter:96px;--mat-pad:18px;--mat-radius:26px}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:100%;-webkit-text-size-adjust:100%}
body{margin:0;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-100px;background:var(--accent);color:#0A0A0D;padding:8px 14px;font-weight:600;text-decoration:none;z-index:20}
.skip:focus{top:12px}

/* header: sticky, solid, one line. 80px tall with 16px side padding (refero: h-20 px-4); the brand sits at the edge
   while the grid is inset by the page gutter, as on the original. */
.top{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--rule)}
.top__in{display:flex;justify-content:space-between;align-items:center;gap:16px;height:80px;padding:0 16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0}
.brand__mark{width:22px;height:22px;color:var(--accent);flex:none}
.brand__name{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.brand__name b{font-weight:500;color:var(--ink)}
.brand__sep{color:var(--ink-faint);margin:0 2px}
.btn{display:inline-block;border:1px solid var(--accent);color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.01em;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .18s var(--ease),color .18s var(--ease)}
.btn:hover{background:var(--accent);color:#0A0A0D}
@media (max-width:420px){.brand__name{font-size:11px;letter-spacing:.12em}.btn{font-size:13px;padding:8px 12px}}

/* title row: the h1 and the count, the search box, the nav links. That is the whole hero. 16/20px above (refero:
   pt-4 sm:pt-5), 16px to the sort row. Refero stacks these centered; we keep them on one line and let them wrap. */
.head{max-width:var(--shell);margin:0 auto;padding:16px var(--gutter) 16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
@media (min-width:640px){.head{padding-top:20px}}
.head__title{display:flex;align-items:center;gap:16px;flex:none}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,1.3rem + 1.2vw,2.25rem);line-height:1;letter-spacing:-.01em;margin:0}
.count{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-mute);white-space:nowrap}
/* the search box, after refero's: one rounded field (theirs 60px tall, 16px radius, hairline, card background, the
   field at the left and a solid "Search" button at the right end, 44px tall and at least 92px wide, dimmed until there
   is a query). Ours is 52px tall so it sits with the 40px pills. Filtering is live on input; the button re-applies the
   filter and moves focus to the first match (or back to the field when it is empty). */
.search{flex:1 1 300px;max-width:640px;min-width:0;display:flex;align-items:center;gap:8px;height:52px;margin:0;padding:5px 5px 5px 16px;background:var(--bg-raise);border:1px solid var(--rule-strong);border-radius:16px;transition:border-color .15s var(--ease-io)}
.search:focus-within{border-color:var(--accent-line)}
.search__q{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;letter-spacing:-.01em;color-scheme:dark;-webkit-appearance:none;appearance:none}
.search__q::placeholder{color:var(--ink-faint);opacity:1}
.search__q:focus{outline:none}
.search__q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-right:6px;cursor:pointer;background:currentColor;color:var(--ink-mute);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3 13 13M13 3 3 13' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3 13 13M13 3 3 13' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.search__go{flex:none;height:40px;min-width:92px;padding:0 20px;margin:0;font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;color:#0A0A0D;background:var(--accent);border:0;border-radius:10px;cursor:pointer;opacity:.5;transition:opacity .15s var(--ease-io)}
.search.has-q .search__go,.search__go:hover,.search__go:focus-visible{opacity:1}
/* the nav links under refero's search: three small muted links that brighten on hover */
.more-nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;line-height:24px;letter-spacing:-.01em;color:var(--ink-mute);margin-left:auto}
.more-nav a{text-decoration:none;color:inherit;transition:color .15s var(--ease-io)}
.more-nav a:hover{color:var(--ink)}
/* the sort row: refero's Trending / Popular / Newest pill tabs at the left, our Dark / Light filters at the right
   (refero: sm:justify-between), 20px to the grid (space-y-5) */
.bar{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter) 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.sort{display:flex;flex-wrap:wrap;gap:8px}
/* pills: 40px tall, 16px sides, 14px medium, 8px apart; hover tints, the active one is filled and semibold (refero's
   pill tabs). A tab with no data behind it is aria-disabled: dimmed, no hover, a not-allowed cursor, its title says why. */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.chip{font:inherit;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.01em;height:40px;display:inline-flex;align-items:center;color:var(--ink-mute);background:transparent;border:1px solid var(--rule);border-radius:999px;padding:0 16px;cursor:pointer;transition:border-color .15s var(--ease-io),color .15s var(--ease-io),background .15s var(--ease-io)}
.chip:hover{color:var(--ink);background:rgba(242,242,239,.04)}
.chip[aria-disabled="true"]{opacity:.45;cursor:default}
.chip[aria-pressed="true"],.chip[aria-selected="true"]{color:var(--ink);background:var(--bg-raise);border-color:var(--rule-strong);font-weight:600}
.chip[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.chip[aria-disabled="true"]:hover{color:var(--ink-mute);background:transparent}
@media (max-width:720px){.tabs{margin-left:0}.more-nav{margin-left:0;width:100%}.search{flex-basis:100%;max-width:none}}

/* the grid: 1 / 2 / 3 columns at 640 / 1280, gaps 16x32 -> 24x40 (1024) -> 32x40 (1280); 64px under the last row */
.grid-wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter) 64px}
.grid{list-style:none;margin:0;padding:0;display:grid;gap:24px 10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.grid{gap:32px 16px}}
@media (min-width:1024px){.grid{gap:40px 24px}}
@media (min-width:1280px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}}
.card{position:relative;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 340px}
.card[hidden]{display:none}
/* the empty state of the search: one line and a link-styled button that clears the field */
.empty{margin:0;padding:48px 0 24px;text-align:center;color:var(--ink-soft);font-size:1.05rem}
.empty[hidden]{display:none}
.empty__q{font-weight:600;color:var(--ink)}
.empty__q::before{content:"\201C"}
.empty__q::after{content:"\201D"}
.empty__clear{font:inherit;color:var(--accent);background:transparent;border:0;padding:0;margin:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.empty__clear:hover{color:var(--ink)}
/* the whole card is one control: a transparent button over everything opens the detail view (click or keyboard) */
.open{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:pointer;z-index:2;border-radius:var(--mat-radius)}
.open:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}   /* inside the box: content-visibility:auto paint-contains the card and clips anything outside it */
/* the mat: a rounded raised panel with the capture centered in it, like refero's card */
.mat{background:var(--bg-raise);border-radius:var(--mat-radius);padding:var(--mat-pad);overflow:hidden;transition:background .2s var(--ease-io)}
.card:hover .mat,.card:focus-within .mat{background:var(--bg-hover)}
/* ⭐ 2026-09-14, his note "change the borders": the 1px hairline around every shot read as
   BOXY on a dark ground — 1,290 outlined rectangles stacked down the page. Refero runs that
   border on a WHITE ground where it separates image from paper; on near-black it just adds
   noise, because the mat already provides the separation. Border removed, radius softened,
   Border kept but dropped from --rule-strong to 4% white, so a light screenshot still has an
   edge and a dark one has none to speak of. ⛔ Stays a BORDER, not a box-shadow — this file's
   own rule at the top is no shadows, and a hairline does not need to break it. */
.shot{position:relative;aspect-ratio:16/10;background:var(--bg-inset);overflow:hidden;border-radius:12px;border:1px solid rgba(242,242,239,.04);
  transition:transform .3s var(--ease-io);--travel:0px;--dur:8s}
.card:hover .shot,.card:focus-within .shot{transform:scale(1.02)}
.shot img{width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top;position:absolute;left:0;top:0;user-select:none;-webkit-user-drag:none;pointer-events:none}
.shot img[data-src]{visibility:hidden}   /* until catalog.js attaches the src: no alt text, no broken-image glyph */
/* no still on disk yet (the download is not through, or refero has none): a neutral inset tile with the site's initial */
.shot--none{display:grid;place-items:center}
.shot__mono{font-family:var(--font-display);font-size:clamp(28px,6vw,44px);line-height:1;color:var(--brand,var(--ink-faint));user-select:none}
/* the effect: the captured page travels upward through the frame, then back, while the card is on screen */
@keyframes sweep{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--travel),0)}}
.shot.is-live img{animation:sweep var(--dur) cubic-bezier(.45,0,.55,1) infinite alternate;animation-delay:.9s;will-change:transform}
.card:hover .shot.is-live img{animation-duration:calc(var(--dur) * .55)}
/* a card with a clip (refero's preview behavior): the image is a still poster (no sweep), the clip sits over it and
   fades in over 500ms once it is actually playing. Near the end of the clip catalog.js adds .clip-end: the clip fades
   back to the still, restarts from the top and fades in again, so the loop never hard-cuts from the page's foot to its
   head. A paused clip (beyond the five nearest the middle of the screen) keeps showing its last frame, as on refero. */
.shot video{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s var(--ease-io);pointer-events:none;background:transparent}
.shot.clip-on video{opacity:1}
.shot.clip-end video{opacity:0}
.shot.has-clip img{animation:none}
@media (prefers-reduced-motion:reduce){
  .shot.is-live img{animation:none}
  .shot video{display:none}
  .card:hover .shot,.card:focus-within .shot{transform:none}
}
/* under the mat, as on refero: the 40px favicon, the site name at 20/28px semibold, one truncated 13/20px lowercase
   caption; 8px gap, 8px above, the caption pulled up 4px. The number is still in the markup (visually hidden) for the
   detail bar; it is no longer a tile on the card (Bryghton: a number and a label is "not welcoming").
   ⛔ A style with no favicon gets a monogram — and it is coloured from THAT SITE'S OWN palette (--brand, set per card),
      never the house gold. His correction 2026-09-14: "some of the letters are still like bryghton media colors
      which is not right either. like apple or bumble." Gold on Apple's card claims Apple as ours. Fallback when a
      site has no usable palette colour is neutral ink, never the accent. */
.body{display:flex;align-items:flex-start;gap:8px;padding:8px 0 4px;min-width:0}
.icon{flex:none;width:40px;height:40px;border-radius:8px;background:var(--bg-raise);object-fit:contain;user-select:none;-webkit-user-drag:none}
.icon[data-src]{visibility:hidden}   /* a favicon waits on data-src until catalog.js attaches it (after load, or near the viewport) */
.icon--mono{display:grid;place-items:center;font-family:var(--font-display);font-size:18px;line-height:1;color:var(--brand,var(--ink-soft));border:1px solid currentColor;opacity:.92}
.num{flex:none;width:40px;height:40px;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--accent);border:1px solid var(--accent-line);border-radius:8px;background:var(--bg-raise)}
.text{min-width:0;flex:1}
.look{font-family:var(--font-sans);font-size:20px;font-weight:600;line-height:28px;letter-spacing:-.025em;margin:0 0 -4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.traits{margin:0;font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:20px;letter-spacing:-.02em;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* two-up on a phone (his instruction 2026-09-14) leaves ~174px of card, so the 40px favicon and the 20/28 name have to
   come down or every second name truncates. ⛔ THIS BLOCK MUST STAY BELOW the base .icon/.look/.traits rules — same
   specificity, so source order decides, and putting it above silently does nothing (it did, for one build). */
@media (max-width:639px){
  .body{gap:6px;padding:6px 0 4px}
  .icon,.icon--mono,.num{width:22px;height:22px;border-radius:6px}
  .icon--mono{font-size:12px}
  .look{font-size:13px;line-height:18px;margin:0 0 -1px}
  .traits{font-size:10.5px;line-height:15px}
}

/* the sentinel at the foot of the grid: spans the row; a real button for keyboards and browsers without
   IntersectionObserver, auto-triggered 1500px ahead otherwise; hidden once every match is on the page */
.more{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 16px;list-style:none}
.more[hidden]{display:none}
.more__btn{font:inherit;font-size:14px;font-weight:500;letter-spacing:-.01em;height:44px;padding:0 22px;color:var(--ink-soft);background:var(--bg-raise);border:1px solid var(--rule-strong);border-radius:999px;cursor:pointer;transition:border-color .15s var(--ease-io),color .15s var(--ease-io)}
.more__btn:hover{border-color:var(--accent);color:var(--accent)}
.more__note{margin:0;font-size:.9rem;color:var(--ink-mute);text-align:center}
/* end of the list: one line and the button */
.end{max-width:var(--shell);margin:0 auto;padding:40px var(--gutter) 56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px;text-align:center;border-top:1px solid var(--rule)}
.end p{margin:0;color:var(--ink-soft);font-size:1.05rem}
.foot{max-width:var(--shell);margin:0 auto;padding:18px var(--gutter) 36px;color:var(--ink-faint);font-size:.8rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.foot p{margin:0}
.foot b{color:var(--ink-mute);font-weight:500}

/* detail view (2026-09-15, after refero's style page, read from its shipped HTML): one full-screen dialog on our ground.
   A bar with the style number, previous / next and close; under it one scrolling column, 768px max, centered: the
   16:10 preview frame (16px radius, hairline; the screenshot under the card clip, refero's own layering), then the
   name in our display face with the site's 64px favicon at its right (refero: size-16 rounded-xl), then refero's
   northStar sentence in our body type, then the site URL as a plain link with an arrow. That is the whole view
   (Bryghton: "the title and then the description paragraph and then the actual site link"); no palette, no code.
   Nothing in the frame is in the DOM until a card is opened; catalog.js attaches the still and the clip on open. */
.detail{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--bg);color:var(--ink);overflow:hidden;display:none}
.detail[open]{display:grid;grid-template-rows:auto minmax(0,1fr)}
.detail::backdrop{background:rgba(5,5,6,.9)}
@keyframes detail-in{from{opacity:0}to{opacity:1}}
.detail[open]{animation:detail-in .18s var(--ease)}
@media (prefers-reduced-motion:reduce){.detail[open]{animation:none}}
html.detail-open{overflow:hidden}
.detail__bar{display:flex;align-items:center;gap:10px;height:64px;padding:0 var(--dgutter);border-bottom:1px solid var(--rule);min-width:0}
.detail__bar .num{flex:none}
.detail__nav{display:flex;gap:6px;flex:none;margin-left:auto}
.detail__step,.detail__close{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;font:inherit;color:var(--ink-soft);background:var(--bg-raise);border:1px solid var(--rule);border-radius:999px;cursor:pointer;transition:border-color .18s var(--ease),color .18s var(--ease)}
.detail__step svg,.detail__close svg{width:16px;height:16px}
.detail__step:hover,.detail__close:hover{border-color:var(--accent);color:var(--accent)}
.detail__step[disabled]{opacity:.35;cursor:default}
.detail__step[disabled]:hover{border-color:var(--rule);color:var(--ink-soft)}
/* the column */
.detail__scroll{overflow:auto;overscroll-behavior:contain;min-width:0;min-height:0;padding:clamp(16px,3vw,40px) var(--dgutter) 40px}
.detail__scroll:focus-visible{outline-offset:-3px}
.detail__article{width:min(100%,768px);margin:0 auto}   /* refero's column: max-w-3xl */
/* the preview frame: 16:10 (catalog.js sets the clip's real proportion inline), 16px radius, hairline; the still under
   the clip so the end-of-clip fade lands on the top of the page, exactly as in the grid. A clip that cannot autoplay
   shows its controls instead. */
.detail__stage{margin:0}
.detail__clip{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--rule-strong);border-radius:var(--frame-radius);background:var(--bg-inset)}
.detail__clip img,.detail__clip video{position:absolute;left:0;top:0;width:100%;height:100%;display:block;object-fit:cover;object-position:top;border:0;border-radius:0}
.detail__clip video{opacity:0;transition:opacity .5s var(--ease-io);background:transparent}
.detail__clip.clip-on video{opacity:1}
.detail__clip.clip-end video{opacity:0}
.detail__clip video[controls]{opacity:1}
.detail__none{margin:0;padding:48px 24px;text-align:center;color:var(--ink-mute);font-size:1rem;border:1px dashed var(--rule-strong);border-radius:var(--frame-radius)}
/* the body: name + favicon, the description, the link. Our type: the display serif for the name, the sans for the
   sentence, the mono for the URL; the gold only on the arrow and the hairline under the link. */
.detail__body{padding:28px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.detail__head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;width:100%}
.detail__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:0;min-width:0;overflow-wrap:anywhere}
.detail__icon{flex:none;width:64px;height:64px;border-radius:14px;background:var(--bg-raise);overflow:hidden;display:block;user-select:none}
.detail__icon[hidden]{display:none}
.detail__icon img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
/* no favicon: the initial in THAT SITE'S OWN palette colour (--brand from the card), neutral ink if it has none; never the gold */
.detail__icon--mono{display:grid;place-items:center;font-family:var(--font-display);font-size:28px;line-height:1;color:var(--brand,var(--ink-soft));border:1px solid currentColor;opacity:.92}
.detail__traits{margin:0;font-family:var(--font-sans);font-size:17px;line-height:1.55;letter-spacing:-.01em;color:var(--ink-soft);max-width:65ch}
.detail__traits[hidden]{display:none}
.detail__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--ink-mute);text-decoration:none;border-bottom:1px solid var(--accent-line);padding:2px 0 3px;max-width:100%;transition:color .18s var(--ease),border-color .18s var(--ease)}
.detail__link svg{width:14px;height:14px;color:var(--accent);flex:none}
.detail__link:hover{color:var(--ink);border-color:var(--accent)}
.detail__link[hidden]{display:none}
.detail__site{min-width:0;overflow-wrap:anywhere}
@media (max-width:639px){
  .detail__bar{height:56px}
  .detail__scroll{padding:12px 12px 48px}
  .detail__body{padding-top:18px;gap:12px}
  .detail__title{font-size:1.7rem}
  .detail__icon{width:44px;height:44px;border-radius:10px}
  .detail__icon--mono{font-size:20px}
  .detail__traits{font-size:15px}
}