/* ============================================================================
   LMP STUDIO. Shared stylesheet for laurenpenamedia.com.
   Written 2026-09-08. Replaces the ivory, sage and gold build.

   DIRECTION: classic magazine. Black ground, off white type, Didone display
   serif, hairline rules, letterspaced small caps labels, generous air, and
   NO COLOUR AT ALL. Monochrome is the brand. Matches the Craftara treatment
   by design, but this is LMP Studio's own file, not a shared one, so the two
   brands can diverge later without breaking each other.

   HARD RULES, do not undo these:
   - Zero rounded corners. Nothing on this site has a border radius.
   - No centred hero, no coloured eyebrow, no card grid with hover lift, no
     drop shadows. Those were the previous build and they read as template.
   - Body copy is warm off white (#E6E2DA), NOT pure white. Pure white on
     pure black at body size halates. Headlines are #FFF.
   - One stylesheet for all three pages so they cannot drift apart.

   Fonts are system only, no Google Fonts request. Didot ships on Mac, Bodoni
   on Windows, Georgia everywhere as the floor. That removes a render
   blocking network call and the layout shift that came with it.
   ========================================================================== */

:root{
  --ink:#000000;
  --paper:#FFFFFF;
  --body:#E6E2DA;
  --dim:#9A958C;
  --rule:rgba(255,255,255,.16);
  --rule-strong:rgba(255,255,255,.42);
  --display:Didot,"Bodoni 72","Bodoni MT","Playfair Display","Times New Roman",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--ink);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--paper)}
img{max-width:100%}

.wrap{max-width:1120px;margin:0 auto;padding:0 44px}
.label{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.rule-top{border-top:1px solid var(--rule)}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;padding:24px 44px}
.logo{font-family:var(--display);font-size:24px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.masthead nav a{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none;margin-left:30px;padding-bottom:4px}
.masthead nav a:hover{color:var(--paper)}
.masthead nav a.now{color:var(--paper);border-bottom:1px solid var(--paper)}

/* ---------- hero ---------- */
.hero .wrap{padding-top:96px;padding-bottom:88px}
.hero h1{font-family:var(--display);font-weight:400;color:var(--paper);font-size:76px;line-height:1.02;letter-spacing:-.014em;margin-top:24px;max-width:15em}
.hero h1 em{font-style:italic}
.hero .deck{font-size:18px;line-height:1.68;margin-top:28px;max-width:34em}
.hero .meta{margin-top:30px;font-size:13px;letter-spacing:.06em;color:var(--dim)}
.hero .meta a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule)}
.hero .meta a:hover{color:var(--paper)}
.hero.split .wrap{display:grid;grid-template-columns:1.6fr .4fr;gap:64px;align-items:end}
.hero aside{border-left:1px solid var(--rule);padding-left:28px}
.hero aside p{font-size:14.5px;line-height:1.6;color:var(--dim);margin-top:14px}

/* ---------- buttons ---------- */
.buy{display:inline-block;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:15px 26px;text-decoration:none;margin-top:26px;border:1px solid var(--paper)}
.buy:hover{background:transparent;color:var(--paper)}
.buy.ghost{background:transparent;color:var(--paper);border-color:var(--rule-strong)}
.buy.ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- sections ---------- */
section{padding:84px 0}
.sec-head{display:grid;grid-template-columns:210px 1fr;gap:52px;margin-bottom:52px}
.sec-head h2{font-family:var(--display);font-weight:400;color:var(--paper);font-size:46px;line-height:1.1;letter-spacing:-.01em}
.sec-head p{color:var(--dim);font-size:17.5px;margin-top:16px;max-width:37em}

/* ---------- ruled list: services, steps, experience ---------- */
.ruled{border-top:1px solid var(--rule)}
.ruled > div{display:grid;grid-template-columns:210px 270px 1fr;gap:40px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.ruled .n{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.ruled h3{font-family:var(--display);font-weight:400;font-size:25px;color:var(--paper);line-height:1.2}
.ruled p{font-size:16px;max-width:39em}
.ruled > div:hover{background:rgba(255,255,255,.03)}

/* ---------- credits table, the film festival programme look ---------- */
.credits{border-top:1px solid var(--rule);width:100%;border-collapse:collapse}
.credits tr{border-bottom:1px solid var(--rule)}
.credits tr:hover{background:rgba(255,255,255,.03)}
.credits td{padding:20px 24px 20px 0;vertical-align:baseline}
.credits .yr{font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--dim);white-space:nowrap;width:120px}
.credits .ttl{font-family:var(--display);font-size:23px;color:var(--paper);line-height:1.2;width:290px}
.credits .kind{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);width:110px}
.credits .role{font-size:15.5px;color:var(--body)}
.credits .award{display:inline-block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:3px 8px;margin-left:10px;vertical-align:2px}

