/* bradynoah.com preview in Christaan Felber's layout (Brady, 2026-10-31): sections top left, the name centred,
   About and Contact top right, photos in rows of one height, a black full-screen slideshow.
   Kept from bradynoah.com: 8px between photos (4px on phones). Type: DM Sans throughout. */
:root{
  --ink:#111111;--bg:#ffffff;--muted:#5f5f5f;--line:#e6e6e6;--rule:#b5b5b5;--soft:#f4f4f4;
  --dark:#0a0a0a;--menu:#1b1b1b;--on-dark:#c9cfd6;--ok:#22a745;--icon:#b3b3b3;
  --gap:8px;--hh:72px;--pad:5%;  /* 5% each side: the photo rows are 90% wide and centred */
  
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* small bold capitals: nav, controls, counts */
.label,.nav a,.contact-btn,.menu-btn{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
/* DM Sans everywhere; nav 14px lowercase regular, body text 14px (Brady, 2026-10-31; nav tried Poppins first) */
.nav a,.contact-btn,.menu-btn{font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;text-transform:lowercase}

/* header */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hh);
  padding:0 var(--pad);background:var(--bg)}  /* solid white, nothing shows through */
/* the name: Brady's TT Drugs Regular wordmark from Canva (v1 since 2026-10-31; earlier: logo-upright.svg, logo-italic.svg), traced with trace_logo.py.
   The text below is only a fallback. */
.logo{grid-column:2;display:block;font-size:21px;font-weight:400;font-style:italic;letter-spacing:.1em;line-height:1;white-space:nowrap}
/* the frame has a 24-unit margin so the O's top (the highest point) never clips; heights keep the letters at 19px / 15px */
.logo-mark{display:block;height:20.2px;width:auto;aspect-ratio:7496/796;overflow:visible}
.nav{display:flex;align-items:center;gap:32px}
.nav.work{grid-column:1;justify-self:start}
.nav.info{grid-column:3;justify-self:end}
.nav a,.contact-btn,.u{position:relative;display:inline-block;padding:6px 0}
.nav a::after,.contact-btn::after,.u::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out)}
.nav a[aria-current="page"]::after,.contact-btn[aria-expanded="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after,.contact-btn:hover::after,.u:hover::after{transform:scaleX(1)}}

/* Contact drops down the email with a copy button */
.contact{position:relative}
.contact-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:5;padding:12px 16px;background:var(--bg);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(17,17,17,.08);white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.97);transform-origin:top right;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s .18s}
.contact-panel::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}  /* hover bridge over the gap */
.contact.open .contact-panel{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s var(--ease-out),transform .18s var(--ease-out),visibility 0s}
.cline{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;letter-spacing:.08em}
.copybtn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--icon);line-height:0;transition:color .15s ease}
@media (hover:hover) and (pointer:fine){.copybtn:hover{color:var(--muted)}}
.copybtn svg{width:15px;height:15px}
/* copied: the icon turns into a green check for a moment (no text beside it, so the drop-down has no spare width) */
.copybtn .i-done{display:none}
.cline.copied .copybtn .i-copy{display:none}
.cline.copied .copybtn .i-done{display:block;color:var(--ok)}

