/*
Theme Name:   design & develop
Theme URI:    https://designanddevelop.io
Description:  Block theme for design & develop LLC. Brand: gold #EBC95E, slate #333840,
              Josefin Sans + Montserrat. The logo sets the typographic rule — "design" light,
              "develop" bold — and that light/bold pairing is the whole system.
Author:       design & develop
Author URI:   https://designanddevelop.io
Version:      2.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  dnd
Tags:         one-column, block-patterns, full-site-editing
*/

/* ---------------------------------------------------------------
   Contrast rule: gold never carries text on white (1.7:1). It is a
   background, a rule, or a mark there. Gold text only on slate (8:1).
--------------------------------------------------------------- */
:root{
  --slate:#333840;
  --slate-deep:#272B32;
  --ink:#1A1D22;
  --gold:#EBC95E;
  --gold-deep:#C9A63C;
  --bone:#F7F6F3;
  --paper:#fff;
  --line:#E2DFD8;
  --muted:#5E6572;
  --muted-invert:rgba(255,255,255,.66);

  --display:'Josefin Sans',system-ui,sans-serif;
  --body:'Montserrat',system-ui,-apple-system,sans-serif;

  --gutter:clamp(1.25rem,5vw,2.5rem);
  --max:1180px;
  --section:clamp(4.5rem,10vw,8.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{
  margin:0;
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.72;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* WordPress plumbing ------------------------------------------- */
.wp-site-blocks,
.wp-block-post-content{margin:0;max-width:none}
.wp-block-post-content > *{max-width:none}
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}

/* --- type ------------------------------------------------------ */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:300;
  text-transform:lowercase;
  letter-spacing:.005em;
  line-height:1.06;
  margin:0;
}
h1{font-size:clamp(2.6rem,1.5rem + 5.4vw,5.6rem)}
h2{font-size:clamp(2rem,1.35rem + 3vw,3.5rem);line-height:1.1}
h3{font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);line-height:1.2}
b,strong,.bold{font-weight:700}
h1 b,h2 b,h3 b{font-weight:700}

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 1.5rem;
}
.on-dark .eyebrow{color:var(--gold)}
.lede{font-size:clamp(1.06rem,1rem + .4vw,1.28rem);line-height:1.66;color:var(--muted);max-width:56ch}
.on-dark .lede{color:var(--muted-invert)}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}

.rule{width:3.5rem;height:3px;background:var(--gold);border:0;margin:0 0 2rem}

/* --- buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:1.05rem 1.9rem;border:2px solid transparent;border-radius:2px;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn-gold:hover{background:#F5D87E;border-color:#F5D87E}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-dark{border-color:var(--slate);color:var(--slate)}
.btn-dark:hover{background:var(--slate);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* --- header ---------------------------------------------------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--gold);color:var(--ink);padding:.75rem 1.25rem}

.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--slate);
  border-bottom:1px solid rgba(235,201,94,.16);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:78px}
.brand{
  display:block;flex-shrink:0;text-decoration:none;
  width:130px;height:43px;
  background:url(assets/DND_Logo-Full80.png) left center/contain no-repeat;
}
.nav{display:flex;align-items:center;gap:clamp(1.25rem,3vw,2.4rem)}
.nav a{
  font-family:var(--display);font-size:1.05rem;font-weight:400;
  text-transform:lowercase;text-decoration:none;color:rgba(255,255,255,.8);
  padding-block:.35rem;border-bottom:2px solid transparent;transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--gold);border-color:var(--gold)}
.nav .nav-cta{color:var(--gold);border-color:rgba(235,201,94,.4)}
@media (max-width:720px){
  .nav{gap:1.1rem}
  .nav a{font-size:.95rem}
  .nav .nav-hide{display:none}
  .brand{width:112px;height:37px}
}

/* --- hero ------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 100% at 78% 0%,rgba(235,201,94,.10),transparent 58%),
    linear-gradient(165deg,var(--slate) 0%,var(--slate-deep) 55%,var(--ink) 100%);
  color:#fff;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:url(assets/hex.svg) 0 0 repeat;
  background-size:52px 90px;
  opacity:.13;
  mask-image:radial-gradient(120% 90% at 70% 15%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 15%,#000 0%,transparent 72%);
}
.hero .wrap{position:relative;padding-block:clamp(5rem,12vw,9.5rem)}
.hero h1{max-width:16ch;margin-bottom:2rem}
.hero h1 b{color:var(--gold)}
.hero .lede{margin-bottom:2.75rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}
.hero-meta{
  margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem);
}
.hero-meta div{min-width:150px}
.hero-meta dt{
  font-family:var(--display);font-size:2rem;font-weight:300;color:var(--gold);
  text-transform:lowercase;line-height:1;margin-bottom:.4rem;
}
.hero-meta dd{margin:0;font-size:.86rem;color:var(--muted-invert);line-height:1.5}

/* --- section heads --------------------------------------------- */
.head{max-width:60ch;margin-bottom:clamp(2.75rem,6vw,4.5rem)}
.head h2{margin-bottom:1.5rem}