/* ---------- pull statement ---------- */
.statement{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.statement .wrap{padding-top:88px;padding-bottom:88px}
.statement p{font-family:var(--display);font-size:42px;line-height:1.22;color:var(--paper);max-width:19em;letter-spacing:-.01em}
.statement p + p{font-family:var(--sans);font-size:17.5px;color:var(--dim);margin-top:26px;max-width:34em;letter-spacing:0;line-height:1.65}

/* ---------- three figures ---------- */
.figures{display:grid;grid-template-columns:210px 1fr;gap:52px}
.figures dl{border-top:1px solid var(--rule)}
.figures div{display:grid;grid-template-columns:190px 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--rule)}
.figures dt{font-family:var(--display);font-size:52px;line-height:.9;color:var(--paper);letter-spacing:-.02em}
.figures dd{font-size:16.5px;max-width:35em}

/* ---------- two column prose ---------- */
.twocol{display:grid;grid-template-columns:210px 1fr;gap:52px}
.twocol h2{font-family:var(--display);font-weight:400;font-size:38px;color:var(--paper);line-height:1.14;margin-bottom:20px}
.twocol p{max-width:38em;margin-bottom:16px}
.twocol p:last-child{margin-bottom:0}

/* ---------- inverted block ---------- */
.invert{background:var(--paper);color:var(--ink)}
.invert .wrap{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.invert .label{color:#6b6b6b}
.invert h2{font-family:var(--display);font-weight:400;font-size:46px;line-height:1.1;color:var(--ink);margin-top:18px;letter-spacing:-.01em}
.invert p{color:#3a3a3a;margin-top:20px;font-size:17px}

/* ---------- contact form ---------- */
.contact{display:grid;grid-template-columns:210px 1fr;gap:52px}
.contact h2{font-family:var(--display);font-weight:400;font-size:44px;color:var(--paper);line-height:1.1;letter-spacing:-.01em}
.contact p{color:var(--dim);margin-top:16px;max-width:34em}
.contact form{margin-top:34px;max-width:520px}
.contact .field{display:flex;border-bottom:1px solid var(--rule-strong);margin-bottom:22px}
.contact input,.contact textarea{flex:1;background:transparent;border:0;font-size:16px;padding:13px 2px;color:var(--paper);font-family:var(--sans);resize:vertical}
.contact input::placeholder,.contact textarea::placeholder{color:var(--dim)}
.contact input:focus,.contact textarea:focus{outline:none}
.contact button{background:var(--paper);color:var(--ink);border:1px solid var(--paper);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:15px 30px;margin-top:6px}
.contact button:hover{background:transparent;color:var(--paper)}
.contact .direct{margin-top:26px;font-size:14px;color:var(--dim)}
.contact .direct a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-strong)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:44px 0 64px}
footer .wrap{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
footer p{font-size:12.5px;color:var(--dim);max-width:34em}
footer .name{font-family:var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);font-size:14px}
footer nav a{color:var(--dim);text-decoration:none;font-size:12.5px;margin-right:20px}
footer nav a:hover{color:var(--paper)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .wrap{padding:0 24px}
  .masthead .wrap{padding:20px 24px;flex-wrap:wrap;gap:12px}
  .masthead nav a{margin-left:0;margin-right:22px}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  .hero.split .wrap{grid-template-columns:1fr;gap:40px;align-items:start}
  .hero h1{font-size:40px}
  .hero aside{border-left:0;border-top:1px solid var(--rule);padding-left:0;padding-top:26px}
  .sec-head,.figures,.twocol,.contact,.invert .wrap{grid-template-columns:1fr;gap:20px}
  .figures div{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .figures dt{font-size:44px}
  .ruled > div{grid-template-columns:1fr;gap:8px;padding:22px 0}
  .statement p{font-size:30px}
  .sec-head h2,.invert h2,.twocol h2,.contact h2{font-size:32px}
  section{padding:56px 0}
  /* credits collapse to stacked blocks so nothing needs sideways scrolling */
  .credits,.credits tbody,.credits tr,.credits td{display:block;width:auto}
  .credits tr{padding:20px 0}
  .credits td{padding:0 0 4px 0}
  .credits .yr,.credits .ttl,.credits .kind{width:auto}
  .credits .ttl{font-size:21px;margin:4px 0}
}

/* ---------- added 2026-09-28: kit price in the split hero aside, links inside figures ---------- */
.hero aside .kit-price{font-family:var(--display);font-size:64px;line-height:1;color:var(--paper);margin-top:14px}
.figures dd a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--rule-strong)}