/* phones: name left, MENU right, a dark full-screen menu */
.menu-btn{display:none;grid-column:2;justify-self:end;padding:8px 0}
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--menu);color:#ffffff;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out),visibility 0s .25s}
.menu.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease-out),visibility 0s}
.menu-top{position:absolute;top:0;left:0;right:0;height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad)}
.menu-top .logo{font-size:17px}
.menu-top .logo-mark{height:16px}
.menu ul{list-style:none;margin:0;padding:0;text-align:center}
.menu li a,.menu .contact-btn{display:inline-block;padding:7px 0;font-family:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:22px;font-weight:400;letter-spacing:.06em;text-transform:lowercase}
.menu li a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.menu li.sp{height:28px}
.menu .contact-btn::after{display:none}
.menu .contact-panel{position:static;padding:6px 0 0;background:none;border:0;box-shadow:none;transform:none}
.menu .contact-panel::before{display:none}
.menu .cline{justify-content:center;font-size:15px}
.menu .copybtn{color:var(--on-dark)}
.menu .cline.copied .copybtn .i-done{color:#ffffff}
@media (max-width:999px){  /* the full nav needs 1000px once the name is 24px tall; below that, MENU */
  :root{--hh:60px}
  .top{grid-template-columns:1fr auto}
  .top>.logo{grid-column:1;justify-self:start;font-size:17px}
  .top .logo-mark{height:16px}
  .nav{display:none}
  .menu-btn{display:block}
}

/* photo rows: each row one height, 2 to 3 photos wide (1 on phones); widths follow each photo's shape */
main{display:block;padding-bottom:64px}
.bar{width:90%;margin:16px auto;display:flex;align-items:center;justify-content:flex-end;gap:12px 24px;flex-wrap:wrap}
.tools{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.sortwrap{position:relative;display:inline-flex}
.sortwrap select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;font-size:16px}
#search{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:4px 0;width:200px;outline:none;-webkit-appearance:none;appearance:none}
#search:focus{border-bottom-color:var(--ink)}
#search::placeholder{color:var(--muted)}
.rows{width:90%;margin:8px auto 0}
.bar+.rows{margin-top:0}
.row{display:flex;gap:var(--gap);margin-bottom:var(--gap)}
.cell{position:relative;display:block;flex:var(--a) 1 0;min-width:0;aspect-ratio:var(--r);padding:0;line-height:0;background:var(--soft);
  overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cell img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
@media (hover:hover) and (pointer:fine){.cell:hover img{opacity:.82}}
.cell:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fill{flex:var(--a) 1 0}
.noresults{margin:56px 0;text-align:center;color:var(--muted);font-size:14px}
@media (max-width:639px){:root{--gap:4px}}

/* About: the bio from the old home page, in Felber's left-set single column */
.about{display:flex;align-items:flex-start;gap:56px;margin:56px var(--pad) 80px 10%}
.about-text{flex:0 1 520px;min-width:0}
.about h1{font-size:43px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 30px}
.about p{font-size:14px;line-height:1.5;font-weight:400;letter-spacing:.08em;margin:0 0 16px}  /* same as the nav */
.about p.label{font-size:11px;font-weight:700;margin:36px 0 6px;color:var(--muted)}
.about .cline{font-size:14px;font-weight:400}
.about figure{flex:1 1 0;min-width:0;max-width:760px;margin:0;line-height:0}
.about figure img{display:block;width:100%;height:auto}
@media (max-width:899px){
  .about{flex-direction:column;gap:32px;margin:32px 5vw 56px}
  .about-text{flex:none}
  .about h1{font-size:clamp(32px,9vw,43px)}
}

.foot{width:90%;margin:0 auto;padding:20px 0 30px;text-align:center}  /* no divider line (Brady, 2026-10-31) */
.foot p{margin:0;font-size:12px;color:var(--muted)}

/* slideshow: black, the photo centred in 78% x 82% of the screen, arrows at the sides, count at the bottom */
.ss{position:fixed;inset:0;z-index:100;background:var(--dark);color:#ffffff;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out),visibility 0s .25s}
.ss.open{opacity:1;visibility:visible;transition:opacity .25s var(--ease-out),visibility 0s}
.ss-stage{position:absolute;left:11%;right:11%;top:9%;bottom:9%;margin:0;display:flex;align-items:center;justify-content:center}
.ss-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;user-select:none;-webkit-user-select:none;transition:opacity .2s var(--ease-out)}
.ss-stage img.loading{opacity:0}
.ss-close{position:absolute;top:22px;right:var(--pad);z-index:2;padding:6px 0;opacity:.85}
.ss-nav{position:absolute;top:0;bottom:0;z-index:1;width:11%;display:flex;align-items:center;justify-content:center;color:#ffffff;opacity:.7;
  transition:opacity .15s ease}
.ss-nav.prev{left:0}
.ss-nav.next{right:0}
.ss-nav svg{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.ss-nav:hover,.ss-close:hover{opacity:1}}
.ss-cap{position:absolute;left:var(--pad);bottom:26px;margin:0;display:flex;gap:16px;font-size:12px;color:var(--on-dark)}
.ss-pager{position:absolute;left:0;right:0;bottom:26px;margin:0;text-align:center;pointer-events:none}
@media (max-width:639px){
  .ss-stage{left:0;right:0;top:72px;bottom:72px}
  .ss-nav{top:auto;bottom:0;height:72px;width:33%}
  .ss-cap{top:22px;bottom:auto;left:var(--pad);flex-direction:column;gap:2px;padding-right:96px}
}

@media (prefers-reduced-motion:reduce){
  .nav a::after,.contact-btn::after,.u::after{transition:none}
  .contact-panel,.contact.open .contact-panel{transform:none}
}