/* --- the duo --------------------------------------------------- */
.duo{background:var(--bone)}
.pair{display:grid;gap:clamp(2.5rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:840px){.pair{grid-template-columns:1fr 1fr}}
.person{display:flex;flex-direction:column}
.portrait{
  position:relative;width:min(230px,62%);aspect-ratio:.866;margin-bottom:1.75rem;overflow:hidden;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--slate) url(assets/DND_Logo.png) center/34% no-repeat;
}
.portrait img{width:100%;height:100%;object-fit:cover}
.person .role{
  font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 .5rem;
}
.person h3{margin-bottom:1rem}
.person h3 b{display:block;font-weight:700}
.person p{color:var(--muted);font-size:1rem}
.person .quote{
  margin-top:1.5rem;padding-left:1.25rem;border-left:3px solid var(--gold);
  font-family:var(--display);font-size:1.2rem;font-weight:300;line-height:1.4;
  color:var(--ink);text-transform:lowercase;
}

/* --- services -------------------------------------------------- */
.cards{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:1fr}
@media (min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{padding-top:2rem;border-top:3px solid var(--gold)}
.card h3{margin-bottom:1rem}
.card p{color:var(--muted);font-size:.98rem;margin-bottom:1rem}
.card ul{margin:0;padding:0;list-style:none}
.card li{
  font-size:.9rem;color:var(--muted);padding-left:1.15rem;position:relative;margin-bottom:.4rem;
}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--gold);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}

/* --- work ------------------------------------------------------ */
.work{background:var(--slate);color:#fff}
.work h2,.work h3{color:#fff}
.roster{margin-top:3rem}
.roster + .roster{margin-top:3.5rem}
.roster-label{
  font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1.5rem;
  padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.14);
}
.clients{display:grid;gap:1.5rem 2rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media (min-width:640px){.clients{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.clients{grid-template-columns:repeat(3,1fr)}}
.clients a{
  text-decoration:none;display:block;padding:.15rem 0;
  border-bottom:1px solid transparent;transition:border-color .18s;
}
.clients a:hover{border-color:var(--gold)}
.clients .name{
  font-family:var(--display);font-size:1.22rem;font-weight:400;text-transform:lowercase;
  color:#fff;display:block;line-height:1.25;
}
.clients a:hover .name{color:var(--gold)}
.clients .what{font-size:.82rem;color:var(--muted-invert);display:block;margin-top:.15rem}

/* --- process --------------------------------------------------- */
.steps{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.steps{grid-template-columns:1fr 1fr}}
.step{display:flex;gap:1.35rem;align-items:flex-start}
.step-num{
  flex:0 0 auto;width:52px;aspect-ratio:.866;display:grid;place-items:center;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--gold);color:var(--ink);
  font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1;
}
.step h3{margin-bottom:.6rem}
.step p{color:var(--muted);font-size:.98rem}

/* --- contact --------------------------------------------------- */
.contact{background:var(--gold);color:var(--ink)}
.contact .eyebrow{color:rgba(26,29,34,.6)}
.contact h2{margin-bottom:1.5rem;max-width:18ch}
.contact .lede{color:rgba(26,29,34,.78);max-width:52ch}
.contact-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
@media (min-width:820px){.contact-grid{grid-template-columns:1.15fr .85fr}}
.contact-card{background:var(--ink);color:#fff;padding:clamp(1.75rem,4vw,2.5rem);border-radius:3px}
.contact-card .label{
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:0 0 .4rem;
}
.contact-card a.mail{
  font-family:var(--display);font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);font-weight:300;
  color:#fff;text-decoration:none;border-bottom:2px solid var(--gold);
  display:inline-block;line-height:1.3;word-break:break-word;
}
.contact-card a.mail:hover{color:var(--gold)}
.contact-card .sep{height:1px;background:rgba(255,255,255,.14);margin:1.75rem 0}
.contact-card p{font-size:.9rem;color:var(--muted-invert)}

/* --- footer ---------------------------------------------------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.6);padding-block:3.5rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;justify-content:space-between}
.site-footer .brand{width:120px;height:40px}
.site-footer .links{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.86rem}
.site-footer a{color:rgba(255,255,255,.6);text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.site-footer small{font-size:.8rem;display:block;width:100%;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.42)}

/* --- interior pages (page.html / index.html / 404) ------------- */
.page-hero{background:var(--slate);color:#fff;padding-block:clamp(3.5rem,8vw,6rem)}
.page-hero h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4rem)}
.page-body{padding-block:var(--section)}
.page-body .wrap{max-width:74ch}
.page-body h2,.page-body h3{margin-top:2.5rem;margin-bottom:1rem}
.page-body ul,.page-body ol{padding-left:1.25rem}
.page-body li{margin-bottom:.5rem}
.page-body a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.post-list{display:grid;gap:2.5rem;list-style:none;margin:0;padding:0}
.post-list h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:.5rem}
.post-list a{text-decoration:none}
.post-list a:hover{color:var(--gold-deep)}